From 5b9c22a1e5e2364603778d1ed95e73129b47f1db Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期二, 12 十一月 2024 10:52:47 +0800
Subject: [PATCH] ll

---
 admin/src/views/operation/serviceCar/apprConfig.vue |  636 ++++++++++++++++++++++++++++++++++++++-------------------
 1 files changed, 418 insertions(+), 218 deletions(-)

diff --git a/admin/src/views/operation/serviceCar/apprConfig.vue b/admin/src/views/operation/serviceCar/apprConfig.vue
index 70a430b..e42cad6 100644
--- a/admin/src/views/operation/serviceCar/apprConfig.vue
+++ b/admin/src/views/operation/serviceCar/apprConfig.vue
@@ -1,18 +1,17 @@
 <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 v-model="activeType" @tab-click="handleClick">
+        <el-tab-pane label="甯傚唴鐢ㄨ溅" name="3"></el-tab-pane>
+        <el-tab-pane label="甯傚鐢ㄨ溅" name="4"></el-tab-pane>
       </el-tabs>
       <div class="config">
         <div class="config_list">
           <div class="config_list_head">
-            <span>娴佺▼閰嶇疆</span>
-            <el-button type="primary">鍙戝竷</el-button>
+            <span>閰嶇疆娴佺▼</span>
           </div>
           <div class="config_content">
-            <div class="item active">
+            <div class="item">
               <div class="head">鍙戣捣浜�</div>
               <div class="content">鍐呴儴鍛樺伐</div>
             </div>
@@ -20,45 +19,58 @@
               <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>
+            <div v-for="(item, index) in apprList" :key="index">
+              <div class="item yellow" :class="{
+                active: activeIndex == index,
+                blue: item.type == '1',
+              }" @click="flowClick(index)">
+                <div class="head">{{ item.remark }}</div>
+                <div class="content">
+                  <!-- 瀹℃壒 -->
+                  <template v-if="item.type == 0">
+                    <template v-if="item.memberType == '2'">
+                      <div>閮ㄩ棬涓荤</div>
+                    </template>
+                    <template v-if="item.memberType == '1'">
+                      <div v-if="item.objIds && item.objIds.length === 1">
+                        <span>{{ item.objIds[0].name }}
+                          {{ item.objIds[0].companyName }}</span>
+                        <span v-if="item.approveType == 0 && item.type == '0'">
+                          鎴栫</span>
+                        <span v-if="item.approveType == 1 && item.type == '0'">
+                          浼氱</span>
+                      </div>
+                      <div v-else-if="item.objIds && item.objIds.length > 1">
+                        <span>{{ item.objIds[0].name }} 绛�</span>
+                        <span v-if="item.approveType == 0 && item.type == '0'">
+                          鎴栫</span>
+                        <span v-if="item.approveType == 1 && item.type == '0'">
+                          浼氱</span>
+                      </div>
+                      <div v-else>璇烽�夋嫨</div>
+                      <i class="el-icon-arrow-right"></i>
+                    </template>
+                  </template>
+                  <!-- 鎶勯�� -->
+                  <template v-if="item.type == 1">
+                    <div v-if="item.objIds && item.objIds.length === 1">
+                      <span>{{ item.objIds[0].name }}
+                        {{ item.objIds[0].companyName }}</span>
+                    </div>
+                    <div v-else-if="item.objIds && item.objIds.length > 1">
+                      <span>{{ item.objIds[0].name }} 绛�</span>
+                    </div>
+                    <div v-else>璇烽�夋嫨</div>
+                    <i v-if="item.memberType == '1'" class="el-icon-arrow-right"></i>
+                  </template>
+                </div>
               </div>
-            </div>
-            <div class="arrows">
-              <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>
-              </div>
-            </div>
-            <div class="arrows">
-              <div class="line"></div>
-              <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
-            </div>
-            <div
-              class="item blue"
-              :class="{ active: activeSel === 'two' }"
-              @click="flowClick('two')"
-            >
-              <div class="head">鎶勯�佷汉</div>
-              <div class="content">
-                <div>鎸囨淳椹鹃┒鍛�</div>
-                <i class="el-icon-arrow-right"></i>
+              <div class="arrows">
+                <template v-if="apprList.length - 1 !== index">
+                  <div class="line"></div>
+                  <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
+                </template>
+                <i v-if="apprList.length - 2 === index" @click="handleAddAppr()" class="el-icon-circle-plus add"></i>
               </div>
             </div>
           </div>
