From a56c7f5fbe4b171a82561dce3b3b0ff6c5c30386 Mon Sep 17 00:00:00 2001 From: ludc Date: 星期一, 22 一月 2024 17:30:58 +0800 Subject: [PATCH] 可用字符集,前后缀,应用,可以用字符集接口下拉和正则接口提交 --- Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue | 289 ++++++++++++++++++++++++++++++--------------------------- 1 files changed, 151 insertions(+), 138 deletions(-) diff --git a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue b/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue index d161011..cedd531 100644 --- a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue +++ b/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue @@ -6,7 +6,9 @@ append-to-body class="avue-dialog avue-dialog--top" title="鍒嗙被鎺堟潈" - top="-45px" @close="closeDialog"> + top="-45px" + @close="closeDialog" + > <el-table :key="itemKey" ref="dataTable" @@ -20,10 +22,7 @@ @select-all="handleSelectionAll" @selection-change="handleSelectionChange" > - <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" @@ -39,7 +38,7 @@ v-if="item.type === 'select'" slot="prepend" v-model="row[item.prop]" - @change="selectChange(row.roleData,row)" + @change="selectChange(row.roleData, row)" > <el-option v-for="optionItem in roleList" @@ -59,26 +58,43 @@ <el-checkbox v-if="item.type === 'checkbox'" v-model="row[item.prop]" - :disabled="row.allDisabled ? true :row[item.code]"> + :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 + 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", @@ -98,7 +114,7 @@ // 瀵硅瘽妗嗘樉绀烘帶鍒� isShowDialog: this.visible, isLoading: false, - tableHeight: 'calc(100vh - 550px)', + tableHeight: "calc(100vh - 550px)", classifyAuthData: [], //鍒楀ご classifyAuthHeader: [], @@ -108,62 +124,65 @@ roleList: [], //褰撳墠閫変腑鐨勮〃鏍艰 selectList: [], - itemKey: '', + itemKey: "", addIndex: Number, - currentRow: {} + currentRow: {}, }; }, computed: {}, - mounted() { - }, - created() { - }, + mounted() {}, + created() {}, watch: { // 鐩戝惉鐖剁粍浠朵紶鐨勭獥鍙f樉绀洪殣钘忕殑鍊� 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, - code: item.code, - type: "checkbox", + 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, - }; - tempData.push(columnItem); + }); + 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(); }) - this.classifyAuthHeader = tempData; - resolve(); - }).catch(err => { - reject(err) - }); + .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.classifyData.oid, authType: "classify_auth"}).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) { @@ -172,18 +191,19 @@ oid: authData.oid, roleData: authData.roleId, classifyItem: this.classifyData.label, + authButton:{}, index: index, - uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d - } + uuid: uuidv4(), //鐢熸垚鍞竴鐨刬d + }; //灏嗘寜閽缃繘鍘� - authData.buttonIdList.forEach(data => { + 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) + this.roleHandlerMethods(authData.roleId, "create", index); // console.log('index', index) - }) + }); } }); }); @@ -196,87 +216,77 @@ return; } - getButtonsByRoleId({roleId: id, code: 'classifyTree'}).then(res => { + 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); + const filteredItems = this.classifyAuthButton.filter((item) => { + return !res.data.data.find((x) => x.id === item.id); }); - // console.log('绂佺敤鎸夐挳',filteredItems) - // console.log('涓嶇鐢ㄦ寜閽�',res.data.data) - //鎷胯〃鏍煎垪澶村惊鐜拰娌℃湁瀵瑰簲鐨勫睘鎬ц繘琛屾瘮杈� + this.classifyAuthHeader.forEach((item) => { - const isMatched = filteredItems.some(x => x.id === item.prop); - if (isMatched) { - this.$nextTick(() => { - if (this.classifyAuthData[index]) { + const isMatched = filteredItems.some((x) => x.id === item.prop); + this.$nextTick(() => { + if (this.classifyAuthData[index]) { + if (isMatched) { Object.keys(this.classifyAuthData[index]).forEach((key) => { - - if (this.classifyAuthData[index].classify_view) { - this.$set(this.classifyAuthData[index], item.code, true); - } else { - this.classifyAuthData[index][item.code] = false; - } - // console.log(item.code) - // this.$set(this.classifyAuthData[index], item.code, true); - + 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); }); } - }) - } else { - this.$nextTick(() => { - if (this.classifyAuthData[index]) { - Object.keys(this.classifyAuthData[index]).forEach((key) => { - if (item.prop === key) { - this.$set(this.classifyAuthData[index], item.code, false); - } - }); - } - }) - } + } + }); }); //娣诲姞 鈥滄煡鐪嬪叏閮ㄧ鐢ㄦ潯浠垛�� - this.classifyAuthData.forEach((classkey, classIndex) => { - if (classkey.classify_view) { - this.$set(this.classifyAuthData[classIndex], 'allDisabled', true) - } else { - this.classifyAuthData[classIndex].allDisabled = false; - } - }); - // console.log('classifyAuthData',this.classifyAuthData) + 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 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); + const res = await getButtonsByRoleId({ + roleId: row, + code: "classifyTree", }); - this.classifyAuthHeader.forEach(item => { - const isMatched = filteredItems.some(x => x.id === item.prop); + 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; + 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[item.code] = item.prop === key ? true : false; - if (!currentRow.classify_view) { - currentRow.allDisabled = false; + Object.keys(currentRow).forEach((key) => { + currentRow.authButton[item.code] = false; + if (!currentRow.authButton.classify_view) { + currentRow.authButton.allDisabled = false; } }); } } + this.itemKey = uuidv4(); // 寮哄埗鍒锋柊琛ㄦ牸 }); }); @@ -286,7 +296,7 @@ }, // 鍏抽棴瀵硅瘽妗� closeDialog() { - this.$emit('update:visible', false); + this.$emit("update:visible", false); this.classifyAuthData = []; }, // 澧炲姞琛� @@ -300,20 +310,23 @@ let item = { roleData: this.roleList[0].id, classifyItem: this.classifyData.label, + authButton:{}, index: this.addIndex, - uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d - } + uuid: uuidv4(), //鐢熸垚鍞竴鐨刬d + }; //灏嗘寜閽缃繘鍘� - 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.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); + let index = this.classifyAuthData.findIndex( + (data) => data.index === item.index + ); if (index !== -1) { this.classifyAuthData.splice(index, 1); } @@ -335,7 +348,7 @@ // 淇濆瓨鍒嗙被鎺堟潈淇℃伅 submit() { if (this.classifyAuthData.length <= 0) { - this.$message.warning('鎺堟潈鍒楄〃涓虹┖锛�') + this.$message.warning("鎺堟潈鍒楄〃涓虹┖锛�"); return; } let isRepeat = false; @@ -358,7 +371,7 @@ } let form = []; let flag = false; - this.classifyAuthData.forEach(item => { + this.classifyAuthData.forEach((item) => { let itemButtonList = []; //绛涢�夊嚭鎸夐挳鍕鹃�変负true鐨勫垪 for (let key in item) { @@ -378,24 +391,27 @@ classifyId: this.classifyData.oid, buttonIds: itemButtonList.join(","), authType: "classify_auth", - } + }; form.push(data); }); if (flag) { - this.$message.warning('鏈夋湭鍕鹃�夋搷浣滅殑鏉冮檺锛屼笉鍏佽鎺堟潈') + 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); - }) + saveOrUpdate(form).then( + (res) => { + this.$message({ + type: "success", + message: res.data.msg, + }); + // this.isShowDialog = false + }, + (error) => { + window.console.log(error); + } + ); }, // 鍏ㄩ�夋寜閽� selectAllButton() { @@ -403,7 +419,7 @@ this.$message.warning("璇峰彧閫夋嫨涓�琛岄渶瑕佸叏閫夌殑鎸夐挳鐨勬暟鎹锛�"); return; } - this.classifyAuthButton.forEach(item => { + this.classifyAuthButton.forEach((item) => { //console.log("item",item); Vue.set(this.selectList[0], item.id, true); }); @@ -414,7 +430,6 @@ </script> <style lang="scss" scoped> - // 婊氬姩鏉℃牱寮忎慨鏀� // 婊氬姩鏉$殑瀹藉害 /deep/ .el-table__body-wrapper::-webkit-scrollbar { @@ -422,7 +437,6 @@ background: white; border: white; width: 10px; - } // 婊氬姩鏉$殑婊戝潡 @@ -435,5 +449,4 @@ /deep/ .el-table__body-wrapper { height: calc(100% - 50px) !important; } - </style> -- Gitblit v1.9.3