ll

liukangdong

2024-10-29 0bda79a1d5f0de3a1885f13763c516650bc19007

 admin/src/views/business/approvalConfiguration.vue

@@ -1,155 +1,395 @@
<template>
    <TableLayout>
        <template v-slot:table-wrap>
            <div class="config">
                <div class="config_list">
                    <div class="config_list_head">
                        <span>配置流程</span>
                        <el-button style="background: #435EBE;" type="primary">发布</el-button>
                    </div>
                    <div class="config_list_list">
                        <div class="item">
                            <div class="item_label">发起人</div>
                            <div class="item_child">
                                <div class="item_child_label">程春林</div>
                                <div class="item_child_val">访客</div>
                            </div>
                            <div class="item_down">
                                <div class="item_down_x">
                                    <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
                                </div>
                            </div>
                        </div>
                        <div :class="item.active ? 'item yellow active' : 'item yellow'" v-for="(item, index) in list" :key="index" @click="seleItem(index)">
                            <div class="item_label">审批人</div>
                            <div class="item_child" style="cursor: pointer;">
                                <img class="item_child_right" src="@/assets/images/ar_more@2x.png" />
                                <div class="item_child_label">被访人</div>
                                <div class="item_child_val">访客</div>
                            </div>
                            <div class="item_down">
                                <img class="item_down_add" v-if="list.length - 1 === index" src="@/assets/images/peizhi_add@2x.png" @click.stop="add" />
                                <div class="item_down_x">
                                    <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="item blue" style="height: 81px;">
                            <div class="item_label">抄送人</div>
                            <div class="item_child" style="cursor: pointer;height: 40px;">
                                <img class="item_child_right" src="@/assets/images/ar_more@2x.png" />
                                <div class="item_child_val" style="margin-top: 3px;">请设置抄送人</div>
                            </div>
                            <div class="item_down">
                                <div class="item_down_x">
                                    <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                            <span>流程结束</span>
                        </div>
                    </div>
                </div>
                <div class="config_data">
                    <div class="config_data_item">
                        <div class="config_data_item_label">
                            选择该节点的审批人
                        </div>
                        <el-radio-group v-model="radio">
                            <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_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>
                                <span class="add">+添加</span>
                            </div>
                        </div>
                        <div class="config_data_item_reviewed" v-if="radio === 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>
                                </el-select>
                                <el-checkbox v-model="checked">找不到主管时，由上级主管代审核</el-checkbox>
                            </div>
                        </div>
                    </div>
                    <div class="config_data_item" v-if="radio !== 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 :label="1">会签（所有审批人都同意才可通过）</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="config_data_item" v-if="radio === 2">
                        <div class="config_data_item_label">
                            审批人为空时
                        </div>
                        <el-checkbox-group v-model="checkList" style="display: flex; flex-direction: column;">
                            <el-checkbox label="复选框 A" style="margin-bottom: 20px;"></el-checkbox>
                            <el-checkbox label="复选框 B" style="margin-bottom: 20px;"></el-checkbox>
                            <el-checkbox label="复选框 C"></el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="config_data_submit" v-if="radio !== 0">
                        <el-button style="background: #435EBE;" type="primary">保持配置项</el-button>
                    </div>
                </div>
  <TableLayout>
    <template v-slot:table-wrap>
      <el-tabs v-model="activeType" @tab-click="handleClick">
        <el-tab-pane label="普通访客" name="0"></el-tab-pane>
        <el-tab-pane label="施工访客" name="1"></el-tab-pane>
      </el-tabs>
      <div class="config">
        <div class="config_list">
          <div class="config_list_head">
            <span>配置流程</span>
          </div>
          <div class="config_content">
            <div class="item">
              <div class="head">发起人</div>
              <div class="content">访客</div>
            </div>
        </template>
    </TableLayout>
            <div class="arrows">
              <div class="line"></div>
              <img src="@/assets/images/peizhi_ar@2x.png" alt="" />
            </div>
            <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 == '0'">
                      <div>被访人</div>
                    </template>
                    <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 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>
        </div>
        <div class="config_data">
          <div class="config_data_item">
            <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>
            </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="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">
                  <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_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-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">找不到主管时，由上级主管代审核</el-checkbox>
              </div>
            </div>
          </div>
          <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 :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>
          </div>
        </div>
      </div>
    </template>
    <!--  -->
    <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="TransferSub">确 定</el-button>
      </span>
    </el-dialog>
  </TableLayout>
