From 7d05c69630d066c0992368423f90e440e3638f91 Mon Sep 17 00:00:00 2001 From: 田源 <lastanimals@163.com> Date: 星期日, 29 九月 2024 11:01:51 +0800 Subject: [PATCH] 整合代码 --- Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue | 380 +++++++++++++++++++++++++++++++++++++---------------- 1 files changed, 264 insertions(+), 116 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue b/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue index f6a26ad..eab7324 100644 --- a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue +++ b/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue @@ -40,6 +40,7 @@ v-if="item.type === 'select'" slot="prepend" v-model="row[item.prop]" + @change="roleChange(row.roleData,row)" > <el-option v-for="optionItem in roleList" @@ -58,16 +59,19 @@ </el-input> <el-checkbox v-if="item.type === 'checkbox'" - v-model="row[item.prop]"> + 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 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,12 +79,13 @@ <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 { - name: "classifyAuthDialog.vue", + name: "dataAuthDialog.vue", props: { + // 褰撳墠鐐瑰嚮鑺傜偣鐨勯《灞傝妭鐐� classifyData: { type: "Object", default: "", @@ -90,13 +95,17 @@ type: "Boolean", default: false, }, + // 褰撳墠鐐瑰嚮鐨勮妭鐐� + TreeNode: { + type: Object + } }, data() { return { // 瀵硅瘽妗嗘樉绀烘帶鍒� isShowDialog: this.visible, - isLoading: false, - tableHeight: '520px', + isLoading: true, + tableHeight: 'calc(100vh - 550px)', classifyAuthData: [], //鍒楀ご classifyAuthHeader: [], @@ -106,6 +115,9 @@ roleList: [], //褰撳墠閫変腑鐨勮〃鏍艰 selectList: [], + itemKey: '', + addIndex: Number, + currentRow: {} }; }, watch: { @@ -113,68 +125,12 @@ visible() { if (this.visible) { this.isShowDialog = this.visible; - return new Promise((resolve, reject) => { - getButtonByParentCode({code: "classifyTree"}).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, - 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}).then(res => { - //console.log(res.data.data); - let authDatas = res.data.data; - if (authDatas.length > 0) { - authDatas.forEach(authData => { - let item = { - oid: authData.oid, - roleData: authData.roleId, - classifyItem: this.classifyData.text, - uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d - } - //灏嗘寜閽缃繘鍘� - authData.buttonIdList.forEach(data => { - Vue.set(item, data, true); - }); - //console.log(item) - this.classifyAuthData.push(item); - }) - } - }); - }); + this.loadAuthPage(); } }, + classifyAuthData(newval) { + this.addIndex = newval.length <= 0 ? 0 : newval.length - 1; + } }, computed: {}, mounted() { @@ -182,17 +138,120 @@ 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 => { + // 鏌ョ湅涓篺alse鏃跺皢鎵�鏈夊閫夋鐘舵�佽缃负false + row[key.id] = false; + }); + } + }, // 鍏抽棴瀵硅瘽妗� closeDialog() { this.$emit('update:visible', false); this.classifyAuthData = []; }, + roleHandlerMethods(id, type, index) { + if (this.classifyAuthData.length === 0) { + return; + } + //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); + } + }); + + } 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; + } + } + } + }); + }); + // console.log(this.classifyAuthData) + //寮哄埗鍒锋柊琛ㄦ牸 + this.itemKey = uuidv4(); + }); + }, + // 瑙掕壊鏀瑰彉鏃� + async roleChange(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.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; + } + let item = { roleData: this.roleList[0].id, - classifyItem: this.classifyData.text, - uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d + classifyItem: this.classifyData.label, + authButton: {}, + uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d, + index: this.classifyAuthData.length -1, } //灏嗘寜閽缃繘鍘� this.classifyAuthButton.forEach(data => { @@ -200,7 +259,7 @@ }) //console.log(item) this.classifyAuthData.push(item) - // console.log(this.classifyAuthData); + this.roleHandlerMethods(this.roleList[0].id, 'add', this.classifyAuthData.length -1) }, // 鍒犻櫎琛� subClassifyAuth() { @@ -225,60 +284,68 @@ this.selectList = list; }, // 淇濆瓨鍒嗙被鎺堟潈淇℃伅 - submit() { - if (this.classifyAuthData.length <= 0) { - this.$message.warning('鎺堟潈鍒楄〃涓虹┖锛�') - return; - } + async submit() { + let form = { + classifyAuthList: [], + isCLear: false, //榛樿鏄竻绌� + classifyId: this.TreeNode.oid, + authType: 'classify_auth', + }; + console.log('classifyAuthData',this.classifyAuthData); 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; + if (this.classifyAuthData.length > 0) { + // 閬嶅巻鏁扮粍锛屾瘮杈冨悗闈㈢殑瀵硅薄鐨剅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) { - 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; + this.$message.warning("瑙掕壊鍜屽垎绫诲凡缁忓瓨鍦紝璇烽噸鏂伴厤缃紒"); return; } - let data = { - oid: item.oid, - roleId: item.roleData, - classifyId: this.classifyData.oid, - buttonIds: itemButtonList.join(","), + let flag = false; + this.classifyAuthData.forEach(item => { + let itemButtonList = []; + //绛涢�夊嚭鎸夐挳鍕鹃�変负true鐨勫垪 + for (let key in item) { + if (item[key] === true && key !== 'checkTheStatus') { + itemButtonList.push(key); + } + } + /**濡傛灉itemButtonList涓虹┖璇佹槑鏄紝 + 娣诲姞浜嗚鑹蹭絾鏄病鍕鹃�変换浣曠殑鎸夐挳*/ + if (itemButtonList.length <= 0) { + flag = true; + return; + } + let data = { + oid: item.oid, + roleId: item.roleData, + classifyId: this.TreeNode.oid, + buttonIds: itemButtonList.join(","), + authType: "classify_auth", + } + form.classifyAuthList.push(data); + }); + if (flag) { + this.$message.warning('鏈夋湭鍕鹃�夋搷浣滅殑鏉冮檺锛屼笉鍏佽鎺堟潈') + return; } - form.push(data); - }); - if (flag) { - this.$message.warning('鏈夋湭鍕鹃�夋搷浣滅殑鏉冮檺锛屼笉鍏佽鎺堟潈') - return; + // console.log(form) + } else { + // 涓虹┖璇佹槑鏄竻绌烘巿鏉冨垪琛� + form.isCLear = true; } - // console.log(form) // 璋冪敤淇濆瓨鍒嗙被鎺堟潈鐨勬帴鍙� - saveOrUpdate(form).then(res => { + await saveOrUpdate(form).then(res => { this.$message({ type: "success", message: res.data.msg, @@ -287,6 +354,87 @@ }, (error) => { window.console.log(error); }) + this.classifyAuthData = []; + this.loadAuthPage(); + }, + // 鍏ㄩ�夋寜閽� + 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); + }, + loadAuthPage() { + return new Promise((resolve, reject) => { + this.isLoading = true; + getButtonByParentCode({code: 'classifyTree '}).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.TreeNode.oid, authType: "classify_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.roleHandlerMethods(authData.roleId, 'create', index) + }) + } + }); + this.isLoading = false; + }); }, }, }; -- Gitblit v1.9.3