eta_front/src/views/system_manage/components/authSetDialog.vue

<template>
  <el-dialog
		:visible.sync="isShow"
		:close-on-click-modal="false"
		:modal-append-to-body="false"
		@close="cancelHandle"
		custom-class="auth-set-dialog"
		center
		width="850px"
		top="5vh"
		v-dialogDrag
    :title="edbForm.title"
	>
    <div class="cont">
      <div class="header">
        <span>{{$t('SystemManage.OperateAuth.invisible_users')}}</span>
        <el-cascader
          v-model="filterUsers"
          :options="userList"
          :props="{
            value: 'AdminId',
            label: 'RealName',
            children: 'ChildrenList',
            emitPath: false,
            multiple: true,
            disabled: 'Creater'
          }"
          collapse-tags
          :show-all-levels="false"
          clearable
          filterable
          :placeholder="$t('SystemManage.OperateAuth.placeholder04')" 
          style="margin: 0 20px"
        />
        <el-button type="primary" @click="setAuthHandle">{{$t('Dialog.set_btn')}}</el-button>
      </div>
      <template v-if="edbForm.title===$t('SystemManage.OperateAuth.permission_title01')">
        <el-table
          :data="filterTable"
          border
          style="margin: 20px 0"
        >
          <el-table-column v-for="item in tableColums" :key="item.key" align="center" :label="item.label">
            <template slot-scope="{row}">
              <span>{{ row[item.key] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('Table.column_operations')">
            <template slot-scope="{row}" >
              <el-popconfirm
                :title="$t('SystemManage.OperateAuth.permission_confirm_msg')"
                @onConfirm="removeUser(row)"
              >
                <span slot="reference" class="deletesty">{{$t('Table.delete_btn')}}</span>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-col :span="24" style="height:100px">
          <m-page
            :page_no="pageNo"
            :pageSize="pageSize"
            :total="total"
            @handleCurrentChange="pageChange"
          />
        </el-col>
      </template>
    </div>
  </el-dialog>
</template>

<script>
import { operateAuthInterface } from '@/api/modules/setApi';
import mPage from '@/components/mPage';
export default {
  props: {
    isShow: {
      type: Boolean
    },
    users: {
      type: Array
    },
    edbForm: {
      type: Object
    }
  },
  components: { mPage },
  watch: {
    isShow(nval) {
      if(!nval) return
      
      let uers_arr = _.cloneDeep(this.users);
      this.disableCreaterHandle(uers_arr);
      this.userList = uers_arr;
      this.edbForm.title===this.$t('SystemManage.OperateAuth.permission_title01') && this.getTableList()
    }
  },
  computed:{
    tableColums(){
      return [
        { label:this.$t('SystemManage.DepartManage.user_table_name'),key: 'RealName' },
        { label:this.$t('SystemManage.DepartManage.user_table_role'),key: 'RoleName' },
        { label:this.$t('SystemManage.DepartManage.user_table_depart'),key: 'DepartmentGroup' },
      ]
    }
  },
  data() {
    return {
      userList: [],
      filterUsers: [],

      tableData: [],
      filterTable: [],
      // tableColums:[
      //   { label:'姓名',key: 'RealName' },
      //   { label:'角色',key: 'RoleName' },
      //   { label:'部门/分组',key: 'DepartmentGroup' },
      // ],
      pageNo:1,
      pageSize: 10,
      total: 0,
    }
  },
  methods: {

    /* 数据列表 */
    getTableList() {
      operateAuthInterface.getEdbNoAuthList({
        EdbInfoId: this.edbForm.ids[0]
      }).then(res => {
        if(res.Ret !== 200) return
        this.tableData = res.Data.List || [];
        this.total = this.tableData.length;
        this.filterTable = this.tableData.slice(0,this.pageSize*this.pageNo);
        // this.filterUsers = this.tableData.length ? this.tableData.map(_ => _.AdminId) : [];

      })
    },

    disableCreaterHandle(arr) {
      // let filter_arr = arr.form
      arr.forEach(item => {
        item.ChildrenList && item.ChildrenList.length && this.disableCreaterHandle(item.ChildrenList);
        if( Number(item.AdminId) === this.edbForm.createId) {
          item.Creater = true;
        }
      })
    },

    pageChange(page) {
      this.pageNo = page;
      this.filterTable = this.tableData.slice(this.pageSize*(this.pageNo-1),this.pageSize*this.pageNo);
    },


    cancelHandle() {
      this.pageNo = 1;
      this.filterUsers = [];
      this.filterTable = [];
      this.$emit('update:isShow',false)
    },

    /* 删除 */
    removeUser({AdminId}) {
          operateAuthInterface.edbNoAuthDel({
            EdbInfoId: Number(this.edbForm.ids[0]),
            AdminId
          }).then(res => {
            if(res.Ret !== 200) return 
            this.$message.success(this.$t('MsgPrompt.delete_msg'));
            this.getTableList();
          })
    },

    /* 设置权限 */
    async setAuthHandle() {
      if(!this.filterUsers.length) return this.$message.warning(this.$t('SystemManage.OperateAuth.placeholder04'))
      // let res = this.edbForm.title === '权限设置' 
      //   ? await operateAuthInterface.edbNoAuthSet({
      //       EdbInfoId: Number(this.edbForm.ids[0]),
      //       AdminIdList: this.filterUsers.map(_ => Number(_))
      //   })
      //   : 
      let res = await operateAuthInterface.edbNoAuthBatchSet({
          EdbInfoIdList: this.edbForm.ids.map(_ => Number(_)),
          AdminIdList: this.filterUsers.map(_ => Number(_))
        })

      if(res.Ret !== 200) return 
      this.$message.success(this.$t('SystemManage.OperateAuth.set_success'))
      if(this.edbForm.title === this.$t('SystemManage.OperateAuth.permission_title01')) {
        this.filterUsers=[]
        this.getTableList()
      }else {
        this.$emit('setSuccess');
        this.cancelHandle()
      }
    }
  }
}
</script>

<style lang="scss" soped>
.cont {
  min-height: 250px;
}
</style>
<style lang='scss'>
.auth-set-dialog {
  .el-cascader .el-input {width: 100%;}
}
</style>