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"),
  },
  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;
      }
    },
    // 继承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
    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)"
        >
          <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"
              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"
              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-else
              v-bind="attr"
              v-model="innerValue[item.key]"
              style="width: 100%"
            >
            </component>
          </slot>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style scoped></style>