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.
363 lines
9.6 KiB
363 lines
9.6 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 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"
|
|
import CreateAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/createAppFormPage.vue"
|
|
import OpenAppFormPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue"
|
|
import AppSetUp from "@/views/sysworkflow/lowcodepage/appPage/appSetUp/index.vue"
|
|
import ReleaseApp from '@/views/sysworkflow/lowcodepage/appPage/releaseApp/index.vue'
|
|
|
|
|
|
const props = defineProps({
|
|
drawerWith:{
|
|
type:Number,
|
|
default:0
|
|
},
|
|
formKey:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
isShow:{
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
groupKey:{
|
|
type:String,
|
|
default:""
|
|
},
|
|
pickAppInfo:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
}
|
|
});
|
|
const emits = defineEmits(["update:isShow","update:svgName","refreshPage","accessapp"]);
|
|
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",
|
|
describe:""
|
|
})
|
|
const menuParentKey = ref<string>("")
|
|
const menuGroupShow = ref(false) //添加菜单分组
|
|
const appPageKey = ref<string>("") //自定义App表单Id
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-19 15:47:12
|
|
@ 功能: 选择选项
|
|
*/
|
|
const handleClick = () =>{}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-04-23 09:56:19
|
|
@ 功能: 关闭
|
|
*/
|
|
const closeAppDraw = () =>{
|
|
emits("refreshPage","formPage1")
|
|
emits("update:isShow",false)
|
|
tabsActive.value = 1
|
|
checkedMenu.value = ""
|
|
appPageKey.value = ""
|
|
props.formKey=""
|
|
isNew.value = false
|
|
}
|
|
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;
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-06 11:09:44
|
|
@ 功能: 创建页面
|
|
*/
|
|
const saveAppFormIsShow = ref(false)
|
|
const isNew = ref(false)
|
|
const addAppPageForm = (key?:string) => {
|
|
saveAppFormIsShow.value = true
|
|
isNew.value = true
|
|
console.log("新建-->")
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-18 09:00:00
|
|
@ 功能: 操作表单页面
|
|
*/
|
|
const checkedMenu = ref<appMenuTreeInfo>("")
|
|
const openAppPageForm = (val:appMenuTreeInfo) => {
|
|
checkedMenu.value = val
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-20 13:27:37
|
|
@ 功能: 编辑app页面
|
|
*/
|
|
const editAppInfo = (id:string) => {
|
|
appPageKey.value = id
|
|
saveAppFormIsShow.value = true
|
|
isNew.value = false
|
|
}
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-05-20 16:20:08
|
|
@ 功能: 重新初始化app
|
|
*/
|
|
const openAppPageInit = ref(null)
|
|
const updataPageInit = () => {
|
|
|
|
openAppPageInit.value.gainAppFormPageInit()
|
|
}
|
|
watch(()=>tabsActive.value,(val:number)=>{
|
|
if(val==1){
|
|
openAppPageInit.value.gainAppFormPageInit()
|
|
}
|
|
})
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-06-28 08:46:12
|
|
@ 功能: 访问前端页面
|
|
*/
|
|
const accessRunApp = () =>{
|
|
closeAppDraw()
|
|
emits("accessapp",props.pickAppInfo)
|
|
}
|
|
</script>
|
|
<template>
|
|
<div class="drawerClass">
|
|
|
|
<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" @click="accessRunApp">访问</el-button>
|
|
<el-button type="danger" size="small" @click="closeAppDraw">关闭</el-button>
|
|
</div>
|
|
</el-header>
|
|
<el-container v-show="tabsActive==1">
|
|
<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 @click="addAppPageForm">
|
|
<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;">
|
|
数据收集、事件记录<br>任务协同、业务审批
|
|
</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">
|
|
|
|
<AppMenus :form-Key="props.formKey" v-model:menus-tree="menusTree" v-model:app-page-key="appPageKey" :group-key="props.groupKey" :app-cont="appCont" :drawer-with="props.drawerWith" @openAppPageForm="openAppPageForm" />
|
|
|
|
<CreateAppFormPage v-if="saveAppFormIsShow" v-model:is-show="saveAppFormIsShow" :is-new="isNew" :drawer-with="props.drawerWith" :form-Key="props.formKey" :app-cont="appCont" :group-key="props.groupKey" :menu-id="props.formKey" v-model:app-page-key="appPageKey" @gainSunAppContent="gainAppContent" @updateInit="updataPageInit" />
|
|
|
|
</el-scrollbar>
|
|
</el-aside>
|
|
<el-main class="mainBox">
|
|
<el-scrollbar class="scroBox">
|
|
<OpenAppFormPage ref="openAppPageInit" :form-Key="props.formKey" :group-key="props.groupKey" :app-cont="appCont" :drawer-with="props.drawerWith" :menus-info="checkedMenu" @editAppInfo="editAppInfo" />
|
|
|
|
</el-scrollbar>
|
|
</el-main>
|
|
</el-container>
|
|
|
|
|
|
|
|
|
|
<el-container v-if="tabsActive==2">
|
|
集成与自动化
|
|
</el-container>
|
|
<el-container v-if="tabsActive==3">
|
|
<AppSetUp :app-cont="appCont" :group-key="props.groupKey" />
|
|
</el-container>
|
|
<el-container v-if="tabsActive==4">
|
|
<ReleaseApp :app-cont="appCont" :group-key="props.groupKey" />
|
|
</el-container>
|
|
</el-container>
|
|
</div>
|
|
<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="appCont" @updateMenu="gainAppContent" />
|
|
</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;
|
|
padding:0px;
|
|
.scroBox{
|
|
height: calc(100vh - 40px);
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|