hkyy/admin-frame/naf/data/form-dlg.vue

<template>
  <el-dialog :title="title" :visible="visible" :width="width" :close-on-click-modal="false" @close="$emit('cancel')">
    <el-form ref="form" :model="form" :rules="rules" v-bind="options">
      <slot>
        <el-form-item
          v-for="(item, index) in fields"
          :key="'form-field-' + index"
          :label="item.field.label"
          :prop="item.field.name"
          :required="item.field.required"
          :rules="item.rules"
          v-bind="item.formOpts"
        >
          <naf-input
            v-model="form[item.field.name]"
            :disabled="readonly || item.field.readonly || (!isNew && item.field.editable === false)"
            :placeholder="(item.formOpts && item.formOpts.placeholder) || (isNew && item.field.readonly && '--- 系统生成 ---')"
            :dict="item.dict"
            :type="item.formOpts && item.formOpts.inputType"
            v-bind="mergeLength(item)"
          ></naf-input>
        </el-form-item>
      </slot>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave" :size="options.size" v-show="!readonly">确 定</el-button>
      <el-button @click="$emit('cancel')" :size="options.size">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { FieldMeta } from './meta-util';
import NafInput from './naf-input';

export default {
  name: 'data-dlg',
  components: {
    NafInput,
  },
  props: {
    data: { type: Object, required: true },
    meta: { type: Array, required: true },
    rules: Object,
    readonly: { type: Boolean, default: false } /* 是否只读 */,
    isNew: { type: Boolean, default: false } /* 是否新创建 */,
    options: {
      type: Object,
      default: () => ({ size: 'small' }),
    } /* form options */,
    width: String,
    title: String,
    visible: { type: Boolean, default: true },
  },
  data() {
    return {
      form: { ...this.data },
    };
  },
  methods: {
    handleSave() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$emit('save', { isNew: this.isNew, data: this.form });
        } else {
          console.warn('form validate error!!!');
        }
      });
    },
    mergeRules(meta) {
      if (
        meta.field.required &&
        (!this.rules || !this.rules[meta.field.name] || !this.rules[meta.field.name].some(p => p.required)) &&
        (!meta.rules || !meta.rules || !meta.rules.some(p => p.required))
      ) {
        const rules = meta.rules || [];
        rules.push({ required: true, message: '不能为空' });
        return rules;
      } else {
        return meta.rules;
      }
    },
    mergeLength(meta) {
      const rules = [...((this.rules && this.rules[meta.field.name]) || []), ...(meta.rules || [])];
      const { max, min } = rules.find(r => r.max || r.min) || {};
      return { maxlength: max || 48, minlength: min || 0 };
    },
  },
  computed: {
    fields() {
      return this.meta
        .map(FieldMeta)
        .filter(p => p.slots.form)
        .sort((a, b) => a.order - b.order || a.index - b.index)
        .map(p => ({
          ...p,
          dict: this.$dict && p.formatter && p.formatter.name === 'dict' && this.$dict(p.formatter.param),
          rules: this.mergeRules(p),
        }));
    },
  },
};
</script>