mp-10584/src/views/shop/shopDealerApply/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.dealerName"
          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.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>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { SearchOutlined } 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'
      );
    }
    if (searchForm.dealerName) {
      searchParams.dealerName = searchForm.dealerName;
    }

    emit('search', searchParams);
  };

  // 重置搜索
  const resetSearch = () => {
    searchForm.realName = '';
    searchForm.mobile = '';
    searchForm.applyType = undefined;
    searchForm.applyStatus = undefined;
    searchForm.dateRange = undefined;
    emit('search', {});
  };
</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>