@@ -66,113 +78,115 @@
         <div class="config_data">
           <div class="config_data_item">
             <div class="config_data_item_label">閫夋嫨璇ヨ妭鐐圭殑瀹℃壒浜�</div>
-            <el-radio-group v-model="radio">
+            <div class="df_ac mb10">
+              <div>瀹℃壒鑺傜偣鍚嶇О</div>
+              <el-input class="w200 ml10" v-model="apprList[activeIndex].remark"></el-input>
+            </div>
+            <!-- 鎶勯�佷汉 -->
+            <template v-if="apprList[activeIndex].type == '1'">
+              <div class="config_data_item_reviewed_content">
+                <div v-for="mem, memIndex in apprList[activeIndex].objIds" :key="mem.id"
+                  class="config_data_item_reviewed_content_item">
+                  <span>{{ mem.name }}</span>
+                  <i @click="memDel(memIndex)" class="el-icon-close"></i>
+                </div>
+                <span class="add" @click="selStaff">+娣诲姞</span>
+              </div>
+            </template>
+            <el-radio-group v-if="apprList[activeIndex].type == '0'" v-model="apprList[activeIndex].memberType">
+              <!-- <el-radio :label="0">琚浜�</el-radio> -->
               <el-radio :label="1">鎸囧畾浜哄憳</el-radio>
               <el-radio :label="2">閮ㄩ棬涓荤</el-radio>
             </el-radio-group>
-            <div class="config_data_item_reviewed" v-if="radio === 1">
+            <div class="config_data_item_reviewed" v-if="apprList[activeIndex].memberType == 1">
               <div class="config_data_item_reviewed_label">
                 <span>鎸囧畾瀹℃牳浜�</span>
                 <span>涓嶈秴杩�20浜�</span>
               </div>
               <div class="config_data_item_reviewed_content">
-                <div class="config_data_item_reviewed_content_item">
-                  <span>鏍撳瓙鍝�</span>
-                  <i class="el-icon-close"></i>
+                <div v-for="(mem, memIndex) in apprList[activeIndex].objIds" :key="mem.id"
+                  class="config_data_item_reviewed_content_item">
+                  <span>{{ mem.name }}</span>
+                  <i class="el-icon-close" @click="memDel(memIndex)"></i>
                 </div>
                 <span class="add" @click="selStaff">+娣诲姞</span>
               </div>
             </div>
-            <div class="config_data_item_reviewed" v-if="radio === 2">
+            <div class="config_data_item_reviewed" v-if="apprList[activeIndex].memberType == 2">
               <div class="config_data_item_reviewed_label">
                 <span>閮ㄩ棬涓荤</span>
               </div>
               <div class="config_data_item_reviewed_r">
-                <span>琚浜虹殑</span>
-                <el-select
-                  v-model="value"
-                  placeholder="璇烽�夋嫨"
-                  style="margin: 0 20px 0 10px"
-                >
-                  <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
+                <span>鐢宠浜虹殑</span>
+                <el-select v-model="apprList[activeIndex].objLevel" placeholder="璇烽�夋嫨" style="margin: 0 20px 0 10px">
+                  <el-option label="鐩存帴涓荤" :value="0" />
+                  <el-option label="浜岀骇涓荤" :value="1" />
+                  <el-option label="涓夌骇涓荤" :value="2" />
+                  <el-option label="鍥涚骇涓荤" :value="4" />
                 </el-select>
-                <el-checkbox v-model="checked"
-                  >鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠e鏍�</el-checkbox
-                >
+                <el-checkbox v-model="apprList[activeIndex].noleaderOpt" :true-label="1"
+                  :false-label="0">鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠e鏍�</el-checkbox>
               </div>
             </div>
           </div>
-          <div class="config_data_item" v-if="radio !== 0">
+          <div class="config_data_item" v-if="
+            (apprList[activeIndex].memberType == 1 ||
+              apprList[activeIndex].memberType == 2) &&
+            apprList[activeIndex].type == '0'
+          ">
             <div class="config_data_item_label">
               瀹℃壒鏂瑰紡
               <span>瀹℃壒浜轰负澶氫釜鏃讹紝閲囩敤鐨勫鎵规柟寮�</span>
             </div>
