ShutongInterconnectedChemicalCloudPlatform/src/views/powermanage/rolepower/setuprole/setuprolepower.vue

<!--
@ 作者: 秦东
@ 时间: 2023-05-30 13:52:12
@ 备注: 配置权限
-->
<script lang='ts' setup>
import { setupPage,systemCont,systemMenusTypeTree,submintPostPower } from "@/api/system/roleapi/types";
import { getSystemType,getSystemPoewrTreeForRole,getGrantRolePowers,grantSystemRolePoewr } from "@/api/system/roleapi/postrole";
const props = defineProps({
	powerIsShow:{
		type:Boolean,
		default:false
	},
	roleId:{
		type:String,
		default:''
	},
	roleTitle:{
		type:String,
		default:'配置权限'
	}
});
/**
 * 树形组件
 */
const menuRef = ref(ElTree);
const powerLoading = ref(false);
const powerLoadingSub = ref(false);	
const emits = defineEmits(["update:powerIsShow"]);	//父级元素
/**
* 系统选择标签
*/
const systemTabs = ref('')
/**
 * 系统列表
 */
 const orgPostTreeContList = ref<systemCont[]>([]);
/**
 * 管理范围
 */
 const manageScope = ref(1)
/**
 * 树形结构约束
 */
const systemMenuTreeProps = {
    children: "child",
    label: "name",
}
/**
 * 分页参数
 */
 const setupPageCont = reactive<setupPage>({
	page:1,
	pagesize:100000
});
/**
 * 弹窗显示控制
 */
 const power_is_Show = computed({
	get: () => props.powerIsShow,
	set: (val) => {
		emits("update:powerIsShow", val);
	},
});
/**
 * 关闭弹窗回调
 */
 function handleClosePower () {
	emits("update:powerIsShow", false);
	initData();
}
/**
 * 初始化数据
 */
 function initData(){
	powerLoading.value = false;
	powerLoadingSub.value = false
	setupPageCont.page = 1;
	setupPageCont.pagesize = 100000;
	systemTabs.value = "";
	manageScope.value = 1;
	gainPowerAry.value=[];
}
/**
 * 监听数据
 */
watch(() => props.powerIsShow,() => {
	if(props.powerIsShow){
		getSystemTypeList()
	}else{
		initData()
	}
});


/**
 * 获取系统分类
 */
 function getSystemTypeList() {
	getSystemType(setupPageCont)
		.then((data)=>{
			// console.log(data);
			orgPostTreeContList.value = data.data.list;
			if(data.data.list[0]){
				systemTabs.value = data.data.list[0].coder
			}
		})
}
/**
 * 权限菜单列表
 */
 const systemPowerMenusTree = ref<systemMenusTypeTree[]>([]);
/**
 * 已授权的权限
 */
const gainPowerAry = ref<String[]>([])
/**
 * 获取菜单
 */
function getSysMenuTree(sysKey:string){
	powerLoading.value = true;
	systemPowerMenusTree.value =[]
	getSystemPoewrTreeForRole({name:sysKey,roleid:props.roleId})
		.then(({ data })=>{
			systemPowerMenusTree.value = data;
			getGrantRolePowers({name:sysKey,roleid:props.roleId})
				.then(({data})=>{
					// console.log("获取菜单====>",data);
					manageScope.value = data.level
					if(data != null){
						gainPowerAry.value= data.powerList
					}
				})
				.finally(()=>{
					powerLoading.value = false;
					setCheckedKeys();
				})
		})
		.finally(()=>{powerLoading.value=false})
		
}
/**
 * 设置已经授权的权限
 */
function setCheckedKeys(){
	// console.log("设置已经授权的权限",gainPowerAry.value)
	gainPowerAry.value.forEach((menuId) =>
		menuRef.value.setChecked(menuId, true, false)
	);
}
watch(() => systemTabs.value,() => {
	powerLoading.value = true;
	if(systemTabs.value != "" && systemTabs.value != null){
		getSysMenuTree(systemTabs.value)
	}
	
});
/**
 * 授权
 */
function enterEmpowerClick(){
	powerLoadingSub.value = true;
	const checkedMenuTrue:systemMenusTypeTree[] = menuRef.value
      .getCheckedNodes(false, true)
      .map((node: any) => node);
	//   console.log("确定授权", checkedMenuTrue); 
	  checkedMenuTrue.forEach(item=>{
		item.child=[];
	  })
	  grantSystemRolePoewr({systemname:systemTabs.value,roleid:props.roleId,level:manageScope.value*1,power:checkedMenuTrue})
	  	.then((data)=>{
			// console.log("确定授权返回----》", data);
			ElMessage.success("授权成功");
			handleClosePower();
		}).finally(()=>{powerLoadingSub.value = false;})
}
</script>
<template>
	<el-dialog v-model="power_is_Show" custom-class="dialog_box" :title="roleTitle" top="50px" :before-close="handleClosePower">
		<el-container>
			<el-aside width="125px">
				<el-tabs v-model="systemTabs" tab-position="left" class="demo-tabs tabs_box" >
					<el-tab-pane  v-for="item in orgPostTreeContList" :key="item.key" :label="item.title" :name="item.coder"></el-tab-pane>
				</el-tabs>
			</el-aside>
			<el-main>
				<el-radio-group v-model="manageScope" style="margin-bottom: 10px">
					<el-radio-button label="1">本岗位</el-radio-button>
					<el-radio-button label="2">本部门</el-radio-button>
					<el-radio-button label="3">本分部</el-radio-button>
					<el-radio-button label="4" disabled>指定行政组织</el-radio-button>
					<el-radio-button label="5">所有</el-radio-button>
				</el-radio-group>
				<el-scrollbar v-loading="powerLoading" class="tab_pane_box">	
					<el-tree
						ref="menuRef"
						node-key="menukey"
						:data="systemPowerMenusTree"
						show-checkbox
						:default-expand-all="true"
						:props="systemMenuTreeProps"
					>
						<template #default="{ node,data }">
							<span class="tree_sapn">{{ node.label }}</span>
							<el-tag
							v-if="data.attribute === 2"
							type="warning"
							>目录</el-tag>
							<el-tag v-if="data.attribute === 1" type="success"
							>菜单</el-tag>
							<el-tag v-if="data.attribute ===4" type="danger"
							>按钮</el-tag>
							<el-tag v-if="data.attribute === 3" type="info"
							>外链</el-tag>
								
						</template>
					</el-tree>
				</el-scrollbar>
			</el-main>
		</el-container>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="danger" @click="handleClosePower">取消</el-button>
				<el-button type="primary" :loading="powerLoadingSub" @click="enterEmpowerClick">授权</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<style  lang='scss' scoped>
.el-dialog__body{
	padding: 0;
}
.tabs_box{
	height: calc(100vh - 500px);
	.tab_pane_box{
		height: calc(100vh - 550px);
		overflow: hidden;
		overflow-y: auto;
	}
}
.tab_pane_box{
	height: calc(100vh - 550px);
	overflow: hidden;
	overflow-y: auto;
}
.tree_sapn{
	padding: 0 15px;
}

</style>