foton-laws-system-front/src/components/CustomFormComponents/Example.vue

<template>
  <div>
    <Form v-if="reload" ref="sarStandardsInfoForm" :model="sarStandardsInfoEO" :rules="rules" class="label-input-form">
      <template v-for="item in formFieldList">
        <template v-if="item.attrType === 'INPUT_STR'">
          <custom-input :key="item.attrField" :config="item" v-model="sarStandardsInfoEO[item.attrField]"></custom-input>
        </template>
        <template v-else-if="item.attrType === 'DATE_PICKER'">
          <custom-date-pick :key="item.attrField" :config="item" v-model="sarStandardsInfoEO[item.attrField]"></custom-date-pick>
        </template>
        <template v-else-if="item.attrType === 'FILE'">
          <custom-file :key="item.attrField" :config="item" v-model="sarStandardsInfoEO[item.attrField]"></custom-file>
        </template>
        <template v-else-if="item.attrType === 'TEXTAREA'">
          <custom-textarea :key="item.attrField" :config="item" v-model="sarStandardsInfoEO[item.attrField]"></custom-textarea>
        </template>
      </template>
      <button @click="jiaoyan">aaaaa</button>
    </Form>
  </div>
</template>

<script>
import CustomInput from './Input'
import CustomTextarea from './Textarea'
import CustomSearchSelect from './SearchSelect'
import CustomDatePick from './DatePicker'
import CustomFile from './File'

export default {
  name: 'Example',
  components: {
    CustomFile,
    CustomInput,
    CustomTextarea,
    CustomSearchSelect,
    CustomDatePick
  },
  data () {
    return {
      reload: true,
      sarStandardsInfoEO: {
        TEST_AA: new Date(1602518400000)
      },
      formFieldList: [
        {
          'id': 'BR8CW5Z8ERZXSMQ9QPE7',
          'attrField': 'TEST',
          'attrName': '测试1',
          'attrType': 'INPUT_STR',
          'orderNum': 1,
          'isEdit': '0',
          'creationUser': 'WY8J26MH23',
          'validFlag': '0',
          'creationTime': '2020-10-11',
          'modifyTime': '2020-10-11',
          'attrLen': 100,
          'attrValue': null,
          'isMust': '1',
          'isShowImp': '0',
          'showRegionId': '1'
        },
        {
          'id': 'TKLUW3KLVYJHMWFTFY7U',
          'attrField': 'TEST_AA',
          'attrName': '测试2',
          'attrType': 'DATE_PICKER',
          'orderNum': 2,
          'isEdit': '0',
          'creationUser': 'WY8J26MH23',
          'validFlag': '0',
          'creationTime': '2020-10-11',
          'modifyTime': '2020-10-11',
          'attrLen': 10,
          'attrValue': null,
          'isMust': '0',
          'isShowImp': '0',
          'showRegionId': '3'
        },
        {
          'id': '89EYDA3XNBJBS7368LR6',
          'attrField': 'TEST_BB',
          'attrName': '测试3',
          'attrType': 'FILE',
          'orderNum': 3,
          'isEdit': '0',
          'creationUser': 'WY8J26MH23',
          'validFlag': '0',
          'creationTime': '2020-10-11',
          'modifyTime': '2020-10-11',
          'attrLen': 500,
          'attrValue': null,
          'isMust': '1',
          'isShowImp': '0',
          'showRegionId': '5'
        },
        {
          'id': 'CB2W6LMLSH3D4V27ZL9A',
          'attrField': 'TEST_CC',
          'attrName': '测试4',
          'attrType': 'TEXTAREA',
          'orderNum': 4,
          'isEdit': '0',
          'creationUser': 'WY8J26MH23',
          'validFlag': '0',
          'creationTime': '2020-10-11',
          'modifyTime': '2020-10-11',
          'attrLen': 500,
          'attrValue': null,
          'isMust': '1',
          'isShowImp': '0',
          'showRegionId': '4'
        }
      ],
      rules: {}
    }
  },
  mounted () {
    this.resolveFormFieldListRules()
  },
  methods: {
    /**
     * 生成校验规则
     */
    resolveFormFieldListRules () {
      this.reload = false
      const formFieldList = this.formFieldList
      const rules = {}
      formFieldList.forEach((item) => {
        const rule = []
        if (item.isMust === '0' && item.attrType !== 'DATE_PICKER') {
          rule.push({ required: true, message: `${item.attrName}不能为空`, trigger: 'blur' })
        }
        if (item.isMust === '0' && item.attrType === 'DATE_PICKER') {
          rule.push({required: true, type: 'date', message: `${item.attrName}不能为空`, trigger: 'change'})
        }
        if (item.attrLen && item.attrType !== 'DATE_PICKER' && item.attrType !== 'SEL_OPTION') {
          rule.push({type: 'string', max: item.attrLen, message: `${item.attrName}不能超过${item.attrLen}个字符`, trigger: 'blur'})
        }
        if (rule.length > 0) {
          // this.$set(this.rules, item.attrField, rule)
          rules[item.attrField] = rule
        }
      })
      // this.rules = rules
      this.$set(this, 'rules', rules)

      setTimeout(() => {
        this.reload = true
      }, 1)
      // this.$nextTick(() => {
      //   this.$refs['sarStandardsInfoForm'].resetFields()
      // })
    },
    jiaoyan () {
      this.$refs['sarStandardsInfoForm'].validate((valid) => {
      })
    }
  }
}
</script>

<style scoped>

</style>