drp-ui/src/components/super-form/index.vue

<script>
export default {
  name: "SuperForm",
  props: {
    value: {
      type: [Object],
      required: true,
    },
    dict: {
      type: [Object],
      required: true,
    },
    columns: {
      type: [Array],
      required: true,
    },
  },
  components: {
    ElFileUpload: () => import("@/components/FileUpload/index.vue"),
    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
    ElPopoverMultipleSelectV2: () =>
      import("@/components/popover-select-v2/multiple.vue"),
    ElPopoverTreeSelect: () =>
      import("@/components/popover-tree-select/index.vue"),
    ElPopoverMultipleTreeSelect: () =>
      import("@/components/popover-tree-select/multiple.vue"),
    ElDateWrapper: () => import("@/components/date-wrapper/index.vue"),
  },
  data() {
    const { columns } = this.$props;
    const innerColumns = columns;
    return {
      drawer: false,
      visible: false,
      innerColumns: innerColumns,
    };
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
  watch: {},
  methods: {
    //
    getFormItemRequired(prop, value) {
      if (typeof prop.required === "function") {
        return prop.required(value);
      }
      if (typeof prop.required === "boolean") {
        return prop.required;
      }
    },
    //
    getFormItemDisabled(prop, value) {
      if (typeof prop.disabled === "function") {
        return prop.disabled(value);
      }
      if (typeof prop.disabled === "boolean") {
        return prop.disabled;
      }
    },
    // 继承el-table的Method
    extendMethod() {
      const refMethod = Object.entries(this.$refs["superForm"]);
      for (const [key, value] of refMethod) {
        if (!(key.includes("$") || key.includes("_"))) {
          this[key] = value;
        }
      }
    },
  },
  created() {},
  mounted() {
    this.extendMethod();
  },
  destroyed() {},
};
</script>

<template>
  <el-form
    class="superForm"
    ref="superForm"
    v-bind="$attrs"
    v-on="$listeners"
    :model="innerValue"
    @submit.native.prevent
  >
    <el-row :gutter="24" style="display: flex; flex-wrap: wrap">
      <el-col
        v-for="({ item, attr }, index) in innerColumns"
        :key="index"
        :span="item.span"
      >
        <el-form-item
          :prop="item.key"
          :label="item.title"
          :required="getFormItemRequired(item, innerValue)"
        >
          <template #default="form">
            <slot :name="item.key" :row="innerValue" :item="item" :attr="attr">
              <component
                v-if="attr.is === 'el-select'"
                v-bind="attr"
                v-model="innerValue[item.key]"
                style="width: 100%"
              >
                <template>
                  <el-option
                    v-for="item in dict.type[attr.dictName]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </template>
              </component>
              <component
                v-else-if="attr.is === 'el-popover-select-v2'"
                v-bind="attr"
                :title="item.title"
                v-model="innerValue[item.key]"
                :source.sync="innerValue"
                style="width: 100%"
              >
              </component>
              <component
                v-else-if="attr.is === 'el-popover-multiple-select-v2'"
                v-bind="attr"
                :title="item.title"
                v-model="innerValue[item.key]"
                :source.sync="innerValue"
                style="width: 100%"
              >
              </component>
              <component
                v-else-if="attr.is === 'el-popover-tree-select'"
                v-bind="attr"
                v-model="innerValue[item.key]"
                :source.sync="innerValue"
                style="width: 100%"
              >
              </component>
              <component
                v-else-if="attr.is === 'el-popover-multiple-tree-select'"
                v-bind="attr"
                v-model="innerValue[item.key]"
                :source.sync="innerValue"
                style="width: 100%"
              >
              </component>
              <component
                v-if="attr.is === 'el-date-wrapper'"
                v-bind="attr"
                v-model="innerValue[item.key]"
                :source.sync="innerValue"
                @change="$emit('submit')"
                style="width: 100%"
              >
              </component>
              <component
                v-else
                v-bind="attr"
                v-model="innerValue[item.key]"
                :disabled="getFormItemDisabled(attr, innerValue)"
                style="width: 100%"
              >
              </component>
            </slot>
          </template>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style scoped>
.superForm >>> .el-form-item {
  margin-bottom: 5px;
}
</style>