frame/components/form.vue

<template>
  <div id="add">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="form" size="small" @submit.native.prevent>
      <el-form-item v-for="(item, index) in fields" :key="'form-field-' + index" :label="getField('label', item)" :prop="item.model" :required="item.required">
        <template v-if="!item.custom">
          <!-- <template v-if="item.type === `date` || item.type === `datetime`">
            <date-select :value="form[item.model]" :type="item.type" :model="item.model" @handle="fieldChange" :placeholder="item.label"></date-select>
            <el-input :readonly="true" v-model="form[item.model]" @click.native="dateShow = true" :placeholder="`请选择时间`"></el-input>
            <van-action-sheet v-model="dateShow">
              <van-datetime-picker
                v-model="form[item.model]"
                type="date"
                :min-date="new Date(`1920/01/01`)"
                :max-date="new Date()"
                @cancel="show = false"
                @confirm="data => onDateSelect(data, item.model)"
              />
            </van-action-sheet>
          </template> -->
          <template v-if="item.type === 'select'">
            <el-select v-model="form[item.model]">
              <slot name="options"></slot>
            </el-select>
          </template>
          <template v-else>
            <el-input v-model="form[item.model]" :type="getField('type', item)" :placeholder="getField('placeholder', item)" v-bind="item.options"></el-input>
          </template>
        </template>
        <template v-else>
          <slot name="custom" v-bind="{ item, form, fieldChange }"></slot>
        </template>
      </el-form-item>
      <el-form-item>
        <el-row type="flex" align="middle" justify="space-around">
          <el-col :span="6">
            <el-button type="primary" @click="save">保存</el-button>
          </el-col>
          <el-col :span="6">
            <el-button @click="$emit('cancel')">返回</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'add',
  props: {
    fields: { type: Array, default: () => [] },
    rules: { type: Object, default: () => {} },
    isNew: { type: Boolean, default: true },
    data: null,
  },
  components: {},
  data: () => ({
    form: {},
    display: undefined,
    show: false,
    dateShow: false,
  }),
  created() {},
  computed: {},
  mounted() {},
  watch: {
    data: {
      handler(val) {
        if (val) this.$set(this, `form`, this.data);
      },
      immediate: true,
    },
  },
  methods: {
    getField(item, data) {
      let res = _.get(data, item, null);
      if (item === 'type') res = res === null ? `text` : res;
      if (item === 'placeholder') res = res === null ? `请输入${data.label}` : res;
      if (item === 'required') res = res === null ? false : res;
      if (item === `error`) res = res === null ? `${data.label}错误` : res;
      return res;
    },
    save() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$emit(`save`, { isNew: this.isNew, data: this.form });
        } else {
          console.warn('form validate error!!!');
        }
      });
    },
    fieldChange({ model, value }) {
      this.$set(this.form, model, value);
    },
    onSelect(item, model) {
      this.$set(this, `display`, item.name);
      this.$set(this.form, model, item.value);
      this.show = false;
    },
    onDateSelect(item, model) {
      let date = new Date(item);
      this.$set(this.form, model, date.toLocaleDateString());
      // this.$emit('handle', { model: this.model, value: date.toLocaleDateString() });
      this.dateShow = false;
    },
    getDisplay(val) {
      this.$set(this, `display`, val);
      this.$set(this, `select`, new Date(val));
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  padding: 2rem;
  background: #fff;border-radius: 20px;
}
</style>