From 2b5ef02510cffc0cdbe74ed53b53fd9826d0bacf Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期二, 30 一月 2024 17:12:04 +0800
Subject: [PATCH] 首页布局更改
---
Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue | 536 ++++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 348 insertions(+), 188 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue b/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue
index dd2cac3..9ee7e77 100644
--- a/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue
+++ b/Source/UBCS-WEB/src/components/Theme/ClassifyAuthDialog.vue
@@ -1,11 +1,16 @@
<template>
- <el-dialog
- v-dialogDrag
- :close-on-click-modal="false"
- :visible.sync="isShowDialog"
- @close="closeDialog"
- append-to-body title="鍒嗙被鎺堟潈">
+ <el-dialog
+ v-dialogDrag
+ :close-on-click-modal="false"
+ :visible.sync="isShowDialog"
+ append-to-body
+ class="avue-dialog avue-dialog--top"
+ title="鍒嗙被鎺堟潈"
+ top="-45px"
+ @close="closeDialog"
+ >
<el-table
+ :key="itemKey"
ref="dataTable"
v-loading="isLoading"
:data="classifyAuthData"
@@ -13,20 +18,14 @@
: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
- fixed
- type="selection"
- width="55"
- ></el-table-column>
- <el-table-column
- v-if="classifyAuthHeader.length !== 0"
v-for="(item, index) in classifyAuthHeader"
+ v-if="classifyAuthHeader.length !== 0"
:key="index"
:label="item.label"
:prop="item.prop"
@@ -39,6 +38,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"
@@ -50,35 +50,56 @@
</el-select>
<el-input
v-if="item.type === 'text'"
- type="text"
- readonly
v-model="row[item.prop]"
+ readonly
+ type="text"
>
</el-input>
- <el-checkbox
+ <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]"
+ >
</el-checkbox>
</template>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
- <el-button type="success" class="el-icon-plus" @click="addClassifyAuth"></el-button>
- <el-button type="warning" class="el-icon-minus" @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>
<script>
-import { getButtonByParentCode } from "@/api/system/menu"
-import { getPage } from "@/api/system/role"
-import { saveOrUpdate,getClassifyAuthList } 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",
props: {
+ // 褰撳墠鐐瑰嚮鑺傜偣鐨勯《灞傝妭鐐�
classifyData: {
type: "Object",
default: "",
@@ -88,13 +109,17 @@
type: "Boolean",
default: false,
},
+ // 褰撳墠鐐瑰嚮鐨勮妭鐐�
+ TreeNode:{
+ type:Object
+ }
},
data() {
return {
// 瀵硅瘽妗嗘樉绀烘帶鍒�
isShowDialog: this.visible,
isLoading: false,
- tableHeight: 'calc(100vh - 550px)',
+ tableHeight: "calc(100vh - 550px)",
classifyAuthData: [],
//鍒楀ご
classifyAuthHeader: [],
@@ -104,15 +129,253 @@
roleList: [],
//褰撳墠閫変腑鐨勮〃鏍艰
selectList: [],
+ itemKey: "",
+ addIndex: Number,
+ currentRow: {},
};
+ },
+ computed: {},
+ mounted() {},
+ created() {
+ this.addIndex = this.classifyAuthData.length <= 0 ? 0 :this.classifyAuthData.length -1;
},
watch: {
// 鐩戝惉鐖剁粍浠朵紶鐨勭獥鍙ｆ樉绀洪殣钘忕殑鍊�
- visible (){
- if(this.visible){
+ visible() {
+ if (this.visible) {
this.isShowDialog = this.visible;
- return new Promise((resolve, reject) => {
- getButtonByParentCode({code:"classifyTree"}).then(res=>{
+ this.loadAuthPage();
+ }
+ },
+ },
+ 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) => {
+ 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);
+ console.log(this.classifyAuthData[index].authButton.allDisabled)
+ }
+
+ } 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;
+ }
+ }
+ }
+ });
+ });
+
+ //寮哄埗鍒锋柊琛ㄦ牸
+ 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.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);
+ }
+ },
+ // 鍏抽棴瀵硅瘽妗�
+ closeDialog() {
+ this.$emit("update:visible", false);
+ this.classifyAuthData = [];
+ },
+ // 澧炲姞琛�
+ addClassifyAuth() {
+ if (this.roleList.length <= 0) {
+ this.$message.warning("褰撳墠绉熸埛涓嶅瓨鍦ㄨ鑹蹭俊鎭紒");
+ return;
+ }
+
+ let item = {
+ roleData: this.roleList[0].id,
+ classifyItem: this.classifyData.label,
+ authButton:{},
+ index: this.addIndex,
+ uuid: uuidv4(), //鐢熸垚鍞竴鐨刬d
+ };
+ //灏嗘寜閽缃繘鍘�
+ 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++; //鑷畾涔夌敓鎴愭坊鍔犺涓嬫爣
+ },
+ // 鍒犻櫎琛�
+ subClassifyAuth() {
+ for (let item of this.selectList) {
+ let index = this.classifyAuthData.findIndex(
+ (data) => data.index === item.index
+ );
+ if (index !== -1) {
+ this.classifyAuthData.splice(index, 1);
+ }
+ }
+ },
+ handleRowClick(row, column) {
+ this.selectList.push(row);
+ this.$refs.dataTable.toggleRowSelection(row);
+ },
+ // 澶氶��
+ handleSelectionChange(list) {
+ this.selectList = list;
+ //console.log("澶氶��");
+ },
+ // 閫夋嫨鍏ㄩ儴
+ handleSelectionAll(list) {
+ this.selectList = list;
+ },
+ // 淇濆瓨鍒嗙被鎺堟潈淇℃伅
+ async submit() {
+ let form = {
+ classifyAuthList: [],
+ isCLear: false, //榛樿鏄竻绌�
+ classifyId: this.TreeNode.oid,
+ };
+ let isRepeat = false;
+ 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) {
+ this.$message.warning("瑙掕壊鍜屽垎绫诲凡缁忓瓨鍦紝璇烽噸鏂伴厤缃紒");
+ return;
+ }
+
+ 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: "classify_auth",
+ };
+ form.classifyAuthList.push(data);
+ });
+ if (flag) {
+ this.$message.warning("鏈夋湭鍕鹃�夋搷浣滅殑鏉冮檺锛屼笉鍏佽鎺堟潈");
+ return;
+ }
+ }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);
+ }
+ );
+ 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) => {
+ getButtonByParentCode({ code: "classifyTree" })
+ .then((res) => {
// 璁板綍鎸夐挳鏁版嵁
this.classifyAuthButton = res.data.data;
const list = res.data.data;
@@ -131,180 +394,77 @@
type: "text",
width: 180,
});
- list.forEach(item => {
+ list.forEach((item) => {
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)
+ })
+ .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);
- })
- }
- });
+ // 鑾峰彇瑙掕壊鍒楄〃
+ getPage(1, -1, null).then((res) => {
+ this.roleList = res.data.data.records;
});
- }
- },
- },
- computed: {},
- mounted() {},
- created() {},
- methods: {
- // 鍏抽棴瀵硅瘽妗�
- closeDialog(){
- this.$emit('update:visible', false);
- this.classifyAuthData = [];
- },
- // 澧炲姞琛�
- addClassifyAuth(){
- let item = {
- roleData: this.roleList[0].id,
- classifyItem: this.classifyData.text,
- uuid: uuidv4(),//鐢熸垚鍞竴鐨刬d
- }
- //灏嗘寜閽缃繘鍘�
- this.classifyAuthButton.forEach(data=>{
- Vue.set(item,data.id,false);
- })
- //console.log(item)
- this.classifyAuthData.push(item)
- // console.log(this.classifyAuthData);
- },
- // 鍒犻櫎琛�
- subClassifyAuth(){
- for (let item of this.selectList) {
- let index = this.classifyAuthData.findIndex(data => data.index === item.index);
- if (index !== -1) {
- this.classifyAuthData.splice(index, 1);
- }
- }
- },
- handleRowClick(row, column) {
- this.selectList.push(row);
- this.$refs.dataTable.toggleRowSelection(row);
- },
- // 澶氶��
- handleSelectionChange(list) {
- this.selectList = list;
- //console.log("澶氶��");
- },
- // 閫夋嫨鍏ㄩ儴
- handleSelectionAll(list) {
- this.selectList = list;
- },
- // 淇濆瓨鍒嗙被鎺堟潈淇℃伅
- submit(){
- if(this.classifyAuthData.length <= 0){
- this.$message.warning('鎺堟潈鍒楄〃涓虹┖锛�')
- return;
- }
- 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;
- break;
+ // 鑾峰彇璇ュ垎绫讳笅宸叉巿鏉冪殑鍒嗙被鎺堟潈淇℃伅
+ 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,
+ authButton:{},
+ index: index,
+ uuid: uuidv4(), //鐢熸垚鍞竴鐨刬d
+ };
+ //灏嗘寜閽缃繘鍘�
+ authData.buttonIdList.forEach((data) => {
+ Vue.set(item, data, true);
+ });
+ this.classifyAuthData.push(item);
+ this.roleHandlerMethods(authData.roleId, "create", index);
+ // console.log('index', index)
+ });
}
- }
- 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;
- return;
- }
- let data = {
- oid: item.oid,
- roleId: item.roleData,
- classifyId: this.classifyData.oid,
- buttonIds: itemButtonList.join(","),
- }
- form.push(data);
+ });
});
- if(flag) {
- 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);
- })
},
},
};
</script>
<style lang="scss" scoped>
+// 婊氬姩鏉℃牱寮忎慨鏀�
+// 婊氬姩鏉＄殑瀹藉害
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+ height: 15px; // 绾靛悜婊氬姩鏉� 蹇呭啓
+ background: white;
+ border: white;
+ width: 10px;
+}
- // 婊氬姩鏉℃牱寮忎慨鏀�
- // 婊氬姩鏉＄殑瀹藉害
- /deep/ .el-table__body-wrapper::-webkit-scrollbar {
- height: 15px; // 绾靛悜婊氬姩鏉� 蹇呭啓
- background: white;
- border: white;
- width: 10px;
+// 婊氬姩鏉＄殑婊戝潡
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+ background-color: #ececec;
+ border-radius: 20px;
+ border: #ececec;
+}
- }
-
- // 婊氬姩鏉＄殑婊戝潡
- /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
- background-color: #ececec;
- border-radius: 20px;
- border: #ececec;
- }
-
-</style>
\ No newline at end of file
+/deep/ .el-table__body-wrapper {
+ height: calc(100% - 50px) !important;
+}
+</style>
--
Gitblit v1.9.3