海关大数据页面搭建

src/views/adweb/data/customsData.api.ts

@@ -0,0 +1,37 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  list = 'https://openapi.tradesparq.com/cds_v2/old_api/record',
+}
+
+// 定义请求参数类型
+export interface TradeRecordQueryParams {
+  sortBy?: 'date' | 'weight';
+  page?: number;
+  pageSize?: number;
+  // 可以根据实际需求添加其他查询参数
+}
+
+// 定义响应数据类型
+export interface TradeRecordResponse {
+  total: number;
+  records: Array<{
+    // 根据实际返回数据定义具体字段
+    id: string;
+    date: string;
+    weight: number;
+    [key: string]: any;
+  }>;
+}
+
+/**
+ * 获取交易详单列表及总数
+ * @param params 查询参数
+ * @returns Promise<TradeRecordResponse>
+ */
+export const list = (params: TradeRecordQueryParams) => {
+  return defHttp.post<TradeRecordResponse>({
+    url: Api.list,
+    params,
+  });
+};

src/views/adweb/data/customsData.data.ts

@@ -0,0 +1,53 @@
+import { BasicColumn } from "/@/components/Table";
+
+//列表数据
+export const columns: BasicColumn[] = [
+    {
+        title: "供应商",
+        align: "center",
+        dataIndex: "supplier_t",
+        width: 100,
+    },
+    {
+        title: "采购商",
+        align: "center",
+        dataIndex: "buyer_t",
+        width: 100,
+    },
+    {
+        title: "货运介绍",
+        align: "center",
+        dataIndex: "orig_country_cn",
+        width: 100,
+    },
+    {
+        title:"原产地",
+        align: "center",
+        dataIndex: "orig_country_cn",
+        width: 100,
+    },
+    {
+        title:"起运港",
+        align: "center",
+        dataIndex: "orig_port",
+        width: 100,
+    },
+    {
+        title:"目的国",
+        align: "center",
+        dataIndex: "dest_country_cn",
+        width: 100,
+    },
+    {
+        title:"目的港",
+        align: "center",
+        dataIndex: "dest_port",
+        width: 100,
+    },
+    {
+        title:"日期",
+        align: "center",
+        dataIndex: "date",
+        width: 100,
+    }
+]

src/views/adweb/data/customsData.vue

