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 | 306 +++++++++++++++++++++++++-------------------------- 1 files changed, 150 insertions(+), 156 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue b/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue index 073e047..eab7324 100644 --- a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue +++ b/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: { @@ -110,8 +96,8 @@ default: false, }, // 褰撳墠鐐瑰嚮鐨勮妭鐐� - TreeNode:{ - type:Object + TreeNode: { + type: Object } }, data() { @@ -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: { // 鐩戝惉鐖剁粍浠朵紶鐨勭獥鍙f樉绀洪殣钘忕殑鍊� @@ -147,64 +128,92 @@ 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 => { + // 鏌ョ湅涓篺alse鏃跺皢鎵�鏈夊閫夋鐘舵�佽缃负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); + this.$set(this.classifyAuthData[index].authButton, item.code, true); + //娣诲姞 鈥滄煡鐪嬪叏閮ㄧ鐢ㄦ潯浠垛�� + if (item.code === "classify_view") { + this.$set(this.classifyAuthData[index].authButton, "allDisabled", 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); + this.$set(this.classifyAuthData[index].authButton, item.code, false); }); - - if(item.code === "classify_view"){ + if (item.code === "classify_view") { this.classifyAuthData[index].authButton.allDisabled = false; } } } }); }); - + // 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() { @@ -246,24 +249,22 @@ let item = { roleData: this.roleList[0].id, classifyItem: this.classifyData.label, - authButton:{}, - index: this.addIndex, - uuid: uuidv4(), //鐢熸垚鍞竴鐨刬d - }; + authButton: {}, + uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d, + 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); } @@ -288,9 +289,11 @@ classifyAuthList: [], isCLear: false, //榛樿鏄竻绌� classifyId: this.TreeNode.oid, + authType: 'classify_auth', }; + console.log('classifyAuthData',this.classifyAuthData); let isRepeat = false; - if(this.classifyAuthData.length > 0){ + if (this.classifyAuthData.length > 0) { // 閬嶅巻鏁扮粍锛屾瘮杈冨悗闈㈢殑瀵硅薄鐨剅oleData鏄惁涓庡墠闈㈢殑瀵硅薄鐩哥瓑 for (let i = 0; i < this.classifyAuthData.length - 1; i++) { let currentRoleId = this.classifyAuthData[i].roleData; @@ -304,18 +307,16 @@ 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) { - if (item[key] === true) { + if (item[key] === true && key !== 'checkTheStatus') { itemButtonList.push(key); } } @@ -331,31 +332,28 @@ classifyId: this.TreeNode.oid, buttonIds: itemButtonList.join(","), authType: "classify_auth", - }; + } form.classifyAuthList.push(data); }); if (flag) { - this.$message.warning("鏈夋湭鍕鹃�夋搷浣滅殑鏉冮檺锛屼笉鍏佽鎺堟潈"); + this.$message.warning('鏈夋湭鍕鹃�夋搷浣滅殑鏉冮檺锛屼笉鍏佽鎺堟潈') return; } - }else { + // console.log(form) + } else { // 涓虹┖璇佹槑鏄竻绌烘巿鏉冨垪琛� form.isCLear = true; } - // console.log(JSON.stringify(form)) // 璋冪敤淇濆瓨鍒嗙被鎺堟潈鐨勬帴鍙� - await saveOrUpdate(form).then( - (res) => { - this.$message({ - type: "success", - message: res.data.msg, - }); - // this.isShowDialog = false - }, - (error) => { - window.console.log(error); - } - ); + await saveOrUpdate(form).then(res => { + this.$message({ + type: "success", + message: res.data.msg, + }); + // this.isShowDialog = false + }, (error) => { + window.console.log(error); + }) this.classifyAuthData = []; this.loadAuthPage(); }, @@ -365,61 +363,55 @@ 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) => { - // 璁板綍鎸夐挳鏁版嵁 - 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); + 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) => { + 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 +420,17 @@ oid: authData.oid, roleData: authData.roleId, classifyItem: this.classifyData.label, - authButton:{}, index: index, - uuid: uuidv4(), //鐢熸垚鍞竴鐨刬d - }; + authButton: {}, + uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d + } //灏嗘寜閽缃繘鍘� - 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 +441,7 @@ </script> <style lang="scss" scoped> + // 婊氬姩鏉℃牱寮忎慨鏀� // 婊氬姩鏉$殑瀹藉害 /deep/ .el-table__body-wrapper::-webkit-scrollbar { @@ -457,6 +449,7 @@ background: white; border: white; width: 10px; + } // 婊氬姩鏉$殑婊戝潡 @@ -469,4 +462,5 @@ /deep/ .el-table__body-wrapper { height: calc(100% - 50px) !important; } + </style> -- Gitblit v1.9.3