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.
122 lines
2.9 KiB
122 lines
2.9 KiB
2 years ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-05-07 11:26:40
|
||
|
|
@ 备注: 编辑表单
|
||
|
|
-->
|
||
|
|
<script lang='ts' setup>
|
||
|
|
import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue"
|
||
|
|
import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue"
|
||
|
|
import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue"
|
||
|
|
const props = defineProps({
|
||
|
|
appCont:{
|
||
|
|
type:Object,
|
||
|
|
default(){
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
isShow:{
|
||
|
|
type: Boolean,
|
||
|
|
default: false,
|
||
|
|
},
|
||
|
|
drawerWith:{
|
||
|
|
type:Number,
|
||
|
|
default:0
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const emits = defineEmits(["update:isShow"]);
|
||
|
|
const tabsActive = ref(1)
|
||
|
|
|
||
|
|
/**
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 2024-05-07 15:11:24
|
||
|
|
@ 功能: 关闭页面
|
||
|
|
*/
|
||
|
|
const closeSavePageForm = () =>{
|
||
|
|
emits("update:isShow",false)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<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 class="headLeft">
|
||
|
|
<el-space wrap>
|
||
|
|
<el-avatar shape="square" :size="25" :src="props.appCont.appSvg" />
|
||
|
|
<el-tooltip
|
||
|
|
class="box-item"
|
||
|
|
effect="dark"
|
||
|
|
:content="props.appCont.appName"
|
||
|
|
placement="bottom"
|
||
|
|
>
|
||
|
|
<el-text class="w-150px mb-2" truncated>{{ props.appCont.appName }}</el-text>
|
||
|
|
</el-tooltip>
|
||
|
|
<i class="fa fa-angle-right"></i>
|
||
|
|
<el-tooltip
|
||
|
|
class="box-item"
|
||
|
|
effect="dark"
|
||
|
|
:content="props.appCont.appName"
|
||
|
|
placement="bottom"
|
||
|
|
>
|
||
|
|
<el-text class="w-150px mb-2" truncated>未命名表单</el-text>
|
||
|
|
</el-tooltip>
|
||
|
|
</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-tabs>
|
||
|
|
</div>
|
||
|
|
<div class="headRight">
|
||
|
|
<el-button type="danger" size="small" @click="closeSavePageForm" >关闭</el-button>
|
||
|
|
</div>
|
||
|
|
</el-header>
|
||
|
|
<el-container>
|
||
|
|
<PageForm v-if="tabsActive==1" />
|
||
|
|
<PageFlow v-if="tabsActive==2" />
|
||
|
|
<PageList v-if="tabsActive==3" />
|
||
|
|
</el-container>
|
||
|
|
</el-container>
|
||
|
|
</div>
|
||
|
|
</el-drawer>
|
||
|
|
</template>
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
.headerBox{
|
||
|
|
padding: 0px;
|
||
|
|
border-bottom: 2px solid #ECECEC;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.headLeft{
|
||
|
|
width: 300px;
|
||
|
|
padding-left: 5px;
|
||
|
|
span{
|
||
|
|
max-width:100px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.headRight{
|
||
|
|
width: 300px;
|
||
|
|
text-align: right;
|
||
|
|
padding-right: 5px;
|
||
|
|
}
|
||
|
|
.tabsMain{
|
||
|
|
::v-deep .el-tabs__header{
|
||
|
|
margin: 0px;
|
||
|
|
}
|
||
|
|
::v-deep .el-tabs__nav-scroll{
|
||
|
|
margin: 0 auto!important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-drawer__body{
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|