Browse Source

Enhance API integration and UI for company data management

- Updated .env.development to include new proxy for Tradesparq API.
- Refactored customsData.api.ts to add new API endpoints and request signing functionality.
- Expanded TradeRecordQueryParams interface with additional filtering options.
- Introduced companyColumns for displaying company data in the UI.
- Added CompanyList.vue component for rendering a list of companies with contact details and comparison functionality.
zq940222 3 months ago
parent
commit
37cdec1dd5

+ 1 - 1
.env.development

@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
 
 
 # 跨域代理,您可以配置多个 ,请注意,没有换行符
-VITE_PROXY = [["/adweb3","http://localhost:8080/adweb3"],["/upload","http://localhost:3300/upload"]]
+VITE_PROXY = [["/adweb3","http://localhost:8080/adweb3"],["/upload","http://localhost:3300/upload"],["/tradesparq","https://openapi.tradesparq.com"]]
 
 #后台接口全路径地址(必填)
 VITE_GLOB_DOMAIN_URL=http://localhost:8080/adweb3

+ 118 - 0
src/views/adweb/data/components/CompanyList.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="company-list">
+        <div v-for="company in companies" :key="company.name" class="company-card">
+            <div class="company-header">
+                <h3 class="company-name">{{ company.name }}</h3>
+                <a-button type="primary" size="small" @click="handleCompareClick(company)">
+                    对比
+                </a-button>
+            </div>
+            
+            <div class="company-stats">
+                <span>共 {{ company.totalRecords }} 条统记录</span>
+                <span>其中 {{ company.matchedRecords }} 条相匹配</span>
+            </div>
+            
+            <div class="company-contact">
+                <div class="contact-item">
+                    <span class="label">联系方式:</span>
+                    <div class="contact-actions">
+                        <a-button 
+                            v-for="action in ['google', 'bing', 'AI邮箱']" 
+                            :key="action"
+                            size="small"
+                        >
+                            {{ action }}
+                        </a-button>
+                    </div>
+                </div>
+                <div class="contact-item">
+                    <span class="label">联系地址:</span>
+                    <span>{{ company.address }}</span>
+                </div>
+                <div class="contact-item" v-if="company.phone">
+                    <span class="label">电话:</span>
+                    <span>{{ company.phone }}</span>
+                </div>
+                <div class="contact-item" v-if="company.email">
+                    <span class="label">邮箱:</span>
+                    <span>{{ company.email }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+    companies: {
+        type: Array,
+        required: true,
+        default: () => []
+    }
+});
+
+const emit = defineEmits(['compare']);
+
+const handleCompareClick = (company) => {
+    emit('compare', company);
+};
+</script>
+
+<style lang="less" scoped>
+.company-list {
+    padding: 16px;
+    
+    .company-card {
+        background: #fff;
+        border: 1px solid #e8e8e8;
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 16px;
+        
+        .company-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+            
+            .company-name {
+                margin: 0;
+                font-size: 16px;
+                font-weight: 500;
+                color: #1890ff;
+            }
+        }
+        
+        .company-stats {
+            margin-bottom: 12px;
+            color: #666;
+            
+            span {
+                margin-right: 24px;
+            }
+        }
+        
+        .company-contact {
+            .contact-item {
+                margin-bottom: 8px;
+                
+                .label {
+                    color: #666;
+                    margin-right: 8px;
+                }
+                
+                .contact-actions {
+                    display: inline-block;
+                    
+                    .ant-btn {
+                        margin-right: 8px;
+                    }
+                }
+            }
+        }
+    }
+}
+</style> 

+ 81 - 13
src/views/adweb/data/customsData.api.ts

@@ -1,22 +1,61 @@
 import { defHttp } from '/@/utils/http/axios';
