在卡管理添加流量消耗明细

src/views/lotCard/cardList/index.vue

@@ -27,11 +27,12 @@
     </div>
 
     <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="pagination"
-      :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }">
+      :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }"
+      :expandable="expandable">
       <template #id="{ record }">
         <!-- 查看流量消耗 -->
-        <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handletrafficUseDialog(record)">{{
-          $t('lotCard.trafficUse') }}</a> -->
+        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handletrafficUseDialog(record)">{{
+          $t('lotCard.trafficUse') }}</a>
       </template>
 
     </a-table>
@@ -41,13 +42,14 @@
 </template>
 
 <script setup>
-import { onMounted, ref, reactive, getCurrentInstance } from "vue";
+import { onMounted, ref, reactive, getCurrentInstance, h } from "vue";
 import { useRoute } from "vue-router";
 import { columns } from "./config";
 import { Message, Notification } from '@arco-design/web-vue'
-import { cardInfoList, cardInfoImport } from "@/api/path/lotCard.api"
+import { cardInfoList, cardInfoImport, orderList, orderFlowData } from "@/api/path/lotCard.api"
 import trafficUseDialog from "./trafficUseDialog.vue";
 import { enum_dict } from "@/hooks/enum";
+import list from "./list.vue";
 
 const { proxy } = getCurrentInstance()
 const formRef = ref()
@@ -83,7 +85,34 @@ const intData = async () => {
     ...searchForm.value,
   }
   const { data } = await cardInfoList(param)