-            <el-radio-group
-              v-model="radio1"
-              style="display: flex; flex-direction: column"
-            >
-              <el-radio :label="0" style="margin-bottom: 20px"
-                >鎴栫锛堝叾涓竴鍚嶅鎵逛汉鍚屾剰鎴栨嫆缁濆嵆鍙級</el-radio
-              >
+            <el-radio-group v-model="apprList[activeIndex].approveType" style="display: flex; flex-direction: column">
+              <el-radio :label="0" style="margin-bottom: 20px">鎴栫锛堝叾涓竴鍚嶅鎵逛汉鍚屾剰鎴栨嫆缁濆嵆鍙級</el-radio>
               <el-radio :label="1">浼氱锛堟墍鏈夊鎵逛汉閮藉悓鎰忔墠鍙�氳繃锛�</el-radio>
             </el-radio-group>
           </div>
-          <div class="df_ac">
-            <span class="mr10"><strong>鍏佽淇敼鐢宠椤�</strong></span>
-            <el-switch v-model="param.aa" active-value="1" inactive-value="0">
-            </el-switch>
+          <div v-if="apprList[activeIndex].type == '0'" class="df_ac mb10">
+            <div>鍏佽淇敼"椹鹃┒鍛�"</div>
+            <el-switch class="ml10" :active-value="1" :inactive-value="0"
+              v-model="apprList[activeIndex].driverParam"></el-switch>
           </div>
-          <div class="df_ac mt10">
-            <span class="mr20">閫夋嫨淇敼椤�</span>
-            <el-select
-              v-model="param.list"
-              collapse-tags
-              multiple
-              placeholder="璇烽�夋嫨,澶氶��"
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="config_data_submit" v-if="radio !== 0">
-            <el-button style="background: #435ebe" type="primary"
-              >淇濆瓨閰嶇疆椤�</el-button
-            >
-          </div>
+          <div class="config_data_submit">
+            <el-button @click="onSubmit" :loading="subLoading" style="background: #435ebe"
+              type="primary">淇濆瓨閰嶇疆椤�</el-button>
+            <el-button v-if="activeIndex !== 0 && activeIndex !== apprList.length - 1" type="danger" plain
+              @click="handleDel">鍒犻櫎鑺傜偣</el-button>
+          </div>3
         </div>
       </div>
     </template>
     <!--  -->
-    <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="800px">
-      <tree-transfer
-        v-model="param.menuIds"
-        :title="['鏈��', '宸查��']"
-        :from_data="fromData"
-        :to_data="selData"
-        :defaultProps="{ label: 'label' }"
-        mode="transfer"
-        height="500px"
-        filter
-        openAll
-        ref="treeTransfer"
-      >
-      </tree-transfer>
+    <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="1000px">
+      <div class="staff_modal">
+        <div class="left">
+          <div style="
+              width: 100%;
+              height: 50px;
+              background: rgba(242, 242, 242, 1);
+              line-height: 50px;
+              text-align: center;
+              font-size: 14px;
+            ">
+            浼佷笟缁勭粐鏋舵瀯
+          </div>
+          <div style="width: 100%; max-height: 560px; overflow-y: scroll">
+            <Tree :list="companyTree" :defaultProps="{
+              name: 'name',
+              status: 'fsStatus',
+              children: 'childList',
+              id: 'id',
+            }" @callback="callback" />
+          </div>
+        </div>
+        <el-transfer filterable :title="['鏈��', '宸查��']" openAll :props="{ label: 'name', key: 'keyTemp' }"
+          filter-placeholder="鎼滅储鍛樺伐" v-model="searchForm.objIds" :data="memberList" class="transfer">
+        </el-transfer>
+      </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="isShowTransfer = false">鍙� 娑�</el-button>
-        <el-button type="primary" @click="isShowTransfer = false"
-          >纭� 瀹�</el-button
-        >
+        <el-button type="primary" @click="TransferSub">纭� 瀹�</el-button>
       </span>
     </el-dialog>
   </TableLayout>
