卡清单管理

src/views/lotCard/cardList/cardDialog.vue

@@ -1,14 +1,16 @@
 <template>
-    <a-modal width="70%" :visible="visible" :title="$t('lotCard.titleSim')" @ok="handleSubmit" @cancel="handleCancel">
+    <a-modal width="70%" :visible="visible" :title="$t('lotCard.titleSim')" :hide-cancel='true'
+        :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel">
         <!-- 搜索条件区 -->
         <div class="search-section">
-            <a-form :model="formData" layout="inline">
-                <a-form-item field="iccid" label="ICCID">
+            <a-form :model="formData" ref="formRef" layout="inline">
+                <a-form-item field="iccid" :label="$t('lotCard.iccid')" :validate-trigger="['change', 'input', 'blur']"
+                    :rules="[{ required: true, message: $t('lotCard.please') + $t('lotCard.iccid') }]">
                     <a-input v-model="formData.iccid" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')"
                         allow-clear />
                 </a-form-item>
-                <a-form-item field="hImsi" label="HIMSI">
-                    <a-input v-model="formData.cardNumber" :placeholder="$t('lotCard.please') + $t('lotCard.himsi')"
+                <a-form-item field="himsi" :label="$t('lotCard.himsi')">
+                    <a-input v-model="formData.himsi" :placeholder="$t('lotCard.please') + $t('lotCard.himsi')"
                         allow-clear />
                 </a-form-item>
                 <a-form-item>
@@ -32,7 +34,7 @@
     </a-modal>
 </template>
 <script setup>
-import { onMounted, ref, h } from "vue";
+import { onMounted, ref, getCurrentInstance } from "vue";
 import { dialogColumns } from "./config";
 import { Message, Notification } from '@arco-design/web-vue'
 import { simInfo } from "@/api/path/lotCard.api"
@@ -42,10 +44,11 @@ const props = defineProps({
 
 const emit = defineEmits(['submit']);
 
-const formRef = ref(null);
+const { proxy } = getCurrentInstance()
+const formRef = ref()
 const formData = ref({
     "iccid": "",
-    "imsi": "454120387374989",
+    "himsi": "",
 });
 const tableList = ref([])
 
@@ -96,21 +99,20 @@ const evChangePageSize = (pageSize) => {
 
 
 const resetSearch = () => {
-
+    proxy.$refs.formRef.resetFields()
 }
 
 const handleSearch = () => {
-}
-
-const handleSubmit = () => {
     formRef.value.validate((errors) => {
         if (!errors) {
-            emit('submit', { ...formData });
-            visible.value = false
-        } else {
-            console.error('Validation failed', errors);
+            intData()
         }
     });
+}
+
+const handleSubmit = () => {
+    emit('submit', { ...formData });
+    visible.value = false
 };
 
 const handleCancel = () => {

src/views/lotCard/cardList/config.js

@@ -14,7 +14,7 @@ export const columns = [
     dataIndex: 'id',
     slotName: 'id',
     align: 'center',
-    width: 380,
+    width: 280,
     fixed: "right",
   }
 ]
@@ -41,3 +41,9 @@ export const dialogColumns = [
     fixed: "right",
   }
 ]
+export const UpccDialogColumns = [
+  { title: window.$t('lotCard.appName'), dataIndex: 'appName', align: 'center', width:200   },
+  { title: window.$t('lotCard.mcc'), dataIndex: 'mcc', align: 'center', width:200   },
+  { title: window.$t('lotCard.qtaconsumption'), dataIndex: 'qtaconsumption', align: 'center', width:200 },
+  { title: window.$t('lotCard.time'), dataIndex: 'time', align: 'center', width:200 },
+]

src/views/lotCard/cardList/index.vue

@@ -1,19 +1,22 @@
 <template>
+  <!-- 卡清单管理 -->
   <div class="container">
     <div class="head-title">
       <span>{{ route.meta.title }} </span>
-      <a-button type="primary" @click="handleDialog({})">查看卡</a-button>
-      <a-button type="primary" @click="handleIssuedDialog({})">下发用户</a-button>
+      <span class="head-title-right">
+        <a-button class="m-r-10" type="primary" @click="handleDialog({})"> {{ $t('lotCard.titleSim') }}</a-button>
+        <a-button type="primary" @click="handleIssuedDialog({})">{{ $t('lotCard.titleOrder') }}</a-button>
+      </span>
     </div>
     <!-- 搜索条件区 -->
     <div class="search-section">
-      <a-form :model="searchForm" layout="inline">
-        <a-form-item field="iccid" label="ICCID">
+      <a-form :model="searchForm" ref="formRef" layout="inline">
+        <a-form-item field="iccid" :label="$t('lotCard.iccid')" :validate-trigger="['change', 'input', 'blur']"
+          :rules="[{ required: true, message: $t('lotCard.please') + $t('lotCard.iccid') }]">
           <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-form-item field="hImsi" :label="$t('lotCard.himsi')">
+          <a-input v-model="searchForm.hImsi" :placeholder="$t('lotCard.please') + $t('lotCard.himsi')" allow-clear />
         </a-form-item>
         <a-form-item>
           <a-space>
@@ -27,22 +30,28 @@
     <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="pagination"
       :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }">
       <template #id="{ record }">
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handleDialog(record)">查看卡</a>
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handleOrderDialog(record)">订购套餐</a>
-        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handleIssuedDialog(record)">下发用户</a>
+        <!-- 查询卡 -->
+        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handleDialog(record)">{{
+          $t('lotCard.titleSim') }}</a>
+        <!-- 订购套餐 -->
+        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handleOrderDialog(record)">{{
+          $t('lotCard.titleOrder') }}</a>
+        <!-- 下发用户 -->
+        <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handleIssuedDialog(record)">{{
+          $t('lotCard.titleIssued') }}</a>
       </template>
 
     </a-table>
     <cardDialog ref="dialogRef" />
     <!-- 下发用户 -->
     <issuedDialog ref="issuedDialogRef" />
