From 8537a8d58b5a3750b57d76367ef51f086af271df Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期四, 18 四月 2024 00:09:40 +0800
Subject: [PATCH] 集团属性池映射界面代码完善
---
Source/UBCS-WEB/src/components/Theme/DataAuthDialog.vue | 398 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 238 insertions(+), 160 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/Theme/DataAuthDialog.vue b/Source/UBCS-WEB/src/components/Theme/DataAuthDialog.vue
index ed964a5..fe07119 100644
--- a/Source/UBCS-WEB/src/components/Theme/DataAuthDialog.vue
+++ b/Source/UBCS-WEB/src/components/Theme/DataAuthDialog.vue
@@ -40,7 +40,7 @@
v-if="item.type === 'select'"
slot="prepend"
v-model="row[item.prop]"
- @change="roleChange"
+ @change="roleChange(row.roleData,row)"
>
<el-option
v-for="optionItem in roleList"
@@ -59,17 +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 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>
@@ -77,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: "dataAuthDialog.vue",
props: {
+ // 褰撳墠鐐瑰嚮鑺傜偣鐨勯《灞傝妭鐐�
classifyData: {
type: "Object",
default: "",
@@ -92,12 +95,16 @@
type: "Boolean",
default: false,
},
+ // 褰撳墠鐐瑰嚮鐨勮妭鐐�
+ TreeNode: {
+ type: Object
+ }
},
data() {
return {
// 瀵硅瘽妗嗘樉绀烘帶鍒�
isShowDialog: this.visible,
- isLoading: false,
+ isLoading: true,
tableHeight: 'calc(100vh - 550px)',
classifyAuthData: [],
//鍒楀ご
@@ -118,71 +125,12 @@
visible() {
if (this.visible) {
this.isShowDialog = this.visible;
- return new Promise((resolve, reject) => {
- getButtonByParentCode({code: this.classifyData.attributes.id}).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.classifyData.oid,authType: "data_auth"}).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.label,
- 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)
- })
- }
- });
- });
+ this.loadAuthPage();
}
},
+ classifyAuthData(newval) {
+ this.addIndex = newval.length <= 0 ? 0 : newval.length - 1;
+ }
},
computed: {},
mounted() {
@@ -190,65 +138,120 @@
created() {
},
methods: {
- roleHandlerMethods(id, type, index) {
- if (this.classifyAuthData.length < 0) {
- return;
+ checkBoxToChangeTheEvent(check, code, row, id) {
+ if (code === "data_view") {
+ row.checkTheStatus = check;
+ } else if (!row.checkTheStatus) {
+ this.$message.warning('娓呭厛鍕鹃�夋煡鐪嬫寜閽紒');
+ // 鍦ㄦ潯浠朵笉婊¤冻鏃跺皢澶氶�夋鐘舵�佽缃负false
+ row[id] = false;
}
- 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);
+ if (!row.checkTheStatus) {
+ this.classifyAuthButton.forEach(key => {
+ // 鏌ョ湅涓篺alse鏃跺皢鎵�鏈夊閫夋鐘舵�佽缃负false
+ row[key.id] = false;
});
-
- //鎷胯〃鏍煎垪澶村惊鐜拰娌℃湁瀵瑰簲鐨勫睘鎬ц繘琛屾瘮杈�
- 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();
- })
+ }
},
// 鍏抽棴瀵硅瘽妗�
closeDialog() {
this.$emit('update:visible', false);
this.classifyAuthData = [];
},
- // 瑙掕壊鏀瑰彉鏃�
- roleChange(roleId){
- console.log(roleId);
+ roleHandlerMethods(id, type, index) {
+ if (this.classifyAuthData.length === 0) {
+ return;
+ }
+ //filteredItems 鏈巿鏉冩暟缁�
+ getButtonsByRoleId({roleId: id, code: this.classifyData.attributes.id}).then(res => {
+ const filteredItems = this.classifyAuthButton.filter(item =>
+ !res.data.data.some(x => x.id === item.id)
+ );
+ //鍜岃〃鏍煎垪杩涜瀵规瘮
+ this.classifyAuthHeader.forEach((item) => {
+ // if (item.code !== 'data_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 === "data_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 === "data_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: this.classifyData.attributes.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.$nextTick(() => {
+ if (currentRow) {
+ if (isMatched) {
+ Object.keys(currentRow).forEach((key) => {
+ currentRow.authButton[item.code] = true;
+ if (!currentRow.authButton.data_view) {
+ currentRow.authButton.allDisabled = false;
+ }
+ });
+ } else {
+ Object.keys(currentRow).forEach((key) => {
+ currentRow.authButton[item.code] = false;
+ if (!currentRow.authButton.data_view) {
+ currentRow.authButton.allDisabled = false;
+ }
+ });
+ }
+ }
+ this.itemKey = uuidv4(); // 寮哄埗鍒锋柊琛ㄦ牸
+ });
+ });
+ } catch (error) {
+ console.error(error);
+ }
},
// 澧炲姞琛�
addClassifyAuth() {
- if(this.roleList.length<=0){
+ if (this.roleList.length <= 0) {
this.$message.warning("褰撳墠绉熸埛涓嶅瓨鍦ㄨ鑹蹭俊鎭紒");
return;
}
+
let item = {
roleData: this.roleList[0].id,
classifyItem: this.classifyData.label,
- uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d
-
+ authButton: {},
+ uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d,
+ index: this.classifyAuthData.length -1,
}
//灏嗘寜閽缃繘鍘�
this.classifyAuthButton.forEach(data => {
@@ -256,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() {
@@ -281,61 +284,67 @@
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: 'data_auth',
+ };
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(","),
- authType: "data_auth",
+ 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;
+ return;
+ }
+ let data = {
+ oid: item.oid,
+ roleId: item.roleData,
+ classifyId: this.TreeNode.oid,
+ buttonIds: itemButtonList.join(","),
+ authType: "data_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,
@@ -344,10 +353,12 @@
}, (error) => {
window.console.log(error);
})
+ this.classifyAuthData = [];
+ this.loadAuthPage();
},
// 鍏ㄩ�夋寜閽�
- selectAllButton(){
- if(this.selectList.length!==1){
+ selectAllButton() {
+ if (this.selectList.length !== 1) {
this.$message.warning("璇峰彧閫夋嫨涓�琛岄渶瑕佸叏閫夌殑鎸夐挳鐨勬暟鎹锛�");
return;
}
@@ -357,6 +368,73 @@
});
//console.log("this.selectList",this.selectList);
},
+ loadAuthPage() {
+ return new Promise((resolve, reject) => {
+ this.isLoading = true;
+ getButtonByParentCode({code: this.classifyData.attributes.id}).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: "data_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;
+ });
+ },
},
};
</script>
--
Gitblit v1.9.3