@@ -0,0 +1,355 @@
+<template>
+    <div class="search-form">
+        <!-- 查询条件区域添加白色背景和按钮 -->
+        <div class="query-container">
+            <a-row :gutter="16">
+                <a-col :span="6">
+                    <a-form-item label="产品" labelAlign="left">
+                        <a-input v-model:value="form.product" placeholder="产品" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                    <a-form-item label="HS编码" labelAlign="left">
+                        <a-input v-model:value="form.hsCode" placeholder="HS编码" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                    <a-form-item label="起始日期" labelAlign="left">
+                        <a-date-picker v-model:value="form.startDate" placeholder="起始日期" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                    <a-form-item label="截止日期" labelAlign="left">
+                        <a-date-picker v-model:value="form.endDate" placeholder="截止日期" />
+                    </a-form-item>
+                </a-col>
+            </a-row>
+            <a-row :gutter="16" >
+                <a-col :span="6">
+                    <a-form-item label="供应商" labelAlign="left">
+                        <a-input v-model:value="form.supplier" placeholder="供应商" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                    <a-form-item label="供应商注册号" labelAlign="left">
+                        <a-input v-model:value="form.supplierReg" placeholder="供应商注册号" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                    <a-form-item label="供应商地址" labelAlign="left">
+                        <a-input v-model:value="form.supplierAddress" placeholder="供应商地址" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                    <div class="checkbox-group">
+                        <a-checkbox-group v-model:value="form.options">
+                            <a-checkbox value="excludeLogistics">去除物流</a-checkbox>
+                            <a-checkbox value="excludeNVL">去除NVL</a-checkbox>
+                        </a-checkbox-group>
+                    </div>
+                </a-col>
+            </a-row>
+            <a-row :gutter="16" >
+                <a-col :span="6">
+                    <a-form-item label="采购商" labelAlign="left">
+                        <a-input v-model:value="form.buyer" placeholder="采购商" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                    <a-form-item label="采购商注册号" labelAlign="left">
+                        <a-input v-model:value="form.buyerReg" placeholder="采购商注册号" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                    <a-form-item label="采购商地址" labelAlign="left">
+                        <a-input v-model:value="form.buyerAddress" placeholder="采购商地址" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                    <div class="checkbox-group">
+                        <a-checkbox-group v-model:value="form.buyerOptions">
+                            <a-checkbox value="excludeLogistics">去除物流</a-checkbox>
+                            <a-checkbox value="excludeNVL">去除NVL</a-checkbox>
+                        </a-checkbox-group>
+                    </div>
+
+                </a-col>
+            </a-row>
+
+            <!-- 额外搜索框 -->
+            <div v-if="showAdvancedSearch">
+                <a-row :gutter="16" >
+                    <a-col :span="6">
+                        <a-form-item label="重量范围" labelAlign="left">
+                            <a-input-group compact>
+                                <a-input style="width: 50%;" v-model="form.weightMin" placeholder="最小值" />
+                                <a-input style="width: 50%;" v-model="form.weightMax" placeholder="最大值" />
+                            </a-input-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="数量范围" labelAlign="left">
+                            <a-input-group compact>
+                                <a-input style="width: 50%;" v-model="form.quantityMin" placeholder="最小值" />
+                                <a-input style="width: 50%;" v-model="form.quantityMax" placeholder="最大值" />
+                            </a-input-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="金额范围" labelAlign="left">
+                            <a-input-group compact>
+                                <a-input style="width: 50%;" v-model="form.amountMin" placeholder="最小值" />
+                                <a-input style="width: 50%;" v-model="form.amountMax" placeholder="最大值" />
+                            </a-input-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="TEU范围" labelAlign="left">
+                            <a-input-group compact>
+                                <a-input style="width: 50%;" v-model="form.teuMin" placeholder="最小值" />
+                                <a-input style="width: 50%;" v-model="form.teuMax" placeholder="最大值" />
+                            </a-input-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="16" >
+                    <a-col :span="6">
+                        <a-form-item label="原产国" labelAlign="left">
+                            <a-input v-model:value="form.originCountry" placeholder="原产国" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="启运港" labelAlign="left">
+                            <a-input v-model:value="form.origPort" placeholder="启运港" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="目的国" labelAlign="left">
+                            <a-input v-model:value="form.destinationCountry" placeholder="目的国" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="目的港" labelAlign="left">
+                            <a-input v-model:value="form.destPort" placeholder="目的港" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="16" >
+                    <a-col :span="6">
+                        <a-form-item label="海关" labelAlign="left">
+                            <a-input v-model:value="form.customs" placeholder="海关" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="运输方式" labelAlign="left">
+                            <a-input v-model:value="form.transportMode" placeholder="运输方式" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="成交方式" labelAlign="left">
+                            <a-input v-model:value="form.incoterms" placeholder="成交方式" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="主单号" labelAlign="left">
+                            <a-input v-model:value="form.mainOrderNo" placeholder="主单号" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="16" >
+                    <a-col :span="6">
+                        <a-form-item label="分单号" labelAlign="left">
+                            <a-input v-model:value="form.subOrderNo" placeholder="分单号" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="集装箱号" labelAlign="left">
+                            <a-input v-model:value="form.containerNo" placeholder="集装箱号" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="承运人" labelAlign="left">
+                            <a-input v-model:value="form.carrier" placeholder="承运人" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="6">
+                        <a-form-item label="船名" labelAlign="left">
+                            <a-input v-model:value="form.shipName" placeholder="船名" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="16" >
+                    <a-col :span="6">
+                        <a-form-item label="商标" labelAlign="left">
+                            <a-input v-model:value="form.brand" placeholder="商标" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="18">
+                        <a-form-item label="其他" labelAlign="left">
+                            <a-input v-model:value="form.other" placeholder="其他" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </div>
+
+            <!-- 更多搜索按钮 -->
+            <a-row :gutter="16" style="margin-top: 16px;">
+                <a-col :span="6">
+                    <a-button @click="toggleAdvancedSearch">
+                        {{ showAdvancedSearch ? '收起' : '更多搜索' }}
+                    </a-button>
+                </a-col>
+            </a-row>
+
+            <!-- 按钮行 -->
+            <a-row class="button-row" justify="end">
+                <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>
+    </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 { columns } from "./customsData.data";
+
+//注册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 form = ref({
+    product: '',
+    hsCode: '',
+    startDate: null,
+    endDate: null,
+    supplier: '',
+    supplierReg: '',
+    supplierAddress: '',
+    options: ['excludeNVL'],
+    buyer: '',
+    buyerReg: '',
+    buyerAddress: '',
+    buyerOptions: ['excludeNVL'],
+    originCountry: '',
+    destinationCountry: '',
+    port: '',
+    transportMode: '',
+    weightMin: null,
+    weightMax: null,
+    quantityMin: null,
+    quantityMax: null,
+    amountMin: null,
+    amountMax: null,
+    teuMin: null,
+    teuMax: null,
+    origPort: '',
+    destPort: '',
+});
+
+const queryParam = reactive<any>({});
+
+const reloadData = () => {
+    console.log(queryParam);
+}
+
+// 添加查询和重置方法
+const handleSearch = () => {
+    console.log('查询条件:', form.value);
+    reloadData();
+}
+
+const handleReset = () => {
+    form.value = {
+        product: '',
+        hsCode: '',
+        startDate: null,
+        endDate: null,
+        supplier: '',
+        supplierReg: '',
+        supplierAddress: '',
+        options: ['excludeNVL'],
+        buyer: '',
+        buyerReg: '',
+        buyerAddress: '',
+        buyerOptions: ['excludeNVL']
+    };
+}
+
+const onExportXls = () => {
+    console.log('导出');
+}
+
+const showAdvancedSearch = ref(false);
+
+const toggleAdvancedSearch = () => {
+    showAdvancedSearch.value = !showAdvancedSearch.value;
+};
+</script>
+
+<style scoped lang="less">
+.search-form {
+    padding: 20px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+
+    .query-container {
+        background-color: #fff;
+        padding: 16px;
+        border-radius: 4px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+
+        .ant-row {
+            padding: 12px 0;
+
+            &:not(:last-child) {
+                border-bottom: 1px solid #e8e8e8;
+            }
+        }
+
+        .button-row {
+            padding: 16px 0 0;
+            border-bottom: none !important;
+            background-color: transparent !important;
+        }
+    }
+}
+
+.checkbox-group {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+</style>