|
|
|
@ -4,7 +4,7 @@
|
|
|
|
|
--> |
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import draggable from 'vuedraggable' |
|
|
|
|
import { computed, defineComponent } from 'vue' |
|
|
|
|
import { computed } from 'vue' |
|
|
|
|
import { cloneDeep } from 'lodash-es' |
|
|
|
|
import { Empty, Form } from 'ant-design-vue' |
|
|
|
|
import { useFormDesignState } from '../../../hooks/useFormDesignState' |
|
|
|
@ -46,30 +46,17 @@ const layoutTag = computed(() => {
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<div class="v-form-container form-panel"> |
|
|
|
|
<Empty |
|
|
|
|
v-show="formConfig.schemas.length === 0" |
|
|
|
|
class="empty-text" |
|
|
|
|
description="从左侧选择控件添加" |
|
|
|
|
/> |
|
|
|
|
<Empty v-show="formConfig.schemas.length === 0" class="empty-text" description="从左侧选择控件添加" /> |
|
|
|
|
<Form v-bind="formConfig"> |
|
|
|
|
<div class="draggable-box"> |
|
|
|
|
<Draggable |
|
|
|
|
v-model="formConfig.schemas" |
|
|
|
|
class="list-main ant-row" |
|
|
|
|
group="form-draggable" |
|
|
|
|
:component-data="{ name: 'list', tag: 'div', type: 'transition-group' }" |
|
|
|
|
ghost-class="moving" |
|
|
|
|
:animation="180" |
|
|
|
|
handle=".drag-move" |
|
|
|
|
item-key="key" |
|
|
|
|
@add="addItem" |
|
|
|
|
@start="handleDragStart" |
|
|
|
|
v-model="formConfig.schemas" class="list-main ant-row" group="form-draggable" |
|
|
|
|
:component-data="{ name: 'list', tag: 'div', type: 'transition-group' }" ghost-class="moving" :animation="180" |
|
|
|
|
handle=".drag-move" item-key="key" @add="addItem" @start="handleDragStart" |
|
|
|
|
> |
|
|
|
|
<template #item="{ element }"> |
|
|
|
|
<LayoutItem |
|
|
|
|
class="drag-move" |
|
|
|
|
:schema="element" |
|
|
|
|
:data="formConfig" |
|
|
|
|
class="drag-move" :schema="element" :data="formConfig" |
|
|
|
|
:current-item="formConfig.currentItem || {}" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
@ -84,6 +71,7 @@ const layoutTag = computed(() => {
|
|
|
|
|
@import url('../styles/drag.less'); |
|
|
|
|
|
|
|
|
|
.v-form-container { |
|
|
|
|
|
|
|
|
|
// 内联布局样式 |
|
|
|
|
.ant-form-inline { |
|
|
|
|
.list-main { |
|
|
|
@ -127,6 +115,7 @@ const layoutTag = computed(() => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list-main { |
|
|
|
|
|
|
|
|
|
// 列表动画 |
|
|
|
|
.list-enter-active { |
|
|
|
|
transition: all 0.5s; |
|
|
|
|