github
/
variant-form
mirror of https://github.com/vform666/variant-form
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

版本升级到2.2.3： 

1. 新增必填校验自定义提示属性requiredHint；
2. 修复field-list-api属性相关的拼写错误；
3. 修复字段标签隐藏后不能选中组件的问题；
4. 字段校验属性设置后允许清空；
5. 修复其他一些bug。
master
vdpAdmin 2022-03-09 11:29:43 +08:00
parent 50b32fed66
commit 9580057589
17 changed files with 71 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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)
<br/>

2
package.json
View File

@ -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",

12
src/App.vue
View File

@ -1,6 +1,10 @@
<template>
<div id="app">
<VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig"></VFormDesigner>
<VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig">
<template #customToolButtons>
<el-button type="text" @click="printFormJson">测试按钮</el-button>
</template>
</VFormDesigner>
</div>
</template>
@ -16,8 +20,14 @@ export default {
return {
designerConfig: {
resetFormJson: false,
toolbarMaxWidth: 490,
}
}
},
methods: {
printFormJson() {
console.log( this.$refs.vfDesignerRef.getFormJson() )
}
}
}
</script>

2
src/components/form-designer/designer.js
View File

@ -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

2
src/components/form-designer/form-widget/field-widget/fieldMixin.js
View File

@ -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'),
})
}

2
src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
View File

@ -104,7 +104,7 @@
labelWidth() {
if (!!this.field.options.labelHidden) {
return 0
return !!this.designState ? 5 : 0 //设计期间标签最小宽度5像素，以便于鼠标点击可选中组件！！
}
if (!!this.field.options.labelWidth) {

2
src/components/form-designer/index.vue
View File

@ -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],

24
src/components/form-designer/setting-panel/property-editor/requiredHint-editor.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<el-form-item :label="i18nt('designer.setting.requiredHint')">
<el-input type="text" v-model="optionModel.requiredHint"></el-input>
</el-form-item>
</template>
<script>
import i18n from "@/utils/i18n"
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
export default {
name: "requiredHint-editor",
mixins: [i18n, propertyMixin],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

2
src/components/form-designer/setting-panel/property-editor/validation-editor.vue
View File

@ -4,7 +4,7 @@
<el-tooltip effect="light" :content="i18nt('designer.setting.validationHelp')">
<i class="el-icon-info"></i></el-tooltip>
</span>
<el-select v-model="optionModel.validation" filterable allow-create default-first-option>
<el-select v-model="optionModel.validation" filterable clearable allow-create default-first-option>
<el-option v-for="(fv, fvIdx) in fieldValidators"
:key="fvIdx"
:label="fv.label"

1
src/components/form-designer/setting-panel/propertyRegister.js
View File

@ -23,6 +23,7 @@ const COMMON_PROPERTIES = {
'labelHidden' : 'labelHidden-editor',
'rows' : 'rows-editor',
'required' : 'required-editor',
'requiredHint' : 'requiredHint-editor',
'validation' : 'validation-editor',
'validationHint' : 'validationHint-editor',
'readonly' : 'readonly-editor',

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

@ -66,6 +66,7 @@
<el-button type="primary" @click="setFormDisabled">{{i18nt('designer.hint.disableForm')}}</el-button>
<el-button type="primary" @click="setFormEnabled">{{i18nt('designer.hint.enableForm')}}</el-button>
<el-button type="" @click="showPreviewDialogFlag = false">{{i18nt('designer.hint.closePreview')}}</el-button>
<el-button @click="printFormJson">PrintFormJson</el-button>
</div>
</el-dialog>
@ -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---')

13
src/components/form-designer/widget-panel/widgetsConfig.js
View File

@ -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: '',
//-------------------

2
src/components/form-render/container-item/containerItemMixin.js
View File

@ -1,4 +1,4 @@
import {generateId, traverseFieldWidgetsOfContainer} from "@/utils/util";
import { traverseFieldWidgetsOfContainer } from "@/utils/util";
export default {
computed: {

2
src/extension/extension-loader.js
View File

@ -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}))

1
src/lang/en-US.js
View File

@ -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',

1
src/lang/zh-CN.js
View File

@ -189,6 +189,7 @@ export default {
labelHidden: '隐藏字段标签',
required: '必填字段',
validation: '字段校验',
requiredHint: '必填校验提示',
validationHelp: '支持输入正则表达式',
validationHint: '校验失败提示',
readonly: '只读',

2
src/utils/config.js
View File

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