Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue

@@ -1,10 +1,12 @@
<template>
  <el-dialog 
  v-dialogDrag
  :close-on-click-modal="false"
  :visible.sync="isShowDialog"
  @close="closeDialog"
  append-to-body title="分类授权">
  <el-dialog
    v-dialogDrag
    :close-on-click-modal="false"
    :visible.sync="isShowDialog"
    append-to-body
    class="avue-dialog avue-dialog--top"
    title="分类授权"
    top="-45px" @close="closeDialog">
    <el-table
      ref="dataTable"
      v-loading="isLoading"
@@ -20,13 +22,12 @@
      @sort-change="sortChange"
    >
      <el-table-column
        fixed
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        v-if="classifyAuthHeader.length !== 0"
        v-for="(item, index) in classifyAuthHeader"
        v-if="classifyAuthHeader.length !== 0"
        :key="index"
        :label="item.label"
        :prop="item.prop"
@@ -50,12 +51,12 @@
          </el-select>
          <el-input
            v-if="item.type === 'text'"
            type="text"
            readonly
            v-model="row[item.prop]"
            readonly
            type="text"
          >
          </el-input>
          <el-checkbox 
          <el-checkbox
            v-if="item.type === 'checkbox'"
            v-model="row[item.prop]">
          </el-checkbox>
@@ -63,19 +64,20 @@
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
        <el-button type="success" class="el-icon-plus" @click="addClassifyAuth"></el-button>
        <el-button type="warning" class="el-icon-minus" @click="subClassifyAuth"></el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
        <el-button type="danger" @click="isShowDialog = false">关 闭</el-button>
      <el-button class="el-icon-plus" type="success" @click="addClassifyAuth"></el-button>
      <el-button class="el-icon-minus" type="warning" @click="subClassifyAuth"></el-button>
      <el-button type="primary" @click="submit">提 交</el-button>
      <el-button type="danger" @click="isShowDialog = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getButtonByParentCode } from "@/api/system/menu"
import { getPage } from "@/api/system/role"
import { saveOrUpdate,getClassifyAuthList } from "@/api/system/classifyAuth"
import { v4 as uuidv4 } from 'uuid';
import {getButtonByParentCode} from "@/api/system/menu"
import {getPage} from "@/api/system/role"
import {saveOrUpdate, getClassifyAuthList} from "@/api/system/classifyAuth"
import {v4 as uuidv4} from 'uuid';

