增加后流量池模块化

src/views/flowPool/customerFlowPool/index.vue

@@ -45,7 +45,6 @@ import { useRoute } from "vue-router";
 import { columns } from "./config";
 import { trafficPoolList } from "@/api/path/flowPool.api"
 import { useSystemStore } from "@/store/modules/systemStore"
-
 import {Getdictionary} from '@/mixins/index.js'
 const systemStore = useSystemStore()
 const role = ref(systemStore.getRole)
@@ -68,16 +67,6 @@ const pagination = ref({
 })
 
 
-
-
-
-const rowSelection = reactive({
-    type: 'checkbox',
-    showCheckedAll: true,
-    onlyCurrent: false,
-});
-const selectedKeys = ref([])
-
 const intData = async () => {
     const param = {
         current: pagination.value.current,
@@ -89,29 +78,16 @@ const intData = async () => {
         const trafficPoolType = typeList.value.find(val => val.value == item.trafficPoolType)?.label
         const trafficPoolStatus = trafficList.value.find(val => val.value == item.status)?.label
         const sourceName = sourceList.value.find(val => val.value == item.source)?.label
-        console.log(item, "item-------------------------");
-
         return {
             ...item,
             sourceName,// 运营商名称
             trafficPoolType,
             trafficPoolStatus,
-            poolNumber: "NR0" + (index + 1),
-            cardRariffName: "监控1G月租",
-            cardFlow: "1G/月",
-            cardNum: "11/100",
-            UsedMonth: "1.00G",
-            surplusFlow: "99.0G",
-            totalFlow: "100.0G",
-            exceededFlow: "--",
         }
     })
     pagination.value.total = data.total
 }
 
