更新到2.2.5:

1. JS代码编辑器增加语法错误提示;
2. 修复嵌套容器中子表单setFormData数据回显失效的问题;
3. 修复其他少量bug。
master
vdpAdmin 2022-03-25 16:49:09 +08:00
parent 6fc227cffc
commit 72a7f402b3
44 changed files with 170 additions and 81 deletions

View File

@ -1,6 +1,6 @@
{
"name": "variant-form",
"version": "2.2.4",
"version": "2.2.5",
"private": false,
"scripts": {
"serve": "vue-cli-service serve --open src/main.js",

View File

@ -119,6 +119,10 @@
this.aceEditor.getSession().setMode('ace/mode/css')
},
getEditorAnnotations() {
return this.aceEditor.getSession().getAnnotations()
},
}
}
</script>

View File

@ -13,7 +13,7 @@
<script>
import StaticContentWrapper from './static-content-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -18,7 +18,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -21,7 +21,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -12,7 +12,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -17,7 +17,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -16,7 +16,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -9,7 +9,7 @@
<script>
import StaticContentWrapper from './static-content-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -29,7 +29,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import {deepClone} from "@/utils/util";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -8,7 +8,7 @@
<script>
import StaticContentWrapper from './static-content-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -22,7 +22,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -16,7 +16,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -20,7 +20,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import {deepClone} from "@/utils/util";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -21,7 +21,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -15,7 +15,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -12,7 +12,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import {deepClone} from "@/utils/util";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -24,7 +24,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -13,7 +13,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -14,7 +14,7 @@
<script>
import StaticContentWrapper from './static-content-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -9,7 +9,7 @@
<script>
import StaticContentWrapper from './static-content-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -14,7 +14,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -16,9 +16,9 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n"
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"
export default {
name: "textarea-widget",

View File

@ -17,7 +17,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -16,7 +16,7 @@
<script>
import FormItemWrapper from './form-item-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n, {translate} from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";

View File

@ -345,16 +345,16 @@
* 获取所有字段组件
* @returns {*[]}
*/
getFieldWidgets() {
return getAllFieldWidgets(this.designer.widgetList)
getFieldWidgets(widgetList = null) {
return !!widgetList ? getAllFieldWidgets(widgetList) : getAllFieldWidgets(this.designer.widgetList)
},
/**
* 获取所有容器组件
* @returns {*[]}
*/
getContainerWidgets() {
return getAllContainerWidgets(this.designer.widgetList)
getContainerWidgets(widgetList = null) {
return !!widgetList ? getAllContainerWidgets(widgetList) : getAllContainerWidgets(this.designer.widgetList)
},
//TODO:

View File

@ -84,7 +84,7 @@
v-if="showFormEventDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert>
<code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode"></code-editor>
<code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode" ref="ecEditor"></code-editor>
<el-alert type="info" :closable="false" title="}"></el-alert>
<div slot="footer" class="dialog-footer">
<el-button @click="showFormEventDialogFlag = false">
@ -109,7 +109,7 @@
<el-dialog :title="i18nt('designer.setting.globalFunctions')" :visible.sync="showEditFunctionsDialogFlag"
v-if="showEditFunctionsDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode"></code-editor>
<code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode" ref="gfEditor"></code-editor>
<div slot="footer" class="dialog-footer">
<el-button @click="showEditFunctionsDialogFlag = false">
{{i18nt('designer.hint.cancel')}}</el-button>
@ -259,6 +259,21 @@
},
saveGlobalFunctions() {
const codeHints = this.$refs.gfEditor.getEditorAnnotations()
let syntaxErrorFlag = false
if (!!codeHints && (codeHints.length > 0)) {
codeHints.forEach((chItem) => {
if (chItem.type === 'error') {
syntaxErrorFlag = true
}
})
if (syntaxErrorFlag) {
this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'))
return
}
}
this.designer.formConfig.functions = this.functionsCode
insertGlobalFunctionsToHtml(this.functionsCode)
this.showEditFunctionsDialogFlag = false
@ -271,6 +286,21 @@
},
saveFormEventHandler() {
const codeHints = this.$refs.ecEditor.getEditorAnnotations()
let syntaxErrorFlag = false
if (!!codeHints && (codeHints.length > 0)) {
codeHints.forEach((chItem) => {
if (chItem.type === 'error') {
syntaxErrorFlag = true
}
})
if (syntaxErrorFlag) {
this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'))
return
}
}
this.formConfig[this.curEventName] = this.formEventHandlerCode
this.showFormEventDialogFlag = false
},

View File

@ -75,7 +75,7 @@
v-if="showWidgetEventDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-alert type="info" :closable="false" :title="eventHeader"></el-alert>
<code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode"></code-editor>
<code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode" ref="ecEditor"></code-editor>
<el-alert type="info" :closable="false" title="}"></el-alert>
<div slot="footer" class="dialog-footer">
<el-button @click="showWidgetEventDialogFlag = false">
@ -277,6 +277,21 @@
},
saveEventHandler() {
const codeHints = this.$refs.ecEditor.getEditorAnnotations()
let syntaxErrorFlag = false
if (!!codeHints && (codeHints.length > 0)) {
codeHints.forEach((chItem) => {
if (chItem.type === 'error') {
syntaxErrorFlag = true
}
})
if (syntaxErrorFlag) {
this.$message.error(this.i18nt('designer.setting.syntaxCheckWarning'))
return
}
}
this.selectedWidget.options[this.curEventName] = this.eventHandlerCode
this.showWidgetEventDialogFlag = false
},

View File

@ -1,5 +1,5 @@
import {translate} from "@/utils/i18n"
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
export const createInputTextEditor = function (propName, propLabelKey) {
return {

View File

@ -1,4 +1,4 @@
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
export default {
mixins: [emitter],

View File

@ -67,7 +67,8 @@
<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 v-if="false" @click="printFormJson">PrintFormJson</el-button>
<el-button v-if="true" @click="testValidate">TestValidate</el-button>
<el-button v-if="false" @click="testValidate">TestValidate</el-button>
<el-button v-if="false" @click="testSetFormData">TestSF</el-button>
</div>
</el-dialog>
@ -594,6 +595,18 @@
console.log('test===', this.$refs['preForm'].validateForm())
},
testSetFormData() {
let fData = {
'fuTest': [
{
name: '上传文件测试.xlsx',
url: 'https://www.vform666.com/123.xlsx'
}
]
}
this.$refs['preForm'].setFormData(fData)
},
handleFormChange(fieldName, newValue, oldValue, formModel) {
/*
console.log('---formChange start---')

View File

@ -64,8 +64,8 @@
<template v-for="(ft, idx) in formTemplates">
<el-card :key="idx" :bord-style="{ padding: '0' }" shadow="hover" class="ft-card">
<el-popover placement="right" trigger="hover">
<img slot="reference" :src="ftImages[idx].imgUrl" style="width: 200px">
<img :src="ftImages[idx].imgUrl" style="height: 600px;width: 720px">
<img slot="reference" :src="ft.imgUrl" style="width: 200px">
<img :src="ft.imgUrl" style="height: 600px;width: 720px">
</el-popover>
<div class="bottom clear-fix">
<span class="ft-title">#{{idx+1}} {{ft.title}}</span>
@ -90,14 +90,14 @@
import i18n from "@/utils/i18n"
import axios from "axios"
import ftImg1 from '@/assets/ft-images/t1.png'
import ftImg2 from '@/assets/ft-images/t2.png'
import ftImg3 from '@/assets/ft-images/t3.png'
import ftImg4 from '@/assets/ft-images/t4.png'
import ftImg5 from '@/assets/ft-images/t5.png'
import ftImg6 from '@/assets/ft-images/t6.png'
import ftImg7 from '@/assets/ft-images/t7.png'
import ftImg8 from '@/assets/ft-images/t8.png'
// import ftImg1 from '@/assets/ft-images/t1.png'
// import ftImg2 from '@/assets/ft-images/t2.png'
// import ftImg3 from '@/assets/ft-images/t3.png'
// import ftImg4 from '@/assets/ft-images/t4.png'
// import ftImg5 from '@/assets/ft-images/t5.png'
// import ftImg6 from '@/assets/ft-images/t6.png'
// import ftImg7 from '@/assets/ft-images/t7.png'
// import ftImg8 from '@/assets/ft-images/t8.png'
export default {
name: "FieldPanel",
@ -125,16 +125,16 @@
customFields,
formTemplates: formTemplates,
ftImages: [
{imgUrl: ftImg1},
{imgUrl: ftImg2},
{imgUrl: ftImg3},
{imgUrl: ftImg4},
{imgUrl: ftImg5},
{imgUrl: ftImg6},
{imgUrl: ftImg7},
{imgUrl: ftImg8},
]
// ftImages: [
// {imgUrl: ftImg1},
// {imgUrl: ftImg2},
// {imgUrl: ftImg3},
// {imgUrl: ftImg4},
// {imgUrl: ftImg5},
// {imgUrl: ftImg6},
// {imgUrl: ftImg7},
// {imgUrl: ftImg8},
// ]
}
},
computed: {

View File

@ -902,17 +902,6 @@ export const advancedFields = [
},
},
// {
// type: 'slot',
// icon: 'slot-field',
// formItemFlag: false,
// options: {
// name: '',
// label: '',
// customClass: '', //自定义css类名
// }
// },
]
export const customFields = [

View File

@ -20,7 +20,7 @@
</template>
<script>
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n from "../../../utils/i18n"
import refMixin from "../../../components/form-render/refMixin"
import ContainerItemWrapper from './container-item-wrapper'

View File

@ -64,7 +64,7 @@
</template>
<script>
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n from "../../../utils/i18n"
import {deepClone, generateId} from "../../../utils/util"
import refMixin from "../../../components/form-render/refMixin"

View File

@ -34,7 +34,7 @@
</template>
<script>
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n from "../../../utils/i18n"
import refMixin from "../../../components/form-render/refMixin"
import ContainerItemWrapper from './container-item-wrapper'

View File

@ -24,7 +24,7 @@
</template>
<script>
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n from "../../../utils/i18n"
import refMixin from "../../../components/form-render/refMixin"
import ContainerItemWrapper from './container-item-wrapper'

View File

@ -38,7 +38,7 @@
<script>
//import ElForm from 'element-ui/packages/form/src/form.vue' /* Element UI */
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import './container-item/index'
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import {
@ -172,11 +172,13 @@
insertCustomStyleAndScriptNode() {
if (!!this.formConfig && !!this.formConfig.cssCode) {
insertCustomCssToHead(this.formConfig.cssCode, this.formId)
insertCustomCssToHead(this.formConfig.cssCode,
!!this.previewState ? '' : this.formId)
}
if (!!this.formConfig && !!this.formConfig.functions) {
insertGlobalFunctionsToHtml(this.formConfig.functions, this.formId)
insertGlobalFunctionsToHtml(this.formConfig.functions,
!!this.previewState ? '' : this.formId)
}
},
@ -639,16 +641,16 @@
* 获取所有字段组件
* @returns {*[]}
*/
getFieldWidgets() {
return getAllFieldWidgets(this.formJsonObj.widgetList)
getFieldWidgets(widgetList = null) {
return !!widgetList ? getAllFieldWidgets(widgetList) : getAllFieldWidgets(this.formJsonObj.widgetList)
},
/**
* 获取所有容器组件
* @returns {*[]}
*/
getContainerWidgets() {
return getAllContainerWidgets(this.formJsonObj.widgetList)
getContainerWidgets(widgetList = null) {
return !!widgetList ? getAllContainerWidgets(widgetList) : getAllContainerWidgets(this.formJsonObj.widgetList)
},
//--------------------- API end ------------------//

View File

@ -11,7 +11,7 @@
<script>
import StaticContentWrapper from '@/components/form-designer/form-widget/field-widget/static-content-wrapper'
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n from "@/utils/i18n"
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin"

View File

@ -35,7 +35,7 @@
</template>
<script>
import emitter from 'element-ui/lib/mixins/emitter'
import emitter from '@/utils/emitter'
import i18n from "@/utils/i18n"
import refMixin from "@/components/form-render/refMixin"
import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'

View File

@ -317,6 +317,7 @@ export default {
formModelName: 'Model Name',
formRefName: 'Ref Name',
formRulesName: 'Rules Name',
syntaxCheckWarning: 'Syntax error in the javascript codes, please check again!',
//data-table
tableWidth: 'Width(px/%)',

View File

@ -317,6 +317,7 @@ export default {
formModelName: '数据对象名称',
formRefName: '引用名称',
formRulesName: '验证规则名称',
syntaxCheckWarning: 'JS代码存在语法错误请仔细检查',
//data-table
tableWidth: '宽度(px/%)',

View File

@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
}
export const VARIANT_FORM_VERSION = '2.2.4'
export const VARIANT_FORM_VERSION = '2.2.5'
//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/'

34
src/utils/emitter.js Normal file
View File

@ -0,0 +1,34 @@
function broadcast(componentName, eventName, params) {
this.$children.forEach(child => {
var name = child.$options.componentName;
if (name === componentName) {
child.$emit.apply(child, [eventName].concat(params));
broadcast.apply(child, [componentName, eventName].concat([params])); //继续遍历子节点!!
} else {
broadcast.apply(child, [componentName, eventName].concat([params]));
}
});
}
export default {
methods: {
dispatch(componentName, eventName, params) {
var parent = this.$parent || this.$root;
var name = parent.$options.componentName;
while (parent && (!name || name !== componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.componentName;
}
}
if (parent) {
parent.$emit.apply(parent, [eventName].concat(params));
}
},
broadcast(componentName, eventName, params) {
broadcast.call(this, componentName, eventName, params);
}
}
};