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/'