eta_front/src/views/system_manage/dataOperaAuth.vue

<template>
  <div class="operate-auth-box">
    <div class="header">
      <div>
        <el-select
          v-model="currAuthSet"
          @change="changeSet"
        >
          <el-option :label="$t('SystemManage.OperateAuth.set_assets_tab')" :value="1"/>
          <el-option :label="$t('SystemManage.OperateAuth.set_data_tab')" :value="2"/>
        </el-select>
        <el-cascader
          v-model="searchForm.user"
          :options="userList"
          :props="{
            value: 'ItemId',
            label: 'ItemName',
            children: 'Children',
            emitPath: false
          }"
          collapse-tags
          :show-all-levels="false"
          clearable
          @change="()=>{ filterChange();getUserDataCount();}"
          filterable
          :placeholder="this.$t('SystemManage.OperateAuth.placeholder04')" 
          style="margin: 0 20px"
        />
      </div>

      <div>
        <el-button 
          type="primary" 
          @click="transferAuthHandle({},'all')" 
          v-if="currAuthSet===1&&authBtn('operateAuth_transfer_all')"
        ><!-- 全量资产转移 -->{{$t('SystemManage.OperateAuth.transfer_all_btn')}}</el-button>
        <template v-if="currAuthSet===2">

          <el-tooltip effect="dark" placement="right" v-if="authBtn('operateAuth_set_classifySercet')">
            <div
              slot="content"
              v-html="$i18n.locale==='en'?ruleTips.classifySetEn:ruleTips.classifySet "
              style="line-height: 20px;width:300px"
            ></div>
            <i class="el-icon-warning" style="color: #666" />
          </el-tooltip>
          
          <el-button 
            type="primary" 
            @click="setMenuSecretHandle"
            v-if="authBtn('operateAuth_set_classifySercet')"
          >
            <!-- 分类加密设置 -->{{$t('SystemManage.OperateAuth.classify_secret_btn')}}
          </el-button>

          <el-button 
            type="primary" 
            @click="setAuthHandle({},'classify')"
            v-if="authBtn('operateAuth_set_classifySet')"
          >
            <!-- 按分类设置权限 -->{{$t('SystemManage.OperateAuth.classify_set_btn')}}
          </el-button>
        </template>
        <el-button 
          type="primary"
          v-if="authBtn(currAuthSet===1?'operateAuth_transfer_batch':'operateAuth_set_batch')"
          @click="()=>{ currAuthSet===1 ? transferAuthHandle({},'multiple') : setAuthHandle({},'multiple') }"
        >
          <!-- 批量设置 -->{{$t('SystemManage.OperateAuth.btn_text01')}}
        </el-button>
      </div>
    </div>

    <div class="main">

      <ul class="tab-wrapper">
        <li :class="['tab-li',{act: default_tab===item.key}]" v-for="item in tabs" :key="item.key" @click="changeTab(item)">
          {{item.label}}

          <div style="margin-top:20px;color: #666;" v-if="statisticCountMap[item.key]"><!-- 数量： -->{{$t('SystemManage.OperateAuth.label_count')}}：{{statisticCountMap[item.key]}}</div>
        </li>
      </ul>

      <el-tabs v-model="default_sub_tab" @tab-click="changeSubTab" v-if="default_tab===6">
        <el-tab-pane :label="item.label" v-for="item in subTabs" :key="item.key" :name="String(item.key)"></el-tab-pane>
      </el-tabs>

      <div class="filter-wrapper">
        <div>
          <el-input 
            v-model="searchForm.key_word" 
            :placeholder="phText" 
            style="width: 250px;margin-right:20px;"
            @change="filterChange"
            clearable
            >
            <i slot="prefix" class="el-input__icon el-icon-search"/>
          </el-input>

          <el-cascader
            v-model="searchForm.classifys"
            :options="classifyOption"
            :props="{
              value: 'ClassifyId',
              label: 'ClassifyName',
              children: 'Child',
              emitPath: false,
              multiple:true
            }"
            collapse-tags
            :show-all-levels="false"
            :key="classifysOptKey"
            clearable
            filterable
            @change="filterChange"
            :placeholder="this.$t('SystemManage.OperateAuth.placeholder03')" 
            style="width: 250px;"
          />
          
        </div>

        <div>
          <span>{{$t('SystemManage.OperateAuth.label_checked')}}：{{ isSelectAll ? (total-filterDuplicateChecked.length) : filterDuplicateChecked.length }}</span>
          <el-checkbox 
            v-model="searchForm.checkAll"
            :indeterminate="searchForm.checkSome"
            :disabled="tableData.length===0"
            style="margin-left:20px" 
            @change="listCheckAllChange"
          ><!-- 列表全选 -->{{$t('SystemManage.OperateAuth.all_select')}}</el-checkbox>
        </div>
      </div>

      <el-table
        :data="tableData"
        ref="table"
        element-loading-text="加载中..."
        v-loading="tableLoading"
        border
        style="margin:20px 0"
        @selection-change="selectionChange"
        @select="selectHandle" 
        @select-all="selectAllPageHandle"
      >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            v-for="item in tableColums"
            :key="item.label"
            :label="item.label"
            :prop="item.key"
            :width="item.widthsty"
            :min-width="item.minwidthsty"
            align="center"
          >
            <template slot-scope="{row}">
              <template v-if="item.key==='handle'">
                <span 
                  class="editsty" 
                  @click="() => {currAuthSet===1 ? transferAuthHandle(row) : setAuthHandle(row)}"
                  v-if="authBtn(currAuthSet===1?'operateAuth_transfer_one':'operateAuth_set_one')"
                >
                  <!-- 编辑 -->{{$t('Dialog.title_prefix_edit')}}
                </span>
              </template>

              <span v-else>{{ row[item.key] }}</span>
            </template>
          </el-table-column>
          
          <div slot="empty" style="padding: 100px 0">
            <tableNoData :text="$t('Table.prompt_slogan')" size="mini"/>
          </div>
      </el-table>
      <div style="height:35px;margin: 20px 0;">
        <m-page
          :page_no="page_no"
          :pageSize="pageSize"
          :total="total"
          @handleCurrentChange="pageChange"
        />
      </div>

    </div>

    <!-- 资产转移弹窗 -->
    <m-dialog
      :show.sync="isTransferDia"
      width="650px"
      :title="transferTitMap[transferForm.type]"
      @close="isTransferDia = false"
    >
      <div class="dialog-main operateauth-dialog-cont">
        <el-form
          ref="formRef"
          label-position="left"
          hide-required-asterisk
          label-width="110px"
          :model="transferForm"
          @close="cancelTransfer"
        >
          <!-- 原创建人 -->
          <el-form-item :label="$t('SystemManage.OperateAuth.original_creator')" v-if="transferForm.type!=='multiple'">
            <span v-if="transferForm.type==='single'">{{ transferForm.creatorName }}</span>
            
            <el-cascader
              v-else-if="transferForm.type==='all'"
              v-model="transferForm.creatorIds"
              :options="userList"
              :props="{
                value: 'ItemId',
                label: 'ItemName',
                children: 'Children',
                emitPath: false,
                multiple:true
              }"
              collapse-tags
              :show-all-levels="false"
              clearable
              filterable
              :placeholder="this.$t('SystemManage.OperateAuth.placeholder04')"
              style="width: 250px"
            />
          </el-form-item>

          <el-form-item :label="$t('SystemManage.OperateAuth.new_creator')" prop="newUser" :rules="[
              { required: true, message: this.$t('SystemManage.OperateAuth.placeholder05'), trigger: 'change' }
            ]"
          >
            <el-cascader
              v-model="transferForm.newUser"
              :options="userList"
              :props="{
                value: 'ItemId',
                label: 'ItemName',
                children: 'Children',
                emitPath: false,
              }"
              collapse-tags
              :show-all-levels="false"
              clearable
              filterable
              :placeholder="$t('SystemManage.OperateAuth.placeholder04')" 
              style="width: 250px"
            />
          </el-form-item>

          <el-form-item :label="$t('SystemManage.OperateAuth.label_assets')" prop="assetTypes" v-if="transferForm.type==='all'">
            <el-select v-model="transferForm.assetTypes" multiple style="width: 250px">
              <el-option v-for="item in tabs" :key="item.key" :value="item.key" :label="item.label"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="dia-bot">
        <el-button
          type="primary"
          style="margin-right: 60px"
          @click="confirmTransferHandle"
          >{{$t('Dialog.confirm_save_btn')}}</el-button
        >
        <el-button type="primary" plain @click="cancelTransfer"
          >{{$t('Dialog.cancel_btn')}}</el-button
        >
      </div>
    </m-dialog>

    <!-- 权限设置弹窗 -->
    <opearAuthSetDia
      :isShow.sync="isSetAuthDia"
      :userList="userList"
      :tabs="tabs"
      :subTabs="subTabs"
      :form="authForm"
    />

    <!-- 分类私密设置 -->
    <setClassifySecretDia
      :isShow.sync="isSetClassifySecret"
      :tabs="tabs"
      :subTabs="subTabs"
    />
  </div>
