对于表单配置类的前端处理方法

1、对于表单配置类，可以先将所有表单封装成一个组件，留一个配置项：config，通过config将配置信息传递进去，然后通过遍历的方式渲染，表单封装里用条件渲染来决定对表单使用，最后把所有选择项进行数据改造成接口需要的样子，进行传递

例子：

  

<van-row
        v-for="i in config.filter(m =>
          _type == 'private' ? m.isPublic === 0 : m.isPublic === 1
        )"
        :key="i.id"
      >
        <van-row
          v-if="i.type === 1"
          class="JNFP-row--flex"
          :class="{ border: _type == 'private' }"
          type="flex"
          align="center"
        >
          <!--  输入框 -->
          <JNPF-field
            :config="i"
            :alignType="_type"
            v-model="
              data[
                i.field == 'applicantDeptId' || i.field == 'applicant'
                  ? i.field + 'Name'
                  : i.field
              ]
            "
          ></JNPF-field>
          <!--   <van-field
            :input-align="
              _type == 'private' || !isCurrentAuth ? 'right' : 'left'
            "
            :class="[
              'JNPF-field',
              {
                'JNPF-field-required': i.isRequired,
                'JNPF-isPublic': _type == 'private' || !isCurrentAuth
              }
            ]"
            label-align="right"
            :readonly="i.isReadonly == 0 && isCurrentAuth ? false : true"
            :rules="[
              {
                required: i.isRequired == 0 ? false : true,
                message: `请填写${i.label}`,
                trigger: 'none'
              }
            ]"
            v-model="
              data[
                i.field == 'applicantDeptId' || i.field == 'applicant'
                  ? i.field + 'Name'
                  : i.field
              ]
            "
            :type="i.type===1 ?'text' :'digit'  "
            :required="i.isRequired == 0 ? false : true"
            :label="i.label"
            :placeholder="i.placeholder"
          ></van-field> -->
        </van-row>
        <!-- 数字输入框 -->
        <van-row
          v-if="i.type === 2"
          class="JNFP-row--flex"
          :class="{ border: _type == 'private' }"
          type="flex"
          align="center"
        >
          <JNPF-field
            :config="i"
            type="digit"
            :alignType="_type"
            v-model="data[i.field]"
          ></JNPF-field>
          <!--  <van-field
            :border="false"
            :input-align="
              _type == 'private' || !isCurrentAuth ? 'right' : 'left'
            "
            :class="[
              'JNPF-field',
              {
                'JNPF-field-required': i.isRequired,
                'JNPF-isPublic': _type == 'private' || !isCurrentAuth
              }
            ]"
            label-align="right"
            :readonly="i.isReadonly == 0 && isCurrentAuth ? false : true"
            v-model="data[i.field]"
            type="digit"
            :required="i.isRequired == 0 ? false : true"
            :label="i.label"
            :placeholder="i.placeholder"
          /> -->
        </van-row>
     

2、config数据例子

appCheckRule: null
configId: "5f2f94dce24f44c6b39c17a825d25411"
dataType: null
dataTypeParam: null
defaultType: 2
defaultTypeName: "当前用户ID"
defaultValue: ""
field: "applicant"
fieldScene: 2
fieldSceneName: "开票"
hidden: 0
hiddenName: "否"
id: 567
isMultiple: 0
isMultipleName: "否"
isPublic: 1
isPublicName: "是"
isReadonly: 0
isReadonlyName: "否"
isRequired: 1
isRequiredName: "是"
jsCheckRule: "{\n\t\"valueType\":\"string\",\n    \"organizeId\":\"applyUnit\"\n}"
label: "申请人"
placeHolder: null
showLabel: 1
showLabelName: "是"
sort: 0
span: 12
staticData: Array(0)
type: 102
typeName: "人员选择"

3、对排序的处理方法

  对于需要排序的，后端通常会按照优先级，传一个sort字段，通过sort字段，进行优先级排序