<!--
|
* @Description: 表单项布局控件
|
* 千万不要在template下面的第一行加注释，因为这里拖动的第一个元素
|
-->
|
|
<template>
|
<Col v-bind="colPropsComputed">
|
<template v-if="['Grid'].includes(schema.component)">
|
<div
|
class="grid-box"
|
:class="{ active: schema.key === currentItem.key }"
|
@click.stop="handleSetSelectItem(schema)"
|
>
|
<Row class="grid-row" v-bind="schema.componentProps">
|
<Col
|
class="grid-col"
|
v-for="(colItem, index) in schema.columns"
|
:key="index"
|
:span="colItem.span"
|
>
|
<draggable
|
class="list-main draggable-box"
|
:component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
|
v-bind="{
|
group: 'form-draggable',
|
ghostClass: 'moving',
|
animation: 180,
|
handle: '.drag-move',
|
}"
|
item-key="key"
|
v-model="colItem.children"
|
@start="$emit('dragStart', $event, colItem.children)"
|
@add="$emit('handleColAdd', $event, colItem.children)"
|
>
|
<template #item="{ element }">
|
<LayoutItem
|
class="drag-move"
|
:schema="element"
|
:current-item="currentItem"
|
@handle-copy="$emit('handle-copy')"
|
@handle-delete="$emit('handle-delete')"
|
/>
|
</template>
|
</draggable>
|
</Col>
|
</Row>
|
<FormNodeOperate :schema="schema" :currentItem="currentItem" />
|
</div>
|
</template>
|
<FormNode
|
v-else
|
:key="schema.key"
|
:schema="schema"
|
:current-item="currentItem"
|
@handle-copy="$emit('handle-copy')"
|
@handle-delete="$emit('handle-delete')"
|
/>
|
</Col>
|
</template>
|
<script lang="ts">
|
import { computed, defineComponent, PropType, reactive, toRefs } from 'vue';
|
import draggable from 'vuedraggable';
|
import FormNode from './FormNode.vue';
|
import FormNodeOperate from './FormNodeOperate.vue';
|
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
import { IVFormComponent } from '../../../typings/v-form-component';
|
import { Row, Col } from 'ant-design-vue';
|
|
export default defineComponent({
|
name: 'LayoutItem',
|
components: {
|
FormNode,
|
FormNodeOperate,
|
draggable,
|
Row,
|
Col,
|
},
|
props: {
|
schema: {
|
type: Object as PropType<IVFormComponent>,
|
required: true,
|
},
|
currentItem: {
|
type: Object,
|
required: true,
|
},
|
},
|
emits: ['dragStart', 'handleColAdd', 'handle-copy', 'handle-delete'],
|
setup(props) {
|
const {
|
formDesignMethods: { handleSetSelectItem },
|
formConfig,
|
} = useFormDesignState();
|
const state = reactive({});
|
const colPropsComputed = computed(() => {
|
const { colProps = {} } = props.schema;
|
return colProps;
|
});
|
|
const list1 = computed(() => props.schema.columns);
|
|
// 计算布局元素，水平模式下为ACol，非水平模式下为div
|
const layoutTag = computed(() => {
|
return formConfig.value.layout === 'horizontal' ? 'Col' : 'div';
|
});
|
|
return {
|
...toRefs(state),
|
colPropsComputed,
|
handleSetSelectItem,
|
layoutTag,
|
list1,
|
};
|
},
|
});
|
</script>
|
<style lang="less">
|
@import url('../styles/variable.less');
|
|
.layout-width {
|
width: 100%;
|
}
|
|
.hidden-item {
|
background-color: rgb(240 191 195);
|
}
|
</style>
|
