多配置

src/mixins/index.js

@@ -2,8 +2,79 @@ import { dictionaryDeleteAll } from "@/api/path/dict.js";
 import { ref } from "vue";
 // 获取字典
 export function Getdictionary(params) {
-    // 返回 Promise
-    return dictionaryDeleteAll({ typeKey: params }).then((res) => {
-        return res.data; // 将响应数据返回
-    });
+    if (Array.isArray(params)) {
+        // 存储每个请求的 Promise
+        const promises = params.map(item => {
+            return dictionaryDeleteAll({ typeKey: item }).then((res) => {
+                return res.data;
+            });
+        });
+        // 使用 Promise.all 处理多个请求
+        return Promise.all(promises).then(results => {
+            return results;
+        });
+    } else {
+        // 非数组时，直接请求
+        return dictionaryDeleteAll({ typeKey: params }).then((res) => {
+            return res.data;
+        });
+    }
 }
+
+// 过滤字典值
+export function filterDict(item, value) {
+    if (!Array.isArray(item)) return false
+
+    if (typeof value !== 'string') return value
+    return item.find(val => val.value == value)?.label
+}
+
+// 处理表格分页 && 搜索 && 搜索表单重置 && 及请求到的数据公共处理方法
+export function tableFunction(_this, apiRequest, processData) {
+    // 表格数据
+    const tableData = ref([]);
+    // 搜索数据
+    const SearchForm = ref({});
+
+    // 请求数据方法，使用外部传入的 apiRequest 方法
+    const initData = async (item) => {
+        if (item) {
+            SearchForm.value = item;
+        }
+        const param = {
+            ..._this,
+            ...SearchForm.value // 搜索使用的方法
+        };
+        delete param.pageSize
+        param.size = _this.pageSize
+        // 调用外部传入的请求方法，并传递分页参数
+        const res = await apiRequest(param);
+        if (res.code === 200) {
+            // 使用外部的方法来处理值
+            tableData.value = processData ? await processData(res.data) : res.data.records || res.data;
+            _this.total = res.data.total;
+        }
+    };
+
+    // 分页变化时的处理方法
+    const evChangePage = (e) => {
+        _this.current = e;
+        initData();  // 调用请求数据方法
+    };
+
+    // 表单重置
+    const reset = (item) => {
+        SearchForm.value = item;
+        _this.current = 1;
+        initData();
+    };
+
+    // 将事件处理方法暴露给组件
+    return {
+        evChangePage,
+        initData,
+        reset,
+        tableData,
+        SearchForm
+    };
+}

src/utils/axios.js

@@ -55,23 +55,7 @@ axiosInstance.interceptors.response.use(
       const dataList = {
         code: code,
         message: res.data.msg,
-        data: (() => {
-          if (Array.isArray(data)) {
-            return data.map(item => ({ 
-             ...item, 
-              createdAt: timeLoadTemeYear(item.createdAt || false), 
-              updatedAt: timeLoadTemeYear(item.updatedAt || false) 
-            }));
-          } else if (data) {
-            return { 
-             ...data, 
-              createdAt: timeLoadTemeYear(data.createdAt || false), 
-              updatedAt: timeLoadTemeYear(data.updatedAt || false) 
-            };
-          } else {
-            return null;
-          }
-        })()
+        data: DataViewsProvider(data)
       };
       return Promise.resolve(dataList);
     }
@@ -136,4 +120,15 @@ function timeLoadTemeYear(value) {
   }
 }
 
+// 转换数据格式 
+function DataViewsProvider(data) {
+  if (!Array.isArray(data)) return data
+
+  if (data && data.records) {
+    return { ...data, records: data.records.map(item => ({ ...item, createdAt: timeLoadTemeYear(item.createdAt || false), updatedAt: timeLoadTemeYear(item.updatedAt || false) })) }
+  }else{
+    return data.map(item => ({...item, createdAt: timeLoadTemeYear(item.createdAt || false), updatedAt: timeLoadTemeYear(item.updatedAt || false) }))
+  }
+}
+
 export default axiosInstance;

src/views/OperationRecord/FlowpoolRecord/index.vue

@@ -3,10 +3,10 @@
   <div class="container">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search :SearchForm="SearchFormList" @query="intData" @reset="reset"></Search>
+      <Search :SearchForm="SearchFormList" @query="initData" @reset="reset"></Search>
     </div>
 
-    <a-table row-key="id" :data="dataSource" :columns="columnsFlow" :pagination="pagination" :scroll="{ x: 'auto' }"
+    <a-table row-key="id" :data="tableData" :columns="columnsFlow" :pagination="pagination" :scroll="{ x: 'auto' }"
       @page-change="evChangePage">
 
       <template #status="{ record }">
@@ -22,17 +22,15 @@
 
 <script setup>
 import { onMounted, ref, toRefs } from "vue";
-import { columnsFlow ,SearchFormList} from "../config";
+import { columnsFlow, SearchFormList } from "../config";
 import {
   updateFlowPoolData,
 } from "@/api/path/flowPool.api"
 import { useSystemStore } from "@/store/modules/systemStore"
