github
/
variant-form
mirror of https://github.com/vform666/variant-form
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

版本号升级到2.2.0，级联选择组件增加多选属性，修复axios报错，修复其他一些小问题。

master
vdpAdmin 2022-01-07 10:58:10 +08:00
parent 45e8f43967
commit ee8afa98b9
25 changed files with 815 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "variant-form",
"version": "2.1.9",
"version": "2.2.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve --open src/main.js",

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

@ -7,7 +7,7 @@
:size="field.options.size"
:clearable="field.options.clearable"
:filterable="field.options.filterable"
:props="{ checkStrictly: field.options.checkStrictly, expandTrigger: 'hover' }"
:props="{ checkStrictly: field.options.checkStrictly, multiple: field.options.multiple, expandTrigger: 'hover' }"
@visible-change="hideDropDownOnClick" @expand-change="hideDropDownOnClick"
:placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
@focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"

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

@ -520,6 +520,14 @@ export default {
this.field.options.optionItems = deepClone(options)
},
/**
* 返回radio/checkbox/select/cascader的选项数据
* @returns 选择项数组
*/
getOptions() {
return this.field.options.optionItems
},
disableOption(optionValue) {
this.disableOptionOfList(this.field.options.optionItems, optionValue)
},

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

@ -18,9 +18,9 @@
<div class="upload-file-list">
<span class="upload-file-name" :title="file.name">{{file.name}}</span>
<a :href="file.url" download="">
<i class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')"></i></a>
<i class="el-icon-delete file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
@click="removeUploadFile(file.name)"></i>
<i class="el-icon-download file-action" :title="i18nt('render.hint.downloadFile')"></i></a>
<i class="el-icon-delete file-action" :title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
@click="removeUploadFile(file.name)"></i>
</div>
</template>
</el-upload>
@ -200,7 +200,7 @@
removeUploadFile(fileName) {
let foundIdx = -1
this.fileList.forEach((file,idx) => {
this.fileList.forEach((file, idx) => {
if (file.name === fileName) {
foundIdx = idx
}

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

@ -169,6 +169,7 @@
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
}

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

@ -64,10 +64,11 @@
import ToolbarPanel from './toolbar-panel/index'
import SettingPanel from './setting-panel/index'
import VFormWidget from './form-widget/index'
import {createDesigner} from "@/components/form-designer/designer";
import {addWindowResizeHandler, deepClone, getQueryParam} from "@/utils/util";
import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config";
import i18n, { changeLocale } from "@/utils/i18n";
import {createDesigner} from "@/components/form-designer/designer"
import {addWindowResizeHandler, deepClone, getQueryParam} from "@/utils/util"
import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
import i18n, { changeLocale } from "@/utils/i18n"
import axios from "axios"
export default {
name: "VFormDesigner",

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

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "cascader-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

24
src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-multiple-editor.vue Normal file
View File

@ -0,0 +1,24 @@
<template>
<el-form-item :label="i18nt('designer.setting.multiple')">
<el-checkbox v-model="optionModel.multiple"></el-checkbox>
</el-form-item>
</template>
<script>
import i18n from "@/utils/i18n"
import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
export default {
name: "multiple-editor",
mixins: [i18n, propertyMixin],
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

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

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "checkbox-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

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

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "radio-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

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

@ -0,0 +1,18 @@
<template>
<div style="display: none"></div>
</template>
<script>
export default {
name: "select-defaultValue-editor",
props: {
designer: Object,
selectedWidget: Object,
optionModel: Object,
},
}
</script>
<style scoped>
</style>

8
src/components/form-designer/setting-panel/property-editor/propertyMixin.js
View File

@ -32,6 +32,14 @@ export default {
onMultipleSelected(val) {
if (val) {
//debugger
// 清空已选项，否则console会报错！！
let foundRef = this.designer.formWidget.getWidgetRef(this.optionModel.name)
if (!!foundRef && !!foundRef.clearSelectedOptions) {
foundRef.clearSelectedOptions()
}
this.optionModel.defaultValue = [] //清空原默认值!!
} else {
if (!!this.optionModel.defaultValue && (this.optionModel.defaultValue.length > 0)) {

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

@ -61,8 +61,8 @@
<template v-for="(ft, idx) in formTemplates">
<el-card :bord-style="{ padding: '0' }" shadow="hover" class="ft-card">
<el-popover placement="right" trigger="hover">
<img slot="reference" :src="ftImages[idx].imgUrl" style="width: 200px">
<img :src="ftImages[idx].imgUrl" style="height: 600px;width: 720px">
<img slot="reference" :src="ft.imgUrl" style="width: 200px">
<img :src="ft.imgUrl" style="height: 600px;width: 720px">
</el-popover>
<div class="bottom clear-fix">
<span class="ft-title">#{{idx+1}} {{ft.title}}</span>

16
src/components/form-designer/widget-panel/templatesConfig.js
View File

@ -1,56 +1,56 @@
export const formTemplates = [
{
title: '单列表单',
//imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t1.png',
imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t1.png',
jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json1.txt',
description: '表单模板详细说明...'
},
{
title: '多列表单',
//imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t2.png',
imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t2.png',
jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json2.txt',
description: '表单模板详细说明...'
},
{
title: '分组表单',
//imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t3.png',
imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t3.png',
jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json3.txt',
description: '表单模板详细说明...'
},
{
title: '标签页表单',
//imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t4.png',
imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t4.png',
jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json4.txt',
description: '表单模板详细说明...'
},
{
title: '主从表单',
//imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t5.png',
imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t5.png',
jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json5.txt',
description: '表单模板详细说明...'
},
{
title: '响应式表单',
//imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t6.png',
imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t6.png',
jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json6.txt',
description: '表单模板详细说明...'
},
{
title: '问卷调查表',
//imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t7.png',
imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t7.png',
jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json7.txt',
description: '表单模板详细说明...'
},
{
title: '固定表格表单',
//imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t8.png',
imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t8.png',
jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json8.txt',
description: '表单模板详细说明...'
},

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

@ -869,6 +869,7 @@ export const advancedFields = [
hidden: false,
clearable: true,
filterable: false,
multiple: false,
checkStrictly: false, //可选择任意一级选项，默认不开启
optionItems: [
{label: 'select 1', value: 1, children: [{label: 'child 1', value: 11}]},

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

@ -21,7 +21,7 @@
widget: {
type: Object,
required: true
}
},
},
computed: {
customClass() {

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

@ -91,6 +91,13 @@ export default {
}
},
/**
* 获取子表单的行数
*/
getSubFormRowCount() {
return !this.rowIdData ? 0 : this.rowIdData.length
},
disableSubFormRow(rowIndex) {
this.widget.widgetList.forEach(subWidget => {
let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
@ -145,13 +152,17 @@ export default {
getSubFormValues(needValidation = true) {
if (this.widget.type === 'sub-form') {
//TODO: 逐行校验子表单！！
//TODO: 逐行校验子表单！暂未实现！！
return this.formModel[this.widget.options.name]
} else {
this.$message.error(this.i18nt('render.hint.nonSubFormType'))
}
},
setSubFormValues(subFormValues) {
//TODO: 待实现！！
},
// validateField(fieldName) { //逐行校验子表单字段
// //TODO:
// },

309
src/components/form-render/container-item/data-table-item.vue Normal file
View File

@ -0,0 +1,309 @@
<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>

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

@ -121,7 +121,7 @@
let subFormModel = this.formModel[this.widget.options.name]
if (!!subFormModel && (subFormModel.length > 0)) {
subFormModel.forEach(() => {
this.rowIdData.push('r' + generateId())
this.rowIdData.push('id' + generateId())
})
if (!!initFlag) {
@ -135,17 +135,21 @@
},
addToRowIdData() {
this.rowIdData.push('rowId' + generateId())
this.rowIdData.push('id' + generateId())
},
insertToRowIdData(rowIndex) {
this.rowIdData.splice(rowIndex, 0, 'rowId' + generateId())
this.rowIdData.splice(rowIndex, 0, 'id' + generateId())
},
deleteFromRowIdData(rowIndex) {
this.rowIdData.splice(rowIndex, 1)
},
getRowIdData() {
return this.rowIdData
},
initFieldSchemaData() { //初始化fieldSchemaData！！！
if (this.widget.type !== 'sub-form') {
return

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

@ -41,7 +41,12 @@
import emitter from 'element-ui/lib/mixins/emitter'
import './container-item/index'
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from "../../utils/util"
import {
deepClone,
insertCustomCssToHead,
insertGlobalFunctionsToHtml,
traverseFieldWidgets
} from "@/utils/util"
import i18n, { changeLocale } from "../../utils/i18n"
export default {
@ -298,16 +303,63 @@
let foundW = this.getWidgetRef(widgetName)
if (!!foundW) {
foundW.setDisabled(disabledFlag)
} else { //没找到，可能是子表单中的组件
this.findWidgetOfSubFormAndSetDisabled(widgetName, disabledFlag)
}
},
findWidgetOfSubFormAndSetDisabled(widgetName, disabledFlag) {
this.findWidgetNameInSubForm(widgetName).forEach(wn => {
let sw = this.getWidgetRef(wn)
if (!!sw) {
sw.setDisabled(disabledFlag)
}
})
},
findWidgetAndSetHidden(widgetName, hiddenFlag) {
let foundW = this.getWidgetRef(widgetName)
if (!!foundW) {
foundW.setHidden(hiddenFlag)
} else { //没找到，可能是子表单中的组件
this.findWidgetOfSubFormAndSetHidden(widgetName, hiddenFlag)
}
},
findWidgetOfSubFormAndSetHidden(widgetName, hiddenFlag) {
this.findWidgetNameInSubForm(widgetName).forEach(wn => {
let sw = this.getWidgetRef(wn)
if (!!sw) {
sw.setHidden(hiddenFlag)
}
})
},
findWidgetNameInSubForm(widgetName) {
let result = []
let subFormName = null
let handlerFn = (field, parent) => {
if (!!field.options && (field.options.name === widgetName)) {
subFormName = parent.options.name
}
}
traverseFieldWidgets(this.widgetList, handlerFn)
if (!!subFormName) {
let subFormRef = this.getWidgetRef(subFormName)
if (!!subFormRef) {
let rowIds = subFormRef.getRowIdData()
if (!!rowIds && (rowIds.length > 0)) {
rowIds.forEach(rid => {
result.push( widgetName + '@row' + rid)
})
}
}
}
return result
},
//--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
/* 提示：用户可自行扩充这些方法！！！ */
@ -423,7 +475,19 @@
getFieldValue(fieldName) { //单个字段获取值
let fieldRef = this.getWidgetRef(fieldName)
if (!!fieldRef && !!fieldRef.getValue) {
fieldRef.getValue()
return fieldRef.getValue()
}
if (!fieldRef) { //如果是子表单字段
let result = []
this.findWidgetNameInSubForm(fieldName).forEach(wn => {
let sw = this.getWidgetRef(wn)
if (!!sw && !!sw.getValue) {
result.push( sw.getValue() )
}
})
return result
}
},
@ -432,16 +496,26 @@
if (!!fieldRef && !!fieldRef.setValue) {
fieldRef.setValue(fieldValue)
}
if (!fieldRef) { //如果是子表单字段
this.findWidgetNameInSubForm(fieldName).forEach(wn => {
let sw = this.getWidgetRef(wn)
if (!!sw && !!sw.setValue) {
sw.setValue(fieldValue)
}
})
}
},
getSubFormValues(subFormName, needValidation = true) {
let foundSFRef = this.subFormRefList[subFormName]
// if (!foundSFRef) {
// return this.formDataModel[subFormName]
// }
return foundSFRef.getSubFormValues(needValidation)
},
setSubFormValues(subFormName, subFormValues) {
//TODO: 待实现！！
},
disableForm() {
let wNameList = Object.keys(this.widgetRefList)
wNameList.forEach(wName => {

25
src/lang/en-US.js
View File

@ -316,6 +316,31 @@ export default {
formRefName: 'Ref Name',
formRulesName: 'Rules Name',
//data-table
tableWidth: 'Width(px/%)',
tableHeight: 'Height(px/%)',
showCheckBox: 'Show CheckBox',
showIndex: 'Show Row Number',
showPagination: 'Show Pagination',
smallPagination: 'Small Pagination',
tableColEdit: 'Edit Cols',
tableDataEdit: 'Edit Data',
stripe: 'Stripe',
showSummary: 'Show Summary',
rowSpacing: 'Row Spacing(px)',
editAction: 'Edit...',
columnName: 'Name',
columnLabel: 'Label',
columnWidth: 'Width(px/%)',
visibleColumn: 'Visible',
sortableColumn: 'Sortable',
fixedColumn: 'Fixed',
alignTypeOfColumn: 'Align',
formatOfColumn: 'Format',
actionColumn: 'Action',
addTableColumn: 'Add New Column',
deleteTableColumn: 'Delete This Column',
OnlyOneColumnCannotBeDeleted: 'The last column cannot be deleted.',
}
}

25
src/lang/zh-CN.js
View File

@ -316,6 +316,31 @@ export default {
formRefName: '引用名称',
formRulesName: '验证规则名称',
//data-table
tableWidth: '宽度(px/%)',
tableHeight: '高度(px/%)',
showCheckBox: '是否显示复选框列',
showIndex: '是否显示行号',
showPagination: '是否显示分页',
smallPagination: '小型分页',
tableColEdit: '表格列编辑',
tableDataEdit: '表格数据编辑',
showSummary: '是否合计',
stripe: '是否斑马线',
rowSpacing: '行距（px）',
editAction: '编辑...',
columnName: '字段名称',
columnLabel: '显示名称',
columnWidth: '列宽(px/%)',
visibleColumn: '是否显示',
sortableColumn: '是否排序',
fixedColumn: '是否固定',
alignTypeOfColumn: '对齐方式',
formatOfColumn: '格式化',
actionColumn: '操作',
addTableColumn: '增加列',
deleteTableColumn: '删除列',
OnlyOneColumnCannotBeDeleted: '表格只有一列时不可删除.',
}
}

2
src/utils/config.js
View File

@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
}
export const VARIANT_FORM_VERSION = '2.1.9'
export const VARIANT_FORM_VERSION = '2.2.0'
//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/'

214
src/utils/format.js Normal file
View File

@ -0,0 +1,214 @@
export function formatDate1(date) {
if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
return date;
}
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
}
export function formatDate2(date) {
if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
return date;
}
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '/' + m + '/' + d;
}
export function formatDate3(date) {
if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
return date;
}
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
let y = date.getFullYear();
let m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '年' + m + '月' + d +'日';
}
export function formatDate4(date) {
if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date"){
return date;
}
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
return date.toLocaleString()
}
export function formatDate5(date) {
if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
return date;
}
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
return date.toLocaleString('chinese', { hour12: false })
}
// ###,###,###,##0.######
export function formatNumber1(v) {
if (typeof(v) != "number") {
return v;
}
let length = v.toString().split(".")[1].length;
switch(length){
case 0:
v = v.toFixed(0)
break;
case 1:
v = v.toFixed(1)
break;
case 2:
v = v.toFixed(2)
break;
case 3:
v = v.toFixed(3)
break;
case 4:
v = v.toFixed(4)
break;
case 5:
v = v.toFixed(5)
break;
default:
v = v.toFixed(6)
}
let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
return $1+",";
});
})
return res;
}
//###,###,###,##0.00####
export function formatNumber2(v) {
if (typeof(v) != "number") {
return v;
}
let length = v.toString().split(".")[1].length;
switch(length){
case 0:
case 1:
case 2:
v = v.toFixed(2)
break;
case 3:
v = v.toFixed(3)
break;
case 4:
v = v.toFixed(4)
break;
case 5:
v = v.toFixed(5)
break;
default:
v = v.toFixed(6)
}
let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
return $1+",";
});
})
return res;
}
// ###,###,###,##0.000000
export function formatNumber3(v) {
if (typeof(v) != "number") {
return v;
}
v = v.toFixed(6)
let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
return $1+",";
});
})
return res;
}
// ###,###,###,##0.000
export function formatNumber4(v) {
if (typeof(v) != "number") {
return v;
}
v = v.toFixed(3)
let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
return $1+",";
});
})
return res;
}
// ###,###,###,##0.00
export function formatNumber5(v) {
if (typeof(v) != "number") {
return v;
}
v = v.toFixed(2)
let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
return $1+",";
});
})
return res;
}
// ###,###,###,##0
export function formatNumber6(v) {
if (typeof(v) != "number") {
return v;
}
v = v.toFixed(0)
let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
return $1+",";
});
})
return res;
}
// ###,##0.00##%
export function formatNumber7(v) {
if (typeof(v) != "number") {
return v;
}
let length = v.toString().split(".")[1].length;
v = v*100
switch(length){
case 0:
case 1:
case 2:
v = v.toFixed(2)
break;
case 3:
v = v.toFixed(3)
break;
default:
v = v.toFixed(4)
}
let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
return $1+",";
});
})
return res+'%';
}

14
src/utils/util.js
View File

@ -118,28 +118,28 @@ export const loadRemoteScript = function(srcPath, callback) { /*加载远程js
}
}
export function traverseFieldWidgets(widgetList, handler) {
export function traverseFieldWidgets(widgetList, handler, parent = null) {
widgetList.forEach(w => {
if (w.formItemFlag) {
handler(w)
handler(w, parent)
} else if (w.type === 'grid') {
w.cols.forEach(col => {
traverseFieldWidgets(col.widgetList, handler)
traverseFieldWidgets(col.widgetList, handler, w)
})
} else if (w.type === 'table') {
w.rows.forEach(row => {
row.cols.forEach(cell => {
traverseFieldWidgets(cell.widgetList, handler)
traverseFieldWidgets(cell.widgetList, handler, w)
})
})
} else if (w.type === 'tab') {
w.tabs.forEach(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)
}
})
}