mp-vue/src/views/shop/shopDealerOrder/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.orderId"
          placeholder="请输入订单编号"
          allow-clear
          style="width: 160px"
        />
      </a-form-item>

      <a-form-item label="商品名称">
        <a-input
          v-model:value="searchForm.productName"
          placeholder="请输入商品名称"
          allow-clear
          style="width: 160px"
        />
      </a-form-item>

      <a-form-item label="订单状态">
        <a-select
          v-model:value="searchForm.isInvalid"
          placeholder="全部"
          allow-clear
          style="width: 120px"
        >
          <a-select-option :value="0">有效</a-select-option>
          <a-select-option :value="1">失效</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="结算状态">
        <a-select
          v-model:value="searchForm.isSettled"
          placeholder="全部"
          allow-clear
          style="width: 120px"
        >
          <a-select-option :value="0">未结算</a-select-option>
          <a-select-option :value="1">已结算</a-select-option>
        </a-select>
      </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="batchSettle"
          class="ele-btn-icon"
        >
          <template #icon>
            <DollarOutlined />
          </template>
          批量结算
        </a-button>
        <a-button @click="exportData" class="ele-btn-icon">
          <template #icon>
            <ExportOutlined />
          </template>
          导出数据
        </a-button>
        <a-button @click="openImport" class="ele-btn-icon">
          <template #icon>
            <UploadOutlined />
          </template>
          导入数据
        </a-button>
      </a-space>
    </div>
  </div>

  <!-- 导入弹窗 -->
  <Import v-model:visible="showImport" @done="emit('importDone')" />
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import {
    SearchOutlined,
    DollarOutlined,
    ExportOutlined,
    UploadOutlined
  } from '@ant-design/icons-vue';
  import type { ShopDealerOrderParam } from '@/api/shop/shopDealerOrder/model';
  import Import from './Import.vue';

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

  const emit = defineEmits<{
    (e: 'search', where?: ShopDealerOrderParam): void;
    (e: 'batchSettle'): void;
    (e: 'export'): void;
    (e: 'importDone'): void;
  }>();

  // 是否显示导入弹窗
  const showImport = ref(false);

  // 搜索表单
  const searchForm = reactive<ShopDealerOrderParam>({
    orderId: undefined,
    orderNo: '',
    productName: '',
    isInvalid: undefined,
    isSettled: undefined
  });

  // 搜索
  const handleSearch = () => {
    const searchParams = { ...searchForm };
    // 清除空值
    Object.keys(searchParams).forEach(key => {
      if (searchParams[key] === '' || searchParams[key] === undefined) {
        delete searchParams[key];
      }
    });
    emit('search', searchParams);
  };

  // 重置搜索
  const resetSearch = () => {
    Object.keys(searchForm).forEach(key => {
      searchForm[key] = key === 'orderId' ? undefined : '';
    });
    emit('search', {});
  };

  // 批量结算
  const batchSettle = () => {
    emit('batchSettle');
  };

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

  // 打开导入弹窗
  const openImport = () => {
    showImport.value = true;
  };
</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>