暂存

src/i18n/zh/lotCard.js

@@ -43,4 +43,7 @@ export default {
     price:"订单价格",
     deductionModel:"套餐收费方式",
 
+    // 弹窗流量包
+    titleTraffic:"查询卡",
+
 }  

src/views/lotCard/packageMange/index.vue

@@ -1,52 +1,53 @@
 <template>
-    <div class="container">
-        <div class="head-title">
-          <span>{{  route.meta.title }} </span>
-      </div>
-        
-      <a-table  :data="dataSource" :columns="columns"   :scroll="{ x: 'auto' }" @page-change="evChangePage" @page-size-change="evChangePageSize"  > 
-        <template #id="{ record }">
-          <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="evEdit(record)">编辑</a>
+  <div class="container">
+    <div class="head-title">
+      <span>{{ route.meta.title }} </span>
+    </div>
+
+    <a-table :data="dataSource" :columns="columns" :scroll="{ x: 'auto' }" @page-change="evChangePage"
+      @page-size-change="evChangePageSize">
+      <template #id="{ record }">
+        <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="evEdit(record)">编辑</a>
           <a-popconfirm content="确认删除该信息?" ok-text="确定" cancel-text="取消" @ok="evDelete(record.id)">
             <a href="javascript:;" class="a-link">删除</a>
           </a-popconfirm> -->
-        </template>
+      </template>
 
-      </a-table>
+    </a-table>
   </div>
-  </template>
-  
-  <script setup>
-  import { onMounted, ref, h } from "vue";
-  import { useRoute } from "vue-router";
-  import { columns } from "./config";
-  import { Message, Notification } from '@arco-design/web-vue'
-  import { packageTariffPlan } from "@/api/path/lotCard.api"
-  const formData = ref({
-    username: '',
-    "iccid": "89852342022040149139",
-    "hImsi": "454120387374989",
-  });
+</template>
+
+<script setup>
+import { onMounted, ref, h } from "vue";
+import { useRoute } from "vue-router";
+import { columns } from "./config";
+import { Message, Notification } from '@arco-design/web-vue'
+import { packageTariffPlan } from "@/api/path/lotCard.api"
+const formData = ref({
+  username: '',
+  "iccid": "89852342022040149139",
+  "hImsi": "454120387374989",
+});
 