export default {
  name: "classifyAuthDialog.vue",
  props: {
@@ -94,7 +96,7 @@
      // 对话框显示控制
      isShowDialog: this.visible,
      isLoading: false,
      tableHeight: 'calc(100vh - 550px)',
      tableHeight: '520px',
      classifyAuthData: [],
      //列头
      classifyAuthHeader: [],
@@ -108,11 +110,11 @@
  },
  watch: {
    // 监听父组件传的窗口显示隐藏的值
    visible (){
      if(this.visible){
    visible() {
      if (this.visible) {
        this.isShowDialog = this.visible;
        return new Promise((resolve, reject) => {
          getButtonByParentCode({code:"classifyTree"}).then(res=>{
          getButtonByParentCode({code: "classifyTree"}).then(res => {
            // 记录按钮数据
            this.classifyAuthButton = res.data.data;
            const list = res.data.data;
@@ -146,15 +148,15 @@
            reject(err)
          });
          // 获取角色列表
          getPage(1,-1,null).then(res => {
          getPage(1, -1, null).then(res => {
            this.roleList = res.data.data.records;
          });
          // 获取该分类下已授权的分类授权信息
          getClassifyAuthList({classifyId:this.classifyData.oid}).then(res => {
          getClassifyAuthList({classifyId: this.classifyData.oid}).then(res => {
            //console.log(res.data.data);
            let authDatas = res.data.data;
            if (authDatas.length > 0) {
              authDatas.forEach(authData=>{
              authDatas.forEach(authData => {
                let item = {
                  oid: authData.oid,
                  roleData: authData.roleId,
@@ -162,8 +164,8 @@
                  uuid: uuidv4(),//生成唯一的id
                }
                //将按钮设置进去
                authData.buttonIdList.forEach(data=>{
                  Vue.set(item,data,true);
                authData.buttonIdList.forEach(data => {
                  Vue.set(item, data, true);
                });
                //console.log(item)
                this.classifyAuthData.push(item);
@@ -175,38 +177,40 @@
    },
  },
  computed: {},
  mounted() {},
  created() {},
  mounted() {
  },
  created() {
  },
  methods: {
    // 关闭对话框
    closeDialog(){
    closeDialog() {
      this.$emit('update:visible', false);
      this.classifyAuthData = [];
    },
    // 增加行
    addClassifyAuth(){
    addClassifyAuth() {
      let item = {
        roleData: this.roleList[0].id,
        classifyItem: this.classifyData.text,
        uuid: uuidv4(),//生成唯一的id
      }
      //将按钮设置进去
      this.classifyAuthButton.forEach(data=>{
        Vue.set(item,data.id,false);
      this.classifyAuthButton.forEach(data => {
        Vue.set(item, data.id, false);
      })
      //console.log(item)
      this.classifyAuthData.push(item)
      // console.log(this.classifyAuthData);
    },
    // 删除行
    subClassifyAuth(){
    subClassifyAuth() {
      for (let item of this.selectList) {
      let index = this.classifyAuthData.findIndex(data => data.index === item.index);
      if (index !== -1) {
        this.classifyAuthData.splice(index, 1);
        let index = this.classifyAuthData.findIndex(data => data.index === item.index);
        if (index !== -1) {
          this.classifyAuthData.splice(index, 1);
        }
      }
    }
    }, 
    },
    handleRowClick(row, column) {
      this.selectList.push(row);
      this.$refs.dataTable.toggleRowSelection(row);
@@ -221,8 +225,8 @@
      this.selectList = list;
    },
    // 保存分类授权信息
    submit(){
      if(this.classifyAuthData.length <= 0){
    submit() {
      if (this.classifyAuthData.length <= 0) {
        this.$message.warning('授权列表为空！')
        return;
      }
@@ -236,11 +240,11 @@
            break;
          }
        }
        if(isRepeat){
        if (isRepeat) {
          break;
        }
      }
      if(isRepeat) {
      if (isRepeat) {
        this.$message.warning("角色和分类已经存在，请重新配置！");
        return;
      }
@@ -255,8 +259,8 @@
          }
        }
        /**如果itemButtonList为空证明是，
        添加了角色但是没勾选任何的按钮*/
        if(itemButtonList.length <= 0) {
         添加了角色但是没勾选任何的按钮*/
        if (itemButtonList.length <= 0) {
          flag = true;
          return;
        }
@@ -268,19 +272,19 @@
        }
        form.push(data);
      });
      if(flag) {
      if (flag) {
        this.$message.warning('有未勾选操作的权限，不允许授权')
        return;
      }
      // console.log(form)
      // 调用保存分类授权的接口
      saveOrUpdate(form).then(res=>{
      saveOrUpdate(form).then(res => {
        this.$message({
          type: "success",
          message: res.data.msg,
        });
        // this.isShowDialog = false
      },(error) => {
      }, (error) => {
        window.console.log(error);
      })
    },
@@ -290,21 +294,25 @@

<style lang="scss" scoped>

  // 滚动条样式修改
  // 滚动条的宽度
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    height: 15px; // 纵向滚动条 必写
    background: white;
    border: white;
    width: 10px;
// 滚动条样式修改
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  height: 15px; // 纵向滚动条 必写
  background: white;
  border: white;
  width: 10px;

  }
}

  // 滚动条的滑块
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ececec;
    border-radius: 20px;
    border: #ececec;
  }
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 20px;
  border: #ececec;
}

</style>
/deep/ .el-table__body-wrapper {
  height: calc(100% - 50px) !important;
}

</style>