You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
273 lines
6.5 KiB
273 lines
6.5 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 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>
|
|
|