zcy
/
vue_form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

版本更新到3.0.3： 

1. 修复axios is not defined问题；
2. 图片、文件上传组件增加onFileRemove交互事件；
3. designer-config属性新增resetFormJson参数；
4. 修复选项数据动态加载可能无效的问题；
5. 修复其他一些小bug。
master
vdpAdmin 2022-02-23 10:40:44 +08:00
parent 167b3330d8
commit 8766345ceb
16 changed files with 94 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
install-render.js
View File

@ -30,10 +30,12 @@ const install = (app) => {
components.forEach(component => {
app.component(component.name, component)
})
window.axios = axios
}
if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时赋值axios！！ */
window.axios = axios
//window.axios = axios
}
export default {

4
install.js
View File

@ -60,10 +60,12 @@ const install = (app) => {
components.forEach(component => {
app.component(component.name, component)
})
window.axios = axios
}
if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时赋值axios！！ */
window.axios = axios
//window.axios = axios
}
export default {

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "variant-form3",
"version": "3.0.2",
"version": "3.0.3",
"private": false,
"scripts": {
"serve": "vite",

16
src/components/form-designer/designer.js
View File

@ -50,7 +50,7 @@ export function createDesigner(vueInstance) {
steps: [],
},
initDesigner() {
initDesigner(resetFormJson) {
this.widgetList = []
this.formConfig = deepClone(defaultFormConfig)
@ -61,7 +61,9 @@ export function createDesigner(vueInstance) {
"color:#333"
)
this.initHistoryData()
if (!resetFormJson) {
this.initHistoryData()
}
},
clearDesigner(skipHistoryChange) {
@ -149,7 +151,6 @@ export function createDesigner(vueInstance) {
if (!!evt.draggedContext && !!evt.draggedContext.element) {
let wgCategory = evt.draggedContext.element.category
let wgType = evt.draggedContext.element.type + ''
//console.log('wgType======', wgType)
if (!!evt.to) {
if ((evt.to.className === 'sub-form-table') && (wgCategory === 'container')) {
//this.$message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable'))
@ -165,7 +166,6 @@ export function createDesigner(vueInstance) {
if (!!evt.draggedContext && !!evt.draggedContext.element) {
let wgCategory = evt.draggedContext.element.category
let wgType = evt.draggedContext.element.type + ''
//console.log('wgType======', wgType)
if (!!evt.to) {
if ((evt.to.className === 'sub-form-table') && (wgType === 'slot')) {
//this.$message.info(this.vueInstance.i18nt('designer.hint.onlyFieldWidgetAcceptable'))
@ -714,7 +714,7 @@ export function createDesigner(vueInstance) {
let newWidget = deepClone(origin)
let tempId = generateId()
newWidget.id = newWidget.type.replace(/-/g, '') + tempId
console.log('test id===', newWidget.id)
//console.log('test id===', newWidget.id)
newWidget.options.name = newWidget.id
newWidget.options.label = newWidget.type.toLowerCase()
@ -865,8 +865,6 @@ export function createDesigner(vueInstance) {
},
emitHistoryChange() {
//console.log('------------', 'Form history changed!')
if (this.historyData.index === this.historyData.maxStep - 1) {
this.historyData.steps.shift()
} else {
@ -883,8 +881,6 @@ export function createDesigner(vueInstance) {
if (this.historyData.index < this.historyData.steps.length - 1) {
this.historyData.steps = this.historyData.steps.slice(0, this.historyData.index + 1)
}
console.log('history', this.historyData.index)
},
saveCurrentHistoryStep() {
@ -900,7 +896,6 @@ export function createDesigner(vueInstance) {
if (this.historyData.index !== 0) {
this.historyData.index--
}
console.log('undo', this.historyData.index)
this.widgetList = deepClone(this.historyData.steps[this.historyData.index].widgetList)
this.formConfig = deepClone(this.historyData.steps[this.historyData.index].formConfig)
@ -910,7 +905,6 @@ export function createDesigner(vueInstance) {
if (this.historyData.index !== (this.historyData.steps.length - 1)) {
this.historyData.index++
}
console.log('redo', this.historyData.index)
this.widgetList = deepClone(this.historyData.steps[this.historyData.index].widgetList)
this.formConfig = deepClone(this.historyData.steps[this.historyData.index].formConfig)

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

@ -160,14 +160,13 @@ export default {
if ((this.field.type === 'radio') || (this.field.type === 'checkbox')
|| (this.field.type === 'select') || (this.field.type === 'cascader')) {
if (!!this.globalOptionData && this.globalOptionData.hasOwnProperty(this.field.options.name)) {
/* 异步更新option-data之后globalOptionData不能获取到最新值，改用provide的getOptionData()方法 */
const newOptionItems = this.getOptionData()
if (!!newOptionItems && newOptionItems.hasOwnProperty(this.field.options.name)) {
if (!!keepSelected) {
//this.reloadOptions(this.globalOptionData[this.field.options.name]) /* 异步更新option-data之后不能获取到最新值，
// 以下改用provide的getOptionData()方法 */
const newOptionItems = this.getOptionData()
this.reloadOptions(newOptionItems[this.field.options.name])
} else {
this.loadOptions( this.globalOptionData[this.field.options.name] )
this.loadOptions(newOptionItems[this.field.options.name])
}
}
}
@ -420,9 +419,6 @@ export default {
this.syncUpdateFormModel(newValue)
this.emitFieldDataChange(newValue, oldValue)
//debugger
console.log('test', 'dddddddd')
}
},

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

@ -185,16 +185,15 @@
},
handleFileUpload(res, file, fileList) {
if (!!this.field.options.onUploadSuccess) {
let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
mountFunc.call(this, res, file, fileList)
} else {
if (file.status === 'success') {
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
this.updateUploadFieldModelAndEmitDataChange(fileList)
this.fileList = deepClone(fileList)
if (file.status === 'success') {
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
this.updateUploadFieldModelAndEmitDataChange(fileList)
this.fileList = deepClone(fileList)
this.uploadBtnHidden = fileList.length >= this.field.options.limit
this.uploadBtnHidden = fileList.length >= this.field.options.limit
if (!!this.field.options.onUploadSuccess) {
let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
mountFunc.call(this, res, file, fileList)
}
}
},
@ -202,23 +201,33 @@
handleFileRemove(file, fileList) {
this.fileList = deepClone(fileList) //this.fileList = fileList
this.updateUploadFieldModelAndEmitDataChange(fileList)
this.uploadBtnHidden = fileList.length >= this.field.options.limit
if (!!this.field.options.onFileRemove) {
let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
customFn.call(this, file, fileList)
}
},
removeUploadFile(fileName) {
let foundIdx = -1
let foundFile = null
this.fileList.forEach((file,idx) => {
if (file.name === fileName) {
foundIdx = idx
foundFile = file
}
})
if (foundIdx >= 0) {
this.fileList.splice(foundIdx, 1)
this.updateUploadFieldModelAndEmitDataChange(this.fileList)
this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
if (!!this.field.options.onFileRemove) {
let customFn = new Function('file', 'fileList', this.field.options.onFileRemove)
customFn.call(this, foundFile, this.fileList)
}
}
},

16
src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
View File

@ -164,15 +164,15 @@
},
handlePictureUpload(res, file, fileList) {
if (!!this.field.options.onUploadSuccess) {
let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
customFn.call(this, res, file, fileList)
} else {
if (file.status === 'success') {
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
this.updateUploadFieldModelAndEmitDataChange(fileList)
if (file.status === 'success') {
//this.fileList.push(file) /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
this.updateUploadFieldModelAndEmitDataChange(fileList)
this.fileList = deepClone(fileList)
this.uploadBtnHidden = fileList.length >= this.field.options.limit
this.uploadBtnHidden = fileList.length >= this.field.options.limit
if (!!this.field.options.onUploadSuccess) {
let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
customFn.call(this, res, file, fileList)
}
}
},

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

@ -111,7 +111,7 @@
},
created() {
this.designer.initDesigner();
this.designer.initDesigner( !!this.getDesignerConfig().resetFormJson );
this.designer.loadPresetCssCode( this.getDesignerConfig().presetCssCode )
},
mounted() {

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

@ -114,6 +114,8 @@
generateSFCButton: true, //是否显示生成SFC按钮
presetCssCode: '', //设计器预设CSS样式代码
resetFormJson: false, //是否在设计器初始化时将表单内容重置为空
}
}
},

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

@ -25,10 +25,11 @@
icon="el-icon-minus" class="col-delete-button"></el-button>
</li>
</template>
<div>
<el-button type="text" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
</div>
</draggable>
<div>
<el-button type="text" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
</div>
</el-form-item>
</div>
</template>

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

@ -0,0 +1,30 @@
<template>
<el-form-item label="onFileRemove" label-width="150px">
<el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onFileRemove', 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: "onFileRemove-editor",
mixins: [i18n, eventMixin],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
data() {
return {
eventParams: ['file', 'fileList'],
}
}
}
</script>
<style scoped>
</style>

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

@ -118,6 +118,7 @@ const EVENT_PROPERTIES = {
'onBeforeUpload' : 'onBeforeUpload-editor',
'onUploadSuccess' : 'onUploadSuccess-editor',
'onUploadError' : 'onUploadError-editor',
'onFileRemove' : 'onFileRemove-editor',
'onValidate' : 'onValidate-editor',
//容器

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

@ -765,6 +765,7 @@ export const advancedFields = [
onBeforeUpload: '',
onUploadSuccess: '',
onUploadError: '',
onFileRemove: '',
onValidate: '',
//onFileChange: '',
},
@ -807,6 +808,7 @@ export const advancedFields = [
onBeforeUpload: '',
onUploadSuccess: '',
onUploadError: '',
onFileRemove: '',
onValidate: '',
//onFileChange: '',
},

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

@ -357,7 +357,7 @@
this.buildFormModel(newFormJsonObj.widgetList)
this.formJsonObj['formConfig'] = newFormJsonObj.formConfig
this._provided.formConfig = newFormJsonObj.formConfig //强制更新provide的formConfig对象
// this._provided.formConfig = newFormJsonObj.formConfig //强制更新provide的formConfig对象
this.formJsonObj['widgetList'] = newFormJsonObj.widgetList
this.$nextTick(() => {

2
src/utils/config.js
View File

@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
}
export const VARIANT_FORM_VERSION = '3.0.2'
export const VARIANT_FORM_VERSION = '3.0.3'
//export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'
export const MOCK_CASE_URL = 'https://ks3-cn-beijing.ksyuncs.com/vform-static/vcase/'

16
src/utils/sfc-generator.js
View File

@ -260,29 +260,29 @@ const elTemplates = { //字段组件属性
'time': (widget, formConfig) => {
const {vModel, readonly, disabled, size, placeholder, clearable, format, editable
} = getElAttrs(widget, formConfig)
return `<el-input ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
value-format="HH:mm:ss" ${placeholder} ${clearable} ${editable}></el-input>`
return `<el-time-picker ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
value-format="HH:mm:ss" ${placeholder} ${clearable} ${editable}></el-time-picker>`
},
'time-range': (widget, formConfig) => {
const {vModel, readonly, disabled, size, startPlaceholder, endPlaceholder, clearable, format, editable
} = getElAttrs(widget, formConfig)
return `<el-input is-range ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
value-format="HH:mm:ss" ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-input>`
return `<el-time-picker is-range ${vModel} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
value-format="HH:mm:ss" ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-time-picker>`
},
'date': (widget, formConfig) => {
const {vModel, readonly, disabled, size, type, placeholder, clearable, format, valueFormat, editable
} = getElAttrs(widget, formConfig)
return `<el-input ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
${valueFormat} ${placeholder} ${clearable} ${editable}></el-input>`
return `<el-date-picker ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
${valueFormat} ${placeholder} ${clearable} ${editable}></el-date-picker>`
},
'date-range': (widget, formConfig) => {
const {vModel, readonly, disabled, size, type, startPlaceholder, endPlaceholder, clearable, format, valueFormat, editable
} = getElAttrs(widget, formConfig)
return `<el-input is-range ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
${valueFormat} ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-input>`
return `<el-date-picker is-range ${vModel} ${type} class="full-width-input" ${readonly} ${disabled} ${size} ${format}
${valueFormat} ${startPlaceholder} ${endPlaceholder} ${clearable} ${editable}></el-date-picker>`
},
'switch': (widget, formConfig) => {