switch branch

src/lang/modules/systemManage/OperateAuth.js

@@ -45,12 +45,14 @@ export const OperateAuthZh = {
     tab02:'钢联化工数据库',
     tab03:'ETA指标库',
     tab04:'ETA预测指标',
-    tab05:'图库',
+    tab05:'ETA图库',
+    tab06:'ETA表格',
 
     placeholder01:'请输入图表名称',
     placeholder02:'请输入指标Id/指标名称',
     placeholder03:'请选择分类',
     placeholder04:'请选择用户',
+    placeholder_sheet:'请输入表格名称',
 
     btn_text01:'批量编辑',
     btn_text02:'权限设置',
@@ -60,6 +62,8 @@ export const OperateAuthZh = {
     table_col_name03:'创建人',
     table_col_name04:'指标ID',
     table_col_name05:'指标名称',
+    table_col_sheet_name:'表格名称',
+    table_col_sheet_menu:'表格分类',
 
     edit_title01:'编辑权限',
     edit_title02:'批量编辑权限',

src/routes/modules/oldRoutes.js

@@ -310,7 +310,7 @@ export default [
       },
       {
         path: "operateAuth",
-        component: () => import("@/views/system_manage/operateAuthManage.vue"),
+        component: () => import("@/views/system_manage/dataOperaAuth.vue"),
         name: "数据操作权限",
         hidden: false,
       },

src/views/datasheet_manage/customAnalysis/list.vue

@@ -20,7 +20,7 @@
           >{{$t('CustomAnalysisPage.up_file_btn')}}</el-button>
           <input type="file" @change="fileSelected" id="file"  style="display: none;">
           
-          <el-checkbox v-model="isShowMe"  @change="() => { getTreeData();getPublicList() }">{{$t('Chart.only_see_mine')}}</el-checkbox>
+          <!-- <el-checkbox v-model="isShowMe"  @change="() => { getTreeData();getPublicList() }">{{$t('Chart.only_see_mine')}}</el-checkbox> -->
         </div>
         <div class="search-cont">
           <el-select
@@ -398,7 +398,7 @@ export default {
       },
       
 
-      isShowMe: false,
+      isShowMe: true,
 
       sourceMap: {
         '/sheetAnalysisList': 4,

src/views/system_manage/components/opearAuthSetDia.vue

@@ -0,0 +1,174 @@
+<template>
+   <el-dialog
+		:visible.sync="isShow"
+		:close-on-click-modal="false"
+		:modal-append-to-body='false'
+    title="设置可见权限"
+		@close="cancelHandle"
+		custom-class="dialog"
+		center
+		width="650px"
+		v-dialogDrag
+  >
+    <div class="main">
+      <div class="header">
+        <el-cascader
+          v-model="selectUserIds"
+          ref="userRef"
+          :options="userList"
+          :props="{
+            value: 'AdminId',
+            label: 'RealName',
+            children: 'ChildrenList',
+            multiple: true,
+            emitPath: false
+          }"
+          collapse-tags
+          :show-all-levels="false"
+          clearable
+          @change="checkUser"
+          filterable
+          :placeholder="this.$t('SystemManage.OperateAuth.placeholder04')" 
+          style="width:300px"
+        />
+
+        <div class="checked-user scroll-cont" :style="`height:${form.type==='classify'?100:240}px`">
+          <el-tag
+            v-for="tag in selectUserList"
+            :key="tag.label"
+            closable
+            @close="removeUser(tag.value)"
+          >
+            {{tag.label}}
+          </el-tag>
+        </div>
+      </div>
+
+      <div class="classify-cont" v-if="form.type==='classify'">
+        <el-tabs v-model="currentTab" @tab-click="handleClick">
+          <el-tab-pane :label="item.label" :name="String(item.key)" v-for="item in tabs" :key="item.key"></el-tab-pane>
+        </el-tabs>
+        <div class="scroll-cont classify-section">
+          <el-tree
+            :data="classifyList"
+            :props="{
+              label: 'ClassifyName',
+              children: 'Child',
+            }"
+            show-checkbox
+            node-key="ClassifyId"
+          />
+        </div>
+        <p v-html="classifyTips"></p>
+      </div>
+    </div>
+
+    <div class="dia-bot">
+      <el-button type="primary" style="margin-right:20px" @click="cancelHandle">{{$t('Dialog.confirm_btn')}}</el-button>
+      <el-button type="primary" plain @click="cancelHandle">{{$t('Dialog.cancel_btn')}}</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    isShow: {
+      type: Object
+    },
+    userList: {
+      type: Array
+    },
+    classifyList: {
+      type: Array
+    },
+    tabs: {
+      type: Array
+    },
+    form: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      cascaderIdx: 0,
+      selectUserIds: [],
+      selectUserList: [],
+      currentTab: '1',
+      classifyTips: `注：1、支持加密分类关联部分用户；<br>
+       2、若模块分类中，子分类加密父分类不加密，则父分类展示但禁选。`
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+    /* 选中分类 */
+    checkClassify(a,b,c) {
+
+      console.log(a,b,c)
+      console.log(this.$refs.clssifyTreeRef.getCheckedNodes(false,true))
+    },
+
+    /* 选择用户 */
+    checkUser() {
+      let selectUser = this.$refs.userRef.getCheckedNodes(true);
+      let arr = []
+      arr = selectUser.length&&selectUser.map(_ => ({
+        label: _.label,
+        value: _.value
+      }))
+
+      this.selectUserList = arr
+      this.cascaderIdx++;
+    },
+
+    removeUser(val) {
+      console.log(this.selectUserIds,val)
+      let index = this.selectUserList.findIndex(_ => _===val)
+      this.selectUserList.splice(index,1)
+      // let 
+    },
+
+    cancelHandle() {
+      this.selectUserIds = []
+      this.selectUserList = []
+      this.$emit('update:isShow',false)
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+.main {
+  .checked-user {
+    display: flex;
+    gap: 10px;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    margin-top: 15px;
+  }
+  .scroll-cont {
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    overflow-y: auto;
+  }
+
+  .classify-cont {
+    margin-top: 15px;
+    .classify-section{
+      max-height: 200px;
+    }
+  }
+
+}
+.dia-bot {
+  display: flex;
+  justify-content: center;
+  margin: 30px 0;
+}
+</style>
+<style lang="scss">
+  .el-dialog .el-input {
+    width: 100%;
+  }
+</style>

src/views/system_manage/components/setClassifySecretDia.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-dialog
+		:visible.sync="isShow"
+		:close-on-click-modal="false"
+		:modal-append-to-body='false'
+    title="设置可见权限"
+		@close="cancelHandle"
+		custom-class="dialog"
+		center
+		width="650px"
+		v-dialogDrag
+  >
+    <div class="main">
+      <el-tabs v-model="currentTab" @tab-click="handleClick">
+          <el-tab-pane :label="item.label" :name="String(item.key)" v-for="item in tabs" :key="item.key"></el-tab-pane>
+        </el-tabs>
+        <div class="scroll-cont classify-section">
+          <el-tree
+            :data="classifyList"
+            :props="{
+              label: 'ClassifyName',
+              children: 'Child',
+            }"
+            show-checkbox
+            node-key="ClassifyId"
+          />
+        </div>
+    </div>
+
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    isShow: {
+      type: Boolean
+    },
+    tabs: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      currentTab: '1'
+    }
+  },
+  mounted(){
+
+  },
+  methods:{
+    cancelHandle() {
+      this.$emit('update:isShow',false)
+    }
+  },
+}
+</script>
+<style scoped lang='scss'>
+
+</style>

