KM-Front-Milestone2/src/views/modules/knowledge/map/addUpdateMap.vue

<template>
  <rx-layout>
    <div slot="center" style>
      <div class="mainContent">
        <breadcrumb firstLevel="地图管理" :lastLevel="pkId ? '编辑地图' : '新增地图'" />
        <div class="body">
          <div class="content">
            <a-form-model ref="mapRef" :model="mapForm" :rules="mapRules" layout="inline" hideRequiredMark>
              <a-row :gutter="24" type="flex">
                <a-col :span="12"> 
                  <span class="titleBox">基础信息</span>
                </a-col>
                <a-col :span="12">
                  <a-button class="totBtn"  @click="$router.back()">取消</a-button>
                  <a-button class="totBtn" style="margin-right: 20px;" type="primary" @click="handleSaveClick" :loading="saveLoading">保存</a-button>
                </a-col>
              </a-row>
              <a-form-model-item label="*地图类型:" prop="type">
                <a-select v-model="mapForm.type" placeholder="请选择" prop="type" :disabled="!!pkId" :showArrow="false">
                  <a-select-option v-for="(item,index) in mapTypeList" :key="index" :value="item.value">
                    {{item.name}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="*地图名称:" prop="name">
                <a-input v-model="mapForm.name" placeholder="请输入" :maxLength="10" />
              </a-form-model-item>
              <span class="titleBox">权限信息</span>
              <a-form-model-item label="*所属组织:" prop="groupId">
                <!-- <a-tree-select
                    v-model="mapForm.groupId"
                    tree-data-simple-mode
                    allow-clear
                    :dropdown-style="{ minHeight: '200px', maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="orgData"
                    tree-checkable
                    placeholder="请选择"
                    :show-checked-strategy="showParent"
                    :load-data="onLoadGroupTree"
                    @change="handleTreeChange"
                    @select="handleTreeSelect"
                  >
                  </a-tree-select> -->
                  <a-tree-select
                    v-model="mapForm.groupId"
                    
                    allow-clear
                    :dropdown-style="{ minHeight: '200px', maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="orgData"
                    multiple
                    placeholder="请选择"
                    
                    treeNodeLabelProp="label"
                    @change="handleTreeChange"
                    @select="handleTreeSelect"
                    :treeDataSimpleMode="true"
                  >
                  </a-tree-select>
              </a-form-model-item>
              <a-form-model-item label="*阅读权限:" prop="groupPurview">
                <a-select v-model="mapForm.groupPurview" placeholder="请选择" :disabled="!mapForm.groupId.length" :showArrow="false">
                  <a-select-option v-for="(item,index) in authList" :key="index" :value="item.value" >
                    {{item.label}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <template v-if="mapForm.groupPurview == 2">
                <a-form-model-item label="可阅读者">
                  <a-button class="totBtn" style="margin-top: 6px;float: left;" type="primary" @click="handleAddUserShow">添加员工</a-button>
                </a-form-model-item>
                <rx-grid
                    class="table-style"
                    :columns="userColumns"
                    :dataSource="userList"
                    :defaultPageSize="5"
                    :heightauto="true"
                  > 
                  <template slot="groupSummary" slot-scope="{text}">
                    <div style="white-space: pre-line">{{ text }}</div>
                  </template>
                  <template slot="action" slot-scope="{text,record}">
                    <rx-button class="clearBtn" alias="knowEdit" :butn-icon="'none'" @click="handleRemoveUserClick(record)">移除</rx-button>
                  </template>
                </rx-grid>
              </template>
            </a-form-model>
            <a-form-model style="margin-top: 10px;">
              <a-row :gutter="24" type="flex">
                <a-col :span="12"> 
                  <span class="titleBox">地图内容</span>
                </a-col>
                <a-col :span="12">
                  <a-button v-if="tabRouteList.length < 10" type="primary" class="totBtn" @click.stop="addMapRoute">添加学习路径</a-button>
                </a-col>
              </a-row>
              <template v-if="tabRouteList.length">
                <a-tabs v-model="tabsKeys" size="large" :animated="false">
                  <a-tab-pane v-for="(item,index) in tabRouteList" :key="index + 1 + ''">
                    <span slot="tab">
                      <span style="margin:0 12px 0 20px;">{{ item.name }}</span>
                      <a-icon type="form" :style="{ color: '#000' }" @click.stop="handleEditTabClick(item,index)"/>
                      <a-icon type="close" :style="{ color: '#000' }" @click.stop="handleDelTabClick(index)"/>
                    </span>
                    <a-button type="dashed" style="width: 100%;" @click.stop="addLearnInfo"><a-icon type="plus" />新增学习内容</a-button>
                      <pageList :contents="item.contents" @delItem="handleDelItemClick" @actionItem="handleActionItemClick"></pageList>
                  </a-tab-pane>
                </a-tabs>
              </template>
              <template v-else>
                <div class="empty-style">
                  <a-empty />
                </div>
              </template>
            </a-form-model>
          </div>
        </div>
      </div> 
      <!-- 员工数据 -->
      <a-modal v-model="showUserFlag" 
        width="1000"
        title="添加员工" 
        centered
        okText="保存"
        @ok="handleSaveUserOk">
        <org-people ref="orgPeopleRef" style="width:1000px;height:460px" :groupIds="groupIds"></org-people>
      </a-modal>  
      <!-- 学习路径 -->
      <a-modal v-model="showRouteFlag" 
        width="500"
        :title="showRouteTitle" 
        centered
        okText="保存"
        @ok="handleSaveRouteOk">
        <a-form-model style="margin-top: 10px;width:500px;">
          <a-form-model-item label="路径名称">
            <a-input v-model="routeForm.name" :maxLength="10" placeholder="请输入路径名称(10个汉字以内)"/>
          </a-form-model-item>
          <a-form-model-item label="路径排序">
            <a-input-number :disabled="showRouteTitle == '编辑学习路径'" v-model="routeForm.sort" :min="1" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>  
      <!-- 学习内容 -->
      <a-modal v-model="showLearnFlag" 
          width="500"
          title="添加学习内容" 
          centered
          okText="保存"
          @ok="handleSaveLearnOk">
          <a-form-model ref="learnRef" :model="learnForm" :rules="learnRules" style="width: 500px;" >
            <a-form-model-item label="内容类型" prop="type">
              <a-select v-model="learnForm.type" placeholder="请选择" @change="handleTypeChange">
                <a-select-option v-for="(item,index) in infoTypeList" :key="index" :value="item.value">
                  {{item.label}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="系统名称" prop="outerSystemName" v-show="learnForm.type==1">
              <a-input v-model="learnForm.outerSystemName" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="内容名称" prop="outerContentName" v-show="learnForm.type==1">
              <a-input v-model="learnForm.outerContentName" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="访问地址" prop="outerAccessUrl" v-show="learnForm.type==1">
              <a-input v-model="learnForm.outerAccessUrl" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="知识分类:" prop="classify" v-show="learnForm.type==2">
              <a-cascader v-model="learnForm.classify" 
                :options="classifyList" 
                :fieldNames="{ label: 'name', value: 'pkId', children: 'children' }"
                placeholder="请选择"
                changeOnSelect
                @change="handleClassifyChange" />
            </a-form-model-item>
            <a-form-model-item label="选择知识" prop="knowledgeId" v-show="learnForm.type==2">
              <a-select v-model="learnForm.knowledgeId" placeholder="请选择" :disabled="!learnForm.classify.length" @change="handleKnowledgeChange">
                <a-select-option v-for="(item,index) in knowledgeList" :key="index" :value="item.pkId">
                  {{item.titles}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-form-model>
      </a-modal> 
    </div> 
  </rx-layout>
</template>

<script>
import breadcrumb from '../components/breadcrumb'
import pageList from './components/pageList'
import orgPeople from './components/orgPeople'
import api from '@/api/knowledge/map/api'
import configApi from '@/api/knowledge/config'
import OsGroupApi from '@/api/user/org/osGroup'
import classApi from '@/api/knowledge/classify'
import initMixin from "../aMixin/initMixin"
import getTimeNow from '@/views/modules/knowledge/aJs/getTimeNow'
import { getParentNode } from '@/views/modules/knowledge/aJs/getClassifyTree'
export default {
  name: 'knowledgeAddUpdate',
  mixins: [ initMixin ],
  components: {
    breadcrumb,
    pageList,
    orgPeople
  },
  data() {
    return {
      queryParam: {
        groupId: ''
      },
      api,
      classApi,
      saveLoading: false,
      // 地图id
      pkId: '',
      mapForm: {
        type: undefined,
        name: '',
        groupId: [],
        groupSummary: "",
        groupPurview: undefined
      },
      groupIds: '',
      showParent: 'SHOW_PARENT',
      orgList: [],
      mapRules: {
        type: [
          { required: true, message: '请选择地图类型', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入地图标题', trigger: 'blur' }
        ],
        groupId: [
          { required: true, message: '请选择所属组织', trigger: 'change' }
        ],
        groupPurview: [
          { required: true, message: '请选择阅读权限', trigger: 'blur' }
        ],
      },
      showUserFlag: false,
      showUseNum: 0,
      userList:[],
      userColumns: [
        {
          title: '员工ID',
          dataIndex: 'userId',
          align:'center',
          width: 120
        },
        {
          title: '工号',
          dataIndex: 'userNo',
          align:'center',
          width: 120
        },
        {
          title: '所属组织',
          dataIndex: 'groupSummary',
          align:'center',
          scopedSlots: {customRender: 'groupSummary'}
        },
        {
          title: '职位',
          dataIndex: 'positionGrade',
          align:'center',
          width: 180
        },
        {
          title: '员工姓名',
          dataIndex: 'fullName',
          align:'center',
          width: 120
        },
        {
          title: '添加时间',
          dataIndex: 'createTime',
          align:'center',
          width: 180
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:'center',
          scopedSlots: { customRender: 'action' },
          width: 120
        },
      ],
      tabsKeys: '1',
      tabRouteList:[],
      showRouteTitle:'',
      chooseRouteIndex: 0,
      showRouteFlag: false,
      routeForm:{
        name:'',
        sort: 1
      },
      showLearnFlag:false,
      learnForm:{
        type: undefined,
        outerSystemName: '',
        outerContentName: '',
        outerAccessUrl: '',
        classify: [],
        knowledgeId: undefined
      },
      learnRules: {
        type: [
          { required: true, message: '请选择内容类型', trigger: 'blur' }
        ],
      },
      classifyList: [],
      knowledgeList: [],
      knowledgeInfo: {},
      authList: [
        {value: '1', label: '全部可见'},
        {value: '2', label: '部分员工可见'}
      ],
      mapTypeList: [],
      orgData: [],
      infoTypeList:[
        {value: '1', label: '外部系统'},
        {value: '2', label: '维基知识'}
      ]
    }
  },
  created() {
    let pkId = this.$route.query.pkId
    if(pkId) {
      this.pkId = pkId
      this.load(pkId);
    } else {
      this.load();
    }
  },
  methods: {
    load(pkId = false) {
      // 获取所属组织
      OsGroupApi.getAllOsGroupList({dimId:1}).then(res => {
        let listOption = []
        for (let i = 0; i < res.length; i++) {
          if(res[i].path.indexOf("C0000")>-1){
            let tempData = {}
            tempData.pId = res[i].parentId
            tempData.title = res[i].name
            tempData.id = res[i].key
            tempData.value = res[i].key
            tempData.label = res[i].deptPathName
            tempData.isLeaf = false
            let tempArr = res.filter(item => item.parentId == tempData.id)
            if(tempArr.length==0){
              tempData.isLeaf = true
            }
            listOption.push(tempData)
          }
        }
        this.orgData = listOption
      })
      // 获取地图字典
      api.dic({alias: 'KNOWLEDGE_MAP'}).then(res => {
        this.mapTypeList = res.data
        if(pkId) {
          api.info({pkId:pkId}).then(res => {
            let info = res.data
            this.mapForm.type = this.mapTypeList.find(item => item.name == info.typeName).value
            this.mapForm.name = info.name
            this.mapForm.groupId = info.groupId.split(',')
            this.mapForm.groupSummary = info.groupSummary
            this.mapForm.groupPurview = info.groupPurview.toString()
            if(info.routes && info.routes.length) {
              let disposeRoutes = info.routes 
              disposeRoutes.forEach(item => {
                if(!item.contents) {
                  item.contents = []
                }
              })
              this.tabRouteList = disposeRoutes
            } else {
              this.tabRouteList = []
            }
            if(this.mapForm.groupPurview == 2) {
              let queryParam = {
                pageNo: 1,
                pageSize: 9999,
                params: {
                  pkId: pkId
                },
                sortField: '',
                sortOrder: 'asc'
              }
              api.purview(queryParam).then(res => {
                this.userList = res.result.data
              })
            }
          })
        }
      })
      /*OsGroupApi.getAdminOrg().then(resp => {
          let data = resp.data;
          let temp = [];
          for (let i = 0; i < data.length; i++) {
              var rs = data[i];
              var _isLeaf = rs.childAmount == 0 ? true : false;
              temp.push({title: rs.name, id: rs.groupId, value: rs.key, isLeaf: _isLeaf})
          }
          this.orgData = [...temp];
      })*/
      this.init()
    },
    // 组织切换
    handleTreeChange(value) {
      this.mapForm.groupPurview = ''
      this.userList = []
    },  
    // 选中节点
    handleTreeSelect(value, node) {
      if(this.orgList.some(item => item.id == value)) return
      this.orgList.push({id:value, name: getParentNode(node).join('-')})
    },
    // 权限切换
    handleAuthChange(value) {
      this.userList = []
    },
    // 员工弹窗
    handleAddUserShow() {
      if(!this.mapForm.groupId.length) {
        this.$message.error('请先选择所属组织');
        return
      }
      this.showUserFlag = true
      this.groupIds = this.mapForm.groupId.join(',')
      if(this.showUseNum) {
        this.$refs.orgPeopleRef.queryParam.groupIds = this.groupIds
        this.$refs.orgPeopleRef.search()
      }
      this.showUseNum+=1
    },
    // 添加员工
    handleSaveUserOk() {
      let res = this.$refs.orgPeopleRef.$refs.mapRef.getSelectedRows()
      if(!res.length) {
        this.$message.error('请先选择员工');
      }
      res.forEach(item => {
        item.createTime = getTimeNow()
      })
      this.showUserFlag = false
      if(this.pkId) {
        this.userList = [ ...this.userList, ...res ]
        const map = new Map()
        let filterList = this.userList.filter(el => !map.has(el.userId) && map.set(el.userId,true))
        this.userList = filterList
      } else {
        this.userList = [ ...res ]
      }
    },
    // 移除指定员工
    handleRemoveUserClick(record){
      let that = this
      this.$confirm({
          title: '确认要移除这个员工账号吗?',
          content: '删除后将无法恢复数据，请慎重选择',
          centered: true,
          icon: 'info-circle',
          okText:'确定',
          cancelText: '取消',
          onOk() {
            that.userList = that.userList.filter(item => item.userId != record.userId)
          },
      });
    },
    // 添加路径
    addMapRoute(){
      this.showRouteTitle = '添加学习路径'
      this.routeForm = Object.assign({},this.$options.data().routeForm)
      this.showRouteFlag = true
    },
    // 保存学习路径
    handleSaveRouteOk() {
      if(!this.routeForm.name) {
        this.$message.error('请输入路径名称')
        return
      }
      if(this.tabRouteList.some(item => item.name == this.routeForm.name)) {
        this.$message.error('路径名已存在')
        return
      }

      if(this.showRouteTitle == '编辑学习路径') {
        this.tabRouteList.splice(this.chooseRouteIndex,1,{
          ...this.routeForm,
        })
      } else {
        // 找到tabRouteList中大于等于routeForm.sort的索引
        let itemIndex = this.tabRouteList.findIndex(item => item.sort >= this.routeForm.sort)
        if(itemIndex == -1) {
          this.tabRouteList.push({
            ...this.routeForm,
            contents: []
          })
        } else {
          this.tabRouteList.splice(itemIndex,0,{
            ...this.routeForm,
            contents: []
          })
        }
      }
  
      //  直接push后排序
      // this.tabRouteList.push({
      //   ...this.routeForm,
      //   contents: []
      // })
      // this.tabRouteList = this.tabRouteList.sort((a,b)=>{ return a.sort-b.sort})
      this.showRouteFlag = false
    },
    // 编辑学习路径
    handleEditTabClick(item,index){
      this.chooseRouteIndex = index
      this.routeForm = JSON.parse(JSON.stringify(item))
      this.showRouteTitle = '编辑学习路径'
      this.showRouteFlag = true
    },
    // 删除学习路径
    handleDelTabClick(index){
      let that = this
      this.$confirm({
          title: '确认要删除这个学习路径吗?',
          content: '删除后将无法恢复数据,关联的学习内容也一并删除,请慎重选择',
          centered: true,
          icon: 'info-circle',
          okText:'确定',
          cancelText: '取消',
          onOk() {
            that.tabRouteList.splice(index,1)
          },
      });
    },
    // 学习内容类型选择
    handleTypeChange(value) {
      this.$refs.learnRef.clearValidate()
      this.learnRules = Object.assign({},this.$options.data().learnRules)
      let rules
      if(value == 1) {
        this.learnForm.classify = []
        this.learnForm.knowledgeId = undefined
        rules = {
          outerSystemName: [
            { required: true, message: '请输入系统名称', trigger: 'blur'}
          ],
          outerContentName: [
            { required: true, message: '请输入内容名称', trigger: 'blur'}
          ],
          outerAccessUrl: [
            { required: true, message: '请输入访问地址', trigger: 'blur'},
            { pattern: /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/, message: '访问地址格式不正确,请以https或http开头', trigger: 'blur'},
          ]
        }
        this.learnRules = {  
          type: [
            { required: true, message: '请选择内容类型', trigger: 'blur' }
          ],
          ...rules 
        }
      } else {
        this.learnForm.outerSystemName = ''
        this.learnForm.outerContentName = ''
        this.learnForm.outerAccessUrl = ''
        rules = {
          classify: [
            { required: true, message: '请选择分类', trigger: 'change'}
          ],
          knowledgeId: [
            { required: true, message: '请选择知识', trigger: 'change' }
          ]
        }
        this.learnRules = {  
          type: [
            { required: true, message: '请选择分类', trigger: 'blur' }
          ],
          ...rules 
        }
      }
    },
    // 添加学习内容
    addLearnInfo(){
      this.learnForm = Object.assign({},this.$options.data().learnForm)
      this.showLearnFlag = true
    },
    // 选中分类
    async handleClassifyChange(value, selectedOptions) {
      if(value.length) {
        let res = await configApi.getfindAllWikiFromCategoryId(value.slice(-1)[0])
        this.knowledgeList = res.data
      }
      // 清空知识
      this.learnForm.knowledgeId = undefined
    },
    // 选中知识
    async handleKnowledgeChange(value) {
      let res = await api.knowledgeSnapshot({'pkId': value})
      this.knowledgeInfo = res.data
    },
    // 保存学习内容
    handleSaveLearnOk() {
      this.$refs.learnRef.validate(valid => {
          if(valid) {
            setTimeout(() => {
              if(this.learnForm.type == 1) {
                this.tabRouteList[parseInt(this.tabsKeys)-1].contents.push({
                  ...this.learnForm
                })
              } else {
                this.tabRouteList[parseInt(this.tabsKeys)-1].contents.push({
                  ...this.learnForm,
                  ...this.knowledgeInfo
                })
              }
              this.showLearnFlag = false
            
              },1000)

          }
        } 
      )
    },
    // 移除学习内容
    handleDelItemClick(index) {
      this.tabRouteList[parseInt(this.tabsKeys)-1].contents.splice(index,1)
    },
    // 移动学习内容
    handleActionItemClick(info) {
      let data = JSON.parse(JSON.stringify(this.tabRouteList[parseInt(this.tabsKeys)-1].contents))
      this.tabRouteList[parseInt(this.tabsKeys)-1].contents = this.swapArray(data, info.index, info.action == 'up' ? (info.index - 1) : (info.index + 1))
    },
    // 元素互换位置
    swapArray(arr,index1,index2) {
      arr[index1]= arr.splice(index2, 1, arr[index1])[0];
      return arr
    },
    // 保存
    handleSaveClick() {
      this.$refs.mapRef.validate(valid => {
        if(valid) {
          if(this.mapForm.groupPurview == 2 && !this.userList.length) {
            this.$message.error('请选择员工')
            return
          }
          this.saveLoading = true
          let data = {
            ...this.mapForm,
            type: parseInt(this.mapForm.type),
            groupId: this.mapForm.groupId.join(','),
            groupSummary: this.orgList.length ? 
                this.orgList.filter(item => this.mapForm.groupId.indexOf(item.id) > -1).map(item => { return item.name}).join("/") 
                : 
                this.mapForm.groupSummary,
            purviewUsers: this.userList.map(item => { return item.userId }),
            routes: this.tabRouteList
          }
          if(!this.pkId) {
            api.create(data).then(res => {
              if(res.code == 200) {
                this.$message.success('新增成功')
                setTimeout(() => 
                  {
                    this.$router.back()
                    this.saveLoading = false
                  }
                ,2000)
              }
            })
          } else {
            data['pkId'] = this.pkId
            api.edit(data).then(res => {
              if(res.code == 200) {
                this.$message.success('新增成功')
                setTimeout(() => 
                  {
                    this.$router.back()
                    this.saveLoading = false
                  }
                ,2000)
              }
            })
          }
        }
      })
    },
    //加载左树下的子节点
    onLoadGroupTree(treeNode) {
      if (treeNode.dataRef.children) {
          return;
      }
      return OsGroupApi.getParentGroup(treeNode.dataRef.id).then(data => {
          let treeData = []
          for (let i = 0; i < data.length; i++) {
              var rs = data[i]
              var _isLeaf = rs.childAmount == 0 ? true : false;
              treeData.push({title: rs.name, id: rs.groupId, value: rs.key,isLeaf: _isLeaf})
          }
          var orgData = this.getGroupTree(this.orgData, treeNode.dataRef.id, treeData);

          this.orgData = [...orgData];
      })
    },
    getGroupTree(orgData, id, treeData) {
      if (treeData.length > 0) {
          for (var i = 0; i < orgData.length; i++) {
              if (orgData[i].id == id) {
                  orgData[i].children = treeData;
                  break;
              }
              if (orgData[i].children) {
                  this.getGroupTree(orgData[i].children, id, treeData);
              }
          }
      }
      return orgData;
    }
  }
}
</script>

<style lang="less" scoped>
@gary:  #f8f8f8;
@white: #fff;
@fontSize: 17px;
.mainContent {
  min-height: 100%;
  width: 100%;
  padding: 40px;
  background: #f8f8f8;
  position: relative;
  .ant-breadcrumb {
    position:absolute;
    top:10px;
  }
  .body {
    height: 100%;
    background: #f8f8f8;
    .content {
      height: 100%;
      background: #f8f8f8;
      form{
        background: @white;
        padding: 20px 15px 8px 40px;
      }
      .ant-form-item {
        width: 50%;
        margin: 8px 0 12px;
      }
      .empty-style {
        height:300px;
        display:flex;
        align-items:center;
        justify-content:center;
      }
    }
  }
}
.accessory-show {
  display:flex;
  align-items: center;
  img {
    width: 32px;
    height: 32px;
  }
  span {
    margin: 0 40px 0 10px;
  }
}
.clearBtn {
  background: none;
  color: #3294F7;
  text-shadow: none;
  padding: 0px 6px;
  border: none;
  box-shadow: none;
}
.titleBox{
  color: #000;
  font-size: @fontSize;
}
</style>
<style scoped>
/deep/ .ant-upload.ant-upload-drag {
  width: 30%;
  background: #fff;
}
/deep/.ant-btn > .anticon + span {
  margin-left: 0;
}
/deep/ .ant-tabs-bar {
  padding-left: 0;
}
/deep/ .ant-tabs .ant-tabs-large-bar .ant-tabs-tab {
  margin: 0 10px!important;
}
.totBtn{
  float: right;
}
/* /deep/ .ant-modal-body {
    padding: 0;
} */
/deep/ .ant-modal-footer {
  padding-right: 24px;
}
/* /deep/ .ant-select-selection__choice__remove {
  font-size: 0px!important;
} */
/* /deep/ .ant-select-selection__choice {
  padding: 0 10px;
} */
</style>