anpinjingyuan-ui/src/combination/formComponent.vue

<template>
  <div>
    <el-form :model="form" ref="form" style="display:flex;flex-wrap: wrap">
      <el-form-item
        v-for="(item,index) in formOption" :key="item.index?item.index:index" v-if="(index+1) <= inDex"
        :prop="item.label"
        :label="item.name"
        :label-width="item.labelSize + 'px'"
        :rules="item.rules"
      >
        <el-input v-model="form[item.label]" :onkeyup="item.onabort" :disabled="item.disabled" v-if="item.inputType == 2" :style="{ width: item.width + 'px' }" size="small" :placeholder="'请输入'+item.name"></el-input>
        <span v-if="item.inputType == 1">
          <el-select :multiple="item.multiple" :clearable="item.clearable === true?false:true" v-model="form[item.label]" :disabled="item.disabled" :style="{ width: item.width + 'px' }" filterable slot="prepend" @change="change(item.label,dataList[item.label],form[item.label])" placeholder="请选择">
            <el-option v-for="(li,index) in dataList[item.label]" :key="index" :label="li.label" :value="li.value"></el-option>
          </el-select>
        </span>
        <el-input
          v-if="item.inputType == 4"
          type="textarea"
          :onkeyup="item.onabort"
          :style="{ width: item.width + 'px' }"
          autosize
          :disabled="item.disabled"
          placeholder="请输入内容"
          v-model="form[item.label]">
        </el-input>
        <div style="width: 100%;display:flex;" v-if="item.inputType == 5">
          <el-input v-model="number" :onkeyup="item.onabort" :style="{ width: item.width + 'px' }" placeholder="请输入内容" :disabled="item.disabled" @input="spellNumbers(item.label)"></el-input>
          <span style="padding-left: 10px;padding-right: 10px">至</span>
          <el-input v-model="numBer" :onkeyup="item.onabort" :style="{ width: item.width + 'px' }" placeholder="请输入内容" :disabled="item.disabled" @input="spellNumbers(item.label)"></el-input>
        </div>
        <el-date-picker
          v-if="item.inputType == 6"
          :disabled="item.disabled"
          v-model="form[item.label]"
          size="small"
          :style="{ width: item.width + 'px' }"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        <el-date-picker
          :disabled="item.disabled"
          v-if="item.inputType == 3"
          :style="{ width: item.width + 'px' }"
          v-model="form[item.label]"
          type="daterange"
          value-format="yyyy-MM-dd"
          :default-time="['00:00:00', '23:59:59']"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'formComponent',
  props:['formOption','dataList','inDex'],
  data() {
    return {
      form:{},
      numBer:'',
      number:'',
    };
  },
  created() {
    console.log(this.dataList)
  },
  methods: {
    returnToForm(){
      this.$emit('returnToForm', this.form)
    },
    assignmentTime(formLi){
      console.log(formLi)
      this.$set(this,'form',formLi)
    },
    spellNumbers(name){
      this.form[name] = [this.number,this.numBer]
    },
    //选中后触发
    change(name,list,id){
      this.$emit('selectTrigger',name,list,id)
    },
    //清除表单验证
    clearVerification(){
      this.$nextTick(()=>{
        this.$refs['form'].clearValidate();
      })
    },
    //表单验证
    submitForm(form,item) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (form === 'submit'){
            this.$emit('submitAndSave',item)
          }else if (form === 'check'){
            this.$emit('writeOff')
          }else {
            this.$emit('submitForm')
          }
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>

</style>