axwen-test31 2.0.0

package/src/views/market-activity/config/the-indicator-drawer.vue

@@ -0,0 +1,835 @@
+<template>
+  <el-drawer size='32%' title="指标设置" custom-class="indicator-drawer" :visible.sync="drawer" direction="rtl" ref="drawer"
+    destroy-on-close :wrapperClosable="true">
+    <div class="indicator-content">
+      <div class="indicator-selected">
+        <div class="select-content">
+          <!-- <div class="header">
+            <div class="label"><i></i>已选指标</div>
+            <div class="sub-label">总计已选<span class="num">{{ totalSelected.length }}</span>项</div>
+          </div>
+          <div class="content">
+            <div class="selected-item" v-for="item in totalSelected" :key="item">
+              <el-tooltip class="item" effect="dark" :content="item" placement="top">
+                <span class="label">{{ item }}</span>
+              </el-tooltip>
+              <i style="cursor: pointer;" class="el-icon-close" @click="deleted(item)"></i>
+            </div>
+          </div> -->
+          <div class="header">
+            <div class="label"><i></i>已选指标</div>
+            <div class="sub-label">总计已选<span class="num">{{ totalSelected_2.length }}</span>项</div>
+          </div>
+          <div class="content">
+            <div class="selected-item" v-for="item in totalSelected_2" :key="item.condCode">
+              <el-tooltip class="item" effect="dark" :content="item.condName" placement="top">
+                <span class="label">{{ item.condName }}</span>
+              </el-tooltip>
+              <i style="cursor: pointer;" class="el-icon-close" @click="deleted_2(item)"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="indicator-source">
+        <div class="search">
+          <el-form :inline="true" :model="search" class="demo-form-inline" @submit.native.prevent>
+            <el-form-item label="" prop="name" class="demo-form-input">
+              <el-input type="input" v-model="search.name" placeholder="请输入指标名称"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="searchName">查询</el-button>
+              <el-button type="primary" size="mini" @click="resetName" plain>重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="indicator-source-item" v-for="key in keys" :key="key">
+          <el-collapse v-model="activeName">
+            <el-collapse-item :name="key">
+              <template slot="title">
+                <div class="header">
+                  <span class="label"><i></i>{{ sourceMap[key].label }}</span>
+                  <span class="sub-label">已选择<span class="num">{{ currentSelected(key).length }}</span>项</span>
+
+                </div>
+              </template>
+              <div class="content">
+                <el-checkbox class="indicator-checkbox" :indeterminate="sourceMap[key].isIndeterminate"
+                  v-model="sourceMap[key].checkAll" @change="handleCheckAllChange($event, key)">全选</el-checkbox>
+
+                <el-checkbox-group v-model="sourceMap[key].selecteds" @change="handleCheckedCitiesChange($event, key)">
+                  <el-checkbox class="indicator-checkbox" v-for="indicator in sourceMap[key].options" :label="indicator"
+                    :key="indicator">
+                    {{ indicator }}
+                  </el-checkbox>
+                </el-checkbox-group>
+              </div>
+            </el-collapse-item>
+
+          </el-collapse>
+        </div>
+
+        <!-- <el-select  v-model="libId" placeholder="请选择标签库" size="mini" @change="switchLib" style="width: 100%;">
+          <el-option
+            v-for="item in $store.state.libList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select> -->
+
+        <!-- <el-collapse v-model="activeName" v-for="item in labelData" :key="item.condCode">
+          <el-collapse-item :name="item.condCode">
+            <template slot="title">
+             {{ item.condName }}<i class="header-icon el-icon-info"></i>
+            </template>
+
+            <el-collapse v-show="item.children && item.children.length>0" v-for="item2 in item.children" :key="item2.condCode">
+              <el-collapse-item>
+                <template slot="title">
+                {{ item2.condName }}<i class="header-icon el-icon-info"></i>
+                </template>
+                <div v-show="item2.children && item2.children.length>0" v-for="item3 in item2.children" :key="item3.condCode">{{ item3.condName }}</div>
+              </el-collapse-item>
+            </el-collapse>
+
+          </el-collapse-item>
+        </el-collapse> -->
+
+        <el-tree
+        :data="labelData"
+        show-checkbox
+        node-key="condCode"
+        :expand-on-click-node="false"
+        :render-content="renderContent"
+        ref="tree"
+        :default-checked-keys="defaultList"
+        :filter-node-method="filterNode"
+        @check ="onNodeCheck"
+        class="stafftree"
+        >
+      </el-tree>
+      </div>
+    </div>
+    <div class="demo-drawer__footer">
+      <el-button @click="cancel">取 消</el-button>
+      <el-button type="primary" @click="confirm" :loading="loading">
+        {{ loading? '提交中 ...': '确 定' }}
+      </el-button>
+    </div>
+  </el-drawer>
+
+</template>
+<script>
+import { getIndTree, getIndexTree, saveConfig } from '@/api/template/template-active'
+import { listToTree } from '@/utils/index.js'
+import { getLabels } from '@/api/system'
+// import styles from './the-indicator-drawer.less'
+export default {
+  props: ['selectIdsByInd'],
+  data() {
+    return {
+      drawer: false,
+      loading: false,
+      selectedList: [
+        { id: 0, name: '白金客户数' },
+        { id: 1, name: '潜力客户数' },
+      ],
+      search: {
+        name: ''
+      },
+      originData: [],
+      sourceMap: {
+        // custom: {
+        //   label: '客户分层',
+        //   checkAll: false,
+        //   selecteds: [],
+        //   isIndeterminate: false,
+        //   options: ['钻石客户数', '白金客户数', '黄金客户数', '潜力客户数', '普通客户数']
+        // },
+        // aum: {
+        //   label: 'AUM',
+        //   checkAll: false,
+        //   selecteds: [],
+        //   isIndeterminate: false,
+        //   options: ['存款余额', '存款月日均', '理财余额', '理财月日均', '基金余额']
+        // },
+        // lum: {
+        //   label: 'LUM',
+        //   checkAll: false,
+        //   selecteds: [],
+        //   isIndeterminate: false,
+        //   options: ['贷款余额', '贷款月日均', '贷款户数', '信用卡透支余额', '信用卡月日均透支余额', '信用卡户数']
+        // },
+        // functional: {
+        //   label: '功能性指标',
+        //   checkAll: false,
+        //   selecteds: [],
+        //   isIndeterminate: false,
+        //   options: ['手机银行月活', '三方支付签约数', '三方存管签约数', '信用卡关联还款签约数', '代扣代缴签约数']
+        // }
+      },
+      activeName:'',
+      libId:'', // 原始标签选中
+      labelData:[],
+      activeNamesArr:[],
+      totalSelected_2:[],
+      defaultList:[],
+      showMessage:false,
+      backUpLabelData:[], // 标签初始数据
+      dictCodeType:'0'
+    }
+  },
+  watch: {
+    'search.name'(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  computed: {
+    keys() {
+      return Object.keys(this.sourceMap)
+    },
+    totalSelected() {
+      let list = []
+      Object.keys(this.sourceMap).forEach(key => {
+        list.push(...this.sourceMap[key].selecteds)
+      })
+      return list
+    },
+    currentSelected() {
+      return key => {
+        return this.sourceMap[key].selecteds || []
+      }
+    }
+  },
+  methods: {
+    resetName() {
+      this.activeName = ''
+      this.search.name = ''
+
+      this.totalSelected_2.forEach(e=>{
+        this.$refs.tree.setChecked(e,false)
+      })
+      this.totalSelected_2 = [];
+
+    },
+    searchName() {
+      let name = this.search.name
+      if(!name) return
+      let targetData = []
+      for(let i in this.sourceMap) {
+        targetData = this.sourceMap[i].options.filter(item=> item.includes(name))
+        if(targetData.length) {
+          this.activeName = i
+        }
+      }
+    },
+    initInd() {
+      Object.keys(this.sourceMap).forEach(key => {
+        this.sourceMap[key].options.forEach(indNm => {
+          if (this.selectIdsByInd.includes(indNm)) {
+            this.sourceMap[key].selecteds.push(indNm)
+          }
+        })        
+        const checkedCount = this.sourceMap[key].selecteds.length
+        console.log(65464,this.selectIdsByInd,this.sourceMap,checkedCount)
+        this.checkboxSet(checkedCount, key)
+      })
+    },
+    async apiGet({ api, params, logMsg }) {
+      try {
+        const res = await (params ? api(params) : api())
+        // console.log(logMsg, res)
+        return res
+      } catch (e) {
+        console.log(logMsg, e)
+      }
+    },
+    async open() {
+      this.$getOptionsForSystemParams('bigsales.analysis_index_setting').then(res => {
+        if(res.length === 0){
+          // 数据字典不存在时查以前的数据
+          this.dictCodeType = '0';
+          return this.apiGet({ api: getIndTree, params: null, logMsg: '获取指标树=====' })
+        }else{
+          this.dictCodeType = '1';
+          // 数据字典存在时查标签数据
+          return this.apiGet({ api: getIndexTree, params: null, logMsg: '获取指标树=====' })
+        }
+      }).then(rEvent=>{
+          console.log('rEvent',rEvent)
+          if(rEvent.success){
+            if(this.dictCodeType === '0'){
+              this.initIndTree(rEvent.data);
+            }else{
+              this.initIndexTree(rEvent);
+            }
+          }else{
+            this.$message.warning(rEvent.errorMsg)
+          }
+          this.drawer = true
+      }).catch(err=>{
+        this.$message.error(err)
+      })
+      // const data  = await this.apiGet({ api: getIndTree, params: null, logMsg: '获取指标树=====' })
+      // this.originData = [...(data || [])]
+      // const sourceMap = this.dealData(data)
+      // this.sourceMap = { ...sourceMap }
+
+      // this.initInd()
+      // this.initTree(data);
+      // this.drawer = true
+      // await this.switchLib();
+
+      // let targetData = data.filter(x=>x.parentId !== '0');
+      // targetData.forEach(e=>{
+      //   e.pkId = e.id;
+      //   e.condCode= e.indNm;
+      //   e.condName = e.indNm;
+      // })
+      // let data2 = listToTree({
+      //   data: targetData,
+      //   labelKey: 'indNm',
+      //   valueKey: 'id',
+      //   parentKey: 'parentId',
+      //   hasChildren: 'false',
+      // })
+      // console.log('data2',data2)
+      // this.labelData = data2;
+
+      // this.getDefaultList([this.labelData[0]],3);
+      // this.getDefaultList([this.labelData[1]],8);
+      
+      // this.$nextTick(()=>{
+      //   this.totalSelected_2 = this.$refs.tree.getCheckedNodes(true);
+      //   this.$forceUpdate()
+      // })
+    },
+    dealData(data) {
+      const array = [...(data || [])]
+      const parentIds = [...new Set(array.map(item => item.parentId))].sort((a, b) => a - b)
+
+      let newData = []
+      parentIds.forEach(parentId => {
+        const { indNm, id } = array.find(item => item.id === parentId) || {}
+        const filterArray = array.filter(item => item.parentId === parentId).sort((a, b) => a.id - b.id)
+        newData.push({ id, indNm, filterArray })
+      })
+      newData = newData.splice(2)
+
+      const sourceMap = {}
+      newData.forEach(item => {
+        const { id, indNm: label, filterArray } = item
+        sourceMap[id] = {
+          label,
+          checkAll: false,
+          selecteds: [],
+          isIndeterminate: false,
+          options: filterArray.map(item => item.indNm),
+          filterArray
+        }
+      })
+      return sourceMap
+    },
+    deleted(item) {
+      Object.keys(this.sourceMap).forEach(key => {
+        this.sourceMap[key].selecteds.forEach((indNm, idx) => {
+          if (item === indNm) {
+            this.sourceMap[key].selecteds.splice(idx, 1)
+          }
+        })
+        const checkedCount = this.sourceMap[key].selecteds.length
+        this.checkboxSet(checkedCount, key)
+      })
+    },
+    cancel() {
+      this.loading = false;
+      this.drawer = false;
+    },
+    getSelectIds() {
+      const array = []
+      Object.keys(this.sourceMap).forEach(key => {
+        const { selecteds } = this.sourceMap[key]
+        array.push(...selecteds)
+      })
+      return array
+    },
+    getSelectPkIdS(){
+      console.log(this.totalSelected_2,'---')
+      if(this.dictCodeType === '0'){
+        return this.totalSelected_2.map(x=>x.pkId)
+      }else{
+        return this.totalSelected_2.map(x=>x.condCode)
+      }
+    },
+    async confirm() {
+      // const array = this.getSelectIds()
+      // const ids = this.originData.filter(item => array.includes(item.indNm))?.map(item => item.id)
+      // const res = await saveConfig(ids)
+      // this.$refs.drawer.closeDrawer()
+      // this.$emit('confirm')
+
+      const ids = this.getSelectPkIdS();
+      const data = Object.assign({},{indIdList:ids,indConfigType:this.dictCodeType})
+      const res = await saveConfig(data)
+      this.$refs.drawer.closeDrawer()
+      this.$emit('confirm')
+    },
+    beforeClose(done) {
+      // this.$confirm('确认关闭？')
+      //   .then(_ => {
+      //     done();
+      //   })
+      //   .catch(_ => { });
+    },
+    // 全选切换
+    handleCheckAllChange(val, key) {
+      let selecteds = []
+      if (val) {
+        const length = this.sourceMap[key].options.length
+        const array = this.getSelectIds()
+        if (array.length + length > 8) {
+          this.$message.warning('最多选择8个指标！')
+          this.sourceMap[key].checkAll = false
+        } else {
+          selecteds = this.sourceMap[key].options
+        }
+      }
+      this.sourceMap[key].selecteds = selecteds;
+      this.sourceMap[key].isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value, key) {
+      const array = this.getSelectIds()
+      if (array.length > 8) {
+        this.$message.warning('最多选择8个指标！')
+        value.pop()
+      } else {
+        const checkedCount = value.length;
+        this.checkboxSet(checkedCount, key)
+      }
+    },
+    checkboxSet(checkedCount, key) {
+      this.sourceMap[key].checkAll = checkedCount === this.sourceMap[key].options.length;
+      this.sourceMap[key].isIndeterminate = checkedCount > 0 && checkedCount < this.sourceMap[key].options.length;
+    },
+    // 初始化原始默认数据
+    initIndTree(data){
+      let targetData = data.filter(x=>x.parentId !== '0');
+      targetData.forEach(e=>{
+        e.pkId = e.id;
+        e.condCode= e.indNm;
+        e.condName = e.indNm;
+      })
+      this.backUpLabelData = JSON.parse(JSON.stringify(targetData));
+      let data2 = listToTree({
+        data: targetData,
+        labelKey: 'indNm',
+        valueKey: 'id',
+        parentKey: 'parentId',
+        hasChildren: 'false',
+      })
+      this.labelData = data2;
+
+      this.initIdxIndexCommon('0');
+    },
+    // 初始化标签数
+    initIndexTree(res){
+      res.data.forEach(e=>{
+        e.label = e.condName;
+      })
+      this.backUpLabelData = JSON.parse(JSON.stringify(res.data));
+      let data = listToTree({
+        data: res.data.filter(v => v.labelType !== '999'),
+        labelKey: 'condName',
+        valueKey: 'pkId',
+        parentKey: 'parent',
+        hasChildren: 'false',
+        // showChildNum: this.$store.state.sysType !== 'lb'
+      })
+      this.labelData = data;
+
+      this.initIdxIndexCommon('1');
+      // this.getDefaultList([this.labelData[0]],3);
+      // this.getDefaultList([this.labelData[1]],8);
+
+      // this.defaultList = this.selectIdsByInd.map(x=>x.condName)
+      
+      // this.$nextTick(()=>{
+      //   this.totalSelected_2 = this.$refs.tree.getCheckedNodes(true);
+      //   this.$forceUpdate()
+      //   this.search.name = ''
+      // })
+    },
+    /**
+     * type 何种类型的数据
+     */
+    initIdxIndexCommon(type){
+      // if(this.selectIdsByInd.length > 0){
+        if(type === '0'){
+          this.defaultList = this.selectIdsByInd.map(x=>x.indNm)
+        }else{
+          this.defaultList = this.selectIdsByInd.map(x=>x.indId)
+        }
+      // }else{
+      //   this.getDefaultList([this.labelData[0]],3);
+      //   this.getDefaultList([this.labelData[1]],8);
+      // }
+      
+      this.$nextTick(()=>{
+        this.totalSelected_2 = this.$refs.tree.getCheckedNodes(true);
+        this.$forceUpdate()
+        this.search.name = ''
+      })
+    },
+  //  async switchLib(){
+  //   const res = await getLabels({libId:"1"});
+  //   res.data.forEach(e=>{
+  //     e.label = e.condName;
+  //   })
+  //   let data = listToTree({
+  //     data: res.data.filter(v => v.labelType !== '999'),
+  //     labelKey: 'condName',
+  //     valueKey: 'pkId',
+  //     parentKey: 'parent',
+  //     hasChildren: 'false',
+  //     // showChildNum: this.$store.state.sysType !== 'lb'
+  //   })
+  //   console.log('data',data)
+  //   this.labelData = data;
+
+  //   this.getDefaultList([this.labelData[0]],3);
+  //   this.getDefaultList([this.labelData[1]],8);
+    
+  //   this.$nextTick(()=>{
+  //     this.totalSelected_2 = this.$refs.tree.getCheckedNodes(true);
+  //     this.$forceUpdate()
+  //   })
+
+  //   },
+    getDefaultList(data,arrlength){
+      for(let i =0;i<data.length;i++){
+        if(!data[i].children || data[i].children.length === 0){
+          if(this.defaultList.length < arrlength){
+            this.defaultList.push(data[i].condCode)
+          }
+        }
+        if(data[i].children && data[i].children.length>0){
+         return this.getDefaultList(data[i].children,arrlength)
+        }
+      }
+    },
+    renderContent(h, { node, data, store }) {
+      if(node.level === 1){
+
+        // 获取当前父节点下面选中的子节点个数
+        function getCount(node){
+          let count =0;
+          function loop(node){
+            for(let i=0;i < node.length;i++){
+              if(node[i].childNodes.length === 0 && node[i].checked){
+                count+=1;
+              }
+              if(node[i].childNodes.length === 0 && !node[i].checked){
+                count+=0;
+              }
+              if(node[i].childNodes && node[i].childNodes.length>0){
+                loop(node[i].childNodes)
+              }
+            }
+            return count
+          }
+          
+          return loop(node);
+        }
+        // let count = this.totalSelected_2.map(x=>x.pkId).filter(x=>x.startsWith(node.key)).length
+        let count = getCount([node]);
+        return (
+          <div class='header_tree_1'>
+            <span class={'label_tree_1'}><i></i>{node.label}</span>
+            <span class={'sub-label_tree_1'}>已选择<span class={'num_tree_1'}>{count}</span>项</span>
+
+          </div>
+        )
+      }
+        return (
+          <span class="custom-tree-node">
+            <span>{node.label}</span>
+          </span>);
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    onCheck(data, node, component){
+      console.log('data',data,node,component)
+      // 获取所有选中的节点
+      const checkedNodes = this.$refs.tree.getCheckedNodes(true);
+       // 检查选中的子节点数量是否超过了限制
+      if (checkedNodes.length > 8) {
+          if(data.children.length > 0){
+            this.$message.warning('最多选择8个指标！')
+          }
+
+        // 取消最后一次的选中操作
+        this.$refs.tree.setChecked(data, false);
+        return;
+      }
+
+      this.totalSelected_2 = this.$refs.tree.getCheckedNodes(true);
+    },
+    onCurrenChange(data,node){
+      // console.log('data',data,node)
+    },
+    onNodeCheck(checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys){
+      console.log('checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys',checkedNodes,checkedKeys,halfCheckedNodes,halfCheckedKeys);
+      // 获取当前节点下的子节点个数
+      function loop(data){
+        let result = [];
+        for(let i=0;i<data.length;i++){
+          if(data[i].children && data[i].children.length>0){
+           return loop(data[i].children)
+          }else{
+            result.push(data[i])
+          }
+        }
+        return result
+      }
+      let currentSelectNodes = loop([checkedNodes])
+       // 获取所有选中的节点
+       const checkedNodes2 = this.$refs.tree.getCheckedNodes(true);
+       if(checkedNodes2.length > 8){
+        this.$message.warning('最多选择8个指标！')
+         currentSelectNodes.forEach(e=>{
+          this.$refs.tree.setChecked(e, false);
+         })
+       }
+
+       this.totalSelected_2 = this.$refs.tree.getCheckedNodes(true);
+    },
+
+    deleted_2(item){
+      this.totalSelected_2 = this.totalSelected_2.filter(x=>x.condCode !== item.condCode);
+      this.$refs.tree.setChecked(item.condCode,false)
+      
+    }
+  }
+}
+</script>
+<style lang="less">
+.header_tree_1 {
+    height: 42px;
+    line-height: 42px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .label_tree_1 {
+      // padding: 0 8px;
+      margin-right: 8px;
+      font-family: PingFangSC-Semibold;
+      font-weight: 600;
+      color: #333333;
+
+      i {
+        display: inline-block;
+        width: 4px;
+        height: 10px;
+        background-color: #1664FF;
+        border-radius: 2px;
+        margin-right: 8px;
+      }
+
+    }
+
+    .sub-label_tree_1 {
+      font-family: PingFangSC-Regular;
+      color: #999999;
+
+      .num_tree_1 {
+        color: #1664FF;
+      }
+    }
+  }
+</style>
+<style lang="less" scoped>
+.indicator-content {
+  .indicator-selected {
+    padding: 12px;
+    border-bottom: 12px solid #F3F5F7;
+
+    .select-content {
+      width: 100%;
+      // height: 220px;
+      border: 1px solid #E3E5E8;
+      border-radius: 4px;
+      padding: 0 12px 12px;
+
+      .content {
+        padding: 12px;
+        background-color: #F8F8FB;
+        display: flex;
+        justify-content: flex-start;
+        align-content: flex-start;
+        flex-wrap: wrap;
+
+
+
+        .selected-item {
+          width: 31%;
+          background-color: rgba(22, 100, 255, 0.1);
+          margin: 0 8px 8px 0;
+          padding: 0 12px;
+          height: 28px;
+          line-height: 28px;
+          color: #1664FF;
+          border-radius: 4px;
+          position: relative;
+          padding-right: 24px;
+
+          .label {
+            display: inline-block;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+
+          i {
+            position: absolute;
+            right: 4px;
+            top: 50%;
+            display: inline-block;
+            border-left: 1px solid #CFD5DD;
+            padding-left: 4px;
+            transform: translateY(-50%);
+          }
+        }
+
+      }
+    }
+  }
+
+  .indicator-source {
+    padding: 0 12px;
+
+    .search {
+      padding: 12px 0;
+
+      .demo-form-inline {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .demo-form-input {
+          flex: 1;
+
+          ::v-deep .el-form-item__content {
+            width: 100%;
+          }
+        }
+      }
+
+      ::v-deep.el-form-item {
+        margin-bottom: 0 !important;
+      }
+    }
+
+    .indicator-source-item {
+      border: 1px solid #E3E5E8;
+
+      ::v-deep .el-collapse {
+        border: none !important;
+      }
+
+      .header {
+        margin: 0 12px;
+        justify-content: flex-start;
+
+        .label {
+          margin-right: 8px;
+        }
+      }
+
+      .content {
+        .indicator-checkbox {
+          display: block;
+          height: 42px;
+          padding: 12px 12px;
+          border-top: 1px solid #E3E5E8;
+        }
+      }
+    }
+  }
+
+  .header {
+    height: 42px;
+    line-height: 42px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .label {
+      // padding: 0 8px;
+      font-family: PingFangSC-Semibold;
+      font-weight: 600;
+      color: #333333;
+
+      i {
+        display: inline-block;
+        width: 4px;
+        height: 10px;
+        background-color: #1664FF;
+        border-radius: 2px;
+        margin-right: 8px;
+      }
+
+    }
+
+    .sub-label {
+      font-family: PingFangSC-Regular;
+      color: #999999;
+
+      .num {
+        color: #1664FF;
+      }
+    }
+
+  }
+}
+
+.header {
+    height: 42px;
+    line-height: 42px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .label {
+      // padding: 0 8px;
+      font-family: PingFangSC-Semibold;
+      font-weight: 600;
+      color: #333333;
+
+      i {
+        display: inline-block;
+        width: 4px;
+        height: 10px;
+        background-color: #1664FF;
+        border-radius: 2px;
+        margin-right: 8px;
+      }
+
+    }
+
+    .sub-label {
+      font-family: PingFangSC-Regular;
+      color: #999999;
+
+      .num {
+        color: #1664FF;
+      }
+    }
+  }
+  ::v-deep .stafftree > .el-tree-node > .el-tree-node__content .el-checkbox {
+  display: none;
+}
+</style>