-
-
-
 const evChangePage = (page) => {
     pagination.value.current = page
     intData()
@@ -125,22 +101,15 @@ const resetSearch = () => {
     intData()
 }
 
-
-// --------------------------------------------------------
-// 获取字典
 const handleDictValue = async () => {
   sourceList.value = await Getdictionary('source')
-  trafficList.value = await Getdictionary('trafficPacketStatus')
-  typeList.value = await Getdictionary('trafficPoolType')
-}
-
-
 
+}
 
 
-onMounted(() => {
-    handleDictValue()
-    intData()
+onMounted(async () => {
+    await handleDictValue()
+    await intData()
 })
 
 

src/views/flowPool/index.vue

@@ -79,6 +79,7 @@ import {
   lotCatdList,
 } from "@/api/path/flowPool.api"
 import { useSystemStore } from "@/store/modules/systemStore"
+import {Getdictionary} from '@/mixins/index.js'
 import Forewarning from "./components/forewarning.vue";
 import add from './components/add.vue'
 import openExport from "./components/openExport.vue"
@@ -135,6 +136,7 @@ const intData = async () => {
     // const trafficPoolType = typeList.value.find(val => val.value == item.trafficPoolType)?.label
     const trafficPoolStatus = trafficList.value.find(val => val.value == item.status)?.label
     const sourceName = sourceList.value.find(val => val.value == item.source)?.label
+    console.log(sourceName);
     const Activated = 0 + '/' + item.iccids?.length
     const HaveBeenUsed = 0 + '/' + item.size + item.sizeType
     return {
@@ -184,7 +186,13 @@ const handelForewring = (item) => {
   visibleForewarning.value = true
 }
 
+const handleDictValue = async () => {
+  sourceList.value = await Getdictionary('source')
+}
+
 onMounted(async () => {
+  await handleDictValue()
+
   await intData()
 })
 

src/views/flowPool/rearFlowPool/index.vue

@@ -1,39 +1,54 @@
 <!-- 后流量池 -->
 <template>
   <div class="container">
-    <div class="head-title">
-      <span>{{ route.meta.title }} </span>
-      <span class="head-title-right">
-                <!-- <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
-                    :cancel-text="$t('form.Cancel')" @ok="handleUnsubscribeDialog(record)">
-                    <a-button type="primary">{{ $t('lotCard.titleCancelOrder') }}</a-button>
-                </a-popconfirm> -->
-            </span>
-    </div>
     <!-- 搜索条件区 -->
     <div class="search-section">
       <a-form :model="searchForm" 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-input
+            v-model="searchForm.label"
+            :placeholder="$t('lotCard.please') + $t('flowPool.label')"
+            allow-clear
+          />
         </a-form-item>
         <a-form-item field="label" :label="$t('flowPool.status')">
-          <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.flowPoolStatus')">
-            <a-option v-for="item of trafficList" :value="item.id" :label="item.label"/>
+          <a-select
+            v-model="value"
+            :style="{ width: '240px' }"
+            :placeholder="$t('flowPool.flowPoolStatus')"
+          >
+            <a-option
+              v-for="item of trafficList"
+              :value="item.id"
+              :label="item.label"
+            />
           </a-select>
         </a-form-item>
         <a-form-item field="label" :label="$t('flowPool.operator')">
-          <a-select v-model="value" :style="{width:'240px'}" :placeholder="$t('flowPool.operatorName')">
-            <a-option v-for="item of sourceList" :value="item.id" :label="item.label"/>
+          <a-select
+            v-model="value"
+            :style="{ width: '240px' }"
+            :placeholder="$t('flowPool.operatorName')"
+          >
+            <a-option
+              v-for="item of sourceList"
+              :value="item.id"
+              :label="item.label"
+            />
           </a-select>
         </a-form-item>
         <a-form-item field="label" :label="$t('flowPool.start_time')">
-          <a-date-picker style="width: 200px;" :placeholder="$t('flowPool.start_timeName')"/>
+          <a-date-picker
+            style="width: 200px"
+            :placeholder="$t('flowPool.start_timeName')"
+          />
         </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-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>
@@ -42,273 +57,196 @@
     <div class="audit-btn">
       <a-button @click="dictShowModel(1, null)" type="text" v-if="role == 1">
         <template #icon>
-          <icon-plus-circle/>
+          <icon-plus-circle />
         </template>
         <template #default>
-          {{ $t('form.Add') }}
+          {{ $t("form.Add") }}
         </template>
       </a-button>
     </div>
 
-    <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
-             @page-change="evChangePage">
+    <a-table
+      row-key="id"
+      :data="dataSource"
+      :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 == 1">{{
-            $t('form.Edit')
-          }}</a>
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handelForewring(record)"
-           v-if="role == 1">预警</a>
+        <a
+          class="a-link"
+          href="javascript:;"
+          style="margin-right: 1rem"
+          @click="dictShowModel(2, record)"
+          v-if="role == 1"
+          >{{ $t("form.Edit") }}</a
+        >
+        <a
+          class="a-link"
+          href="javascript:;"
+          style="margin-right: 1rem"
+          @click="handelForewring(record)"
+          v-if="role == 1"
+          >预警</a
+        >
         <!-- 删除 -->
-        <a-popconfirm :content="$t('form.Delete')" :ok-text="$t('form.Confirm')"
-                      :cancel-text="$t('form.Cancel')" @ok="handleDel(record.id)" v-if="role == 1">
+        <a-popconfirm
+          :content="$t('form.Delete')"
+          :ok-text="$t('form.Confirm')"
+          :cancel-text="$t('form.Cancel')"
+          @ok="handleDel(record.id)"
+          v-if="role == 1"
+        >
           <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{
-              $t('form.Delete')
-            }}</a>
+            $t("form.Delete")
+          }}</a>
         </a-popconfirm>
         <!-- 导卡 -->
-<!--        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(3, record)">{{-->
-<!--            $t('flowPool.exportCard')-->
-<!--          }}</a>-->
+        <!--        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="dictShowModel(3, record)">{{-->
+        <!--            $t('flowPool.exportCard')-->
+        <!--          }}</a>-->
       </template>