</template>
<script>
import { operateAuthInterface,departInterence } from '@/api/modules/setApi';
import {dataAuthInterface} from '@/api/modules/dataApi.js'
import mPage from '@/components/mPage.vue';
import mDialog from '@/components/mDialog.vue'
import opearAuthSetDia from './components/opearAuthSetDia.vue';
import setClassifySecretDia from './components/setClassifySecretDia.vue';
export default {
  components: { mPage,mDialog,opearAuthSetDia,setClassifySecretDia },
  computed: {
    tabs(){
      const tabs = [
        { label: this.$t('SystemManage.OperateAuth.tab01'), key: 1 },
        { label: this.$t('SystemManage.OperateAuth.tab02'), key: 2 },
        { label: this.$t('SystemManage.OperateAuth.tab03'), key: 3 },
        { label: this.$t('SystemManage.OperateAuth.tab04'), key: 4 },
        { label: this.$t('SystemManage.OperateAuth.tab05'), key: 5 },
        { label: this.$t('SystemManage.OperateAuth.tab06'), key: 6 },
      ]
      return this.currAuthSet===1 ? tabs : tabs.filter(item => [3,4,5,6].includes(item.key))
    },
    subTabs() {
      const subTabs = [
        { label: /* '自定义分析' */this.$t('SystemManage.OperateAuth.tab_sub_sheet1'), key: 4 },
        { label:/*  '时间序列表格' */this.$t('SystemManage.OperateAuth.tab_sub_sheet2'), key: 2 },
        { label: /* '混合表格' */this.$t('SystemManage.OperateAuth.tab_sub_sheet3'), key: 3 },
      ]

      return this.currAuthSet===1 ? subTabs : subTabs.filter(_ => _.key!==4)
    },
    tableColums() {
      const clomusMap = {
        5: [
            { label: this.$t('SystemManage.OperateAuth.table_col_name01'),key: 'Name' },
            { label: this.$t('SystemManage.OperateAuth.table_col_name02'),key: 'ClassifyName' },
            { label: this.$t('SystemManage.OperateAuth.table_col_name03'),key: 'CreateUserName' },
            { label: this.$t('Table.column_operations'),key: 'handle' },
          ],
        6: [
            { label: this.$t('SystemManage.OperateAuth.table_col_sheet_name'),key: 'Name' },
            { label: this.$t('SystemManage.OperateAuth.table_col_sheet_menu'),key: 'ClassifyName' },
            { label: this.$t('SystemManage.OperateAuth.table_col_name03'),key: 'CreateUserName' },
            { label: this.$t('Table.column_operations'),key: 'handle' },
          ],
      }
      return clomusMap[this.default_tab] ? clomusMap[this.default_tab] 
        : [
          { label: this.$t('SystemManage.OperateAuth.table_col_name04'),key: 'Code' },
          { label: this.$t('SystemManage.OperateAuth.table_col_name05'),key: 'Name' },
          { label: this.$t('SystemManage.OperateAuth.table_col_name03'),key: 'CreateUserName' },
          { label: this.$t('Table.column_operations'),key: 'handle' },
        ]
    },

    phText() {
      const textMap = {
        5: this.$t('SystemManage.OperateAuth.placeholder01'),
        6: this.$t('SystemManage.OperateAuth.placeholder_sheet')
      }
      return textMap[this.default_tab] ? textMap[this.default_tab] : this.$t('SystemManage.OperateAuth.placeholder02')
    },

    filterDuplicateChecked() {
      return Array.from(new Set(this.checkedList))
    }
  },

  data() {
    return {
      currAuthSet: 1,//设置资产

      default_tab: 1,
      default_sub_tab: '4',
      searchForm: {
        user: '',
        key_word: '',
        classifys:[],
        checkAll: false, //控制全选显示状态
        checkSome: false
      },
      isSelectAll: false, //真正意义上的全选或不全选

      classifyOption: [],
      classifysOptKey: 0,
      userList: [],

      checkedList: [], //不全选勾选中的 或 全选取消勾的
      selectionReactCancel:false,//手动设置选中中

      tableLoading: false,
      tableData:[],
      page_no: 1,
      total: 0,
      pageSize: 10,
      statisticCountMap: {},

      ruleTips: {
        'classifySet': `
          1、”分类加密设置“：分类默认公开，分类设置加密后，新增用户默认无加密分类的数据权限。<br>
          2、按分类设置权限：加密的分类支持开放权限给用户。<br>
          3、批量设置：同时设置单个或多个数据的权限。
        `,
        'classifySetEn': `
          1. "Classified Encryption Settings": By default, categories are public. Once a category is set to encrypted, new users will not have data permissions for the encrypted category by default.<br>
          2. "Set Permissions by Category": Encrypted categories support granting access permissions to users.<br>
          3. "Batch Settings": Set permissions for single or multiple data entries at the same time.
        `
      },

      /* 转移弹窗 */
      isTransferDia: false,
      transferForm: {
        type:'',
        creatorName: '',//创建人姓名
        creatorIds: [],//创建人id
        ids:'',
        newUser: '',
        assetTypes: []
      },
      transferTitMap: {
        'all': /* '全量资产转移' */ this.$t('SystemManage.OperateAuth.transfer_title1'),
        'multiple': /* '批量设置资产转移' */this.$t('SystemManage.OperateAuth.transfer_title2'),
        'single':/*  '设置资产转移' */this.$t('SystemManage.OperateAuth.transfer_title3'),
      },

      /* 设置权限弹窗 */
      isSetAuthDia: false,
      authForm: {
        type:'',//分类设置 批量设置 单设置
        ids:[],
      },

      /* 设置加密分类弹窗 */
      isSetClassifySecret: false,
    }
  },
  mounted(){
    this.getClassifyList()
    this.getUserList();
    this.getTableData()
  },
  methods:{

    /* 获取分类列表 */
    getClassifyList() {
      if(!this.default_tab) return

      operateAuthInterface.getClassificationBySource({
        Source: this.default_tab,
        SubSource: this.default_tab === 6 ? Number(this.default_sub_tab) : 0
      }).then(res => {
        if(res.Ret == 200){
          this.classifyOption = res.Data.List || []
          //如果是三级分类,去掉最后一级分类的child
          if([3,4,5,6].includes(this.default_tab)){
            this.filterNodes(this.classifyOption)
          }
          ++this.classifysOptKey;
        }
      })
    },
    filterNodes(arr) {
        arr.length && arr.forEach(item => {
            item.Child && item.Child.length && this.filterNodes(item.Child)
            if(item.Child && !item.Child.length) {
                delete item.Child
            }
        })
    },

     /* 获取用户列表 */
    async getUserList() {
      
      const res = await dataAuthInterface.userSearch();
      if (res.Ret !== 200) return
      
      this.userList = res.Data || []
    },

    /* 获取用户的资产数量 */
    async getUserDataCount() {
      if(!this.searchForm.user){
        this.statisticCountMap = {}
        return
      }

      const res = await operateAuthInterface.getUserStatistic({ UserId: this.searchForm.user,CountType: this.currAuthSet})
      
      if(res.Ret !== 200) return
      this.statisticCountMap = res.Data;
    },
    
    getTableData(type) {
      if(!this.default_tab) return

      this.tableLoading = true;
      let params = {
        Source: this.default_tab,
        UserId: this.searchForm.user || 0,
        CurrentIndex: this.page_no,
        PageSize: this.pageSize,
        Keyword: this.searchForm.key_word,
        Classify:this.searchForm.classifys.join(','),
        SubSource: this.default_tab === 6 ? Number(this.default_sub_tab) : 0
      }
			operateAuthInterface.list(params).then(res => {
        this.tableLoading = false;
        if( res.Ret!==200 )return

        const { Data } = res;

        this.tableData = Data.List || [];
        this.total = Data.Paging.Totals;
        
        if(type==='pageChange'){
          //页码变化 选中项不做清空
          this.checkedSomeSelection()
        }else {
          this.listCheckAllChange(false)

        }
			});
    },

    /* 设置当页数据勾选状态 */
    checkedSomeSelection() {
      this.selectionReactCancel=true
      console.log(this.checkedList,this.isSelectAll)
      if(!this.isSelectAll){
          this.checkedList.map(_ =>{
              let row = this.tableData.find(item => item.DataId==_.DataId)
              if(row){ //设置部分选中
                  setTimeout(()=>{
                      this.$refs.table.toggleRowSelection(row,true)
                  },20)
              }
          })
      }else{
          // this.$refs.table && this.$refs.table.clearSelection()
          this.$refs.table &&this.$refs.table.toggleAllSelection()
          this.checkedList.map(_ =>{
              let row = this.tableData.find(item => item.DataId==_.DataId)
              if(row){ //设置部分不勾选
                  setTimeout(()=>{
                      this.$refs.table.toggleRowSelection(row,false)
                  },20)
              }
          })
      }
      setTimeout(()=>{
          this.selectionReactCancel=false
      },30)
    },

    /* 切换模块 */
    changeTab({key}) {
      this.default_tab = key;
      this.default_sub_tab = String(this.subTabs[0].key);
      this.searchForm.classifys=[]
      this.searchForm.key_word=''
      this.searchForm.checkAll = false

      this.page_no = 1;
      this.getClassifyList()

      this.getTableData();
    },

    changeSubTab() {
      this.searchForm.classifys=[]
      this.searchForm.key_word=''
      this.searchForm.checkAll = false

      this.page_no = 1;
      this.getClassifyList()

      this.getTableData();
    },

    changeSet() {
      this.changeTab({key: this.currAuthSet===1?1:3})
      this.getUserDataCount()
    },

    //列表全选或全不选
    listCheckAllChange(value){
      this.checkedList = []
      this.isSelectAll = value
    
      value ? this.$refs.table && this.$refs.table.toggleAllSelection() : this.$refs.table && this.$refs.table.clearSelection()
    },

    //筛选改变
    filterChange() {
      this.page_no = 1;
      this.getTableData()
    },

    // 页码改变
    pageChange(page) {
       this.page_no = page;
       this.getTableData('pageChange')
    },

    selectionChange(val) {
      if(this.selectionReactCancel) return
        // selectAllHandle的触发在selectionChange后面，将selectionChange的逻辑延迟一下
        //设置全选框状态 选中 半选 不选
        setTimeout(()=>{
            let filterChecked = Array.from(new Set(this.checkedList))
            //全选
            if(
              (filterChecked.length===this.total&&this.total>0 && (!this.isSelectAll))
                || (filterChecked.length === 0 && this.isSelectAll)
            ){
                this.searchForm.checkAll = true
                this.searchForm.checkSome = false
            //不选
            }else if(
              (filterChecked.length === 0 && (!this.isSelectAll))
              || (filterChecked.length === this.total && this.isSelectAll)
            ){
                this.searchForm.checkAll = false
                this.searchForm.checkSome = false
            //半选
            }else{
                this.searchForm.checkAll = false
                this.searchForm.checkSome=true
            }
        },1)
    },

    //单选
    selectHandle(selection,row){ //当前选中的项是进选中还是取消选中中
      console.log(selection,row)
        if(this.selectionReactCancel) return 

        //当前项是选中还是取消选
        let haveChecked = selection.some(_ => _.DataId === row.DataId);

        //全选取消选和不全选选中才有意义
        if((haveChecked&&!this.isSelectAll) || (!haveChecked&&this.isSelectAll)) {
          this.checkedList.push(row)
        }else {
          this.checkedList=this.checkedList.filter(_ => _.DataId!==row.DataId)
        }
    },

    //整列选
    selectAllPageHandle(selection){
        if(this.selectionReactCancel) return 
        
        //当前页是选中还是取消
        let haveChecked = selection && selection.length>0;

        //全选取消选和不全选选中才有意义
        if((haveChecked&&!this.isSelectAll) || (!haveChecked&&this.isSelectAll)) {
          this.checkedList = [...this.checkedList,...this.tableData]
        }else {

          let pageIds = this.tableData.map(_ => _.DataId);
          this.checkedList = this.checkedList.filter(_ => !pageIds.includes(_.DataId))
        }
    },

    /* 转移所属权限 单转 批量转 全量转*/
    transferAuthHandle({ CreateUserName,DataId },type='single') {
      if(type === 'multiple' && !this.checkedList.length &&!this.isSelectAll) return this.$message.warning(this.$t('SystemManage.OperateAuth.msg01'))

      this.transferForm = {
        type,
        creatorName: type==='single' ?  CreateUserName : '',
        creatorIds: [],
        ids:type === 'single' ? [DataId] : this.checkedList.map(_ => _.DataId),
        newUser: '',
        assetTypes: this.tabs.map(_=>_.key)
      }
      this.isTransferDia = true
    },

    /* 转移权限 */
    async confirmTransferHandle() {
      await this.$refs.formRef.validate()

      //全量转
      if(this.transferForm.type==='all') return this.transferAllHandle()

      //单模块转
      const res = await operateAuthInterface.authEdit({
        Source: this.default_tab,
        SubSource: this.default_tab === 6 ? Number(this.default_sub_tab) : 0,
        DataIdList: this.isSelectAll ? [] : this.transferForm.ids,
        NoDataIdList: this.isSelectAll ? this.transferForm.ids : [],
        NewUserId: Number(this.transferForm.newUser),
        Keyword:this.searchForm.key_word,
        UserId:this.searchForm.user||0,
        Classify:this.searchForm.classifys.join(','),
        IsSelectAll:this.isSelectAll
      })

      if(res.Ret !== 200) return
      this.$message.success(res.Msg);

      this.cancelTransfer();
      this.getTableData();
    },

    /* 全量转移 */
    async transferAllHandle() {
      if(!this.transferForm.creatorIds.length) return this.$message.warning(/* '请选择原创建人' */this.$t('SystemManage.OperateAuth.old_creator_msg'))
      
      if(!this.transferForm.assetTypes.length) return this.$message.warning(/* '请选择要转移资产模块' */)

      const res = await operateAuthInterface.transferAllData({
        Source: this.transferForm.assetTypes,
        OldUserId: this.transferForm.creatorIds.map(_ => Number(_)),
        NewUserId: Number(this.transferForm.newUser)
      })

      if(res.Ret !== 200) return 
      this.$message.success(res.Msg);

      this.cancelTransfer();
      this.getTableData();
    },

    cancelTransfer() {
      this.$refs.formRef.resetFields();
      this.isTransferDia = false
    },

    /* 设置加密分类 */
    setMenuSecretHandle() {
      this.isSetClassifySecret = true
    },

    /* 设置可见权限 分类设置 单设置 批量设置*/
    setAuthHandle({ DataId,Name },type='single') {
      if(type === 'multiple' && !this.checkedList.length&&!this.isSelectAll) return this.$message.warning(this.$t('SystemManage.OperateAuth.msg01'))
      
      let checked = type === 'single' ? [ DataId ] : this.checkedList.map(_ => _.DataId)

      this.authForm = {
        type,
        dataName: Name,
        params: type!=='classify' ? {
          Source: this.default_tab,
          SubSource: this.default_tab === 6 ? Number(this.default_sub_tab) : 0,
          DataIdList: (this.isSelectAll&&type==='multiple') ? [] : checked,
          NoDataIdList: (this.isSelectAll&&type==='multiple') ? checked : [],
          Keyword:this.searchForm.key_word,
          UserId:this.searchForm.user||0,
          Classify:this.searchForm.classifys.join(','),
          IsSelectAll:(this.isSelectAll&&type==='multiple') ? true : false
        } : null
      }
      this.isSetAuthDia = true
    },

    authBtn(key){
      const {operateAuthPermission,checkPermissionBtn} = this.permissionBtn
       
      return checkPermissionBtn(operateAuthPermission[key])
    }

  },
}
</script>
<style scoped lang='scss'>
@import "~@/styles/theme-vars.scss";
.operate-auth-box {
  * {
    box-sizing: border-box;
  }
  .header,.main {
    padding: 20px 30px;
    background: #fff;
    position: relative;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  }
  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 10px;
  }
  .main {
    min-height: calc(100vh - 240px);
    .tab-wrapper {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      .tab-li {
        width: 16%;
        height: 90px;
        background: #ececec;
        padding: 15px 20px;
        border-radius: 8px;
        border: 1px solid transparent;
        cursor: pointer;
        &.act {
          border-color: $theme-color;
          background: #e6eefb;
        }
      }
    }

    .filter-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.dialog-main {
  padding-left: 110px;
}
.dia-bot {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
</style>
<style lang="scss">
.operateauth-dialog-cont .el-input {
  width: 100%;
}
.operate-auth-box .el-tabs__nav-wrap::after {
  background: transparent;
}
</style>