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