Skip to content

Commit

Permalink
releases 4.1.9
Browse files Browse the repository at this point in the history
  • Loading branch information
@xuliangzhan
xuliangzhan committed Aug 28, 2024
1 parent 05491ba commit d57d246
Show file tree
Hide file tree
Showing 29 changed files with 390 additions and 213 deletions.
13 changes: 11 additions & 2 deletions examples/views/form-design/FormDesignTest.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<p>电脑端</p>
<vxe-button @click="clickEvent">获取JSON</vxe-button>
<VxeFormDesign ref="formDesignRef" :height="400" />
<VxeFormDesign ref="formDesignRef" :height="800" />

<p>电脑端和手机端</p>
<VxeFormDesign :height="400" :widgets="widgetConfigs" showMobile />
Expand All @@ -14,7 +14,7 @@
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ref, nextTick } from 'vue'
import { VxeFormDesignInstance, VxeFormDesignPropTypes, VxeFormViewPropTypes } from '../../../types'
const formDesignRef = ref<VxeFormDesignInstance>()
Expand Down Expand Up @@ -52,4 +52,13 @@ const clickEvent = () => {
console.log(JSON.stringify($formDesign.getConfig()))
}
}
nextTick(() => {
const $formDesign = formDesignRef.value
if ($formDesign) {
$formDesign.loadConfig(
{ formConfig: { title: '', pcVisible: true, pcVertical: true, pcTitleBold: true, pcTitleColon: false, pcTitleAlign: '', pcTitleWidth: '', pcTitleWidthUnit: '', mobileVisible: false, mobileVertical: true, mobileTitleBold: true, mobileTitleColon: false, mobileTitleAlign: '', mobileTitleWidth: '', mobileTitleWidthUnit: '' }, widgetData: [{ id: 100046, field: 'VxeTextarea100046', title: '文本域', name: 'VxeTextarea', required: false, hidden: false, options: { placeholder: '' }, children: [], model: { update: false, value: null } }, { id: 100049, field: 'row100049', title: '一行多列', name: 'row', required: false, hidden: false, options: { colSize: 3, colSpan: '8,8,8' }, children: [{ id: 100183, field: 'VxeInput100183', title: '输入框', name: 'VxeInput', required: false, hidden: false, options: { placeholder: '' }, children: [], model: { update: false, value: null } }, { id: 100193, field: 'VxeNumberInput100193', title: '数字', name: 'VxeNumberInput', required: false, hidden: false, options: { placeholder: '' }, children: [], model: { update: false, value: null } }, { id: 100192, field: '100192', title: '', name: '', required: false, hidden: false, options: {}, children: [], model: { update: false, value: null } }], model: { update: false, value: null } }, { id: 100194, field: 'input100194', title: '输入框', name: 'input', required: false, hidden: false, options: { placeholder: '' }, children: [], model: { update: false, value: null } }, { id: 100186, field: 'subtable100186', title: '子表', name: 'subtable', required: false, hidden: false, options: { showCheckbox: false }, children: [{ id: 100185, field: 'VxeDatePicker100185', title: '日期', name: 'VxeDatePicker', required: false, hidden: false, options: { placeholder: '', defaultValue: { type: '', value: '' } }, children: [], model: { update: false, value: null } }, { id: 100187, field: 'input100187', title: '输入框', name: 'input', required: false, hidden: false, options: { placeholder: '' }, children: [], model: { update: false, value: null } }], model: { update: false, value: null } }, { id: 100188, field: 'VxeNumberInput100188', title: '数字', name: 'VxeNumberInput', required: false, hidden: false, options: { placeholder: '' }, children: [], model: { update: false, value: null } }, { id: 100195, field: 'VxeNumberInput100195', title: '数字', name: 'VxeNumberInput', required: false, hidden: false, options: { placeholder: '' }, children: [], model: { update: false, value: null } }] }
)
}
})
</script>
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vxe-pc-ui",
"version": "4.1.7",
"version": "4.1.9",
"description": "A vue based PC component library",
"scripts": {
"update": "npm install --legacy-peer-deps",
Expand All @@ -25,7 +25,7 @@
"style": "lib/style.css",
"typings": "types/index.d.ts",
"dependencies": {
"@vxe-ui/core": "^4.0.3"
"@vxe-ui/core": "^4.0.4"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.21.0",
Expand Down
16 changes: 14 additions & 2 deletions packages/form-design/src/form-design.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,7 @@ export default defineComponent({
widgetObjList: [],
dragWidget: null,
sortWidget: null,
activeWidget: null,
sortSubWidget: null
activeWidget: null
})

const internalData = reactive<FormDesignInternalData>({
Expand Down Expand Up @@ -134,6 +133,18 @@ export default defineComponent({
return nextTick()
}

const getWidgetById = (id: number | string | null | undefined) => {
const { widgetObjList } = reactData
if (id) {
const widgetId = XEUtils.toNumber(id)
const rest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
if (rest) {
return rest.item
}
}
return null
}

const getWidgetData = (): VxeFormDesignDefines.WidgetObjItem[] => {
const objList = XEUtils.clone(reactData.widgetObjList, true)
XEUtils.eachTree(objList, item => {
Expand Down Expand Up @@ -178,6 +189,7 @@ export default defineComponent({
reloadConfig,
getFormConfig,
loadFormConfig,
getWidgetById,
getFormData () {
const { widgetObjList } = reactData
const formData: Record<string, any> = {}
Expand Down
39 changes: 37 additions & 2 deletions packages/form-design/src/layout-preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { defineComponent, h, inject, TransitionGroup } from 'vue'
import { renderer } from '@vxe-ui/core'
import { getSlotVNs } from '../../ui/src/vn'
import { ViewItemComponent } from './layout-view-item'
import { hasFormDesignLayoutType } from '../src/util'
import VxeFormComponent from '../../form/src/form'
import XEUtils from 'xe-utils'

Expand All @@ -20,7 +21,7 @@ export default defineComponent({

const { reactData: formDesignReactData } = $xeFormDesign

const dragoverEvent = (evnt: DragEvent) => {
const dragenterEvent = (evnt: DragEvent) => {
const { widgetObjList, dragWidget } = formDesignReactData
if (dragWidget) {
evnt.preventDefault()
Expand All @@ -33,11 +34,41 @@ export default defineComponent({
}
}

let lastDragTime = Date.now()

const handleDragenterPlaceEvent = (evnt: DragEvent) => {
const { widgetObjList, sortWidget } = formDesignReactData
evnt.stopPropagation()
if (lastDragTime > Date.now() - 300) {
evnt.preventDefault()
return
}
if (sortWidget) {
if (hasFormDesignLayoutType(sortWidget)) {
return
}
// const targetRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
const currRest = XEUtils.findTree(widgetObjList, item => item.id === sortWidget.id, { children: 'children' })
if (currRest) {
const { item, index, items, parent } = currRest
if (parent && parent.name === 'row') {
// 如是是从 row 移出
currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget()
} else {
items.splice(index, 1)
}
widgetObjList.push(item)
lastDragTime = Date.now()
$xeFormDesign.dispatchEvent('drag-widget', { widget: item }, evnt)
}
}
}

return () => {
const { widgetObjList } = formDesignReactData
return h('div', {
class: 'vxe-form-design--preview',
onDragover: dragoverEvent
onDragenter: dragenterEvent
}, [
h('div', {
class: 'vxe-form-design--preview-wrapper'
Expand Down Expand Up @@ -75,6 +106,10 @@ export default defineComponent({
}
})
}
}),
h('div', {
class: 'vxe-form-design--preview-place-widget',
onDragenter: handleDragenterPlaceEvent
})
])
])
Expand Down
41 changes: 19 additions & 22 deletions packages/form-design/src/layout-view-item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,13 @@ export const ViewItemComponent = defineComponent({
const { reactData: formDesignReactData } = $xeFormDesign

const sortDragstartEvent = (evnt: DragEvent) => {
const { widgetObjList, sortSubWidget } = formDesignReactData
if (sortSubWidget) {
evnt.preventDefault()
return
}
const { widgetObjList } = formDesignReactData
const divEl = evnt.currentTarget as HTMLDivElement
const widgetId = Number(divEl.getAttribute('data-widget-id'))
const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === widgetId, { children: 'children' })
if (currRest) {
formDesignReactData.dragWidget = null
formDesignReactData.sortWidget = currRest.item
formDesignReactData.sortSubWidget = null
}
}

Expand All @@ -52,11 +47,11 @@ export const ViewItemComponent = defineComponent({
formDesignReactData.sortWidget = null
}

let isDragAnimate = false
let lastDragTime = Date.now()

const sortDragenterEvent = (evnt: DragEvent) => {
const { widgetObjList, sortWidget, sortSubWidget } = formDesignReactData
if (isDragAnimate || sortSubWidget) {
const { widgetObjList, sortWidget } = formDesignReactData
if (lastDragTime > Date.now() - 200) {
evnt.preventDefault()
return
}
Expand All @@ -70,29 +65,31 @@ export const ViewItemComponent = defineComponent({
const currRest = XEUtils.findTree(widgetObjList, item => item && item.id === sortWidget.id, { children: 'children' })
if (currRest) {
// 控件换位置
currRest.items.splice(currRest.index, 1)
if (currRest.parent && currRest.parent.name === 'row') {
// 如是是从 row 移出
currRest.items[currRest.index] = $xeFormDesign.createEmptyWidget()
} else {
currRest.items.splice(currRest.index, 1)
}
targetRest.items.splice(targetRest.index, 0, currRest.item)
$xeFormDesign.dispatchEvent('drag-widget', { widget: currRest.item }, evnt)
isDragAnimate = true
setTimeout(() => {
isDragAnimate = false
}, 150)

lastDragTime = Date.now()
}
}
}
}
}

const dragoverItemEvent = (evnt: DragEvent) => {
const { sortWidget, dragWidget, sortSubWidget } = formDesignReactData
if (sortWidget || dragWidget || sortSubWidget) {
evnt.preventDefault()
}
}
// const dragoverItemEvent = (evnt: DragEvent) => {
// // const { sortWidget, dragWidget } = formDesignReactData
// // if (sortWidget || dragWidget) {
// // evnt.preventDefault()
// // }
// }

const handleClickEvent = (evnt: KeyboardEvent, item: VxeFormDesignDefines.WidgetObjItem) => {
$xeFormDesign.handleClickWidget(evnt, item)
formDesignReactData.sortSubWidget = null
}

return () => {
Expand All @@ -114,7 +111,7 @@ export const ViewItemComponent = defineComponent({
onDragstart: sortDragstartEvent,
onDragend: sortDragendEvent,
onDragenter: sortDragenterEvent,
onDragover: dragoverItemEvent,
// onDragover: dragoverItemEvent,
onClick (evnt: KeyboardEvent) {
handleClickEvent(evnt, item)
}
Expand Down
Loading

0 comments on commit d57d246

Please sign in to comment.