diff --git a/package.json b/package.json index 33f0375..a3fb3eb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "variant-form", - "version": "2.1.3", + "version": "2.1.4", "private": false, "scripts": { "serve": "vue-cli-service serve --open src/main.js", diff --git a/src/components/form-designer/designer.js b/src/components/form-designer/designer.js index 1116ab6..8591205 100644 --- a/src/components/form-designer/designer.js +++ b/src/components/form-designer/designer.js @@ -121,9 +121,12 @@ export function createDesigner(vueInstance) { } }, - updateSelectedWidgetNameAndRef(selectedWidget, newName) { + updateSelectedWidgetNameAndRef(selectedWidget, newName, newLabel) { this.selectedWidgetName = newName - selectedWidget.options.name = newName + //selectedWidget.options.name = newName //此行多余 + if (!!newLabel && (Object.keys(selectedWidget.options).indexOf('label') > -1)) { + selectedWidget.options.label = newLabel + } }, clearSelected() { 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 09e9bdd..e22f891 100644 --- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js +++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js @@ -270,6 +270,8 @@ export default { }, handleInputCustomEvent(value) { + this.syncUpdateFormModel(value) + if (!!this.field.options.onInput) { let customFn = new Function('value', this.field.options.onInput) customFn.call(this, value) diff --git a/src/components/form-designer/index.vue b/src/components/form-designer/index.vue index 9ed0b5c..efd4050 100644 --- a/src/components/form-designer/index.vue +++ b/src/components/form-designer/index.vue @@ -61,7 +61,7 @@ import SettingPanel from './setting-panel/index' import VFormWidget from './form-widget/index' import {createDesigner} from "@/components/form-designer/designer"; - import {addWindowResizeHandler, getQueryParam} from "@/utils/util"; + import {addWindowResizeHandler, deepClone, getQueryParam} from "@/utils/util"; import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"; import i18n, { changeLocale } from "@/utils/i18n"; @@ -75,6 +75,12 @@ SettingPanel, VFormWidget, }, + props: { + fieldListApi: { + type: Object, + default: null, + } + }, data() { return { vFormVersion: VARIANT_FORM_VERSION, @@ -91,11 +97,13 @@ scrollerHeight: 0, designer: createDesigner(this), + + fieldList: [] } }, provide() { return { - // + serverFieldList: this.fieldList, } }, created() { @@ -113,6 +121,8 @@ }) this.loadCase() + + this.loadFieldListFromServer() }, methods: { openHome() { @@ -172,6 +182,26 @@ this.changeLanguage(curLocale) }, + loadFieldListFromServer() { + if (!this.fieldListApi) { + return + } + + axios.get(this.fieldListApi.URL).then(res => { + let labelKey = this.fieldListApi.labelKey || 'label' + let nameKey = this.fieldListApi.nameKey || 'name' + + res.data.forEach(fieldItem => { + this.fieldList.push({ + label: fieldItem[labelKey], + name: fieldItem[nameKey] + }) + }) + }).catch(error => { + this.$message.error(error) + }) + }, + handleLanguageChanged(command) { this.changeLanguage(command) this.curLangName = this.i18nt('application.' + command) @@ -196,6 +226,13 @@ } }, + getFormJson() { + return { + widgetList: deepClone(this.designer.widgetList), + formConfig: deepClone(this.designer.formConfig) + } + }, + //TODO: 增加更多方法!! } diff --git a/src/components/form-designer/setting-panel/property-editor/name-editor.vue b/src/components/form-designer/setting-panel/property-editor/name-editor.vue index 30fe888..a76ee40 100644 --- a/src/components/form-designer/setting-panel/property-editor/name-editor.vue +++ b/src/components/form-designer/setting-panel/property-editor/name-editor.vue @@ -1,6 +1,13 @@ @@ -16,6 +23,7 @@ selectedWidget: Object, optionModel: Object, }, + inject: ['serverFieldList'], data() { return { nameRequiredRule: [{required: true, message: 'name required'}], @@ -41,12 +49,22 @@ let fieldWidget = this.designer.formWidget.getWidgetRef(oldName) if (!!fieldWidget && !!fieldWidget.registerToRefList) { - fieldWidget.registerToRefList(oldName) - this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName) + fieldWidget.registerToRefList(oldName) //注册组件新的ref名称并删除老的ref!! + let newLabel = this.getLabelByFieldName(newName) + this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName, newLabel) } } }, + getLabelByFieldName(fieldName) { + for (let i = 0; i < this.serverFieldList.length; i++) { + if (this.serverFieldList[i].name === fieldName) { + return this.serverFieldList[i].label + } + } + + return null + }, } } diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue index 6251e00..981c7d1 100644 --- a/src/components/form-render/index.vue +++ b/src/components/form-render/index.vue @@ -201,7 +201,7 @@ this.buildDataFromWidget(childItem, wItem) }) } - } else { + } else { //自定义容器组件 if (!!wItem.widgetList && (wItem.widgetList.length > 0)) { wItem.widgetList.forEach((childItem) => { this.buildDataFromWidget(childItem, wItem) @@ -217,8 +217,6 @@ this.$set(this.formDataModel, wItem.options.name, deepClone(initialValue)) } } - - //TODO: 如果是自定义容器组件,需要特殊处理!!! }, addFieldChangeEventHandler() { diff --git a/src/extension/extension-loader.js b/src/extension/extension-loader.js index d662b12..3229a6a 100644 --- a/src/extension/extension-loader.js +++ b/src/extension/extension-loader.js @@ -33,6 +33,9 @@ export const loadExtension = function () { Vue.component(CardWidget.name, CardWidget) //注册设计期的容器组件 Vue.component(CardItem.name, CardItem) //注册运行期的容器组件 /* -------------------------------------------------- */ + PERegister.registerCPEditor('folded', 'card-folded-editor', + PEFactory.createBooleanEditor('folded', 'extension.setting.cardFolded')) + PERegister.registerCPEditor('cardWidth', 'card-cardWidth-editor', PEFactory.createInputTextEditor('cardWidth', 'extension.setting.cardWidth')) diff --git a/src/extension/samples/card/card-item.vue b/src/extension/samples/card/card-item.vue index 3e9d159..bc102a7 100644 --- a/src/extension/samples/card/card-item.vue +++ b/src/extension/samples/card/card-item.vue @@ -1,9 +1,12 @@