接口基本信息添加接口 && 分类授权更新

 Source/UBCS-WEB/src/api/docking/info.js

@@ -59,3 +59,21 @@
    data
  })
}

// header参数
export const HeaderRequest =(params) => {
  return request({
    url: '/api/ubcs-code/dockingManagement/gridHeader',
    method: 'get',
    ...params
  })
}

// 参数请求
export const ParmRequest =(params) => {
  return request({
    url: '/api/ubcs-code/dockingManagement/gridParam',
    method: 'get',
    ...params
  })
}

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

@@ -6,11 +6,8 @@
    append-to-body
    class="avue-dialog avue-dialog--top"
    title="分类授权"
    top="-45px"
    @close="closeDialog"
  >
    top="-45px" @close="closeDialog">
    <el-table
      :key="itemKey"
      ref="dataTable"
      v-loading="isLoading"
      :data="classifyAuthData"
@@ -18,11 +15,16 @@
      :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" width="55"></el-table-column>
      <el-table-column
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        v-for="(item, index) in classifyAuthHeader"
        v-if="classifyAuthHeader.length !== 0"
@@ -38,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,45 +61,29 @@
            v-if="item.type === 'checkbox'"
            v-model="row[item.prop]"
            :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>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <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 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
      >
      <el-button plain 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,
  getButtonsByRoleId,
} 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, getButtonsByRoleId} from "@/api/system/classifyAuth"
import {v4 as uuidv4} from 'uuid';

export default {
  name: "classifyAuthDialog.vue",
  name: "dataAuthDialog.vue",
  props: {
    // 当前点击节点的顶层节点
    classifyData: {
@@ -119,7 +105,7 @@
      // 对话框显示控制
      isShowDialog: this.visible,
      isLoading: true,
      tableHeight: "calc(100vh - 550px)",
      tableHeight: 'calc(100vh - 550px)',
      classifyAuthData: [],
      //列头
      classifyAuthHeader: [],
@@ -129,15 +115,10 @@
      roleList: [],
      //当前选中的表格行
      selectList: [],
      itemKey: "",
      itemKey: '',
      addIndex: Number,
      currentRow: {},
      currentRow: {}
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.addIndex = this.classifyAuthData.length <= 0 ? 0 :this.classifyAuthData.length -1;
  },
  watch: {
    // 监听父组件传的窗口显示隐藏的值
@@ -147,38 +128,68 @@
        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) {
      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);
        });
      //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);
                  console.log(this.classifyAuthData[index].authButton.allDisabled)
                }
                });

              } 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;
                }
@@ -186,25 +197,23 @@
            }
          });
        });

        // 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);
        });

        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.classifyAuthHeader.forEach(item => {
          const isMatched = filteredItems.some(x => x.id === item.prop);
          this.$nextTick(() => {
            if (currentRow) {
              if (isMatched) {
@@ -223,18 +232,12 @@
                });
              }
            }

            this.itemKey = uuidv4(); // 强制刷新表格
          });
        });
      } catch (error) {
        console.error(error);
      }
    },
    // 关闭对话框
    closeDialog() {
      this.$emit("update:visible", false);
      this.classifyAuthData = [];
    },
    // 增加行
    addClassifyAuth() {
@@ -247,23 +250,21 @@
        roleData: this.roleList[0].id,
        classifyItem: this.classifyData.label,
        authButton:{},
        index: this.addIndex,
        uuid: uuidv4(), //生成唯一的id
      };
        uuid: uuidv4(),//生成唯一的id,
        index: this.classifyAuthData.length -1,
      }
      //将按钮设置进去
      this.classifyAuthButton.forEach((data) => {
      this.classifyAuthButton.forEach(data => {
        Vue.set(item, data.id, false);
      });
      this.classifyAuthData.push(item);
      this.roleHandlerMethods(this.roleList[0].id, "add", this.addIndex);
      this.addIndex++; //自定义生成添加行下标
      })
      //console.log(item)
      this.classifyAuthData.push(item)
      this.roleHandlerMethods(this.roleList[0].id, 'add', this.classifyAuthData.length -1)
    },
    // 删除行
    subClassifyAuth() {
      for (let item of this.selectList) {
        let index = this.classifyAuthData.findIndex(
          (data) => data.index === item.index
        );
        let index = this.classifyAuthData.findIndex(data => data.index === item.index);
        if (index !== -1) {
          this.classifyAuthData.splice(index, 1);
        }
@@ -304,14 +305,12 @@
            break;
          }
        }

        if (isRepeat) {
          this.$message.warning("角色和分类已经存在，请重新配置！");
          return;
        }

        let flag = false;
        this.classifyAuthData.forEach((item) => {
        this.classifyAuthData.forEach(item => {
          let itemButtonList = [];
          //筛选出按钮勾选为true的列
          for (let key in item) {
@@ -331,31 +330,28 @@
            classifyId: this.TreeNode.oid,
            buttonIds: itemButtonList.join(","),
            authType: "classify_auth",
          };
          }
          form.classifyAuthList.push(data);
        });
        if (flag) {
          this.$message.warning("有未勾选操作的权限，不允许授权");
          this.$message.warning('有未勾选操作的权限，不允许授权')
          return;
        }
        // console.log(form)
      }else {
        // 为空证明是清空授权列表
        form.isCLear = true;
      }
      // console.log(JSON.stringify(form))
      // 调用保存分类授权的接口
      await saveOrUpdate(form).then(
        (res) => {
      await saveOrUpdate(form).then(res => {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
          // this.isShowDialog = false
        },
        (error) => {
      }, (error) => {
          window.console.log(error);
        }
      );
      })
      this.classifyAuthData = [];
      this.loadAuthPage();
    },
