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

<script>
export default {
  name: "SuperSearch",
  props: {
    value: {
      type: [Object],
      require: true,
    },
    dict: {
      type: [Object],
      require: true,
    },
    columns: {
      type: [Array],
      require: true,
    },
  },
  components: {
    ElDraggable: () => import("@/components/draggable/index.vue"),
    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.map(({ item, attr }) => ({
      attr,
      item: { ...item, hidden: true, span: item.span || 6 },
    }));
    return {
      drawer: false,
      visible: false,
      innerColumns: innerColumns,
    };
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
    showColumns: {
      get() {
        return this.innerColumns.filter(({ item }) => item.hidden);
      },
      set() {},
    },
    height: {
      get() {
        const maxMultiples = Math.ceil(
          this.innerColumns
            .map(({ item }) => item.span)
            .reduce((prev, curr) => {
              return prev + curr;
            }) / 24
        );
        const multiples = this.visible ? maxMultiples : 1;
        return multiples * 41 + "px";
      },
      set() {},
    },
  },
  watch: {},
  methods: {
    onVisible() {
      this.visible = !this.visible;
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>

<template>
  <el-form
    class="superForm"
    ref="superForm"
    v-bind="$attrs"
    v-on="$listeners"
    :model="innerValue"
    label-width="auto"
    label-position="right"
    @submit.native.prevent
  >
    <el-row
      :gutter="24"
      :style="{ height }"
      style="overflow: hidden; transition: 250ms; display: flex"
      class="px-3"
    >
      <el-row :gutter="20" style="flex: 1; display: flex; flex-wrap: wrap">
        <el-col
          v-for="({ item, attr }, index) in showColumns"
          :key="index"
          :span="item.span"
        >
          <el-form-item :prop="item.key" :label="item.title">
            <component
              v-if="attr.is === 'el-input'"
              v-bind="attr"
              v-model="innerValue[item.key]"
              @keyup.enter.native="$emit('submit')"
              style="width: 100%"
            >
            </component>
            <component
              v-if="attr.is === 'el-select'"
              v-bind="attr"
              v-model="innerValue[item.key]"
              @change="attr.multiple ? '': $emit('submit')"
              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-if="attr.is === 'el-date-picker'"
              v-bind="attr"
              v-model="innerValue[item.key]"
              @change="$emit('submit')"
              style="width: 100%"
            >
            </component>
            <component
              v-if="attr.is === 'el-popover-select-v2'"
              v-bind="attr"
              v-model="innerValue[item.key]"
              :title="item.title"
              :source.sync="innerValue"
              @change="$emit('submit')"
              style="width: 100%"
            >
            </component>
            <component
              v-if="attr.is === 'el-popover-multiple-select-v2'"
              v-bind="attr"
              :title="item.title"
              v-model="innerValue[item.key]"
              :source.sync="innerValue"
              @change="$emit('submit')"
              style="width: 100%"
            >
            </component>
            <component
              v-if="attr.is === 'el-popover-tree-select'"
              v-bind="attr"
              v-model="innerValue[item.key]"
              :source.sync="innerValue"
              @change="$emit('submit')"
              style="width: 100%"
            >
            </component>
            <component
              v-if="attr.is === 'el-popover-multiple-tree-select'"
              v-bind="attr"
              v-model="innerValue[item.key]"
              :source.sync="innerValue"
              @change="$emit('submit')"
              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>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="width: fit-content; text-align: right" class="ml-5">
        <el-button :size="$attrs.size" type="primary" @click="$emit('submit')">
          搜索
        </el-button>
        <el-button :size="$attrs.size" @click="$emit('reset')">
          重置
        </el-button>
        <!-- <el-button :size="$attrs.size" @click="visible = !visible">
          {{ visible ? "展开" : "收起" }}
        </el-button> -->
      </el-row>
    </el-row>
    <el-divider class="m-0" style="cursor: pointer" @click="visible = !visible">
      <i
        class="el-icon-d-arrow-left"
        style="transition: 250ms"
        :style="{ transform: `rotate(${visible ? 90 : -90}deg)` }"
      ></i>
    </el-divider>
  </el-form>
</template>

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