From c72cb6959cbf43520fbc88f390e2e21da7fbfbf4 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 10 十月 2024 09:09:43 +0800
Subject: [PATCH] ll

---
 admin/src/components/business/OperaPlatformApproveTemplWindow.vue |  660 ++++++++++++++++++++++++++++-------------------------------
 1 files changed, 312 insertions(+), 348 deletions(-)

diff --git a/admin/src/components/business/OperaPlatformApproveTemplWindow.vue b/admin/src/components/business/OperaPlatformApproveTemplWindow.vue
index 6ff22bc..3b093f9 100644
--- a/admin/src/components/business/OperaPlatformApproveTemplWindow.vue
+++ b/admin/src/components/business/OperaPlatformApproveTemplWindow.vue
@@ -1,11 +1,5 @@
 <template>
-  <GlobalWindow
-      :title="title"
-      width="100%"
-      :visible.sync="visible"
-      :confirm-working="isWorking"
-      @confirm="confirm"
-  >
+  <GlobalWindow :title="title" width="100%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm">
     <TableLayout>
       <template v-slot:table-wrap>
         <div class="config">
@@ -23,14 +17,10 @@
                 <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
               </div>
               <div v-for="(item, index) in apprList" :key="index">
-                <div
-                    class="item yellow"
-                    :class="{
+                <div class="item yellow" :class="{
                   active: activeIndex == index,
                   blue: item.type == '1',
-                }"
-                    @click="flowClick(index)"
-                >
+                }" @click="flowClick(index)">
                   <div class="head">{{ item.remark }}</div>
                   <div class="content">
                     <!-- 瀹℃壒 -->
@@ -40,25 +30,19 @@
                       </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>{{ item.objIds[0].name }}
+                            {{ item.objIds[0].companyName }}</span>
                           <span v-if="item.approveType == 0 && item.type == '0'">
-                          鎴栫</span
-                          >
+                            鎴栫</span>
                           <span v-if="item.approveType == 1 && item.type == '0'">
-                          浼氱</span
-                          >
+                            浼氱</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>
                           <span v-if="item.approveType == 1 && item.type == '0'">
-                          浼氱</span
-                          >
+                            浼氱</span>
                         </div>
                         <div v-else>璇烽�夋嫨</div>
                         <i class="el-icon-arrow-right"></i>
@@ -67,19 +51,14 @@
                     <!-- 鎶勯�� -->
                     <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
-                        >
+                        <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>
+                      <i v-if="item.memberType == '1'" class="el-icon-arrow-right"></i>
                     </template>
                   </div>
                 </div>
@@ -88,11 +67,7 @@
                     <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>
+                  <i v-if="apprList.length - 2 === index" @click="handleAddAppr()" class="el-icon-circle-plus add"></i>
                 </div>
               </div>
             </div>
@@ -102,171 +77,114 @@
               <div class="config_data_item_label">閫夋嫨璇ヨ妭鐐圭殑瀹℃壒浜�</div>
               <div class="df_ac mb10">
                 <div>瀹℃壒鑺傜偣鍚嶇О</div>
-                <el-input
-                    class="w200 ml10"
-                    v-model="apprList[activeIndex].remark"
-                ></el-input>
+                <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 in apprList[activeIndex].objIds"
-                      :key="mem.id"
-                      class="config_data_item_reviewed_content_item"
-                  >
+                  <div v-for="mem in apprList[activeIndex].objIds" :key="mem.id"
+                    class="config_data_item_reviewed_content_item">
                     <span>{{ mem.name }}</span>
                     <i 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-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="apprList[activeIndex].memberType == 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
-                      v-for="(mem, memIndex) in apprList[activeIndex].objIds"
-                      :key="mem.id"
-                      class="config_data_item_reviewed_content_item"
-                  >
+                  <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="apprList[activeIndex].memberType == 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="apprList[activeIndex].objLevel"
-                      placeholder="璇烽�夋嫨"
-                      style="margin: 0 20px 0 10px"
-                  >
+                  <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="apprList[activeIndex].noleaderOpt"
-                      :true-label="1"
-                      :false-label="0"
-                  >鎵句笉鍒颁富绠℃椂锛岀敱涓婄骇涓荤浠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="
+            <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="apprList[activeIndex].approveType"
-                  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="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
-              >
+              <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>
           </div>
         </div>
       </template>
       <!--  -->
-      <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="1000px" style="z-index: 99999" append-to-body>
+      <el-dialog title="閫夋嫨鍛樺伐" :visible.sync="isShowTransfer" width="900px" style="z-index: 99999" append-to-body>
         <div class="staff_modal">
           <div class="left">
