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

<template>
  <div class="resi-container">
    <el-form class="resi-form">
      <el-row v-for="(item, index) in sliceList(formList, 4)" :key="index" class="resi-row" :gutter="20">
          <el-col v-for="n in item" :key="n.id" :span="6">
             <el-form-item>
              <div class="resi-cell">
                <div class="resi-cell-label">{{n.label}}</div>
                <div class="resi-cell-value" :class="n.item_type === 'radio' && 'resi-cell-value-radio'">
                  <el-input
                    v-if="n.item_type === 'input'"
                    class="resi-cell-input"
                    size="small"
                    placeholder="请输入内容"
                    >
                  </el-input>
                  <el-date-picker
                    v-else-if="n.item_type === 'date'"
                    v-model="value"
                    class="resi-cell-input"
                    type="date"
                    size="small"
                    placeholder="选择日期">
                  </el-date-picker>
                  <el-select v-else-if="n.item_type === 'select'" v-model="value" placeholder="请选择" size="small" class="resi-cell-select">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <template v-else-if="n.item_type === 'radio'">
                    <el-radio label="1">备选项</el-radio>
                    <el-radio label="1">备选项</el-radio>
                  </template>
                  <template v-else-if="n.item_type === 'checkbox'">
                    <el-checkbox-group v-model="checkList">
                      <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>
let form = {}
function initForm (obj, arr) {
  console.log('formInfo', obj)
  if (Object.keys(obj).length > 0) {
    form = { ...obj }
    return
  }
  arr.forEach(item => {
    form[item.column_name] = ''
    // this.$set(form, item.column_name, '')
  })
}
export default {
  props: {
    formList: {
      type: Array,
      default: function () {
        return []
      }
    },
    formInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    console.log('data-ttttt--', this.formList)
    initForm(this.formInfo, this.formList)
    return {
      openSearch: false,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      form,
      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">
.resi-container .resi-card {
  position: relative;
  overflow: visible;
}
.resi-down {
  position: absolute;
  left: 50%;
  bottom: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 12px;
  box-sizing: border-box;
  margin-left: -23rpx;
  cursor: pointer;
  background: #FFFFFF;
  border-radius: 0 0 10px 10px;
  img {
    display: block;
  }
}
.resi-row-box {
  height: 104px;
  overflow: hidden;
  transition: height .5s;
}
.resi-row-more {
  height: max-content;
  transition: height .5s;
}
.resi-form .resi-row {
  margin-bottom: 0;
}
.resi-search {
  .el-col {
    text-align: right;
  }
}
.resi-cell {
  display: flex;
  align-items: center;
  .resi-cell-label {
    width: 70px;
    box-sizing: border-box;
    margin-right: 15px;
    text-align: right;
    // line-height: 32;
  }
  .resi-cell-value-radio {
    display: flex;
    align-items: center;
    min-height: 32px;
  }
  .resi-cell-input {
    width: 180px;
  }
  .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>