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

初步完成库文件打包配置。

Browse Source
This commit is contained in:
vdpAdmin
2022-01-01 19:15:45 +08:00
parent 64007472a2
commit 23615147a3
27 changed files with 1072 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
View File

@ -43,7 +43,7 @@
</template>
<script>
import Draggable from 'vuedraggable'
//import Draggable from 'vuedraggable'
import i18n from "@/utils/i18n";
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
@ -52,7 +52,7 @@
componentName: "GridColWidget",
mixins: [i18n],
components: {
Draggable,
//Draggable,
...FieldComponents,
},
props: {

4
src/components/form-designer/form-widget/container-widget/tab-widget.vue
View File

@ -44,7 +44,7 @@
</template>
<script>
import Draggable from 'vuedraggable'
//import Draggable from 'vuedraggable'
import i18n from "@/utils/i18n"
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
@ -56,7 +56,7 @@
mixins: [i18n, containerMixin],
components: {
ContainerWrapper,
Draggable,
//Draggable,
...FieldComponents,
},

4
src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
View File

@ -55,7 +55,7 @@
</template>
<script>
import Draggable from 'vuedraggable'
//import Draggable from 'vuedraggable'
import i18n from "@/utils/i18n"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
@ -64,7 +64,7 @@
componentName: "TableCellWidget",
mixins: [i18n],
components: {
Draggable,
//Draggable,
...FieldComponents,
},
props: {

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

@ -6,6 +6,10 @@ export default {
inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel', 'getOptionData'],
computed: {
widgetSize() {
return this.field.options.size || 'medium'
},
subFormName() {
return !!this.parentWidget ? this.parentWidget.options.name : ''
},
@ -84,14 +88,14 @@ export default {
},
initEventHandler() {
eventBus.$on('setFormData', function (newFormData) {
eventBus.$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', function (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)
@ -101,7 +105,7 @@ export default {
})
/* 监听重新加载选项事件 */
eventBus.$on('reloadOptionItems', function (widgetNames) {
eventBus.$on('reloadOptionItems', (widgetNames) => {
if ((widgetNames.length === 0) || (widgetNames.indexOf(this.field.options.name) > -1)) {
this.initOptionItems(true)
}
@ -284,11 +288,14 @@ export default {
//--------------------- 事件处理 begin ------------------//
emitFieldDataChange(newValue, oldValue) {
this.$emit('field-value-changed', [newValue, oldValue])
//this.$emit('field-value-changed', [newValue, oldValue])
eventBus.$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])
// /* 必须用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])
},
syncUpdateFormModel(value) {
@ -312,8 +319,9 @@ export default {
//number组件一般不会触发focus事件，故此处需要手工赋值oldFieldValue！！
this.oldFieldValue = deepClone(value) /* oldFieldValue需要在initFieldModel()方法中赋初值!! */
/* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */
this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name])
// /* 主动触发表单的单个字段校验，用于清除字段可能存在的校验错误提示 */
// this.dispatch('VFormRender', 'fieldValidation', [this.field.options.name])
eventBus.$emit('fieldValidation', [this.field.options.name])
},
handleFocusCustomEvent(event) {
@ -347,6 +355,9 @@ export default {
},
handleOnChange(val, oldVal) { //自定义onChange事件
console.log('test', 'aaaaaaaaa')
debugger
if (!!this.field.options.onChange) {
let changeFn = new Function('value', 'oldValue', this.field.options.onChange)
changeFn.call(this, val, oldVal)
@ -415,6 +426,9 @@ export default {
this.syncUpdateFormModel(newValue)
this.emitFieldDataChange(newValue, oldValue)
//debugger
console.log('test', 'dddddddd')
}
},

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

@ -4,7 +4,7 @@
:sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
<el-input-number ref="fieldEditor" v-model="fieldModel" class="full-width-input"
:disabled="field.options.disabled"
:size="field.options.size" :controls-position="field.options.controlsPosition"
:size="widgetSize" :controls-position="field.options.controlsPosition"
:placeholder="field.options.placeholder"
:min="field.options.min" :max="field.options.max"
:precision="field.options.precision" :step="field.options.step"

6
src/components/form-designer/form-widget/index.vue
View File

@ -6,9 +6,6 @@
<template v-if="designer.widgetList.length === 0">
<div class="no-widget-hint">{{i18nt('designer.noWidgetHint')}}</div>
<!-- 下面的div用于把父容器高度撑开！！
<div class="form-widget-list"></div>
-->
</template>
<div class="form-widget-list">
@ -34,7 +31,6 @@
</template>
<script>
import Draggable from 'vuedraggable'
import '@/components/form-designer/form-widget/container-widget/index'
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import i18n from "@/utils/i18n"
@ -44,8 +40,6 @@
componentName: "VFormWidget",
mixins: [i18n],
components: {
Draggable,
...FieldComponents,
},
props: {

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

@ -54,7 +54,8 @@
</el-container>
<el-aside>
<setting-panel :designer="designer" :selected-widget="designer.selectedWidget" :form-config="designer.formConfig" />
<setting-panel :designer="designer" :selected-widget="designer.selectedWidget"
:form-config="designer.formConfig" @edit-event-handler="testEEH" />
</el-aside>
</el-container>
@ -161,6 +162,11 @@
this.loadFieldListFromServer()
},
methods: {
testEEH(eventName, eventParams) {
console.log('test', eventName)
console.log('test222222', eventParams)
},
showLink(configName) {
if (this.designerConfig[configName] === undefined) {
return true

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

@ -177,8 +177,14 @@
},
created() {
eventBus.$on('editEventHandler', function (eventName, eventParams) {
this.editEventHandler(eventName, eventParams)
// eventBus.$on('editEventHandler', (eventName, eventParams) => {
// //debugger
// this.editEventHandler(eventName, eventParams)
// })
eventBus.$on('editEventHandler', (eventParams) => {
//debugger
this.editEventHandler(eventParams[0], eventParams[1])
})
this.designer.handleEvent('form-css-updated', (cssClassList) => {
@ -247,6 +253,8 @@
},
editEventHandler(eventName, eventParams) {
debugger
this.curEventName = eventName
this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`
this.eventHandlerCode = this.selectedWidget.options[eventName] || ''

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

@ -2,7 +2,7 @@
<div class="option-items-pane">
<el-radio-group v-if="(selectedWidget.type === 'radio') || ((selectedWidget.type === 'select') && !selectedWidget.options.multiple)"
v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
<draggable tag="ul" :list="optionModel.optionItems"
<draggable tag="ul" :list="optionModel.optionItems" item-key="value"
v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
<template #item="{ element: option, index: idx }">
<li>
@ -19,7 +19,7 @@
</el-radio-group>
<el-checkbox-group v-else-if="(selectedWidget.type === 'checkbox') || ((selectedWidget.type === 'select') && selectedWidget.options.multiple)"
v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
<draggable tag="ul" :list="optionModel.optionItems"
<draggable tag="ul" :list="optionModel.optionItems" item-key="value"
v-bind="{group:'optionsGroup', ghostClass: 'ghost', handle: '.drag-option'}">
<template #item="{ element: option, index: idx }">
<li>
@ -79,7 +79,7 @@
</template>
<script>
import Draggable from 'vuedraggable'
//import Draggable from 'vuedraggable'
import CodeEditor from '@/components/code-editor/index'
import i18n from "@/utils/i18n";
@ -87,8 +87,7 @@
name: "OptionItemsSetting",
mixins: [i18n],
components: {
Draggable,
//CodeEditor: () => import('@/components/code-editor/index'),
//Draggable,
CodeEditor,
},
props: {

4
src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue
View File

@ -35,7 +35,7 @@
<script>
import i18n from "@/utils/i18n"
import Draggable from 'vuedraggable'
//import Draggable from 'vuedraggable'
import {deepClone} from "@/utils/util";
export default {
@ -43,7 +43,7 @@
componentName: 'PropertyEditor',
mixins: [i18n],
components: {
Draggable,
//Draggable,
},
props: {
designer: Object,

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

@ -1,11 +1,14 @@
import emitter from '@/utils/emitter'
import eventBus from "@/utils/event-bus"
export default {
mixins: [emitter],
created() {},
methods: {
editEventHandler(eventName, eventParams) {
this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
//this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
eventBus.$emit('editEventHandler', [eventName, [...eventParams]])
},
}

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

@ -0,0 +1,25 @@
<template>
<el-form-item :label="i18nt('designer.setting.defaultValue')">
<el-input-number v-if="!hasConfig('optionItems')" type="text" style="width: 100%" v-model="optionModel.defaultValue"
@change="emitDefaultValueChange"></el-input-number>
</el-form-item>
</template>
<script>
import i18n from "@/utils/i18n"
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
export default {
name: "defaultValue-editor",
mixins: [i18n, propertyMixin],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

4
src/components/form-designer/widget-panel/index.vue
View File

@ -88,7 +88,7 @@
</template>
<script>
import Draggable from 'vuedraggable'
//import Draggable from 'vuedraggable'
import {containers as CONS, basicFields as BFS, advancedFields as AFS, customFields as CFS} from "./widgetsConfig"
import {formTemplates} from './templatesConfig'
import {addWindowResizeHandler} from "@/utils/util"
@ -109,7 +109,7 @@ import { generateId } from '../../../utils/util'
name: "FieldPanel",
mixins: [i18n],
components: {
Draggable,
//Draggable,
},
props: {
designer: Object,

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

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