shuhi-ui/src/views/recycle/components/book-search.vue

<!-- 搜索表单 -->
<template>
  <ele-card :body-style="{ paddingBottom: '8px' }">
    <ProSearch
      :items="formItems"
      ref="searchRef"
      @search="search"
      :initKeys="initKeys"
    ></ProSearch>
  </ele-card>
</template>

<script setup>
  import { reactive, ref, defineEmits } from 'vue';
  import ProSearch from '@/components/CommonPage/ProSearch2.vue';

  const props = defineProps({
    isBookTag: {
      type: Boolean,
      default: false
    }
  });

  let { proxy } = getCurrentInstance();
  const emit = defineEmits(['search']);

  const formItems = reactive([
    { type: 'input', label: '书名', prop: 'bookName' },
    { type: 'input', label: 'ISBN', prop: 'isbn' },
    { type: 'input', label: '作者', prop: 'author' },
    { type: 'input', label: '出版社', prop: 'publish' },
    {
      type: 'daterange',
      label: '出版时间',
      prop: 'pubDate',
      keys: ['pubDateStart', 'pubDateEnd'],
      props: {
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD',
        onChange: (val) => {
          searchRef.value?.setData({
            pubDateStart: val && val.length > 0 ? val[0] : '',
            pubDateEnd: val && val.length > 0 ? val[1] : ''
          });
        }
      }
    },
    {
      type: 'inputNumberRange',
      label: '定价',
      prop: 'price',
      keys: ['minPrice', 'maxPrice'],
      props: {
        onChange: (val) => {
          searchRef.value?.setData({ minPrice: val.min, maxPrice: val.max });
        }
      }
    },
    {
      type: 'inputNumberRange',
      label: '回收折扣',
      prop: 'discount',
      keys: ['minDiscount', 'maxDiscount'],
      props: {
        minAttrs: { min: 0 },
        maxAttrs: { max: 10 },
        onChange: (val) => {
          searchRef.value?.setData({
            minDiscount: val.min,
            maxDiscount: val.max
          });
        }
      }
    },
    {
      type: 'dictSelect',
      label: '图书类型',
      prop: 'bookTag',
      props: {
        code: 'book_tag'
      },
      vIf: () => {
        return props.isBookTag;
      }
      // 1教材 2社科 3中小学 4其他 5全部
    },
    {
      type: 'select',
      label: '默认参数',
      prop: 'defaultType',
      props: {
        multiple: true,
        clearable: true,
        collapseTags: true
      },
      options: [
        { label: '最大回收数量', value: 1 },
        { label: '单个订单回收数量', value: 2 },
        { label: '回收折扣', value: 3 }
      ]
    }
  ]);

  const initKeys = reactive({
    bookName: '',
    isbn: '',
    author: '',
    publish: '',
    pubDateStart: '',
    pubDateEnd: '',
    minPrice: void 0,
    maxPrice: void 0,
    minDiscount: void 0,
    maxDiscount: void 0,
    globalInDiscount: void 0,
    globalNotInDiscount: void 0,
    defaultType: []
  });

  const searchRef = ref(null);
  /** 搜索 */
  const search = (data) => {
    let params = JSON.parse(JSON.stringify(data));
    delete params.price;
    delete params.discount;
    delete params.pubDate;
    params.defaultType = params.defaultType.join(',');
    emit('search', params);
  };
</script>