Loading

结合折叠面板的动态表单

index

<!-- 报名信息填报 -->
<template>
  <div v-loading="loading" class="container-box">
    <dynamic-form ref="dynamicForm" v-model="form" :form-config="formConfig" />
    <el-row type="flex" justify="center">
      <button class="submitButton btn" @click="submit()">
        <svg-icon icon-class="submit" />提交
      </button>
      <button class="revertButton btn" @click="revert()">
        <svg-icon icon-class="revert" />返回
      </button>
    </el-row>
  </div>
</template>

<script>
import { getUserInfo } from '@/utils/auth'
import dynamicForm from './dynamic-form.vue'
import SvgIcon from '@/components/SvgIcon'
import * as api from '@/api/informationFill.js'
import {
  scCard,
  isPhoneNumber,
  isTelNumber,
  isEmail,
  GetAge,
  getSexAndbirthday
} from '@/utils/validate'
export default {
  name: 'InformationFill',
  components: {
    dynamicForm,
    SvgIcon
  },
  props: {},
  data() {
    return {
      loading: true,
      // 绑定表单对象
      form: {
        // name: '',//姓名
        // paperWorkType: '',//证件类型
        // idCard: '',//证件号码
        // sex: '',//性别
        // birthDay: '',//出生日期
        // age: '',//年龄
        // resume: '',
        // applyLevel: '',//报考级别
        // applyQualifications: '',//报考资格
        // applySubject: '',//报考科目
        // jobTitle: '',//现有职称(资格)
        // jobTitleTime: '',//取得职称(资格)时间
        // onWork: '',//在职情况
        // workUnit: '',//工作单位
        // onWorkTime: '',//参加工作时间
        // majorWorkTime: '',//本专业工作时间
        // currentSchool: '',//所在学校
        // discipline: '',//所学专业
        // graduationTime: '',//毕业时间
        // disciplineName: '',//专业名称
        // education: '',//在学/已有学历
        // educationalType: '',//学制
        // educationalLevel: '',//学位
        // address: '',//通讯地址
        // email: '',//邮箱
        // phone: '',//手机号
        // fixedTelephone: '',//固定电话
        // zipCode: '',//邮政编码
      },
      // options字典集合
      optionSet: null,
      // 动态表单配置对象 formItemList1、formItemList2、formItemList3为配置项实例
      formConfig: {
        inline: true,
        labelPosition: 'right',
        labelWidth: '250px',
        size: 'small',
        statusIcon: true,
        formItemList1: [
          // {
          //   "type": "input",
          //   "label": "姓名:",
          //   "value": '',
          //   "disabled": false,
          //   "placeholder": "请输入姓名",
          //   "rules": [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          //   "key": "name",
          //   "subtype": "text"
          // },
          // {
          //   "type": "select",
          //   "label": "证件类型:",
          //   "value": '',
          //   "disabled": false,
          //   "clearable": true,
          //   "placeholder": "请选择证件类型",
          //   "rules": [{ required: true, message: '请选择证件类型', trigger: 'blur' }],
          //   "key": "paperWorkType",
          //   "options": [
          //     {
          //       "value": "1",
          //       "label": "居民身份证/社保卡",
          //     },
          //   ]
          // },
          // {
          //   "type": "input",
          //   "label": "身份证号:",
          //   "value": '',
          //   "disabled": false,
          //   "placeholder": "请输入身份证号",
          //   "rules": [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
          //   "key": "idCard",
          //   "subtype": "text"
          // },
          // {
          //   "type": "select",
          //   "label": "性别:",
          //   "value": '',
          //   "disabled": false,
          //   "clearable": true,
          //   "placeholder": "请选择性别",
          //   "rules": [{ required: true, message: '请选择性别', trigger: 'blur' }],
          //   "key": "sex",
          //   "options": [
          //     {
          //       "value": "0",
          //       "label": "女",
          //     },
          //     {
          //       "value": "1",
          //       "label": "男",
          //     },
          //   ]
          // },
          // {
          //   "type": "date",
          //   "label": "出生日期:",
          //   "value": '',
          //   "valueFormat": "yyyy-mm-dd",
          //   "placeholder": "请选择出生日期",
          //   "rules": [{ required: true, message: '请选择出生日期', trigger: 'blur' }],
          //   "key": "birthDay",
          //   "pickerOptions": {
          //     disabledDate (time) {
          //       // 设置禁用状态,参数为当前日期,要求返回 Boolean
          //       return time.getTime() > Date.now()
          //     }
          //   },
          // },
          // {
          //   "type": "input",
          //   "label": "年龄:",
          //   "value": '',
          //   "disabled": false,
          //   "placeholder": "请输入年龄",
          //   "rules": [{ required: true, message: '请输入年龄', trigger: 'blur' }],
          //   "key": "age",
          //   "subtype": "text"
          // },
          // {
          //   "type": "textarea",
          //   "label": "个人简历:",
          //   "value": '',
          //   "placeholder": "请输入个人简历",
          //   "rules": [{ required: true, message: '请输入个人简历', trigger: 'blur' }],
          //   "key": "resume",
          // },
        ],
        formItemList2: [
          // {
          //   "type": "select",
          //   "label": "学历:",
          //   "value": '',
          //   "disabled": false,
          //   "clearable": true,
          //   "placeholder": "请选择学历",
          //   "rules": [{ required: true, message: '请选择学历', trigger: 'blur' }],
          //   "key": "education",
          //   "options": [
          //     {
          //       "value": "1",
          //       "label": "硕士研究生",
          //     },
          //   ]
          // },
          // {
          //   "type": "select",
          //   "label": "学位:",
          //   "value": '',
          //   "disabled": false,
          //   "clearable": true,
          //   "placeholder": "请选择学位",
          //   "rules": [{ required: true, message: '请选择学位', trigger: 'blur' }],
          //   "key": "educationalLevel",
          //   "options": [
          //     {
          //       "value": "1",
          //       "label": "硕士",
          //     },
          //   ]
          // },
        ],
        formItemList3: []
      },
      fillFields: [],
      // 静态校验
      staticRules: {
        sfzh: (rule, value, callback) => {
          if (scCard(value)) {
            callback()
          } else {
            callback(new Error('身份证号码格式错误!'))
          }
        },
        lxdh1: (rule, value, callback) => {
          if (isPhoneNumber(value) || isTelNumber(value)) {
            callback()
          } else {
            callback(new Error('联系电话格式错误!'))
          }
        },
        yx: (rule, value, callback) => {
          if (isEmail(value)) {
            callback()
          } else {
            callback(new Error('邮箱格式错误!'))
          }
        }
      },
      // 分类
      listArr: ['formItemList1', 'formItemList2', 'formItemList3']
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getTableLinkage()
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      // 获取填报字段
      await this.getField()
      // 填充信息
      this.autoFillhandler()
      // 获取报考条件
      // this.getBmCondition()
    },
    // 获取填报字段
    async getField() {
      const res = await api.getField()
      console.log(res)
      this.handlerFormConfig(res)
      this.loading = false
    },
    // 获取报考条件
    async getBmCondition() {
      const res = await api.getBmCondition()
      console.log('获取报考条件', res)
    },
    // 获取字段联动
    async getTableLinkage() {
      const res = await api.getTableLinkage()
      res.forEach((item) => {
        // 添加数据监听
        this.$watch('form.' + item.watchFieldName, function (newVal, oldVal) {
          if (eval(item.fieldRule)) {
            // 表达式成立执行关联动作
            if (item.action == 1) {
              // 隐藏
              this.handlerLinkFormItem(item.linkageFieldName, 'show', false)
            } else if (item.action == 3) {
              // 禁用
              this.handlerLinkFormItem(item.linkageFieldName, 'disabled', true)
            }
          } else {
            // 不成立设置默认值
            if (item.action == 1) {
              // 展示
              this.handlerLinkFormItem(item.linkageFieldName, 'show', true)
            } else if (item.action == 3) {
              // 启用
              this.handlerLinkFormItem(
                item.linkageFieldName,
                'disabled',
                false
              )
            }
          }
        })
      })
    },
    // 处理受关联的表单项
    handlerLinkFormItem(key, field, value) {
      // 在所有分类中查找有关项
      for (let i = 0; i < this.listArr.length; i++) {
        const LinkFormItem = this.formConfig[this.listArr[i]].find(
          (item) => item.key === key
        )
        if (LinkFormItem) {
          LinkFormItem[field] = value
          return
        }
      }
    },
    // 处理表单配置
    handlerFormConfig(res) {
      res.forEach((item, index) => {
        // 设置响应式数据
        this.$set(this.form, item.name, '')
        let obj = {}
        if (item.categoryName === '基本信息') {
          if (item.fieldType === 'input') {
            obj = {
              show: item.hasShow,
              type: 'input',
              label: item.formLabel + ':',
              value: '',
              codeId: item.codeId,
              disabled: !item.firstModify,
              placeholder: '请填写' + item.formLabel,
              rules: [
                {
                  required: item.required,
                  message: '请填写' + item.formLabel,
                  trigger: 'blur'
                },
                {
                  min: 0,
                  max: item.fieldLength,
                  message: `长度在 0 到 ${item.fieldLength} 个字符`,
                  trigger: 'blur'
                }
              ],
              key: item.name,
              subtype: 'text'
            }
            if (item.formRules) {
              obj.rules.push({
                validator: this.staticRules[item.name],
                trigger: 'blur'
              })
            }
            this.formConfig.formItemList1.push(obj)
          } else if (item.fieldType === 'select') {
            obj = {
              show: item.hasShow,
              type: 'select',
              label: item.formLabel + ':',
              value: '',
              codeId: item.codeId,
              disabled: !item.firstModify,
              placeholder: '请选择' + item.formLabel,
              rules: [
                {
                  required: item.required,
                  message: '请选择' + item.formLabel,
                  trigger: 'blur'
                }
              ],
              key: item.name
              // options: Object.values(this.optionSet[item.codeId])
            }
            if (item.formRules) {
              obj.rules.push({
                validator: this.staticRules[item.name],
                trigger: 'blur'
              })
            }
            this.formConfig.formItemList1.push(obj)
          } else if (item.fieldType == 'date') {
            obj = {
              show: item.hasShow,
              type: 'date',
              label: item.formLabel + ':',
              value: '',
              codeId: item.codeId,
              valueFormat: 'yyyy-mm-dd',
              disabled: !item.firstModify,
              placeholder: '请选择' + item.formLabel,
              rules: [
                {
                  required: item.required,
                  message: '请选择' + item.formLabel,
                  trigger: 'blur'
                }
              ],
              key: item.name,
              pickerOptions: {
                disabledDate(time) {
                  // 设置禁用状态,参数为当前日期,要求返回 Boolean
                  return time.getTime() > Date.now()
                }
              }
            }
            if (item.formRules) {
              obj.rules.push({
                validator: this.staticRules[item.name],
                trigger: 'blur'
              })
            }
            this.formConfig.formItemList1.push(obj)
          }
        } else if (item.categoryName === '教育情况') {
          if (item.fieldType === 'input') {
            obj = {
              show: item.hasShow,
              type: 'input',
              label: item.formLabel + ':',
              value: '',
              codeId: item.codeId,
              disabled: !item.firstModify,
              placeholder: '请填写' + item.formLabel,
              rules: [
                {
                  required: item.required,
                  message: '请填写' + item.formLabel,
                  trigger: 'blur'
                },
                {
                  min: 0,
                  max: item.fieldLength,
                  message: `长度在 0 到 ${item.fieldLength} 个字符`,
                  trigger: 'blur'
                }
              ],
              key: item.name,
              subtype: 'text'
            }
            this.formConfig.formItemList2.push(obj)
          } else if (item.fieldType === 'select') {
            obj = {
              show: item.hasShow,
              type: 'select',
              label: item.formLabel + ':',
              value: '',
              codeId: item.codeId,
              disabled: !item.firstModify,
              placeholder: '请选择' + item.formLabel,
              rules: [
                {
                  required: item.required,
                  message: '请选择' + item.formLabel,
                  trigger: 'blur'
                }
              ],
              key: item.name
              // options: Object.values(this.optionSet[item.codeId])
            }
            if (item.formRules) {
              obj.rules.push({
                validator: this.staticRules[item.name],
                trigger: 'blur'
              })
            }
            this.formConfig.formItemList2.push(obj)
          } else if (item.fieldType == 'date') {
            obj = {
              show: item.hasShow,
              type: 'date',
              label: item.formLabel + ':',
              value: '',
              codeId: item.codeId,
              valueFormat: 'yyyy-mm-dd',
              disabled: !item.firstModify,
              placeholder: '请选择' + item.formLabel,
              rules: [
                {
                  required: item.required,
                  message: '请选择' + item.formLabel,
                  trigger: 'blur'
                }
              ],
              key: item.name,
              pickerOptions: {
                disabledDate(time) {
                  // 设置禁用状态,参数为当前日期,要求返回 Boolean
                  return time.getTime() > Date.now()
                }
              }
            }
            if (item.formRules) {
              obj.rules.push({
                validator: this.staticRules[item.name],
                trigger: 'blur'
              })
            }
            this.formConfig.formItemList2.push(obj)
          }
        } else if (item.categoryName === '其他信息') {
          if (item.fieldType === 'input') {
            obj = {
              show: item.hasShow,
              type: 'input',
              label: item.formLabel + ':',
              value: '',
              codeId: item.codeId,
              disabled: !item.firstModify,
              placeholder: '请填写' + item.formLabel,
              rules: [
                {
                  required: item.required,
                  message: '请填写' + item.formLabel,
                  trigger: 'blur'
                },
                {
                  min: 0,
                  max: item.fieldLength,
                  message: `长度在 0 到 ${item.fieldLength} 个字符`,
                  trigger: 'blur'
                }
              ],
              key: item.name,
              subtype: 'text'
            }
            if (item.formRules) {
              obj.rules.push({
                validator: this.staticRules[item.name],
                trigger: 'blur'
              })
            }
            this.formConfig.formItemList3.push(obj)
          } else if (item.fieldType === 'select') {
            obj = {
              show: item.hasShow,
              type: 'select',
              label: item.formLabel + ':',
              value: '',
              codeId: item.codeId,
              disabled: !item.firstModify,
              placeholder: '请选择' + item.formLabel,
              rules: [
                {
                  required: item.required,
                  message: '请选择' + item.formLabel,
                  trigger: 'blur'
                }
              ],
              key: item.name
              // options: Object.values(this.optionSet[item.codeId])
            }
            this.formConfig.formItemList3.push(obj)
          } else if (item.fieldType == 'date') {
            obj = {
              show: item.hasShow,
              type: 'date',
              label: item.formLabel + ':',
              value: '',
              codeId: item.codeId,
              valueFormat: 'yyyy-mm-dd',
              disabled: !item.firstModify,
              placeholder: '请选择' + item.formLabel,
              rules: [
                {
                  required: item.required,
                  message: '请选择' + item.formLabel,
                  trigger: 'blur'
                }
              ],
              key: item.name,
              pickerOptions: {
                disabledDate(time) {
                  // 设置禁用状态,参数为当前日期,要求返回 Boolean
                  return time.getTime() > Date.now()
                }
              }
            }
            if (item.formRules) {
              obj.rules.push({
                validator: this.staticRules[item.name],
                trigger: 'blur'
              })
            }
            this.formConfig.formItemList3.push(obj)
          }
        }
      })
    },
    // 填充信息
    autoFillhandler() {
      let info = getUserInfo()
      // 需要填充的字段
      let fillArr = ['sfzh', 'lxdh1', 'xm', 'nl', 'csrq', 'xb']
      // 对应的用户信息
      let valueArr = ['idCard', 'mobile', 'realName', 'age', 'birthday', 'sex']
      if (info?.idCard) {
        let obj = getSexAndbirthday(info.idCard)
        obj.age = GetAge(info.idCard)
        this.userInfo = Object.assign(info, obj)
        console.log(this.userInfo)
        // 在所有分类中查找有关项
        for (let i = 0; i < this.listArr.length; i++) {
          fillArr.forEach((str, index) => {
            let item = this.formConfig[this.listArr[i]].find(
              (item) => item.key == str
            )
            if (item) {
              // 默认值直接修改绑定的值
              console.log(this.userInfo[valueArr[index]])
              this.form[str] = this.userInfo[valueArr[index]] || ''
              // 禁用修改配置项
              if (item.key === 'xm' || item.key === 'sfzh') {
                item.disabled = true
              }
              // return
            }
          })
        }
      }
    },
    submit() {
      this.$refs.dynamicForm.$refs.form.validate((valid) => {
        if (valid) {
          let res = api.sunbmitExamInformations(this.form)
          console.log(res)
          this.$message({
            type: 'success',
            message: '提交成功!'
          })
          console.log(this.form)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 返回
    revert() {
      this.$emit('revert')
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  margin-top: 15px;
  width: 115px;
  height: 50px;
  border-radius: 10px;
  font-size: 16px;
  color: #fff;
  border: 1px solid #4077f3;
  vertical-align: middle;
  cursor: pointer;
}
.submitButton {
  background-color: #4077f3;
  margin-right: 10px;
}
.revertButton {
  color: #4077f3;
  background-color: transparent;
  margin-left: 10px;
}
.svg-icon {
  margin-right: 5px;
  width: 20px;
  height: 20px;
  vertical-align: sub;
}
</style>

dynamic-form

<!-- 动态表单组件 -->
<template>
  <div class="container-box">
    <el-form ref="form" :model="value" class="form" :inline="formConfig.inline" :label-position="formConfig.labelPosition" :label-width="formConfig.labelWidth" :size="formConfig.size">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="basicInformation">
          <template slot="title">
            <i class="dots" />
            <label style="font-size:18px">基本信息</label>
          </template>
          <el-row :gutter="20">
            <div v-for="item in formConfig.formItemList1" :key="item.key">
              <el-col v-if="item.type !=='textarea' && item.show" :span="12">
                <dynamic-form-item v-if="value[item.key]!==undefined" :item="item" :value="value[item.key]" @input="handleInput($event, item.key)" />
              </el-col>
              <el-col v-else-if="item.show" :span="24">
                <dynamic-form-item v-if="value[item.key]!==undefined" :item="item" :value="value[item.key]" @input="handleInput($event, item.key)" />
              </el-col>
            </div>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="educationInformation">
          <template slot="title">
            <i class="dots" />
            <label style="font-size:18px">教育情况</label>
          </template>
          <el-row :gutter="20">
            <div v-for="item in formConfig.formItemList2" :key="item.key">
              <el-col v-if="item.type !=='textarea'&& item.show" :span="12">
                <dynamic-form-item v-if="value[item.key]!==undefined" :item="item" :value="value[item.key]" @input="handleInput($event, item.key)" />
              </el-col>
              <el-col v-else-if="item.show" :span="24">
                <dynamic-form-item v-if="value[item.key]!==undefined" :item="item" :value="value[item.key]" @input="handleInput($event, item.key)" />
              </el-col>
            </div>
          </el-row>
        </el-collapse-item>
        <el-collapse-item name="otherInformation">
          <template slot="title">
            <i class="dots" />
            <label style="font-size:18px">其他信息</label>
          </template>
          <el-row :gutter="20">
            <div v-for="item in formConfig.formItemList3" :key="item.key">
              <el-col v-if="item.type !=='textarea'&& item.show" :span="12">
                <dynamic-form-item v-if="value[item.key]!==undefined" :item="item" :value="value[item.key]" @input="handleInput($event, item.key)" />
              </el-col>
              <el-col v-else-if="item.show" :span="24">
                <dynamic-form-item v-if="value[item.key]!==undefined" :item="item" :value="value[item.key]" @input="handleInput($event, item.key)" />
              </el-col>
            </div>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import dynamicFormItem from './dynamic-form-item'
export default {
  name: 'DynamicForm',
  components: {
    dynamicFormItem
  },
  props: {
    formConfig: {
      required: true,
      type: Object
    },
    value: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      activeNames: ['basicInformation', 'educationInformation', 'otherInformation']
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.setDefaultValue()
  },
  methods: {
    handleInput (val, key) {
      // 这里直接合并赋值
      this.$emit('input', { ...this.value, [key]: val })
    },
    setDefaultValue () {
      const formData = { ...this.value }
      // 设置默认值 渲染之前,保证每个字段都有值
      for (let i = 1; i < 4; i++) {
        const str = 'formItemList' + i
        this.formConfig[str].forEach(({ key, value }) => {
          // if (formData[key] === undefined || formData[key] === null) {
          formData[key] = value
          // }
        })
      }
      this.$emit('input', formData)
    }

  }
}

</script>

<style lang='scss' scoped>
.dots {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #4077f3;
  vertical-align: middle;
  margin-right: 10px;
}
::v-deep.container-box .el-collapse {
  border: none;
}
::v-deep.container-box .el-collapse-item__header .is-active {
  border: none;
}
::v-deep.container-box .el-collapse-item__header {
  background-color: #edf3ff;
  height: 50px;
  padding-left: 20px;
  border: none;
}
::v-deep.container-box .el-collapse-item__wrap {
  border: none;
}
::v-deep.container-box .el-collapse-item__content {
  padding: 25px 0px;
}
</style>


dynamic-form-item

<template>
  <el-form-item
    class="dynamic-form-item"
    :rules="item.rules"
    :label="item.label"
    :prop="item.key"
    style="width: 100%"
    :inline-message="item.type === 'textarea' ? true : false"
  >
    <el-input
      v-if="item.type === 'input'"
      style="width: 100%"
      v-bind="$attrs"
      :type="item.subtype"
      :placeholder="item.placeholder"
      :disabled="item.disabled"
      clearable
      v-on="$listeners"
    />
    <el-select
      v-else-if="item.type === 'select' && item.key !== 'xb'"
      style="width: 100%"
      v-bind="$attrs"
      :disabled="item.disabled"
      :placeholder="item.placeholder"
      filterable
      clearable
      v-on="$listeners"
      @focus="selectFocus(item.codeId)"
    >
      <el-option
        v-for="o in options"
        :key="o.code"
        :label="o.description"
        :value="o.code"
      />
    </el-select>
    <el-select
      v-else-if="item.type === 'select' && item.key === 'xb'"
      style="width: 100%"
      v-bind="$attrs"
      :disabled="item.disabled"
      :placeholder="item.placeholder"
      filterable
      clearable
      v-on="$listeners"
    >
      <el-option
        v-for="o in options"
        :key="o.code"
        :label="o.description"
        :value="o.code"
      />
    </el-select>
    <el-date-picker
      v-else-if="item.type === 'date'"
      class="date-picker"
      style="width: 100%"
      v-bind="$attrs"
      :value-format="item.valueFormat"
      :placeholder="item.placeholder"
      :picker-options="item.pickerOptions"
      v-on="$listeners"
    />
    <el-input
      v-else-if="item.type === 'textarea'"
      class="textArea"
      style="width: 100%"
      type="textarea"
      :rows="4"
      placeholder="请输入个人简历情况"
      v-bind="$attrs"
      v-on="$listeners"
    />
    <div v-if="item.type === 'textarea'" class="el-form-item__error">
      格式:某年某月-某年某月 某单位 例如:1999年9月-2003年7月 某单位
      (内容完整连贯) 如没有,请填无
    </div>
    <el-radio-group
      v-else-if="item.type === 'radio'"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <el-radio label="true">是</el-radio>
      <el-radio label="false">否</el-radio>
    </el-radio-group>
  </el-form-item>
</template>

<script>
import { getCoteItemOne } from '@/api/informationFill.js'

export default {
  name: 'DynamicFormItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      options: []
    }
  },
  watch: {
    item: {
      // 监听渲染的item项 如果是性别立即获取字典
      handler: function(newVal, oldVal) {
        if (newVal.key === 'xb') {
          console.log('监听渲染的item项 如果是性别立即获取字典')
          this.selectFocus(newVal.codeId)
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    async selectFocus(codeId) {
      console.log(codeId)
      const res = await getCoteItemOne(codeId)
      this.options = res
      console.log('获取单个字典', res)
    }
  }
}
</script>
<style lang="scss" scoped>
.dynamic-form-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
::v-deep.dynamic-form-item .el-form-item__content {
  // width: calc(100% - 210px);
  flex: 1;
}
::v-deep.dynamic-form-item .el-form-item__label {
  line-height: 16px;
}
::v-deep.el-form-item .el-form-item__error--inline {
  margin-left: 0;
}
::v-deep.date-picker .el-input__inner {
  padding: 0 15px; // 这个15是el-input组件默认的值
}
::v-deep.date-picker .el-input__prefix {
  right: 5px;
  left: unset;
}
// ::v-deep.date-picker  .el-input__suffix{
//   right: 25px;
// }
</style>

json数据

{"code":0,"msg":"success","data":[{"id":"1509098809943154690","examId":"010101","name":"shengshi","description":"省市","fieldType":"input","fieldLength":60,"fieldOrder":2,"codeId":null,"formLabel":"省市","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098809876045825","examId":"010101","name":"id","description":"id","fieldType":"input","fieldLength":32,"fieldOrder":3,"codeId":null,"formLabel":"id","formItem":null,"formTips":null,"hasTips":null,"required":true,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098809943154689","examId":"010101","name":"exam_id","description":"考试类别ID","fieldType":"select","fieldLength":6,"fieldOrder":4,"codeId":"ZY","formLabel":"考试类别ID","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810010263554","examId":"010101","name":"bmd","description":"报名点(dept_id)","fieldType":"input","fieldLength":60,"fieldOrder":4,"codeId":null,"formLabel":"报名点(dept_id)","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810010263555","examId":"010101","name":"bmxh","description":"报名序号","fieldType":"input","fieldLength":50,"fieldOrder":5,"codeId":null,"formLabel":"报名序号","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"02","categoryName":"教育情况"},{"id":"1509098810010263556","examId":"010101","name":"xm","description":"姓名","fieldType":"input","fieldLength":50,"fieldOrder":6,"codeId":null,"formLabel":"姓名","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"02","categoryName":"教育情况"},{"id":"1509098810010263557","examId":"010101","name":"xb","description":"性别","fieldType":"select","fieldLength":2,"fieldOrder":7,"codeId":"AX","formLabel":"性别","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098809943154691","examId":"010101","name":"kaoqu","description":"考区(考试所在地点)","fieldType":"input","fieldLength":60,"fieldOrder":8,"codeId":null,"formLabel":"考区(考试所在地点)","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810077372417","examId":"010101","name":"zzmm","description":"政治面貌","fieldType":"select","fieldLength":10,"fieldOrder":9,"codeId":"AT","formLabel":"政治面貌","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810077372418","examId":"010101","name":"mz","description":"民族","fieldType":"select","fieldLength":30,"fieldOrder":10,"codeId":"AE","formLabel":"民族","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810077372419","examId":"010101","name":"rdtsj","description":"入党团时间","fieldType":"date","fieldLength":null,"fieldOrder":11,"codeId":null,"formLabel":"入党团时间","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810077372420","examId":"010101","name":"sfzh","description":"身份证号","fieldType":"input","fieldLength":18,"fieldOrder":12,"codeId":null,"formLabel":"身份证号","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":"sfzh","hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810140286977","examId":"010101","name":"bkjb","description":"报考级别","fieldType":"input","fieldLength":10,"fieldOrder":13,"codeId":null,"formLabel":"报考级别","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810140286978","examId":"010101","name":"bkzy","description":"报考专业","fieldType":"input","fieldLength":200,"fieldOrder":14,"codeId":null,"formLabel":"报考专业","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810140286979","examId":"010101","name":"bkdw","description":"报考单位","fieldType":"input","fieldLength":60,"fieldOrder":15,"codeId":null,"formLabel":"报考单位","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810140286980","examId":"010101","name":"bkzw","description":"报考职位","fieldType":"input","fieldLength":60,"fieldOrder":16,"codeId":null,"formLabel":"报考职位","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810207395841","examId":"010101","name":"zgxl","description":"最高学历","fieldType":"input","fieldLength":200,"fieldOrder":17,"codeId":null,"formLabel":"最高学历","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"02","categoryName":"教育情况"},{"id":"1509098810207395842","examId":"010101","name":"zgxw","description":"最高学位","fieldType":"select","fieldLength":100,"fieldOrder":18,"codeId":"AN","formLabel":"最高学位","formItem":null,"formTips":"最高学位","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"02","categoryName":"教育情况"},{"id":"1509098810207395843","examId":"010101","name":"bysj","description":"毕业时间(选择 年月日)","fieldType":"date","fieldLength":null,"fieldOrder":19,"codeId":null,"formLabel":"毕业时间(选择 年月日)","formItem":null,"formTips":"毕业时间","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"02","categoryName":"教育情况"},{"id":"1509098810270310402","examId":"010101","name":"byyx","description":"毕业院校","fieldType":"select","fieldLength":255,"fieldOrder":20,"codeId":"AT","formLabel":"毕业院校","formItem":null,"formTips":"毕业院校","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"02","categoryName":"教育情况"},{"id":"1509098810270310403","examId":"010101","name":"byzy","description":"毕业专业","fieldType":"input","fieldLength":255,"fieldOrder":21,"codeId":null,"formLabel":"毕业专业","formItem":null,"formTips":"毕业专业","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810270310404","examId":"010101","name":"xgzdw","description":"现工作单位","fieldType":"input","fieldLength":255,"fieldOrder":22,"codeId":null,"formLabel":"现工作单位","formItem":null,"formTips":"现工作单位","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810333224961","examId":"010101","name":"lxdh1","description":"联系电话1","fieldType":"input","fieldLength":20,"fieldOrder":23,"codeId":null,"formLabel":"联系电话1","formItem":null,"formTips":"联系电话","hasTips":null,"required":false,"formRules":"zj","hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"99","categoryName":"其他信息"},{"id":"1509098810333224962","examId":"010101","name":"lxdh2","description":"联系电话","fieldType":"input","fieldLength":20,"fieldOrder":24,"codeId":null,"formLabel":"联系电话","formItem":null,"formTips":"联系电话","hasTips":null,"required":false,"formRules":"sjh","hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"99","categoryName":"其他信息"},{"id":"1509098810333224963","examId":"010101","name":"jcgzjynx","description":"是否基层工作经验(年限) 0 代表没有","fieldType":"input","fieldLength":1,"fieldOrder":25,"codeId":null,"formLabel":"是否基层工作经验(年限) 0 代表没有","formItem":null,"formTips":"是否基层工作经验","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":3,"category":"01","categoryName":"基本信息"},{"id":"1509098810396139522","examId":"010101","name":"sfdxscg","description":"是否大学生村官","fieldType":"input","fieldLength":1,"fieldOrder":26,"codeId":null,"formLabel":"是否大学生村官","formItem":null,"formTips":"是否大学生村官","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":3,"category":"01","categoryName":"基本信息"},{"id":"1509098810396139523","examId":"010101","name":"sfncywjygw","description":"是否农村义务教育阶段学校教师特设岗位计划","fieldType":"input","fieldLength":1,"fieldOrder":27,"codeId":null,"formLabel":"是否农村义务教育阶段学校教师特设岗位计划","formItem":null,"formTips":"是否农村义务教育阶段学校教师特设岗位计划","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":3,"category":"01","categoryName":"基本信息"},{"id":"1509098810396139524","examId":"010101","name":"sfszyfjh","description":"是否三支一扶计划","fieldType":"input","fieldLength":1,"fieldOrder":28,"codeId":null,"formLabel":"是否三支一扶计划","formItem":null,"formTips":"是否三支一扶计划","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":3,"category":"01","categoryName":"基本信息"},{"id":"1509098810396139525","examId":"010101","name":"sfdxszyfwxbjh","description":"是否大学生致远服务西部计划","fieldType":"input","fieldLength":1,"fieldOrder":29,"codeId":null,"formLabel":"是否大学生致远服务西部计划","formItem":null,"formTips":"是否大学生致远服务西部计划","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":3,"category":"01","categoryName":"基本信息"},{"id":"1509098810459054082","examId":"010101","name":"sfjdfy5n","description":"是否军队服役5年","fieldType":"input","fieldLength":1,"fieldOrder":30,"codeId":null,"formLabel":"是否军队服役5年","formItem":null,"formTips":"是否军队服役5年","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":3,"category":"01","categoryName":"基本信息"},{"id":"1509098810459054083","examId":"010101","name":"jyjl","description":"教育经历(从小学)","fieldType":"input","fieldLength":1,"fieldOrder":31,"codeId":null,"formLabel":"教育经历(从小学)","formItem":null,"formTips":"教育经历","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":3,"category":"01","categoryName":"基本信息"},{"id":"1509098810459054084","examId":"010101","name":"gzjl","description":"工作经历","fieldType":"textarea","fieldLength":65535,"fieldOrder":32,"codeId":null,"formLabel":"工作经历","formItem":null,"formTips":"工作经历","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810526162946","examId":"010101","name":"jtcy","description":"家庭成员","fieldType":"input","fieldLength":255,"fieldOrder":33,"codeId":null,"formLabel":"家庭成员","formItem":null,"formTips":"家庭成员","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810526162947","examId":"010101","name":"jcqk","description":"奖惩情况","fieldType":"textarea","fieldLength":65535,"fieldOrder":34,"codeId":null,"formLabel":"奖惩情况","formItem":null,"formTips":"奖惩情况","hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810526162948","examId":"010101","name":"shzt","description":"审核zt(0 未审核  1 已审核)","fieldType":"input","fieldLength":1,"fieldOrder":35,"codeId":null,"formLabel":"审核zt(0 未审核  1 已审核)","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":3,"category":"01","categoryName":"基本信息"},{"id":"1509098810593271810","examId":"010101","name":"create_date","description":"创建时间","fieldType":"date","fieldLength":null,"fieldOrder":36,"codeId":null,"formLabel":"创建时间","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"},{"id":"1509098810526162949","examId":"010101","name":"creator","description":"创建者","fieldType":"input","fieldLength":null,"fieldOrder":37,"codeId":null,"formLabel":"创建者","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":19,"category":"01","categoryName":"基本信息"},{"id":"1509098810593271811","examId":"010101","name":"updater","description":"更新者","fieldType":"input","fieldLength":null,"fieldOrder":38,"codeId":null,"formLabel":"更新者","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":0,"numericScale":19,"category":"01","categoryName":"基本信息"},{"id":"1509098810593271812","examId":"010101","name":"update_date","description":"更新时间","fieldType":"date","fieldLength":null,"fieldOrder":39,"codeId":null,"formLabel":"更新时间","formItem":null,"formTips":null,"hasTips":null,"required":false,"formRules":null,"hasShow":true,"firstModify":true,"hasModify":true,"numericPrecision":null,"numericScale":null,"category":"01","categoryName":"基本信息"}]}
posted @ 2022-05-11 11:13  资深if-else侠  阅读(256)  评论(0编辑  收藏  举报