FactorySystemWeb/src/views/System/components/PowerRole.vue

<template>
	<view class="power-box">
		<lay-tab type="card" v-model="tabIndex" class="tab-box" @change="_changeTab">
			<lay-tab-item title="菜单权限" id="1">
				<lay-collapse v-model="openKeys1" v-for="(mIdv,mIdx) in menuList" :key="mIdx">
					<lay-collapse-item :title="mIdv.FName" :id="mIdv.FID">
						<lay-checkbox name="menu" skin="primary" v-model="mIdv.FIsChose" :value="mIdv.FID" label="全部"
							@change="_changeMenu(mIdv,null,1)"></lay-checkbox>
						<lay-checkbox name="menu" skin="primary" v-model="cIdv.FIsChose" :value="cIdv.FID"
							:label="cIdv.FName" v-for="(cIdv,cIdx) in mIdv.FChild" :key="cIdx"
							@change="_changeMenu(mIdv,cIdv,2)"></lay-checkbox>
					</lay-collapse-item>
				</lay-collapse>
			</lay-tab-item>
			<lay-tab-item title="事项权限" id="2">
				<lay-collapse v-model="openKeys2" v-for="(mIdv,mIdx) in termList" :key="mIdx">
					<lay-collapse-item :title="mIdv.FName" :id="mIdv.FID">
						<lay-checkbox name="menu" skin="primary" v-model="mIdv.FIsChose" :value="mIdv.FID" label="全部"
							@change="_changeMenu(mIdv,null,1)"></lay-checkbox>
						<lay-checkbox name="menu" skin="primary" v-model="cIdv.FIsChose" :value="cIdv.FID"
							:label="cIdv.FName" v-for="(cIdv,cIdx) in mIdv.FChild" :key="cIdx"
							@change="_changeMenu(mIdv,cIdv,2)"></lay-checkbox>
					</lay-collapse-item>
				</lay-collapse>
			</lay-tab-item>
			<lay-tab-item title="视图权限" id="3">
				<lay-collapse v-model="openKeys3" v-for="(mIdv,mIdx) in viemList" :key="mIdx">
					<lay-collapse-item :title="mIdv.FName" :id="mIdv.FID">
						<lay-checkbox name="menu" skin="primary" v-model="mIdv.FIsChose" :value="mIdv.FID" label="全部"
							@change="_changeMenu(mIdv,null,1)"></lay-checkbox>
						<lay-checkbox name="menu" skin="primary" v-model="cIdv.FIsChose" :value="cIdv.FID"
							:label="cIdv.FName" v-for="(cIdv,cIdx) in mIdv.FChild" :key="cIdx"
							@change="_changeMenu(mIdv,cIdv,2)"></lay-checkbox>
					</lay-collapse-item>
				</lay-collapse>
			</lay-tab-item>
			<lay-tab-item title="物料视图编辑" id="4">
				<lay-collapse v-model="openKeys4" v-for="(mIdv,mIdx) in termEditList" :key="mIdx">
					<lay-collapse-item v-if="mIdv.FName != '物料编辑视图'" :title="mIdv.FName" :id="mIdv.FID">
						<lay-checkbox name="menu" skin="primary" v-model="mIdv.FIsChose" :value="mIdv.FID" label="全部"
							@change="_changeMenu(mIdv,null,1)"></lay-checkbox>
						<lay-checkbox name="menu" skin="primary" v-model="cIdv.FIsChose" :value="cIdv.FID"
							:label="cIdv.FName" v-for="(cIdv,cIdx) in mIdv.FChild" :key="cIdx"
							@change="_changeMenu(mIdv,cIdv,2)"></lay-checkbox>
					</lay-collapse-item>
				</lay-collapse>
			</lay-tab-item>
		</lay-tab>
			
		<view :class="'menuBtn mb'">
			<lay-button type="normal" @click="submitMenuClick">保存</lay-button>
			<lay-button @click="cancelClick">取消</lay-button>
		</view>
	</view>
</template>

<style scoped>
	.power-box {
		display: block;
		height: 75vh;
	}

	.tab-box {
		max-width: 96%;
		margin: 20px auto 0;
	}

	.menuBtn {
		display: block;
		text-align: center;
		width: 96%;
		position: absolute;
		bottom: 38px;
	}
	.mb {
		position: relative;
		margin-top: 70px;
	}

	.mb4,
	.mb5 {
		position: relative;
		margin-top: 70px;
	}

	.view-box {
		padding-left: 16px;
		display: block;
	}

	.layui-checkbox {
		margin-bottom: 16px;
		display: inline-block;
	}
</style>

