版本更新到2.2.1：
1. 修复axios is not defined问题； 2. 图片、文件上传组件增加onFileRemove交互事件； 3. designer-config属性新增resetFormJson参数； 4. 修复其他一些小bug。master
vdpAdmin
parent
f4cb23cd08
commit
844b78e975
|
|
@ -13,13 +13,13 @@ const components = [
|
|||
]
|
||||
|
||||
const install = (Vue) => {
|
||||
window.axios = axios
|
||||
components.forEach(component => {
|
||||
Vue.component(component.name, component)
|
||||
})
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */
|
||||
window.axios = axios
|
||||
install(window.Vue);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,13 +24,13 @@ const components = [
|
|||
]
|
||||
|
||||
const install = (Vue) => {
|
||||
window.axios = axios
|
||||
components.forEach(component => {
|
||||
Vue.component(component.name, component)
|
||||
})
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */
|
||||
window.axios = axios
|
||||
install(window.Vue);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "variant-form",
|
||||
"version": "2.2.0",
|
||||
"version": "2.2.1",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve --open src/main.js",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<VFormDesigner ref="vfDesignerRef"></VFormDesigner>
|
||||
<VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig"></VFormDesigner>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -11,6 +11,13 @@ export default {
|
|||
name: 'App',
|
||||
components: {
|
||||
VFormDesigner,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
designerConfig: {
|
||||
resetFormJson: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export function createDesigner(vueInstance) {
|
|||
steps: [],
|
||||
},
|
||||
|
||||
initDesigner() {
|
||||
initDesigner(resetFormJson) {
|
||||
this.widgetList = []
|
||||
this.formConfig = deepClone(defaultFormConfig)
|
||||
|
||||
|
|
@ -59,7 +59,9 @@ export function createDesigner(vueInstance) {
|
|||
"color:#333"
|
||||
)
|
||||
|
||||
this.initHistoryData()
|
||||
if (!resetFormJson) {
|
||||
this.initHistoryData()
|
||||
}
|
||||
},
|
||||
|
||||
clearDesigner(skipHistoryChange) {
|
||||
|
|
@ -863,7 +865,7 @@ export function createDesigner(vueInstance) {
|
|||
this.historyData.steps = this.historyData.steps.slice(0, this.historyData.index + 1)
|
||||
}
|
||||
|
||||
console.log('history', this.historyData.index)
|
||||
//console.log('history', this.historyData.index)
|
||||
},
|
||||
|
||||
saveCurrentHistoryStep() {
|
||||
|
|
@ -879,7 +881,7 @@ export function createDesigner(vueInstance) {
|
|||
if (this.historyData.index !== 0) {
|
||||
this.historyData.index--
|
||||
}
|
||||
console.log('undo', 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)
|
||||
|
|
@ -889,7 +891,7 @@ export function createDesigner(vueInstance) {
|
|||
if (this.historyData.index !== (this.historyData.steps.length - 1)) {
|
||||
this.historyData.index++
|
||||
}
|
||||
console.log('redo', 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)
|
||||
|
|
|
|||
|
|
@ -194,8 +194,12 @@
|
|||
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) {
|
||||
|
|
|
|||
|
|
@ -179,8 +179,12 @@
|
|||
handlePictureRemove(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)
|
||||
}
|
||||
},
|
||||
|
||||
handelUploadError(err, file, fileList) {
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@
|
|||
|
||||
},
|
||||
created() {
|
||||
this.designer.initDesigner();
|
||||
this.designer.initDesigner( !!this.getDesignerConfig().resetFormJson );
|
||||
this.designer.loadPresetCssCode( this.getDesignerConfig().presetCssCode )
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -119,6 +119,8 @@
|
|||
toolbarMinWidth: 300, //设计器工具按钮栏最小宽度（单位像素）
|
||||
|
||||
presetCssCode: '', //设计器预设CSS样式代码
|
||||
|
||||
resetFormJson: false, //是否在设计器初始化时将表单内容重置为空
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -118,6 +118,7 @@ const EVENT_PROPERTIES = {
|
|||
'onBeforeUpload' : 'onBeforeUpload-editor',
|
||||
'onUploadSuccess' : 'onUploadSuccess-editor',
|
||||
'onUploadError' : 'onUploadError-editor',
|
||||
'onFileRemove' : 'onFileRemove-editor',
|
||||
'onValidate' : 'onValidate-editor',
|
||||
|
||||
//容器
|
||||
|
|
|
|||
|
|
@ -764,6 +764,7 @@ export const advancedFields = [
|
|||
onBeforeUpload: '',
|
||||
onUploadSuccess: '',
|
||||
onUploadError: '',
|
||||
onFileRemove: '',
|
||||
onValidate: '',
|
||||
//onFileChange: '',
|
||||
},
|
||||
|
|
@ -807,6 +808,7 @@ export const advancedFields = [
|
|||
onBeforeUpload: '',
|
||||
onUploadSuccess: '',
|
||||
onUploadError: '',
|
||||
onFileRemove: '',
|
||||
onValidate: '',
|
||||
//onFileChange: '',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,309 +0,0 @@
|
|||
<template>
|
||||
|
||||
<container-item-wrapper v-show="!widget.options.hidden" :widget="widget">
|
||||
|
||||
<el-table ref="dataTable" :data="widget.options.tableData"
|
||||
:height="widget.options.tableHeight" :style="{'width': widget.options.tableWidth}"
|
||||
:border="widget.options.border" :show-summary="widget.options.showSummary"
|
||||
:size="widget.options.tableSize" :stripe="widget.options.stripe"
|
||||
@selection-change="handleSelectionChange"
|
||||
@sort-change="handleSortChange"
|
||||
:cell-style="{padding: widget.options.rowSpacing + 'px 0'}" >
|
||||
|
||||
<el-table-column v-if="widget.options.showIndex" type="index" width="50" fixed="left"></el-table-column>
|
||||
<el-table-column v-if="widget.options.showCheckBox" type="selection"
|
||||
:width="!widget.options.showSummary ? 42: 53" fixed="left"></el-table-column>
|
||||
|
||||
<el-table-column v-for="(item,index) in widget.options.tableColumns"
|
||||
v-if="item.show !== false"
|
||||
:key="index"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:sortable="item.sortable"
|
||||
:fixed="item.fixed"
|
||||
:align="item.align ? item.align:'center'"
|
||||
:render-header="renderHeader"
|
||||
:formatter="formatterValue"
|
||||
:format="item.format"
|
||||
:show-overflow-tooltip="true"
|
||||
:width="item.width">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination v-if="widget.options.showPagination"
|
||||
:small="widget.options.smallPagination"
|
||||
:current-page="widget.options.pagination.currentPage"
|
||||
:page-sizes="widget.options.pagination.pageSizes"
|
||||
:page-size="widget.options.pagination.pageSize"
|
||||
:layout="paginationLayout"
|
||||
:total="widget.options.pagination.total"
|
||||
@size-change="handlePageSizeChange"
|
||||
@current-change="handleCurrentPageChange"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
</container-item-wrapper>
|
||||
</template>
|
||||
<script>
|
||||
import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'
|
||||
import emitter from 'element-ui/lib/mixins/emitter'
|
||||
import i18n from "@/utils/i18n"
|
||||
import {formatDate1, formatDate2, formatDate3, formatDate4, formatDate5,
|
||||
formatNumber1, formatNumber2, formatNumber3, formatNumber4,
|
||||
formatNumber5, formatNumber6, formatNumber7} from "@/utils/format"
|
||||
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
|
||||
import refMixin from "@/components/form-render/refMixin"
|
||||
import containerItemMixin from "@/components/form-render/container-item/containerItemMixin"
|
||||
|
||||
export default {
|
||||
name: "DataTableItem",
|
||||
componentName: 'ContainerItem', //必须固定为ContainerItem，用于接收父级组件的broadcast事件
|
||||
mixins: [emitter, i18n, refMixin, containerItemMixin],
|
||||
components: {
|
||||
ContainerItemWrapper,
|
||||
...FieldComponents,
|
||||
},
|
||||
props: {
|
||||
widget: Object,
|
||||
parentWidget: Object,
|
||||
parentList: Array,
|
||||
indexOfParentList: Number,
|
||||
designer: Object,
|
||||
|
||||
designState: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
|
||||
},
|
||||
inject: ['refList', 'sfRefList', 'globalModel'],
|
||||
data() {
|
||||
return {
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎1',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎2',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎3',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎4',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}],
|
||||
|
||||
//rowSelection: [],
|
||||
selectionIndex: [],
|
||||
pageSize: this.widget.options.pagination.pageSize,
|
||||
currentPage: this.widget.options.pagination.currentPage,
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initRefList()
|
||||
},
|
||||
mounted() {
|
||||
// this.handleOnMounted()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.unregisterFromRefList()
|
||||
},
|
||||
computed: {
|
||||
paginationLayout() {
|
||||
return !!this.widget.options.smallPagination ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'
|
||||
},
|
||||
|
||||
customClass() {
|
||||
return !!this.widget.options.customClass ? this.widget.options.customClass.join(' ') : ''
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
selectWidget(widget) {
|
||||
this.designer.setSelected(widget)
|
||||
},
|
||||
|
||||
renderHeader(h, { column, $index }) {//debugger
|
||||
let colCount = 0;
|
||||
if(this.widget.options.showIndex){
|
||||
colCount++;
|
||||
}
|
||||
if(this.widget.options.showCheckBox){
|
||||
colCount++;
|
||||
}
|
||||
|
||||
this.$set(column, "formatS", this.widget.options.tableColumns[$index-colCount].formatS)
|
||||
return column.label;
|
||||
},
|
||||
|
||||
formatter(row, column, cellValue) {
|
||||
return cellValue;
|
||||
},
|
||||
|
||||
formatterValue(row, column, cellValue) {
|
||||
if(!!column.formatS) {
|
||||
switch(column.formatS) {
|
||||
case 'd1':
|
||||
return formatDate1(cellValue);
|
||||
break;
|
||||
case 'd2':
|
||||
return formatDate2(cellValue);
|
||||
break;
|
||||
case 'd3':
|
||||
return formatDate3(cellValue);
|
||||
break;
|
||||
case 'd4':
|
||||
return formatDate4(cellValue);
|
||||
break;
|
||||
case 'd5':
|
||||
return formatDate5(cellValue);
|
||||
break;
|
||||
case 'n1':
|
||||
return formatNumber1(cellValue);
|
||||
break;
|
||||
case 'n2':
|
||||
return formatNumber2(cellValue);
|
||||
break;
|
||||
case 'n3':
|
||||
return formatNumber3(cellValue);
|
||||
break;
|
||||
case 'n4':
|
||||
return formatNumber4(cellValue);
|
||||
break;
|
||||
case 'n5':
|
||||
return formatNumber5(cellValue);
|
||||
break;
|
||||
case 'n6':
|
||||
return formatNumber6(cellValue);
|
||||
break;
|
||||
case 'n7':
|
||||
return formatNumber7(cellValue);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return cellValue;
|
||||
},
|
||||
|
||||
getRowIndex(row) {
|
||||
return this.widget.options.tableData.lastIndexOf(row)
|
||||
},
|
||||
|
||||
handleSelectionChange(val) {
|
||||
//this.rowSelection = val
|
||||
|
||||
this.selectionIndex.length = 0
|
||||
val.map((row) => {
|
||||
let rowIndex = this.getRowIndex(row)
|
||||
if (rowIndex >= 0) {
|
||||
this.selectionIndex.push(rowIndex)
|
||||
}
|
||||
})
|
||||
|
||||
/* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
|
||||
this.dispatch('VFormRender', 'dataTableSelectionChange',
|
||||
[this, val, this.selectionIndex])
|
||||
},
|
||||
|
||||
handleSortChange({column, prop, order}) {
|
||||
// this.dispatch('VFormRender', 'dataTableSortChange',
|
||||
// [this, column, prop, order, this.pageSize, this.currentPage])
|
||||
//
|
||||
// console.log('test====', prop)
|
||||
},
|
||||
|
||||
handlePageSizeChange(pageSize) {
|
||||
this.pageSize = pageSize
|
||||
this.dispatch('VFormRender', 'dataTablePageSizeChange',
|
||||
[this, pageSize, this.currentPage])
|
||||
|
||||
//console.log('test====', this.currentPage)
|
||||
},
|
||||
|
||||
handleCurrentPageChange(currentPage) {
|
||||
this.currentPage = currentPage
|
||||
this.dispatch('VFormRender', 'dataTablePageChange',
|
||||
[this, this.pageSize, currentPage])
|
||||
|
||||
//console.log('test====', this.pageSize)
|
||||
},
|
||||
|
||||
//--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
|
||||
/* 提示：用户可自行扩充这些方法！！！ */
|
||||
|
||||
/**
|
||||
* 设置表格数据
|
||||
* @param tableData
|
||||
*/
|
||||
setTableData(tableData) {
|
||||
this.widget.options.tableData = tableData
|
||||
},
|
||||
|
||||
/**
|
||||
* 设置表格分页
|
||||
* @param pagination
|
||||
*/
|
||||
setPagination(pagination) {
|
||||
if (pagination.currentPage !== undefined) {
|
||||
this.widget.options.pagination.currentPage = pagination.currentPage
|
||||
}
|
||||
if (pagination.pageSize !== undefined) {
|
||||
this.widget.options.pagination.pageSize = pagination.pageSize
|
||||
}
|
||||
if (pagination.total !== undefined) {
|
||||
this.widget.options.pagination.total = pagination.total
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取选中行数据，格式为对象数组
|
||||
* @returns {[]}
|
||||
*/
|
||||
getSelectedRow() {
|
||||
return this.$refs.dataTable.selection
|
||||
//return this.rowSelection
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取选中行索引，格式为数组
|
||||
* @returns {[]}
|
||||
*/
|
||||
getSelectedIndex() {
|
||||
return this.selectionIndex
|
||||
},
|
||||
|
||||
//--------------------- 以上为组件支持外部调用的API方法 end ------------------//
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.collapse-container {
|
||||
margin: 2px;
|
||||
|
||||
.form-widget-list {
|
||||
min-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-collapsed__header {
|
||||
padding: 10px 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
|
|||
|
||||
}
|
||||
|
||||
export const VARIANT_FORM_VERSION = '2.2.0'
|
||||
export const VARIANT_FORM_VERSION = '2.2.1'
|
||||
|
||||
//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/'
|
||||
|
|
|
|||
Loading…
Reference in New Issue