导卡加入下载示例文件模版 && 修改默认回显字段

package-lock.json

@@ -13,6 +13,7 @@
         "crypto-js": "^4.2.0",
         "dayjs": "^1.11.11",
         "echarts": "^5.5.1",
+        "file-saver": "^2.0.5",
         "less": "^4.2.0",
         "less-loader": "^12.2.0",
         "lodash": "^4.17.21",
@@ -21,7 +22,8 @@
         "vue": "^3.4.21",
         "vue-echarts": "^7.0.3",
         "vue-i18n": "^10.0.1",
-        "vue-router": "^4.3.2"
+        "vue-router": "^4.3.2",
+        "xlsx": "^0.18.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
@@ -934,6 +936,14 @@
       "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.5.12.tgz",
       "integrity": "sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg=="
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz",
@@ -1195,6 +1205,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "1.1.3",
       "resolved": "https://registry.npmmirror.com/chalk/-/chalk-1.1.3.tgz",
@@ -1278,6 +1300,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -1389,6 +1419,17 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmmirror.com/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/crypto-js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz",
@@ -2048,6 +2089,11 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz",
@@ -2110,6 +2156,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fragment-cache": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/fragment-cache/-/fragment-cache-0.2.1.tgz",
@@ -4185,6 +4239,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmmirror.com/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmmirror.com/stable/-/stable-0.1.8.tgz",
@@ -5048,6 +5113,42 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/zrender": {
       "version": "5.6.0",
       "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.11",
     "echarts": "^5.5.1",
+    "file-saver": "^2.0.5",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "lodash": "^4.17.21",
@@ -22,7 +23,8 @@
     "vue": "^3.4.21",
     "vue-echarts": "^7.0.3",
     "vue-i18n": "^10.0.1",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.3.2",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

src/i18n/zh/order.js

@@ -28,7 +28,7 @@ export default {
     examine:'审核',
     UploadContract:'上传合同',
     ViewTheContract:'查看合同',
-    UploadAmount:'上传金额',
+    UploadAmount:'制卡费',
     view:'查看',
     ChangeValidity:'变更有效期',
     SalesContract:'销售合同',

src/utils/xlsx.js

@@ -0,0 +1,34 @@
+import * as XLSX from "xlsx";
+import { saveAs } from 'file-saver'
+export function downloadFile(headers, data, name = "ICCID示例文件") {
+  if (
+    (typeof data !== "object" && !Array.isArray(data)) ||
+    (typeof headers !== "object" && !Array.isArray(headers)) ||
+    (!data && !headers) ||
+    (data.length === 0 && headers.length === 0)
+  ) {
+    return false;
+  }
+
+  // 将数据转换为工作表
+  const worksheet = XLSX.utils.aoa_to_sheet([headers,...data]);
+
+  // 创建工作簿并添加工作表
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
+
+  // 生成Excel文件
+  const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
+
+  // 使用blob和FileReader创建一个Blob URL
+  const dataBlob = new Blob([excelBuffer], {
+    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8",
+  });
+  const blobUrl = window.URL.createObjectURL(dataBlob);
+
+  // 使用saveAs下载文件
+  saveAs(dataBlob, name);
+
+  // 清理
+  window.URL.revokeObjectURL(blobUrl);
+}

src/views/order/BuyCard/Card.vue

@@ -191,7 +191,7 @@ watch(() => formState.value?.isTrafficPool, val => {
             FlowPool.value = res.data
         })
     }
-})
+},{immediate:true})
 watch(() => modelValue.value, val => {
     if (val) {
         handleDictValue()

src/views/order/BuyCard/detaile.vue

@@ -75,7 +75,8 @@
             </div>
         </div>
         <div class="detail-table">
-            <a-table :columns="columnsDetail" @page-change="evChangePage" :data="dataDetail" :pagination="dataDetail.length==10?pagination:false" />
+            <a-table :columns="columnsDetail" @page-change="evChangePage" :data="dataDetail"
+                :pagination="dataDetail.length == 10 ? pagination : false" />
         </div>
 
         <template #footer>
@@ -87,9 +88,16 @@
     <a-modal v-model:visible="showCard" :title="$t('order.AllocationCardNumber')"
         @cancel="closeModal(showCard, FormDataList)" @before-ok="showCard = false" :okText="$t('form.Confirm')"
         :cancelText="$t('form.Cancel')">
-        <Upload listType="" minx="1" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false">
-        </Upload>
-        <span style="color: #ccc;margin-top: 10px;display: inline-block;">请上传.xlsx文件</span>
+        <div style="display: flex;justify-content: space-between;">
+            <div>
+                <Upload listType="" minx="1" accept=".xlsx" :handelUpload="customRequest" :showRemoveButton="false">
+                </Upload>
+                <span style="color: #ccc;margin-top: 10px;display: inline-block;">请上传.xlsx文件</span>
+            </div>
+            <div>
+                <a-button type="primary" @click="DownloadSampleFile">下载示例文件</a-button>
+            </div>
+        </div>
     </a-modal>
 </template>
 
@@ -99,6 +107,7 @@ import { AcquireOrdertariff, DistributionCard, ReturntheOrderCard } from '@/api/
 import { Message } from '@arco-design/web-vue';
 import Upload from "@/components/upload/index.vue";
 import { Getdictionary } from '@/mixins/index.js'
+import {downloadFile} from '@/utils/xlsx.js'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n();
 const props = defineProps({
@@ -144,7 +153,9 @@ const customRequest = (options) => {
         if (res.code == 200) {
             Message.success(res.message)
             if (res.data[0].length <= 10) {
-                dataDetail.value.push(...res.data.map(val => ({ ...val, status: val.status == 1 ? t('order.normal') : t('order.unsubscribe') })))
+                res.data[0].forEach(val => {
+                    dataDetail.value.push({ iccid: val, status: val.status == 1 ? t('order.normal') : t('order.unsubscribe') })
+                })
             } else {
                 // 更新完整数据
                 tableDataList.value = res.data[0];
@@ -207,6 +218,11 @@ const updatePageData = () => {
     dataDetail.value = tableDataList.value.slice(startIndex, endIndex);
 };
 
+const DownloadSampleFile = ()=>{
+    // 下载示例文件
+    downloadFile(['ICCID'],[['8968099000011939']])
+}
+
 onMounted(async () => {
     res1.value = await Getdictionary('Billingcycle')
     res2.value = await Getdictionary('billingMethod')

src/views/order/BuyCard/index.vue

@@ -48,10 +48,11 @@
           </div>
           <a-button @click="openPriceing(record)" type="text"
             v-if="record.moderationStatus == 2 && userType == 1 ">{{ $t('order.UploadAmount') }}</a-button>
-          <a-button @click="openDetail(record)" type="text">{{ $t('order.view') }}</a-button>
           <!-- <a-button @click="openDetail(record)" type="text" v-if="userType !== 1">套餐</a-button>
           <a-button @click="openDetail(record)" type="text" v-if="userType !== 1">资费</a-button> -->
           <a-button @click="openEndDate(record)" type="text" v-if="userType==1 && record.moderationStatus == 2">{{ $t('order.ChangeValidity') }}</a-button>
+          <a-button @click="openDetail(record)" type="text">{{ $t('order.view') }}</a-button>
+
         </div>
       </template>
     </a-table>