|
|
|
|
<!--
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-18 14:08:56
|
|
|
|
|
@ 备注: 设置自建应用
|
|
|
|
|
-->
|
|
|
|
|
<script lang='ts' setup>
|
|
|
|
|
import { Search } from '@element-plus/icons-vue'
|
|
|
|
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
|
|
|
|
import AppMenus from "@/views/sysworkflow/lowcodepage/appPage/appMenus.vue"
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
drawerWith:{
|
|
|
|
|
type:Number,
|
|
|
|
|
default:0
|
|
|
|
|
},
|
|
|
|
|
formKey:{
|
|
|
|
|
type:String,
|
|
|
|
|
default:""
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
const squareUrl = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
|
|
|
|
|
const drawerOpenOrClose = ref(true)
|
|
|
|
|
const tabsActive = ref("1")
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 15:47:12
|
|
|
|
|
@ 功能: 选择选项
|
|
|
|
|
*/
|
|
|
|
|
const handleClick = () =>{}
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<div class="drawerClass">
|
|
|
|
|
<el-drawer v-model="drawerOpenOrClose" 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="squareUrl" />
|
|
|
|
|
<el-text>未命名应用</el-text>
|
|
|
|
|
<el-tag type="success">已启用</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>访问</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>
|
|
|
|
|
<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" />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</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>
|
