实现表单展现形式通过数据库表配置实现
- 数据库配置表
- 表单元素按数据库配置来确定展现模式text，工夫框，文本框等
配置校验，校验实现
一、数据库配置表
①建表
create table *_config
(
item_id bigint auto_increment comment '主键',
form_id bigint not null comment '表单编号',
item_type varchar(10) null comment '对象类型，1、字段物理名称、2：属性ID，3：模块标识',
item_key varchar(30) null comment '属性id',
item_name varchar(30) null comment '字段名称',
item_value varchar(30) null comment '属性值',
default_value varchar(30) null comment '默认值',
show_type varchar(30) default 'text' not null comment '展现模式 text、date、picker、smartInput',
is_display char null comment '是否显示，0：否、1：是',
is_editable char null comment '是否可编辑，0：否、1：是',
is_data_mask char null comment '是否脱敏，0：否、1：是',
mask_type varchar(5) null comment '脱敏类型，1：名称、2：证件号码、3：地址、4：电话号码',
check_rule varchar(50) null comment '校验规定名称',
remark varchar(300) null comment '备注',
seq tinyint not null comment '程序',
status_cd char(2) default '00' not null comment '状态 00：无效，其余：有效',
CREATE_DATE datetime default CURRENT_TIMESTAMP null comment '创立工夫'
)
comment '表单属性项配置';②插入示例记录
INSERT INTO *_config(item_id, form_id, item_type, item_key, item_name, item_value, default_value, show_type, is_display, is_editable, is_data_mask, mask_type, check_rule, remark, seq, status_cd, CREATE_DATE)
VALUES (1, 2, '1', '20210810067', '支局名称', '', null, 'text', '1', '0', '0', null, null, '', 1, '00', '2022-02-28 09:57:47');
INSERT INTO *_config(item_id, form_id, item_type, item_key, item_name, item_value, default_value, show_type, is_display, is_editable, is_data_mask, mask_type, check_rule, remark, seq, status_cd, CREATE_DATE)
VALUES (3, 2, '1', '20210810069', '小区名称', '', null, 'smartInput', '1', '1', '0', null, '', '', 3, '00', '2022-02-28 09:58:05');
INSERT INTO *_config(item_id, form_id, item_type, item_key, item_name, item_value, default_value, show_type, is_display, is_editable, is_data_mask, mask_type, check_rule, remark, seq, status_cd, CREATE_DATE)
VALUES (6, 2, '1', '20210810072', '合约到期工夫', '', null, 'date', '1', '1', '0', null, null, '', 6, '00', '2022-02-28 09:58:12');
INSERT INTO *_config(item_id, form_id, item_type, item_key, item_name, item_value, default_value, show_type, is_display, is_editable, is_data_mask, mask_type, check_rule, remark, seq, status_cd, CREATE_DATE)
VALUES (7, 2, '1', '20210810074', '现有宽带速率', '', null, 'picker', '1', '1', '0', null, null, '', 7, '00', '2022-02-28 09:58:14');
二、表单页面实现
<van-form ref="attrFrom" @submit="onSubmit"> <div v-for="attr in attrList"> <div v-if="attr.cfg.showType == 'text'"> <van-field v-model="attr.value" :label="attr.attrName" :readonly="attr.cfg.isEditable=='0'" :clickable="attr.cfg.isEditable=='1'" label-align="right" label-width="8em" :rules="te(attr.cfg.checkRule)" :right-icon="attr.cfg.isEditable=='1'?'edit':''" @change="onSubmit" @click="clickField(attr.cfg)" > </van-field> </div> <div v-else-if="attr.cfg.showType == 'date'"> <van-field v-if="attr.cfg.isEditable=='0'" v-model="attr.value" :label="attr.attrName" readonly label-align="right" label-width="8em" > </van-field> <van-field v-if="attr.cfg.isEditable=='1'" v-model="attr.value" is-link readonly :label="attr.attrName" label-align="right" label-width="8em" @click="clickField(attr.cfg)" > </van-field> <van-calendar v-if="attr.cfg.isEditable=='1'" v-model:show="attr.cfg.isShowPopup" @confirm="(value) => onConfirmDate(value, attr)"> </van-calendar> </div> <div v-else-if="attr.cfg.showType == 'picker'"> <van-field v-if="attr.cfg.isEditable=='0'" v-model="attr.cfg.valueMap[attr.value]" :label="attr.attrName" readonly label-align="right" label-width="8em" > </van-field> <van-field v-if="attr.cfg.isEditable=='1'" v-model="attr.value" is-link readonly :label="attr.attrName" name="picker" label-align="right" label-width="8em" @click="clickField(attr.cfg)"> </van-field> <van-popup round v-if="attr.cfg.isEditable=='1'" v-model:show="attr.cfg.isShowPopup" position="bottom"> <van-picker show-toolbar confirm-button-text="确定" cancel-button-text="勾销" :columns="values" value-key="attrValueName" :colunmsFieldNames="{text:'attrValueName'}" @confirm="(value) => onConfirm(value, attr)" @cancel="onCancel(attr.cfg)" /> </van-popup> </div> <div v-else-if="attr.cfg.showType == 'smartInput'"> <van-field v-if="attr.cfg.isEditable=='0'" v-model="attr.value" :label="attr.attrName" readonly label-align="right" label-width="8em" > </van-field> <van-field v-if="attr.cfg.isEditable=='1'" name="my-field" :label="attr.attrName" label-align="right" label-width="8em" :right-icon="'edit'" > <template #input> <smart-input id="service" @sync="syncService" :props="attr"></smart-input> </template> </van-field> </div> </div></van-form>三、校验实现
data () {
return { loadingMap: {}, showSubmit: false, showPicker: {}, attrList: [], attrMap: {}, cfgMap: {}, customFieldName: { text: 'attrValueName', values: 'valueList' }, values: [], rules: { isMobile: [ { pattern: /^1[0-9]{10}$/, message: '请输出正确手机号' } ], isNumber: [ { pattern: /^[0-9]+(.[0-9]{1,3})?$/, message: '请输出正确数字' } ] }, addrName: '', addrId: '' }},