Refactor customsData.vue to enhance search functionality and UI layout

- Updated search form to improve user experience with clearer labels and button text.
- Introduced a tabbed interface for displaying transaction information, company lists, and trade analysis reports.
- Added functionality to handle company data retrieval and comparison.
- Enhanced data display logic with pagination and loading states.
- Improved styling for better visual consistency and usability.

src/views/adweb/data/customsData.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="search-form">
-        <!-- 查询条件区域添加白色背景和按钮 -->
+        <!-- 原有的查询条件区域 -->
         <div class="query-container">
             <a-row :gutter="16">
                 <a-col :span="6">
@@ -24,7 +24,7 @@
                     </a-form-item>
                 </a-col>
             </a-row>
-            <a-row :gutter="16" >
+            <a-row :gutter="16">
                 <a-col :span="6">
                     <a-form-item label="供应商" labelAlign="left">
                         <a-input v-model:value="form.supplier" placeholder="供应商" />
@@ -49,7 +49,7 @@
                     </div>
                 </a-col>
             </a-row>
-            <a-row :gutter="16" >
+            <a-row :gutter="16">
                 <a-col :span="6">
                     <a-form-item label="采购商" labelAlign="left">
                         <a-input v-model:value="form.buyer" placeholder="采购商" />
@@ -78,7 +78,7 @@
 
             <!-- 额外搜索框 -->
             <div v-if="showAdvancedSearch">
-                <a-row :gutter="16" >
+                <a-row :gutter="16">
                     <a-col :span="6">
                         <a-form-item label="重量范围" labelAlign="left">
                             <a-input-group compact>
@@ -112,7 +112,7 @@
                         </a-form-item>
                     </a-col>
                 </a-row>
-                <a-row :gutter="16" >
+                <a-row :gutter="16">
                     <a-col :span="6">
                         <a-form-item label="原产国" labelAlign="left">
                             <a-input v-model:value="form.originCountry" placeholder="原产国" />
@@ -134,7 +134,7 @@
                         </a-form-item>
                     </a-col>
                 </a-row>
-                <a-row :gutter="16" >
+                <a-row :gutter="16">
                     <a-col :span="6">
                         <a-form-item label="海关" labelAlign="left">
                             <a-input v-model:value="form.customs" placeholder="海关" />
@@ -156,7 +156,7 @@
                         </a-form-item>
                     </a-col>
                 </a-row>
-                <a-row :gutter="16" >
+                <a-row :gutter="16">
                     <a-col :span="6">
                         <a-form-item label="分单号" labelAlign="left">
                             <a-input v-model:value="form.subOrderNo" placeholder="分单号" />
@@ -178,7 +178,7 @@
                         </a-form-item>
                     </a-col>
                 </a-row>
-                <a-row :gutter="16" >
+                <a-row :gutter="16">
                     <a-col :span="6">
                         <a-form-item label="商标" labelAlign="left">
                             <a-input v-model:value="form.brand" placeholder="商标" />
@@ -203,52 +203,72 @@
 
             <!-- 按钮行 -->
             <a-row class="button-row" justify="end">
-                <a-button type="primary" @click="handleSearch">查询</a-button>
+                <a-button type="primary" @click="handleSearch">搜索</a-button>
                 <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
             </a-row>
         </div>
     </div>
