79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
|
<section class="introPage">
|
|
<ai-detail list>
|
|
<ai-title slot="title" title="引导页配置" isShowBottomBorder>
|
|
<template #rightBtn>
|
|
<el-row type="flex">
|
|
<component-lib @select="handleAddComp"/>
|
|
<el-button type="text" @click="submit">保存</el-button>
|
|
<el-button type="text" @click="">取消</el-button>
|
|
</el-row>
|
|
</template>
|
|
</ai-title>
|
|
<template #content>
|
|
<ai-drag v-for="comp in configs" :key="comp.value" :w="comp.width" :h="comp.height" parent>
|
|
<comp-render :ops="comp"/>
|
|
</ai-drag>
|
|
<div v-if="!hasConfigs" class="empty">编辑区域</div>
|
|
</template>
|
|
</ai-detail>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import AiDrag from "../../components/AiDrag";
|
|
import ComponentLib from "./tools/componentLib";
|
|
import AiEditBtn from "../../components/AiEditBtn";
|
|
import CompRender from "./tools/compRender";
|
|
|
|
export default {
|
|
name: "introPage",
|
|
components: {CompRender, AiEditBtn, ComponentLib, AiDrag},
|
|
props: {
|
|
instance: Function,
|
|
dict: {default: () => ({})}
|
|
},
|
|
computed: {
|
|
hasConfigs: v => v.configs?.length > 0
|
|
},
|
|
data() {
|
|
return {
|
|
form: {},
|
|
configs: []
|
|
}
|
|
},
|
|
methods: {
|
|
handleAddComp(comp) {
|
|
console.log(comp)
|
|
this.configs.push({...comp})
|
|
},
|
|
submit() {
|
|
|
|
}
|
|
},
|
|
created() {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.introPage {
|
|
height: 100%;
|
|
|
|
.empty {
|
|
width: 100%;
|
|
min-height: calc(100vh - 180px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 48px;
|
|
color: #999;
|
|
border: 1px dashed #ddd;
|
|
}
|
|
|
|
::v-deep.ai-detail__content--wrapper {
|
|
min-height: 100%;
|
|
}
|
|
}
|
|
</style>
|