-            <div
-                style="
+            <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%; height: 100%; overflow-y: scroll">
-              <Tree
-                  :list="companyTree"
-                  :defaultProps="{
+              <Tree :list="companyTree" :defaultProps="{
                 name: 'name',
                 status: 'fsStatus',
                 children: 'childList',
                 id: 'id',
-              }"
-                  @callback="callback"
-              />
+              }" @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 filterable  :titles="['鏈��', '宸查��']" 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="TransferSub">纭� 瀹�</el-button>
-      </span>
+          <el-button @click="isShowTransfer = false">鍙� 娑�</el-button>
+          <el-button type="primary" @click="TransferSub">纭� 瀹�</el-button>
+        </span>
       </el-dialog>
     </TableLayout>
     <span slot="footer" class="dialog-footer">
-        <el-button @click="visible= false">杩斿洖</el-button>
-      </span>
+      <el-button @click="visible = false">杩斿洖</el-button>
+    </span>
   </GlobalWindow>
 </template>
 
@@ -274,7 +192,7 @@
 import BaseOpera from '@/components/base/BaseOpera'
 import TableLayout from '@/layouts/TableLayout'
 import Tree from '@/components/common/Tree'
-import {approveTemplSave, approveTemplById} from '@/api'
+import { approveTemplSave, approveTemplById } from '@/api'
 import { fetchList } from '@/api/business/company'
 import { fetchList as memberListPost } from '@/api/business/member'
 import GlobalWindow from '@/components/common/GlobalWindow'
@@ -282,14 +200,14 @@
   name: 'OperaPlatformReasonWindow',
   extends: BaseOpera,
   components: { Tree, GlobalWindow, TableLayout },
