5 changed files with 238 additions and 9 deletions
@ -0,0 +1,176 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-18 09:08:21 |
||||
|
@ 备注: 展开应用表单 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { Edit,Picture as IconPicture } from '@element-plus/icons-vue' |
||||
|
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type" |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
appCont:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
formKey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
menusInfo:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
drawerWith:{ |
||||
|
type:Number, |
||||
|
default:0 |
||||
|
}, |
||||
|
groupKey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
} |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-18 09:32:23 |
||||
|
@ 功能: 监听菜单传递数据变化 |
||||
|
*/ |
||||
|
watch(()=>props.menusInfo,(val:appMenuTreeInfo)=>{ |
||||
|
console.log("监听菜单传递数据变化",val) |
||||
|
},{ |
||||
|
deep:true |
||||
|
}) |
||||
|
const activePage = ref(1) //默认选择的页面 |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-18 10:13:15 |
||||
|
@ 功能: |
||||
|
*/ |
||||
|
const handleAppPageClick = () =>{ |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<div> |
||||
|
<el-row v-if="props.menusInfo"> |
||||
|
<el-col :span="24" class="pageBox pageHeader"> |
||||
|
<el-text class="wordFont">{{ props.menusInfo.label }}</el-text> |
||||
|
<el-button type="primary" :icon="Edit">编辑App页面</el-button> |
||||
|
</el-col> |
||||
|
<el-col :span="24" class="pageBox baiDiSe"> |
||||
|
<el-tabs v-model="activePage" class="demo-tabs" @tab-click="handleAppPageClick"> |
||||
|
<el-tab-pane label="列表预览" :name="1" /> |
||||
|
<el-tab-pane label="表单预览" :name="2" /> |
||||
|
<el-tab-pane label="流程图" :name="3" /> |
||||
|
</el-tabs> |
||||
|
</el-col> |
||||
|
<el-col :span="24" > |
||||
|
<el-scrollbar class="pageBox suojing"> |
||||
|
|
||||
|
appCont：{{ props.appCont }} <br> |
||||
|
formKey：{{ props.formKey }} <br> |
||||
|
menusInfo{{ props.menusInfo }} <br> |
||||
|
groupKey：{{ props.groupKey }} <br> |
||||
|
groupKey：{{ props.groupKey }} <br> |
||||
|
|
||||
|
</el-scrollbar> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row v-else> |
||||
|
<el-col :span="24" class="pageBox"> |
||||
|
<el-card class="tispMsg" shadow="always"> |
||||
|
|
||||
|
欢迎使用 {{ props.appCont.appName }}<br> |
||||
|
<div class="demo-image__error"> |
||||
|
<el-image :src="props.appCont.appSvg" fit="fit"> |
||||
|
<template #error> |
||||
|
<div class="image-slot"> |
||||
|
<el-icon><icon-picture /></el-icon> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-image> |
||||
|
</div> |
||||
|
{{ props.appCont }} |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.pageBox{ |
||||
|
padding: 0 15px; |
||||
|
.wordFont{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
.tispMsg{ |
||||
|
width: 100%; |
||||
|
margin: 20px 0 0 0; |
||||
|
height: calc(100vh - 80px); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
justify-content: center; |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
.pageHeader{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
background-color: #FFFFFF; |
||||
|
padding:15px 15px 5px 15px; |
||||
|
|
||||
|
} |
||||
|
.baiDiSe{ |
||||
|
background-color: #FFFFFF; |
||||
|
border-bottom : 3px solid #dedfe0; |
||||
|
:deep .el-tabs__header{ |
||||
|
margin:0px 0 -2px 0; |
||||
|
} |
||||
|
} |
||||
|
.suojing{ |
||||
|
height: calc(100vh - 135px); |
||||
|
} |
||||
|
.demo-image__error{ |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
.demo-image__error .block { |
||||
|
padding: 30px 0; |
||||
|
text-align: center; |
||||
|
border-right: solid 1px var(--el-border-color); |
||||
|
display: inline-block; |
||||
|
width: 49%; |
||||
|
box-sizing: border-box; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
.demo-image__error .demonstration { |
||||
|
display: block; |
||||
|
color: var(--el-text-color-secondary); |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.demo-image__error .el-image { |
||||
|
padding: 0 5px; |
||||
|
max-width: 300px; |
||||
|
max-height: 200px; |
||||
|
width: 100%; |
||||
|
height: 200px; |
||||
|
} |
||||
|
|
||||
|
.demo-image__error .image-slot { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: var(--el-fill-color-light); |
||||
|
color: var(--el-text-color-secondary); |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
.demo-image__error .image-slot .el-icon { |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue