zcy
/
vue_form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #15 from oleksandr-belovol/widgets-preview 

Added base logic
master
vform666 2022-12-27 13:47:44 +08:00 committed by GitHub
parent 5d61682431 6e39c84c20
commit 0bd93fe9fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/form-designer/toolbar-panel/index.vue
View File

@ -50,7 +50,7 @@
:fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
<div>
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
<VFormRender ref="preForm" :form-json="previewFormJson" :form-data="testFormData" :preview-state="true"
:option-data="testOptionData" @myEmitTest="onMyEmitTest"
@appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
@formChange="handleFormChange">
@ -201,7 +201,8 @@
import loadBeautifier from "@/utils/beautifierLoader"
import { saveAs } from 'file-saver'
import axios from 'axios'
import SvgIcon from "@/components/svg-icon/index";
import SvgIcon from "@/components/svg-icon/index"
import { fillUnfilledWidgetPropsForPreview, unfilledWidgetPropsDefaultData } from "@/utils/widgets-preview"
export default {
name: "ToolbarPanel",
@ -273,6 +274,12 @@
}
},
computed: {
previewFormJson() {
return {
widgetList: fillUnfilledWidgetPropsForPreview(this.designer.widgetList, unfilledWidgetPropsDefaultData),
formConfig: deepClone(this.designer.formConfig)
}
},
formJson() {
return {
// widgetList: this.designer.widgetList,

47
src/utils/widgets-preview.js Normal file
View File

@ -0,0 +1,47 @@
import { deepClone } from "@/utils/util"
const widgetPropsForDetectChanges = {
input: { defaultValue: '' },
textarea: { defaultValue: '' },
number: { defaultValue: 0 },
radio: { defaultValue: null },
checkbox: { defaultValue: [] },
select: { defaultValue: '' },
time: { defaultValue: null },
'time-range': { defaultValue: null },
date: { defaultValue: null },
'date-range': { defaultValue: null },
switch: { defaultValue: null },
rate: { defaultValue: null },
color: { defaultValue: null },
slider: {},
'static-text': { textContent: 'static text' },
'html-text': { htmlContent: '<b>html text</b>' },
button: { label: 'button', type: '' },
divider: { label: '' },
'picture-upload': { uploadURL: '' },
'file-upload': { uploadURL: '' },
'rich-editor': {},
'cascader': { defaultValue: '' }
}
export const unfilledWidgetPropsDefaultData = {
input: { defaultValue: 'test text' },
checkbox: { defaultValue: [1] },
button: { label: 'custom label', type: 'success' },
time: { defaultValue: '16:04:48' },
}
export function fillUnfilledWidgetPropsForPreview(widgets, unfilledWidgetPropsData) {
return deepClone(widgets).map((widget) => {
const widgetPropsForDetect = widgetPropsForDetectChanges[widget.type]
Object.keys(widgetPropsForDetect).forEach((widgetProp) => {
if(
unfilledWidgetPropsData[widget.type]
&&
JSON.stringify(widget.options[widgetProp]) === JSON.stringify(widgetPropsForDetect[widgetProp])
) {
widget.options[widgetProp] = unfilledWidgetPropsData[widget.type][widgetProp]
}
})
return widget
});
}