数据授权整合代码

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

@@ -176,7 +176,8 @@
                });
                this.classifyAuthData.push(item);
                this.addIndex = this.classifyAuthData.length - 1; //添加行下标等于classifyAuthData的长度-1
                this.roleHandlerMethods(authData.roleId, 'create', this.addIndex)
                this.roleHandlerMethods(authData.roleId, 'create', index)
                console.log('index', index)
              })
            }
          });
@@ -200,16 +201,33 @@
        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) => {
          if (filteredItems.some(x => x.id === item.prop)) {
          const isMatched = filteredItems.some(x => x.id === item.prop);
          if (isMatched) {
            this.$nextTick(() => {
              if (this.classifyAuthData[index] !== undefined && this.classifyAuthData[index] !== null) {
              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.classifyAuthData[index] = Object.assign({}, this.classifyAuthData[index], {[key]: undefined});
                    this.$set(this.classifyAuthData[index], item.code, true);
                    this.$set(this.classifyAuthData[index], item.code, false);
                  }
                });
              }
@@ -221,9 +239,11 @@
        this.classifyAuthData.forEach((classkey, classIndex) => {
          if (classkey.classify_view) {
            this.$set(this.classifyAuthData[classIndex], 'allDisabled', true)
          } else {
            this.classifyAuthData[classIndex].allDisabled = false;
          }
        });
        console.log(this.classifyAuthData)
        console.log('classifyAuthData',this.classifyAuthData)
        //强制刷新表格
        this.itemKey = uuidv4();
      })
@@ -358,6 +378,7 @@
          roleId: item.roleData,
          classifyId: this.classifyData.oid,
          buttonIds: itemButtonList.join(","),
          authType: "classify_auth",
        }
        form.push(data);
      });

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

@@ -40,7 +40,7 @@
            v-if="item.type === 'select'"
            slot="prepend"
            v-model="row[item.prop]"
            @change="roleChange"
            @change="roleChange(row.roleData,row)"
          >
            <el-option
              v-for="optionItem in roleList"
@@ -59,17 +59,18 @@
          </el-input>
          <el-checkbox
            v-if="item.type === 'checkbox'"
            v-model="row[item.prop]">
            v-model="row[item.prop]"
            :disabled="row.allDisabled ? true :row[item.code]">
          </el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="info" plain @click="selectAllButton">按钮全选</el-button>
      <el-button class="el-icon-plus" type="success" plain @click="addClassifyAuth"></el-button>
      <el-button class="el-icon-minus" type="warning" plain @click="subClassifyAuth"></el-button>
      <el-button type="primary" plain @click="submit">提 交</el-button>
      <el-button type="danger" plain @click="isShowDialog = false">关 闭</el-button>
      <el-button plain type="info" @click="selectAllButton">按钮全选</el-button>
      <el-button class="el-icon-plus" plain type="success" @click="addClassifyAuth"></el-button>
      <el-button class="el-icon-minus" plain type="warning" @click="subClassifyAuth"></el-button>
      <el-button plain type="primary" @click="submit">提 交</el-button>
      <el-button plain type="danger" @click="isShowDialog = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>
@@ -77,7 +78,7 @@
<script>
import {getButtonByParentCode} from "@/api/system/menu"
import {getPage} from "@/api/system/role"
import {saveOrUpdate, getClassifyAuthList} from "@/api/system/classifyAuth"
import {saveOrUpdate, getClassifyAuthList, getButtonsByRoleId} from "@/api/system/classifyAuth"
import {v4 as uuidv4} from 'uuid';

export default {
@@ -92,6 +93,9 @@
      type: "Boolean",
      default: false,
    },
    TreeNode:{
      type:Object
    }
  },
  data() {
    return {
@@ -158,25 +162,25 @@
            this.roleList = res.data.data.records;
          });
          // 获取该分类下已授权的分类授权信息
          getClassifyAuthList({classifyId: this.classifyData.oid,authType: "data_auth"}).then(res => {
          getClassifyAuthList({classifyId: this.classifyData.oid, authType: "data_auth"}).then(res => {
            //console.log(res.data.data);
            let authDatas = res.data.data;
            if (authDatas.length > 0) {
              authDatas.forEach(authData => {
              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);
                });
                //console.log(item)
                this.classifyAuthData.push(item);
                this.addIndex = this.classifyAuthData.length - 1; //添加行下标等于classifyAuthData的长度-1
                // this.roleHandlerMethods(authData.roleId, 'create', this.addIndex)
                this.roleHandlerMethods(authData.roleId, 'create', index)
              })
            }
          });
@@ -190,65 +194,94 @@
  created() {
  },
  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);
        });

        //拿表格列头循环和没有对应的属性进行比较
        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();
      })
    },
    // 关闭对话框
    closeDialog() {
      this.$emit('update:visible', false);
      this.classifyAuthData = [];
    },
    roleHandlerMethods(id, type, index) {
      if (this.classifyAuthData.length === 0) {
        return;
      }
      //filteredItems 未授权数组
      getButtonsByRoleId({roleId: id, code: this.TreeNode.id}).then(res => {
        const filteredItems = this.classifyAuthButton.filter(item =>
          !res.data.data.some(x => x.id === item.id)
        );
        //和表格列进行对比
        this.classifyAuthHeader.forEach(item => {
          const isMatched = filteredItems.some(x => x.id === item.prop);
          this.$nextTick(() => {
            if (this.classifyAuthData[index] && item.prop in this.classifyAuthData[index]) {
              if (isMatched) {
                this.$set(this.classifyAuthData[index], item.code, this.classifyAuthData[index].classify_view);
              } else {
                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.$set(this.classifyAuthData[classIndex], 'allDisabled', false);
          }
        });
        //强制刷新表格
        this.itemKey = uuidv4();
      });
    },
    // 角色改变时
    roleChange(roleId){
      console.log(roleId);
    async roleChange(row, currentRow) {
      try {
        this.currentRow = currentRow;
        const res = await getButtonsByRoleId({roleId: row, code: this.TreeNode.id});

        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);
      }
    },
    // 增加行
    addClassifyAuth() {
      if(this.roleList.length<=0){
      if (this.roleList.length <= 0) {
        this.$message.warning("当前租户不存在角色信息！");
        return;
      }
      this.addIndex++; //自定义生成添加行下标
      let item = {
        roleData: this.roleList[0].id,
        classifyItem: this.classifyData.label,
        uuid: uuidv4(),//生成唯一的id

        uuid: uuidv4(),//生成唯一的id,
        index: this.addIndex,
      }
      //将按钮设置进去
      this.classifyAuthButton.forEach(data => {
@@ -256,7 +289,7 @@
      })
      //console.log(item)
      this.classifyAuthData.push(item)
      // console.log(this.classifyAuthData);
      this.roleHandlerMethods(this.roleList[0].id, 'add', this.addIndex)
    },
    // 删除行
    subClassifyAuth() {
@@ -346,8 +379,8 @@
      })
    },
    // 全选按钮
    selectAllButton(){
      if(this.selectList.length!==1){
    selectAllButton() {
      if (this.selectList.length !== 1) {
        this.$message.warning("请只选择一行需要全选的按钮的数据行！");
        return;
      }

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

@@ -124,6 +124,7 @@
        <data-auth-dialog
          :classifyData="classifyData"
          :visible.sync="dataAuthVisible"
          :TreeNode="TreeEditObj"
        ></data-auth-dialog>
      </basic-container>
    </el-aside>