epmet-oper-pc/epmet-oper-web/src/views/components/resiForm.vue

<template>
  <div :id="formId" class="resi-container">
    <el-form :ref="formId" class="resi-form" :model="form" :rules="rules" :label-width="labelWidth">
      <el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row">
          <el-col v-for="n in item" :key="n.id" :span="n.item_type === 'textarea'&&24 || 6">
             <el-form-item :prop="n.column_name" :label="n.label">
              <!-- <div class="resi-cell"> -->
                <!-- <div class="resi-cell-label">{{n.label}}</div> -->
                <div class="resi-cell-value">
                  <template v-if="n.item_type === 'input'">
                    <el-input
                      v-if="n.valid_type"
                      v-model="form[n.column_name]"
                      class="resi-cell-input"
                      size="small"
                      clearable
                      placeholder="请输入内容"
                      >
                    </el-input>
                    <el-input
                      v-else
                      v-model="form[n.column_name]"
                      class="resi-cell-input"
                      size="small"
                      clearable
                      placeholder="请输入内容"
                      >
                    </el-input>
                  </template>
                  <template v-if="n.item_type === 'textarea'">
                    <el-input
                      v-model="form[n.column_name]"
                      class="resi-cell-textarea"
                      size="small"
                      type="textarea"
                      clearable
                      placeholder="请输入内容"
                      >
                    </el-input>
                  </template>
                  <el-date-picker
                    v-else-if="n.item_type === 'date'"
                    v-model="form[n.column_name]"
                    class="resi-cell-input"
                    type="date"
                    size="small"
                    clearable
                    placeholder="选择日期">
                  </el-date-picker>
                  <el-select v-else-if="n.item_type === 'select'" v-model="form[n.column_name]"
                  placeholder="请选择" size="small" clearable class="resi-cell-select">
                    <el-option
                      v-for="item in n.option_source_value || options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <template v-else-if="n.item_type === 'radio'">
                    <el-radio v-for="ns in n.option_source_value" :key="ns.value" v-model="form[n.column_name]"
                    :label="ns.value">
                      {{ ns.label }}
                    </el-radio>
                    <!-- <el-radio v-model="form[n.column_name]" label="1">备选项</el-radio> -->
                  </template>
                  <template v-else-if="n.item_type === 'checkbox'">
                    <el-checkbox-group v-model="form[n.column_name]">
                      <el-checkbox label="复选框 A"></el-checkbox>
                      <el-checkbox label="复选框 B"></el-checkbox>
                    </el-checkbox-group>
                  </template>
                </div>
              <!-- </div> -->
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
  </div>
</template>

<script>
import { isCard, isMobile } from '@/utils/validate'

export default {
  name: 'resiForm',
  props: {
    labelWidth: {
      type: String,
      default: '100px'
    },
    formId: {
      type: String,
      default: 'resiForm'
    },
    formList: {
      type: Array,
      default: function () {
        return []
      }
    },
    formInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    let form = {}
    // let rules = {}
    let checkMObile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (!isMobile(value)) {
          callback(new Error('手机号格式不正确'))
        }
        callback()
      }
    }
    let checkIdCard = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入身份证'))
      } else {
        if (!isCard(value)) {
          callback(new Error('身份证号格式不正确'))
        }
        callback()
      }
    }
    let initForm = (obj, arr) => {
      console.log('formInfo', obj)
      if (Object.keys(obj).length > 0) {
        form = { ...obj }
        return
      }
      arr.forEach(item => {
        form[item.column_name] = ''
      })
    }
    let initRules = (arr) => {
      let rules = {}
      arr.forEach(item => {
        if (item.require) {
          if (item.valid_type === 'mobile') {
            rules[item.column_name] = [
              { validator: checkMObile, trigger: 'blur' }
            ]
          } else if (item.valid_type === 'id_card') {
            rules[item.column_name] = [
              { validator: checkIdCard, trigger: 'blur' }
            ]
          } else {
            rules[item.column_name] = [
              { required: true, message: `请输入${item.label}`, trigger: 'blur' }
            ]
          }
        }
      })
      return rules
    }
    initForm(this.formInfo, this.formList)
    let rules = initRules(this.formList)
    return {
      openSearch: false,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      form,
      rules,
      value: '',
      checkList: ['选中且禁用', '复选框 A']
    }
  },
  computed: {
    sliceList () {
      return function (data, count) {
        if (data !== undefined) {
          let index = 0
          let arrTemp = []
          for (let i = 0; i < data.length; i++) {
            index = parseInt(i / count)
            if (arrTemp.length <= index) {
              arrTemp.push([])
            }
            arrTemp[index].push(data[i])
          }
          return arrTemp
        }
      }
    }
  },
  created () {
    // this.initForm()
    console.log('formInfo---ggg', this.form)
  },
  methods: {
    initForm () {
      console.log('formInfo', this.formInfo)
      if (Object.keys(this.formInfo).length > 0) {
        this.form = { ...this.formInfo }
        return
      }
      this.formList.forEach(item => {
        this.$set(this.form, item.column_name, '')
      })
    },
    handleOpenSearch () {
      this.openSearch = !this.openSearch
    }
  }
}
</script>

<style lang="scss">
.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100% !important;
}
</style>
<style lang="scss" scoped>

.resi-form .resi-row {
  margin-bottom: 0;
}

// .resi-form .resi-cell {
//   display: flex;
//   align-items: center;
  // .resi-cell-label {
  //   width: 70px;
  //   box-sizing: border-box;
  //   margin-right: 15px;
  //   text-align: right;
  // }
  // .resi-cell-value-radio {
  //   display: flex;
  //   align-items: center;
  //   min-height: 36px;
  // }
  //  .resi-cell-value .resi-cell-input {
  //   width: 180px;
  // }
  .resi-cell-value .resi-cell-textarea {
    width: 300px;
  }
  // .resi-cell-select {
  //   width: 180px;
  //   box-sizing: border-box;
  //   margin-right: 10px;
  //   &-middle {
  //     width: 130px;
  //   }
  //   &-small {
  //     width: 88px;
  //   }
  // }
  .resi-cell-select:last-child {
    margin-right: 0;
  }
// }
</style>