mp-vue/src/views/shop/shopDealerApplyRs/components/search.vue

<!-- 搜索表单 -->
<template>
  <div class="search-container">
    <!-- 搜索表单 -->
    <a-form
      :model="searchForm"
      layout="inline"
      class="search-form"
      @finish="handleSearch"
    >
      <a-form-item label="申请人姓名">
        <a-input
          v-model:value="searchForm.realName"
          placeholder="请输入申请人姓名"
          allow-clear
          style="width: 160px"
        />
      </a-form-item>

      <a-form-item label="手机号码">
        <a-input
          v-model:value="searchForm.mobile"
          placeholder="请输入手机号码"
          allow-clear
          style="width: 160px"
        />
      </a-form-item>

      <a-form-item label="申请方式">
        <a-select
          v-model:value="searchForm.applyType"
          placeholder="全部方式"
          allow-clear
          style="width: 120px"
        >
          <a-select-option :value="10">需要审核</a-select-option>
          <a-select-option :value="20">免审核</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="审核状态">
        <a-select
          v-model:value="searchForm.applyStatus"
          placeholder="全部状态"
          allow-clear
          style="width: 120px"
        >
          <a-select-option :value="10">待审核</a-select-option>
          <a-select-option :value="20">审核通过</a-select-option>
          <a-select-option :value="30">审核驳回</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="申请时间">
        <a-range-picker
          v-model:value="searchForm.dateRange"
          style="width: 240px"
        />
      </a-form-item>

      <a-form-item>
        <a-space>
          <a-button type="primary" html-type="submit" class="ele-btn-icon">
            <template #icon>
              <SearchOutlined />
            </template>
            搜索
          </a-button>
          <a-button @click="resetSearch"> 重置 </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <a-space>
        <!--        <a-button type="primary" @click="add" class="ele-btn-icon">-->
        <!--          <template #icon>-->
        <!--            <PlusOutlined />-->
        <!--          </template>-->
        <!--          新增申请-->
        <!--        </a-button>-->
        <a-button
          type="primary"
          ghost
          :disabled="!selection?.length"
          @click="batchApprove"
          class="ele-btn-icon"
        >
          <template #icon>
            <CheckOutlined />
          </template>
          批量通过
        </a-button>
        <a-button
          :disabled="!selection?.length"
          @click="exportData"
          class="ele-btn-icon"
        >
          <template #icon>
            <ExportOutlined />
          </template>
          导出数据
        </a-button>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import {
    PlusOutlined,
    SearchOutlined,
    CheckOutlined,
    ExportOutlined
  } from '@ant-design/icons-vue';
  import type { ShopDealerApplyParam } from '@/api/shop/shopDealerApply/model';
  import dayjs from 'dayjs';

  const props = withDefaults(
    defineProps<{
      // 选中的数据
      selection?: any[];
    }>(),
    {
      selection: () => []
    }
  );

  const emit = defineEmits<{
    (e: 'search', where?: ShopDealerApplyParam): void;
    (e: 'add'): void;
    (e: 'batchApprove'): void;
    (e: 'export'): void;
  }>();

  // 搜索表单
  const searchForm = reactive<any>({
    realName: '',
    mobile: '',
    applyType: undefined,
    applyStatus: undefined,
    dateRange: undefined
  });

  // 搜索
  const handleSearch = () => {
    const searchParams: ShopDealerApplyParam = {};

    if (searchForm.realName) {
      searchParams.realName = searchForm.realName;
    }
    if (searchForm.mobile) {
      searchParams.mobile = searchForm.mobile;
    }
    if (searchForm.applyType) {
      searchParams.applyType = searchForm.applyType;
    }
    if (searchForm.applyStatus) {
      searchParams.applyStatus = searchForm.applyStatus;
    }
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      searchParams.startTime = dayjs(searchForm.dateRange[0]).format(
        'YYYY-MM-DD'
      );
      searchParams.endTime = dayjs(searchForm.dateRange[1]).format(
        'YYYY-MM-DD'
      );
    }

    emit('search', searchParams);
  };

  // 重置搜索
  const resetSearch = () => {
    searchForm.realName = '';
    searchForm.mobile = '';
    searchForm.applyType = undefined;
    searchForm.applyStatus = undefined;
    searchForm.dateRange = undefined;
    emit('search', {});
  };

  // 新增
  const add = () => {
    emit('add');
  };

  // 批量通过
  const batchApprove = () => {
    emit('batchApprove');
  };

  // 导出数据
  const exportData = () => {
    emit('export');
  };
</script>

<style lang="less" scoped>
  .search-container {
    background: #fff;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 16px;

    .search-form {
      margin-bottom: 16px;

      :deep(.ant-form-item) {
        margin-bottom: 8px;
      }
    }

    .action-buttons {
      border-top: 1px solid #f0f0f0;
      padding-top: 16px;
    }
  }
</style>