ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/runApp/index.vue

<!--
@ 作者: 秦东
@ 时间: 2024-05-30 09:45:37
@ 备注: 运行自定义APP
-->
<script lang='ts' setup>
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type"
import { gainAppEditPsge } from '@/api/DesignForm/requestapi'
import { useUserStore } from "@/store/modules/user";

//引入页面
import  RegularPage  from "@/views/sysworkflow/lowcodepage/runApp/regularPage.vue"
import  RunAppForm  from "@/views/sysworkflow/lowcodepage/runApp/runAppForm.vue"

const props = defineProps({
	drawerWith:{
		type:Number,
		default:0
	},
	runIsOpen:{
		type: Boolean,
		default: false,
	},
	pickAppInfo:{
		type:Object,
		default(){
			return {}
		}
	}
});
const switchPAge = ref(1)
const userStore = useUserStore();
const emits = defineEmits(["update:runIsOpen","refreshPage"]);
const menusTree = ref<appMenuTreeInfo[]>([])
const pickAppMenu = ref("")
const pickAppMenuSel = ref("")
//应用基础配置
const appCont = reactive<appSetInfo>({
	appKey:"1",	
	appName:"未知应用",	
	appSvg:"",	
	state:1,	
	uuid:"1",
	describe:""
})

/**
@ 作者: 秦东
@ 时间: 2024-04-23 15:23:31
@ 功能: 获取app信息
*/
const gainAppContent = () =>{
	let sendInfo = {
		id:props.pickAppInfo.signCodeStr
	}
	gainAppEditPsge(sendInfo)
		.then((data)=>{
			// console.log("获取app信息---》",data)	
			menusTree.value = data.data.menuTree
			appCont.appKey = data.data.appKey;	
			appCont.appName = data.data.appName;	
			appCont.appSvg = data.data.appSvg;	
			appCont.state = data.data.state;	
			appCont.uuid = data.data.uuid;
			let isIn = true;
			data.data.menuTree.forEach((item)=>{
				if(item.isLock == 1 && item.isMain == 1){
					pickAppMenu.value = item;
					isIn = false;
					switchPAge.value = 1
				}
			})
			if(isIn){
				pickAppMenu.value = data.data.menuTree[0];
				if (pickAppMenu.value.type == 2){
					switchPAge.value = 2
				}
			}
		})
}
watch(()=>props.runIsOpen,(val:boolean)=>{
	if(val){
		gainAppContent()
	}
})
/**
@ 作者: 秦东
@ 时间: 2024-05-30 15:17:29
@ 功能: 退出应用
*/
const closeRunApp = () => {
	emits("update:runIsOpen",false)
	emits("refreshPage")
}
/**
@ 作者: 秦东
@ 时间: 2024-05-30 15:32:05
@ 功能: 打开页面
*/
const openAppPage = (val:appMenuTreeInfo) => {
	// console.log("打开页面---->",val.type,switchPAge.value)
	if(val.type!=1){
		if(val.isLock==1){
			switchPAge.value = 1
		}else{
			switchPAge.value = 2
		}
		pickAppMenu.value = val
	}
	// console.log("打开页面--2-->",val.type,switchPAge.value)
	
}
</script>
<template>
	<div class="drawerClass">
		<el-drawer  v-model="props.runIsOpen" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
			<div class="common-layout">
				<el-container>
					<el-header  class="headerBox">
						<div>
							<el-space wrap>
								<el-avatar shape="square" :size="25" :src="appCont.appSvg" />
								<el-text>{{ appCont.appName }}</el-text>
							</el-space>
						</div>
						<div>
							<el-dropdown>
								<el-avatar shape="square" :size="25" :src="userStore.avatar" />
								<template #dropdown>
									<el-dropdown-item @click="editMenuName(data)">
										<table class="userTabel">
											<tr>
												<td rowspan="2"><el-avatar shape="square" :size="55" :src="userStore.avatar" /></td>
												<td>{{ userStore.nickname }}({{ userStore.userInfoCont.number }})</td>
											</tr>
											<tr>
												<td>{{ userStore.userInfoCont.companyname }}/{{ userStore.userInfoCont.departmentname }}</td>
											</tr>
										</table>
									</el-dropdown-item>
									<el-dropdown-item @click="closeRunApp()" divided>
										<i class="fa fa-sign-out"></i>
										<el-text class="mx-1" type="danger">退出</el-text>
									</el-dropdown-item>
								</template>
							</el-dropdown>
						</div>
					</el-header>
					<el-container>
						<el-aside  class="asideBox">
							<el-row>
								<el-col :span="24" class="asideBoxSearch">
									<el-tree-select
										v-model="pickAppMenuSel"
										:data="menusTree"
										:render-after-expand="false"
										:suffix-icon="Search"
										clearable
									/>
								</el-col>
							</el-row>
							<el-tree
								:data="menusTree"
								default-expand-all
								node-key="id"
								:allow-drop="allowDrop"
								:expand-on-click-node="true"
								@node-drag-start="startDrop"
							>
								<template #default="{ node, data }">
									<div class="appMenuTitle" @click="openAppPage(data)">
										<el-space wrap>
											<svg-icon  prefix="icon" :icon-class="data.svg"  />
											<el-tooltip :content="node.label" placement="top" effect="dark">
												<el-text class="w-120px mb-2" truncated >{{node.label}}</el-text>
											</el-tooltip>
										</el-space>
									</div>
								</template>
							</el-tree>
						</el-aside>
						<el-main  class="mainBox">	
							<RegularPage v-if="switchPAge==1" :pick-app-menu="pickAppMenu" :drawer-with="props.drawerWith" />
							<RunAppForm v-else  :pick-app-menu="pickAppMenu" :drawer-with="props.drawerWith" />
						</el-main>
					</el-container>
				</el-container>
			</div>
		</el-drawer >
	</div>
</template>
<style  lang='scss' scoped>
.common-layout{
	.el-header{
		padding-left:10px;
		padding-right:10px;
	}
	.headerBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F1F2F3;
		:deep(.el-tabs__nav-wrap::after) {
			position: static !important;
		}
		:deep(.el-tabs__header){
			margin:0 0 1px 0;
		}
		:deep .el-card__body{
			padding: 0px 0;
		}
	}
	.asideBox{
		width:250px;
		
		border-right: 1px solid #F1F2F3;
		height: calc(100vh - 40px);
		.asideBoxSearch{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 10px;
			
		}
		.scroBox{
			height: calc(100vh - 95px);
			.el-menu{
				border-right: 0px;
			}
			li{
				padding-left:10px;
				padding-right:10px;
			}
			.menuBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.textCenter{
					display: flex;
					align-items: center;
				}
			}
			.el-menu-item{
				height:40px;
			}
			.el-menu-item.is-active {
				color: var(--el-menu-active-color);
				background-color: #e4e4e4e4;
			}
			.el-menu-item:hover{
				background-color: #f1f1f1f1!important;
			}
		}
	}
	.el-main {
		padding: 10px;
	}
	.mainBox{
		background-color: #F1F2F3;
		padding:0px;
		.scroBox{
			height: calc(100vh - 40px);
		}
	}
}
.userTabel{
	width:200px;
	td {
		padding: 0px 5px;
	}
	
}
</style>