|  |  |  | @ -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; | 
			
		
	
	
		
			
				
					|  |  |  | 
 |