From f09e05514d9a9e2623cfa73c4de1ffa98bb30bf8 Mon Sep 17 00:00:00 2001
From: xiejun <xiejun@vci-tech.com>
Date: 星期二, 23 一月 2024 10:09:07 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
Source/UBCS-WEB/src/components/Theme/DataAuthDialog.vue | 429 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 429 insertions(+), 0 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/Theme/DataAuthDialog.vue b/Source/UBCS-WEB/src/components/Theme/DataAuthDialog.vue
new file mode 100644
index 0000000..334cab8
--- /dev/null
+++ b/Source/UBCS-WEB/src/components/Theme/DataAuthDialog.vue
@@ -0,0 +1,429 @@
+<template>
+ <el-dialog
+ v-dialogDrag
+ :close-on-click-modal="false"
+ :visible.sync="isShowDialog"
+ append-to-body
+ class="avue-dialog avue-dialog--top"
+ title="鏁版嵁鎺堟潈"
+ top="-45px" @close="closeDialog">
+ <el-table
+ ref="dataTable"
+ v-loading="isLoading"
+ :data="classifyAuthData"
+ :header-cell-style="{ background: '#FAFAFA', color: '#505050' }"
+ :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
+ v-for="(item, index) in classifyAuthHeader"
+ v-if="classifyAuthHeader.length !== 0"
+ :key="index"
+ :label="item.label"
+ :prop="item.prop"
+ :show-overflow-tooltip="true"
+ :width="item.width"
+ align="center"
+ >
+ <template slot-scope="{ row }">
+ <el-select
+ v-if="item.type === 'select'"
+ slot="prepend"
+ v-model="row[item.prop]"
+ @change="roleChange(row.roleData,row)"
+ >
+ <el-option
+ v-for="optionItem in roleList"
+ :key="optionItem.id"
+ :label="optionItem.roleName"
+ :value="optionItem.id"
+ >
+ </el-option>
+ </el-select>
+ <el-input
+ v-if="item.type === 'text'"
+ v-model="row[item.prop]"
+ readonly
+ type="text"
+ >
+ </el-input>
+ <el-checkbox
+ v-if="item.type === 'checkbox'"
+ v-model="row[item.prop]"
+ :disabled="row.authButton.allDisabled ? true : row.authButton[item.code]">
+ </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 plain type="primary" @click="submit">鎻� 浜�</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';
+
+export default {
+ name: "dataAuthDialog.vue",
+ props: {
+ classifyData: {
+ type: "Object",
+ default: "",
+ },
+ /**瀵硅瘽妗嗘樉绀洪殣钘忔帶鍒�*/
+ visible: {
+ type: "Boolean",
+ default: false,
+ },
+ TreeNode:{
+ type:Object
+ }
+ },
+ data() {
+ return {
+ // 瀵硅瘽妗嗘樉绀烘帶鍒�
+ isShowDialog: this.visible,
+ isLoading: false,
+ tableHeight: 'calc(100vh - 550px)',
+ classifyAuthData: [],
+ //鍒楀ご
+ classifyAuthHeader: [],
+ //鎸夐挳鏁版嵁
+ classifyAuthButton: [],
+ //瑙掕壊鍒楄〃
+ roleList: [],
+ //褰撳墠閫変腑鐨勮〃鏍艰
+ selectList: [],
+ itemKey: '',
+ addIndex: Number,
+ currentRow: {}
+ };
+ },
+ watch: {
+ // 鐩戝惉鐖剁粍浠朵紶鐨勭獥鍙ｆ樉绀洪殣钘忕殑鍊�
+ visible() {
+ if (this.visible) {
+ this.isShowDialog = this.visible;
+ return new Promise((resolve, reject) => {
+ getButtonByParentCode({code: this.classifyData.attributes.id}).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: "data_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(),//鐢熸垚鍞竴鐨刬d
+ }
+ //灏嗘寜閽缃繘鍘�
+ authData.buttonIdList.forEach(data => {
+ Vue.set(item, data, true);
+ });
+ this.classifyAuthData.push(item);
+ this.addIndex = this.classifyAuthData.length - 1; //娣诲姞琛屼笅鏍囩瓑浜巆lassifyAuthData鐨勯暱搴�-1
+ this.roleHandlerMethods(authData.roleId, 'create', index)
+ })
+ }
+ });
+ });
+ }
+ },
+ },
+ computed: {},
+ mounted() {
+ },
+ created() {
+ },
+ methods: {
+ // 鍏抽棴瀵硅瘽妗�
+ 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]) {
+ if (isMatched) {
+ Object.keys(this.classifyAuthData[index]).forEach((key) => {
+ this.$set(this.classifyAuthData[index].authButton,item.code,true);
+ });
+ } else {
+ Object.keys(this.classifyAuthData[index]).forEach((key) => {
+ this.$set(this.classifyAuthData[index].authButton,item.code,false);
+ });
+ }
+ }
+ });
+ });
+
+ //娣诲姞鈥樻煡鐪嬧�欑鐢�
+ if (this.classifyAuthData.authButton) {
+ this.classifyAuthData.forEach((classkey, classIndex) => {
+ if (classkey.authButton.classify_view) {
+ this.$set(this.classifyAuthData[classIndex].authButton,"allDisabled",true);
+ } else {
+ this.classifyAuthData[classIndex].authButton.allDisabled = false;
+ }
+ });
+ }
+ //寮哄埗鍒锋柊琛ㄦ牸
+ this.itemKey = uuidv4();
+ });
+ },
+ // 瑙掕壊鏀瑰彉鏃�
+ 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.authButton[item.code] = true;
+ if (!currentRow.authButton.classify_view) {
+ currentRow.authButton.allDisabled = false;
+ }
+ });
+ } else {
+ Object.keys(currentRow).forEach((key) => {
+ currentRow.authButton[item.code] = false;
+ if (!currentRow.authButton.classify_view) {
+ currentRow.authButton.allDisabled = false;
+ }
+ });
+ }
+ }
+ this.itemKey = uuidv4(); // 寮哄埗鍒锋柊琛ㄦ牸
+ });
+ });
+ } catch (error) {
+ console.error(error);
+ }
+ },
+ // 澧炲姞琛�
+ addClassifyAuth() {
+ if (this.roleList.length <= 0) {
+ this.$message.warning("褰撳墠绉熸埛涓嶅瓨鍦ㄨ鑹蹭俊鎭紒");
+ return;
+ }
+ this.addIndex++; //鑷畾涔夌敓鎴愭坊鍔犺涓嬫爣
+ let item = {
+ roleData: this.roleList[0].id,
+ classifyItem: this.classifyData.label,
+ authButton:{},
+ uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d,
+ index: this.addIndex,
+ }
+ //灏嗘寜閽缃繘鍘�
+ this.classifyAuthButton.forEach(data => {
+ Vue.set(item, data.id, false);
+ })
+ //console.log(item)
+ this.classifyAuthData.push(item)
+ this.roleHandlerMethods(this.roleList[0].id, 'add', this.addIndex)
+ },
+ // 鍒犻櫎琛�
+ subClassifyAuth() {
+ for (let item of this.selectList) {
+ let index = this.classifyAuthData.findIndex(data => data.index === item.index);
+ if (index !== -1) {
+ this.classifyAuthData.splice(index, 1);
+ }
+ }
+ },
+ handleRowClick(row, column) {
+ this.selectList.push(row);
+ this.$refs.dataTable.toggleRowSelection(row);
+ },
+ // 澶氶��
+ handleSelectionChange(list) {
+ this.selectList = list;
+ //console.log("澶氶��");
+ },
+ // 閫夋嫨鍏ㄩ儴
+ handleSelectionAll(list) {
+ this.selectList = list;
+ },
+ // 淇濆瓨鍒嗙被鎺堟潈淇℃伅
+ submit() {
+ if (this.classifyAuthData.length <= 0) {
+ this.$message.warning('鎺堟潈鍒楄〃涓虹┖锛�')
+ return;
+ }
+ let isRepeat = false;
+ // 閬嶅巻鏁扮粍锛屾瘮杈冨悗闈㈢殑瀵硅薄鐨剅oleData鏄惁涓庡墠闈㈢殑瀵硅薄鐩哥瓑
+ 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) {
+ 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;
+ return;
+ }
+ let data = {
+ oid: item.oid,
+ roleId: item.roleData,
+ classifyId: this.classifyData.oid,
+ buttonIds: itemButtonList.join(","),
+ authType: "data_auth",
+ }
+ form.push(data);
+ });
+ if (flag) {
+ this.$message.warning('鏈夋湭鍕鹃�夋搷浣滅殑鏉冮檺锛屼笉鍏佽鎺堟潈')
+ return;
+ }
+ // console.log(form)
+ // 璋冪敤淇濆瓨鍒嗙被鎺堟潈鐨勬帴鍙�
+ saveOrUpdate(form).then(res => {
+ this.$message({
+ type: "success",
+ message: res.data.msg,
+ });
+ // this.isShowDialog = false
+ }, (error) => {
+ window.console.log(error);
+ })
+ },
+ // 鍏ㄩ�夋寜閽�
+ selectAllButton() {
+ if (this.selectList.length !== 1) {
+ this.$message.warning("璇峰彧閫夋嫨涓�琛岄渶瑕佸叏閫夌殑鎸夐挳鐨勬暟鎹锛�");
+ return;
+ }
+ this.classifyAuthButton.forEach(item => {
+ //console.log("item",item);
+ Vue.set(this.selectList[0], item.id, true);
+ });
+ //console.log("this.selectList",this.selectList);
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+
+// 婊氬姩鏉℃牱寮忎慨鏀�
+// 婊氬姩鏉＄殑瀹藉害
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+ height: 15px; // 绾靛悜婊氬姩鏉� 蹇呭啓
+ background: white;
+ border: white;
+ width: 10px;
+
+}
+
+// 婊氬姩鏉＄殑婊戝潡
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ background-color: #ececec;
+ border-radius: 20px;
+ border: #ececec;
+}
+
+/deep/ .el-table__body-wrapper {
+ height: calc(100% - 50px) !important;
+}
+
+</style>
--
Gitblit v1.9.3