-  data () {
+  data() {
     return {
-      model:{},
+      model: {},
       reasonId: null,
       activeType: '6',
       subLoading: false,
       apprList: [
-        { remark: '瀹℃壒浜�', active: false,memberType:1, type: '1', objIds: [] },
+        { remark: '瀹℃壒浜�', active: false, memberType: 1, type: '1', objIds: [] },
         { remark: '鎶勯�佷汉', active: false, type: '1', objIds: [] }
       ],
       activeIndex: 0,
@@ -300,18 +218,18 @@
       companyTree: []
     }
   },
-  created () {
+  created() {
 
   },
   methods: {
-    open (title, row) {
+    open(title, row) {
       this.title = title + '銆�' + row.reason + '銆�'
       this.visible = true
       this.reasonId = row.id
       this.model = row
       this.getfindCompanyTreePage()
       this.apprList = [
-        { remark: '瀹℃壒浜�', active: false, type: '0',memberType:1, objIds: [] },
+        { remark: '瀹℃壒浜�', active: false, type: '0', memberType: 1, objIds: [] },
         { remark: '鎶勯�佷汉', active: false, type: '1', objIds: [] }
       ]
       this.param = {}
@@ -321,7 +239,7 @@
       this.companyTree = []
       this.initDate()
     },
-    flowClick (i) {
+    flowClick(i) {
       this.activeIndex = i
       this.apprList.forEach((item, index) => {
         if (i === index) {
@@ -339,8 +257,8 @@
         }
       })
     },
-    initDate () {
-      if(this.model.approveTemplId){
+    initDate() {
+      if (this.model.approveTemplId) {
         approveTemplById(this.model.approveTemplId).then(res => {
           if (res && res.paramList) {
             const arr = res.paramList || []
@@ -353,7 +271,7 @@
                     companyName: i.companyName
                   }
                 })
-              }else{
+              } else {
                 item.objIds = []
               }
             })
@@ -365,7 +283,7 @@
         })
       }
     },
-    onSubmit () {
+    onSubmit() {
       const { apprList, activeType } = this
       const temp = JSON.parse(JSON.stringify(apprList))
       temp.forEach((item, index) => {
@@ -379,7 +297,7 @@
       this.subLoading = true
       approveTemplSave({
         type: activeType,
-        reasonId:this.model.id,
+        reasonId: this.model.id,
         paramList: temp
       }).then(res => {
         this.subLoading = false
@@ -389,17 +307,17 @@
         this.subLoading = false
       })
     },
-    handleDel () {
+    handleDel() {
       const { activeIndex } = this
       this.apprList.splice(activeIndex, 1)
       this.activeIndex = 0
     },
-    handleAddAppr () {
-      this.apprList.splice(this.apprList.length - 1, 0, { remark: '瀹℃壒浜�', active: false,memberType:1, type: 0, objIds: [] })
+    handleAddAppr() {
+      this.apprList.splice(this.apprList.length - 1, 0, { remark: '瀹℃壒浜�', active: false, memberType: 1, type: 0, objIds: [] })
       // this.apprList.push({ remark: '瀹℃壒浜�', active: false, type: '0' })
     },
     // 鑾峰彇缁勭粐鏍�
-    getfindCompanyTreePage () {
+    getfindCompanyTreePage() {
       fetchList()
         .then(res => {
           if (res && res.length > 0) {
@@ -411,7 +329,7 @@
           }
         })
     },
-    getMemberList () {
+    getMemberList() {
       memberListPost({
         model: {
           companyId: this.searchForm.companyId || '',
@@ -433,13 +351,13 @@
         // console.log('defaultProps', res)
       })
     },
-    callback (row) {
+    callback(row) {
       console.log(row)
       this.$set(this.searchForm, 'companyId', row.id)
       this.$set(this.searchForm, 'erpOrgId', row.erpId)
       this.getMemberList()
     },
-    TransferSub () {
+    TransferSub() {
       const { activeIndex } = this
       if (this.searchForm.objIds && this.searchForm.objIds.length > 0) {
         if (this.searchForm.objIds.length > 20) return this.$message.warning('鏈�澶氶�夋嫨20浜�')
@@ -460,7 +378,7 @@
       this.isShowTransfer = false
       console.log(this.searchForm.objIds)
     },
-    memDel (memIndex) {
+    memDel(memIndex) {
       const { activeIndex } = this
       this.apprList.forEach((item, index) => {
         if (activeIndex === index) {
@@ -472,11 +390,11 @@
         }
       })
     },
-    selStaff () {
+    selStaff() {
       this.isShowTransfer = true
       this.getMemberList()
     },
-    seleItem (i) {
+    seleItem(i) {
       this.list.forEach((item, index) => {
         item.active = index === i
       })
@@ -485,175 +403,205 @@
 }
 </script>
 <style lang="scss" scoped>
-.labelTip{
+.labelTip {
   font-size: 12px;
   color: #666666;
 }
+
 .config {
- width: 100%;
- padding-bottom: 20px;
- box-sizing: border-box;
- height: calc(100vh - 140px);
- display: flex;
- align-items: center;
- justify-content: space-between;
-.config_list {
-  width: 543px;
-  height: 100%;
-  flex-shrink: 0;
-  border-radius: 2px;
-  padding: 20px;
-  box-sizing: border-box;
-  border: 1px solid #eeeeee;
-  background: #f7f7f7;
-.config_list_head {
   width: 100%;
-  height: 40px;
+  padding-bottom: 20px;
+  box-sizing: border-box;
+  height: calc(100vh - 140px);
   display: flex;
   align-items: center;
   justify-content: space-between;
-span {
-  font-size: 18px;
-  font-weight: 500;
-  color: #222222;
+
+  .config_list {
+    width: 543px;
+    height: 100%;
+    flex-shrink: 0;
+    border-radius: 2px;
+    padding: 20px;
+    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);
+      padding-top: 45px;
+      box-sizing: border-box;
+      overflow-y: scroll;
+      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;
+        border: 2px solid #f7f7f7;
+        height: 80px;
+        background: #4456ac;
+        border-radius: 2px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+
+        .head {
+          height: 32px;
+          line-height: 32px;
+          padding: 2px 12px;
+          color: #fff;
+        }
+
+        .content {
+          flex: 1;
+          background-color: #fff;
+          display: flex;
+          align-items: center;
+          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;
+          color: #999999;
+          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;
+            font-weight: 400;
+            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;
+              color: #999999;
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
 }
-}
-.config_content {
-  width: 100%;
-  height: calc(100% - 40px);
-  padding-top: 45px;
-  box-sizing: border-box;
-  overflow-y: scroll;
-  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;
-  border: 2px solid #f7f7f7;
-  height: 80px;
-  background: #4456ac;
-  border-radius: 2px;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-.head {
-  height: 32px;
-  line-height: 32px;
-  padding: 2px 12px;
-  color: #fff;
-}
-.content {
-  flex: 1;
-  background-color: #fff;
-  display: flex;
-  align-items: center;
-  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;
-  color: #999999;
-  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;
-  font-weight: 400;
-  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;
-   color: #999999;
-   margin-left: 8px;
- }
-}
-}
-}
-}
-}
-}
+
 .config_data_item_reviewed_content {
   width: 400px;
   margin-top: 10px;
@@ -665,46 +613,62 @@
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
-.add {
-  font-size: 12px;
-  font-weight: 400;
-  color: #435ebe;
-  cursor: pointer;
-  margin-top: 3px;
+
+  .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_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;
-::v-deep .el-transfer-panel__body {
-  height: 500px;
-}
-::v-deep .el-transfer-panel__list.is-filterable {
-  height: 480px;
-}
-}
+
+  .left {
+    width: 240px;
+    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