hxgksystemapp/src/views/sysworkflow/lowcodepage/appPage/appSetUp/appManager.vue

<!--
@ 作者: 秦东
@ 时间: 2024-05-27 16:36:46
@ 备注: 应用管理员
-->
<script lang='ts' setup>
import { userOrgRole } from '@/api/hr/search/types'
import PersonnelSelector from '@/views/hr/userBox.vue'

import { gainLookViews,setAppManagerInfo } from '@/api/hr/people/index'

const props = defineProps({
	appCont:{
		type:Object,
		default(){
			return {}
		}
	}
});

const appMang = ref<userOrgRole[]>([])			//可见范围
const isOpenBox = ref(false)

/**
@ 作者: 秦东
@ 时间: 2024-05-23 14:01:37
@ 功能: 人员选择器
*/
const setupUser = (types:number) => {
	isOpenBox.value = true
	console.log("isOpenBox",isOpenBox)
}

/**
@ 作者: 秦东
@ 时间: 2024-05-24 15:54:55
@ 功能: 选中得内容
*/
const pickInfo = (val:userOrgRole[]) =>{
	isOpenBox.value = false;
	appMang.value = val.value
	let sendInfo = {
		id:props.appCont.uuid,
		orgRoleUs:val.value
	}
	setAppManagerInfo(sendInfo)
		.then((data:any) =>{
			// console.log("sendInfo---->",data)
			ElMessage({
				showClose: true,
				message: data.msg,
				type: 'success',
			})
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-05-27 16:42:51
@ 功能: 要删除的数据
*/
const delData = (val:userOrgRole) => {
	if(appMang.value.length > 0){
		appMang.value.forEach((item:userOrgRole,index:number)=>{
			if(item.id == val.id){
				console.log("isOpenBox----->item:",item)
				console.log("isOpenBox----->index:",index)
				appMang.value.splice(index,1)
			}
		})
		let sendInfo = {
			id:props.appCont.uuid,
			orgRoleUs:appMang.value
		}
		setAppManagerInfo(sendInfo)
			.then((data:any) =>{
				// console.log("sendInfo---->",data)
				ElMessage({
					showClose: true,
					message: data.msg,
					type: 'success',
				})
			})
	}
	console.log("isOpenBox----->appMang:",appMang)
}
/**
@ 作者: 秦东
@ 时间: 2024-05-29 08:15:45
@ 功能: 获取已选择的内容
*/
const oldPickList = () =>{
	gainLookViews({id:props.appCont.uuid})
		.then((data:any)=>{
			appMang.value = data.data.appManager
		})
}
onMounted(() => {
	oldPickList()
})
</script>
<template>
	<div>
		<PersonnelSelector v-model:is-open="isOpenBox" :pick-list="appMang" :types="2" :org-true="2" @pickInfo="pickInfo" />
		<el-card  shadow="never" class="boxTop">
			<el-row>
				<el-col :span="24" class="appTitle">应用主管理员</el-col>
				<el-col :span="24" class="appContent">应用主管理员拥有应用管理后台的全部权限，可进行应用搭建、编辑、设置以及数据管理</el-col>
				<el-col :span="24" class="appManList">
					<table>
						<tr>
							<td width="80px">
								<el-text  >权限成员</el-text>
							</td>
							<td width="80px">
								<el-button link type="primary" size="large" @click="setupUser(2)">设置成员</el-button>
							</td>
							<td>
								<el-space wrap :size="15">
									
									<el-tag 
										v-for="(item,index) in appMang" 
										:key="index" 
										closable 
										type="info"
										:disable-transitions="true" 
										@close="delData(item)">
										{{item.title}}
									</el-tag>
								
								</el-space>
							</td>
						</tr>
					</table>
				</el-col>
			</el-row>
		
		
		</el-card>
	</div>
</template>
<style  lang='scss' scoped>
.appTitle{
	font-size:22px;
}
.appDesicer{
	padding: 15px 0 0 0;
	color: #606266;
}
.boxTop{
	margin: 15px 0 0 0;
}
.appContent{
	padding: 10px 0 15px 0;
	color: #606266;
	border-bottom: 1px solid #F0F2F5;
}
.appManList{
	padding: 30px 0 10px 0;
}
.powerBox{
	height: calc(100vh - 70px);
}
</style>