点击金额列，弹窗显示订单列表

src/api/taobao.ts

@@ -286,8 +286,9 @@ export interface TkOrderRecord {
     last_time: string; // assuming ISO 8601 format for datetime
 }
 
-export interface TkOrdersParams extends Partial<TkOrderRecord> {
+export interface TkOrdersParams   {
     keyword?: string;
+    tkStatus?: number[]; 
     query_date?: string[]; // 覆盖 report_date 的类型为字符串数组
     current: number;
     pageSize: number;

src/views/taobao/components/selectAccount.vue

@@ -1,6 +1,6 @@
 <template>
 
-    <a-select :model="model" placeholder="指定账号名" @change="changeCompany">
+    <a-select v-model="model" placeholder="指定账号名" @change="changeCompany">
         <a-option value="">所有账号</a-option>
         <a-option :key="item.id" v-for="item of accounts" :value="item.company" :label="item.company" />
     </a-select>

src/views/taobao/components/viewOrders.vue

@@ -0,0 +1,47 @@
+<template>
+
+    <a-select :model="model" placeholder="指定账号名" @change="changeCompany">
+        <a-option value="">所有账号</a-option>
+        <a-option :key="item.id" v-for="item of accounts" :value="item.company" :label="item.company" />
+    </a-select>
+
+</template>
+
+<script lang="ts" setup>
+import { defineEmits, ref } from 'vue';
+import {
+    TkPoolParams,
+    queryTkPool,
+    TkPoolRecord,
+} from '@/api/taobao';
+
+const model = defineModel()
+const accounts = ref<TkPoolRecord[]>([]);
+
+const loadAccounts = async (
+    params: TkPoolParams = {
+        current: 1,
+        pageSize: 9999,
+        sort: 'status',
+        order: 'descending',
+        getTotal: false,
+    }
+) => {
+    try {
+        const { data } = await queryTkPool(params);
+        console.log(data);
+        if (!data) return;
+        accounts.value = data.list;
+    } catch (err) {
+        console.log(err);
+    }
+};
+
+const emits = defineEmits(['change'])
+
+const changeCompany = (value: any) => {
+    emits('change', value)
+}
+loadAccounts();
+
+</script>

src/views/taobao/components/viewOrdersModal.vue

@@ -0,0 +1,85 @@
+<template>
+    <a-button size="mini" @click="handleClickOrder">
+        <slot></slot>
+    </a-button>
+
+    <a-modal width="90%" height="90%" v-model:visible="visible" hide-title :footer="false" @ok="handleOk"
+        @cancel="handleCancel">
+        <viewOrders v-if="visible" :keyword="keyword" :tk-status="tkStatus" :query-date="queryDate"></viewOrders>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+
+import { defineEmits, ref } from 'vue';
+import {
+    TkPoolParams,
+    queryTkPool,
+    TkPoolRecord,
+} from '@/api/taobao';
+import viewOrders from '../orders.vue';
+
+
+const props = defineProps({
+    filterType: { type: String, required: true },
+    data: { type: Object, required: true },
+})
+
+const visible = ref(false);
+const keyword = ref<string>('');
+const tkStatus = ref<Array<number>>([]);
+const queryDate = ref<Array<string | Date | undefined>>([]);
+
+
+
+const handleClickOrder = (val: any) => {
+    visible.value = true;
+    keyword.value = props.data.accountName;
+    queryDate.value = [props.data.report_date, props.data.report_date];
+
+
+    switch (props.filterType) {
+        case "eff_ord_amt":
+            tkStatus.value = [3, 12, 14];
+            break;
+        case "sett_ord_amt_56":
+            tkStatus.value = [3];
+            break;
+        case "order_ord_amt":
+            tkStatus.value = [3];
+            break;
+        case "order_ord_amt_12":
+            tkStatus.value = [12, 14];
+            break;
+        case "pay_ord_amt_56":
+        default:
+            tkStatus.value = [];
+            break;
+
+    }
+
+    // <a-option :value="3">已结算</a-option>
+    // <a-option :value="12">已付款</a-option>
+    // <a-option :value="13">已失效</a-option>
+    // <a-option :value="14">已收货</a-option>
+
+    // 付款金额 => 6.11 的全部订单
+    // 有效付款金额   =>  6.11 的状态不为失效的订单
+    // 结算金额   =>  6.11 当天结算的订单
+    // 所属结算金额 =>  所属时间已经结算的订单
+    // 所属待结算金额 => 所属时间已经付款发货的订单
+    console.log(props.data, props)
+};
+const handleOk = () => {
+    visible.value = false;
+};
+const handleCancel = () => {
+    visible.value = false;
+}
+
+const emits = defineEmits(['change'])
+
+const changeCompany = (value: any) => {
+    emits('change', value)
+} 
+</script>

src/views/taobao/orders.vue

@@ -14,8 +14,7 @@
                             </a-col>
                             <a-col :span="6">
                                 <a-form-item field="tkStatus" label="订单状态">
-                                    <a-select :model="formModel.tkStatus" @change="changeStatus">
-                                        <a-option :value="0">所有状态</a-option>
+                                    <a-select v-model="formModel.tkStatus" multiple :max-tag-count=1>
                                         <a-option :value="3">已结算</a-option>
                                         <a-option :value="12">已付款</a-option>
                                         <a-option :value="13">已失效</a-option>
@@ -214,12 +213,19 @@ import selectAccount from './components/selectAccount.vue';
 type SizeProps = 'mini' | 'small' | 'medium' | 'large';
 type Column = TableColumnData & { checked?: true };
 
+
+const props = defineProps({
+    keyword: { type: String },
+    tkStatus: { type: Array<number> },
+    queryDate: { type: Array<string> }
+})
+
 const generateFormModel = () => {
     return {
-        keyword: '',
-        tkStatus: 0,
+        keyword: props.keyword || '',
+        tkStatus: props.tkStatus || [3, 12, 13, 14],
         formModel: 1000,
-        query_date: [],
+        query_date: props.queryDate || [] as Array<string>,
         current: 1,
         pageSize: 20,
         maxTotal: 1000,
@@ -236,6 +242,8 @@ const formModel = ref(generateFormModel());
 const cloneColumns = ref<Column[]>([]);
 const showColumns = ref<Column[]>([]);
 
+
+
 const size = ref<SizeProps>('medium');
 
 const scrollbar = ref(true);
@@ -357,6 +365,7 @@ const fetchData = async (
 };
 
 const search = () => {
+    console.log(formModel.value)
     fetchData({
         ...basePagination,
         ...formModel.value,
@@ -369,8 +378,10 @@ const onPageChange = (current: number) => {
         current
     });
 };
-
-fetchData();
+fetchData({
+    ...basePagination,
+    ...formModel.value
+});
 const reset = () => {
     formModel.value = generateFormModel();
 };

src/views/taobao/report_daily.vue

@@ -104,33 +104,50 @@
                     {{ record.isLeaf ? '' : record.accountName }}
                 </template>
 
+
+
+                <template #pay_ord_amt_56="{ record }">
+                    <viewOrdersModal filter-type='pay_ord_amt_56' :data="record">
+                        {{ amountFormat(record.pay_ord_amt_56) }}
+                    </viewOrdersModal>
+                </template>
+                <template #eff_ord_amt="{ record }">
+                    <viewOrdersModal filter-type='eff_ord_amt' :data="record">
+                        {{ amountFormat(record.eff_ord_amt) }}
+                    </viewOrdersModal>
+                </template>
+                <template #sett_ord_amt_56="{ record }">
+
+                    <viewOrdersModal filter-type='sett_ord_amt_56' :data="record">
+                        {{ amountFormat(record.sett_ord_amt_56) }}
+                    </viewOrdersModal>
+                </template>
+                <template #order_ord_amt="{ record }">
+                    <viewOrdersModal filter-type='order_ord_amt' :data="record">
+                        {{ amountFormat(record.order_ord_amt) }}
+                    </viewOrdersModal>
+                </template>
+
                 <template #order_ord_amt_14="{ record }">
-                    <a-popover popup-container="body" trigger="click">
-                        <div>{{ amountFormat(record.order_ord_amt_12 + record.order_ord_amt_14) }}</div>
+                    <a-popover popup-container="body">
+                        <viewOrdersModal filter-type='order_ord_amt_12' :data="record">
+                            {{ amountFormat(record.order_ord_amt_12) }}
+                        </viewOrdersModal>
                         <template #content>
 
                             <div style="min-width:400px;">
                                 <a-row>
-                                    <a-col :span="8">
-                                        <div>已付款金额/收入：</div>
-                                    </a-col>
+                                    <a-col :span="8">已付款金额/收入： </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_amt_12) }} </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_tfee_12) }} </a-col>
                                 </a-row>
