|
|
|
@ -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' |
|
|
|
@ -12,7 +12,7 @@ import LayoutItem from '../components/LayoutItem.vue'
|
|
|
|
|
|
|
|
|
|
const emit = defineEmits(['handleSetSelectItem']) |
|
|
|
|
|
|
|
|
|
const Draggable = draggable |
|
|
|
|
const Draggable = draggable |
|
|
|
|
|
|
|
|
|
const { formConfig } = 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> |
|
|
|
@ -80,72 +67,74 @@ const layoutTag = computed(() => {
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
@import url('../styles/variable.less'); |
|
|
|
|
@import url('../styles/drag.less'); |
|
|
|
|
|
|
|
|
|
.v-form-container { |
|
|
|
|
// 内联布局样式 |
|
|
|
|
.ant-form-inline { |
|
|
|
|
.list-main { |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
align-content: flex-start; |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
|
|
.layout-width { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
@import url('../styles/variable.less'); |
|
|
|
|
@import url('../styles/drag.less'); |
|
|
|
|
|
|
|
|
|
.v-form-container { |
|
|
|
|
|
|
|
|
|
.ant-form-item-control-wrapper { |
|
|
|
|
min-width: 175px !important; |
|
|
|
|
// 内联布局样式 |
|
|
|
|
.ant-form-inline { |
|
|
|
|
.list-main { |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
align-content: flex-start; |
|
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
|
|
.layout-width { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.ant-form-item-control-wrapper { |
|
|
|
|
min-width: 175px !important; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.form-panel { |
|
|
|
|
position: relative; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
.empty-text { |
|
|
|
|
position: absolute; |
|
|
|
|
inset: -10% 0 0; |
|
|
|
|
z-index: 100; |
|
|
|
|
height: 150px; |
|
|
|
|
margin: auto; |
|
|
|
|
color: #aaa; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.form-panel { |
|
|
|
|
position: relative; |
|
|
|
|
height: 100%; |
|
|
|
|
|
|
|
|
|
.empty-text { |
|
|
|
|
position: absolute; |
|
|
|
|
inset: -10% 0 0; |
|
|
|
|
z-index: 100; |
|
|
|
|
height: 150px; |
|
|
|
|
margin: auto; |
|
|
|
|
color: #aaa; |
|
|
|
|
.draggable-box { |
|
|
|
|
height: calc(100vh - 200px); |
|
|
|
|
// width: 100%; |
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
|
|
.drag-move { |
|
|
|
|
min-height: 62px; |
|
|
|
|
cursor: move; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.draggable-box { |
|
|
|
|
height: calc(100vh - 200px); |
|
|
|
|
// width: 100%; |
|
|
|
|
overflow: auto; |
|
|
|
|
.list-main { |
|
|
|
|
|
|
|
|
|
// 列表动画 |
|
|
|
|
.list-enter-active { |
|
|
|
|
transition: all 0.5s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.drag-move { |
|
|
|
|
min-height: 62px; |
|
|
|
|
cursor: move; |
|
|
|
|
.list-leave-active { |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list-main { |
|
|
|
|
// 列表动画 |
|
|
|
|
.list-enter-active { |
|
|
|
|
transition: all 0.5s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list-leave-active { |
|
|
|
|
transition: all 0.3s; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list-enter, |
|
|
|
|
.list-leave-to { |
|
|
|
|
opacity: 0; |
|
|
|
|
transform: translateX(-100px); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list-enter { |
|
|
|
|
height: 30px; |
|
|
|
|
} |
|
|
|
|
.list-enter, |
|
|
|
|
.list-leave-to { |
|
|
|
|
opacity: 0; |
|
|
|
|
transform: translateX(-100px); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list-enter { |
|
|
|
|
height: 30px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|