From 95800575892a50f2dff456996fcd7607117c7e60 Mon Sep 17 00:00:00 2001 From: vdpAdmin Date: Wed, 9 Mar 2022 11:29:43 +0800 Subject: [PATCH] =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8D=87=E7=BA=A7=E5=88=B02.?= =?UTF-8?q?2.3=EF=BC=9A=201.=20=E6=96=B0=E5=A2=9E=E5=BF=85=E5=A1=AB?= =?UTF-8?q?=E6=A0=A1=E9=AA=8C=E8=87=AA=E5=AE=9A=E4=B9=89=E6=8F=90=E7=A4=BA?= =?UTF-8?q?=E5=B1=9E=E6=80=A7requiredHint=EF=BC=9B=202.=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8Dfield-list-api=E5=B1=9E=E6=80=A7=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E7=9A=84=E6=8B=BC=E5=86=99=E9=94=99=E8=AF=AF=EF=BC=9B=203.=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AD=97=E6=AE=B5=E6=A0=87=E7=AD=BE=E9=9A=90?= =?UTF-8?q?=E8=97=8F=E5=90=8E=E4=B8=8D=E8=83=BD=E9=80=89=E4=B8=AD=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=9B=204.=20=E5=AD=97?= =?UTF-8?q?=E6=AE=B5=E6=A0=A1=E9=AA=8C=E5=B1=9E=E6=80=A7=E8=AE=BE=E7=BD=AE?= =?UTF-8?q?=E5=90=8E=E5=85=81=E8=AE=B8=E6=B8=85=E7=A9=BA=EF=BC=9B=205.=20?= =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=85=B6=E4=BB=96=E4=B8=80=E4=BA=9Bbug?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- package.json | 2 +- src/App.vue | 12 +++++++++- src/components/form-designer/designer.js | 2 +- .../form-widget/field-widget/fieldMixin.js | 2 +- .../field-widget/form-item-wrapper.vue | 2 +- src/components/form-designer/index.vue | 2 +- .../property-editor/requiredHint-editor.vue | 24 +++++++++++++++++++ .../property-editor/validation-editor.vue | 2 +- .../setting-panel/propertyRegister.js | 1 + .../form-designer/toolbar-panel/index.vue | 10 ++++++++ .../widget-panel/widgetsConfig.js | 13 ++++++++++ .../container-item/containerItemMixin.js | 2 +- src/extension/extension-loader.js | 2 +- src/lang/en-US.js | 1 + src/lang/zh-CN.js | 1 + src/utils/config.js | 2 +- 17 files changed, 71 insertions(+), 11 deletions(-) create mode 100644 src/components/form-designer/setting-panel/property-editor/requiredHint-editor.vue diff --git a/README.md b/README.md index 4718319..096fdb3 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Variant Form #### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。 -![image](https://vform2021.oss-cn-beijing.aliyuncs.com/vform_demo.gif?versionId=CAEQGBiBgIDst4zj4hciIDQyYTkyOGY1ZGJiODQ4YTk5ZjkxMGIwMDY0MmY2M2Ri) +![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vform_demo.gif)
diff --git a/package.json b/package.json index cb7478d..9cbd54d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "variant-form", - "version": "2.2.2", + "version": "2.2.3", "private": false, "scripts": { "serve": "vue-cli-service serve --open src/main.js", diff --git a/src/App.vue b/src/App.vue index 7e6e50d..c0e75a7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,10 @@ @@ -16,8 +20,14 @@ export default { return { designerConfig: { resetFormJson: false, + toolbarMaxWidth: 490, } } + }, + methods: { + printFormJson() { + console.log( this.$refs.vfDesignerRef.getFormJson() ) + } } } diff --git a/src/components/form-designer/designer.js b/src/components/form-designer/designer.js index 05d1503..cace514 100644 --- a/src/components/form-designer/designer.js +++ b/src/components/form-designer/designer.js @@ -714,7 +714,7 @@ export function createDesigner(vueInstance) { let tempId = generateId() newWidget.id = newWidget.type.replace(/-/g, '') + tempId newWidget.options.name = newWidget.id - newWidget.options.label = newWidget.type.toLowerCase() + newWidget.options.label = newWidget.options.label || newWidget.type.toLowerCase() delete newWidget.displayName return newWidget diff --git a/src/components/form-designer/form-widget/field-widget/fieldMixin.js b/src/components/form-designer/form-widget/field-widget/fieldMixin.js index 5bb2be3..b6a843f 100644 --- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js +++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js @@ -199,7 +199,7 @@ export default { required: true, //trigger: ['blur', 'change'], trigger: ['blur'], /* 去掉change事件触发校验，change事件触发时formModel数据尚未更新，导致radio/checkbox必填校验出错！！ */ - message: this.i18nt('render.hint.fieldRequired'), + message: this.field.options.requiredHint || this.i18nt('render.hint.fieldRequired'), }) } diff --git a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue index 146ddfc..f2725f4 100644 --- a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue +++ b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue @@ -104,7 +104,7 @@ labelWidth() { if (!!this.field.options.labelHidden) { - return 0 + return !!this.designState ? 5 : 0 //设计期间标签最小宽度5像素，以便于鼠标点击可选中组件！！ } if (!!this.field.options.labelWidth) { diff --git a/src/components/form-designer/index.vue b/src/components/form-designer/index.vue index 29ae0b6..f15bf09 100644 --- a/src/components/form-designer/index.vue +++ b/src/components/form-designer/index.vue @@ -247,7 +247,7 @@ let labelKey = this.fieldListApi.labelKey || 'label' let nameKey = this.fieldListApi.nameKey || 'name' - this.fieldList.splice(0, this.fileList.length) //清空已有 + this.fieldList.splice(0, this.fieldList.length) //清空已有 res.data.forEach(fieldItem => { this.fieldList.push({ label: fieldItem[labelKey], diff --git a/src/components/form-designer/setting-panel/property-editor/requiredHint-editor.vue b/src/components/form-designer/setting-panel/property-editor/requiredHint-editor.vue new file mode 100644 index 0000000..d44c442 --- /dev/null +++ b/src/components/form-designer/setting-panel/property-editor/requiredHint-editor.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/src/components/form-designer/setting-panel/property-editor/validation-editor.vue b/src/components/form-designer/setting-panel/property-editor/validation-editor.vue index 5ae5362..8a5c425 100644 --- a/src/components/form-designer/setting-panel/property-editor/validation-editor.vue +++ b/src/components/form-designer/setting-panel/property-editor/validation-editor.vue @@ -4,7 +4,7 @@ - + {{i18nt('designer.hint.disableForm')}} {{i18nt('designer.hint.enableForm')}} {{i18nt('designer.hint.closePreview')}} + PrintFormJson @@ -579,6 +580,15 @@ this.$refs['preForm'].enableForm() }, + printFormJson() { + let tmpFS = { + widgetList: deepClone(this.designer.widgetList), + formConfig: deepClone(this.designer.formConfig) + } + + console.log(tmpFS) + }, + handleFormChange(fieldName, newValue, oldValue, formModel) { /* console.log('---formChange start---') diff --git a/src/components/form-designer/widget-panel/widgetsConfig.js b/src/components/form-designer/widget-panel/widgetsConfig.js index 513495b..116ba6a 100644 --- a/src/components/form-designer/widget-panel/widgetsConfig.js +++ b/src/components/form-designer/widget-panel/widgetsConfig.js @@ -118,6 +118,7 @@ export const basicFields = [ clearable: true, showPassword: false, required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -163,6 +164,7 @@ export const basicFields = [ disabled: false, hidden: false, required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -201,6 +203,7 @@ export const basicFields = [ disabled: false, hidden: false, required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -247,6 +250,7 @@ export const basicFields = [ {label: 'radio 3', value: 3}, ], required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -286,6 +290,7 @@ export const basicFields = [ {label: 'check 3', value: 3}, ], required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -330,6 +335,7 @@ export const basicFields = [ {label: 'select 3', value: 3}, ], required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -369,6 +375,7 @@ export const basicFields = [ editable: false, format: 'HH:mm:ss', //时间格式 required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -408,6 +415,7 @@ export const basicFields = [ editable: false, format: 'HH:mm:ss', //时间格式 required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -448,6 +456,7 @@ export const basicFields = [ format: 'yyyy-MM-dd', //日期显示格式 valueFormat: 'yyyy-MM-dd', //日期对象格式 required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -489,6 +498,7 @@ export const basicFields = [ format: 'yyyy-MM-dd', //日期显示格式 valueFormat: 'yyyy-MM-dd', //日期对象格式 required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -553,6 +563,7 @@ export const basicFields = [ disabled: false, hidden: false, required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -590,6 +601,7 @@ export const basicFields = [ disabled: false, hidden: false, required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- @@ -621,6 +633,7 @@ export const basicFields = [ disabled: false, hidden: false, required: false, + requiredHint: '', validation: '', validationHint: '', //------------------- diff --git a/src/components/form-render/container-item/containerItemMixin.js b/src/components/form-render/container-item/containerItemMixin.js index 5150508..3b98110 100644 --- a/src/components/form-render/container-item/containerItemMixin.js +++ b/src/components/form-render/container-item/containerItemMixin.js @@ -1,4 +1,4 @@ -import {generateId, traverseFieldWidgetsOfContainer} from "@/utils/util"; +import { traverseFieldWidgetsOfContainer } from "@/utils/util"; export default { computed: { diff --git a/src/extension/extension-loader.js b/src/extension/extension-loader.js index 3c57235..d25f912 100644 --- a/src/extension/extension-loader.js +++ b/src/extension/extension-loader.js @@ -76,7 +76,7 @@ export const loadExtension = function () { {label: 'info', value: 'info'}, {label: 'error', value: 'error'}, ] - PERegister.registerCPEditor('alert-type', 'alert-type-editor', + PERegister.registerCPEditor('type', 'alert-type-editor', PEFactory.createSelectEditor('type', 'extension.setting.alertType', {optionItems: typeOptions})) diff --git a/src/lang/en-US.js b/src/lang/en-US.js index 5e4e16a..fb9029b 100644 --- a/src/lang/en-US.js +++ b/src/lang/en-US.js @@ -188,6 +188,7 @@ export default { rows: 'Rows', labelHidden: 'Hide Label', required: 'Required', + requiredHint: 'Failure Hint', validation: 'Validation', validationHelp: 'Regular expressions supported', validationHint: 'Validation Hint', diff --git a/src/lang/zh-CN.js b/src/lang/zh-CN.js index b9336fb..05ef4e8 100644 --- a/src/lang/zh-CN.js +++ b/src/lang/zh-CN.js @@ -189,6 +189,7 @@ export default { labelHidden: '隐藏字段标签', required: '必填字段', validation: '字段校验', + requiredHint: '必填校验提示', validationHelp: '支持输入正则表达式', validationHint: '校验失败提示', readonly: '只读', diff --git a/src/utils/config.js b/src/utils/config.js index a0b1c36..d994a77 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = { } -export const VARIANT_FORM_VERSION = '2.2.2' +export const VARIANT_FORM_VERSION = '2.2.3' //export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/' export const MOCK_CASE_URL = 'https://ks3-cn-beijing.ksyuncs.com/vform-static/vcase/'