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 | 125 +++++++++++++++++++++++++++++++++++------ 1 files changed, 105 insertions(+), 20 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue b/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue index afb086d..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,17 +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 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> @@ -76,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 { @@ -107,6 +108,9 @@ roleList: [], //褰撳墠閫変腑鐨勮〃鏍艰 selectList: [], + itemKey: '', + addIndex: Number, + currentRow: {} }; }, watch: { @@ -138,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) @@ -153,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.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) }); } }, @@ -183,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); @@ -190,13 +272,16 @@ }, // 澧炲姞琛� addClassifyAuth() { - if(this.roleList.length<=0){ + 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.label, + index: this.addIndex, uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d } //灏嗘寜閽缃繘鍘� @@ -204,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() { @@ -294,16 +379,16 @@ }) }, // 鍏ㄩ�夋寜閽� - selectAllButton(){ - if(this.selectList.length!==1){ + selectAllButton() { + if (this.selectList.length !== 1) { this.$message.warning("璇峰彧閫夋嫨涓�琛岄渶瑕佸叏閫夌殑鎸夐挳鐨勬暟鎹锛�"); return; } this.classifyAuthButton.forEach(item => { //console.log("item",item); - Vue.set(this.classifyAuthData[0], item.id, true); + Vue.set(this.selectList[0], item.id, true); }); - //console.log("this.classifyAuthData",this.classifyAuthData); + //console.log("this.selectList",this.selectList); }, }, }; -- Gitblit v1.9.3