卡管理

src/api/path/lotCard.api.js

@@ -38,4 +38,9 @@ export function setOrderDataPlan(param) {
 // 取消订单订单
 export function orderCancel(param) {
   return service.post("/admin/sim/orderCancel", param);
+}
+
+// 取消订单订单
+export function orderFlowData(params) {
+  return service.get("/admin/sim/orderFlowData", { params });
 }

src/hooks/enum.js

@@ -11,5 +11,10 @@ export const enum_dict = {
     BILLING_TYPE: "BillingType", // 计费分类
     BILLING_METHOD: "billingMethod", // 计费方式
     SETTLEMENT_CYCLE: "settlementCycle", // 结算周期
-    TRAFFIC_POOL_TYPE: "trafficPoolType", // 流量池类型
+    TRAFFIC_USAGE_TYPE: "trafficPoolType", // 流量池类型
+    TRAFFIC_USAGE_TYPE: "traffic_usage_type", // 流量使用限制类型
+    CYCLE_TYPE: "cycle_type", // 周期类型
+    ACTIVATION_PACKAGE: "activation_package_method", // 激活卡套餐方法
+    FLOW_PACKET_TYPE: "flow_packet_type", // 流量包类型
+    DEDUCTION_MODEL: "deduction_model", // 套餐收费方式
 };

src/i18n/zh/dataPackage.js

@@ -18,6 +18,15 @@ export default {
   standardPrice: '标准价格',
   statusName: '状态',
 
+  superiorId: '上级ID',
+  activationMode: '激活方式',
+  lastModifyTime: '最后修改时间',
+  periodType: '周期类型',
+  period: '流量包套餐时长',
+  statusPackage: '流量包状态',
+  typePackage: '流量使用限制类型',
+
+
   // 操作提示
   packageDeleted: '数据包 {name} 已删除',
   packageUpdated: '数据包 {name} 已更新',

src/i18n/zh/lotCard.js

@@ -13,6 +13,10 @@ export default {
     UserId: "用户ID",
     iccid: "ICCID",
     himsi: 'HIMSI',
+    tariff: '资费ID',
+    ServiceUsageMode: '激活卡套餐的方法',
+    LastModifyTime: '最后修改时间',
+
 
     // 流量列表
     superior_id: "流量包Id",
@@ -72,6 +76,7 @@ export default {
 
     // 弹窗按钮
     close: "关闭",
+    trafficUse: "查看流量消耗",
 
     // 查询流量历史配额
     time: '使用时间',

src/views/flowPool/index-jiu.vue

@@ -1,620 +0,0 @@
-<!-- 流量池 -->
-<template>
-    <div class="silent-expire-alarm">
-        <!-- 搜索条件区 -->
-        <div class="search-section">
-            <a-form :model="searchForm" layout="inline">
-                <a-form-item field="poolNumber" label="ICCID">
-                    <a-input v-model="searchForm.poolNumber" placeholder="请输入流量池编号" allow-clear />
-                </a-form-item>
-                <a-form-item>
-                    <a-space>
-                        <a-button type="primary" @click="handleSearch">搜索</a-button>
-                        <a-button @click="resetSearch">重置</a-button>
-                    </a-space>
-                </a-form-item>
-            </a-form>
-        </div>
-        <!-- 数据表格 -->
-        <a-table row-key="poolNumber" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection"
-            :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: 'auto' }">
-            <template #operate="{ record }">
-                <!-- <a-button @click="openContract(record)" type="text">卡操作</a-button>
-                <a-button @click="openContract(record)" type="text">换卡</a-button>
-                <a-button @click="openContract(record)" type="text">充值二维码</a-button> -->
-                <a-button @click="exportCard(record)" type="text">卡详情</a-button>
-            </template>
-        </a-table>
-        <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1400px">
-            <template #title>
-                卡详情
-            </template>
-            <div class="export-box">
-                <div class="box-item">
-                    <div class="export-box-item">
-                        <div class="box-item-title">
-                            <div class="title-icon"></div>
-                            基本信息
-                        </div>
-                        <div class="box-item-content">
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">ICCID</div>
-                                    <div class="item-txt-text">0989719841741478635014818</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">MSISDN</div>
-                                    <div class="item-txt-text">0989719841741478635014818</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">IMSI</div>
-                                    <div class="item-txt-text">0989719841741478635014818</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">IMEI</div>
-                                    <div class="item-txt-text">0989719841741478635014818</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">激活日期</div>
-                                    <div class="item-txt-text">2024-09-20 00:18:37</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">卡到期日期</div>
-                                    <div class="item-txt-text">2024-09-20 00:18:37</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">沉默到期日期</div>
-                                    <div class="item-txt-text">2024-09-20 00:18:37</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">网络类型</div>
-                                    <div class="item-txt-text">4G</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">订单编号</div>
-                                    <div class="item-txt-text">12322327776754</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">池名称/编号</div>
-                                    <div class="item-txt-text">泰国5万共享池/00170</div>
-                                </div>
-                            </div>
-                            <div class="item-txt"
-                                style="padding-top:20px;border-top:1px solid rgba(0, 0, 0, 0.1);margin-top: 20px;">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">订单编号</div>
-                                    <div class="item-txt-text">12322327776754</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">池名称/编号</div>
-                                    <div class="item-txt-text">泰国5万共享池/00170</div>
-                                </div>
-                            </div>
-                            <div class="item-txt"
-                                style="padding-bottom:20px;border-bottom:1px solid rgba(0, 0, 0, 0.1);margin-bottom: 20px">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">订单编号</div>
-                                    <div class="item-txt-text">12322327776754</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">池名称/编号</div>
-                                    <div class="item-txt-text">泰国5万共享池/00170</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">运营商类型</div>
-                                    <div class="item-txt-text">国际本地</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">运营商名称</div>
-                                    <div class="item-txt-text">泰国AIS</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="export-box-item" style="margin-top:20px;">
-                        <div class="box-item-title">
-                            <div class="title-icon"></div>
-                            当前套餐信息
-                        </div>
-                        <div class="box-item-content">
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">当前套餐</div>
-                                    <div class="item-txt-text">100M每月</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">套餐计费周期</div>
-                                    <div class="item-txt-text">按月</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">最短订购周期</div>
-                                    <div class="item-txt-text">36个月</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">最长订购周期</div>
-                                    <div class="item-txt-text">--</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">套餐开始时间</div>
-                                    <div class="item-txt-text">2024-09-20 10:00:13</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">套餐结束时间</div>
-                                    <div class="item-txt-text">2024-09-20 10:00:13</div>
-                                </div>
-                            </div>
-                            <div class="item-txt"
-                                style="padding-top:20px;border-top:1px solid rgba(0, 0, 0, 0.1);margin-top: 20px;">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">已用套餐流量</div>
-                                    <div class="item-txt-text">28M</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">剩余套餐流量</div>
-                                    <div class="item-txt-text">72M</div>
-                                </div>
-                            </div>
-                            <div class="item-txt">
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">已用加油包流量</div>
-                                    <div class="item-txt-text">8M</div>
-                                </div>
-                                <div class="item-txt-box">
-                                    <div class="item-txt-title">剩余加油包流量</div>
-                                    <div class="item-txt-text">--</div>
-                                </div>
-                            </div>
-                            <div class="item-txt" style="margin-top:20px;">
-                                <div class="item-txt-box" v-for="item in 5" :key="item">
-                                    <a-button type="primary">同步卡信息</a-button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="box-item" style="padding-left:40px;box-sizing:border-box;">
-                    <a-tabs default-active-key="1">
-                        <a-tab-pane key="1" title="月用量">
-                            <div class="echarts-box">
-                                <div ref="chartDom" class="chart-dom"></div>
-                            </div>
-                        </a-tab-pane>
-                        <a-tab-pane key="2" title="卡套餐信息">
-                            <a-table :columns="columnsExport" :data="dataExport">
-                                <template #operate="{ record }">
-                                    <a-button @click="openContract(record)" type="text">下载</a-button>
-                                </template>
-                                <template #status="{ record }">
-                                    <div class="export-status" v-if="record.status == 1">
-                                        <div class="status-icon" style="background: rgba(82, 196, 27, 1);"></div>
-                                        导入成功
-                                    </div>
-                                    <div class="export-status" v-if="record.status == 2">
-                                        <div class="status-icon" style="background: rgba(250, 173, 20, 1);"></div>
-                                        部分成功
-                                    </div>
-                                    <div class="export-status" v-if="record.status == 3">
-                                        <div class="status-icon" style="background: rgba(247, 66, 75, 1);"></div>
-                                        校验失败
-                                    </div>
-                                </template>
-                            </a-table>
-                        </a-tab-pane>
-                        <a-tab-pane key="3" title="预警信息">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                        <a-tab-pane key="4" title="充值记录">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                        <a-tab-pane key="5" title="使用量记录">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                        <a-tab-pane key="6" title="操作记录">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                        <a-tab-pane key="7" title="售后">
-                            Content of Tab Panel 3
-                        </a-tab-pane>
-                    </a-tabs>
-                </div>
-            </div>
-        </a-modal>
-    </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue';
-import { Message } from '@arco-design/web-vue';
-import * as echarts from 'echarts'
-// 创造一个响应式对象来保存echarts对象
-const chartDom = ref(null);
-let chartInstance = null;
-
-// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
-onMounted(async () => {
-    await nextTick(); // 确保DOM已经渲染完成
-    chartInstance = echarts.init(chartDom.value);
-    const option = {
-        xAxis: {
-            type: 'category',
-            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-        },
-        yAxis: {
-            type: 'value'
-        },
-        series: [
-            {
-                data: [120, 200, 150, 80, 70, 110, 130, 20, 28, 100, 123, 134],
-                type: 'bar'
-            }
-        ]
-    };
-    chartInstance.setOption(option);
-});
-
-// 销毁ECharts实例
-onUnmounted(() => {
-    if (chartInstance != null && chartInstance.dispose) {
-        chartInstance.dispose();
-    }
-});
-const selectedKeys = ref([]);
-const rowSelection = reactive({
-    type: 'checkbox',
-    showCheckedAll: true,
-    onlyCurrent: false,
-});
-const searchForm = reactive({
-    cardNumber: '',
-    customerName: '',
-});
-// 流量池用户选项
-const poolUser = [
-    { value: 1, label: '阿里巴巴' },
-    { value: 2, label: '腾讯' },
-    { value: 3, label: '字节跳动' },
-    { value: 4, label: '百度' },
-    { value: 5, label: '小红书' },
-
-];
-const customerNameOpt = [
-    { value: 1, label: '广州联通' },
-    { value: 2, label: '湖北移动' },
-    { value: 3, label: '浙江电信' },
-    { value: 4, label: '湖北联通' },
-    { value: 5, label: '湖北电信' },
-
-];
-const moneyNameOpt = [
-    { value: 1, label: '移动20G' },
-    { value: 2, label: '监控1G月租' },
-    { value: 3, label: '联通100G' },
-    { value: 4, label: '电信200G' },
-    { value: 5, label: '监控2G月租' },
-
-];
-const columns = [
-    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1, width: 80 },
-    { title: '流量池编号', dataIndex: 'poolNumber', width: 150, align: 'center' },
-    { title: '流量池名称', dataIndex: 'poolName', width: 120, align: 'center' },
-    { title: '供应商名称', dataIndex: 'customerName', width: 120, align: 'center' },
-    { title: '资费名称', dataIndex: 'moneyName', width: 120, align: 'center' },
-    { title: '已激活卡数/总卡数量', dataIndex: 'cardMsg', width: 200, align: 'center' },
-    { title: '已使用流量/总流量(G)', dataIndex: 'trafficMsg', width: 200, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime', width: 120, align: 'center' },
-    { title: '更新日期', dataIndex: 'updateTime' },
-    { title: '操作', slotName: 'operate', align: 'center', width: 400, fixed: 'right' },
-];
-const tableData = ref([
-    {
-        poolNumber: '13800138001',
-        poolName: '广州移动',
-        customerName: '泰国True',
-        moneyName: '移动200G',
-        cardMsg: '11/100',
-        trafficMsg: '20/200',
-        updateTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        poolNumber: '13800138002',
-        poolName: '广州移动',
-        customerName: '泰国True',
-        moneyName: '移动200G',
-        cardMsg: '11/100',
-        trafficMsg: '20/200',
-        updateTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        poolNumber: '13800138003',
-        poolName: '广州移动',
-        customerName: '泰国True',
-        moneyName: '移动200G',
-        cardMsg: '11/100',
-        trafficMsg: '20/200',
-        updateTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    {
-        poolNumber: '13800138004',
-        poolName: '广州移动',
-        customerName: '泰国True',
-        moneyName: '移动200G',
-        cardMsg: '11/100',
-        trafficMsg: '20/200',
-        updateTime: '2024-10-11'
-        // operate:'上传合同'
-    },
-    // 可以添加更多模拟数据...
-]);
-// 上传合同的弹框
-const pagination = reactive({
-    total: tableData.value.length,
-    current: 1,
-    pageSize: 10,
-});
-const openContract = (item) => {
-    console.log(item, '???')
-};
-const handleSearch = () => {
-    console.log('Search form data:', searchForm);
-    Message.success('执行搜索操作');
-};
-const resetSearch = () => {
-    Object.keys(searchForm).forEach(key => {
-        if (Array.isArray(searchForm[key])) {
-            searchForm[key] = [];
-        } else {
-            searchForm[key] = null;
-        }
-    });
-    Message.success('搜索条件已重置');
-};
-// 新增流量池时的基本信息
-const formPool = reactive({
-    poolNumber: '',
-    poolName: '',
-    customerName: '',
-    moneyName: '',
-    user: ''
-})
-const formWarning = reactive({
-    // 总用量占比
-    totalDosage: '',
-    // 总用量占比达量预警
-    totalDosageCheck: '',
-    // 达量停机
-    stoppagePool: '',
-    stoppagePoolCheck: '',
-    stopNetworkPool: '',
-    stopNetworkPoolCheck: '',
-    remindTotal: '',
-    oneCardWarning: '',
-    outTotalCheck: '',
-    stoppageCard: '',
-    stoppageCardCheck: '',
-    stopNetworkCard: '',
-    stopNetworkCardCheck: '',
-    poolUsedWarning: '',
-    poolUsedCheck: '',
-    stoppageManagement: '',
-    stoppageManagementCheck: '',
-    stopNetworkManagement: '',
-    stopNetworkManagementCheck: '',
-})
-const openExport = ref(false);
-const columnsExport = [
-    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
-    {
-        title: '操作人',
-        dataIndex: 'name',
-    },
-    {
-        title: '导入时间',
-        dataIndex: 'exportTime',
-    },
-    {
-        title: '完成时间',
-        dataIndex: 'successTime',
-    },
-    {
-        title: '状态',
-        slotName: 'status',
-        align: 'center'
-    },
-    { title: '操作', slotName: 'operate', align: 'center' },
-];
-const dataExport = reactive([{
-    key: '1',
-    name: 'Jane Doe',
-    exportTime: '2024-10-13 22:20:01',
-    successTime: '2024-10-13 22:20:01',
-    status: 1
-}, {
-    key: '2',
-    name: 'Alisa Ross',
-    exportTime: '2024-10-13 22:20:01',
-    successTime: '2024-10-13 22:20:01',
-    status: 2
-}, {
-    key: '3',
-    name: 'Kevin Sandra',
-    exportTime: '2024-10-13 22:20:01',
-    successTime: '2024-10-13 22:20:01',
-    status: 3
-}, {
-    key: '4',
-    name: 'Ed Hellen',
-    exportTime: '2024-10-13 22:20:01',
-    successTime: '2024-10-13 22:20:01',
-    status: 2
-}, {
-    key: '5',
-    name: 'William Smith',
-    exportTime: '2024-10-13 22:20:01',
-    successTime: '2024-10-13 22:20:01',
-    status: 3
-}]);
-// 点击导卡按钮
-const exportCard = () => {
-    openExport.value = true;
-};
-const onChange = () => {
-}
-const handleOk = () => {
-}
-const handleCancel = () => {
-}
-</script>
-
-<style scoped lang="less">
-.silent-expire-alarm {
-    padding: 20px !important;
-    // background: #fcf;
-}
-
-.search-section {
-    margin-bottom: 20px;
-}
-
-.arco-table-th {
-    white-space: nowrap;
-}
-
-.form-pool-tit {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-
-    .pool-icon {
-        margin-right: 10px;
-        width: 4px;
-        height: 16px;
-        background: #1B5DF8;
-        font-size: 14px;
-        color: #6C6E70;
-        font-family: PingFang SC;
-
-    }
-}
-
-.export-box {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    // align-items: center;
-    overflow: hidden;
-
-    .box-item {
-        width: 100%;
-        overflow: hidden;
-
-        .export-box-item {
-            .box-item-title {
-                display: flex;
-                // align-items: center;
-                font-family: PingFang SC;
-                font-size: 16px;
-                font-weight: 600;
-                line-height: 24px;
-                color: rgba(0, 0, 0, 0.85);
-                margin-bottom: 10px;
-
-                .title-icon {
-                    margin-right: 10px;
-                    width: 4px;
-                    height: 16px;
-                    background: #1B5DF8;
-
-                }
-            }
-
-            .box-item-content {
-                .item-txt {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    margin-bottom: 10px;
-
-                    .item-txt-box {
-                        width: 100%;
-                        display: flex;
-                        align-items: center;
-
-                        .item-txt-title {
-                            margin-right: 10px;
-                            //styleName: Body/Medium;
-                            font-family: PingFang SC;
-                            font-size: 14px;
-                            font-weight: 400;
-                            line-height: 22px;
-                            color: rgba(0, 0, 0, 0.4);
-                        }
-
-                        .item-txt-text {
-                            font-family: PingFang SC;
-                            font-size: 14px;
-                            font-weight: 400;
-                            line-height: 22px;
-                            text-align: left;
-                            color: rgba(51, 51, 51, 1);
-                        }
-                    }
-                }
-
-                .export-status {
-                    font-family: PingFang SC;
-                    font-size: 14px;
-                    font-weight: 400;
-                    line-height: 22px;
-                    text-align: left;
-                    color: rgba(51, 51, 51, 1);
-                    display: flex;
-                    align-items: center;
-
-                    .status-icon {
-                        width: 6px;
-                        height: 6px;
-                        border-radius: 50%;
-                        margin-right: 10px;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.echarts-box {
-    // width: 100%;
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
-
-    .chart-dom {
-        width: 700px !important;
-        height: 400px !important;
-    }
-}
-</style>

src/views/lotCard/cardList/config.js

@@ -1,13 +1,16 @@
 export const columns = [
   { title: window.$t('lotCard.iccid'), dataIndex: 'iccid', align: 'center', width: 200 },
-  { title: window.$t('lotCard.status'), dataIndex: 'status', align: 'center', width: 100 },
+  { title: window.$t('lotCard.status'), dataIndex: 'statusName', align: 'center', width: 100 },
   { title: window.$t('lotCard.created_at'), dataIndex: 'created_at', align: 'center', width: 200 },
-  { title: window.$t('lotCard.deleted_at'), dataIndex: 'deleted_at', align: 'center', width: 200 },
+  // { title: window.$t('lotCard.deleted_at'), dataIndex: 'deleted_at', align: 'center', width: 200 },
   { title: window.$t('lotCard.updated_at'), dataIndex: 'updated_at', align: 'center', width: 200 },
-  // { title: window.$t('lotCard.msisdn'), dataIndex: 'msisdn', align: 'center', width: 200 },
-  { title: window.$t('lotCard.source'), dataIndex: 'source', align: 'center', width: 200 },
+  { title: window.$t('lotCard.msisdn'), dataIndex: 'msisdn', align: 'center', width: 200 },
+  { title: window.$t('lotCard.source'), dataIndex: 'sourceName', align: 'center', width: 200 },
   { title: window.$t('lotCard.ExpireTime'), dataIndex: 'expire_time', align: 'center', width: 200 },
   { title: window.$t('lotCard.UserId'), dataIndex: 'user_id', align: 'center', width: 200 },
+  { title: window.$t('lotCard.tariff'), dataIndex: 'tariff', align: 'center', width: 200 },
+  { title: window.$t('lotCard.ServiceUsageMode'), dataIndex: 'serviceName', align: 'center', width: 200 },
+  { title: window.$t('lotCard.LastModifyTime'), dataIndex: 'last_modify_time', align: 'center', width: 200 },
   {
     title: window.$t('global.common.operations'),
     dataIndex: 'id',
@@ -18,3 +21,10 @@ export const columns = [
   }
 ]
 
+export const columnsTrafficUse = [
+  { title: window.$t('lotCard.appName'), dataIndex: 'appName', align: 'center', width: 200 },
+  { title: window.$t('lotCard.mcc'), dataIndex: 'mcc', align: 'center', width: 100 },
+  { title: window.$t('lotCard.qtaconsumption'), dataIndex: 'qtaconsumption', align: 'center', width: 200 },
+  { title: window.$t('lotCard.time'), dataIndex: 'time', align: 'center', width: 200 },
+]
+

src/views/lotCard/cardList/index.vue

@@ -29,14 +29,14 @@
     <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="pagination"
       :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }">
       <template #id="{ record }">
-        <!-- 下发用户 -->
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handleIssuedDialog(record)">{{
-          $t('lotCard.titleIssued') }}</a>
+        <!-- 查看流量消耗 -->
+        <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handletrafficUseDialog(record)">{{
+          $t('lotCard.trafficUse') }}</a> -->
       </template>
 
     </a-table>
-    <!-- 下发用户 -->
-    <issuedDialog ref="issuedDialogRef" />
+    <!-- 查看流量消耗 -->
+    <trafficUseDialog ref="trafficUseDialogRef" />
   </div>
 </template>
 
@@ -46,7 +46,8 @@ 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 issuedDialog from "./issuedDialog.vue";
+import trafficUseDialog from "./trafficUseDialog.vue";
+import { enum_dict } from "@/hooks/enum";
 
 const { proxy } = getCurrentInstance()
 const formRef = ref()
@@ -54,6 +55,9 @@ const searchForm = ref({
   "iccid": "",
 });
 
+const statusList = ref([]);
+const sourceList = ref([]);
+const serviceList = ref([]);
 const dataSource = ref([]);
 const route = useRoute();
 const pagination = ref({
@@ -69,7 +73,7 @@ const rowSelection = reactive({
 });
 const selectedKeys = ref([])
 
-const issuedDialogRef = ref()
+const trafficUseDialogRef = ref()
 
 
 const intData = async () => {
@@ -79,7 +83,18 @@ const intData = async () => {
     ...searchForm.value,
   }
   const { data } = await cardInfoList(param)
-  dataSource.value = data.records || []
+  dataSource.value = (data.records || []).map(item => {
+    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 || ''
+    console.log(statusList, statusName, "statusList")
+    return {
+      ...item,
+      sourceName,
+      serviceName,
+      statusName
+    }
+  })
   pagination.value.total = data.total
 }
 
@@ -108,12 +123,9 @@ const handleImport = async () => {
 
 };
 
-const handleIssuedDialog = (data) => {
-  if (selectedKeys.value.length > 0) {
-    issuedDialogRef.value.open(selectedKeys.value)
-    return
-  }
-  issuedDialogRef.value.open([data.iccid])
+const handletrafficUseDialog = (data) => {
+  console.log(data.iccid, "data.iccid")
+  trafficUseDialogRef.value.open(data.iccid)
 }
 
 
@@ -124,12 +136,23 @@ const handleSearch = () => {
     }
   });
 }
+
+
+// 获取字典
+const handleDictValue = () => {
+  const dictList = JSON.parse(window.localStorage.getItem('dictList')) ?? []
+  sourceList.value = dictList.filter((item) => item.type_key == enum_dict.SOURCE)
+  statusList.value = dictList.filter((item) => item.type_key == enum_dict.MAIN_CARD_STATUS)
+  serviceList.value = dictList.filter((item) => item.type_key == enum_dict.ACTIVATION_PACKAGE)
+}
+
 const resetSearch = () => {
   proxy.$refs.formRef.resetFields()
   intData()
 }
 
 onMounted(() => {
+  handleDictValue()
   intData()
 })
 </script>

src/views/lotCard/cardList/issuedDialog.vue

@@ -31,10 +31,8 @@
                     unchecked-value="0" />
             </template>
             <template #id="{ record }">
-                <a-popconfirm :content="($t('lotCard.confirmTitleIssued'))" :ok-text="$t('form.Confirm')"
-                    :cancel-text="$t('form.Cancel')" @ok="evIssuedDialog(record.id)">
-                    <a href="javascript:;" class="a-link">{{ $t('lotCard.titleIssued') }}</a>
-                </a-popconfirm>
+                <a href="javascript:;" class="a-link" @click="evIssuedDialog(record.id)">{{ $t('lotCard.trafficUse')
+                    }}</a>
             </template>
 
         </a-table>

src/views/lotCard/cardList/trafficUseDialog.vue

@@ -0,0 +1,117 @@
+<template>
+    <a-modal width="70%" :visible="visible" :title="$t('lotCard.trafficUse')" :hide-cancel='true'
+        :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel">
+        <!-- 搜索条件区 -->
+        <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') }]">
+                    <a-input v-model="formData.iccid" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')"
+                        allow-clear />
+                </a-form-item>
+                <a-form-item field="hImsi" :label="$t('lotCard.himsi')">
+                    <a-input v-model="formData.hImsi" :placeholder="$t('lotCard.please') + $t('lotCard.himsi')"
+                        allow-clear />
+                </a-form-item>
+                <a-form-item>
+                    <a-space>
+                        <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
+                        <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
+                    </a-space>
+                </a-form-item>
+            </a-form>
+        </div>
+        <a-table :data="dataSource" :columns="columnsTrafficUse" :scroll="{ x: 'auto' }" @page-change="evChangePage">
+        </a-table>
+    </a-modal>
+</template>
+<script setup>
+import { onMounted, ref, getCurrentInstance } from "vue";
+import { columnsTrafficUse } from "./config";
+import { Message, Notification } from '@arco-design/web-vue'
+import { orderFlowData, orderList } from '@/api/path/lotCard.api'
+
+
+const props = defineProps({
+});
+
+const emit = defineEmits(['submit']);
+
+const { proxy } = getCurrentInstance()
+const formRef = ref()
+const formData = ref({
+    "iccid": "",
+    "imsi": "454120387374989",
+});
+const tableMap = ref({})
+
+const dataSource = ref([]);
+const pagination = ref({
+    total: 0,
+    pageSize: 10,
+    current: 1,
+})
+
+const visible = ref(false)
+
+const open = (data) => {
+    if (data.length == 0) {
+        return
+    }
+    visible.value = true
+    tableMap.value = data
+    console.log(data, "“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 evChangePage = (page) => {
+    pagination.value.current = page
+}
+
+
+
+
+
+const resetSearch = () => {
+    proxy.$refs.formRef.resetFields()
+}
+
+const handleSearch = () => {
+    formRef.value.validate((errors) => {
+        if (!errors) {
+            intData()
+        }
+    });
+}
+
+const handleSubmit = () => {
+    emit('submit', { ...formData });
+    visible.value = false
+};
+
+const handleCancel = () => {
+    visible.value = false
+};
+
+
+
+defineExpose({ open })
+
+
+</script>