-    <!-- 下发用户 -->
+    <!-- 订购套餐 -->
     <orderDialog ref="orderDialogRef" />
   </div>
 </template>
 
 <script setup>
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref, reactive, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
 import { columns } from "./config";
 import { Message, Notification } from '@arco-design/web-vue'
@@ -50,9 +59,12 @@ import { cardInfoList } from "@/api/path/lotCard.api"
 import cardDialog from "./cardDialog.vue";
 import issuedDialog from "./issuedDialog.vue";
 import orderDialog from "./orderDialog.vue";
+
+const { proxy } = getCurrentInstance()
+const formRef = ref()
 const searchForm = ref({
   "iccid": "",
-  "imsi": "",
+  "himsi": "",
 });
 
 const dataSource = ref([]);
@@ -74,10 +86,6 @@ const dialogRef = ref()
 const issuedDialogRef = ref()
 const orderDialogRef = ref()
 
-const cardStatusOptions = [
-  { label: '正常', value: 'normal' },
-  { label: '停机', value: 'suspended' },
-];
 
 const intData = async () => {
   const param = {
@@ -111,9 +119,15 @@ const handleOrderDialog = (data) => {
 }
 
 const handleSearch = () => {
+  formRef.value.validate((errors) => {
+    if (!errors) {
+      intData()
+    }
+  });
 }
 const resetSearch = () => {
-
+  proxy.$refs.formRef.resetFields()
+  intData()
 }
 
 onMounted(() => {
@@ -122,6 +136,13 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
+.head-title-right {
+  .m-r-10 {
+    margin-right: 10px;
+  }
+
+}
+
 .search-section {
   margin-top: 20px;
   margin-bottom: 20px;

src/views/lotCard/cardList/issuedDialog.vue

@@ -1,15 +1,16 @@
 <template>
-    <a-modal width="70%" :visible="visible" :title="$t('lotCard.titleIssued')" :hide-cancel='true' ok-text="关闭"
-        @ok="handleSubmit" @cancel="handleCancel">
+    <a-modal width="70%" :visible="visible" :title="$t('lotCard.titleIssued')" :hide-cancel='true'
+        :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel">
         <!-- 搜索条件区 -->
         <div class="search-section">
-            <a-form :model="formData" layout="inline">
-                <a-form-item field="iccid" label="ICCID">
+            <a-form :model="formData" ref="formRef" layout="inline">
+                <a-form-item field="iccid" :label="$t('lotCard.iccid')" :validate-trigger="['change', 'input', 'blur']"
+                    :rules="[{ required: true, message: $t('lotCard.please') + $t('lotCard.iccid') }]">
                     <a-input v-model="formData.iccid" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')"
                         allow-clear />
                 </a-form-item>
-                <a-form-item field="hImsi" label="HIMSI">
-                    <a-input v-model="formData.cardNumber" :placeholder="$t('lotCard.please') + $t('lotCard.himsi')"
+                <a-form-item field="hImsi" :label="$t('lotCard.himsi')">
+                    <a-input v-model="formData.hImsi" :placeholder="$t('lotCard.please') + $t('lotCard.himsi')"
                         allow-clear />
                 </a-form-item>
                 <a-form-item>
@@ -31,8 +32,9 @@
                     unchecked-value="0" />
             </template>
             <template #id="{ record }">
-                <a-popconfirm content="确认下发用户?" ok-text="确定" cancel-text="取消" @ok="evIssuedDialog(record.id)">
-                    <a href="javascript:;" class="a-link">下发用户</a>
+                <a-popconfirm :content="($t('lotCard.confirmTitleIssued'))" :ok-text="$t('form.Confirm')"
+                    :cancel-text="$t('form.Cancel')" @ok="evIssuedDialog(record.id)">
+                    <a href="javascript:;" class="a-link">{{ $t('lotCard.titleIssued') }}</a>
                 </a-popconfirm>
             </template>
 
@@ -40,7 +42,7 @@
     </a-modal>
 </template>
 <script setup>
-import { onMounted, ref, h } from "vue";
+import { onMounted, ref, getCurrentInstance } from "vue";
 import { columns } from "../../system/user/config";
 import { Message, Notification } from '@arco-design/web-vue'
 import { userList, systemFindRoleList } from '@/api/path/system.api'
@@ -52,7 +54,8 @@ const props = defineProps({
 
 const emit = defineEmits(['submit']);
 
-const formRef = ref(null);
+const { proxy } = getCurrentInstance()
+const formRef = ref()
 const formData = ref({
     "iccid": "",
     "imsi": "454120387374989",
@@ -105,10 +108,15 @@ const evChangePageSize = (pageSize) => {
 
 
 const resetSearch = () => {
-
+    proxy.$refs.formRef.resetFields()
 }
 
 const handleSearch = () => {
+    formRef.value.validate((errors) => {
+        if (!errors) {
+            intData()
+        }
+    });
 }
 
 const handleSubmit = () => {

src/views/lotCard/cardList/orderDialog.vue

@@ -1,15 +1,16 @@
 <template>
-    <a-modal width="70%" :visible="visible" :title="$t('lotCard.titleOrder')" :hide-cancel='true' ok-text="关闭"
-        @ok="handleSubmit" @cancel="handleCancel">
+    <a-modal width="70%" :visible="visible" :title="$t('lotCard.titleOrder')" :hide-cancel='true'
+        :ok-text="$t('lotCard.close')" @ok="handleSubmit" @cancel="handleCancel">
         <!-- 搜索条件区 -->
         <div class="search-section">
-            <a-form :model="formData" layout="inline">
-                <a-form-item field="iccid" label="ICCID">
+            <a-form :model="formData" ref="formRef" layout="inline">
+                <a-form-item field="iccid" :label="$t('lotCard.iccid')" :validate-trigger="['change', 'input', 'blur']"
+                    :rules="[{ required: true, message: $t('lotCard.please') + $t('lotCard.iccid') }]">
                     <a-input v-model="formData.iccid" :placeholder="$t('lotCard.please') + $t('lotCard.iccid')"
                         allow-clear />
                 </a-form-item>
-                <a-form-item field="hImsi" label="HIMSI">
-                    <a-input v-model="formData.cardNumber" :placeholder="$t('lotCard.please') + $t('lotCard.himsi')"
+                <a-form-item field="hImsi" :label="$t('lotCard.himsi')">
+                    <a-input v-model="formData.hImsi" :placeholder="$t('lotCard.please') + $t('lotCard.himsi')"
                         allow-clear />
                 </a-form-item>
                 <a-form-item>
@@ -31,7 +32,8 @@
                     unchecked-value="0" />
             </template>
             <template #id="{ record }">
-                <a-popconfirm content="确认下发用户?" ok-text="确定" cancel-text="取消" @ok="evOrderDialog(record)">
+                <a-popconfirm :content="$t('lotCard.confirmTitleOrder')" :ok-text="$t('form.Confirm')"
+                    :cancel-text="$t('form.Cancel')" @ok="evOrderDialog(record)">
                     <a href="javascript:;" class="a-link">{{ $t('lotCard.titleOrder') }}</a>
                 </a-popconfirm>
             </template>
@@ -40,18 +42,22 @@
     </a-modal>
 </template>
 <script setup>
-import { onMounted, ref, h } from "vue";
+import { onMounted, ref, getCurrentInstance } from "vue";
 import { columns } from "../trafficList/config";
 import { Message, Notification } from '@arco-design/web-vue'
 import { packageInfo, orderSync } from '@/api/path/lotCard.api'
+import { useRouter, useRoute } from 'vue-router'
 
 
 const props = defineProps({
 });
+const router = useRouter()
+const route = useRoute();
 
 const emit = defineEmits(['submit']);
 
-const formRef = ref(null);
+const { proxy } = getCurrentInstance()
+const formRef = ref()
 const formData = ref({
     "iccid": "",
     "imsi": "454120387374989",
@@ -98,10 +104,15 @@ const evChangePageSize = (pageSize) => {
 
 
 const resetSearch = () => {
-
+    proxy.$refs.formRef.resetFields()
 }
 
 const handleSearch = () => {
+    formRef.value.validate((errors) => {
+        if (!errors) {
+            intData()
+        }
+    });
 }
 
 const handleSubmit = () => {
@@ -124,12 +135,24 @@ const evOrderDialog = async (record) => {
         "ICCID": tableObj.value.iccid,
         "sendLang": "3", // 发送购买短信语言
     }
-    const { code, data } = await orderSync(param)
+    const { code, data, message } = await orderSync(param)
     if (code == 200) {
         Message.success({
             content: message,
             duration: 2000,
         })
+        const queryData = {
+            ...data,
+            ...param,
+        }
+        const timter = setTimeout(() => {
+            router.push({
+                name: "lotCard-packageMange",
+                query: queryData
+            }, 2000)
+            clearTimeout(timter)
+        })
+
     }
 };