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

@@ -8,7 +8,6 @@
    title="分类授权"
    top="-45px" @close="closeDialog">
    <el-table
      :key="itemKey"
      ref="dataTable"
      v-loading="isLoading"
      :data="classifyAuthData"
@@ -16,9 +15,11 @@
      :height="tableHeight"
      border
      class="cus-table"
      @select="handleSelection"
      @row-click="handleRowClick"
      @select-all="handleSelectionAll"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
    >
      <el-table-column
        type="selection"
@@ -39,7 +40,7 @@
            v-if="item.type === 'select'"
            slot="prepend"
            v-model="row[item.prop]"
            @change="selectChange(row.roleData,row)"
            @change="roleChange(row.roleData,row)"
          >
            <el-option
              v-for="optionItem in roleList"
@@ -59,7 +60,8 @@
          <el-checkbox
            v-if="item.type === 'checkbox'"
            v-model="row[item.prop]"
            :disabled="row.allDisabled ? true :row[item.code]">
            :disabled="row.authButton.allDisabled ? true : row.authButton[item.code]"
            @change="checkBoxToChangeTheEvent(row[item.prop],item.code,row,item.prop)">
          </el-checkbox>
        </template>
      </el-table-column>
@@ -81,8 +83,9 @@
import {v4 as uuidv4} from 'uuid';

