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';

  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' }
    },
    {
      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: 1 },
        onChange: (val) => {
          searchRef.value?.setData({ minDiscount: val.min, maxDiscount: val.max });
        }
      }
    },
  ]);

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

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