merchant_feedov_web/src/views/financialManagement/trafficDetails/index.vue

<!-- 流量明细 客户充值界面 -->
<template>
  <div class="customer-top-up">
    <!-- 搜索条件区 -->
    <div class="search-section">
      <a-form ref="formRef" :model="searchForm" layout="inline">
        <a-form-item field="name" label="客户名称">
          <a-input
            v-model="searchForm.name"
            placeholder="请输入客户名称"
            allow-clear
          />
        </a-form-item>
        <!-- <a-form-item field="exportTime" label="卡导入时间">
          <a-range-picker
            v-model="searchForm.exportTime"
            style="width: 254px; marginbottom: 20px"
          />
        </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="userId"
      :columns="columns"
      :data="tableData"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    >
      <template #dataUsage="{ record }">
        <div class="boldTxt txtPointer" @click="openDetail(record)">
          {{ record.dataUsage }}M
        </div>
      </template>
    </a-table>
    <a-modal
      v-model:visible="showDetail"
      title="流量消耗明细"
      @cancel="showDetail = false"
      @before-ok="submitDetail"
      okText="确定"
      width="1000px"
      cancelText="关闭"
    >
      <a-table
        row-key="ICCID"
        :columns="columnsDetail"
        :data="tableDataDetail"
        :pagination="paginationDetail"
        :scroll="{
          x: '130%',
          y: '100%',
        }"
        @page-change="onDetailPageChange"
        @page-size-change="onDetailPageSizeChange"
      >
        <template #dataUsage="{ record }">
          <div>{{ record.dataUsage }}M/{{ record.dataTotal }}M</div>
        </template>
        <template #userName="{ record }">
          <div>{{ record.userName }}/{{ record.userId }}</div>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import { getSimConsumptionDetailsList, getUserSimInfo } from "@/api/path/finance.js";

onMounted(() => {
  getSimConsumptionDetailsListFc();
});

const initPage = {
  total: 0,
  current: 1,
  pageSize: 10,
};

const formRef = ref();
const searchForm = ref({
  name: "",
});

const columns = [
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    render: ({ rowIndex }) => rowIndex + 1,
    width: 60,
  },
  { title: "客户", dataIndex: "username" },
  { title: "运营商", dataIndex: "source" },
  { title: "统计时间", dataIndex: "statisticalTime" },
  { title: "卡套餐", dataIndex: "cardPackageName" },
  { title: "已用流量套餐", dataIndex: "dataUsage", slotName: "dataUsage",  },
//   { title: "已用加油包流量", dataIndex: "dataUsage" },
  { title: "计算周期", dataIndex: "billingCycle" },
];
const columnsDetail = [
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    render: ({ rowIndex }) => rowIndex + 1,
    width: 60,
  },
  { title: "ICCID/MSISDN", dataIndex: "iccid" },
  { title: "客户", dataIndex: "userName" },
  { title: "运营商", dataIndex: "source", width: 120, },
  { title: "统计时间", dataIndex: "updatedAt", width: 180, },
  { title: "用户名称/编号", dataIndex: "userName", slotName: "userName" },
  { title: "卡套餐", dataIndex: "productName" },
  {
    title: "已用/可用(套餐流量)",
    dataIndex: "usedData",
    dataIndex: "dataUsage",
    slotName: "dataUsage",
  },
//   { title: "已用/可用(加油包流量)", dataIndex: "fuelPacketUsed" },
];
const tableData = ref([]);
const tableDataDetail = ref([
  {
    ICCID: "1210938748329018",
    customerName: "泰国李总",
    operators: "泰国AIS",
    updateTime: "2024-10-24 08:10:34",
    userName: "Jay/010211",
    cardPackages: "100M每月",
    usedData: "28M/100M",
    fuelPacketUsed: "28M/30M",
  },
  {
    ICCID: "1210938748329019",
    customerName: "泰国李总",
    operators: "泰国AIS",
    updateTime: "2024-10-24 08:10:34",
    userName: "Jay/010211",
    cardPackages: "100M每月",
    usedData: "28M/100M",
    fuelPacketUsed: "28M/30M",
  },
  {
    ICCID: "12109387483290110",
    customerName: "泰国李总",
    operators: "泰国AIS",
    updateTime: "2024-10-24 08:10:34",
    userName: "Jay/010211",
    cardPackages: "100M每月",
    usedData: "28M/100M",
    fuelPacketUsed: "28M/30M",
  },
  {
    ICCID: "12109387483290111",
    customerName: "泰国李总",
    operators: "泰国AIS",
    updateTime: "2024-10-24 08:10:34",
    userName: "Jay/010211",
    cardPackages: "100M每月",
    usedData: "28M/100M",
    fuelPacketUsed: "28M/30M",
  },
  {
    ICCID: "12109387483290112",
    customerName: "泰国李总",
    operators: "泰国AIS",
    updateTime: "2024-10-24 08:10:34",
    userName: "Jay/010211",
    cardPackages: "100M每月",
    usedData: "28M/100M",
    fuelPacketUsed: "28M/30M",
  },
]);
const pagination = ref({
  ...initPage,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});
const paginationDetail = ref({
  ...initPage,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});

const onPageChange = (page) => {
  pagination.value.current = page;
  getSimConsumptionDetailsListFc();
};
const onPageSizeChange = (pageSize) => {
  pagination.value.pageSize = pageSize;
  getSimConsumptionDetailsListFc();
};
const onDetailPageChange = (page) => {
  pagination.value.current = page;
  getUserSimInfoFc();
};
const onDetailPageSizeChange = (pageSize) => {
  pagination.value.pageSize = pageSize;
  getUserSimInfoFc();
};

const handleSearch = () => {
  pagination.value = { ...initPage };
  getSimConsumptionDetailsListFc();
};

const resetSearch = () => {
  formRef.value.resetFields();
  handleSearch();
};
const showDetail = ref(false);
const submitDetail = () => {
  window.setTimeout(() => {
    showDetail.value = false;
  }, 1000);
};

const curUserId = ref(null);
const openDetail = (record) => {
  curUserId.value = record.userId;
  getUserSimInfoFc(() => {
    showDetail.value = true;
  });
};

const getSimConsumptionDetailsListFc = async () => {
  const param = {
    current: pagination.value.current,
    size: pagination.value.pageSize,
    ...searchForm.value,
  };
  const { data } = await getSimConsumptionDetailsList(param);
  tableData.value = data?.records || [];
  pagination.value.total = data.total;
};
const getUserSimInfoFc = async (cb) => {
  const param = {
    current: paginationDetail.value.current,
    size: paginationDetail.value.pageSize,
    id: curUserId.value,
  };
  const { data } = await getUserSimInfo(param);
  tableDataDetail.value =
    data.map((v) => {
      const obj =
        v?.dataPackage && v.dataPackage.length > 0 ? v.dataPackage[0] : {};
      return {
        ...obj,
        ...v,
      };
    }) || [];
  paginationDetail.value.total = data.length;
  cb && cb();
};
</script>
<style scoped lang="less">
.customer-top-up {
  padding: 20px !important;

  .search-section {
    margin-bottom: 20px;
  }

  .audit-btn {
    margin-bottom: 10px;
  }
}

.text-box {
  width: 100%;
  margin-left: 10px;

  .text {
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: 400;
    line-height: 19px;
    color: rgba(153, 153, 153, 1);
    text-align: left;
  }
}
</style>