@@ -365,18 +361,16 @@
        this.$message.warning("请只选择一行需要全选的按钮的数据行！");
        return;
      }
      this.classifyAuthButton.forEach((item) => {
      this.classifyAuthButton.forEach(item => {
        //console.log("item",item);
        Vue.set(this.selectList[0], item.id, true);
      });
      //console.log("this.selectList",this.selectList);
    },
    // 加载授权列表
    loadAuthPage() {
      return new Promise((resolve, reject) => {
        this.isLoading = true;
        getButtonByParentCode({ code: "classifyTree" })
          .then((res) => {
        getButtonByParentCode({code: 'classifyTree '}).then(res => {
            // 记录按钮数据
            this.classifyAuthButton = res.data.data;
            const list = res.data.data;
@@ -390,12 +384,12 @@
            });
            // 编码项分类授权
            tempData.push({
              label: "编码项分类授权",
            label: "编码项数据授权",
              prop: "classifyItem",
              type: "text",
              width: 180,
            });
            list.forEach((item) => {
          list.forEach(item => {
              let columnItem = {
                label: item.name,
                prop: item.id,
@@ -404,22 +398,18 @@
                width: 180,
              };
              tempData.push(columnItem);
            });
            this.classifyAuthHeader = tempData;
            resolve();
          })
          .catch((err) => {
            reject(err);
          this.classifyAuthHeader = tempData
          resolve();
        }).catch(err => {
          reject(err)
          });
        // 获取角色列表
        getPage(1, -1, null).then((res) => {
        getPage(1, -1, null).then(res => {
          this.roleList = res.data.data.records;
        });
        // 获取该分类下已授权的分类授权信息
        getClassifyAuthList({
          classifyId: this.TreeNode.oid,
          authType: "classify_auth",
        }).then((res) => {
        getClassifyAuthList({classifyId: this.TreeNode.oid, authType: "classify_auth"}).then(res => {
          //console.log(res.data.data);
          let authDatas = res.data.data;
          if (authDatas.length > 0) {
@@ -428,18 +418,17 @@
                oid: authData.oid,
                roleData: authData.roleId,
                classifyItem: this.classifyData.label,
                authButton:{},
                index: index,
                authButton: {},
                uuid: uuidv4(), //生成唯一的id
              };
              }
              //将按钮设置进去
              authData.buttonIdList.forEach((data) => {
              authData.buttonIdList.forEach(data => {
                Vue.set(item, data, true);
              });
              this.classifyAuthData.push(item);
              this.roleHandlerMethods(authData.roleId, "create", index);
              // console.log('index', index)
            });
              this.roleHandlerMethods(authData.roleId, 'create', index)
            })
          }
        });
        this.isLoading = false;
@@ -450,6 +439,7 @@
</script>

<style lang="scss" scoped>

// 滚动条样式修改
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
@@ -457,6 +447,7 @@
  background: white;
  border: white;
  width: 10px;

}

// 滚动条的滑块
@@ -469,4 +460,5 @@
/deep/ .el-table__body-wrapper {
  height: calc(100% - 50px) !important;
}

</style>

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

@@ -142,7 +142,7 @@
      if (code === "data_view") {
        row.checkTheStatus = check;
      } else if (!row.checkTheStatus) {
        this.$message.warning('请确认是否配置查看按钮，如已配置请先勾选查看按钮！');
        this.$message.warning('清先勾选查看按钮！');
        // 在条件不满足时将多选框状态设置为false
        row[id] = false;
      }

 Source/UBCS-WEB/src/views/docking/info.vue

@@ -59,7 +59,7 @@

<script>
import {
  getList, add, edit, del, push, updateStatus
  getList, add, edit, del, push, updateStatus,HeaderRequest
} from "@/api/docking/info";
import {getDictionary} from "@/api/omd/enum";
import infoForm from "./infoForm.vue";
@@ -264,6 +264,9 @@
    };
  },
  created() {
    HeaderRequest().then(res => {
      console.log(res)
    })
  },
  computed: {
    ...mapGetters(["permission"]),