分页数据

src/views/lotCard/cardList/trafficUseDialog.vue

@@ -1,6 +1,6 @@
 <template>
-  <a-modal width="70%" :visible="visible" :title="$t('lotCard.CardDetails') + Card_info.iccid" :hide-cancel='true'
-    :okText="$t('form.Confirm')" :cancelText="$t('form.Cancel')" @ok="handleSubmit" @cancel="handleCancel" draggable>
+  <a-modal width="80%" :visible="visible" :title="$t('lotCard.CardDetails') + Card_info.iccid" :hide-cancel='true'
+    :okText="$t('form.Confirm')" :cancelText="$t('form.Cancel')" @ok="handleSubmit" @cancel="visible = false" draggable>
     <!-- 卡片信息 -->
     <a-row class="grid-demo" :gutter="24">
       <a-col :span="12">
@@ -138,8 +138,8 @@
             </a-table>
           </a-tab-pane>
           <a-tab-pane key="5" :title="$t('lotCard.UsageAmount')">
-            <a-table :columns="columnsAmount" :data="dataAmount" :scroll="{ x: 'auto' }" :pagination="pageDataAounmt"
-              @page-change="evChangePageAounmt" />
+            <a-table :columns="columnsAmount" :data="dataAmount" :scroll="{ x: 'auto' }"
+              @page-change="handelChangePageAounmt" :pagination="pageDataAounmt" />
           </a-tab-pane>
           <a-tab-pane key="6" :title="$t('lotCard.OperationRecord')">
             <a-table :columns="columnsOperation" :data="dataOperation" :scroll="{ x: 'auto' }"
@@ -162,7 +162,7 @@
   </a-modal>
 </template>
 <script setup>
-import { onMounted, ref, h } from "vue";
+import { onMounted, ref, h, toRefs } from "vue";
 import { getDataCDR, PauseSIMService, RecoverSIMService, OperationRecord, OffSIMCard, getOrderCard, getFlowData } from '@/api/path/lotCard.api'
 import { Getdictionary } from '@/mixins/index'
 import { Message, Modal } from '@arco-design/web-vue'
@@ -171,72 +171,67 @@ import * as echarts from "echarts";
 import { useI18n } from 'vue-i18n'
 import { columnsCard, columnsTopup, columnsAmount, columnsOperation } from './config'
 const { t } = useI18n();
-const props = defineProps({});
 const userType = ref(JSON.parse(localStorage.getItem('user_login_information'))?.userType) // 1平台 2用户
 const emit = defineEmits(['submit']);
