|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <TableLayout> | 
|---|
|  |  |  | <template v-slot:table-wrap> | 
|---|
|  |  |  | <el-tabs v-model="activeName"> | 
|---|
|  |  |  | <el-tab-pane label="普通访客" name="first"></el-tab-pane> | 
|---|
|  |  |  | <el-tab-pane label="施工访客" name="second"></el-tab-pane> | 
|---|
|  |  |  | </el-tabs> | 
|---|
|  |  |  | <div class="config"> | 
|---|
|  |  |  | <div class="config_list"> | 
|---|
|  |  |  | <div class="config_list_head"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="line"></div> | 
|---|
|  |  |  | <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="item yellow" | 
|---|
|  |  |  | :class="{ active: activeSel === 'one' }" | 
|---|
|  |  |  | @click="flowClick('one')" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div class="head">审批人</div> | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <div>被访人</div> | 
|---|
|  |  |  | <i class="el-icon-arrow-right"></i> | 
|---|
|  |  |  | <template v-for="(item, index) in apprList"> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="item yellow" | 
|---|
|  |  |  | :class="{ active: item.active }" | 
|---|
|  |  |  | @click="flowClick(index)" | 
|---|
|  |  |  | :key="index" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div class="head">审批人</div> | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <div>被访人</div> | 
|---|
|  |  |  | <i class="el-icon-arrow-right"></i> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="arrows"> | 
|---|
|  |  |  | <div class="line"></div> | 
|---|
|  |  |  | <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="arrows" :key="index"> | 
|---|
|  |  |  | <div class="line"></div> | 
|---|
|  |  |  | <img src="@/assets/images/peizhi_ar@2x.png" alt="" /> | 
|---|
|  |  |  | <i | 
|---|
|  |  |  | v-if="apprList.length - 1 === index" | 
|---|
|  |  |  | @click="handleAddAppr()" | 
|---|
|  |  |  | class="el-icon-circle-plus add" | 
|---|
|  |  |  | ></i> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <template v-if="false"> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="item yellow" | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="df_ac mt10"> | 
|---|
|  |  |  | <span class="mr20">选择修改项</span> | 
|---|
|  |  |  | <el-select v-model="param.list"  collapse-tags multiple placeholder="请选择,多选"> | 
|---|
|  |  |  | <el-select | 
|---|
|  |  |  | v-model="param.list" | 
|---|
|  |  |  | collapse-tags | 
|---|
|  |  |  | multiple | 
|---|
|  |  |  | placeholder="请选择,多选" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-option | 
|---|
|  |  |  | v-for="item in options" | 
|---|
|  |  |  | :key="item.value" | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | apprList: [ | 
|---|
|  |  |  | { name: '', active: false }, | 
|---|
|  |  |  | { name: '', active: false } | 
|---|
|  |  |  | ], | 
|---|
|  |  |  |  | 
|---|
|  |  |  | value: '', | 
|---|
|  |  |  | radio: 0, | 
|---|
|  |  |  | radio1: 0, | 
|---|
|  |  |  | checked: '', | 
|---|
|  |  |  | checkList: [], | 
|---|
|  |  |  |  | 
|---|
|  |  |  | param: {}, | 
|---|
|  |  |  | activeSel: 'one', | 
|---|
|  |  |  | activeName: 'first', | 
|---|
|  |  |  | isShowTransfer: false, | 
|---|
|  |  |  | fromData: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | flowClick (val) { | 
|---|
|  |  |  | this.activeSel = val | 
|---|
|  |  |  | flowClick (i) { | 
|---|
|  |  |  | this.apprList.forEach((item, index) => { | 
|---|
|  |  |  | if (i === index) { | 
|---|
|  |  |  | item.active = true | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | item.active = false | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleAddAppr () { | 
|---|
|  |  |  | this.apprList.push({ name: '', active: false }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | selStaff () { | 
|---|
|  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | width: 1px; | 
|---|
|  |  |  | height: 60px; | 
|---|
|  |  |  | background-color: #ccc; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .add { | 
|---|
|  |  |  | font-size: 40px; | 
|---|
|  |  |  | color: #2080f7; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | z-index: 999; | 
|---|
|  |  |  | top: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | img { | 
|---|
|  |  |  | width: 12px; | 
|---|
|  |  |  | } | 
|---|