127 lines
3.9 KiB
Vue
127 lines
3.9 KiB
Vue
<template>
|
|
<el-col class="grid-cell" :class="[customClass]" v-bind="layoutProps" :style="colHeightStyle"
|
|
:key="widget.id" v-show="!widget.options.hidden">
|
|
<template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
|
|
<template v-for="(subWidget, swIdx) in widget.widgetList">
|
|
<template v-if="'container' === subWidget.category">
|
|
<component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
|
|
:index-of-parent-list="swIdx" :parent-widget="widget">
|
|
<!-- 递归传递插槽！！！ -->
|
|
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
|
|
<slot :name="slot" v-bind="scope"/>
|
|
</template>
|
|
</component>
|
|
</template>
|
|
<template v-else>
|
|
<component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
|
|
:index-of-parent-list="swIdx" :parent-widget="widget">
|
|
<!-- 递归传递插槽！！！ -->
|
|
<template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
|
|
<slot :name="slot" v-bind="scope"/>
|
|
</template>
|
|
</component>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
<template v-else>
|
|
<el-col>
|
|
<div class="blank-cell"><span class="invisible-content">{{i18nt('render.hint.blankCellContent')}}</span></div>
|
|
</el-col>
|
|
</template>
|
|
</el-col>
|
|
</template>
|
|
|
|
<script>
|
|
import emitter from '@/utils/emitter'
|
|
import i18n from "../../../utils/i18n"
|
|
import refMixin from "../../../components/form-render/refMixin"
|
|
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
|
|
|
|
export default {
|
|
name: "GridColItem",
|
|
componentName: 'ContainerItem',
|
|
mixins: [emitter, i18n, refMixin],
|
|
components: {
|
|
...FieldComponents,
|
|
},
|
|
props: {
|
|
widget: Object,
|
|
parentWidget: Object,
|
|
parentList: Array,
|
|
indexOfParentList: Number,
|
|
|
|
colHeight: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
|
|
},
|
|
inject: ['refList', 'globalModel', 'formConfig', 'previewState'],
|
|
data() {
|
|
return {
|
|
layoutProps: {
|
|
span: this.widget.options.span,
|
|
md: this.widget.options.md || 12,
|
|
sm: this.widget.options.sm || 12,
|
|
xs: this.widget.options.xs || 12,
|
|
offset: this.widget.options.offset || 0,
|
|
push: this.widget.options.push || 0,
|
|
pull: this.widget.options.pull || 0,
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
customClass() {
|
|
return this.widget.options.customClass || ''
|
|
},
|
|
|
|
colHeightStyle() {
|
|
return !!this.colHeight ? {height: this.colHeight + 'px'} : {}
|
|
},
|
|
|
|
},
|
|
created() {
|
|
this.initLayoutProps()
|
|
this.initRefList()
|
|
},
|
|
methods: {
|
|
initLayoutProps() {
|
|
if (!!this.widget.options.responsive) {
|
|
if (!!this.previewState) {
|
|
this.layoutProps.md = undefined
|
|
this.layoutProps.sm = undefined
|
|
this.layoutProps.xs = undefined
|
|
|
|
let lyType = this.formConfig.layoutType
|
|
if (lyType === 'H5') {
|
|
this.layoutProps.span = this.widget.options.xs || 12
|
|
} else if (lyType === 'Pad') {
|
|
this.layoutProps.span = this.widget.options.sm || 12
|
|
} else {
|
|
this.layoutProps.span = this.widget.options.md || 12
|
|
}
|
|
} else {
|
|
this.layoutProps.span = undefined
|
|
}
|
|
} else {
|
|
this.layoutProps.md = undefined
|
|
this.layoutProps.sm = undefined
|
|
this.layoutProps.xs = undefined
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.blank-cell {
|
|
font-style: italic;
|
|
color: #cccccc;
|
|
|
|
span.invisible-content {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|