json生成表单

string转json生成表单

json格式

//后台获取配置string转json
paramData.value = JSON.parse(res.data.configPay)
generoterRules(formData.value.configJson)


//表单校验
function generoterRules(configJson: any) {
  const rules: Record<string, any> = []
  if (Array.isArray(configJson)) {
    configJson.forEach((item: any) => {
      if (item.verify === 'required') {
        rules[item.name] = [
          {
            required: true,
            message: `请输入${item.desc}`,
            trigger: 'blur',
          },
        ]
      }
      else if (item.verify === 'requiredUrl' || (item.verify === 'requiredUrl' && item.star === '1')) {
        const urlPattern = /^(?:https?:\/\/)?[\da-z.-]+\.[a-z]{2}[/\w .-]*$/
        rules[item.name] = [
          {
            required: item.star === '1',
            trigger: 'blur',
            validator: (_rule: any, value: string) => {
              if (!value && item.star === '1') {
                return Promise.reject(new Error(`请输入${item.desc}`))
              }
              if (value && !urlPattern.test(value)) {
                return Promise.reject(new Error(`${item.desc} 必须是一个有效的 URL`))
              }
              return Promise.resolve()
            },
          },
        ]
      }
    })
  }
  paramsRules.value = rules
}

<a-form ref="formParamsRef" :rules="paramsRules" :model="paramData" class="w-full" :label-col="labelCol" :wrapper-col="wrapperCol" layout="vertical">
      <a-row :gutter="16">
        <a-col
          v-for="(item, key) in formData.configJson"
          :key="key"
          :span="item.type === 'textarea' ? 24 : 12"
        >
          <a-form-item
            v-if="item.type === 'text' "
            :label="item.desc"
            :name="item.name"
          >
            <a-input
              v-if="item.star === '1'"
              v-model:value="paramData[item.name]"
              :placeholder="paramData[`${item.name}_ph`]"
              :type="item.type"
            />
            <a-input
              v-else
              v-model:value="paramData[item.name]"
              placeholder="请输入"
              :type="item.type"
            />
          </a-form-item>
          <a-form-item
            v-else-if="item.type === 'textarea'"
            :label="item.desc"
            :name="item.name"
          >
            <a-textarea
              v-model:value="paramData[item.name]"
              placeholder="请输入"
              :type="item.type"
            />
          </a-form-item>
          <a-form-item v-else-if="item.type === 'radio'" :label="item.desc" :name="item.name">
            <a-radio-group v-model:value="paramData[item.name]">
              <a-radio
                v-for="(radioItem, radioKey) in item.values"
                :key="radioKey"
                :value="radioItem"
              >
                {{ item.titles[radioKey] }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item v-else-if="item.type === 'fileString'" :label="item.desc" :name="item.name">
            <FileBase64 
              v-model:value="paramData[item.name]" 
              :uploadType="item.uploadType" 
              :uploadSize="item.uploadSize" 
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>