-
     </a-table>
-    <add v-model:modelValue="showAdd" status="2" :typeCurrent="typeCurrent" :record="record" @submit="intData()"></add>
-    <Forewarning v-model:modelValue="visibleForewarning" :FormDataList="FormDataList" @submit="intData()"/>
-    <a-modal v-model:visible="openExport" @ok="handleOk" @cancel="handleCancel" width="1000px">
-      <template #title>
-        批量导入
-      </template>
-      <div class="export-box">
-        <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-title">标题</div>
-              <div class="item-txt-text">联通流量卡</div>
-            </div>
-            <div class="item-txt">
-              <div class="item-txt-title">标题</div>
-              <div class="item-txt-text">联通流量卡</div>
-            </div>
-            <div class="item-txt">
-              <div class="item-txt-title"></div>
-              <div class="item-txt-text">
-                <a-upload action="/">
-                  <template #upload-button>
-                    <a-button type="primary">导入</a-button>
-                  </template>
-                </a-upload>
-              </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">
-            <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>
-          </div>
-        </div>
-      </div>
-    </a-modal>
+    <add
+      v-model:modelValue="showAdd"
+      status="2"
+      :typeCurrent="typeCurrent"
+      :record="record"
+      @submit="intData()"
+    ></add>
+    <Forewarning
+      v-model:modelValue="visibleForewarning"
+      :FormDataList="FormDataList"
+      @submit="intData()"
+    />
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref, reactive, getCurrentInstance, nextTick, watch} from "vue";
-import {useRoute} from "vue-router";
-import {columns} from "../config";
-import {Message, Notification} from '@arco-design/web-vue'
-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'
-const systemStore = useSystemStore()
-const role = ref(systemStore.getRole)
-const typeCurrent = ref(1)
-const visibleForewarning = ref(false)
-const FormDataList = ref({})
-const record = ref({})
-const {proxy} = getCurrentInstance()
-const searchForm = ref({
-  "label": "",
+import { onMounted, reactive, toRefs } from "vue";
+import { columns } from "../config";
+import { Message } from "@arco-design/web-vue";
+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";
+const systemStore = useSystemStore();
+const state = reactive({
+  dataSource: [],
+  pagination: {
+    total: 0,
+    pageSize: 10,
+    current: 1,
+  },
+  searchForm: {
+    label: "",
+  },
+  role: systemStore.getRole,
+  typeCurrent: 1,
+  visibleForewarning: false,
+  FormDataList: {},
+  record: {},
+  sourceList: [],
+  trafficList: [],
+  showAdd: false,
 });
 
-const dataSource = ref([]);
-const route = useRoute();
-const pagination = ref({
-  total: 0,
-  pageSize: 10,
-  current: 1,
-})
-
+const {
+  dataSource,
+  pagination,
+  searchForm,
+  role,
+  typeCurrent,
+  visibleForewarning,
+  FormDataList,
+  record,
+  sourceList,
+  trafficList,
+  showAdd,
+} = toRefs(state);
 
 const intData = async () => {
   const param = {
     current: pagination.value.current,
     size: pagination.value.pageSize,
     ...searchForm.value,
-    trafficPoolType: '2',
-    type:2
-  }
-  const {data} = await lotCatdList(param)
+    trafficPoolType: "2",
+    type: 2,
+  };
+  const { data } = await lotCatdList(param);
   dataSource.value = (data.records || []).map((item, index) => {
     // const trafficPoolType = typeList.value.find(val => val.value == item.trafficPoolType)?.label
-    const trafficPoolStatus = trafficList.value.find(val => val.value == item.status)?.label
-    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 trafficPoolStatus = trafficList.value.find(
+      (val) => val.value == item.status
+    )?.label;
+    const sourceName = sourceList.value.find(
+      (val) => val.value == item.source
+    )?.label;
+    const Activated = 0 + "/" + item.iccids?.length;
+    const HaveBeenUsed = 0 + "/" + item.size + item.sizeType;
     return {
       ...item,
-      sourceName,// 运营商名称
+      sourceName, // 运营商名称
       // trafficPoolType,
-      Activated:Activated,
-      HaveBeenUsed:HaveBeenUsed,
+      Activated: Activated,
+      HaveBeenUsed: HaveBeenUsed,
       trafficPoolStatus,
-    }
-  })
-  pagination.value.total = data.total
-}
-
+    };
+  });
+  pagination.value.total = data.total;
+};
 
 // 删除
 const handleDel = async (id) => {
-  const {code} = await deleteTrafficPool({id})
+  const { code } = await deleteTrafficPool({ id });
   if (code == 200) {
     Message.success({
       content: "删除成功！",
       duration: 2000,
-    })
-    intData()
+    });
+    intData();
   }
 };
 
 const evChangePage = (page) => {
-  pagination.value.current = page
-  intData()
-}
+  pagination.value.current = page;
+  intData();
+};
 
 const handleSearch = () => {
-  intData()
-}
+  intData();
+};
 const resetSearch = () => {
-  searchForm.value.label = ''
-  intData()
-}
-const sourceList = ref([])
-const trafficList = ref([])
-const showAdd = ref(false)
-// 详情---------------------------
-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
-}]);
-
+  searchForm.value.label = "";
+  intData();
+};
 
 // 弹框
 const dictShowModel = (type, data) => {
-  typeCurrent.value = type
-  record.value = data
-  showAdd.value = true
-}
-
-const handelForewring = (item)=>{
-  FormDataList.value = item
-  visibleForewarning.value = true
-}
+  typeCurrent.value = type;
+  record.value = data;
+  showAdd.value = true;
+};
 