@@ -180,87 +194,201 @@
 
 <script>
 import TableLayout from '@/layouts/TableLayout'
-import treeTransfer from 'el-tree-transfer'
+// import treeTransfer from 'el-tree-transfer'
+import Tree from '@/components/common/Tree'
+import { approveTemplSave, approveTemplByType } from '@/api'
+import { fetchList } from '@/api/business/company'
+import { fetchList as memberListPost } from '@/api/business/member'
 export default {
   name: 'config',
   components: {
     TableLayout,
-    treeTransfer
+    Tree
   },
   data() {
     return {
-
-      value: '',
-      radio: 0,
-      radio1: 0,
-      checked: '',
-      checkList: [],
+      activeType: '3',
+      subLoading: false,
+      apprList: [
+        { remark: '瀹℃壒浜�', active: false, type: '0', objIds: [] },
+        { remark: '鎶勯�佷汉', active: false, type: '1', objIds: [] }
+      ],
+      activeIndex: 0,
 
       param: {},
-      activeSel: 'one',
-      activeName: 'first',
+      searchForm: {},
       isShowTransfer: false,
-      fromData: [
-        {
-          id: '1',
-          pid: 0,
-          label: '涓�绾� 1',
-          children: [
-            {
-              id: '1-1',
-              pid: '1',
-              label: '浜岀骇 1-1',
-              disabled: true,
-              children: []
-            },
-            {
-              id: '1-2',
-              pid: '1',
-              label: '浜岀骇 1-2',
-              children: [
-                {
-                  id: '1-2-1',
-                  pid: '1-2',
-                  children: [],
-                  label: '浜岀骇 1-2-1'
-                },
-                {
-                  id: '1-2-2',
-                  pid: '1-2',
-                  children: [],
-                  label: '浜岀骇 1-2-2'
-                }
-              ]
-            }
-          ]
-        }
-      ],
-      options: [{
-        value: '閫夐」1',
-        label: '榛勯噾绯�'
-      }, {
-        value: '閫夐」2',
-        label: '鍙岀毊濂�'
-      }, {
-        value: '閫夐」3',
-        label: '铓典粩鐓�'
-      }, {
-        value: '閫夐」4',
-        label: '榫欓』闈�'
-      }, {
-        value: '閫夐」5',
-        label: '鍖椾含鐑ら腑'
-      }],
-      selData: []
+      memberList: [],
+      companyTree: []
     }
   },
+  created() {
+    this.getfindCompanyTreePage()
+    this.initDate()
+  },
   methods: {
-    flowClick(val) {
-      this.activeSel = val
+    handleClick() {
+      this.apprList = []
+      const arr = [
+        { remark: '瀹℃壒浜�', active: false, type: 0, objIds: [] },
+        { remark: '鎶勯�佷汉', active: false, type: 1, objIds: [] }
+      ]
+      this.apprList = [...arr]
+      this.initDate()
+    },
+    flowClick(i) {
+      this.activeIndex = i
+      this.apprList.forEach((item, index) => {
+        if (i === index) {
+          item.active = true
+          if (item.objIds && item.objIds.length > 0) {
+            const objIds = item.objIds.map(i => {
+              return `${i.id}-${i.name}${i.companyName ? '-' + i.companyName : ''}`
+            })
+            this.$set(this.searchForm, 'objIds', objIds)
+          } else {
+            this.$set(this.searchForm, 'objIds', [])
+          }
+        } else {
+          item.active = false
+        }
+      })
+    },
+    initDate() {
+      const { activeType } = this
+      approveTemplByType(activeType).then(res => {
+        if (res && res.paramList) {
+          const arr = res.paramList || []
+          arr.forEach(item => {
+            if (item.memberList && item.memberList.length > 0) {
+              item.objIds = item.memberList.map(i => {
+                return {
+                  id: i.id,
+                  name: i.name,
+                  companyName: i.companyName
+                }
+              })
+            } else {
+              item.objIds = []
+            }
+          })
+          this.apprList = arr
+          this.flowClick(0)
+          this.$forceUpdate()
+        }
+
+        // console.log(res);
+      })
+    },
+    onSubmit() {
+      const { apprList, activeType } = this
+      const temp = JSON.parse(JSON.stringify(apprList))
+      temp.forEach((item, index) => {
+        item.level = index + 1
+        if (item.objIds && item.objIds.length > 0) {
+          item.objIds = item.objIds.map(i => i.id).join(',')
+        } else {
+          item.objIds = ''
+        }
+      })
+      this.subLoading = true
+      approveTemplSave({
+        type: activeType,
+        paramList: temp
+      }).then(res => {
+        this.subLoading = false
+        this.$tip.success('淇濆瓨鎴愬姛')
+      }, () => {
+        this.subLoading = false
+      })
+    },
+    handleDel() {
+      const { activeIndex } = this
+      this.apprList.splice(activeIndex, 1)
+      this.activeIndex = 0
+    },
+    handleAddAppr() {
+      this.apprList.splice(this.apprList.length - 1, 0, { remark: '瀹℃壒浜�', approveType: 0, active: false, type: 0, objIds: [] })
+      // this.apprList.push({ remark: '瀹℃壒浜�', active: false, type: '0' })
     },
 
+    // 鑾峰彇缁勭粐鏍�
+    getfindCompanyTreePage() {
+      fetchList()
+        .then(res => {
+          if (res && res.length > 0) {
+            res[0].fsStatus = 1
+            this.companyTree = res
+            // // this.searchForm.erpOrgId = res[0].erpId
+            // this.search()
+            // this.department = this.getDepartmentTree(res)
+          }
+        })
+    },
+    getMemberList() {
+      memberListPost({
+        model: {
+          companyId: this.searchForm.companyId || '',
+          canVisit: '',
+          companyType: 1,
+          erpOrgId: '',
+          hasFace: '',
+          hkStatus: '',
+          includeChild: true,
+          type: 2
+        },
+        page: 1,
+        capacity: 300
+      }).then(res => {
+        this.memberList = res.records || []
+        this.memberList.forEach(item => {
+          item.keyTemp = item.id + '-' + item.name + '-' + item.companyName || ''
+        })
+        // console.log('defaultProps', res)
+      })
+    },
+    callback(row) {
+      console.log(row)
+      this.$set(this.searchForm, 'companyId', row.id)
+      this.$set(this.searchForm, 'erpOrgId', row.erpId)
+      this.getMemberList()
+    },
+    TransferSub() {
+      const { activeIndex } = this
+      if (this.searchForm.objIds && this.searchForm.objIds.length > 0) {
+        if (this.searchForm.objIds.length > 20) return this.$message.warning('鏈�澶氶�夋嫨20浜�')
+        const arr = this.searchForm.objIds.map(ii => {
+          const obj = ii.split('-')
+          return {
+            id: Number(obj[0]),
+            name: obj[1],
+            companyName: obj[2] || ''
+          }
+        })
+        this.apprList.forEach((item, index) => {
+          if (activeIndex === index) {
+            item.objIds = arr
+          }
+        })
+      }
+      this.isShowTransfer = false
+      console.log(this.searchForm.objIds)
+    },
+    memDel(memIndex) {
+      const { activeIndex } = this
+      this.apprList.forEach((item, index) => {
+        if (activeIndex === index) {
+          item.objIds.splice(memIndex, 1)
+          const objIds = item.objIds.map(i => {
+            return i.id + '-' + i.name
+          })
+          this.$set(this.searchForm, 'objIds', objIds)
+        }
+      })
+    },
     selStaff() {
       this.isShowTransfer = true
+      this.getMemberList()
     },
     seleItem(i) {
       this.list.forEach((item, index) => {
@@ -280,6 +408,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+
   .config_list {
     width: 543px;
     height: 100%;
@@ -289,18 +418,21 @@
     box-sizing: border-box;
     border: 1px solid #eeeeee;
     background: #f7f7f7;
+
     .config_list_head {
       width: 100%;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: space-between;
+
       span {
         font-size: 18px;
         font-weight: 500;
         color: #222222;
       }
     }
+
     .config_content {
       width: 100%;
       height: calc(100% - 40px);
@@ -310,31 +442,49 @@
       display: flex;
       align-items: center;
       flex-direction: column;
+
       &::-webkit-scrollbar {
         width: 0;
       }
+
       .active {
         border: 2px solid #4456ac !important;
       }
+
       .yellow {
         background: #e89e42 !important;
       }
+
       .blue {
         background: #5094f3 !important;
       }
+
       .arrows {
         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;
         }
       }
+
       .item {
         width: 200px;
         cursor: pointer;
@@ -345,12 +495,14 @@
         position: relative;
         display: flex;
         flex-direction: column;
+
         .head {
           height: 32px;
           line-height: 32px;
           padding: 2px 12px;
           color: #fff;
         }
+
         .content {
           flex: 1;
           background-color: #fff;
@@ -359,32 +511,39 @@
           padding: 0 12px;
           justify-content: space-between;
         }
+
         &:last-child {
           margin: 0 !important;
         }
       }
     }
   }
+
   .config_data {
     flex: 1;
     height: 100%;
     margin-left: 20px;
+
     .config_data_submit {
       margin-top: 50px;
     }
+
     .config_data_item {
       width: 100%;
       display: flex;
       flex-direction: column;
       margin-bottom: 30px;
+
       &:last-child {
         margin: 0 !important;
       }
+
       .config_data_item_label {
         font-size: 16px;
         font-weight: 500;
         color: #222222;
         margin-bottom: 20px;
+
         span {
           font-size: 12px;
           font-weight: 400;
@@ -392,14 +551,17 @@
           margin-left: 10px;
         }
       }
+
       .config_data_item_reviewed {
         width: 100%;
         margin-top: 20px;
+
         .config_data_item_reviewed_r {
           margin-top: 10px;
           width: 100%;
           display: flex;
           align-items: center;
+
           span {
             flex-shrink: 0;
             font-size: 14px;
@@ -407,15 +569,18 @@
             color: #666666;
           }
         }
+
         .config_data_item_reviewed_label {
           display: flex;
           align-items: center;
+
           span {
             &:nth-child(1) {
               font-size: 14px;
               font-weight: 400;
               color: #222222;
             }
+
             &:nth-child(2) {
               font-size: 12px;
               font-weight: 400;
@@ -424,45 +589,80 @@
             }
           }
         }
-        .config_data_item_reviewed_content {
-          width: 400px;
-          margin-top: 10px;
-          height: 110px;
-          padding: 12px;
-          box-sizing: border-box;
-          border-radius: 2px;
-          border: 1px solid #dfe2e8;
-          display: flex;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          .add {
-            font-size: 12px;
-            font-weight: 400;
-            color: #435ebe;
-            cursor: pointer;
-            margin-top: 3px;
-          }
-          .config_data_item_reviewed_content_item {
-            padding: 3px 5px;
-            background: #f4f7fc;
-            border-radius: 2px;
-            box-sizing: border-box;
-            margin-right: 10px;
-            margin-bottom: 10px;
-            span {
-              font-size: 12px;
-              font-weight: 400;
-              color: #333333;
-            }
-            i {
-              color: #949ba2;
-              margin-left: 10px;
-              cursor: pointer;
-            }
-          }
-        }
       }
     }
   }
 }
+
+.config_data_item_reviewed_content {
+  width: 400px;
+  margin-top: 10px;
+  height: 110px;
+  padding: 12px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  border: 1px solid #dfe2e8;
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+
+  .add {
+    font-size: 12px;
+    font-weight: 400;
+    color: #435ebe;
+    cursor: pointer;
+    margin-top: 3px;
+  }
+
+  .config_data_item_reviewed_content_item {
+    padding: 3px 5px;
+    background: #f4f7fc;
+    border-radius: 2px;
+    box-sizing: border-box;
+    margin-right: 10px;
+    margin-bottom: 10px;
+
+    span {
+      font-size: 12px;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    i {
+      color: #949ba2;
+      margin-left: 10px;
+      cursor: pointer;
+    }
+  }
+}
+
+.staff_modal {
+  display: flex;
+
+  .left {
+    width: 300px;
+    margin-right: 20px;
+  }
+
+  .transfer {
+    height: 600px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    ::v-deep .el-transfer-panel {
+      flex: 1;
+      height: 100%;
+    }
+
+    ::v-deep .el-transfer-panel__body {
+      height: 500px;
+    }
+
+    ::v-deep .el-transfer-panel__list.is-filterable {
+      height: 480px;
+    }
+  }
+}
 </style>

--
Gitblit v1.9.3