mirror of
https://github.com/vform666/variant-form3-vite.git
synced 2024-11-13 02:59:22 +08:00
1. input组件增加onAppendButtonClick交互事件;
2. 增加组件动态添加或移除自定义样式的API方法; 3. 修复部分bug。
This commit is contained in:
parent
44b2423eb1
commit
ea82b92682
@ -112,6 +112,10 @@
|
|||||||
.form-widget-list {
|
.form-widget-list {
|
||||||
min-height: 28px;
|
min-height: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__content) {
|
||||||
|
min-height: 28px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-container.selected {
|
.tab-container.selected {
|
||||||
|
@ -364,8 +364,17 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
emitAppendButtonClick() {
|
emitAppendButtonClick() {
|
||||||
/* 必须调用mixins中的dispatch方法逐级向父组件发送消息!! */
|
if (!!this.designState) { //设计状态不触发点击事件
|
||||||
this.dispatch('VFormRender', 'appendButtonClick', [this]);
|
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事件
|
handleOnChange(val, oldVal) { //自定义onChange事件
|
||||||
@ -568,6 +577,46 @@ export default {
|
|||||||
this.customToolbar = customToolbar
|
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 ------------------//
|
//--------------------- 以上为组件支持外部调用的API方法 end ------------------//
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -22,10 +22,10 @@
|
|||||||
<div class="upload-file-list">
|
<div class="upload-file-list">
|
||||||
<span class="upload-file-name" :title="file.name">{{file.name}}</span>
|
<span class="upload-file-name" :title="file.name">{{file.name}}</span>
|
||||||
<a :href="file.url" download="">
|
<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" />
|
<svg-icon icon-class="el-download" />
|
||||||
</span></a>
|
</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>
|
@click="removeUploadFile(file.name)"><svg-icon icon-class="el-delete" /></span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -138,7 +138,7 @@
|
|||||||
|
|
||||||
docUrl: 'https://www.vform666.com/document3.html',
|
docUrl: 'https://www.vform666.com/document3.html',
|
||||||
gitUrl: 'https://github.com/vform666/variant-form3-vite',
|
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/',
|
subScribeUrl: 'https://www.vform666.com/pages/pro/',
|
||||||
|
|
||||||
scrollerHeight: 0,
|
scrollerHeight: 0,
|
||||||
|
@ -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>
|
@ -121,6 +121,7 @@ const EVENT_PROPERTIES = {
|
|||||||
'onUploadError' : 'onUploadError-editor',
|
'onUploadError' : 'onUploadError-editor',
|
||||||
'onFileRemove' : 'onFileRemove-editor',
|
'onFileRemove' : 'onFileRemove-editor',
|
||||||
'onValidate' : 'onValidate-editor',
|
'onValidate' : 'onValidate-editor',
|
||||||
|
'onAppendButtonClick': 'onAppendButtonClick-editor',
|
||||||
|
|
||||||
//容器
|
//容器
|
||||||
'onSubFormRowAdd' : 'onSubFormRowAdd-editor',
|
'onSubFormRowAdd' : 'onSubFormRowAdd-editor',
|
||||||
|
@ -46,12 +46,12 @@
|
|||||||
<div v-if="showPreviewDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
|
<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"
|
<el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
|
||||||
:show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
|
: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')">
|
:fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
|
||||||
<div>
|
<div>
|
||||||
<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
|
<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"
|
<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
|
||||||
:option-data="testOptionData"
|
:option-data="testOptionData" @myEmitTest="onMyEmitTest"
|
||||||
@appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
|
@appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
|
||||||
@formChange="handleFormChange">
|
@formChange="handleFormChange">
|
||||||
</VFormRender>
|
</VFormRender>
|
||||||
@ -667,6 +667,10 @@
|
|||||||
console.log('test', button)
|
console.log('test', button)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
onMyEmitTest(aaa) {
|
||||||
|
console.log('-----', aaa)
|
||||||
|
},
|
||||||
|
|
||||||
findWidgetById(wId) {
|
findWidgetById(wId) {
|
||||||
let foundW = null
|
let foundW = null
|
||||||
traverseAllWidgets(this.designer.widgetList, (w) => {
|
traverseAllWidgets(this.designer.widgetList, (w) => {
|
||||||
|
@ -142,6 +142,7 @@ export const basicFields = [
|
|||||||
onFocus: '',
|
onFocus: '',
|
||||||
onBlur: '',
|
onBlur: '',
|
||||||
onValidate: '',
|
onValidate: '',
|
||||||
|
onAppendButtonClick: '',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -176,6 +176,38 @@ export default {
|
|||||||
// //TODO:
|
// //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 ------------------//
|
//--------------------- 以上为组件支持外部调用的API方法 end ------------------//
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -477,7 +477,6 @@
|
|||||||
|
|
||||||
// 通知SubForm组件:表单数据更新事件!!
|
// 通知SubForm组件:表单数据更新事件!!
|
||||||
this.broadcast('ContainerItem', 'setFormData', this.formDataModel)
|
this.broadcast('ContainerItem', 'setFormData', this.formDataModel)
|
||||||
|
|
||||||
// 通知FieldWidget组件:表单数据更新事件!!
|
// 通知FieldWidget组件:表单数据更新事件!!
|
||||||
this.broadcast('FieldWidget', 'setFormData', this.formDataModel)
|
this.broadcast('FieldWidget', 'setFormData', this.formDataModel)
|
||||||
},
|
},
|
||||||
|
@ -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 => {
|
widgetList.map(w => {
|
||||||
if (w.formItemFlag) {
|
if (w.formItemFlag) {
|
||||||
handler(w)
|
handler(w, parent)
|
||||||
} else if (w.type === 'grid') {
|
} else if (w.type === 'grid') {
|
||||||
w.cols.map(col => {
|
w.cols.map(col => {
|
||||||
traverseFieldWidgets(col.widgetList, handler)
|
traverseFieldWidgets(col.widgetList, handler, w)
|
||||||
})
|
})
|
||||||
} else if (w.type === 'table') {
|
} else if (w.type === 'table') {
|
||||||
w.rows.map(row => {
|
w.rows.map(row => {
|
||||||
row.cols.map(cell => {
|
row.cols.map(cell => {
|
||||||
traverseFieldWidgets(cell.widgetList, handler)
|
traverseFieldWidgets(cell.widgetList, handler, w)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
} else if (w.type === 'tab') {
|
} else if (w.type === 'tab') {
|
||||||
w.tabs.map(tab => {
|
w.tabs.map(tab => {
|
||||||
traverseFieldWidgets(tab.widgetList, handler)
|
traverseFieldWidgets(tab.widgetList, handler, w)
|
||||||
})
|
})
|
||||||
} else if (w.type === 'sub-form') {
|
} else if (w.type === 'sub-form') {
|
||||||
traverseFieldWidgets(w.widgetList, handler)
|
traverseFieldWidgets(w.widgetList, handler, w)
|
||||||
} else if (w.category === 'container') { //自定义容器
|
} else if (w.category === 'container') { //自定义容器
|
||||||
traverseFieldWidgets(w.widgetList, handler)
|
traverseFieldWidgets(w.widgetList, handler, w)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user