From 134402cea23f11760853dfb25b8a63a3554ce636 Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期四, 18 一月 2024 10:59:20 +0800 Subject: [PATCH] 分类授权完善 --- Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue | 136 +++++++++++++++++++++++++++++++++++++++----- 1 files changed, 119 insertions(+), 17 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue b/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue index f6a26ad..902cabf 100644 --- a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue +++ b/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" @@ -15,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" @@ -40,6 +39,7 @@ v-if="item.type === 'select'" slot="prepend" v-model="row[item.prop]" + @change="selectChange(row.roleData,row)" > <el-option v-for="optionItem in roleList" @@ -58,16 +58,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 class="el-icon-plus" type="success" @click="addClassifyAuth"></el-button> - <el-button class="el-icon-minus" type="warning" @click="subClassifyAuth"></el-button> - <el-button type="primary" @click="submit">鎻� 浜�</el-button> - <el-button type="danger" @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> @@ -75,7 +77,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 { @@ -96,7 +98,7 @@ // 瀵硅瘽妗嗘樉绀烘帶鍒� isShowDialog: this.visible, isLoading: false, - tableHeight: '520px', + tableHeight: 'calc(100vh - 550px)', classifyAuthData: [], //鍒楀ご classifyAuthHeader: [], @@ -106,6 +108,9 @@ roleList: [], //褰撳墠閫変腑鐨勮〃鏍艰 selectList: [], + itemKey: '', + addIndex: Number, + currentRow: {} }; }, watch: { @@ -137,12 +142,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) @@ -152,26 +158,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; if (authDatas.length > 0) { - authDatas.forEach(authData => { + authDatas.forEach((authData, index) => { let item = { oid: authData.oid, roleData: authData.roleId, - classifyItem: this.classifyData.text, + classifyItem: this.classifyData.label, + index: index, uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d } //灏嗘寜閽缃繘鍘� authData.buttonIdList.forEach(data => { Vue.set(item, data, true); }); - //console.log(item) this.classifyAuthData.push(item); + this.addIndex = this.classifyAuthData.length - 1; //娣诲姞琛屼笅鏍囩瓑浜巆lassifyAuthData鐨勯暱搴�-1 + this.roleHandlerMethods(authData.roleId, 'create', this.addIndex) }) } }); + console.log('created', this.classifyAuthData) }); } }, @@ -182,6 +191,80 @@ 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(); + }) + }, + 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() { this.$emit('update:visible', false); @@ -189,9 +272,16 @@ }, // 澧炲姞琛� addClassifyAuth() { + if (this.roleList.length <= 0) { + this.$message.warning("褰撳墠绉熸埛涓嶅瓨鍦ㄨ鑹蹭俊鎭紒"); + return; + } + console.log('this.roleList', this.roleList) + this.addIndex++; //鑷畾涔夌敓鎴愭坊鍔犺涓嬫爣 let item = { roleData: this.roleList[0].id, - classifyItem: this.classifyData.text, + classifyItem: this.classifyData.label, + index: this.addIndex, uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d } //灏嗘寜閽缃繘鍘� @@ -199,8 +289,8 @@ Vue.set(item, data.id, false); }) //console.log(item) - this.classifyAuthData.push(item) - // console.log(this.classifyAuthData); + this.classifyAuthData.push(item); + this.roleHandlerMethods(this.roleList[0].id, 'add', this.addIndex) }, // 鍒犻櫎琛� subClassifyAuth() { @@ -288,6 +378,18 @@ 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> -- Gitblit v1.9.3