+import md5 from 'md5';
+
+const API_UID = "Sw5bYYe7";  // 替换为实际的 API ID
+const API_SECRET = "j4ThjI10jiV3L3y7";  // 替换为实际的 API Secret
 
 enum Api {
-  list = 'https://openapi.tradesparq.com/cds_v2/old_api/record',
+  list = 'http://localhost:3100/tradesparq/cds_v2/old_api/record',
+  listCompanies = 'http://localhost:3100/tradesparq/cds_v2/old_api/company',
 }
 
 // 定义请求参数类型
 export interface TradeRecordQueryParams {
-  sortBy?: 'date' | 'weight';
-  page?: number;
-  pageSize?: number;
-  // 可以根据实际需求添加其他查询参数
+  source_type?: number; // 数据源类型,1:2018年到至今数据,2:历史数据
+  data_source?: string[]; // 数据源数组
+  date?: number[]; // 时间范围,用两个元素的数组表示,元素为8位数字
+  prod_desc?: string; // 产品关键词
+  hs_code?: string; // HS编码2-10位
+  supplier_t?: string; // 供应商名称
+  supplier_addr?: string; // 供应商地址
+  supplier_ex_nvl?: boolean; // 排除NVL供应商名称
+  supplier_ex_log?: boolean; // 排除物流供应商名称
+  buyer_t?: string; // 采购商名称
+  buyer_addr?: string; // 采购商地址
+  buyer_ex_nvl?: boolean; // 排除NVL采购商名称
+  buyer_ex_log?: boolean; // 排除物流采购商名称
+  quantity?: string[]; // 数量范围数组
+  weight?: string[]; // 重量范围数组
+  amount?: string[]; // 金额范围数组
+  teu?: string[]; // TEU范围数组
+  master_bill_no?: string; // 主单号(模糊匹配)
+  sub_bill_no?: string; // 分单号(模糊匹配)
+  container_no?: string[]; // 集装箱号(模糊匹配)
+  carrier_name?: string; // 承运人(模糊匹配)
+  vessel_name?: string; // 船名(模糊匹配)
+  brand?: string; // 商标
+  others?: string; // 其他信息
+  log_shipper?: string; // 物流发货人
+  log_consignee?: string; // 物流收货人
+  f_orig_country?: string[]; // 筛选,原产地包含数组
+  f_orig_country_ex?: string[]; // 筛选,原产地不包含数组
+  f_orig_port?: string[]; // 筛选,起运港ID包含数组
+  f_orig_port_ex?: string[]; // 筛选,起运港ID不包含数组
+  f_dest_country?: string[]; // 筛选,目的地包含数组
+  f_dest_country_ex?: string[]; // 筛选,目的地不包含数组
+  f_dest_port?: string[]; // 筛选,目的港ID包含数组
+  f_dest_port_ex?: string[]; // 筛选,目的港ID不包含数组
+  orig_country_code?: string[]; // 原产地编码数组
+  orig_port_t?: string; // 起运港
+  dest_country_code?: string[]; // 目的地编码数组
+  dest_port_t?: string; // 目的港
+  [key: string]: any; // 允许其他未定义的参数
 }
 
 // 定义响应数据类型
 export interface TradeRecordResponse {
   total: number;
   records: Array<{
-    // 根据实际返回数据定义具体字段
     id: string;
     date: string;
     weight: number;
@@ -25,13 +64,42 @@ export interface TradeRecordResponse {
 }
 
 /**
+ * 生成请求签名
+ */
+function generateRequestSign(params: TradeRecordQueryParams): string {
+    const sortedValues = Object.keys(params)
+        .sort()
+        .map(k => JSON.stringify(params[k]))
+        .join('');
+    
+    // 使用 md5 模块生成签名
+    return md5(API_SECRET + sortedValues);
+}
+
+/**
  * 获取交易详单列表及总数
- * @param params 查询参数
- * @returns Promise<TradeRecordResponse>
  */
-export const list = (params: TradeRecordQueryParams) => {
-  return defHttp.post<TradeRecordResponse>({
-    url: Api.list,
-    params,
-  });
+export const list = async (params: TradeRecordQueryParams) => {
+    const requestSign = generateRequestSign(params);
+    
+    return defHttp.post<TradeRecordResponse>(
+        {
+            url: Api.list,
+            params,
+            headers: {
+                'Content-Type': 'application/json',
+                'X-API-UID': API_UID,
+                'X-API-REQUEST-SIGN': requestSign
+            },
+            withCredentials: false,
+        },
+        {
+            errorMessageMode: 'message',
+            isTransformResponse: false,
+        }
+    );
+};
+
+export const listCompanies = (params) => {
+    return defHttp.post({ url: Api.listCompanies, params });
 };

+ 19 - 0
src/views/adweb/data/customsData.data.ts

@@ -51,3 +51,22 @@ export const columns: BasicColumn[] = [
         width: 100,
     }
 ]
+
+export const companyColumns = [
+    {
+        title: '企业名称',
+        dataIndex: 'name',
+        width: 200,
+    },
+    {
+        title: '注册号',
+        dataIndex: 'registrationNumber',
+        width: 150,
+    },
+    {
+        title: '地址',
+        dataIndex: 'address',
+        width: 300,
+    },
+    // ... 添加更多需要的列
+];