自定义应用运行页面

src/types/components.d.ts

@@ -34,7 +34,6 @@ declare module '@vue/runtime-core' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
@@ -117,13 +116,8 @@ declare module '@vue/runtime-core' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
-    IEpDelete: typeof import('~icons/ep/delete')['default']
     IEpEdit: typeof import('~icons/ep/edit')['default']
     IEpMessageBox: typeof import('~icons/ep/message-box')['default']
-    IEpOperation: typeof import('~icons/ep/operation')['default']
-    IEpPlus: typeof import('~icons/ep/plus')['default']
-    IEpRefresh: typeof import('~icons/ep/refresh')['default']
-    IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']

src/views/sysworkflow/lowcodepage/appFormList.vue

@@ -250,6 +250,11 @@ const fanyePage = (val: number) =>{
 	pageApp.value = val
 	getFormAppList()
 }
+
+
+const pickAppInfo = ref<customerFormCont>()
+const runIsOpen = ref(false)
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-05-29 16:13:16
@@ -258,6 +263,7 @@ const fanyePage = (val: number) =>{
 const lookAppList = (val:any) => {
 	let appPower = 0;
 	emits('getRongQiAttr')
+	pickAppInfo.value = val
 	appJwtPower({id:val.signCodeStr,types:1})
 		.then(({data})=>{
 			console.log("打开应用------>data:",data)
@@ -273,7 +279,7 @@ const lookAppList = (val:any) => {
 		})
 }
 
-const runIsOpen = ref(false)
+
 
 
 </script>
@@ -333,7 +339,7 @@ const runIsOpen = ref(false)
 		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
 
 		<DesignAPPpage  v-model:is-show="appPageShow" v-model:form-key="appKey"  :group-key="props.groupId" :drawer-with="props.drawerWith"  @refreshPage="getFormAppList" />
-		<RunApplication v-model:run-is-open="runIsOpen" :drawer-with="props.drawerWith" @refreshPage="getFormAppList"/>
+		<RunApplication v-model:run-is-open="runIsOpen" :pick-app-info="pickAppInfo" :drawer-with="props.drawerWith" @refreshPage="getFormAppList"/>
 		<el-drawer
 			v-model="lookPageIsShow"
 			title="列表预览"

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

@@ -4,6 +4,8 @@
 @ 备注: 运行自定义APP
 -->
 <script lang='ts' setup>
+import { appMenuTreeInfo,appSetInfo } from "@/api/date/type"
+import { gainAppEditPsge } from '@/api/DesignForm/requestapi'
 import { useUserStore } from "@/store/modules/user";
 const props = defineProps({
 	drawerWith:{
@@ -13,9 +15,18 @@ const props = defineProps({
 	runIsOpen:{
 		type: Boolean,
 		default: false,
+	},
+	pickAppInfo:{
+		type:Object,
+		default(){
+			return {}
+		}
 	}
 });
 const userStore = useUserStore();
+const emits = defineEmits(["update:runIsOpen","refreshPage"]);
+const menusTree = ref<appMenuTreeInfo[]>([])
+const pickAppMenu = ref("")
 //应用基础配置
 const appCont = reactive<appSetInfo>({
 	appKey:"1",	
@@ -26,7 +37,48 @@ const appCont = reactive<appSetInfo>({
 	describe:""
 })
 
-const emits = defineEmits(["update:runIsOpen","refreshPage"]);
+/**
+@ 作者: 秦东
+@ 时间: 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;
+		})
+}
+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)
+}
 </script>
 <template>
 	<div class="drawerClass">
@@ -42,9 +94,11 @@ const emits = defineEmits(["update:runIsOpen","refreshPage"]);
 							</el-space>
 						</div>
 						<div>
-							<!-- <el-dropdown>
+							<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>
@@ -55,29 +109,51 @@ const emits = defineEmits(["update:runIsOpen","refreshPage"]);
 												<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> -->
+							</el-dropdown>
-							<el-avatar shape="square" :size="25" :src="userStore.avatar" />
+							<!-- <el-avatar shape="square" :size="25" :src="userStore.avatar" /> -->
 						</div>
 					</el-header>
 					<el-container>
 						<el-aside  class="asideBox">
 							<el-row>
 								<el-col :span="24" class="asideBoxSearch">
-									<el-input
+									<el-tree-select
-										v-model="input2"
+										v-model="pickAppMenu"
-										style="width: 100%"
+										:data="menusTree"
-										placeholder="搜索"
+										:render-after-expand="false"
 										:suffix-icon="Search"
 									/>
 								</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">
 							<el-scrollbar class="scroBox">
-							{{ userStore }}
+							{{ pickAppMenu }}
 							</el-scrollbar>
 						</el-main>
 					</el-container>
@@ -127,7 +203,9 @@ const emits = defineEmits(["update:runIsOpen","refreshPage"]);
 		:deep(.el-tabs__header){
 			margin:0 0 1px 0;
 		}
-		
+		:deep .el-card__body{
+			padding: 0px 0;
+		}
 	}
 	.asideBox{
 		width:250px;
@@ -183,6 +261,10 @@ const emits = defineEmits(["update:runIsOpen","refreshPage"]);
 	}
 }
 .userTabel{
-	width:300px;
+	width:200px;
+	td {
+		padding: 0px 5px;
+	}
+	
 }
 </style>