动态表单

This commit is contained in:
yanran200730
2022-02-17 15:40:14 +08:00
parent fe66924093
commit 1df841804a
3 changed files with 1123 additions and 182 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="add-config">
<div class="add-config" :class="[activeStep == 1 ? 'formLayout' : '']">
<ai-detail>
<ai-title slot="title" :title="detailTitle" isShowBack isShowBottomBorder @onBackClick="handleBack"/>
<template slot="step">
@@ -53,7 +53,8 @@ export default {
},
processAnnexDefs: [],
detailObj: {},
refresh: true
refresh: true,
tableFieldInfos: []
}
},
computed: {
@@ -85,12 +86,9 @@ export default {
this.handleBaseInfo()
break
case 1:
this.$refs['applyForm'].handleApplyForm().then(ret => {
this.applyForm.tableId = ret.id
this.applyForm.approvalSteps = ret.approvalSteps.toString()
this.$refs['applyForm'].onConfirm().then(res => {
this.tableFieldInfos = res
this.activeStep++
}).catch(err => {
console.error(err);
})
break
case 2:
@@ -106,7 +104,7 @@ export default {
handleBaseInfo() {
this.$refs['baseInfo'].banseInfoForm().then(res => {
if (res) {
this.$refs['applyForm'].getFormList()
// this.$refs['applyForm'].getFormList()
this.baseInfo = res
this.activeStep++
}
@@ -121,7 +119,10 @@ export default {
...this.detailObj,
...this.baseInfo,
processDefStatus: Number(this.baseInfo.processDefStatus),
tableId: this.applyForm.tableId,
tableInfo: {
tableFieldInfos: this.tableFieldInfos
},
tableType: 0,
processAnnexDefs: this.annexs.map(e => ({...e, mustFill: Number(e.mustFill)})),
processNodeList: res.processNodeList,
processType: this.processType
@@ -168,6 +169,15 @@ export default {
.add-config {
height: 100%;
&.formLayout {
::v-deep .ai-detail__content--wrapper {
max-width: 100%;
height: calc(100%)!important;
padding: 0!important;
overflow: hidden!important;
}
}
.step {
width: 100%;
height: 72px;

View File

@@ -0,0 +1,203 @@
export const components = [
{
type: 'info',
tips: '(可重复添加)',
label: '信息',
children: [
{
type: 'name',
fieldName: '姓名',
fieldTips: '请输入姓名',
fixedLabel: '姓名',
disable: '0',
grid: 1,
fieldDataType: '1',
defaultValue: '',
icon: 'icontext_box',
mustFill: '1',
maxLength: 20
},
{
type: 'idNumber',
fieldName: '身份证号',
fixedLabel: '身份证号',
fieldTips: '请输入身份证号',
defaultValue: '',
icon: 'icontext_area',
mustFill: '1',
maxLength: 20,
disable: '0',
grid: 1,
fieldDataType: '1',
verifyType: 0
},
{
type: 'phone',
fieldName: '联系方式',
fixedLabel: '联系方式',
fieldTips: '请输入联系方式',
defaultValue: '',
icon: 'icontext_area',
mustFill: '1',
maxLength: 11,
disable: '0',
grid: 1,
fieldDataType: '1',
verifyType: 1
}
]
},
{
type: 'options',
tips: '(可重复添加)',
label: '选项',
children: [
{
type: 'radio',
fieldName: '单选',
fixedLabel: '单选',
fieldTips: '请选择',
grid: 1,
icon: 'iconradio',
mustFill: '1',
disable: '0',
fieldDataType: '4',
defaultValue: '',
options: [
{
label: '选项1',
value: ''
},
{
label: '选项2',
value: ''
}
],
title: ''
},
{
type: 'checkbox',
fieldName: '多选',
fixedLabel: '多选',
fieldTips: '请选择',
icon: 'iconcheck_box',
fieldDataType: '5',
mustFill: '1',
grid: 1,
disable: '0',
defaultValue: [],
options: [
{
label: '选项1',
value: ''
},
{
label: '选项2',
value: ''
}
],
title: ''
},
{
type: 'select',
fieldName: '单下拉框',
fixedLabel: '单下拉框',
grid: 1,
fieldTips: '请选择',
icon: 'iconSelect',
mustFill: '1',
defaultValue: '',
fieldDataType: '9',
disable: '0',
options: [
{
label: '选项1',
value: ''
},
{
label: '选项2',
value: ''
}
],
title: ''
},
{
type: 'date',
fieldName: '日期',
fixedLabel: '日期',
grid: 1,
fieldDataType: '3',
datetimePattern: 'yyyy-MM-dd',
fieldTips: '请选择日期',
icon: 'iconSelect',
mustFill: '1',
disable: '0',
title: ''
},
{
type: 'datetime',
fieldName: '日期时间',
fixedLabel: '日期时间',
grid: 1,
fieldDataType: '8',
datetimePattern: 'yyyy-MM-dd HH:mm:ss',
fieldTips: '请选择日期时间',
icon: 'iconSelect',
mustFill: '1',
disable: '0',
title: ''
}
]
},
{
type: 'input',
tips: '(可重复添加)',
label: '填空',
children: [
{
type: 'input',
fieldName: '单行填空',
fieldTips: '请输入',
fixedLabel: '单行填空',
disable: '0',
grid: 1,
fieldDataType: '1',
defaultValue: '',
icon: 'icontext_box',
mustFill: '1',
maxLength: 50
},
{
type: 'number',
fieldName: '数字输入',
fixedLabel: '数字输入',
fieldTips: '请输入数字',
defaultValue: '',
icon: 'icontext_area',
mustFill: '1',
maxValue: 10000,
decimalPlaces: 0,
fieldDataType: '0',
minValue: 0,
maxLength: 500,
disable: '0',
grid: 1,
}
]
},
{
type: 'layout',
tips: '(可重复添加)',
label: '分组',
children: [
{
type: 'group',
fieldName: '卡片',
fixedLabel: '卡片',
icon: 'iconpic',
groupName: '分组标题',
column: []
}
]
}
];