export default {
  name: "classifyAuthDialog.vue",
  name: "dataAuthDialog.vue",
  props: {
    // 当前点击节点的顶层节点
    classifyData: {
      type: "Object",
      default: "",
@@ -92,12 +95,16 @@
      type: "Boolean",
      default: false,
    },
    // 当前点击的节点
    TreeNode: {
      type: Object
    }
  },
  data() {
    return {
      // 对话框显示控制
      isShowDialog: this.visible,
      isLoading: false,
      isLoading: true,
      tableHeight: 'calc(100vh - 550px)',
      classifyAuthData: [],
      //列头
@@ -113,145 +120,93 @@
      currentRow: {}
    };
  },
  computed: {},
  mounted() {
  },
  created() {
  },
  watch: {
    // 监听父组件传的窗口显示隐藏的值
    visible() {
      if (this.visible) {
        this.isShowDialog = this.visible;
        return new Promise((resolve, reject) => {
          getButtonByParentCode({code: "classifyTree"}).then(res => {
            // 记录按钮数据
            this.classifyAuthButton = res.data.data;
            const list = res.data.data;
            let tempData = [];
            // 角色列
            tempData.push({
              label: "角色",
              prop: "roleData",
              type: "select",
              width: 150,
            });
            // 编码项分类授权
            tempData.push({
              label: "编码项分类授权",
              prop: "classifyItem",
              type: "text",
              width: 180,
            });
            list.forEach(item => {
              let columnItem = {
                label: item.name,
                prop: item.id,
                code: item.code,
                type: "checkbox",
                width: 180,
              };
              tempData.push(columnItem);
            })
            this.classifyAuthHeader = tempData;
            resolve();
          }).catch(err => {
            reject(err)
          });
          // 获取角色列表
          getPage(1, -1, null).then(res => {
            this.roleList = res.data.data.records;
          });
          // 获取该分类下已授权的分类授权信息
          getClassifyAuthList({classifyId: this.classifyData.oid, authType: "classify_auth"}).then(res => {
            //console.log(res.data.data);
            let authDatas = res.data.data;
            if (authDatas.length > 0) {
              authDatas.forEach((authData, index) => {
                let item = {
                  oid: authData.oid,
                  roleData: authData.roleId,
                  classifyItem: this.classifyData.label,
                  index: index,
                  uuid: uuidv4(),//生成唯一的id
                }
                //将按钮设置进去
                authData.buttonIdList.forEach(data => {
                  Vue.set(item, data, true);
        this.loadAuthPage();
      }
    },
    classifyAuthData(newval) {
      this.addIndex = newval.length <= 0 ? 0 : newval.length - 1;
    }
  },
  computed: {},
  mounted() {
  },
  created() {
  },
  methods: {
    checkBoxToChangeTheEvent(check, code, row, id) {
      if (code === "classify_view") {
        row.checkTheStatus = check;
      } else if (!row.checkTheStatus) {
        this.$message.warning('请先勾选查看按钮！');
        // 在条件不满足时将多选框状态设置为false
        row[id] = false;
      }

      if (!row.checkTheStatus) {
        this.classifyAuthButton.forEach(key => {
          // 查看为false时将所有多选框状态设置为false
          row[key.id] = false;
        });
      }
    },
    // 关闭对话框
    closeDialog() {
      this.$emit('update:visible', false);
      this.classifyAuthData = [];
    },
    roleHandlerMethods(id, type, index) {
      if (this.classifyAuthData.length === 0) {
        return;
      }
      //filteredItems 未授权数组
      getButtonsByRoleId({roleId: id, code: 'classifyTree '}).then(res => {
        const filteredItems = this.classifyAuthButton.filter(item =>
          !res.data.data.some(x => x.id === item.id)
        );

        //和表格列进行对比
        this.classifyAuthHeader.forEach((item) => {
          // if (item.code !== 'classify_view') {
          //   this.$set(this.classifyAuthData[index].authButton, "allDisabled", true);
          // }
          const isMatched = filteredItems.some((x) => x.id === item.prop);
          this.$nextTick(() => {
            if (this.classifyAuthData[index]) {
              if (isMatched) {
                Object.keys(this.classifyAuthData[index]).forEach((key) => {
                  this.$set(this.classifyAuthData[index].authButton, item.code, true);
                  //添加 “查看全部禁用条件”
                  if (item.code === "classify_view") {
                    this.$set(this.classifyAuthData[index].authButton, "allDisabled", true);
                  }
                });
                this.classifyAuthData.push(item);
                this.addIndex = this.classifyAuthData.length - 1; //添加行下标等于classifyAuthData的长度-1
                this.roleHandlerMethods(authData.roleId, 'create', index)
                // console.log('index', index)
              })

              } else {
                Object.keys(this.classifyAuthData[index]).forEach((key) => {
                  this.$set(this.classifyAuthData[index].authButton, item.code, false);
                });
                if (item.code === "classify_view") {
                  this.classifyAuthData[index].authButton.allDisabled = false;
                }
              }
            }
          });
        });
      }
    },
  },
  methods: {
    roleHandlerMethods(id, type, index) {
      if (this.classifyAuthData.length < 0) {
        return;
      }

      getButtonsByRoleId({roleId: id, code: 'classifyTree'}).then(res => {
        // 找到this.classifyAuthButton中没有对应的属性
        const filteredItems = this.classifyAuthButton.filter(item => {
          return !res.data.data.find(x => x.id === item.id);
        });
        // console.log('禁用按钮',filteredItems)
        // console.log('不禁用按钮',res.data.data)
        //拿表格列头循环和没有对应的属性进行比较
        this.classifyAuthHeader.forEach((item) => {
          const isMatched = filteredItems.some(x => x.id === item.prop);
          if (isMatched) {
            this.$nextTick(() => {
              if (this.classifyAuthData[index]) {
                Object.keys(this.classifyAuthData[index]).forEach((key) => {

                    if (this.classifyAuthData[index].classify_view) {
                      this.$set(this.classifyAuthData[index], item.code, true);
                    } else {
                      this.classifyAuthData[index][item.code] = false;
                    }
                    // console.log(item.code)
                    // this.$set(this.classifyAuthData[index], item.code, true);

                });
              }
            })
          } else {
            this.$nextTick(() => {
              if (this.classifyAuthData[index]) {
                Object.keys(this.classifyAuthData[index]).forEach((key) => {
                  if (item.prop === key) {
                    this.$set(this.classifyAuthData[index], item.code, false);
                  }
                });
              }
            })
          }
        });

        //添加 “查看全部禁用条件”
        this.classifyAuthData.forEach((classkey, classIndex) => {
          if (classkey.classify_view) {
            this.$set(this.classifyAuthData[classIndex], 'allDisabled', true)
          } else {
            this.classifyAuthData[classIndex].allDisabled = false;
          }
        });
        // console.log('classifyAuthData',this.classifyAuthData)
        // console.log(this.classifyAuthData)
        //强制刷新表格
        this.itemKey = uuidv4();
      })
      });
    },
    async selectChange(row, currentRow) {
    // 角色改变时
    async roleChange(row, currentRow) {
      try {
        this.currentRow = currentRow;
        const res = await getButtonsByRoleId({roleId: row, code: 'classifyTree'});
        const res = await getButtonsByRoleId({roleId: row, code: 'classifyTree '});

        const filteredItems = this.classifyAuthButton.filter(item => {
          return !res.data.data.find(x => x.id === item.id);
@@ -262,17 +217,17 @@
          this.$nextTick(() => {
            if (currentRow) {
              if (isMatched) {
                Object.keys(currentRow).forEach(key => {
                  currentRow[item.code] = item.prop === key ? false : true;
                  if (!currentRow.classify_view) {
                    currentRow.allDisabled = false;
                Object.keys(currentRow).forEach((key) => {
                  currentRow.authButton[item.code] = true;
                  if (!currentRow.authButton.classify_view) {
                    currentRow.authButton.allDisabled = false;
                  }
                });
              } else {
                Object.keys(currentRow).forEach(key => {
                  currentRow[item.code] = item.prop === key ? true : false;
                  if (!currentRow.classify_view) {
                    currentRow.allDisabled = false;
                Object.keys(currentRow).forEach((key) => {
                  currentRow.authButton[item.code] = false;
                  if (!currentRow.authButton.classify_view) {
                    currentRow.authButton.allDisabled = false;
                  }
                });
              }
@@ -284,31 +239,27 @@
        console.error(error);
      }
    },
    // 关闭对话框
    closeDialog() {
      this.$emit('update:visible', false);
      this.classifyAuthData = [];
    },
    // 增加行
    addClassifyAuth() {
      if (this.roleList.length <= 0) {
        this.$message.warning("当前租户不存在角色信息！");
        return;
      }
      // console.log('this.roleList', this.roleList)
      this.addIndex++; //自定义生成添加行下标

      let item = {
        roleData: this.roleList[0].id,
        classifyItem: this.classifyData.label,
        index: this.addIndex,
        uuid: uuidv4(),//生成唯一的id
        authButton: {},
        uuid: uuidv4(),//生成唯一的id,
        index: this.classifyAuthData.length -1,
      }
      //将按钮设置进去
      this.classifyAuthButton.forEach(data => {
        Vue.set(item, data.id, false);
      })
      this.classifyAuthData.push(item);
      this.roleHandlerMethods(this.roleList[0].id, 'add', this.addIndex)
      //console.log(item)
      this.classifyAuthData.push(item)
      this.roleHandlerMethods(this.roleList[0].id, 'add', this.classifyAuthData.length -1)
    },
    // 删除行
    subClassifyAuth() {
@@ -333,61 +284,68 @@
      this.selectList = list;
    },
    // 保存分类授权信息
    submit() {
      if (this.classifyAuthData.length <= 0) {
        this.$message.warning('授权列表为空！')
        return;
      }
    async submit() {
      let form = {
        classifyAuthList: [],
        isCLear: false, //默认是清空
        classifyId: this.TreeNode.oid,
        authType: 'classify_auth',
      };
      console.log('classifyAuthData',this.classifyAuthData);
      let isRepeat = false;
      // 遍历数组，比较后面的对象的roleData是否与前面的对象相等
      for (let i = 0; i < this.classifyAuthData.length - 1; i++) {
        let currentRoleId = this.classifyAuthData[i].roleData;
        for (let j = i + 1; j < this.classifyAuthData.length; j++) {
          if (currentRoleId === this.classifyAuthData[j].roleData) {
            isRepeat = true;
      if (this.classifyAuthData.length > 0) {
        // 遍历数组，比较后面的对象的roleData是否与前面的对象相等
        for (let i = 0; i < this.classifyAuthData.length - 1; i++) {
          let currentRoleId = this.classifyAuthData[i].roleData;
          for (let j = i + 1; j < this.classifyAuthData.length; j++) {
            if (currentRoleId === this.classifyAuthData[j].roleData) {
              isRepeat = true;
              break;
            }
          }
          if (isRepeat) {
            break;
          }
        }
        if (isRepeat) {
          break;
        }
      }
      if (isRepeat) {
        this.$message.warning("角色和分类已经存在，请重新配置！");
        return;
      }
      let form = [];
      let flag = false;
      this.classifyAuthData.forEach(item => {
        let itemButtonList = [];
        //筛选出按钮勾选为true的列
        for (let key in item) {
          if (item[key] === true) {
            itemButtonList.push(key);
          }
        }
        /**如果itemButtonList为空证明是，
         添加了角色但是没勾选任何的按钮*/
        if (itemButtonList.length <= 0) {
          flag = true;
          this.$message.warning("角色和分类已经存在，请重新配置！");
          return;
        }
        let data = {
          oid: item.oid,
          roleId: item.roleData,
          classifyId: this.classifyData.oid,
          buttonIds: itemButtonList.join(","),
          authType: "classify_auth",
        let flag = false;
        this.classifyAuthData.forEach(item => {
          let itemButtonList = [];
          //筛选出按钮勾选为true的列
          for (let key in item) {
            if (item[key] === true && key !== 'checkTheStatus') {
              itemButtonList.push(key);
            }
          }
          /**如果itemButtonList为空证明是，
           添加了角色但是没勾选任何的按钮*/
          if (itemButtonList.length <= 0) {
            flag = true;
            return;
          }
          let data = {
            oid: item.oid,
            roleId: item.roleData,
            classifyId: this.TreeNode.oid,
            buttonIds: itemButtonList.join(","),
            authType: "classify_auth",
          }
          form.classifyAuthList.push(data);
        });
        if (flag) {
          this.$message.warning('有未勾选操作的权限，不允许授权')
          return;
        }
        form.push(data);
      });
      if (flag) {
        this.$message.warning('有未勾选操作的权限，不允许授权')
        return;
        // console.log(form)
      } else {
        // 为空证明是清空授权列表
        form.isCLear = true;
      }
      // console.log(form)
      // 调用保存分类授权的接口
      saveOrUpdate(form).then(res => {
      await saveOrUpdate(form).then(res => {
        this.$message({
          type: "success",
          message: res.data.msg,
@@ -396,6 +354,8 @@
      }, (error) => {
        window.console.log(error);
      })
      this.classifyAuthData = [];
      this.loadAuthPage();
    },
    // 全选按钮
    selectAllButton() {
@@ -409,6 +369,73 @@
      });
      //console.log("this.selectList",this.selectList);
    },
    loadAuthPage() {
      return new Promise((resolve, reject) => {
        this.isLoading = true;
        getButtonByParentCode({code: 'classifyTree '}).then(res => {
          // 记录按钮数据
          this.classifyAuthButton = res.data.data;
          const list = res.data.data;
          let tempData = [];
          // 角色列
          tempData.push({
            label: "角色",
            prop: "roleData",
            type: "select",
            width: 150,
          });
          // 编码项分类授权
          tempData.push({
            label: "编码项数据授权",
            prop: "classifyItem",
            type: "text",
            width: 180,
          });
          list.forEach(item => {
            let columnItem = {
              label: item.name,
              prop: item.id,
              code: item.code,
              type: "checkbox",
              width: 180,
            };
            tempData.push(columnItem);
          })
          this.classifyAuthHeader = tempData
          resolve();
        }).catch(err => {
          reject(err)
        });
        // 获取角色列表
        getPage(1, -1, null).then(res => {
          this.roleList = res.data.data.records;
        });
        // 获取该分类下已授权的分类授权信息
        getClassifyAuthList({classifyId: this.TreeNode.oid, authType: "classify_auth"}).then(res => {
          //console.log(res.data.data);
          let authDatas = res.data.data;
          if (authDatas.length > 0) {
            authDatas.forEach((authData, index) => {
              let item = {
                oid: authData.oid,
                roleData: authData.roleId,
                classifyItem: this.classifyData.label,
                index: index,
                authButton: {},
                uuid: uuidv4(),//生成唯一的id
              }
              //将按钮设置进去
              authData.buttonIdList.forEach(data => {
                Vue.set(item, data, true);
              });
              this.classifyAuthData.push(item);
              this.roleHandlerMethods(authData.roleId, 'create', index)
            })
          }
        });
        this.isLoading = false;
      });
    },
  },
};
</script>