images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2025-06-21 17:39:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

3.0.0预览版代码首次上传。

Browse Source
This commit is contained in:
vdpAdmin
2022-01-02 14:33:25 +08:00
parent 23615147a3
commit f9de155e83
26 changed files with 698 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/form-designer/form-widget/field-widget/cascader-widget.vue
View File

@ -2,7 +2,8 @@
<form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
:parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel" class="full-width-input"
<el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel"
style="width: 100%" class="full-width-input"
:disabled="field.options.disabled"
:size="field.options.size"
:clearable="field.options.clearable"
@ -98,7 +99,7 @@
@import "../../../../styles/global.scss"; /* form-item-wrapper已引入，还需要重复引入吗？ */
.full-width-input {
width: 100% !important;
width: 100% !important; /* 没生效？？改用内联样式style */
}
</style>

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

@ -88,14 +88,28 @@ export default {
},
initEventHandler() {
eventBus.$on('setFormData', (newFormData) => {
// eventBus.$on('setFormData', (newFormData) => {
// console.log('formModel of globalModel----------', this.globalModel.formModel)
// if (!this.subFormItemFlag) {
// this.setValue(newFormData[this.field.options.name])
// }
// })
this.on$('setFormData', (newFormData) => {
console.log('formModel of globalModel----------', this.globalModel.formModel)
if (!this.subFormItemFlag) {
this.setValue(newFormData[this.field.options.name])
}
})
eventBus.$on('field-value-changed', (values) => {
// eventBus.$on('field-value-changed', (values) => {
// if (!!this.subFormItemFlag) {
// let subFormData = this.formModel[this.subFormName]
// this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId)
// } else {
// this.handleOnChange(values[0], values[1])
// }
// })
this.on$('field-value-changed', (values) => {
if (!!this.subFormItemFlag) {
let subFormData = this.formModel[this.subFormName]
this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId)
@ -105,11 +119,17 @@ export default {
})
/* 监听重新加载选项事件 */
eventBus.$on('reloadOptionItems', (widgetNames) => {
// eventBus.$on('reloadOptionItems', (widgetNames) => {
// if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) {
// this.initOptionItems(true)
// }
// })
this.on$('reloadOptionItems', (widgetNames) => {
if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) {
this.initOptionItems(true)
}
})
},
handleOnCreated() {
@ -289,13 +309,15 @@ export default {
emitFieldDataChange(newValue, oldValue) {
//this.$emit('field-value-changed', [newValue, oldValue])
eventBus.$emit('field-value-changed', [newValue, oldValue])
//eventBus.$emit('field-value-changed', [newValue, oldValue]) //此处应该加事件触发组件判断，非本组件（其他组件）触发的事件应该跳过，否则会出现事件无限循环！！
this.emit$('field-value-changed', [newValue, oldValue])
console.log('test', 'ccccccccc')
// /* 必须用dispatch向指定父组件派发消息！！ */
// this.dispatch('VFormRender', 'fieldChange',
// [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
eventBus.$emit('fieldChange', [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
this.dispatch('VFormRender', 'fieldChange',
[this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
// eventBus.$emit('fieldChange', [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
},
syncUpdateFormModel(value) {
@ -319,9 +341,9 @@ export default {
//number组件一般不会触发focus事件，故此处需要手工赋值oldFieldValue！！
this.oldFieldValue = deepClone(value) /* oldFieldValue需要在initFieldModel()方法中赋初值!! */
// /* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */
// this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name])
eventBus.$emit('fieldValidation', [this.field.options.name])
/* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */
this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name])
// eventBus.$emit('fieldValidation', [this.field.options.name])
},
handleFocusCustomEvent(event) {
@ -356,7 +378,7 @@ export default {
handleOnChange(val, oldVal) { //自定义onChange事件
console.log('test', 'aaaaaaaaa')
debugger
//debugger
if (!!this.field.options.onChange) {
let changeFn = new Function('value', 'oldValue', this.field.options.onChange)

4
src/components/form-designer/form-widget/field-widget/input-widget.vue
View File

@ -14,8 +14,8 @@
:prefix-icon="field.options.prefixIcon" :suffix-icon="field.options.suffixIcon"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
@change="handleChangeEvent">
<template #append>
<el-button v-if="field.options.appendButton" :disabled="field.options.disabled || field.options.appendButtonDisabled"
<template #append v-if="field.options.appendButton">
<el-button :disabled="field.options.disabled || field.options.appendButtonDisabled"
:class="field.options.buttonIcon" @click="emitAppendButtonClick"></el-button>
</template>
</el-input>

21
src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
View File

@ -9,6 +9,16 @@
@focus="handleRichEditorFocusEvent" @blur="handleRichEditorBlurEvent">
</vue-editor>
-->
<quill-editor
v-model:value="fieldModel"
:options="editorOption"
:disabled="field.options.disabled"
@blur="handleRichEditorBlurEvent"
@focus="handleRichEditorFocusEvent"
@change="handleRichEditorChangeEvent"
/>
</form-item-wrapper>
</template>
@ -19,6 +29,8 @@
import {deepClone} from "@/utils/util";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import { Quill, quillEditor } from 'vue3-quill'
export default {
name: "rich-editor-widget",
componentName: 'FieldWidget', //必须固定为FieldWidget，用于接收父级组件的broadcast事件
@ -55,6 +67,7 @@
// VueEditor: resolve => { //懒加载！！
// require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor))
// }
quillEditor,
},
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
data() {
@ -68,6 +81,14 @@
}
},
computed: {
editorOption() {
return {
placeholder: this.field.options.placeholder,
modules: {
//toolbar: this.customToolbar
}
}
},
},
beforeCreate() {

88
src/components/form-designer/setting-panel/form-setting.vue
View File

@ -80,49 +80,55 @@
</el-collapse>
</el-form>
<el-dialog :title="i18nt('designer.setting.editFormEventHandler')" v-model="showFormEventDialogFlag"
v-if="showFormEventDialogFlag" :show-close="true" custom-class="small-padding-dialog"
: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>
<el-alert type="info" :closable="false" title="}"></el-alert>
<template #footer>
<div class="dialog-footer">
<el-button @click="showFormEventDialogFlag = false">
{{i18nt('designer.hint.cancel')}}</el-button>
<el-button type="primary" @click="saveFormEventHandler">
{{i18nt('designer.hint.confirm')}}</el-button>
</div>
</template>
</el-dialog>
<div v-if="showFormEventDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.editFormEventHandler')" v-model="showFormEventDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
: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>
<el-alert type="info" :closable="false" title="}"></el-alert>
<template #footer>
<div class="dialog-footer">
<el-button @click="showFormEventDialogFlag = false">
{{i18nt('designer.hint.cancel')}}</el-button>
<el-button type="primary" @click="saveFormEventHandler">
{{i18nt('designer.hint.confirm')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.setting.formCss')" v-model="showEditFormCssDialogFlag"
v-if="showEditFormCssDialogFlag" :show-close="true" custom-class="small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
<template #footer>
<div class="dialog-footer">
<el-button @click="showEditFormCssDialogFlag = false">
{{i18nt('designer.hint.cancel')}}</el-button>
<el-button type="primary" @click="saveFormCss">
{{i18nt('designer.hint.confirm')}}</el-button>
</div>
</template>
</el-dialog>
<div v-if="showEditFormCssDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.formCss')" v-model="showEditFormCssDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
<template #footer>
<div class="dialog-footer">
<el-button @click="showEditFormCssDialogFlag = false">
{{i18nt('designer.hint.cancel')}}</el-button>
<el-button type="primary" @click="saveFormCss">
{{i18nt('designer.hint.confirm')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.setting.globalFunctions')" v-model="showEditFunctionsDialogFlag"
v-if="showEditFunctionsDialogFlag" :show-close="true" custom-class="small-padding-dialog"
: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>
<template #footer>
<div class="dialog-footer">
<el-button @click="showEditFunctionsDialogFlag = false">
{{i18nt('designer.hint.cancel')}}</el-button>
<el-button type="primary" @click="saveGlobalFunctions">
{{i18nt('designer.hint.confirm')}}</el-button>
</div>
</template>
</el-dialog>
<div v-if="showEditFunctionsDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.globalFunctions')" v-model="showEditFunctionsDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
: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>
<template #footer>
<div class="dialog-footer">
<el-button @click="showEditFunctionsDialogFlag = false">
{{i18nt('designer.hint.cancel')}}</el-button>
<el-button type="primary" @click="saveGlobalFunctions">
{{i18nt('designer.hint.confirm')}}</el-button>
</div>
</template>
</el-dialog>
</div>
</div>
</template>

44
src/components/form-designer/setting-panel/index.vue
View File

@ -71,21 +71,23 @@
</el-tab-pane>
</el-tabs>
<el-dialog :title="i18nt('designer.setting.editWidgetEventHandler')" v-model="showWidgetEventDialogFlag"
v-if="showWidgetEventDialogFlag" :show-close="true" custom-class="small-padding-dialog"
: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>
<el-alert type="info" :closable="false" title="}"></el-alert>
<template #footer>
<div class="dialog-footer">
<el-button @click="showWidgetEventDialogFlag = false">
{{i18nt('designer.hint.cancel')}}</el-button>
<el-button type="primary" @click="saveEventHandler">
{{i18nt('designer.hint.confirm')}}</el-button>
</div>
</template>
</el-dialog>
<div v-if="showWidgetEventDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.editWidgetEventHandler')" v-model="showWidgetEventDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
: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>
<el-alert type="info" :closable="false" title="}"></el-alert>
<template #footer>
<div class="dialog-footer">
<el-button @click="showWidgetEventDialogFlag = false">
{{i18nt('designer.hint.cancel')}}</el-button>
<el-button type="primary" @click="saveEventHandler">
{{i18nt('designer.hint.confirm')}}</el-button>
</div>
</template>
</el-dialog>
</div>
</el-container>
</template>
@ -100,13 +102,14 @@
} from "@/utils/util"
import i18n from "@/utils/i18n"
import eventBus from "@/utils/event-bus"
import emitter from "@/utils/emitter";
const {COMMON_PROPERTIES, ADVANCED_PROPERTIES, EVENT_PROPERTIES} = WidgetProperties
export default {
name: "SettingPanel",
componentName: "SettingPanel",
mixins: [i18n],
mixins: [i18n, emitter],
components: {
CodeEditor,
FormSetting,
@ -178,11 +181,14 @@
},
created() {
// eventBus.$on('editEventHandler', (eventName, eventParams) => {
// //debugger
// this.editEventHandler(eventName, eventParams)
// })
eventBus.$on('editEventHandler', (eventParams) => {
// eventBus.$on('editEventHandler', (eventParams) => {
// this.editEventHandler(eventParams[0], eventParams[1])
// })
this.on$('editEventHandler', (eventParams) => {
//debugger
this.editEventHandler(eventParams[0], eventParams[1])
})
@ -253,7 +259,7 @@
},
editEventHandler(eventName, eventParams) {
debugger
//debugger
this.curEventName = eventName
this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`

53
src/components/form-designer/setting-panel/option-items-setting.vue
View File

@ -50,31 +50,36 @@
<el-button type="text" @click="resetDefault">{{i18nt('designer.setting.resetDefault')}}</el-button>
</div>
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportDialogFlag"
v-if="showImportDialogFlag" :show-close="true" custom-class="small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-form-item>
<el-input type="textarea" rows="10" v-model="optionLines"></el-input>
</el-form-item>
<template #footer>
<div class="dialog-footer">
<el-button size="large" type="primary" @click="saveOptions">{{i18nt('designer.hint.confirm')}}</el-button>
<el-button size="large" type="" @click="showImportDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
</div>
</template>
</el-dialog>
<div v-if="showImportDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-form-item>
<el-input type="textarea" rows="10" v-model="optionLines"></el-input>
</el-form-item>
<template #footer>
<div class="dialog-footer">
<el-button size="large" type="primary" @click="saveOptions">{{i18nt('designer.hint.confirm')}}</el-button>
<el-button size="large" type="" @click="showImportDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<div v-if="showImportCascaderDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportCascaderDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor v-model="cascaderOptions" mode="json" :readonly="false"></code-editor>
<template #footer>
<div class="dialog-footer">
<el-button size="large" type="primary" @click="saveCascaderOptions">{{i18nt('designer.hint.confirm')}}</el-button>
<el-button size="large" type="" @click="showImportCascaderDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.setting.importOptions')" v-model="showImportCascaderDialogFlag"
v-if="showImportCascaderDialogFlag" :show-close="true" custom-class="small-padding-dialog"
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor v-model="cascaderOptions" mode="json" :readonly="false"></code-editor>
<template #footer>
<div class="dialog-footer">
<el-button size="large" type="primary" @click="saveCascaderOptions">{{i18nt('designer.hint.confirm')}}</el-button>
<el-button size="large" type="" @click="showImportCascaderDialogFlag = false">{{i18nt('designer.hint.cancel')}}</el-button>
</div>
</template>
</el-dialog>
</div>
</template>

5
src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
View File

@ -6,9 +6,8 @@ export default {
created() {},
methods: {
editEventHandler(eventName, eventParams) {
//this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
eventBus.$emit('editEventHandler', [eventName, [...eventParams]])
this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
// eventBus.$emit('editEventHandler', [eventName, [...eventParams]])
},
}

18
src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-defaultValue-editor.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "cascader-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

18
src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "checkbox-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

2
src/components/form-designer/setting-panel/property-editor/field-number/number-defaultValue-editor.vue
View File

@ -10,7 +10,7 @@
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
export default {
name: "defaultValue-editor",
name: "number-defaultValue-editor",
mixins: [i18n, propertyMixin],
props: {
designer: Object,

18
src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "radio-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

18
src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "select-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

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

@ -41,28 +41,30 @@
</template>
</div>
<el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag" v-if="showPreviewDialogFlag"
:show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
:destroy-on-close="true" custom-class="small-padding-dialog" width="75%" :fullscreen="layoutType === 'H5'">
<div>
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : '']">
<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
:option-data="testOptionData"
@appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
@formChange="handleFormChange">
</VFormRender>
<div v-if="showPreviewDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
:show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
:destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%" :fullscreen="layoutType === 'H5'">
<div>
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : '']">
<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
:option-data="testOptionData"
@appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
@formChange="handleFormChange">
</VFormRender>
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="getFormData">{{i18nt('designer.hint.getFormData')}}</el-button>
<el-button type="primary" @click="resetForm">{{i18nt('designer.hint.resetForm')}}</el-button>
<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>
</div>
</template>
</el-dialog>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="getFormData">{{i18nt('designer.hint.getFormData')}}</el-button>
<el-button type="primary" @click="resetForm">{{i18nt('designer.hint.resetForm')}}</el-button>
<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>
</div>
</template>
</el-dialog>
</div>
<div v-if="showImportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.importJson')" v-model="showImportJsonDialogFlag"
@ -81,88 +83,97 @@
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.toolbar.exportJson')" v-model="showExportJsonDialogFlag"
v-if="showExportJsonDialogFlag" :show-close="true" custom-class="small-padding-dialog" center
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'json'" :readonly="true" v-model="jsonContent"></code-editor>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-json-btn" :data-clipboard-text="jsonRawContent" @click="copyFormJson">
{{i18nt('designer.hint.copyJson')}}</el-button>
<el-button @click="saveFormJson">{{i18nt('designer.hint.saveFormJson')}}</el-button>
<el-button type="" @click="showExportJsonDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div>
</template>
</el-dialog>
<div v-if="showExportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.exportJson')" v-model="showExportJsonDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" center
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<code-editor :mode="'json'" :readonly="true" v-model="jsonContent"></code-editor>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-json-btn" :data-clipboard-text="jsonRawContent" @click="copyFormJson">
{{i18nt('designer.hint.copyJson')}}</el-button>
<el-button @click="saveFormJson">{{i18nt('designer.hint.saveFormJson')}}</el-button>
<el-button type="" @click="showExportJsonDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.toolbar.exportCode')" v-model="showExportCodeDialogFlag"
v-if="showExportCodeDialogFlag" :show-close="true" custom-class="small-padding-dialog" center
width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeCodeTab">
<el-tab-pane label="Vue" name="vue">
<code-editor :mode="'html'" :readonly="true" v-model="vueCode" :user-worker="false"></code-editor>
</el-tab-pane>
<el-tab-pane label="HTML" name="html">
<code-editor :mode="'html'" :readonly="true" v-model="htmlCode" :user-worker="false"></code-editor>
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-vue-btn" :data-clipboard-text="vueCode" @click="copyVueCode">
{{i18nt('designer.hint.copyVueCode')}}</el-button>
<el-button type="primary" class="copy-html-btn" :data-clipboard-text="htmlCode" @click="copyHtmlCode">
{{i18nt('designer.hint.copyHtmlCode')}}</el-button>
<el-button @click="saveVueCode">{{i18nt('designer.hint.saveVueCode')}}</el-button>
<el-button @click="saveHtmlCode">{{i18nt('designer.hint.saveHtmlCode')}}</el-button>
<el-button type="" @click="showExportCodeDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div>
</template>
</el-dialog>
<div v-if="showExportCodeDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.exportCode')" v-model="showExportCodeDialogFlag"
:show-close="true" custom-class="drag-dialog small-padding-dialog" center
width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeCodeTab">
<el-tab-pane label="Vue" name="vue">
<code-editor :mode="'html'" :readonly="true" v-model="vueCode" :user-worker="false"></code-editor>
</el-tab-pane>
<el-tab-pane label="HTML" name="html">
<code-editor :mode="'html'" :readonly="true" v-model="htmlCode" :user-worker="false"></code-editor>
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-vue-btn" :data-clipboard-text="vueCode" @click="copyVueCode">
{{i18nt('designer.hint.copyVueCode')}}</el-button>
<el-button type="primary" class="copy-html-btn" :data-clipboard-text="htmlCode" @click="copyHtmlCode">
{{i18nt('designer.hint.copyHtmlCode')}}</el-button>
<el-button @click="saveVueCode">{{i18nt('designer.hint.saveVueCode')}}</el-button>
<el-button @click="saveHtmlCode">{{i18nt('designer.hint.saveHtmlCode')}}</el-button>
<el-button type="" @click="showExportCodeDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.hint.exportFormData')" v-model="showFormDataDialogFlag"
v-if="showFormDataDialogFlag" :show-close="true" custom-class="dialog-title-light-bg" center
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"
:append-to-body="true">
<div style="border: 1px solid #DCDFE6">
<code-editor :mode="'json'" :readonly="true" v-model="formDataJson"></code-editor>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-form-data-json-btn" :data-clipboard-text="formDataRawJson" @click="copyFormDataJson">
{{i18nt('designer.hint.copyFormData')}}</el-button>
<el-button @click="saveFormData">{{i18nt('designer.hint.saveFormData')}}</el-button>
<el-button type="" @click="showFormDataDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
<div v-if="showFormDataDialogFlag" class="" v-drag="['.nested-drag-dialog.el-dialog', '.nested-drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.hint.exportFormData')" v-model="showFormDataDialogFlag"
:show-close="true" custom-class="nested-drag-dialog dialog-title-light-bg" center
:close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"
:append-to-body="true">
<div style="border: 1px solid #DCDFE6">
<code-editor :mode="'json'" :readonly="true" v-model="formDataJson"></code-editor>
</div>
</template>
</el-dialog>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-form-data-json-btn" :data-clipboard-text="formDataRawJson" @click="copyFormDataJson">
{{i18nt('designer.hint.copyFormData')}}</el-button>
<el-button @click="saveFormData">{{i18nt('designer.hint.saveFormData')}}</el-button>
<el-button type="" @click="showFormDataDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<div v-if="showExportSFCDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
<el-dialog :title="i18nt('designer.toolbar.generateSFC')" v-model="showExportSFCDialogFlag"
v-if="showExportSFCDialogFlag" :show-close="true" custom-class="drag-dialog small-padding-dialog" center
width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeSFCTab">
<el-tab-pane label="Vue2" name="vue2">
<code-editor :mode="'html'" :readonly="true" v-model="sfcCode" :user-worker="false"></code-editor>
</el-tab-pane>
<el-tab-pane label="Vue3" name="vue3">
<code-editor :mode="'html'" :readonly="true" v-model="sfcCodeV3" :user-worker="false"></code-editor>
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-vue2-sfc-btn" :data-clipboard-text="sfcCode" @click="copyV2SFC">
{{i18nt('designer.hint.copyVue2SFC')}}</el-button>
<el-button type="primary" class="copy-vue3-sfc-btn" :data-clipboard-text="sfcCodeV3" @click="copyV3SFC">
{{i18nt('designer.hint.copyVue3SFC')}}</el-button>
<el-button @click="saveV2SFC">{{i18nt('designer.hint.saveVue2SFC')}}</el-button>
<el-button @click="saveV3SFC">{{i18nt('designer.hint.saveVue3SFC')}}</el-button>
<el-button type="" @click="showExportSFCDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div>
</template>
</el-dialog>
</div>
<el-dialog :title="i18nt('designer.toolbar.generateSFC')" v-model="showExportSFCDialogFlag"
v-if="showExportSFCDialogFlag" :show-close="true" custom-class="small-padding-dialog" center
width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeSFCTab">
<el-tab-pane label="Vue2" name="vue2">
<code-editor :mode="'html'" :readonly="true" v-model="sfcCode" :user-worker="false"></code-editor>
</el-tab-pane>
<el-tab-pane label="Vue3" name="vue3">
<code-editor :mode="'html'" :readonly="true" v-model="sfcCodeV3" :user-worker="false"></code-editor>
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" class="copy-vue2-sfc-btn" :data-clipboard-text="sfcCode" @click="copyV2SFC">
{{i18nt('designer.hint.copyVue2SFC')}}</el-button>
<el-button type="primary" class="copy-vue3-sfc-btn" :data-clipboard-text="sfcCodeV3" @click="copyV3SFC">
{{i18nt('designer.hint.copyVue3SFC')}}</el-button>
<el-button @click="saveV2SFC">{{i18nt('designer.hint.saveVue2SFC')}}</el-button>
<el-button @click="saveV3SFC">{{i18nt('designer.hint.saveVue3SFC')}}</el-button>
<el-button type="" @click="showExportSFCDialogFlag = false">
{{i18nt('designer.hint.closePreview')}}</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
@ -442,7 +453,7 @@
doJsonImport() {
try {
let importObj = JSON.parse(this.importTemplate)
console.log('test import', this.importTemplate)
//console.log('test import', this.importTemplate)
this.designer.loadFormJson(importObj)
this.showImportJsonDialogFlag = false

3
src/components/form-render/container-item/sub-form-item.vue
View File

@ -192,7 +192,8 @@
return
}
eventBus.$on('setFormData', (newFormData) => {
//eventBus.$on('setFormData', (newFormData) => {
this.on$('setFormData', (newFormData) => {
this.initRowIdData(false)
this.initFieldSchemaData()

12
src/components/form-render/index.vue
View File

@ -259,16 +259,20 @@
},
addFieldChangeEventHandler() {
eventBus.$off('fieldChange') //移除原有事件监听
eventBus.$on('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
//eventBus.$off('fieldChange') //移除原有事件监听
this.off$('fieldChange') //移除原有事件监听
//eventBus.$on('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
this.on$('fieldChange', (fieldName, newValue, oldValue, subFormName, subFormRowIndex) => {
this.handleFieldDataChange(fieldName, newValue, oldValue, subFormName, subFormRowIndex)
this.$emit('formChange', fieldName, newValue, oldValue, this.formDataModel, subFormName, subFormRowIndex)
})
},
addFieldValidateEventHandler() {
eventBus.$off('fieldValidation') //移除原有事件监听
eventBus.$on('fieldValidation', (fieldName) => {
//eventBus.$off('fieldValidation') //移除原有事件监听
this.off$('fieldValidation') //移除原有事件监听
//eventBus.$on('fieldValidation', (fieldName) => {
this.on$('fieldValidation', (fieldName) => {
this.$refs.renderForm.validateField(fieldName)
})
},