src/views/system_manage/dataOperaAuth.vue

@@ -0,0 +1,569 @@
+<template>
+  <div class="operate-auth-box">
+    <div class="header">
+      <div>
+        <el-select
+          v-model="currAuthSet"
+          @change="changeSet"
+        >
+          <el-option label="设置资产权限" :value="1"/>
+          <el-option label="设置可见权限" :value="2"/>
+        </el-select>
+        <el-cascader
+          v-model="searchForm.user"
+          :options="userList"
+          :props="{
+            value: 'AdminId',
+            label: 'RealName',
+            children: 'ChildrenList',
+            emitPath: false
+          }"
+          collapse-tags
+          :show-all-levels="false"
+          clearable
+          @change="changeUser"
+          filterable
+          :placeholder="this.$t('SystemManage.OperateAuth.placeholder04')" 
+          style="margin: 0 20px"
+        />
+      </div>
+
+      <div>
+        <el-button 
+          type="primary" 
+          @click="transferAuthHandle({},'all')" 
+          v-if="currAuthSet===1"
+        >全量资产转移</el-button>
+        <template v-if="currAuthSet===2">
+          <el-button type="primary" @click="setMenuSecretHandle">分类加密设置</el-button>
+          <el-button type="primary" @click="setAuthHandle({},'classify')">用户权限设置</el-button>
+        </template>
+        <el-button 
+          type="primary" 
+          @click="()=>{ currAuthSet===1 ? transferAuthHandle({},'multiple') : setAuthHandle({},'multiple') }"
+        >批量设置</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}}</li>
+      </ul>
+
+      <div class="filter-wrapper">
+        <div>
+          <el-input 
+            v-model="searchForm.key_word" 
+            :placeholder="phText" 
+            style="width: 250px;margin-right:20px;"
+            @change="filterChange(1)"
+            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="default_tab"
+            clearable
+            filterable
+            @change="filterChange(1)"
+            :placeholder="this.$t('SystemManage.OperateAuth.placeholder03')" 
+            style="width: 250px;"
+          />
+          
+        </div>
+
+        <div>
+          <span>已选：{{ searchForm.checkAll ? total : checkedList.length }}</span>
+          <el-checkbox v-model="searchForm.checkAll" style="margin-left:20px" @change="listCheckAllChange">列表全选</el-checkbox>
+        </div>
+      </div>
+
+      <el-table
+        :data="tableData"
+        ref="table"
+        element-loading-text="加载中..."
+        v-loading="tableLoading"
+        border
+        style="margin:20px 0"
+        @selection-change="selectionChange"
+      >
+          <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)}"><!-- 编辑 -->{{$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="filterChange"
+        />
+      </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="80px"
+          :model="transferForm"
+          :rules="dialogFormRules"
+          @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: 'AdminId',
+                label: 'RealName',
+                children: 'ChildrenList',
+                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">
+            <el-cascader
+              v-model="transferForm.newUser"
+              :options="userList"
+              :props="{
+                value: 'AdminId',
+                label: 'RealName',
+                children: 'ChildrenList',
+                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="资产模块" 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"
+      :classifyList="classifyOption"
+      :tabs="tabs"
+      :form="authForm"
+    />
+
+    <!-- 分类私密设置 -->
+    <setClassifySecretDia
+      :isShow.sync="isSetClassifySecret"
+      :tabs="tabs"
+    />
+  </div>
+</template>
+<script>
+import { operateAuthInterface } from '@/api/modules/setApi';
+import {dataBaseInterface} from '@/api/modules/chartApi'
+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
+    authTabs(){
+        const {operateAuthPermission,checkPermissionBtn} = this.permissionBtn
+        const operaMap = {
+            1:checkPermissionBtn(operateAuthPermission.operateAuth_manual),
+            2:checkPermissionBtn(operateAuthPermission.operateAuth_mysteel),
+            3:checkPermissionBtn(operateAuthPermission.operateAuth_etaLib),
+            4:checkPermissionBtn(operateAuthPermission.operateAuth_etaPredictLib),
+            5:checkPermissionBtn(operateAuthPermission.operateAuth_chartLib),
+
+
+
+            6: true
+        }
+        let temp = []
+        for(const k in operaMap){
+            if(operaMap[k]){
+                temp.push(this.tabs[k-1])
+            }
+        }
+        return temp
+    },
+    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))
+    },
+    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')
+    }
+  },
+
+  data() {
+    return {
+      currAuthSet: 1,//设置资产
+
+      default_tab: 1,
+      searchForm: {
+        user: '',
+        key_word: '',
+        classifys:[],
+        checkAll: false
+      },
+
+      classifyOption: [],
+      userList: [],
+
+      checkedList: [],
+
+      tableLoading: false,
+      tableData:[],
+      page_no: 1,
+      total: 0,
+      pageSize: 10,
+
+      /* 转移弹窗 */
+      isTransferDia: false,
+      transferForm: {
+        type:'',
+        creatorName: '',//创建人姓名
+        creatorIds: [],//创建人id
+        ids:'',
+        newUser: '',
+        assetTypes: []
+      },
+      transferTitMap: {
+        'all': '全量资产转移',
+        'multiple': '批量设置资产转移',
+        'single': '设置资产权限',
+      },
+
+      /* 设置权限弹窗 */
+      isSetAuthDia: false,
+      authForm: {
+        type:'',//分类设置 批量设置 单设置
+      },
+
+      /* 设置加密分类弹窗 */
+      isSetClassifySecret: false,
+    }
+  },
+  mounted(){
+    this.getClassifyList()
+    this.getUserList();
+  },
+  methods:{
+
+    /* 获取分类列表 */
+    getClassifyList() {
+      if(!this.default_tab) return
+
+      operateAuthInterface.getClassificationBySource({Source: this.default_tab}).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)
+          }
+        }
+      })
+    },
+    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
+            }
+        })
+    },
+
+     /* 获取用户列表 */
+    getUserList() {
+      // customInterence.getSale({Status: 0,AllEnabled: true}).then(res => {
+      dataBaseInterface.getEdbChartAdminList({Source: this.default_tab}).then(res=>{
+        if(res.Ret !== 200) return
+
+        this.userList = res.Data || [];
+      })
+    },
+
+    getTableData() {
+      if(!this.default_tab) return
+
+      this.tableLoading = true;
+      let params = {
+        Source: this.default_tab,
+        UserId: this.searchForm.user || '',
+        CurrentIndex: this.page_no,
+        PageSize: this.pageSize,
+        Keyword: this.searchForm.key_word,
+        Classify:this.searchForm.classifys.join(',')
+      }
+			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;
+			});
+    },
+
+    changeTab({key}) {
+      this.default_tab = key;
+      this.searchForm.classifys=[]
+      this.searchForm.key_word=''
+      this.page_no = 1;
+      this.getClassifyList()
+      // this.getUserList()
+      this.getTableData();
+    },
+
+    changeSet() {
+      this.changeTab({key:''})
+    },
+
+    //列表全选改变
+    listCheckAllChange(value){
+        this.searchForm.checkAll = value
+        this.$refs.table && this.$refs.table.clearSelection()
+
+        if(value){
+            this.$refs.table && this.$refs.table.toggleAllSelection()
+        }
+    },
+
+    filterChange(page=1) {
+       this.page_no = page;
+       this.getTableData()
+    },
+
+    selectionChange(val) {
+       this.checkedList = val || [];
+    },
+
+    /* 转移所属权限 单转 批量转 全量转*/
+    transferAuthHandle({ CreateUserName,DataId },type='single') {
+      if(type === 'multiple' && !this.checkedList.length) 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: '',
+        assetType: []
+      }
+      this.isTransferDia = true
+    },
+
+    /* 转移权限 */
+    async confirmTransferHandle() {
+      await this.$refs.formRef.validate()
+
+      // const res = await operateAuthInterface.authEdit({
+      //   Source: this.default_tab,
+      //   DataIdList: this.dialogForm.ids,
+      //   NewUserId: Number(this.dialogForm.new_user)
+      // })
+
+      // if(res.Ret !== 200) return
+      // this.$message.success(res.Msg);
+      // this.cancelDialogHandle();
+      // this.getTableData();
+    },
+
+    cancelTransfer() {
+      this.$refs.formRef.resetFields();
+      this.isTransferDia = false
+    },
+
+    /* 设置加密分类 */
+    setMenuSecretHandle() {
+      this.isSetClassifySecret = true
+    },
+
+    /* 设置可见权限 分类设置 单设置 批量设置*/
+    setAuthHandle({},type='single') {
+      if(type === 'multiple' && !this.checkedList.length) return this.$message.warning(this.$t('SystemManage.OperateAuth.msg01'))
+      
+      this.authForm.type = type;
+      this.isSetAuthDia = true
+    }
+
+  },
+}
+</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%;
+}
+</style>