-  dataSource.value = (data.records || []).map(item => {
+
+  dataSource.value = (data.records || []).map((item, index) => {
+    // 卡下级信息
+    let orderArr = []
+    orderList({ current: 1, size: 999, ICCID: item.iccid }).then(res => {
+
+      res.data.records?.forEach(async (orderItem) => {
+
+        const params = {
+          // iccid: orderItem.ICCID,
+          iccid: '89852342022040149139',
+          childOrderId: orderItem.id,
+          subscriptionKey: "1824754463183432097",
+        }
+
+        let trafficList = []
+        if ((item.iccid == '89852342022040149139' && index < 5) || item.iccid !== '89852342022040149139') {
+          const { data } = await orderFlowData(params)
+          trafficList = data.historyData || []
+          orderArr.push({
+            ...orderItem,
+            trafficList
+          })
+        }
+      })
+    })
+
+    // 处理卡列表信息
     const sourceName = sourceList.value.find(sourceItem => sourceItem.value == item.source)?.label || ''
     const serviceName = serviceList.value.find(serviceItem => serviceItem.value == item.service_usage_mode)?.label || ''
     const statusName = statusList.value.find(statusItem => statusItem.value == item.status)?.label || ''
@@ -92,12 +121,49 @@ const intData = async () => {
       ...item,
       sourceName,
       serviceName,
-      statusName
+      statusName,
+      orderArr
     }
+
   })
   pagination.value.total = data.total
 }
 
+
+// const { data: orderData } = await orderList({ current: 1, size: 999, ICCID: ICCID.value })
+//     orderData.records?.forEach(async (orderItem) => {
+
+//         const params = {
+//             // iccid: orderItem.ICCID,
+//             iccid: '89852342022040149139',
+//             childOrderId: orderItem.id,
+//             subscriptionKey: "1824754463183432097",
+//         }
+
+//         let trafficList = []
+//         const { data } = await orderFlowData(params)
+//         trafficList = data.historyData || []
+
+//         dataSource.value.push({
+//             ...orderItem,
+//             trafficList
+//         })
+//     })
+
+
+const expandable = {
+  expandedRowRender: (record) => {
+    if (record.orderArr && Array.isArray(record.orderArr) && record.orderArr.length > 0) {
+      return h('div', {}, [
+        h(list, { 'data': record.orderArr })
+      ]);
+    }
+    return h('div', {}, '暂无数据')
+
+
+  },
+};
+
 const handleImport = async () => {
   if (!searchForm.value.iccid) {
     Message.warning({

src/views/lotCard/cardList/list.vue

@@ -0,0 +1,90 @@
+<template>
+    <!-- 订单列表-查看订单流量明细 -->
+    <div class="trafficUse">
+        <ul class="order_list_box">
+            <li class="list_box_item" v-for="(item, index) in data" key="index">
+                <div class="list_item_left"></div>
+                <div class="list_item_right">
+                    <p>
+                        <span class="list_item_right_span">订单ID：{{ item.orderId }}</span>
+                        <span class="list_item_right_span">订单状态：正常</span>
+                        <span>更新时间：{{ item.updated_at }}</span>
+                    </p>
+                    <template v-if="item.trafficList">
+                        <p v-for="trafficVal in item.trafficList" :key="trafficVal.id">
+                            <span class="list_item_right_span"> 流量总量：{{ trafficVal.qtaconsumption }}</span>
+                            <span class="list_item_right_span">流量使用时间：{{ trafficVal.time }}</span>
+                            <span>国家：中国</span>
+                        </p>
+                    </template>
+
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+<script setup>
+const props = defineProps({
+    data: Array
+});
+
+
+
+
+</script>
+
+<style scoped lang="less">
+ul,
+li,
+p,
+span {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+}
+
+
+.order_list_box {
+    list-style: none;
+    max-height: 700px;
+    overflow-y: scroll;
+    margin: auto;
+    padding: 0 20px;
+}
+
+.list_box_item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .list_item_left {
+        width: 50px;
+        height: 50px;
+        background: gainsboro;
+        margin-right: 10px;
+    }
+
+    .list_item_right {
+        p {
+            display: flex;
+            align-items: center;
+            margin: 5px 0;
+        }
+
+        span {
+            display: flex;
+            align-items: center;
+
+        }
+
+        .list_item_right_span::after {
+            content: "";
+            display: inline-block;
+            width: 1px;
+            height: 20px;
+            background-color: gray;
+            margin: 0 10px;
+        }
+    }
+}
+</style>

src/views/lotCard/cardList/trafficUseDialog.vue

@@ -1,8 +1,8 @@
 <template>
-    <a-modal width="70%" :visible="visible" :title="$t('lotCard.trafficUse')" :hide-cancel='true'
+    <a-modal width="800px" :visible="visible" :title="$t('lotCard.trafficUse')" :hide-cancel='true'
         :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel">
         <!-- 搜索条件区 -->
-        <div class="search-section">
+        <!-- <div class="search-section">
             <a-form :model="formData" ref="formRef" layout="inline">
                 <a-form-item field="iccid" :label="$t('lotCard.iccid')" :validate-trigger="['change', 'input', 'blur']"
                     :rules="[{ required: true, message: $t('lotCard.please') + $t('lotCard.iccid') }]">
@@ -20,9 +20,33 @@
                     </a-space>
                 </a-form-item>
             </a-form>
+        </div> -->
+        <!-- <a-table :data="dataSource" :columns="columnsTrafficUse" :scroll="{ x: 'auto' }" @page-change="evChangePage">
+        </a-table> -->
+
+        <!-- 订单列表-查看订单流量明细 -->
+        <div class="trafficUse">
+            <ul class="order_list_box">
+                <li class="list_box_item" v-for="(item, index) in dataSource" key="index">
+                    <div class="list_item_left"></div>
+                    <div class="list_item_right">
+                        <p>
+                            <span class="list_item_right_span">订单ID：{{ item.orderId }}</span>
+                            <span class="list_item_right_span">订单状态：正常</span>
+                            <span>更新时间：{{ item.updated_at }}</span>
+                        </p>
+                        <template v-if="item.trafficList">
+                            <p v-for="trafficVal in item.trafficList" :key="trafficVal.id">
+                                <span class="list_item_right_span"> 流量总量：{{ trafficVal.qtaconsumption }}</span>
+                                <span class="list_item_right_span">流量使用时间：{{ trafficVal.time }}</span>
+                                <span>国家：中国</span>
+                            </p>
+                        </template>
+
+                    </div>
+                </li>
+            </ul>
         </div>
-        <a-table :data="dataSource" :columns="columnsTrafficUse" :scroll="{ x: 'auto' }" @page-change="evChangePage">
-        </a-table>
     </a-modal>
 </template>
 <script setup>
@@ -43,7 +67,7 @@ const formData = ref({
     "iccid": "",
     "imsi": "454120387374989",
 });
-const tableMap = ref({})
+const ICCID = ref({})
 
 const dataSource = ref([]);
 const pagination = ref({
@@ -55,29 +79,38 @@ const pagination = ref({
 const visible = ref(false)
 
 const open = (data) => {
-    if (data.length == 0) {
+    if (!data) {
         return
     }
-    visible.value = true
-    tableMap.value = data
-    console.log(data, "“data--------------");
-
+    dataSource.value = []
+    ICCID.value = data
     intData()
+
 }
 
 const intData = async () => {
-    const { data: orderData } = await orderList({ current: 1, size: 999, ICCID: tableMap.value.ICCID })
-    const orderMap = orderData.records[0]
-    const params = {
-        iccid: orderMap.ICCID,
-        childOrderId: orderMap.id,
-        subscriptionKey: "1824754463183432097",
-    }
-    console.log(orderMap, "params----------------");
 
-    const { data } = await orderFlowData(params)
-    dataSource.value = data.historyData || []
-    pagination.value.total = data.historyData.length
+    const { data: orderData } = await orderList({ current: 1, size: 999, ICCID: ICCID.value })
+    orderData.records?.forEach(async (orderItem) => {
+
+        const params = {
+            // iccid: orderItem.ICCID,
+            iccid: '89852342022040149139',
+            childOrderId: orderItem.id,
+            subscriptionKey: "1824754463183432097",
+        }
+
+        let trafficList = []
+        const { data } = await orderFlowData(params)
+        trafficList = data.historyData || []
+
+        dataSource.value.push({
+            ...orderItem,
+            trafficList
+        })
+    })
+    console.log(dataSource.value, "dataSource.value")
+    visible.value = true
 }
 
 const evChangePage = (page) => {
@@ -114,4 +147,60 @@ const handleCancel = () => {
 defineExpose({ open })
 
 
-</script>
+</script>
+
+<style scoped lang="less">
+ul,
+li,
+p,
+span {
+    margin: 0;
+    padding: 0;
+    line-height: 1.5;
+}
+
+
+.order_list_box {
+    list-style: none;
+    height: 700px;
+    overflow-y: scroll;
+    margin: auto;
+    padding: 0 20px;
+}
+
+.list_box_item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .list_item_left {
+        width: 50px;
+        height: 50px;
+        background: gainsboro;
+        margin-right: 10px;
+    }
+
+    .list_item_right {
+        p {
+            display: flex;
+            align-items: center;
+            margin: 5px 0;
+        }
+
+        span {
+            display: flex;
+            align-items: center;
+
+        }
+
+        .list_item_right_span::after {
+            content: "";
+            display: inline-block;
+            width: 1px;
+            height: 20px;
+            background-color: gray;
+            margin: 0 10px;
+        }
+    }
+}
+</style>