-    <div class="p-4">
-        <BasicTable @register="registerTable" :rowSelection="rowSelection">
-            <template #toolbar>
-                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
-            </template>
-        </BasicTable>
+
+    <!-- 使用 v-show 控制数据展示区域的显示/隐藏 -->
+    <div v-show="showDataContent" class="table-container">
+        <a-tabs v-model:activeKey="activeTabKey" @change="handleTabChange" class="custom-tabs">
+            <a-tab-pane key="transaction" tab="交易信息">
+                <div class="table-toolbar">
+                    <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls">
+                        导出
+                    </a-button>
+                </div>
+                <a-table
+                    :columns="columns"
+                    :data-source="tableData"
+                    :loading="loading"
+                    :pagination="{
+                        current: pagination.current,
+                        pageSize: pagination.pageSize,
+                        total: pagination.total,
+                        showSizeChanger: true,
+                        showQuickJumper: true,
+                        showTotal: (total) => `共 ${total} 条`,
+                        onChange: handleTableChange,
+                        onShowSizeChange: handleTableChange
+                    }"
+                    @change="handleTableChange"
+                />
+            </a-tab-pane>
+
+            <a-tab-pane key="companies" tab="企业列表">
+                <company-list 
+                    :companies="companiesData"
+                    @compare="handleCompareClick"
+                />
+            </a-tab-pane>
+
+            <a-tab-pane key="tradeAnalysis" tab="贸易类分析报告">
+                <div class="analysis-content">
+                    贸易类分析报告内容
+                </div>
+            </a-tab-pane>
+
+            <a-tab-pane key="shippingAnalysis" tab="航运类分析报告">
+                <div class="analysis-content">
+                    航运类分析报告内容
+                </div>
+            </a-tab-pane>
+        </a-tabs>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
-import { BasicTable } from "/@/components/Table";
-import { useListPage } from "/@/hooks/system/useListPage";
-import { list } from "./customsData.api";
+import { reactive, ref, onMounted } from 'vue';
+import { list, listCompanies } from "./customsData.api";
 import { columns } from "./customsData.data";
+import CompanyList from './components/CompanyList.vue';
 
