|
|
|
|
<!--
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-18 14:08:56
|
|
|
|
|
@ 备注: 设置自建应用
|
|
|
|
|
-->
|
|
|
|
|
<script lang='ts' setup>
|
|
|
|
|
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type"
|
|
|
|
|
import { gainAppEditPsge } from '@/api/DesignForm/requestapi'
|
|
|
|
|
|
|
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
|
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
|
|
|
|
import AppMenus from "@/views/sysworkflow/lowcodepage/appPage/appMenus.vue"
|
|
|
|
|
import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue"
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
drawerWith:{
|
|
|
|
|
type:Number,
|
|
|
|
|
default:0
|
|
|
|
|
},
|
|
|
|
|
formKey:{
|
|
|
|
|
type:String,
|
|
|
|
|
default:""
|
|
|
|
|
},
|
|
|
|
|
isShow:{
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const emits = defineEmits(["update:isShow","update:svgName","refreshPage"]);
|
|
|
|
|
const squareUrl = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
|
|
|
|
|
const drawerOpenOrClose = ref(false)
|
|
|
|
|
const tabsActive = ref("1")
|
|
|
|
|
const menusTree = ref<appMenuTreeInfo[]>([])
|
|
|
|
|
const appCont = reactive<appSetInfo>({
|
|
|
|
|
appKey:"1",
|
|
|
|
|
appName:"未知应用",
|
|
|
|
|
appSvg:"",
|
|
|
|
|
state:1,
|
|
|
|
|
uuid:"1"
|
|
|
|
|
})
|
|
|
|
|
const menuParentKey = ref<string>("")
|
|
|
|
|
const menuGroupShow = ref(false) //添加菜单分组
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 15:47:12
|
|
|
|
|
@ 功能: 选择选项
|
|
|
|
|
*/
|
|
|
|
|
const handleClick = () =>{}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-23 09:56:19
|
|
|
|
|
@ 功能: 关闭
|
|
|
|
|
*/
|
|
|
|
|
const closeAppDraw = () =>{
|
|
|
|
|
emits("update:isShow",false)
|
|
|
|
|
emits("refreshPage")
|
|
|
|
|
}
|
|
|
|
|
onMounted(() =>{
|
|
|
|
|
// gainAppContent()
|
|
|
|
|
})
|
|
|
|
|
watch(()=>props.isShow,(val:boolean)=>{
|
|
|
|
|
if(val){
|
|
|
|
|
gainAppContent()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-23 15:23:31
|
|
|
|
|
@ 功能: 获取app信息
|
|
|
|
|
*/
|
|
|
|
|
const gainAppContent = () =>{
|
|
|
|
|
let sendInfo = {
|
|
|
|
|
id:props.formKey.toString()
|
|
|
|
|
}
|
|
|
|
|
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;
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-23 16:57:39
|
|
|
|
|
@ 功能: 添加菜单分组
|
|
|
|
|
*/
|
|
|
|
|
const addMenu = (key?:string) => {
|
|
|
|
|
if(key){
|
|
|
|
|
menuParentKey.value = key;
|
|
|
|
|
}else{
|
|
|
|
|
menuParentKey.value = "";
|
|
|
|
|
}
|
|
|
|
|
menuGroupShow.value = true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<div class="drawerClass">
|
|
|
|
|
<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="appCont" @updateMenu="gainAppContent" />
|
|
|
|
|
<el-drawer v-model="props.isShow" 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-tag v-if="appCont.state==1" type="success">已启用</el-tag>
|
|
|
|
|
<el-tag v-else type="danger">已禁用</el-tag>
|
|
|
|
|
</el-space>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-tabs v-model="tabsActive" @tab-click="handleClick" :stretch="true" class="tabsMain">
|
|
|
|
|
<el-tab-pane label="① 页面管理" :name="1">
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="② 集成&自动化" :name="2">
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="③ 应用设置" :name="3">
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane label="④ 应用发布" :name="4">
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-button plain size="small">访问</el-button>
|
|
|
|
|
<el-button type="danger" size="small" @click="closeAppDraw">关闭</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-header>
|
|
|
|
|
<el-container>
|
|
|
|
|
<el-aside class="asideBox">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24" class="asideBoxSearch">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="input2"
|
|
|
|
|
style="width: 180px"
|
|
|
|
|
placeholder="搜索"
|
|
|
|
|
:suffix-icon="Search"
|
|
|
|
|
/>
|
|
|
|
|
<el-dropdown>
|
|
|
|
|
<el-button type="primary" class="fa fa-plus" />
|
|
|
|
|
<template #dropdown>
|
|
|
|
|
<el-dropdown-menu>
|
|
|
|
|
<el-dropdown-item >
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-space wrap>
|
|
|
|
|
<svg-icon style="color: #79bbff;" prefix="icon" icon-class="puTongBiaoDan" />
|
|
|
|
|
新建普通表单
|
|
|
|
|
</el-space>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24" style="padding-left:20px; font-size:12px;">
|
|
|
|
|
数据收集、事件记录
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item >
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-space wrap>
|
|
|
|
|
<svg-icon style="color: #eebe77;" prefix="icon" icon-class="liuChengBiaoDan" />
|
|
|
|
|
新建流程表单
|
|
|
|
|
</el-space>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24" style="padding-left:20px; font-size:12px;">
|
|
|
|
|
任务协同、业务审批
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item divided @click="addMenu">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-space wrap>
|
|
|
|
|
<svg-icon style="color: #337ecc;" prefix="icon" icon-class="fenZhu" />
|
|
|
|
|
新建分组
|
|
|
|
|
</el-space>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :span="24" style="padding-left:20px; font-size:12px;">
|
|
|
|
|
应用项目管理
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-scrollbar class="scroBox">
|
|
|
|
|
<!-- <el-menu
|
|
|
|
|
default-active="1"
|
|
|
|
|
@open="handleOpen"
|
|
|
|
|
@close="handleClose"
|
|
|
|
|
>
|
|
|
|
|
<el-menu-item index="1" class="menuBox">
|
|
|
|
|
<div class="textCenter">
|
|
|
|
|
<el-space wrap>
|
|
|
|
|
<svg-icon prefix="icon" icon-class="daiWoCuLi" />
|
|
|
|
|
待我处理
|
|
|
|
|
</el-space>
|
|
|
|
|
</div>
|
|
|
|
|
<div>2</div>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item index="2" class="menuBox">
|
|
|
|
|
<div class="textCenter">
|
|
|
|
|
<el-space wrap>
|
|
|
|
|
<svg-icon prefix="icon" icon-class="woYiChuLi" />
|
|
|
|
|
我已处理
|
|
|
|
|
</el-space>
|
|
|
|
|
</div>
|
|
|
|
|
<div>2</div>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item index="3" class="menuBox">
|
|
|
|
|
<div class="textCenter">
|
|
|
|
|
<el-space wrap>
|
|
|
|
|
<svg-icon prefix="icon" icon-class="chaoSongWoDe" />
|
|
|
|
|
抄送我的
|
|
|
|
|
</el-space>
|
|
|
|
|
</div>
|
|
|
|
|
<div>2</div>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
<el-menu-item index="4" class="menuBox">
|
|
|
|
|
<div class="textCenter">
|
|
|
|
|
<el-space wrap>
|
|
|
|
|
<svg-icon prefix="icon" icon-class="woChuangJianDe" />
|
|
|
|
|
我创建的
|
|
|
|
|
</el-space>
|
|
|
|
|
</div>
|
|
|
|
|
<div>2</div>
|
|
|
|
|
</el-menu-item>
|
|
|
|
|
</el-menu> -->
|
|
|
|
|
|
|
|
|
|
<AppMenus :form-Key="formKey" :menus-tree="menusTree" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
</el-aside>
|
|
|
|
|
<el-main class="mainBox">
|
|
|
|
|
<el-scrollbar class="scroBox">
|
|
|
|
|
<svg-icon icon-class="0213-lmp" />
|
|
|
|
|
</el-scrollbar>
|
|
|
|
|
</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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.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;
|
|
|
|
|
|
|
|
|
|
.scroBox{
|
|
|
|
|
height: calc(100vh - 60px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