-
-
                                 <a-row>
-                                    <a-col :span="8">
-                                        <div>已收货金额/收入：</div>
-                                    </a-col>
+                                    <a-col :span="8">已收货金额/收入： </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_amt_14) }} </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_tfee_14) }} </a-col>
                                 </a-row>
-
                                 <a-row>
-                                    <a-col :span="8">
-                                        <div>已失效金额/收入：</div>
-                                    </a-col>
+                                    <a-col :span="8">已失效金额/收入： </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_amt_13) }} </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_tfee_13) }} </a-col>
                                 </a-row>
@@ -138,34 +155,24 @@
                         </template>
                     </a-popover>
 
-
                 </template>
                 <template #order_ord_tfee_14="{ record }">
-                    <a-popover popup-container="body" trigger="click">
+                    <a-popover popup-container="body">
                         <div>{{ amountFormat(record.order_ord_tfee_12 + record.order_ord_tfee_14) }}</div>
                         <template #content>
                             <div style="min-width:400px;">
                                 <a-row>
-                                    <a-col :span="8">
-                                        <div>已付款金额/收入：</div>
-                                    </a-col>
+                                    <a-col :span="8">已付款金额/收入： </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_amt_12) }} </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_tfee_12) }} </a-col>
                                 </a-row>
-
-
                                 <a-row>
