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

@@ -8,6 +8,7 @@
    title="分类授权"
    top="-45px" @close="closeDialog">
    <el-table
      :key="itemKey"
      ref="dataTable"
      v-loading="isLoading"
      :data="classifyAuthData"
@@ -40,7 +41,7 @@
            v-if="item.type === 'select'"
            slot="prepend"
            v-model="row[item.prop]"
            @change="roleChange"
            @change="selectChange(row.roleData,row)"
          >
            <el-option
              v-for="optionItem in roleList"
@@ -59,17 +60,18 @@
          </el-input>
          <el-checkbox
            v-if="item.type === 'checkbox'"
            v-model="row[item.prop]">
            v-model="row[item.prop]"
            :disabled="row.allDisabled ? true :typeof row[item.prop] == 'undefined' || typeof row[item.prop] == null">
          </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 +79,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 {
@@ -108,6 +110,9 @@
      roleList: [],
      //当前选中的表格行
      selectList: [],
      itemKey: '',
      viewStatus: false,
      addIndex: Number,
    };
  },
  watch: {
@@ -139,12 +144,13 @@
              let columnItem = {
                label: item.name,
                prop: item.id,
                code: item.code,
                type: "checkbox",
                width: 180,
              };
              tempData.push(columnItem);
            })
            this.classifyAuthHeader = tempData
            this.classifyAuthHeader = tempData;
            resolve();
          }).catch(err => {
            reject(err)
@@ -154,25 +160,29 @@
            this.roleList = res.data.data.records;
          });
          // 获取该分类下已授权的分类授权信息
          getClassifyAuthList({classifyId: this.classifyData.oid}).then(res => {
          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 => {
              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 ;
                // console.log('classifyAuthData', this.classifyAuthData)
              })
            }
            this.roleHandlerMethods('', 'create', 0)
          });
        });
      }
@@ -184,25 +194,57 @@
  created() {
  },
  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();
              })
            }
          });
        })
      }
    },
    selectChange(row,index) {
      this.roleHandlerMethods(row, 'select',index.index);
    },
    // 关闭对话框
    closeDialog() {
      this.$emit('update:visible', false);
      this.classifyAuthData = [];
    },
    // 角色改变时
    roleChange(roleId){
      console.log(roleId);
      
    },
    // 增加行
    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,
        index:this.addIndex,
        uuid: uuidv4(),//生成唯一的id
      }
      //将按钮设置进去
@@ -210,8 +252,8 @@
        Vue.set(item, data.id, false);
      })
      //console.log(item)
      this.classifyAuthData.push(item)
      // console.log(this.classifyAuthData);
      this.classifyAuthData.push(item);
      this.roleHandlerMethods('', 'add', this.addIndex)
    },
    // 删除行
    subClassifyAuth() {
@@ -300,8 +342,8 @@
      })
    },
    // 全选按钮
    selectAllButton(){
      if(this.selectList.length!==1){
    selectAllButton() {
      if (this.selectList.length !== 1) {
        this.$message.warning("请只选择一行需要全选的按钮的数据行！");
        return;
      }