-  const dataSource = ref([]);
-  const route = useRoute();
-  const pagination = ref({
+const dataSource = ref([]);
+const route = useRoute();
+const pagination = ref({
   total: 0,
   pageSize: 10,
   current: 1,
-})  
-  
-  const intData = async () => {
+})
+
+const intData = async () => {
   const param = {
-    current:  pagination.value.current,
-    size:  pagination.value.pageSize,
+    current: pagination.value.current,
+    size: pagination.value.pageSize,
     ...formData.value,
   }
   const { data } = await packageTariffPlan(param)
-  dataSource.value = (data || []).map(item=>{
-    return{
+  dataSource.value = (data || []).map(item => {
+    return {
       ...item,
-      prince:item.price.price
+      prince: item.price.price
     }
   })
   pagination.value.total = data.length
@@ -60,31 +61,32 @@ const evChangePageSize = (pageSize) => {
   pagination.value.pageSize = pageSize
 }
 
-  
+
 onMounted(() => {
   intData()
 })
-  </script>
-  
-  <style scoped lang="less">
-  .container {
-    .head-title {
-      display: flex;
-      justify-content: space-between;
-    }
-    .form-row {
+</script>
+
+<style scoped lang="less">
+.container {
+  .head-title {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .form-row {
+    display: flex;
+
+    .form-row-col {
+      width: 25%;
       display: flex;
-      .form-row-col{
-          width: 25%;
-          display: flex;
-          align-items: center;        
-          .form-row-label{
-              width: 120px;
-              text-align: right;
-          }
+      align-items: center;
+
+      .form-row-label {
+        width: 120px;
+        text-align: right;
       }
     }
   }
-  
-  </style>
-  
+}
+</style>

src/views/lotCard/trafficList/config.js

@@ -16,4 +16,6 @@ export const columns = [
       width: 180,
       fixed: "right",
     }
-  ]
+  ]
+
+  

src/views/lotCard/trafficList/index.vue

@@ -1,74 +1,76 @@
 <!-- 流量列表 -->
 <template>
-    <div class="container">
-        <div class="head-title">
-          <span>{{  route.meta.title }} </span>
-      </div>
-      <!-- 搜索条件区 -->
+  <div class="container">
+    <div class="head-title">
+      <span>{{ route.meta.title }} </span>
+    </div>
+    <!-- 搜索条件区 -->
     <div class="search-section">
       <a-form :model="searchForm" layout="inline">
         <a-form-item field="iccid" label="ICCID">
-          <a-input v-model="searchForm.iccid" :placeholder="$t('lotCard.please')+$t('lotCard.iccid')" allow-clear />
+          <a-input v-model="searchForm.iccid" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')" allow-clear />
         </a-form-item>
         <a-form-item field="hImsi" label="HIMSI">
-          <a-input v-model="searchForm.cardNumber" :placeholder="$t('lotCard.please')+$t('lotCard.himsi')" allow-clear />
+          <a-input v-model="searchForm.cardNumber" :placeholder="$t('lotCard.please') + $t('lotCard.himsi')"
+            allow-clear />
         </a-form-item>
         <a-form-item>
           <a-space>
-            <a-button type="primary" @click="handleSearch">{{$t('form.Search')}}</a-button>
-            <a-button @click="resetSearch">{{$t('form.Reset')}}</a-button>
+            <a-button type="primary" @click="handleSearch">{{ $t('form.Search') }}</a-button>
+            <a-button @click="resetSearch">{{ $t('form.Reset') }}</a-button>
           </a-space>
         </a-form-item>
       </a-form>
     </div>
-        
-      <a-table  :data="dataSource" :columns="columns" :pagination="pagination"  :scroll="{ x: 'auto' }" @page-change="evChangePage" @page-size-change="evChangePageSize" > 
-        <template #id="{ record }">
-          <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="evEdit(record)">编辑</a>
+
+    <a-table :data="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: 'auto' }"
+      @page-change="evChangePage" @page-size-change="evChangePageSize">
+      <template #id="{ record }">
+        <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="evEdit(record)">编辑</a>
           <a-popconfirm content="确认删除该信息?" ok-text="确定" cancel-text="取消" @ok="evDelete(record.id)">
             <a href="javascript:;" class="a-link">删除</a>
           </a-popconfirm> -->
-        </template>
+      </template>
 
-      </a-table>
+    </a-table>
   </div>
-  </template>
-  
-  <script setup>
-  import { onMounted, ref, h } from "vue";
-  import { useRoute } from "vue-router";
-  import { columns } from "./config";
-  import { Message, Notification } from '@arco-design/web-vue'
-  import { packageInfo } from "@/api/path/lotCard.api"
-  const searchForm = ref({
-    "iccid": "",
-    "imsi" : "",
-  });
+</template>
 
-  const dataSource = ref([]);
-  const route = useRoute();
-  const pagination = ref({
+<script setup>
+import { onMounted, ref, h } from "vue";
+import { useRoute } from "vue-router";
+import { columns } from "../packageMange/config";
+import { Message, Notification } from '@arco-design/web-vue'
+import { packageInfo } from "@/api/path/lotCard.api"
+const searchForm = ref({
+  "iccid": "",
+  "imsi": "",
+});
+
+const dataSource = ref([]);
+const route = useRoute();
+const pagination = ref({
   total: 0,
   pageSize: 10,
   current: 1,
-})  
+})
 
 const cardStatusOptions = [
   { label: '正常', value: 'normal' },
   { label: '停机', value: 'suspended' },
 ];
-  
-  const intData = async () => {
+
+const intData = async () => {
   const param = {
-    current:  pagination.value.current,
-    size:  9999999,
+    current: pagination.value.current,
+    size: 9999999,
     ...searchForm.value,
   }
   const { data } = await packageInfo(param)
-  dataSource.value =  data || []
-  pagination.value.total =  dataSource.value.length
+  dataSource.value = data || []
+  pagination.value.total = dataSource.value.length
 }
-  
+
 
 const evChangePage = (page) => {
   pagination.value.current = page
@@ -81,33 +83,33 @@ const evChangePageSize = (pageSize) => {
 onMounted(() => {
   intData()
 })
-  </script>
-  
-  <style scoped lang="less">
+</script>
 
+<style scoped lang="less">
 .search-section {
   margin-top: 20px;
   margin-bottom: 20px;
 }
 
-  .container {
-    .head-title {
-      display: flex;
-      justify-content: space-between;
-    }
-    .form-row {
+.container {
+  .head-title {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .form-row {
+    display: flex;
+
+    .form-row-col {
+      width: 25%;
       display: flex;
-      .form-row-col{
-          width: 25%;
-          display: flex;
-          align-items: center;        
-          .form-row-label{
-              width: 120px;
-              text-align: right;
-          }
+      align-items: center;
+
+      .form-row-label {
+        width: 120px;
+        text-align: right;
       }
     }
   }
-  
-  </style>
-  
+}
+</style>

src/views/lotCard/trafficList/trafficForm.vue

@@ -0,0 +1,89 @@
+<template>
+  <a-modal :visible="visible" :title="$t('lotCard.titleTraffic')" @ok="handleSubmit" @cancel="handleCancel">
+    <a-table :data="dataSource" :columns="columns" :scroll="{ x: 'auto' }" @page-change="evChangePage"
+      @page-size-change="evChangePageSize">
+      <template #id="{ record }">
+        <!-- <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="evEdit(record)">编辑</a>
+          <a-popconfirm content="确认删除该信息?" ok-text="确定" cancel-text="取消" @ok="evDelete(record.id)">
+            <a href="javascript:;" class="a-link">删除</a>
+          </a-popconfirm> -->
+      </template>
+
+    </a-table>
+  </a-modal>
+</template>
+<script setup>
+import { onMounted, ref, h } from "vue";
+import { columns } from "./config";
+import { Message, Notification } from '@arco-design/web-vue'
+import { simInfo } from "@/api/path/lotCard.api"
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+  editMode: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:visible', 'submit']);
+
+const formRef = ref(null);
+
+const dataSource = ref([]);
+const pagination = ref({
+  total: 0,
+  pageSize: 10,
+  current: 1,
+})
+
+const intData = async () => {
+  const param = {
+    current: pagination.value.current,
+    size: pagination.value.pageSize,
+    ...formData.value,
+  }
+  const { data } = await simInfo(param)
+  dataSource.value = (data || []).map(item => {
+    return {
+      ...item,
+      prince: item.price.price
+    }
+  })
+  pagination.value.total = data.length
+}
+
+const evChangePage = (page) => {
+  pagination.value.current = page
+}
+
+const evChangePageSize = (pageSize) => {
+  pagination.value.pageSize = pageSize
+}
+
+
+onMounted(() => {
+  intData()
+})
+
+
+const handleSubmit = () => {
+  formRef.value.validate((errors) => {
+    if (!errors) {
+      emit('submit', { ...formData });
+      emit('update:visible', false);
+    } else {
+      console.error('Validation failed', errors);
+    }
+  });
+};
+
+const handleCancel = () => {
+  emit('update:visible', false);
+};
+
+
+</script>