乐趣区

关于前端:实现表单项按配置展示

jiezi

实现表单展现形式通过数据库表配置实现

  1. 数据库配置表
  2. 表单元素按数据库配置来确定展现模式 text，工夫框，文本框等

  3. 配置校验，校验实现

    一、数据库配置表

    ①建表

    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: ''
  }
},
退出移动版