-onMounted(async () => {
-  await intData()
-})
+const handelForewring = (item) => {
+  FormDataList.value = item;
+  visibleForewarning.value = true;
+};
 
+const handleDictValue = async () => {
+  sourceList.value = await Getdictionary("source");
+};
 
+onMounted(async () => {
+  await handleDictValue();
+  await intData();
+});
 </script>
 
 <style scoped lang="less">
-.m-r-10 {
-  margin-right: 10px;
-}
-
-.head-title-right {
-}
-
 .search-section {
   margin-top: 20px;
   margin-bottom: 20px;
@@ -349,7 +287,6 @@ silent-expire-alarm {
   margin-bottom: 10px;
 }
 
-
 .echarts-box {
   // width: 100%;
   display: flex;
@@ -378,15 +315,13 @@ silent-expire-alarm {
     margin-right: 10px;
     width: 4px;
     height: 16px;
-    background: #1B5DF8;
+    background: #1b5df8;
     font-size: 14px;
-    color: #6C6E70;
+    color: #6c6e70;
     font-family: PingFang SC;
-
   }
 }
 
-
 .export-box {
   .export-box-item {
     .box-item-title {
@@ -403,8 +338,7 @@ silent-expire-alarm {
         margin-right: 10px;
         width: 4px;
         height: 16px;
-        background: #1B5DF8;
-
+        background: #1b5df8;
       }
     }
 
@@ -426,8 +360,7 @@ silent-expire-alarm {
           font-weight: 400;
           line-height: 22px;
           text-align: left;
-          color: #1B5DF8;
-
+          color: #1b5df8;
         }
       }
 

src/views/tariffManagement/Management/add.vue

@@ -120,6 +120,7 @@ import { getSTSInfoList } from '@/api/path/system.api'
 import { updateTariff, addTariff } from "@/api/path/tariffManagement.api"
 import { Getdictionary } from '@/mixins/index.js'
 import { Message } from '@arco-design/web-vue'
+
 const props = defineProps({
     modelValue: {
         type: Boolean,