|
|
@@ -210,27 +210,52 @@
|
|
|
|
|
|
<!-- 使用 v-show 控制数据展示区域的显示/隐藏 -->
|
|
|
<div v-show="showDataContent" class="table-container">
|
|
|
- <a-tabs v-model:activeKey="activeTabKey" @change="handleTabChange" class="custom-tabs">
|
|
|
+ <a-tabs v-model:activeKey="activeTabKey" @change="handleTabChange" class="custom-tabs" type="card">
|
|
|
<a-tab-pane key="transaction" tab="交易信息">
|
|
|
- <div class="table-toolbar">
|
|
|
- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出 </a-button>
|
|
|
+ <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">
|
|
|
+
|
|
|
+ <template #bodyCell="{ column, record, text }">
|
|
|
+ <template v-if="column.key === 'supplier_t'">
|
|
|
+ <a @click="handleSupplierClick(record.supplier_id)">{{ text }}</a>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <div :inert="isModalVisible">
|
|
|
+ <!-- 其他内容 -->
|
|
|
+ <a-modal v-model:open="isModalVisible" title="企业详情">
|
|
|
+ <div>
|
|
|
+ <div v-if="supplier">
|
|
|
+ <h1>{{ supplier.name }}</h1> <!-- 添加企业名称 -->
|
|
|
+ <p><strong>地址:</strong> {{ supplier.address }}</p> <!-- 添加企业地址 -->
|
|
|
+ <p><strong>联系方式:</strong> postal code:{{ supplier.postal_code }}</p> <!-- 添加联系方式 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 新增选项卡 -->
|
|
|
+ <a-tabs v-model:activeKey="activeTabKey" @change="handleTabChange" type="card">
|
|
|
+ <a-tab-pane key="tradeOverview" tab="贸易总览">
|
|
|
+ <!-- 贸易总览内容 -->
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="exportDetails" tab="出口详单">
|
|
|
+ <!-- 出口详单内容 -->
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="exportTradingPartners" tab="出口贸易伙伴">
|
|
|
+ <!-- 出口贸易伙伴内容 -->
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane key="enterpriseAtlas" tab="企业图谱">
|
|
|
+ <!-- 企业图谱内容 -->
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </a-modal>
|
|
|
</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="企业列表">
|
|
|
@@ -270,40 +295,186 @@
|
|
|
</a-tab-pane>
|
|
|
|
|
|
<a-tab-pane key="shippingAnalysis" tab="航运类分析报告">
|
|
|
- <div class="analysis-content"> 航运类分析报告内容 </div>
|
|
|
+ <div class="analysis-content">
|
|
|
+ <div class="analysis-item">
|
|
|
+ <OrigPortAnalysis :origPortData="origPortData"></OrigPortAnalysis>
|
|
|
+ </div>
|
|
|
+ <div class="analysis-item">
|
|
|
+ <DestPortAnalysis :destPortData="destPortData"></DestPortAnalysis>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="analysis-item">
|
|
|
+ <TransTypeAnalysis :transTypeData="transTypeData"></TransTypeAnalysis>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="analysis-item">
|
|
|
+ <IncotermsAnalysis :incotermsData="incotermsData"></IncotermsAnalysis>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { reactive, ref, onMounted } from 'vue';
|
|
|
- import {
|
|
|
- list,
|
|
|
- listCompanies,
|
|
|
- getTrendReport,
|
|
|
- getHsCodeReport,
|
|
|
- getOrigCountryReport,
|
|
|
- getDestCountryReport,
|
|
|
- getSupplierReport,
|
|
|
- getBuyerReport,
|
|
|
- } from './customsData.api';
|
|
|
- import { columns } from './customsData.data';
|
|
|
- import CompanyList from './components/CompanyList.vue';
|
|
|
- import TradeAnalysis from './components/TradeAnalysis.vue';
|
|
|
- import HsCodeAnalysis from './components/HsCodeAnalysis.vue';
|
|
|
- import OriginCountryAnalysis from './components/OriginCountryAnalysis.vue';
|
|
|
- import DestinationCountryAnalysis from './components/DestinationCountryAnalysis.vue';
|
|
|
- import SupplierList from './components/SupplierList.vue';
|
|
|
- import BuyerList from './components/BuyerList.vue';
|
|
|
-
|
|
|
- // 当前激活的标签页
|
|
|
- const activeTabKey = ref('transaction');
|
|
|
-
|
|
|
- // 查询参数
|
|
|
- const queryParam = reactive<any>({});
|
|
|
-
|
|
|
- const form = ref({
|
|
|
+import { reactive, ref, onMounted } from 'vue';
|
|
|
+import {
|
|
|
+ list,
|
|
|
+ listCompanies,
|
|
|
+ getTrendReport,
|
|
|
+ getHsCodeReport,
|
|
|
+ getOrigCountryReport,
|
|
|
+ getDestCountryReport,
|
|
|
+ getSupplierReport,
|
|
|
+ getBuyerReport,
|
|
|
+ getOrigPortReport,
|
|
|
+ getDestPortReport,
|
|
|
+ getTransTypeReport,
|
|
|
+ getIncotermsReport,
|
|
|
+ getCompanyInfo
|
|
|
+} from './customsData.api';
|
|
|
+import { columns } from './customsData.data';
|
|
|
+import CompanyList from './components/CompanyList.vue';
|
|
|
+import TradeAnalysis from './components/TradeAnalysis.vue';
|
|
|
+import HsCodeAnalysis from './components/HsCodeAnalysis.vue';
|
|
|
+import OriginCountryAnalysis from './components/OriginCountryAnalysis.vue';
|
|
|
+import DestinationCountryAnalysis from './components/DestinationCountryAnalysis.vue';
|
|
|
+import SupplierList from './components/SupplierList.vue';
|
|
|
+import BuyerList from './components/BuyerList.vue';
|
|
|
+import OrigPortAnalysis from './components/OrigPortAnalysis.vue';
|
|
|
+import DestPortAnalysis from './components/DestPortAnalysis.vue';
|
|
|
+import TransTypeAnalysis from './components/TransTypeAnalysis.vue';
|
|
|
+import IncotermsAnalysis from './components/IncotermsAnalysis.vue';
|
|
|
+import { Dayjs } from 'dayjs';
|
|
|
+
|
|
|
+const supplier = ref<{ name: string; address: string; postal_code: string } | null>(null);
|
|
|
+type RangeValue = [Dayjs, Dayjs];
|
|
|
+const date = ref<RangeValue>();
|
|
|
+
|
|
|
+// 当前激活的标签页
|
|
|
+const activeTabKey = ref('transaction');
|
|
|
+
|
|
|
+// 查询参数
|
|
|
+const queryParam = reactive<any>({});
|
|
|
+
|
|
|
+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: '',
|
|
|
+ customs: '',
|
|
|
+ incoterms: '',
|
|
|
+ mainOrderNo: '',
|
|
|
+ subOrderNo: '',
|
|
|
+ containerNo: '',
|
|
|
+ carrier: '',
|
|
|
+ shipName: '',
|
|
|
+ brand: '',
|
|
|
+ other: '',
|
|
|
+});
|
|
|
+
|
|
|
+// 添加控制数据展示的状态
|
|
|
+const showDataContent = ref(false);
|
|
|
+
|
|
|
+// ���改 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'),
|
|
|
+ };
|
|
|
+
|
|
|
+ // 移除所有 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);
|
|
|
+ } else if (activeTabKey.value === 'companies') {
|
|
|
+ await handleTabChange('companies'); // Load companies data
|
|
|
+ } else if (activeTabKey.value === 'tradeAnalysis') {
|
|
|
+ await handleTabChange('tradeAnalysis'); // Load trade analysis data
|
|
|
+ } else if (activeTabKey.value === 'shippingAnalysis') {
|
|
|
+ await handleTabChange('shippingAnalysis'); // Load shipping analysis data
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+// 修改重置方法
|
|
|
+const handleReset = () => {
|
|
|
+ // 隐藏数据内容
|
|
|
+ showDataContent.value = false;
|
|
|
+
|
|
|
+ // 重置表单
|
|
|
+ form.value = {
|
|
|
product: '',
|
|
|
hsCode: '',
|
|
|
startDate: null,
|
|
|
@@ -316,478 +487,445 @@
|
|
|
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: '',
|
|
|
- customs: '',
|
|
|
- incoterms: '',
|
|
|
- mainOrderNo: '',
|
|
|
- subOrderNo: '',
|
|
|
- containerNo: '',
|
|
|
- carrier: '',
|
|
|
- shipName: '',
|
|
|
- brand: '',
|
|
|
- other: '',
|
|
|
+ // ... 其他字段重置
|
|
|
+ };
|
|
|
+
|
|
|
+ // 重置查询参数，但保留基础参数
|
|
|
+ Object.assign(queryParam, {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ date: [20230101, 20230630],
|
|
|
});
|
|
|
|
|
|
- // 添加控制数据展示的状态
|
|
|
- const showDataContent = ref(false);
|
|
|
+ // 重新加载数据
|
|
|
+ if (activeTabKey.value === 'transaction') {
|
|
|
+ reloadTransaction();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const showAdvancedSearch = ref(false);
|
|
|
|
|
|
- // 修改 handleSearch 方法
|
|
|
- const handleSearch = async () => {
|
|
|
- showDataContent.value = true;
|
|
|
+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'],
|
|
|
-
|
|
|
- // 表单参数
|
|
|
- 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'),
|
|
|
- };
|
|
|
-
|
|
|
- // 移除所有 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: '',
|
|
|
- startDate: null,
|
|
|
- endDate: null,
|
|
|
- supplier: '',
|
|
|
- supplierReg: '',
|
|
|
- supplierAddress: '',
|
|
|
- options: ['excludeNVL'],
|
|
|
- buyer: '',
|
|
|
- buyerReg: '',
|
|
|
- buyerAddress: '',
|
|
|
- buyerOptions: ['excludeNVL'],
|
|
|
- // ... 其他字段重置
|
|
|
+ ...queryParam,
|
|
|
};
|
|
|
|
|
|
- // 重置查询参数，但保留基础参数
|
|
|
- Object.assign(queryParam, {
|
|
|
- source_type: 1,
|
|
|
- data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
- date: [20230101, 20230630],
|
|
|
- });
|
|
|
-
|
|
|
- // 重新加载数据
|
|
|
- if (activeTabKey.value === 'transaction') {
|
|
|
- reloadTransaction();
|
|
|
+ const res = await list(params);
|
|
|
+ if (res.result.data.result && res.result.data.result.docs) {
|
|
|
+ // 处理日期格式
|
|
|
+ tableData.value = res.result.data.result.docs.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ date: item.date ? item.date.split(' ')[0] : '', // 只保留日期部分
|
|
|
+ }));
|
|
|
+ pagination.value = {
|
|
|
+ current: pag.current,
|
|
|
+ pageSize: pag.pageSize,
|
|
|
+ total: res.result.data.result.numFound || 0,
|
|
|
+ };
|
|
|
}
|
|
|
- };
|
|
|
-
|
|
|
- const onExportXls = () => {
|
|
|
- console.log('导出');
|
|
|
- };
|
|
|
-
|
|
|
- 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;
|
|
|
+ } 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 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.result.data.result && res.result.data.result.docs) {
|
|
|
- // 处理日期格式
|
|
|
- tableData.value = res.result.data.result.docs.map((item) => ({
|
|
|
- ...item,
|
|
|
- date: item.date ? item.date.split(' ')[0] : '', // 只保留日期部分
|
|
|
- }));
|
|
|
- pagination.value = {
|
|
|
- current: pag.current,
|
|
|
- pageSize: pag.pageSize,
|
|
|
- total: res.result.data.result.numFound || 0,
|
|
|
- };
|
|
|
+ const res = await listCompanies(queryParam);
|
|
|
+ if (res.result && res.result.companies) {
|
|
|
+ handleCompaniesData(res.result.companies);
|
|
|
}
|
|
|
} catch (error) {
|
|
|
- console.error('Failed to fetch data:', error);
|
|
|
- } finally {
|
|
|
- loading.value = false;
|
|
|
+ console.error('Failed to fetch companies:', error);
|
|
|
}
|
|
|
- };
|
|
|
-
|
|
|
- // 企业列表数据
|
|
|
- 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);
|
|
|
- }
|
|
|
- } else if (key === 'tradeAnalysis') {
|
|
|
- // 当切换到贸易类分析报告标签页时，加载月度趋势数据
|
|
|
- try {
|
|
|
- await Promise.all([
|
|
|
- loadMonthlyTrendData(),
|
|
|
- fetchHsCodeData(),
|
|
|
- fetchOriginCountryData(),
|
|
|
- fetchDestinationCountryData(),
|
|
|
- fetchSupplierData(),
|
|
|
- fetchBuyerData(),
|
|
|
- ]);
|
|
|
- } catch (error) {
|
|
|
- console.error('Failed to load analysis data:', error);
|
|
|
- }
|
|
|
+ } else if (key === 'tradeAnalysis') {
|
|
|
+ // 当切换到贸易类分析报告标签页时，加载月度趋势数据
|
|
|
+ try {
|
|
|
+ await Promise.all([
|
|
|
+ loadMonthlyTrendData(),
|
|
|
+ fetchHsCodeData(),
|
|
|
+ fetchOriginCountryData(),
|
|
|
+ fetchDestinationCountryData(),
|
|
|
+ fetchSupplierData(),
|
|
|
+ fetchBuyerData(),
|
|
|
+ ]);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Failed to load analysis data:', error);
|
|
|
}
|
|
|
- };
|
|
|
-
|
|
|
- // 月度趋势分析数据
|
|
|
- const monthlyTrendData = ref([]);
|
|
|
-
|
|
|
- // 加载月度趋势分析数据
|
|
|
- const loadMonthlyTrendData = async () => {
|
|
|
+ } else if (key === 'shippingAnalysis') {
|
|
|
try {
|
|
|
- const params = {
|
|
|
- source_type: 1,
|
|
|
- data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
- ...queryParam,
|
|
|
- };
|
|
|
-
|
|
|
- const res = await getTrendReport(params);
|
|
|
- if (res.result.data.result && res.result.data.result) {
|
|
|
- // 处理日期格式
|
|
|
- monthlyTrendData.value = res.result.data.result.map((item) => ({
|
|
|
- ...item,
|
|
|
- }));
|
|
|
- }
|
|
|
- console.log(monthlyTrendData.value);
|
|
|
+ await Promise.all([
|
|
|
+ fetchOrigPortData(),
|
|
|
+ fetchDestPortData(),
|
|
|
+ fetchTransTypeData(),
|
|
|
+ fetchIncotermsData()
|
|
|
+ ])
|
|
|
} catch (error) {
|
|
|
- console.error('Failed to fetch data:', error);
|
|
|
- } finally {
|
|
|
- loading.value = false;
|
|
|
+ console.error('Failed to load analysis data:', error);
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
- const hsCodeData = ref({});
|
|
|
+// 月度趋势分析数据
|
|
|
+const monthlyTrendData = ref([]);
|
|
|
|
|
|
- // 获取HS编码数据
|
|
|
- const fetchHsCodeData = async () => {
|
|
|
+// 加载月度趋势分析数据
|
|
|
+const loadMonthlyTrendData = async () => {
|
|
|
+ try {
|
|
|
const params = {
|
|
|
source_type: 1,
|
|
|
data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
...queryParam,
|
|
|
};
|
|
|
- const res = await getHsCodeReport(params);
|
|
|
- hsCodeData.value = res.result.data.result;
|
|
|
- };
|
|
|
-
|
|
|
- const originCountryData = ref({});
|
|
|
|
|
|
- // 获取原产国数据
|
|
|
- const fetchOriginCountryData = async () => {
|
|
|
- const params = {
|
|
|
- source_type: 1,
|
|
|
- data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
- ...queryParam,
|
|
|
- };
|
|
|
- const res = await getOrigCountryReport(params);
|
|
|
- originCountryData.value = res.result.data.result;
|
|
|
- };
|
|
|
+ const res = await getTrendReport(params);
|
|
|
+ if (res.result.data.result && res.result.data.result) {
|
|
|
+ // 处理日期格式
|
|
|
+ monthlyTrendData.value = res.result.data.result.map((item) => ({
|
|
|
+ ...item,
|
|
|
+ }));
|
|
|
+ }
|
|
|
+ console.log(monthlyTrendData.value);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('Failed to fetch data:', error);
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
- const destinationCountryData = ref({});
|
|
|
+const hsCodeData = ref({});
|
|
|
|
|
|
- // 获取目的国数据
|
|
|
- const fetchDestinationCountryData = async () => {
|
|
|
- const params = {
|
|
|
- source_type: 1,
|
|
|
- data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
- ...queryParam,
|
|
|
- };
|
|
|
- const res = await getDestCountryReport(params);
|
|
|
- destinationCountryData.value = res.result.data.result;
|
|
|
+// 获取HS编码数据
|
|
|
+const fetchHsCodeData = async () => {
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ ...queryParam,
|
|
|
};
|
|
|
-
|
|
|
- const supplierData = ref({});
|
|
|
-
|
|
|
- // 获取供应商数据
|
|
|
- const fetchSupplierData = async () => {
|
|
|
- const params = {
|
|
|
- source_type: 1,
|
|
|
- data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
- ...queryParam,
|
|
|
- };
|
|
|
- const res = await getSupplierReport(params);
|
|
|
- supplierData.value = res.result.data.result;
|
|
|
+ const res = await getHsCodeReport(params);
|
|
|
+ hsCodeData.value = res.result.data.result;
|
|
|
+};
|
|
|
+
|
|
|
+const originCountryData = ref({});
|
|
|
+
|
|
|
+// 获取原产国数据
|
|
|
+const fetchOriginCountryData = async () => {
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ ...queryParam,
|
|
|
};
|
|
|
-
|
|
|
- const buyerData = ref({});
|
|
|
-
|
|
|
- // 获取采购商数据
|
|
|
- const fetchBuyerData = async () => {
|
|
|
- const params = {
|
|
|
- source_type: 1,
|
|
|
- data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
- ...queryParam,
|
|
|
- };
|
|
|
- const res = await getBuyerReport(params);
|
|
|
- buyerData.value = res.result.data.result;
|
|
|
+ const res = await getOrigCountryReport(params);
|
|
|
+ originCountryData.value = res.result.data.result;
|
|
|
+};
|
|
|
+
|
|
|
+const destinationCountryData = ref({});
|
|
|
+
|
|
|
+// 获取目的国数据
|
|
|
+const fetchDestinationCountryData = async () => {
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ ...queryParam,
|
|
|
+ };
|
|
|
+ const res = await getDestCountryReport(params);
|
|
|
+ destinationCountryData.value = res.result.data.result;
|
|
|
+};
|
|
|
+
|
|
|
+const supplierData = ref({});
|
|
|
+
|
|
|
+// 获取供应商数据
|
|
|
+const fetchSupplierData = async () => {
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ ...queryParam,
|
|
|
+ };
|
|
|
+ const res = await getSupplierReport(params);
|
|
|
+ supplierData.value = res.result.data.result;
|
|
|
+};
|
|
|
+
|
|
|
+const buyerData = ref({});
|
|
|
+
|
|
|
+// 获取采购商数据
|
|
|
+const fetchBuyerData = async () => {
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ ...queryParam,
|
|
|
+ };
|
|
|
+ const res = await getBuyerReport(params);
|
|
|
+ buyerData.value = res.result.data.result;
|
|
|
+};
|
|
|
+
|
|
|
+const origPortData = ref({});
|
|
|
+// 获取起运港数据
|
|
|
+const fetchOrigPortData = async () => {
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ ...queryParam,
|
|
|
+ };
|
|
|
+ const res = await getOrigPortReport(params);
|
|
|
+ origPortData.value = res.result.data.result;
|
|
|
+}
|
|
|
+
|
|
|
+const destPortData = ref({});
|
|
|
+// 获取起运港数据
|
|
|
+const fetchDestPortData = async () => {
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ ...queryParam,
|
|
|
};
|
|
|
- onMounted(() => {});
|
|
|
+ const res = await getDestPortReport(params);
|
|
|
+ destPortData.value = res.result.data.result;
|
|
|
+}
|
|
|
+
|
|
|
+const transTypeData = ref({});
|
|
|
+// 获取运输方式数据
|
|
|
+const fetchTransTypeData = async () => {
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ ...queryParam,
|
|
|
+ };
|
|
|
+ const res = await getTransTypeReport(params);
|
|
|
+ transTypeData.value = res.result.data.result;
|
|
|
+}
|
|
|
+
|
|
|
+const incotermsData = ref({});
|
|
|
+// 获取成交方式数据
|
|
|
+const fetchIncotermsData = async () => {
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ ...queryParam,
|
|
|
+ };
|
|
|
+ const res = await getIncotermsReport(params);
|
|
|
+ incotermsData.value = res.result.data.result;
|
|
|
+}
|
|
|
+
|
|
|
+const isModalVisible = ref(false);
|
|
|
+
|
|
|
+// 修改供应商名称的点击事件
|
|
|
+const handleSupplierClick = async (supplierId) => {
|
|
|
+ loading.value = true;
|
|
|
+ const params = {
|
|
|
+ source_type: 1,
|
|
|
+ data_source: ['IMP_AMERICA_BL_SEA'],
|
|
|
+ date: [20230101, 20230630],
|
|
|
+ com_id:supplierId,
|
|
|
+ com_role: 2,
|
|
|
+ }
|
|
|
+ const response = await getCompanyInfo(params);
|
|
|
+ supplier.value = {
|
|
|
+ ...response.result.data.result,
|
|
|
+ postal_code: response.result.data.result.postal_code ? response.result.data.result.postal_code.join(',') : '' // 检查 postal_code 是否为 null
|
|
|
+ }; // Adjust based on your API response structure
|
|
|
+ loading.value = false; // 请求供应商详细信息
|
|
|
+ isModalVisible.value = true; // 显示弹窗
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => { });
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .search-form {
|
|
|
- padding: 20px;
|
|
|
- background-color: #f5f5f5;
|
|
|
- border-radius: 8px;
|
|
|
- margin-bottom: 16px;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
+.search-form {
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .query-container {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
- .checkbox-group {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
+ .ant-row {
|
|
|
+ padding: 12px 0;
|
|
|
+
|
|
|
+ &:not(:last-child) {
|
|
|
+ border-bottom: 1px solid #e8e8e8;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- // 添加新的样式
|
|
|
- .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;
|
|
|
- }
|
|
|
+ .button-row {
|
|
|
+ padding: 16px 0 0;
|
|
|
+ border-bottom: none !important;
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
|
|
|
- .ant-tabs-tab {
|
|
|
- padding: 12px 24px;
|
|
|
- font-size: 14px;
|
|
|
- transition: all 0.3s;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- color: @primary-color;
|
|
|
- }
|
|
|
+ .ant-tabs-tab {
|
|
|
+ padding: 12px 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ transition: all 0.3s;
|
|
|
|
|
|
- &.ant-tabs-tab-active {
|
|
|
- .ant-tabs-tab-btn {
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ color: @primary-color;
|
|
|
}
|
|
|
|
|
|
- .ant-tabs-ink-bar {
|
|
|
- height: 3px;
|
|
|
- border-radius: 3px 3px 0 0;
|
|
|
+ &.ant-tabs-tab-active {
|
|
|
+ .ant-tabs-tab-btn {
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- :deep(.ant-tabs-content) {
|
|
|
- padding: 8px 0;
|
|
|
+ .ant-tabs-ink-bar {
|
|
|
+ height: 3px;
|
|
|
+ border-radius: 3px 3px 0 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ :deep(.ant-tabs-content) {
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // 分析报告内容样式
|
|
|
- .analysis-content {
|
|
|
- background: #fff;
|
|
|
+// 分析报告内容样式
|
|
|
+.analysis-content {
|
|
|
+ background: #fff;
|
|
|
|
|
|
- .analysis-item {
|
|
|
- margin-bottom: 24px; // 添加组件之间的间距
|
|
|
+ .analysis-item {
|
|
|
+ margin-bottom: 24px; // 添加组件之间的间距
|
|
|
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0; // 最后一个组件不需要底部间距
|
|
|
- }
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0; // 最后一个组件不需要底部间距
|
|
|
+ }
|
|
|
|
|
|
- :deep(.ant-card) {
|
|
|
- transition: all 0.3s ease;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
+ :deep(.ant-card) {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
- &:hover {
|
|
|
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
|
- }
|
|
|
+ &:hover {
|
|
|
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // 表格工具栏样式
|
|
|
- :deep(.ant-table-wrapper) {
|
|
|
- .ant-table-title {
|
|
|
- padding: 16px 0;
|
|
|
- }
|
|
|
+// 表格工具栏样式
|
|
|
+:deep(.ant-table-wrapper) {
|
|
|
+ .ant-table-title {
|
|
|
+ padding: 16px 0;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- // 按钮样式优化
|
|
|
- :deep(.ant-btn) {
|
|
|
- height: 32px;
|
|
|
- padding: 0 16px;
|
|
|
- border-radius: 4px;
|
|
|
+// 按钮样式优化
|
|
|
+: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);
|
|
|
- }
|
|
|
+ &.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;
|
|
|
- }
|
|
|
+// 表格内容样式优化
|
|
|
+:deep(.ant-table) {
|
|
|
+ .ant-table-thead>tr>th {
|
|
|
+ background: #fafafa;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
|
|
|
- .ant-table-tbody > tr:hover > td {
|
|
|
- background: #f5f5f5;
|
|
|
- }
|
|
|
+ .ant-table-tbody>tr>td {
|
|
|
+ transition: background 0.3s;
|
|
|
}
|
|
|
|
|
|
- // Add these new styles
|
|
|
- .table-toolbar {
|
|
|
- margin-bottom: 16px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
+ .ant-table-tbody>tr:hover>td {
|
|
|
+ background: #f5f5f5;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+// Add these new styles
|
|
|
+.table-toolbar {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
</style>
|
zq940222