-//注册table数据
-const { prefixCls, tableContext } = useListPage({
-    tableProps: {
-        title: "交易信息",
-        api: list,
-        columns,
-        canResize: false,
-        formConfig: {
-            //labelWidth: 120,
-            autoSubmitOnEnter: true,
-            showAdvancedButton: true,
-            fieldMapToNumber: [],
-            fieldMapToTime: []
-        },
-        actionColumn: {
-            width: 120,
-            fixed: "right"
-        },
-        beforeFetch: (params) => {
-            params.siteCode = localStorage.getItem("siteCode");
-            return Object.assign(params, queryParam);
-        }
-    }
-});
-const [registerTable, { reload }, { rowSelection }] = tableContext;
+// 当前激活的标签页
+const activeTabKey = ref('transaction');
+
+// 查询参数
+const queryParam = reactive<any>({});
 
 const form = ref({
     product: '',
@@ -277,21 +297,106 @@ const form = ref({
     teuMax: null,
     origPort: '',
     destPort: '',
+    customs: '',
+    incoterms: '',
+    mainOrderNo: '',
+    subOrderNo: '',
+    containerNo: '',
+    carrier: '',
+    shipName: '',
+    brand: '',
+    other: '',
 });
 
-const queryParam = reactive<any>({});
+// 添加控制数据展示的状态
+const showDataContent = ref(false);
 
-const reloadData = () => {
-    console.log(queryParam);
-}
+// 修改 handleSearch 方法
+const handleSearch = async () => {
+    showDataContent.value = true;
+    
+    // 构建查询参数
+    const params = {
+        // 固定参数
+        source_type: 1,
+        data_source: ['IMP_AMERICA_BL_SEA'],
+        
+        // 表单参数
+        prod_desc: form.value.product,
+        hs_code: form.value.hsCode,
+        supplier: form.value.supplier,
+        supplier_reg: form.value.supplierReg,
+        supplier_address: form.value.supplierAddress,
+        buyer: form.value.buyer,
+        buyer_reg: form.value.buyerReg,
+        buyer_address: form.value.buyerAddress,
+        origin_country: form.value.originCountry,
+        destination_country: form.value.destinationCountry,
+        orig_port: form.value.origPort,
+        dest_port: form.value.destPort,
+        customs: form.value.customs,
+        transport_mode: form.value.transportMode,
+        incoterms: form.value.incoterms,
+        main_order_no: form.value.mainOrderNo,
+        sub_order_no: form.value.subOrderNo,
+        container_no: form.value.containerNo,
+        carrier: form.value.carrier,
+        ship_name: form.value.shipName,
+        brand: form.value.brand,
+        
+        // 日期处理
+        date: form.value.startDate && form.value.endDate ? [
+            form.value.startDate.format('YYYYMMDD'),
+            form.value.endDate.format('YYYYMMDD')
+        ] : undefined,
+        
+        // 范围值处理
+        weight: form.value.weightMin || form.value.weightMax ? [
+            form.value.weightMin || '',
+            form.value.weightMax || ''
+        ] : undefined,
+        quantity: form.value.quantityMin || form.value.quantityMax ? [
+            form.value.quantityMin || '',
+            form.value.quantityMax || ''
+        ] : undefined,
+        amount: form.value.amountMin || form.value.amountMax ? [
+            form.value.amountMin || '',
+            form.value.amountMax || ''
+        ] : undefined,
+        teu: form.value.teuMin || form.value.teuMax ? [
+            form.value.teuMin || '',
+            form.value.teuMax || ''
+        ] : undefined,
+        
+        // 选项处理
+        supplier_ex_log: form.value.options?.includes('excludeLogistics'),
+        supplier_ex_nvl: form.value.options?.includes('excludeNVL'),
+        buyer_ex_log: form.value.buyerOptions?.includes('excludeLogistics'),
+        buyer_ex_nvl: form.value.buyerOptions?.includes('excludeNVL'),
+    };
 
-// 添加查询和重置方法
-const handleSearch = () => {
-    console.log('查询条件:', form.value);
-    reloadData();
-}
+    // 移除所有 undefined 和空字符串的属性
+    Object.keys(params).forEach(key => {
+        if (params[key] === undefined || params[key] === '') {
+            delete params[key];
+        }
+    });
+
+    // 将参数保存到 queryParam 以供其他地方使用
+    Object.assign(queryParam, params);
 
+    if (activeTabKey.value === 'transaction') {
+        pagination.value.current = 1; // Reset to first page
+        await handleTableChange(pagination.value);
+    }
+};
+
+// 修改重置方法
 const handleReset = () => {
+    // 隐藏数据内容
+    showDataContent.value = false;
+
+    // 重置表单
     form.value = {
         product: '',
         hsCode: '',
@@ -304,9 +409,22 @@ const handleReset = () => {
         buyer: '',
         buyerReg: '',
         buyerAddress: '',
-        buyerOptions: ['excludeNVL']
+        buyerOptions: ['excludeNVL'],
+        // ... 其他字段重置
     };
-}
+
+    // 重置查询参数，但保留基础参数
+    Object.assign(queryParam, {
+        source_type: 1,
+        data_source: ['IMP_AMERICA_BL_SEA'],
+        date: [20230101, 20230630],
+    });
+
+    // 重新加载数据
+    if (activeTabKey.value === 'transaction') {
+        reloadTransaction();
+    }
+};
 
 const onExportXls = () => {
     console.log('导出');
@@ -317,6 +435,93 @@ const showAdvancedSearch = ref(false);
 const toggleAdvancedSearch = () => {
     showAdvancedSearch.value = !showAdvancedSearch.value;
 };
+
+// 修改 onMounted，不再自动加载数据
+onMounted(() => {
+    Object.assign(queryParam, {
+        source_type: 1,
+        data_source: ['IMP_AMERICA_BL_SEA'],
+        date: [20230101, 20230630],
+    });
+});
+
+// Add these new variables
+const tableData = ref([]);
+const loading = ref(false);
+const pagination = ref({
+    current: 1,
+    pageSize: 10,
+    total: 0
+});
+
+// Replace registerTransactionTable with this new method
+const handleTableChange = async (pag, filters, sorter) => {
+    loading.value = true;
+    try {
+        const params = {
+            page: pag.current,
+            page_size: pag.pageSize,
+            sortField: sorter?.field,
+            sortOrder: sorter?.order,
+            source_type: 1,
+            data_source: ['IMP_AMERICA_BL_SEA'],
+            ...queryParam
+        };
+
+        const res = await list(params);
+        if (res.data.result && res.data.result.docs) {
+            // 处理日期格式
+            tableData.value = res.data.result.docs.map(item => ({
+                ...item,
+                date: item.date ? item.date.split(' ')[0] : ''  // 只保留日期部分
+            }));
+            pagination.value = {
+                current: pag.current,
+                pageSize: pag.pageSize,
+                total: res.data.result.numFound || 0
+            };
+        }
+    } catch (error) {
+        console.error('Failed to fetch data:', error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 企业列表数据
+const companiesData = ref([]);
+
+// 处理企业列表数据
+const handleCompaniesData = (companies) => {
+    companiesData.value = companies.map(company => ({
+        name: company.name,
+        totalRecords: company.total_records,
+        matchedRecords: company.matched_records,
+        address: company.address,
+        phone: company.phone,
+        email: company.email
+    }));
+};
+
+// 处理对比点击
+const handleCompareClick = (company) => {
+    console.log('Compare clicked for company:', company.name);
+};
+
+// 在 handleTabChange 中添加企业列表数据加载逻辑
+const handleTabChange = async (key: string) => {
+    activeTabKey.value = key;
+    if (key === 'companies') {
+        try {
+            const res = await listCompanies(queryParam);
+            if (res.result && res.result.companies) {
+                handleCompaniesData(res.result.companies);
+            }
+        } catch (error) {
+            console.error('Failed to fetch companies:', error);
+        }
+    }
+};
 </script>
 
 <style scoped lang="less">
@@ -324,6 +529,7 @@ const toggleAdvancedSearch = () => {
     padding: 20px;
     background-color: #f5f5f5;
     border-radius: 8px;
+    margin-bottom: 16px;
 
     .query-container {
         background-color: #fff;
@@ -344,12 +550,107 @@ const toggleAdvancedSearch = () => {
             border-bottom: none !important;
             background-color: transparent !important;
         }
+
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            height: 100%;
+        }
+    }
+}
+
+// 添加新的样式
+.table-container {
+    background-color: #fff;
+    border-radius: 8px;
+    padding: 16px 24px;
+    margin: 0 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    transition: opacity 0.3s ease-in-out;
+
+    .custom-tabs {
+        :deep(.ant-tabs-nav) {
+            margin-bottom: 24px;
+            
+            &::before {
+                border-bottom: 1px solid #f0f0f0;
+            }
+
+            .ant-tabs-tab {
+                padding: 12px 24px;
+                font-size: 14px;
+                transition: all 0.3s;
+
+                &:hover {
+                    color: @primary-color;
+                }
+
+                &.ant-tabs-tab-active {
+                    .ant-tabs-tab-btn {
+                        font-weight: 500;
+                    }
+                }
+            }
+
+            .ant-tabs-ink-bar {
+                height: 3px;
+                border-radius: 3px 3px 0 0;
+            }
+        }
+
+        :deep(.ant-tabs-content) {
+            padding: 8px 0;
+        }
+    }
+}
+
+// 分析报告内容样式
+.analysis-content {
+    min-height: 400px;
+    padding: 24px;
+    background: #fafafa;
+    border-radius: 4px;
+    border: 1px solid #f0f0f0;
+}
+
+// 表格工具栏样式
+:deep(.ant-table-wrapper) {
+    .ant-table-title {
+        padding: 16px 0;
+    }
+}
+
+// 按钮样式优化
+:deep(.ant-btn) {
+    height: 32px;
+    padding: 0 16px;
+    border-radius: 4px;
+    
+    &.ant-btn-primary {
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+}
+
+// 表格内容样式优化
+:deep(.ant-table) {
+    .ant-table-thead > tr > th {
+        background: #fafafa;
+        font-weight: 500;
+    }
+
+    .ant-table-tbody > tr > td {
+        transition: background 0.3s;
+    }
+
+    .ant-table-tbody > tr:hover > td {
+        background: #f5f5f5;
     }
 }
 
-.checkbox-group {
+// Add these new styles
+.table-toolbar {
+    margin-bottom: 16px;
     display: flex;
-    align-items: center;
-    height: 100%;
+    justify-content: flex-end;
 }
 </style>