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

@@ -16,11 +16,9 @@
      :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"
@@ -61,7 +59,7 @@
          <el-checkbox
            v-if="item.type === 'checkbox'"
            v-model="row[item.prop]"
            :disabled="row.allDisabled ? true :typeof row[item.prop] == 'undefined' || typeof row[item.prop] == null">
            :disabled="row.allDisabled ? true :row[item.code]">
          </el-checkbox>
        </template>
      </el-table-column>
@@ -111,8 +109,8 @@
      //当前选中的表格行
      selectList: [],
      itemKey: '',
      viewStatus: false,
      addIndex: Number,
      currentRow: {}
    };
  },
  watch: {
@@ -163,14 +161,13 @@
          getClassifyAuthList({classifyId: this.classifyData.oid, authType: "classify_auth"}).then(res => {
            //console.log(res.data.data);
            let authDatas = res.data.data;
            console.log('authDatas', authDatas)
            if (authDatas.length > 0) {
              authDatas.forEach((authData,index) => {
              authDatas.forEach((authData, index) => {
                let item = {
                  oid: authData.oid,
                  roleData: authData.roleId,
                  classifyItem: this.classifyData.label,
                  index:index,
                  index: index,
                  uuid: uuidv4(),//生成唯一的id
                }
                //将按钮设置进去
@@ -178,12 +175,12 @@
                  Vue.set(item, data, true);
                });
                this.classifyAuthData.push(item);
                this.addIndex = this.classifyAuthData.length -1 ;
                // console.log('classifyAuthData', this.classifyAuthData)
                this.addIndex = this.classifyAuthData.length - 1; //添加行下标等于classifyAuthData的长度-1
                this.roleHandlerMethods(authData.roleId, 'create', this.addIndex)
              })
            }
            this.roleHandlerMethods('', 'create', 0)
          });
          console.log('created', this.classifyAuthData)
        });
      }
    },
@@ -195,39 +192,78 @@
  },
  methods: {
    roleHandlerMethods(id, type, index) {
      if (this.classifyAuthData.length > 0) {
        let roleButtonId = type === 'select' ? id : this.classifyAuthData[0].roleData;
        getButtonsByRoleId({roleId: roleButtonId, code: 'classifyTree'}).then(res => {
          // 找到this.classifyAuthButton中没有对应的属性
          const filteredItems = this.classifyAuthButton.filter(item => {
            return !res.data.data.find(x => x.id === item.id);
          });

          this.classifyAuthHeader.forEach((item) => {
            if (filteredItems.some(x => x.id === item.prop)) {
              this.$nextTick(() => {

                if(this.classifyAuthData[index] !== undefined && this.classifyAuthData[index] !== null){
                  Object.keys(this.classifyAuthData[index]).forEach((key) => {
                    if (item.prop === key) {
                      this.classifyAuthData[index] = Object.assign({}, this.classifyAuthData[index], { [key]: undefined });
                      if (item.code === "classify_view") {
                        this.$set(this.classifyAuthData[index],'allDisabled',true)
                      }
                    }
                  });
                }
                // console.log('classifyAuthData', this.classifyAuthData)
                // console.log('item', item.prop)
                this.itemKey = uuidv4();
              })
            }
          });
        })
      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);
        });

        //拿表格列头循环和没有对应的属性进行比较
        this.classifyAuthHeader.forEach((item) => {
          if (filteredItems.some(x => x.id === item.prop)) {
            this.$nextTick(() => {
              if (this.classifyAuthData[index] !== undefined && this.classifyAuthData[index] !== null) {
                Object.keys(this.classifyAuthData[index]).forEach((key) => {
                  if (item.prop === key) {
                    // this.classifyAuthData[index] = Object.assign({}, this.classifyAuthData[index], {[key]: undefined});
                    this.$set(this.classifyAuthData[index], item.code, true);
                  }
                });
              }
            })
          }
        });

        //添加 “查看全部禁用条件”
        this.classifyAuthData.forEach((classkey, classIndex) => {
          if (classkey.classify_view) {
            this.$set(this.classifyAuthData[classIndex], 'allDisabled', true)
          }
        });

        //强制刷新表格
        this.itemKey = uuidv4();
      })
    },
    selectChange(row,index) {
      this.roleHandlerMethods(row, 'select',index.index);
    async selectChange(row, currentRow) {
      try {
        this.currentRow = currentRow;
        const res = await getButtonsByRoleId({roleId: row, code: 'classifyTree'});

        const filteredItems = this.classifyAuthButton.filter(item => {
          return !res.data.data.find(x => x.id === item.id);
        });

        this.classifyAuthHeader.forEach(item => {
          const isMatched = filteredItems.some(x => x.id === item.prop);
          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;
                  }
                });
              } else {
                Object.keys(currentRow).forEach(key => {
                  currentRow[item.code] = item.prop === key ? true : false;
                  if (!currentRow.classify_view) {
                    currentRow.allDisabled = false;
                  }
                });
              }
            }
            this.itemKey = uuidv4(); // 强制刷新表格
          });
        });
      } catch (error) {
        console.error(error);
      }
    },
    // 关闭对话框
    closeDialog() {
@@ -240,11 +276,12 @@
        this.$message.warning("当前租户不存在角色信息！");
        return;
      }
      this.addIndex++;
      console.log('this.roleList', this.roleList)
      this.addIndex++; //自定义生成添加行下标
      let item = {
        roleData: this.roleList[0].id,
        classifyItem: this.classifyData.label,
        index:this.addIndex,
        index: this.addIndex,
        uuid: uuidv4(),//生成唯一的id
      }
      //将按钮设置进去
@@ -253,7 +290,7 @@
      })
      //console.log(item)
      this.classifyAuthData.push(item);
      this.roleHandlerMethods('', 'add', this.addIndex)
      this.roleHandlerMethods(this.roleList[0].id, 'add', this.addIndex)
    },
    // 删除行
    subClassifyAuth() {