images/variant-form3-vite
2
0
Fork 0
mirror of https://github.com/vform666/variant-form3-vite.git synced 2024-11-10 09:39:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

1. input组件增加onAppendButtonClick交互事件；

Browse Source 
2. 增加组件动态添加或移除自定义样式的API方法；
3. 修复部分bug。
This commit is contained in:
vdpAdmin 2022-07-06 15:31:37 +08:00
parent 44b2423eb1
commit ea82b92682
11 changed files with 135 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -112,6 +112,10 @@
.form-widget-list {
min-height: 28px;
}
:deep(.el-tabs__content) {
min-height: 28px;
}
}
.tab-container.selected {

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

@ -364,8 +364,17 @@ export default {
},
emitAppendButtonClick() {
/* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
this.dispatch('VFormRender', 'appendButtonClick', [this]);
if (!!this.designState) { //设计状态不触发点击事件
return
}
if (!!this.field.options.onAppendButtonClick) {
let customFn = new Function(this.field.options.onAppendButtonClick)
customFn.call(this)
} else {
/* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
this.dispatch('VFormRender', 'appendButtonClick', [this])
}
},
handleOnChange(val, oldVal) { //自定义onChange事件
@ -568,6 +577,46 @@ export default {
this.customToolbar = customToolbar
},
/**
* 是否子表单内嵌的组件
* @returns {boolean}
*/
isSubFormItem() {
return !!this.parentWidget ? this.parentWidget.type === 'sub-form' : false
},
/**
* 动态增加自定义css样式
* @param className
*/
addCssClass(className) {
if (!this.field.options.customClass) {
this.field.options.customClass = [className]
} else {
this.field.options.customClass.push(className)
}
},
/**
* 动态移除自定义css样式
* @param className
*/
removeCssClass(className) {
if (!this.field.options.customClass) {
return
}
let foundIdx = -1
this.field.options.customClass.map((cc, idx) => {
if (cc === className) {
foundIdx = idx
}
})
if (foundIdx > -1) {
this.field.options.customClass.splice(foundIdx, 1)
}
},
//--------------------- 以上为组件支持外部调用的API方法 end ------------------//
}

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

@ -22,10 +22,10 @@
<div class="upload-file-list">
<span class="upload-file-name" :title="file.name">{{file.name}}</span>
<a :href="file.url" download="">
<span class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')">
<span class="el-icon-download file-action" :title="i18nt('render.hint.downloadFile')">
<svg-icon icon-class="el-download" />
</span></a>
<span class="file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
<span class="file-action" :title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
@click="removeUploadFile(file.name)"><svg-icon icon-class="el-delete" /></span>
</div>
</template>

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

@ -138,7 +138,7 @@
docUrl: 'https://www.vform666.com/document3.html',
gitUrl: 'https://github.com/vform666/variant-form3-vite',
chatUrl: 'https://www.vform666.com/chat-group.html',
chatUrl: 'https://www.vform666.com/pages/chat-group/',
subScribeUrl: 'https://www.vform666.com/pages/pro/',
scrollerHeight: 0,

30
src/components/form-designer/setting-panel/property-editor/event-handler/onAppendButtonClick-editor.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<el-form-item label="onAppendButtonClick" label-width="150px">
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onAppendButtonClick', eventParams)">
{{i18nt('designer.setting.addEventHandler')}}</el-button>
</el-form-item>
</template>
<script>
import i18n from "@/utils/i18n"
import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
export default {
name: "onAppendButtonClick-editor",
mixins: [i18n, eventMixin],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
data() {
return {
eventParams: [],
}
}
}
</script>
<style scoped>
</style>

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

@ -121,6 +121,7 @@ const EVENT_PROPERTIES = {
'onUploadError' : 'onUploadError-editor',
'onFileRemove' : 'onFileRemove-editor',
'onValidate' : 'onValidate-editor',
'onAppendButtonClick': 'onAppendButtonClick-editor',
//容器
'onSubFormRowAdd' : 'onSubFormRowAdd-editor',

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

@ -46,12 +46,12 @@
<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%"
:destroy-on-close="true" :append-to-body="true" custom-class="drag-dialog small-padding-dialog" width="75%"
:fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
<div>
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
:option-data="testOptionData"
:option-data="testOptionData" @myEmitTest="onMyEmitTest"
@appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
@formChange="handleFormChange">
</VFormRender>
@ -667,6 +667,10 @@
console.log('test', button)
},
onMyEmitTest(aaa) {
console.log('-----', aaa)
},
findWidgetById(wId) {
let foundW = null
traverseAllWidgets(this.designer.widgetList, (w) => {

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

@ -142,6 +142,7 @@ export const basicFields = [
onFocus: '',
onBlur: '',
onValidate: '',
onAppendButtonClick: '',
},
},

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

@ -176,6 +176,38 @@ export default {
// //TODO:
// },
/**
* 动态增加自定义css样式
* @param className
*/
addCssClass(className) {
if (!this.widget.options.customClass) {
this.widget.options.customClass = [className]
} else {
this.widget.options.customClass.push(className)
}
},
/**
* 动态移除自定义css样式
* @param className
*/
removeCssClass(className) {
if (!this.widget.options.customClass) {
return
}
let foundIdx = -1
this.widget.options.customClass.map((cc, idx) => {
if (cc === className) {
foundIdx = idx
}
})
if (foundIdx > -1) {
this.widget.options.customClass.splice(foundIdx, 1)
}
},
//--------------------- 以上为组件支持外部调用的API方法 end ------------------//
},

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

@ -477,7 +477,6 @@
// 通知SubForm组件：表单数据更新事件！！
this.broadcast('ContainerItem', 'setFormData', this.formDataModel)
// 通知FieldWidget组件：表单数据更新事件！！
this.broadcast('FieldWidget', 'setFormData', this.formDataModel)
},

14
src/utils/util.js
View File

@ -126,28 +126,28 @@ export const loadRemoteScript = function(srcPath, callback) { /*加载远程js
}
}
export function traverseFieldWidgets(widgetList, handler) {
export function traverseFieldWidgets(widgetList, handler, parent = null) {
widgetList.map(w => {
if (w.formItemFlag) {
handler(w)
handler(w, parent)
} else if (w.type === 'grid') {
w.cols.map(col => {
traverseFieldWidgets(col.widgetList, handler)
traverseFieldWidgets(col.widgetList, handler, w)
})
} else if (w.type === 'table') {
w.rows.map(row => {
row.cols.map(cell => {
traverseFieldWidgets(cell.widgetList, handler)
traverseFieldWidgets(cell.widgetList, handler, w)
})
})
} else if (w.type === 'tab') {
w.tabs.map(tab => {
traverseFieldWidgets(tab.widgetList, handler)
traverseFieldWidgets(tab.widgetList, handler, w)
})
} else if (w.type === 'sub-form') {
traverseFieldWidgets(w.widgetList, handler)
traverseFieldWidgets(w.widgetList, handler, w)
} else if (w.category === 'container') { //自定义容器
traverseFieldWidgets(w.widgetList, handler)
traverseFieldWidgets(w.widgetList, handler, w)
}
})
}