-const visible = ref(false)
-const Card_info = ref({})
-const dataPackage = ref()
-const dataSource = ref([]);
-const pageData = ref({
-  total: 0,
-  size: 10,
-  current: 1,
-})
-const pageDataAounmt = ref({
-  total: 0,
-  size: 10,
-  current: 1,
-  source: '',
-  iccid: ''
-})
-
-const pagination = ref({
-  total: 0,
-  size: 10,
-  current: 1,
-})
-
-// 图表插件
-const option = ref({
-  xAxis: {
-    type: 'category',
-    data: [t('lotCard.Jan'), t('lotCard.February'), t('lotCard.March'), t('lotCard.April'), t('lotCard.May'), t('lotCard.June'), t('lotCard.July'), t('lotCard.August'), t('lotCard.September'), t('lotCard.October'), t('lotCard.November'), t('lotCard.December')]
+const state = ref({
+  visible: false,
+  Card_info: {},
+  dataPackage: null,
+  dataSource: [],
+  pageData: {
+    total: 0,
+    size: 10,
+    current: 1,
   },
-  yAxis: {
-    type: 'value'
+  pageDataAounmt: {
+    total: 0,
+    size: 10,
+    current: 1,
+    source: '',
+    iccid: ''
   },
-  series: [
-    {
-      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
-      type: 'bar',
-    }
-  ],
-  tooltip: {
-    // 触发类型，默认数据触发，可选为：'item' | 'axis'
-    trigger: 'axis',
-    // 坐标轴触发，支持的坐标轴有：'x' | 'y' | 'radius' | 'angle'
-    axisPointer: {
-      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+  pagination: {
+    total: 0,
+    size: 10,
+    current: 1,
+  },
+  option: {
+    xAxis: {
+      type: 'category',
+      data: [t('lotCard.Jan'), t('lotCard.February'), t('lotCard.March'), t('lotCard.April'), t('lotCard.May'), t('lotCard.June'), t('lotCard.July'), t('lotCard.August'), t('lotCard.September'), t('lotCard.October'), t('lotCard.November'), t('lotCard.December')]
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        type: 'bar',
+      }
+    ],
+    tooltip: {
+      // 触发类型，默认数据触发，可选为：'item' | 'axis'
+      trigger: 'axis',
+      // 坐标轴触发，支持的坐标轴有：'x' | 'y' | 'radius' | 'angle'
+      axisPointer: {
+        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+      },
+      // 自定义的 formatter 函数
+      formatter: function (params) {
+        var res = params[0].name + '使用量' + params[0].value.toFixed(2) + 'KB';
+        return res
+      }
     },
-    // 自定义的 formatter 函数
-    formatter: function (params) {
-      var res = params[0].name + '使用量' + params[0].value.toFixed(2) + 'KB';
-      return res
-    }
   },
+  dataCard: [],
+  dataTopup: [],
+  dataAmount: [],
+  dataOperation: []
 })
 
-// 卡套餐信息
-const dataCard = ref([])
+const {visible,Card_info,dataPackage,dataSource,pageData,pageDataAounmt,pagination,option,dataCard,dataTopup,dataAmount,dataOperation} = toRefs(state.value)
 
-// 充值信息
-const dataTopup = ref([])
-// 使用量
-const dataAmount = ref([])
-// 操作记录
-const dataOperation = ref([])
-const open = (data) => {
+const open = async (data) => {
   if (!data) {
     return
   }
@@ -245,10 +240,9 @@ const open = (data) => {
   dataPackage.value = data.dataPackage[0]
   // 卡套餐信息
   dataCard.value = (data.dataPackage || []).map(val => {
-    const tatal = val.dataTotal == -1 ? t('lotCard.UnlimitedFlow') : val.dataTotal
     return {
       ...val,
-      dataTotal: tatal,
+      dataTotal: val.dataTotal == -1 ? t('lotCard.UnlimitedFlow') : val.dataTotal,
       tariffName: data.tariffName,
       dataUsage: val.dataUsage + '/MB',
       dataTotal: val.dataTotal + '/MB',
@@ -257,35 +251,34 @@ const open = (data) => {
   })
   pageDataAounmt.value.iccid = data.iccid
   pageDataAounmt.value.source = data.source
-  getAountData(pageDataAounmt.value)
-  optionsRecordSetting()
+  await getAountData()
+  await optionsRecordSetting()
   intData()
-  visible.value = true
   ICCIDPuyData(data.iccid)
+  visible.value = true
 }
 
 
-const getAountData = async (type) => {
-  let res = await getFlowData(type)
+const getAountData = async () => {
+  let res = await getFlowData(pageDataAounmt.value)
   if (res.code == 200) {
     dataAmount.value = res.data.records || []
   }
-  pageDataAounmt.value.total = res.total
+  pageDataAounmt.value.total = res.data.total
 }
 
-const evChangePageAounmt = (e) => {
+const handelChangePageAounmt = (e) => {
   pageDataAounmt.value.current = e
-  getAountData(pageDataAounmt.value)
+  getAountData()
 }
 
 const ICCIDPuyData = async (id) => {
   let res = await getOrderCard({ iccid: id, ...pagination.value })
   let res1 = await Getdictionary('puyType')
   dataTopup.value = (res.data.records || []).map(val => {
-    const payType = res1.filter(item => item.value == val.payStatus)[0]?.label
     return {
       ...val,
-      puyStatus: payType,
+      puyStatus: res1.filter(item => item.value == val.payStatus)[0]?.label,
       payAmount: val.payAmount + '/' + val.currency
     }
   })
@@ -298,7 +291,7 @@ const evChangePageCardPuy = (e) => {
   ICCIDPuyData(Card_info.value.iccid)
 }
 
-// 使用量
+// 月用量
 const intData = async () => {
   // 获取当前年份
   const currentYear = new Date().getFullYear();
@@ -354,9 +347,6 @@ const handleSubmit = () => {
   visible.value = false
 };
 
-const handleCancel = () => {
-  visible.value = false
-};
 
 // 图表
 const initChart = () => {