-                                    <a-col :span="8">
-                                        <div>已收货金额/收入：</div>
-                                    </a-col>
+                                    <a-col :span="8">已收货金额/收入： </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_amt_14) }} </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_tfee_14) }} </a-col>
                                 </a-row>
-
                                 <a-row>
-                                    <a-col :span="8">
-                                        <div>已失效金额/收入：</div>
-                                    </a-col>
+                                    <a-col :span="8">已失效金额/收入： </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_amt_13) }} </a-col>
                                     <a-col :span="8"> {{ amountFormat(record.order_ord_tfee_13) }} </a-col>
                                 </a-row>
@@ -193,6 +200,7 @@ import { computed, ref, reactive, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import useLoading from '@/hooks/loading';
 import { numberFormat, amountFormat } from '@/utils/util';
+
 import {
     queryTkReport,
     queryTkReportDailys,
@@ -208,6 +216,7 @@ import type {
 import cloneDeep from 'lodash/cloneDeep';
 import Sortable from 'sortablejs';
 import CategoriesPercent from './components/categories-percent.vue';
+import viewOrdersModal from './components/viewOrdersModal.vue';
 
 type SizeProps = 'mini' | 'small' | 'medium' | 'large';
 type Column = TableColumnData & { checked?: true };
@@ -266,6 +275,7 @@ const densityList = computed(() => [
     },
 ]);
 
+
 const columns = computed<TableColumnData[]>(() => [
     {
         title: '日期',
@@ -308,10 +318,10 @@ const columns = computed<TableColumnData[]>(() => [
             },
             {
                 title: '付款金额',
-                dataIndex: 'pay_ord_amt_56',
+                slotName: 'pay_ord_amt_56',
                 width: 150,
                 align: 'right',
-                render: (e: any) => amountFormat(e.record.pay_ord_amt_56)
+                // render: (e: any) => amountFormat(e.record.pay_ord_amt_56)
             },
             {
                 title: '付款预估收入',
@@ -339,10 +349,10 @@ const columns = computed<TableColumnData[]>(() => [
             },
             {
                 title: '有效付款金额',
-                dataIndex: 'eff_ord_amt',
+                slotName: 'eff_ord_amt',
                 width: 150,
                 align: 'right',
-                render: (e: any) => amountFormat(e.record.eff_ord_amt)
+                // render: (e: any) => amountFormat(e.record.eff_ord_amt)
             },
             {
                 title: '有效付款预估收入',
@@ -364,10 +374,10 @@ const columns = computed<TableColumnData[]>(() => [
             },
             {
                 title: '结算金额',
-                dataIndex: 'sett_ord_amt_56',
+                slotName: 'sett_ord_amt_56',
                 width: 150,
                 align: 'right',
-                render: (e: any) => amountFormat(e.record.sett_ord_amt_56)
+                // render: (e: any) => amountFormat(e.record.sett_ord_amt_56)
             },
             {
                 title: '结算预估收入',
@@ -383,9 +393,10 @@ const columns = computed<TableColumnData[]>(() => [
         children: [
             {
                 title: '结算金额',
+                slotName: 'order_ord_amt',
                 width: 150,
                 align: 'right',
-                render: (e: any) => amountFormat(e.record.order_ord_amt)
+                // render: (e: any) => amountFormat(e.record.order_ord_amt)
             },
             {
                 title: '结算收入',
@@ -394,16 +405,16 @@ const columns = computed<TableColumnData[]>(() => [
                 render: (e: any) => amountFormat(e.record.order_ord_tfee)
             },
             {
-                title: '未结算金额',
+                title: '待结算金额',
+                slotName: 'order_ord_amt_14',
                 width: 150,
                 align: 'right',
-                slotName: 'order_ord_amt_14',
             },
             {
-                title: '未结算收入',
+                title: '待结算收入',
+                slotName: 'order_ord_tfee_14',
                 width: 120,
                 align: 'right',
-                slotName: 'order_ord_tfee_14',
             },
         ]
     },