</template>

<script>
import TableLayout from '@/layouts/TableLayout'
// 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 },
  data () {
  components: {
    TableLayout,
    Tree
  },
  data() {
    return {
      list: [
        {
          name: '',
          active: false
        }
      activeType: '0',
      subLoading: false,
      apprList: [
        { remark: '审批人', active: false, type: '0', objIds: [] },
        { remark: '抄送人', active: false, type: '1', objIds: [] }
      ],
      value: '',
      options: [],
      radio: 0,
      radio1: 0,
      checked: '',
      checkList: []
      activeIndex: 0,

      param: {},
      searchForm: {},
      isShowTransfer: false,
      memberList: [],
      companyTree: []
    }
  },
  created() {
    this.getfindCompanyTreePage()
    this.initDate()
  },
  methods: {
    add () {
      this.list.push({
        name: '',
        active: false
    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
          console.log("====================", item.objIds)
          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
        }
      })
    },
    seleItem (i) {
    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) => {
        item.active = index === i
      })
@@ -159,254 +399,269 @@
</script>

<style lang="scss" scoped>
    .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;
                display: flex;
                align-items: center;
                justify-content: space-between;
                span {
                    font-size: 18px;
                    font-weight: 500;
                    color: #222222;
                }
            }
            .config_list_list {
                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 #E84A08 !important;
                }
                .yellow {
                    background: #EE8921 !important;
                }
                .blue {
                    background: #435EBE !important;
                }
                .footer {
                    width: 106px;
                    height: 41px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
                    border-radius: 25px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    span {
                        font-size: 15px;
                        font-weight: 400;
                        color: #333333;
                    }
                }
                .item {
                    width: 200px;
                    height: 102px;
                    background: #7999D9;
                    box-shadow: 0 0 8px 0 rgba(0,0,0,0.1);
                    border-radius: 4px;
                    padding: 4px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    position: relative;
                    margin-bottom: 60px;
                    &:last-child {
                        margin: 0 !important;
                    }
                    .item_down {
                        position: absolute;
                        bottom: -60px;
                        width: 100%;
                        height: 60px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .item_down_add {
                            width: 46px;
                            height: 46px;
                            position: absolute;
                            z-index: 3;
                            top: 5px;
                            cursor: pointer;
                        }
                        .item_down_x {
                            width: 1px;
                            height: 60px;
                            background: #B2B2B2;
                            position: relative;
                            img {
                                position: absolute;
                                bottom: 0;
                                left: -4px;
                                width: 9px;
                                height: 9px;
                            }
                        }
                    }
                    .item_label {
                        width: 100%;
                        height: 30px;
                        display: flex;
                        align-items: center;
                        font-size: 15px;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                    .item_child {
                        width: 100%;
                        height: 61px;
                        padding: 10px;
                        box-sizing: border-box;
                        background: #FFFFFF;
                        border-radius: 4px;
                        position: relative;
                        .item_child_right {
                            position: absolute;
                            right: 10px;
                            top: 13px;
                            width: 8px;
                            height: 14px;
                        }
                        .item_child_label {
                            font-size: 14px;
                            font-weight: 400;
                            color: #333333;
                            margin-bottom: 4px;
                        }
                        .item_child_val {
                            font-size: 12px;
                            font-weight: 400;
                            color: #999999;
                        }
                    }
                }
            }
        }
        .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;
                        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 {
  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;
      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_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>