<script>
	import {
		ref
	} from 'vue';
	import {
		updateRoleModel,
		insertRoleModel,
		getMenuList,
		saveRolePower,
		getBasicRoleList
	} from "/src/api/api/user";
	export default {
		setup() {
			const roleInfo = ref({});
			const tabIndex = ref("1");
			const menuList = ref([]);
			const viemList = ref([]);
			const termList = ref([]);
			const termEditList = ref([]);
			const termEditList2 = ref([]);
			const openKeys1 = ref([]);
			const openKeys2 = ref([]);
			const openKeys3 = ref([]);
			const openKeys4 = ref([]);
			const openKeys5 = ref([]);
			return {
				roleInfo,
				tabIndex,
				menuList,
				viemList,
				termList,
				termEditList,
				termEditList2,
				openKeys1,
				openKeys2,
				openKeys3,
				openKeys4,
				openKeys5
			}
		},
		props: {
			roleInfoObj: {
				type: Object,
				default: () => {},
			}
		},
		mounted() {
			let roleInfo = JSON.parse(JSON.stringify(this.roleInfoObj));
			this.roleInfo = roleInfo;
			this._getMenuList();
		},
		methods: {
			//当前页面关闭
			cancelClick() {
				this.$emit('cancelClick', false);
			},
			_changeTab() {
				if (this.tabIndex == 2) {
					if (this.openKeys2.length == 0) this._getBasicRoleList(36);
				} else if (this.tabIndex == 3) {
					if (this.openKeys3.length == 0) this._getBasicRoleList(39);
				} else if (this.tabIndex == 4) {
					// 20230328 注释
					// if (this.openKeys4.length == 0) this._getBasicRoleList(40);
					// 20230328 修改
					// 参数传84，后台同时取40（物料视图）和44（基础视图）
					if (this.openKeys4.length == 0) this._getBasicRoleList(84);
				} else if (this.tabIndex == 5) {
					if (this.openKeys5.length == 0) this._getBasicRoleList(44);
				}
			},
			//获取菜单权限
			async _getMenuList() {
				let result = await getMenuList({
					FRoleId: this.roleInfo.FID,
					FRoleSet: "1"
				}) || [];
				this.openKeys1 = [];
				result.forEach((item) => {
					item.FIsChose = item.FChild.filter(s => s.FIsChose == true).length == item.FChild.length;
					this.openKeys1.push(item.FID);
				})
				this.menuList = result;
			},
			//获取权限信息（非菜单）
			async _getBasicRoleList(roleType) {
				let result = await getBasicRoleList({
					FRoleId: this.roleInfo.FID,
					FRoleSet: "1",
					FRoleType: roleType
				}) || [];
				let card = this.__cardingData(result);
				if (roleType == 36) {
					this.termList = card.Data;
					this.openKeys2 = card.Open;
				} else if (roleType == 39) {
					this.viemList = card.Data;
					this.openKeys3 = card.Open;
				} else if (roleType == 40) {
					this.termEditList = card.Data;
					this.openKeys4 = card.Open;
				} else if (roleType == 44) {
					this.termEditList2 = card.Data;
					this.openKeys5 = card.Open;
				} else if (roleType == 84) {
					this.termEditList = card.Data;
					this.openKeys4 = card.Open;
				}
			},
			//梳理数据
			__cardingData(result) {
				let viemList = [];
				let openKey = [];
				result.forEach((item) => {
					let parent = viemList.find(s => s.FName == item.FRemark) || null;
					if (parent == null) {
						parent = {
							FID: -2 * (viemList.length + 1),
							FChild: [],
							FIsChose: false,
							FName: item.FRemark
						}
						viemList.push(parent);
					}
					parent.FChild.push(item);
				});
				viemList.forEach((item) => {
					item.FIsChose = item.FChild.filter(s => s.FIsChose == true).length == item.FChild.length;
					openKey.push(item.FID);
				});
				return {
					Data: viemList,
					Open: openKey
				}
			},
			//菜单权限点击联动
			_changeMenu(parent, child, type) {
				if (type == 1) {
					parent.FChild.forEach((item) => {
						item.FIsChose = !parent.FIsChose
					});
				} else {
					let tCount = parent.FChild.filter(s => s.FIsChose == true).length;
					tCount += child.FIsChose ? -1 : 1;
					parent.FIsChose = tCount == parent.FChild.length;
				}
			},
			//保存菜单权限
			async submitMenuClick() {
				function getIds(list) {
					let ids = [];
					list.forEach((item) => {
						let has = item.FIsChose;
						if (item.FChild) {
							has = item.FChild.length == 0;
							item.FChild.forEach((child) => {
								if (child.FIsChose == true) {
									ids.push(child.FCode || child.FID);
									has = true;
								}
							});
						}
						if (has) {
							let val = item.FCode || item.FID;
							if (val > 0) ids.push(val);
						}
					});
					return ids;
				}
				/*
				* 20230329 需求变更
				* 新增物料视图处理逻辑
				* 当tabIndex == 4时，将termEditList里的内容拆分成FEditId和FEditId2，termEditList在取值时，已将40和44两种类型同时取出
				*/
				function getIdsWl(list, type) {
					let ids = [];
					list.forEach((item) => {
						let has = item.FIsChose;

						if (item.FChild) {
							let childList = [];

							if (type == 5) {
								childList = item.FChild.filter(s => s.FType == 44)
							}
							
							if (type == 4) {
								childList = item.FChild.filter(s => s.FType == 40)
							}

							if (childList && childList.length > 0) {
								has = childList == 0;
								childList.forEach((child) => {
									if (child.FIsChose == true) {
										ids.push(child.FCode || child.FID);
										has = true;
									}
								});
							}

							if (has) {
								let val = item.FCode || item.FID;
								if (val > 0) ids.push(val);
							}							
						}
					});

					return ids;
				}

				let result = await saveRolePower({
					FRoleId: this.roleInfo.FID,
					FMenuId: this.tabIndex == 1 ? getIds(this.menuList).join(',') : null,
					FViewId: this.tabIndex == 3 ? getIds(this.viemList).join(',') : null,
					FTermId: this.tabIndex == 2 ? getIds(this.termList).join(',') : null,
					// 20230329 需求变更 注释
					// FEditId: this.tabIndex == 4 ? getIds(this.termEditList).join(',') : null,
					// FEditId2: this.tabIndex == 5 ? getIds(this.termEditList2).join(',') : null
					
					// 20230329 需求变更 物料视图合并
					FEditId: this.tabIndex == 4 ? getIdsWl(this.termEditList, 4).join(',') : null,
					FEditId2: this.tabIndex == 4 ? getIdsWl(this.termEditList, 5).join(',') : null
				});
				if (result > 0) {
					layer.msg("操作成功", {
						time: 1000,
						icon: 1
					});
				} else {
					layer.msg("操作失败", {
						time: 1000,
						icon: 2
					});
				}
			}
		}
	}
</script>