vue多表单的合成设计与实现

vue多表单的合成设计与实现

不会起名字，先叫这个吧😂

项目中是否会遇到很多个表单（十几个，几十个那种），这时候如何实现。一个个去写么？肯定不是的。

基本功能

通过遍历表单项来实现

 <el-form ref="form" :model="form" label-position="top" size="mini">
        <template v-for="(item, index) in formModel.parameters">
          <el-form-item
            v-if="item.type == 'input'"
            :key="item.name"
            :label="item.CName"
            :prop="item.name"
            :rules="item.rules"
          >
            <el-input v-model="form[item.name]" :disabled='item.isDisabled'></el-input>
          </el-form-item>
          <el-form-item
            v-else-if="item.type == 'textarea'"
            :key="item.name"
            :label="item.CName"
            :prop="item.name"
            :rules="item.rules"
          >
            <el-input v-model="form[item.name]" type="textarea" :autosize="{ minRows: 10 }" :disabled='item.isDisabled'></el-input>
          </el-form-item>
					......
        </template>
      </el-form>

同时要设计一个表单的参数配置文件。

每个表单的参数

• functionName:"" //表单的key
• displayName："" //表单的中文名
• help："" // 注解提示
• parameters：[]. //具体的表单项配置信息
  • CName: “” 中文名称
  • name: “taskName”, //配置项的key
  • help: null, //注解提示
  • type: “input” //类型。 根据需求及表单项类型设置，select，inputNumber，textarea等
  • isDisabled: false, //是否禁用
  • rules:[{ … }] //是否必填及校验
  • defaultValue:’’,//默认值
  • options：[] //select 的选项列表

export const StepMetadata = {
  form1: {
    functionName: "form1",
    displayName: "表单1",
    help: ",
    parameters: [
      ...
    ]
  },
  form2: {
    functionName: "form2",
    displayName: "表单2",
    help: "",
    parameters: [
      ...
    ]
  }
      ...
};

选中哪个表单，就将这个表单的参数信息赋值给vue中form。

情景1

一个简单的多表单就实现了。但是有些表单有些复杂的逻辑

比如说 select 时，选择选项1，显示 a表单项；选择2，显示b表单项。

​

添加配置参数

• parameters
  • show:’’ //“1” == this.form.verifierType 当验证者为1 时才显示 …

export const StepMetadata = {
  form1: {
    functionName: "form1",
    displayName: "表单1",
    help: ",
    parameters: [
      {
        CName: "任务名称",
        help: null,
        isDisabled: false,
        name: "taskName",
        type: "input"
      },
      {
        CName: "验证者类型",
        help: null,
        isDisabled: false,
        name: "verifierType",
        type: "select",
        normal: "0",
        options: [
          {
            label: "人员",
            value: "0"
          },
          {
            label: "角色",
            value: "1"
          }
        ]
      },
      {
        CName: "验证人",
        help: null,
        isDisabled: false,
        name: "verifier",
        type: "input",
        show: '"0" == this.form.verifierType'
      },
      {
        CName: "应用",
        help: null,
        name: "application",
        type: "select",
        show: '"1" == this.form.verifierType'
      },
      {
        CName: "角色",
        help: null,
        isDisabled: false,
        name: "role",
        type: "select",
        show: '"1" == this.form.verifierType'
      }
    ]
  }
}

添加关联

<el-form-item
  ...
  v-show="!item.show || evil(item.show)"
>
           
</el-form-item>

methods: {
    evil(fn) {
      return eval(fn);
    }
}