-import { Getdictionary } from '@/mixins/index.js'
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
 import Search from '@/components/Search/index.vue'
 const systemStore = useSystemStore()
 const state = ref({
-  role: systemStore.getRole,
-  searchForm: {},
   pagination: {
     total: 0,
     pageSize: 10,
@@ -40,73 +38,49 @@ const state = ref({
   },
   sourceList: [],
   trafficList: [],
-  dataSource: [],
 })
 const {
-  role,
-  searchForm,
   pagination,
   sourceList,
   trafficList,
-  dataSource,
 } = toRefs(state.value)
 
-const intData = async (item) => {
-  if (item) {
-    searchForm.value = item
-  }
-  const param = {
-    current: pagination.value.current,
-    size: pagination.value.pageSize,
-    ...searchForm.value,
-  }
-  const { data } = await updateFlowPoolData(param)
-  dataSource.value = (data.records || []).map((item, index) => {
-    const sourceName = sourceList.value.find(val => val.value == item.source)?.label
-    const Activated = 0 + '/' + item.iccids?.length
-    const HaveBeenUsed = 0 + '/' + item.size + item.sizeType
+const processData = (data) => {
+  return (data.records || []).map((item, index) => {
     item.children = item.children?.map(res => {
       return {
         ...res,
-        sourceName,// 运营商名称
-        Activated: Activated,
-        HaveBeenUsed: HaveBeenUsed,
-        trafficPoolType:res.trafficPoolType==1?'前流量池':'后流量池',
-        simTariffName:item.simTariffName,
-        size:res.size+'/'+res.sizeType
+        sourceName: filterDict(sourceList.value, item.source),// 运营商名称
+        Activated: item.cardAct + '/' + item.iccidCount,
+        HaveBeenUsed: item.size + item.sizeType,
+        trafficPoolType: res.trafficPoolType == 1 ? '前流量池' : '后流量池',
+        simTariffName: item.simTariffName,
+        size: res.size + '/' + res.sizeType
       }
     })
     return {
       ...item,
-      sourceName,// 运营商名称
-      Activated: Activated,
-      trafficPoolType:item.trafficPoolType==1?'前流量池':'后流量池',
-      HaveBeenUsed: HaveBeenUsed,
-      size:item.size+'/'+item.sizeType
+      sourceName: filterDict(sourceList.value, item.source),// 运营商名称
+      Activated: item.cardAct + '/' + item.iccidCount,
+      trafficPoolType: item.trafficPoolType == 1 ? '前流量池' : '后流量池',
+      HaveBeenUsed: item.size + item.sizeType,
+      size: item.size + '/' + item.sizeType
     }
   })
-
-  pagination.value.total = data.total
 }
 
-const evChangePage = (page) => {
-  pagination.value.current = page
-  intData()
-}
-const reset = (item) => {
-  searchForm.value = item
-  pagination.value.current = 1
-  intData()
-}
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, updateFlowPoolData, processData)
+
 
 const handleDictValue = async () => {
-  sourceList.value = await Getdictionary('source')
-  trafficList.value = await Getdictionary('trafficPacketStatus')
+  let dict = await Getdictionary(['source', 'trafficPacketStatus'])
+  sourceList.value = dict[0]
+  trafficList.value = dict[1]
 }
 
 onMounted(async () => {
   await handleDictValue()
-  await intData()
+  await initData()
 })
 
 </script>

src/views/OperationRecord/TariffRecord/index.vue

@@ -3,9 +3,9 @@
   <div class="container">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search :SearchForm="trafficSearchFrom" @query="intData" @reset="reset" />
+      <Search :SearchForm="trafficSearchFrom" @query="initData" @reset="reset" />
     </div>
-    <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
+    <a-table row-key="id" :data="tableData" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
       @page-change="evChangePage">
       <template #id="{ record }">
         <a-button type="text" @click="detaile(record)">详情</a-button>
@@ -18,12 +18,11 @@
 import { onMounted, ref, toRefs } from "vue";
 import { columns, planColumns, trafficSearchFrom } from "../config";
 import { tariffList } from "@/api/path/tariffManagement.api"
-import { Getdictionary } from '@/mixins/index.js'
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
 import Search from '@/components/Search/index.vue'
 const state = ref({
   searchForm: {},
   currency: [],
-  dataSource: [],
   pagination: {
     total: 0,
     pageSize: 10,
@@ -34,93 +33,61 @@ const state = ref({
   methodList: [],
 })
 const {
-  searchForm,
   currency,
-  dataSource,
   pagination,
   sourceList,
   cycleist,
   methodList
 } = toRefs(state.value);
 
-const intData = async (item) => {
-  if (item) {
-    searchForm.value = item
-  }
-  const param = {
-    current: pagination.value.current,
-    size: pagination.value.pageSize,
-    ...searchForm.value,
-  }
-  const { data } = await tariffList(param)
-  dataSource.value = (data.records || []).map((item, index) => {
-    const sourceName = sourceList.value.find(val => val.value == item.source)?.label
-    const billingCycleName = cycleist.value.find(val => val.value == item.billingCycle)?.label
-    const pricingCurrty = currency.value.find(val => val.value == item.currency)?.label || '人民币'
-    const Activated = item.trafficBilling + item.trafficBillingType
-    const bagSize = item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee
-    const billingMethodName = methodList.value.find(val => val.value == item.billingMethod)?.label
-    let pricingName;
-    if (item.billingMethod == 1) {
-      pricingName = item.trafficBillingAmount + pricingCurrty
-    } else if (item.billingMethod == 2) {
-      pricingName = item.pricing + pricingCurrty
-    }
-
+const processData = (data) => {
+  return (data.records || []).map((item, index) => {
     item.children = item.children?.map(res => {
       return {
         ...res,
         userName: item.userName,
-        sourceName,
-        pricingName,
-        billingCycleName,
-        Activated: Activated,
+        sourceName: filterDict(sourceList.value, item.source),
+        pricingName: item.billingMethod == 1 ? item.trafficBillingAmount + filterDict(currency.value, item.currency) : item.pricing + filterDict(currency.value, item.currency),
+        billingCycleName: filterDict(cycleist.value, item.billingCycle),
+        Activated: item.trafficBilling + item.trafficBillingType,
         status: "正常",
-        bagSize,
-        billingMethodName,
+        bagSize: item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee,
+        billingMethodName: filterDict(methodList.value, item.billingMethod),
         Number: index + 1,
-        metadataPackagesName:item.metadataPackagesName,
-        testMetadataPackagesName:item.testMetadataPackagesName,
+        metadataPackagesName: item.metadataPackagesName,
+        testMetadataPackagesName: item.testMetadataPackagesName,
       }
     })
     return {
       ...item,
-      sourceName,
-      pricingName,
-      billingCycleName,
-      Activated: Activated,
+      sourceName: filterDict(sourceList.value, item.source),
+      pricingName: item.billingMethod == 1 ? item.trafficBillingAmount + filterDict(currency.value, item.currency) : item.pricing + filterDict(currency.value, item.currency),
+      billingCycleName: filterDict(cycleist.value, item.billingCycle),
+      Activated: item.trafficBilling + item.trafficBillingType,
       status: "正常",
-      bagSize,
-      billingMethodName,
+      bagSize: item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee,
+      billingMethodName: filterDict(methodList.value, item.billingMethod),
       Number: index + 1,
     }
   })
-  pagination.value.total = data.total
 }
 
-const reset = (item) => {
-  searchForm.value = item
-  pagination.value.current = 1
-  intData()
-}
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, tariffList, processData)
 
-const evChangePage = (page) => {
-  pagination.value.current = page
-  intData()
-}
 
 
 const handleDictValue = async () => {
-  sourceList.value = await Getdictionary('source')
-  cycleist.value = await Getdictionary('Billingcycle')
-  currency.value = await Getdictionary('currencyType')
-  methodList.value = await Getdictionary('billingMethod')
+  let dict = await Getdictionary(['source', 'Billingcycle', 'currencyType', 'billingMethod'])
+  sourceList.value = dict[0]
+  cycleist.value = dict[1]
+  currency.value = dict[2]
+  methodList.value = dict[3]
 }
 
 
 onMounted(async () => {
   await handleDictValue()
-  await intData()
+  await initData()
 })
 
 

src/views/customer/NewCustomerForm.vue

@@ -2,7 +2,7 @@
   <a-modal :visible="visible" :title="editMode ? $t('customer.editCustomer') : $t('customer.addCustomer')"
     :loading="loading" @ok="handleSubmit" @cancel="handleCancel" :width="800" :okText="$t('form.Confirm')"
     :cancelText="$t('form.Cancel')">
-    <a-tabs>
+    <a-tabs v-model="activeKey">
       <!-- 基本信息 Tab -->
       <a-tab-pane key="1" :title="$t('customer.basicInfo')">
         <a-form :model="formData" :rules="rules" ref="formRef" :label-col-props="{ span: 6 }"
@@ -214,6 +214,7 @@ const props = defineProps({
 const invoiceList = ref([])
 const roles = ref([])
 const userTypes = ref([])
+const activeKey = ref(1)
 watch(
   () => props.editData,
   (newVal) => {

src/views/customer/index.vue

@@ -3,7 +3,7 @@
   <div class="customer-management">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search :SearchForm="UserSearchForm" @query="fetchCustomerList"/>
+      <Search :SearchForm="UserSearchForm" @query="initData" @reset="reset" />
     </div>
 
     <!-- 顶部操作区 -->
@@ -15,7 +15,7 @@
 
     <!-- 数据表格 -->
     <a-table row-key="id" :columns="UserColumns" :data="tableData" :pagination="pagination" :scroll="{ x: 'auto' }"
-      :row-selection="{ type: 'checkbox', showCheckedAll: true }" @page-change="onPageChange">
+      :row-selection="{ type: 'checkbox', showCheckedAll: true }" @page-change="evChangePage">
       <template #state="{ record }">
         <a-tag :color="getStatusColor(record.state)">
           {{ $t(`customer.status.${getStatusText(record.state)}`) }}
@@ -43,39 +43,21 @@ import { Message } from '@arco-design/web-vue';
 import { useI18n } from 'vue-i18n';
 import NewCustomerForm from './NewCustomerForm.vue';
 import { getMessUserList, deleteMessUser } from '@/api/customer.js';
-import {UserSearchForm,UserColumns} from './config'
+import { UserSearchForm, UserColumns } from './config'
 import Search from '@/components/Search/index.vue'
+import { tableFunction } from '@/mixins/index'
 const { t } = useI18n();
 
 const loading = ref(false);
 
-onMounted(() => {
-  fetchCustomerList();
-});
-
-const tableData = ref([])
-
-const pagination = reactive({
+const pagination = ref({
   total: 100,
   current: 1,
   pageSize: 10,
 });
-const fetchCustomerList = async (item) => {
-    const response = await getMessUserList({
-      current: pagination.current,
-      pageSize: pagination.pageSize,
-      ...item
-    });
-    if (response.code === 200 && response.data) {
-      tableData.value = response.data.records
-      pagination.total = response.data.total;
-    }
-};
 
-const onPageChange = (page) => {
-  pagination.current = page;
-  fetchCustomerList();
-};
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, getMessUserList)
+
 
 const newCustomerFormVisible = ref(false);
 const editMode = ref(false);
@@ -112,7 +94,7 @@ const handleEdit = async (record) => {
 const handleNewCustomerSubmit = (formData) => {
   if (formData) {
     newCustomerFormVisible.value = false;
-    fetchCustomerList();
+    initData();
   }
 };
 
@@ -136,6 +118,12 @@ const getStatusText = (state) => {
   };
   return stateTexts[state] || 'undefined';
 };
+
+
+onMounted(() => {
+  initData();
+});
+
 </script>
 
 <style scoped>

src/views/financialManagement/accountBalance/index.vue

@@ -17,10 +17,11 @@
       <div class="item-title">账单明细</div>
       <!-- 搜索条件区 -->
       <div class="search-section">
-        <Search :SearchForm="AccountBalanceSearch"></Search>
+        <Search :SearchForm="AccountBalanceSearch" @query="initData" @reset="reset"></Search>
       </div>
       <!-- 数据表格 -->
-      <a-table row-key="customerName" :columns="columns" :data="tableData" :pagination="pagination">
+      <a-table row-key="customerName" :columns="columns" :data="tableData" :pagination="pagination"
+        @page-change="evChangePage">
         <template #detail="{ record }">
           <a-button @click="openDetail(record)" type="text">查看</a-button>
           <a-button @click="openTopsUp(record)" type="text">结算</a-button>
@@ -162,16 +163,16 @@
 <script setup>
 import { ref, reactive, onMounted } from "vue";
 import { Message } from "@arco-design/web-vue";
-import { getWalletCard,getWalletList } from "@/api/path/finance.js";
+import { getWalletCard, getWalletList } from "@/api/path/finance.js";
 import { useI18n } from 'vue-i18n'
 import Search from '@/components/Search/index.vue'
-import {AccountBalanceSearch} from '../config'
+import { AccountBalanceSearch } from '../config'
 const { t } = useI18n()
-
+import { tableFunction, filterDict } from '@/mixins/index.js'
 
 onMounted(() => {
-  getWalletCardFc();
-  getWallectData()
+  initData();
+  getWalletCardFc()
 });
 
 const cardList = ref([
@@ -182,7 +183,6 @@ const cardList = ref([
   { name: "总消耗流量", value: 0, unit: "G" },
 ]);
 
-const searchForm = ref();
 
 const columns = [
   {
@@ -228,32 +228,11 @@ const columns = [
   //   ellipsis: true,
   // },
 ];
-const tableData = ref([]);
 const pagination = ref({
   total: 0,
   current: 1,
   pageSize: 10,
 });
-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 options = [
-  { label: "充值", value: "1" },
-  { label: "抵充", value: "2" },
-  { label: "消费扣除", value: "3" },
-];
 const openTopsUp = () => {
   showAdd.value = true;
 };
@@ -288,21 +267,19 @@ const getWalletCardFc = async () => {
 };
 
 
-const getWallectData = async (item) => {
-  if(item){
-    searchForm.value = item
-  }
-  let res = await getWalletList({...pagination.value,...searchForm.value})
-  if(res.code===200){
-    tableData.value = res.data.records.map(res=>{
-      return {
-        ...res,
-        DataVol:res.DataVol+'G'
-      }
-    })
-    pagination.value.total = res.data.total
-  }
+
+const processData = (data) => {
+  return (data.records || []).map(res => {
+    return {
+      ...res,
+      DataVol: res.DataVol + 'G'
+    }
+  })
 }
+
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, getWalletList, processData)
+
+
 </script>
 <style scoped lang="less">
 .customer-top-up {

src/views/financialManagement/appPuy/index.vue

@@ -7,7 +7,7 @@
         </div>
         <!-- 数据表格 -->
         <a-table row-key="id" :columns="UserAdiroColumns" :data="tableData" :pagination="pagination"
-            @page-change="onPageChange" @page-size-change="onPageSizeChange" :filter-icon-align-left="true">
+            @page-change="evChangePage" @page-size-change="onPageSizeChange" :filter-icon-align-left="true">
             <template #name="{ record }">
                 <div class="boldTxt">{{ record.name }}</div>
             </template>
@@ -15,7 +15,7 @@
                 <div>{{ handleStatusTxt(record.status) }}</div>
             </template>
             <template #puyStatus="{ record }">
-                <a-tag :color="record.payStatus=='SUCCESS'?'#00b42a':''">{{ record .puyStatus}}</a-tag>
+                <a-tag :color="record.payStatus == 'SUCCESS' ? '#00b42a' : ''">{{ record.puyStatus }}</a-tag>
             </template>
             <template #image="{ record }">
                 <a-image width="60" height="60" :src="record.certificateImg" :preview-props="{
@@ -30,19 +30,9 @@
 import { ref, reactive, onMounted } from "vue";
 import { getAdiroePuyList } from "@/api/path/finance.js";
 import { columns, handleStatusTxt, statusOptions, UserAdiroColumns, AdminSearchForm, ClientSearchForm } from '../config'
-const userType = ref(JSON.parse(localStorage.getItem('user_login_information')))
 import Search from '@/components/Search/index.vue'
-import { Getdictionary } from '@/mixins/index'
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
 
-onMounted(() => {
-    getTopUpRecordListFc();
-});
-
-
-const formRef = ref();
-const searchForm = ref();
-
-const tableData = ref([]);
 const pagination = ref({
     showTotal: true,
     showJumper: true,
@@ -52,42 +42,28 @@ const pagination = ref({
     pageSize: 10,
 });
 
-const onPageChange = (page) => {
-    pagination.value.current = page;
-    getTopUpRecordListFc();
-};
 const onPageSizeChange = (pageSize) => {
     pagination.value.pageSize = pageSize;
-    getTopUpRecordListFc();
+    pagination.value.current = 1;
+    initData();
 };
 
 
-const getTopUpRecordListFc = async (item) => {
-    if (item) {
-        searchForm.value = item
-    }
-    let res;
-    const param = {
-        current: pagination.value.current,
-        size: pagination.value.pageSize,
-        ...searchForm.value,
-    };
+const processData = async (data) => {
     let puyType = await Getdictionary('puyType')
-    res = await getAdiroePuyList(param)
-    tableData.value = (res.data?.records || []).map(res => {
-        res.puyStatus = puyType.filter(item => item.value == res.payStatus)[0]?.label
+    return (data.records || []).map(res => {
+        res.puyStatus = filterDict(puyType,res.payStatus)
         return res
     })
+}
 
-    pagination.value.total = res.data.total;
-};
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, getAdiroePuyList, processData)
 
 
-const reset = (item) => {
-    searchForm.value = item
-    pagination.value.current = 1
-    getTopUpRecordListFc()
-}
+onMounted(() => {
+    initData();
+});
+
 </script>
 <style scoped lang="less">
 .customer-top-up {

src/views/financialManagement/config.js

@@ -179,19 +179,19 @@ export const AccountBalanceSearch = [
   {
     type: "input",
     label: "客户名称",
-    field: "id",
+    field: "name",
     value: "", // 双向绑定的值
   },
   {
     type: "range-picker",
     label: "账单生成时间",
-    field: "id",
+    field: "time",
     value: "", // 双向绑定的值
   },
   {
     type: "range-picker",
     label: "结算周期时间段",
-    field: "id",
+    field: "a",
     value: "", // 双向绑定的值
   },
   {

src/views/financialManagement/customerTopsUp/index.vue

@@ -3,7 +3,7 @@
   <div class="customer-top-up">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search @query="getTopUpRecordListFc" @reset="reset" :SearchForm="AdminSearchForm"></Search>
+      <Search @query="initData" @reset="reset" :SearchForm="AdminSearchForm"></Search>
     </div>
     <div class="audit-btn">
       <a-button @click="openTopsUp" type="text">
@@ -14,7 +14,7 @@
       </a-button>
     </div>
     <!-- 数据表格 -->
-    <a-table row-key="id" :columns="columns" :data="tableData" :pagination="pagination" @page-change="onPageChange"
+    <a-table row-key="id" :columns="columns" :data="tableData" :pagination="pagination" @page-change="evChangePage"
       @page-size-change="onPageSizeChange" :filter-icon-align-left="true">
       <template #name="{ record }">
         <div class="boldTxt">{{ record.name }}</div>
@@ -66,9 +66,8 @@ import { Message } from "@arco-design/web-vue";
 import { getTopUpRecordList, getCustomerList, topUpAs, getAdiroePuyList } from "@/api/path/finance.js";
 import Upload from "@/components/upload/index.vue";
 import { columns, handleStatusTxt, statusOptions, UserAdiroColumns, AdminSearchForm, ClientSearchForm } from '../config'
-const userType = ref(JSON.parse(localStorage.getItem('user_login_information')))
 import Search from '@/components/Search/index.vue'
-import { Getdictionary } from '@/mixins/index'
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
 const rules = {
   status: [
     {
@@ -94,13 +93,11 @@ const rules = {
 };
 
 onMounted(() => {
-  getTopUpRecordListFc();
+  initData();
 });
 
 
 const formRef = ref();
-const searchForm = ref();
-const tableData = ref([]);
 const pagination = ref({
   showTotal: true,
   showJumper: true,
@@ -110,18 +107,14 @@ const pagination = ref({
   pageSize: 10,
 });
 
-const onPageChange = (page) => {
-  pagination.value.current = page;
-  getTopUpRecordListFc();
-};
 const onPageSizeChange = (pageSize) => {
   pagination.value.pageSize = pageSize;
-  getTopUpRecordListFc();
+  initData();
 };
 
 const handleSearch = () => {
   pagination.value = { ...initPage };
-  getTopUpRecordListFc();
+  initData();
 };
 
 const resetSearch = () => {
@@ -156,26 +149,14 @@ const submitAdd = () => {
         okLoading.value = false;
         showAdd.value = false;
         Message.success("充值成功!");
-        getTopUpRecordListFc();
+        initData();
       });
     }
   });
 };
 
-const getTopUpRecordListFc = async (item) => {
-  if (item) {
-    searchForm.value = item
-  }
-  let res;
-  const param = {
-    current: pagination.value.current,
-    size: pagination.value.pageSize,
-    ...searchForm.value,
-  };
-  res = await getTopUpRecordList(param)
-  tableData.value = res.data?.records || [];
-  pagination.value.total = res.data.total;
-};
+
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, getTopUpRecordList)
 
 // 客户选择
 const customerOptions = ref([]);
@@ -203,11 +184,6 @@ const getCustomerListFc = async (value) => {
   customerLoading.value = false;
 };
 
-const reset = (item) => {
-  searchForm.value = item
-  pagination.value.current = 1
-  getTopUpRecordListFc()
-}
 </script>
 <style scoped lang="less">
 .customer-top-up {

src/views/flowPool/customerFlowPool/config.js

@@ -1,19 +1,40 @@
 export const columns = [
     { title: window.$t('flowPool.poolNumber'), dataIndex: 'id', align: 'center', width: 200 },
     { title: window.$t('flowPool.label'), dataIndex: 'label', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.userId'), dataIndex: 'user_id', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.trafficPoolType'), dataIndex: 'trafficPoolType', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.trafficPoolStatus'), dataIndex: 'trafficPoolStatus', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.cardFlow'), dataIndex: 'cardFlow', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.UsedMonth'), dataIndex: 'UsedMonth', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.surplusFlow'), dataIndex: 'surplusFlow', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.exceededFlow'), dataIndex: 'exceededFlow', align: 'center', width: 200 },
     { title: window.$t('flowPool.source'), dataIndex: 'sourceName', align: 'center', width: 200 },
     { title: window.$t('flowPool.tariffName'), dataIndex: 'simTariffName', align: 'center', width: 200 },
     { title: window.$t('flowPool.ActivatedName'), dataIndex: 'Activated', align: 'center', width: 200 },
     { title: window.$t('flowPool.poolSize'), dataIndex: 'HaveBeenUsed', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.cardRariffName'), dataIndex: 'cardRariffName', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.cardNum'), dataIndex: 'cardNum', align: 'center', width: 200 },
-    // { title: window.$t('flowPool.totalFlow'), dataIndex: 'totalFlow', align: 'center', width: 200 },
     { title: window.$t('flowPool.updated_at'), dataIndex: 'updatedAt', align: 'center', width: 200 },
+]
+
+export const SearchFormList = [
+    {
+        type: "input",
+        label: "流量池名称",
+        field: "label",
+        value: "", // 双向绑定的值
+    },
+    {
+        type: "select",
+        label: "运营商名称",
+        field: "source",
+        options: [], // 默认空，后面会通过字典加载
+        dict: "source",
+        value: "", // 双向绑定的值
+        width: "200",
+    },
+    {
+        type: "input",
+        label: "资费名称",
+        field: "tariffName",
+        value: "", // 双向绑定的值
+    },
+    {
+        type: "range-picker",
+        label: "更新日期",
+        field: "updatedAt",
+        value: [], // 双向绑定的值
+        width: "240",
+    },
 ]

src/views/flowPool/customerFlowPool/index.vue

@@ -1,34 +1,11 @@
 <!-- 流量池 -->
 <template>
     <div class="container">
-        <div class="head-title">
-            <span>{{ route.meta.title }} </span>
-            <span class="head-title-right">
-            </span>
-        </div>
         <!-- 搜索条件区 -->
         <div class="search-section">
-            <a-form :model="searchForm" ref="formRef" layout="inline">
-                <a-form-item field="label" :label="$t('flowPool.label')">
-                    <a-input v-model="searchForm.label" :placeholder="$t('lotCard.please') + $t('flowPool.label')"
-                        allow-clear />
-                </a-form-item>
-                <a-form-item field="trafficPoolType" :label="$t('flowPool.trafficPoolType')">
-                    <a-select v-model="searchForm.trafficPoolType" style="width: 200px;"
-                        :placeholder="$t('form.cardForm.pleaseSelect') + $t('flowPool.trafficPoolType')">
-                        <a-option v-for=" item in typeList" :key="item.id" :value="item.value">{{ item.label
-                            }}</a-option>
-                    </a-select>
-                </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>
+            <Search :SearchForm="SearchFormList" @query="initData" @reset="reset"></Search>
         </div>
-        <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
+        <a-table row-key="id" :data="tableData" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
             @page-change="evChangePage">
         </a-table>
     </div>
@@ -37,72 +14,44 @@
 <script setup>
 import { onMounted, ref, reactive, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
-import { columns } from "./config";
+import { columns ,SearchFormList} from "./config";
 import { updateUserFloter } from "@/api/path/flowPool.api"
-import { Getdictionary } from '@/mixins/index.js'
-import {useI18n} from 'vue-i18n'
-const {t} = useI18n();
-const formRef = ref()
-const searchForm = ref({
-    "label": "",
-});
-
-const typeList = ref([]);
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
+import { useI18n } from 'vue-i18n'
+
 const trafficList = ref([]);
 const sourceList = ref([]);
-const dataSource = ref([]);
-const route = useRoute();
 const pagination = ref({
     total: 0,
     pageSize: 10,
     current: 1,
 })
 
-
-const intData = async () => {
-    const param = {
-        current: pagination.value.current,
-        size: pagination.value.pageSize,
-        ...searchForm.value,
-    }
-    const { data } = await updateUserFloter(param)
-    dataSource.value = (data || []).map((item, index) => {
-        const trafficPoolStatus = trafficList.value.find(val => val.value == item.status)?.label
-        const sourceName = sourceList.value.find(val => val.value == item.source)?.label
-        const Activated = item.cardAct + '/' + item.iccidCount
-        const HaveBeenUsed =  item.size + item.sizeType
+const processData = (data) => {
+    return (data.records || []).map((item, index) => {
         return {
             ...item,
-            sourceName,// 运营商名称
-            trafficPoolStatus,
-            Activated: Activated,
-            HaveBeenUsed: HaveBeenUsed,
+            sourceName: filterDict(sourceList.value, item.source),// 运营商名称
+            trafficPoolStatus: filterDict(trafficList.value, item.status),
+            Activated: item.cardAct + '/' + item.iccidCount,
+            HaveBeenUsed: item.size + item.sizeType,
         }
     })
-    pagination.value.total = data.total
 }
 
-const evChangePage = (page) => {
-    pagination.value.current = page
-    intData()
-}
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, updateUserFloter, processData)
+
 
-const handleSearch = () => {
-    intData()
-}
-const resetSearch = () => {
-    searchForm.value.label = ''
-    intData()
-}
 
 const handleDictValue = async () => {
-    sourceList.value = await Getdictionary('source')
-    trafficList.value = await Getdictionary('trafficPacketStatus')
+    let dict = await Getdictionary(['source', 'trafficPacketStatus'])
+    sourceList.value = dict[0]
+    trafficList.value = dict[1]
 }
 
 onMounted(async () => {
     await handleDictValue()
-    await intData()
+    await initData()
 })
 </script>
 

src/views/flowPool/index.vue

@@ -3,7 +3,7 @@
   <div class="container">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search :SearchForm="SearchFormList" @query="intData" @reset="reset"></Search>
+      <Search :SearchForm="SearchFormList" @query="initData" @reset="reset"></Search>
     </div>
 
     <div class="audit-btn">
@@ -17,7 +17,7 @@
       </a-button>
     </div>
 
-    <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
+    <a-table row-key="id" :data="tableData" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
       @page-change="evChangePage">
       <template #id="{ record }">
         <!-- 修改 -->
@@ -41,14 +41,13 @@
         <a-tag :color="record.status == 1 ? '#00b42a' : '#f53f3f'">{{ trafficList.find(val => val.value ==
           record.status)?.label }}</a-tag>
       </template>
-      
-
-    </a-table>
 
 
+    </a-table>
 
-    <add v-model:model-value="showAdd" status="1" :typeCurrent="typeCurrent" :record="record" @submit="intData()"></add>
-    <Forewarning v-model:modelValue="visibleForewarning" ref="forewarning" @submit="intData()" />
+    <add v-model:model-value="showAdd" status="1" :typeCurrent="typeCurrent" :record="record" @submit="initData()">
+    </add>
+    <Forewarning v-model:modelValue="visibleForewarning" ref="forewarning" @submit="initData()" />
     <GuideCard v-model:model-value="ShowOpenExport" />
 
   </div>
@@ -63,7 +62,7 @@ import {
   lotCatdList,
 } from "@/api/path/flowPool.api"
 import { useSystemStore } from "@/store/modules/systemStore"
-import { Getdictionary } from '@/mixins/index.js'
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
 import Forewarning from "./components/forewarning.vue";
 import add from './components/add.vue'
 import GuideCard from "./components/GuideCard.vue"
@@ -79,6 +78,7 @@ const state = ref({
     total: 0,
     pageSize: 10,
     current: 1,
+    trafficPoolType: "1",
   },
   sourceList: [],
   trafficList: [],
@@ -89,12 +89,10 @@ const state = ref({
   showAdd: false,
   typeCurrent: 1,
   record: {},
-  dataSource: [],
   forewarning: null
 })
 const {
   role,
-  searchForm,
   pagination,
   typeCurrent,
   sourceList,
@@ -103,42 +101,28 @@ const {
   visibleForewarning,
   showAdd,
   record,
-  dataSource,
   forewarning
 } = toRefs(state.value)
-const { proxy } = getCurrentInstance()
 
-const intData = async (item) => {
-  if (item) {
-    searchForm.value = item
-  }
-  const param = {
-    current: pagination.value.current,
-    size: pagination.value.pageSize,
-    ...searchForm.value,
-    trafficPoolType: '1'
-  }
-  const { data } = await lotCatdList(param)
-  dataSource.value = (data.records || []).map((item, index) => {
-    const sourceName = sourceList.value.find(val => val.value == item.source)?.label
-    const Activated = item.cardAct + '/' + item.iccidCount
-    const HaveBeenUsed = item.size + item.sizeType
+const processData = (data) => {
+  return (data.records || []).map((item, index) => {
     // 换算Gb
-    const afterFirstConversion  = item.dataUsage / 1024
+    const afterFirstConversion = item.dataUsage / 1024
     const afterSecondConversion = afterFirstConversion / 1024;
     const result = Math.ceil(afterSecondConversion * 100) / 100;
     const dataUsage = result.toFixed(2);
     return {
       ...item,
-      sourceName,// 运营商名称
-      Activated: Activated,
-      HaveBeenUsed: HaveBeenUsed,
+      sourceName: filterDict(sourceList.value, item.source),// 运营商名称
+      Activated: item.cardAct + '/' + item.iccidCount,
+      HaveBeenUsed: item.size + item.sizeType,
       dataUsage
     }
   })
-
-  pagination.value.total = data.total
 }
+
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, lotCatdList, processData)
+
 // 删除
 const handleDel = async (id) => {
   const { code } = await deleteTrafficPool({ id })
@@ -147,21 +131,10 @@ const handleDel = async (id) => {
       content: t('setting.deleteSuccess'),
       duration: 2000,
     })
-    intData()
+    initData()
   }
 };
 
-const evChangePage = (page) => {
-  pagination.value.current = page
-  intData()
-}
-
-const reset = (item) => {
-  searchForm.value = item
-  pagination.value.current = 1
-  intData()
-}
-
 // 弹框
 const dictShowModel = (type, data) => {
   typeCurrent.value = type
@@ -175,8 +148,9 @@ const handelForewring = (item) => {
 }
 
 const handleDictValue = async () => {
-  sourceList.value = await Getdictionary('source')
-  trafficList.value = await Getdictionary('trafficPacketStatus')
+  let dict = await Getdictionary(['source','trafficPacketStatus'])
+  sourceList.value = dict[0]
+  trafficList.value = dict[1]
 }
 
 const handelgetCard = (item) => {
@@ -186,7 +160,7 @@ const handelgetCard = (item) => {
 onMounted(async () => {
   await handleDictValue()
 
-  await intData()
+  await initData()
 })
 
 </script>
@@ -231,6 +205,7 @@ silent-expire-alarm {
 .search-section {
   margin-bottom: 20px;
 }
+
 .audit-btn {
   margin-bottom: 10px;
 }

src/views/flowPool/rearFlowPool/index.vue

@@ -3,7 +3,7 @@
   <div class="container">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search :SearchForm="SearchFormList" @query="intData" @reset="reset"></Search>
+      <Search :SearchForm="SearchFormList" @query="initData" @reset="reset"></Search>
     </div>
 
     <div class="audit-btn">
@@ -17,7 +17,7 @@
       </a-button>
     </div>
 
-    <a-table row-key="id" :data="dataSource" :columns="columnsAfter" :pagination="pagination" :scroll="{ x: 'auto' }"
+    <a-table row-key="id" :data="tableData" :columns="columnsAfter" :pagination="pagination" :scroll="{ x: 'auto' }"
       @page-change="evChangePage">
       <template #id="{ record }">
         <!-- 修改 -->
@@ -39,8 +39,8 @@
           record.status)?.label }}</a-tag>
       </template>
     </a-table>
-    <add v-model:modelValue="showAdd" status="2" :typeCurrent="typeCurrent" :record="record" @submit="intData()"></add>
-    <Forewarning v-model:modelValue="visibleForewarning" ref="forewarning" @submit="intData()" />
+    <add v-model:modelValue="showAdd" status="2" :typeCurrent="typeCurrent" :record="record" @submit="initData()"></add>
+    <Forewarning v-model:modelValue="visibleForewarning" ref="forewarning" @submit="initData()" />
     <GuideCard v-model:model-value="ShowOpenExport" />
   </div>
 </template>
@@ -53,20 +53,19 @@ import { deleteTrafficPool, lotCatdList } from "@/api/path/flowPool.api";
 import { useSystemStore } from "@/store/modules/systemStore";
 import add from "../components/add.vue";
 import Forewarning from "../components/forewarning.vue";
-import { Getdictionary } from "@/mixins/index.js";
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
 import { useI18n } from 'vue-i18n'
 import Search from '@/components/Search/index.vue'
 import GuideCard from '../components/GuideCard.vue'
 const { t } = useI18n();
 const systemStore = useSystemStore();
 const state = reactive({
-  dataSource: [],
   pagination: {
     total: 0,
     pageSize: 10,
     current: 1,
+    trafficPoolType: "2",
   },
-  searchForm: {},
   role: systemStore.getRole,
   typeCurrent: 1,
   visibleForewarning: false,
@@ -79,9 +78,7 @@ const state = reactive({
 });
 
 const {
-  dataSource,
   pagination,
-  searchForm,
   role,
   typeCurrent,
   visibleForewarning,
@@ -93,43 +90,27 @@ const {
   ShowOpenExport
 } = toRefs(state);
 
-const intData = async (item) => {
-  if (item) {
-    searchForm.value = item
-  }
-  const param = {
-    current: pagination.value.current,
-    size: pagination.value.pageSize,
-    ...searchForm.value,
-    trafficPoolType: "2",
-  };
-  const { data } = await lotCatdList(param);
-  dataSource.value = (data.records || []).map((item, index) => {
-    const trafficPoolStatus = trafficList.value.find(
-      (val) => val.value == item.status
-    )?.label;
-    const sourceName = sourceList.value.find(
-      (val) => val.value == item.source
-    )?.label;
-    const Activated = item.cardAct + "/" + item.iccidCount;
-    const HaveBeenUsed = item.size + item.sizeType;
+
+const processData = (data) => {
+  return (data.records || []).map((item, index) => {
     // 换算Gb
-    const afterFirstConversion  = item.dataUsage / 1024
+    const afterFirstConversion = item.dataUsage / 1024
     const afterSecondConversion = afterFirstConversion / 1024;
     const result = Math.ceil(afterSecondConversion * 100) / 100;
     const dataUsage = result.toFixed(2);
     return {
       ...item,
-      sourceName, // 运营商名称
-      Activated: Activated,
-      HaveBeenUsed: HaveBeenUsed,
-      trafficPoolStatus,
+      sourceName: filterDict(sourceList.value, item.source), // 运营商名称
+      Activated: item.cardAct + "/" + item.iccidCount,
+      HaveBeenUsed: item.size + item.sizeType,
+      trafficPoolStatus: filterDict(trafficList.value, item.status),
       sizeNum: item.size + '/' + item.sizeType,
       dataUsage
     };
-  });
-  pagination.value.total = data.total;
-};
+  })
+}
+
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, lotCatdList, processData)
 
 // 删除
 const handleDel = async (id) => {
@@ -139,21 +120,10 @@ const handleDel = async (id) => {
       content: t('setting.deleteSuccess'),
       duration: 2000,
     });
-    intData();
+    initData();
   }
 };
 
-const evChangePage = (page) => {
-  pagination.value.current = page;
-  intData();
-};
-
-const reset = (item) => {
-  searchForm.value = item
-  pagination.value.current = 1
-  intData()
-}
-
 // 弹框
 const dictShowModel = (type, data) => {
   typeCurrent.value = type;
@@ -177,7 +147,7 @@ const handelgetCard = (item) => {
 
 onMounted(async () => {
   await handleDictValue();
-  await intData();
+  await initData();
 });
 </script>
 

src/views/lotCard/cardList/index.vue

@@ -3,16 +3,16 @@
   <div class="container">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search :SearchForm="SearchForm" @query="intData" @reset="reset" />
+      <Search :SearchForm="SearchForm" @query="initData" @reset="reset" />
     </div>
 
     <div class="SynchronousData">
-      <div class="title">因运营商的流量消耗数据存在延时，查看实时数据请点击【同步最新流量】按钮      </div>
+      <div class="title">因运营商的流量消耗数据存在延时，查看实时数据请点击【同步最新流量】按钮 </div>
       <!-- 同步数据 -->
       <a-button type="primary" @click="syncData">同步数据</a-button>
     </div>
 
-    <a-table row-key="iccid" :data="dataSource" :columns="columnsData" :pagination="false" :scroll="{ x: 'auto' }"
+    <a-table row-key="iccid" :data="tableData" :columns="columnsData" :pagination="false" :scroll="{ x: 'auto' }"
       :loading="loading">
       <template #iccidStatus="{ record }">
         <a-tag color="#7bc616" v-if="record.iccidStatus == '正常'">{{ record.iccidStatus }}</a-tag>
@@ -34,7 +34,7 @@
         @change="evChangePage" @page-size-change="pagesChange" />
     </div>
     <!-- 查看流量消耗 -->
-    <trafficUseDialog ref="trafficUseDialogRef" @submit="intData()" />
+    <trafficUseDialog ref="trafficUseDialogRef" @submit="initData()" />
     <Add v-model="showAdd"></Add>
 
   </div>
@@ -45,7 +45,7 @@ import { onMounted, ref, getCurrentInstance, h } from "vue";
 import { columns, SearchForm } from "./config";
 import { cardInfoList, syncFlowData } from "@/api/path/lotCard.api"
 import trafficUseDialog from "./trafficUseDialog.vue";
-import { Getdictionary } from '@/mixins/index.js'
+import { Getdictionary, tableFunction } from '@/mixins/index.js'
 import { sanitizeObject } from '@/utils/utils'
 import Add from './add.vue'
 import Search from '@/components/Search/index.vue'
@@ -55,8 +55,6 @@ import { useI18n } from 'vue-i18n'
 const { t } = useI18n();
 const statusList = ref([]);
 const serviceList = ref([]);
-const dataSource = ref([]);
-const SearchFormList = ref({});
 const pagination = ref({
   total: 0,
   pageSize: 10,
@@ -69,26 +67,14 @@ const loading = ref(false)
 const trafficUseDialogRef = ref()
 
 
-const intData = async (item) => {
-  if (item) {
-    SearchFormList.value = item
-  }
-  const param = {
-    current: pagination.value.current,
-    size: pagination.value.pageSize,
-    ...SearchFormList.value
-  }
-  const { data } = await cardInfoList(param)
-  dataSource.value = (data.records || []).map((item, index) => {
-    const payType = item.payType == 0 ? 'Prepay' : 'Postpay';
+const processData = (data) => {
+  return (data.records || []).map((item, index) => {
     const mergedItem = { ...item, ...item.Info };
     const sanitizedItem = sanitizeObject(mergedItem);
     return {
       ...sanitizedItem,
-      payType: payType,
-      periodOfSilence: item.periodOfSilence + '/月',
-      usedBg: '0',
-      usableBg: '0',
+      payType: item.payType == 0 ? 'Prepay' : 'Postpay',
+      periodOfSilence: item.periodOfSilence || '---' + '/月',
       DatapackageStatus: item.dataPackage[0]?.status,
       dataUsage: item.dataPackage[0]?.dataUsage ? item.dataPackage[0]?.dataUsage + '/MB' : '0' + '/MB',
       dataTotal: item.dataPackage[0]?.dataTotal ? item.dataPackage[0]?.dataTotal + '/MB' : '0' + '/MB',
@@ -96,14 +82,10 @@ const intData = async (item) => {
       productName: item.dataPackage[0]?.productName
     }
   })
-  pagination.value.total = data.total
 }
 
-const reset = (item) => {
-  pagination.value.current = 1
-  SearchFormList.value = item
-  intData()
-}
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, cardInfoList, processData)
+
 
 // 详情
 const handletrafficUseDialog = (data) => {
@@ -111,20 +93,16 @@ const handletrafficUseDialog = (data) => {
 }
 
 
-const evChangePage = (page) => {
-  pagination.value.current = page
-  intData()
-}
-
 const pagesChange = (size) => {
   pagination.value.pageSize = size
-  intData()
+  initData()
 }
 
 // 获取字典
 const handleDictValue = async () => {
-  statusList.value = await Getdictionary('mainCardStatus')
-  serviceList.value = await Getdictionary('activationPackageMethod')
+  let dict = await Getdictionary(['mainCardStatus', 'activationPackageMethod'])
+  statusList.value = dict[0]
+  serviceList.value = dict[1]
 }
 
 // 同步数据
@@ -134,18 +112,18 @@ const syncData = async () => {
     list.push(item.iccid,)
   })
   loading.value = true
-  let res = await syncFlowData({iccid:list})
-  if(res.code===200){
+  let res = await syncFlowData({ iccid: list })
+  if (res.code === 200) {
     Message.success('同步成功')
     loading.value = false
-    intData()
+    initData()
   }
 }
 
 
 onMounted(async () => {
   await handleDictValue()
-  await intData()
+  await initData()
   if (userType.value != 1) {
     columnsData.value = columns.filter(res => res.dataIndex !== 'productName'); // 过滤掉不满足条件的项
   } else {
@@ -167,13 +145,14 @@ onMounted(async () => {
   margin-bottom: 20px;
 }
 
-.SynchronousData{
+.SynchronousData {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
-  .title{
-     font-size: 16px;
-     color: #d1402f;
+
+  .title {
+    font-size: 16px;
+    color: #d1402f;
   }
 }
 

src/views/order/BuyCard/index.vue

@@ -3,7 +3,7 @@
   <div class="silent-expire-alarm">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search :SearchForm="SearchFormBuyOrder" @query="intData" @reset="reset" />
+      <Search :SearchForm="SearchFormBuyOrder" @query="initData" @reset="reset" />
     </div>
     <div class="audit-btn" v-if="userType == 2">
       <a-button @click="showAudit = true" type="text">
@@ -51,7 +51,7 @@
             $t('order.UploadAmount') }}</a-button>
           <a-button @click="openEndDate(record)" type="text" v-if="userType == 1 && record.moderationStatus == 2">{{
             $t('order.ChangeValidity') }}</a-button>
-            <!-- <a-button @click="openEndDate(record)" type="text" v-if="userType == 2 && record.moderationStatus == 2">{{
+          <!-- <a-button @click="openEndDate(record)" type="text" v-if="userType == 2 && record.moderationStatus == 2">{{
             $t('order.ChangeTariff') }}</a-button> -->
           <a-button @click="openDetail(record)" type="text">{{ $t('order.view') }}</a-button>
         </div>
@@ -95,10 +95,10 @@
       </a-form>
     </a-modal>
 
-    <Card v-model:modelValue="showAudit" @submit="intData()" />
-    <Status v-model:modelValue="showStatus" @submit="intData()" :FormDataList="FormDataList" />
-    <Detaile v-model:modelValue="showDetail" @submit="intData()" :FormDataList="FormDataList" />
-    <returnCard v-model:modelValue="showReturn" :ReturnData="ReturnData"   @submit="intData()"></returnCard>
+    <Card v-model:modelValue="showAudit" @submit="initData()" />
+    <Status v-model:modelValue="showStatus" @submit="initData()" :FormDataList="FormDataList" />
+    <Detaile v-model:modelValue="showDetail" @submit="initData()" :FormDataList="FormDataList" />
+    <returnCard v-model:modelValue="showReturn" :ReturnData="ReturnData" @submit="initData()"></returnCard>
   </div>
 </template>
 
@@ -108,7 +108,6 @@ import { Message } from '@arco-design/web-vue';
 import { purchaseOrderList } from '@/api/path/purchase';
 import { tariiffManageDate } from '@/api/path/tariffManagement.api'
 import { UploadOrderCardContract, SettingPricing } from '@/api/path/order'
-import { Getdictionary } from '@/mixins/index.js'
 import Upload from "@/components/upload/index.vue";
 import Card from './Card.vue'
 import Status from './status.vue'
@@ -116,13 +115,13 @@ import Detaile from './detaile.vue'
 import Search from '@/components/Search/index.vue'
 import returnCard from './returnCard.vue'
 import { useI18n } from 'vue-i18n'
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
 const { t } = useI18n();
-import { SearchFormBuyOrder,BuyOrdercolumns } from '../config'
+import { SearchFormBuyOrder, BuyOrdercolumns } from '../config'
 // 数据层
 const state = ref({
   userName: localStorage.getItem('user_login_information')?.username,
   userType: JSON.parse(localStorage.getItem('user_login_information'))?.userType, // 1平台 2用户
-  tableData: [],
   currentIndex: null,
   FormDataList: {},
   pageData: {
@@ -150,13 +149,12 @@ const state = ref({
     id: '',
     endDate: ''
   },
-  SearchForm: {},
-  orderTypeStatus: []
+  orderTypeStatus: [],
+  CardType:[]
 });
 
 const {
   userType,
-  tableData,
   FormDataList,
   pageData,
   showAudit,
@@ -170,55 +168,29 @@ const {
   formPreing,
   showEndDate,
   formEndDate,
-  SearchForm,
+  CardType,
   orderTypeStatus
 } = toRefs(state.value);
 
+const processData = async (data) => {
 
-
-// 订单列表
-const intData = async (item) => {
-  if (item) {
-    SearchForm.value = item
-  }
-  const param = {
-    current: pageData.value.current,
-    size: pageData.value.size,
-    ...SearchForm.value
-  }
-  const simTypeList = await Getdictionary('cardType')
-  let sourceList = await Getdictionary('source')
-  orderTypeStatus.value = await Getdictionary('orderType')
-  purchaseOrderList(param).then(res => {
-    tableData.value = (res.data.records || []).map((item, key) => {
-      const sourceName = sourceList.find(val => val.value == item.source)?.label
-      const cardType = simTypeList.find(val => val.value == item.simType)?.label
-      return {
-        ...item,
-        index: key + 1,
-        sourceName,
-        cardType
-      }
-    });
-    pageData.value.total = res.data.total;
+  return (data.records || []).map((item, key) => {
+    return {
+      ...item,
+      index: key + 1,
+      sourceName: item.source,
+      cardType: filterDict(CardType.value, item.simType)
+    }
   })
 }
 
-const reset = (item) => {
-  SearchForm.value = item,
-  pageData.value.current = 1,
-  intData()
-}
+const { tableData, evChangePage, initData, reset } = tableFunction(pageData.value, purchaseOrderList, processData)
+
 // 用户退订
 const adminCancel = (data) => {
   ReturnData.value = data
   showReturn.value = true
 }
-// 分页
-const evChangePage = (page) => {
-  pageData.value.current = page
-  intData()
-}
 
 // 订单审核
 const statusOrder = (items) => {
@@ -247,7 +219,7 @@ const handleBeforeOk = () => {
     UploadOrderCardContract(formContract.value).then(res => {
       resolve(res)
       Message.success(res.message)
-      intData();
+      initData();
     }).catch(error => {
       reject(error)
     })
@@ -278,7 +250,7 @@ const handelPriceing = async () => {
   if (res.code === 200) {
     Message.success(res.message)
     closeModal(showPrning.value, formPreing.value)
-    intData()
+    initData()
   }
 }
 
@@ -293,12 +265,15 @@ const handelEndDate = async () => {
   if (res.code === 200) {
     Message.success(res.message)
     closeModal(showEndDate.value, formEndDate.value)
-    intData();
+    initData();
   }
 }
 
-onMounted(() => {
-  intData();
+onMounted(async () => {
+  let dict = await Getdictionary(['cardType', 'orderType'])
+  orderTypeStatus.value = dict[1]
+  CardType.value = dict[0]
+  initData();
 })
 </script>
 

src/views/tariffManagement/index.vue

@@ -3,7 +3,7 @@
   <div class="container">
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <Search :SearchForm="trafficSearchFrom" @query="intData" @reset="reset" />
+      <Search :SearchForm="trafficSearchFrom" @query="initData" @reset="reset" />
     </div>
     <div class="audit-btn">
       <a-button type="text" @click="dictShowModel(1, false)" v-if="role.getRole == 1">
@@ -13,14 +13,15 @@
         <template #default>{{ $t('form.Add') }}</template>
       </a-button>
     </div>
-    <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
+    <a-table row-key="id" :data="tableData" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
       @page-change="evChangePage">
       <template #id="{ record }">
         <!-- 修改 -->
         <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(2, record)"
           v-if="role.getRole == 1">编辑</a>
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="meal(record)" v-if="role.getRole == 1">{{
-          $t('tariffManagement.SetMeal') }}</a>
+        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="meal(record)"
+          v-if="role.getRole == 1">{{
+            $t('tariffManagement.SetMeal') }}</a>
         <!-- 删除 -->
         <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
           @ok="handleDel(record.id)">
@@ -56,8 +57,8 @@
     </a-modal>
 
 
-    <Meal v-model:model-value="modealShow" :traffIds="ids" @submit="intData()" />
-    <Add v-model:model-value="visible" :type-index="typeCurrent" ref="addDetaile" @submit="intData()"></Add>
+    <Meal v-model:model-value="modealShow" :traffIds="ids" @submit="initData()" />
+    <Add v-model:model-value="visible" :type-index="typeCurrent" ref="addDetaile" @submit="initData()"></Add>
   </div>
 </template>
 
@@ -65,8 +66,8 @@
 import { onMounted, ref, toRefs, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
 import { columns, planColumns, trafficSearchFrom } from "./config";
-import { deleteTariff, tariffList ,UpdateTariffName} from "@/api/path/tariffManagement.api"
-import { Getdictionary } from '@/mixins/index.js'
+import { deleteTariff, tariffList, UpdateTariffName } from "@/api/path/tariffManagement.api"
+import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
 import { useSystemStore } from '@/store/modules/systemStore'
 import Meal from './Management/meal.vue'
 import Add from './Management/add.vue'
@@ -78,9 +79,7 @@ const role = useSystemStore()
 const { proxy } = getCurrentInstance()
 const route = useRoute();
 const state = ref({
-  searchForm: {},
   currency: [],
-  dataSource: [],
   pagination: {
     total: 0,
     pageSize: 10,
@@ -108,9 +107,7 @@ const state = ref({
   }
 })
 const {
-  searchForm,
   currency,
-  dataSource,
   pagination,
   planList,
   visible,
@@ -129,54 +126,29 @@ const {
 
 const addDetaile = ref(null)
 
-
-const intData = async (item) => {
-  if (item) {
-    searchForm.value = item
-  }
-  const param = {
-    current: pagination.value.current,
-    size: pagination.value.pageSize,
-    ...searchForm.value,
-  }
-  const { data } = await tariffList(param)
-  
-  dataSource.value = (data.records || []).map((item, index) => {
-    const sourceName = sourceList.value.find(val => val.value == item.source)?.label
-    const billingCycleName = cycleist.value.find(val => val.value == item.billingCycle)?.label
-    const Activated = item.trafficBilling + item.trafficBillingType
-    const bagSize = item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee
-    const billingMethodName = methodList.value.find(val => val.value == item.billingMethod)?.label
+const processData = (data) => {
+  return (data.records || []).map((item, index) => {
+    const sourceName = filterDict(sourceList.value, item.source)
+    const billingCycleName = filterDict(cycleist.value, item.billingCycle)
+    const billingMethodName = filterDict(methodList.value, item.billingMethod)
     delete item.children
-    let pricingName;
-
-    if (item.billingMethod == 1) {
-      pricingName = item.trafficBillingAmount + '/' + item.currency
-    } else if (item.billingMethod == 2) {
-      pricingName = item.pricing + '/' + item.currency
-    }
     return {
       ...item,
       sourceName,
-      pricingName,
+      pricingName: item.billingMethod == 1 ? item.trafficBillingAmount + '/' + item.currency : item.pricing + '/' + item.currency,
       billingCycleName,
-      Activated: Activated,
+      Activated: item.trafficBilling + item.trafficBillingType,
       status: "正常",
-      bagSize,
+      bagSize: item.pricing + '/' + item.mrcAmount + '/' + item.networkAccessFee,
       billingMethodName,
       Number: index + 1
     }
   })
-  pagination.value.total = data.total
 }
 
-const reset = (item) => {
-  searchForm.value = item
-  pagination.value.current = 1
-  intData()
-}
+const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, tariffList, processData)
 
-const handleCancelTarriName = ()=>{
+const handleCancelTarriName = () => {
   putLabel.value = false
   Form.value.id = ''
   Form.value.name = ''
@@ -190,15 +162,10 @@ const handleDel = async (id) => {
       content: t('setting.deleteSuccess'),
       duration: 2000,
     })
-    intData()
+    initData()
   }
 };
 
-const evChangePage = (page) => {
-  pagination.value.current = page
-  intData()
-}
-
 // 弹框
 const dictShowModel = (type, data) => {
   addDetaile.value.detaile(data)
@@ -223,10 +190,11 @@ const handleSubmitPlan = () => {
 
 
 const handleDictValue = async () => {
-  sourceList.value = await Getdictionary('source')
-  cycleist.value = await Getdictionary('Billingcycle')
-  currency.value = await Getdictionary('currencyType')
-  methodList.value = await Getdictionary('billingMethod')
+  let dict = await Getdictionary(['source', 'Billingcycle', 'currencyType', 'billingMethod'])
+  sourceList.value = dict[0]
+  cycleist.value = dict[1]
+  currency.value = dict[2]
+  methodList.value = dict[3]
 }
 
 const meal = (data) => {
@@ -237,7 +205,7 @@ const meal = (data) => {
 
 onMounted(async () => {
   await handleDictValue()
-  await intData()
+  await initData()
 })