123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- <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"),
- },
- 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 * 47 + "px";
- },
- set() {},
- },
- },
- watch: {},
- methods: {
- onVisible() {
- this.visible = !this.visible;
- },
- },
- created() {},
- mounted() {},
- destroyed() {},
- };
- </script>
- <template>
- <el-form
- 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="$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]"
- :source.sync="innerValue"
- @change="$emit('submit')"
- style="width: 100%"
- >
- </component>
- <component
- v-if="attr.is === 'el-popover-multiple-select-v2'"
- 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-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>
- </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></style>
|