修改卡清单字段 & 新增卡状态标签展示

src/App.vue

@@ -93,10 +93,11 @@ body {
 }
 
 // 文字主题色加重色
-.boldTxt{
+.boldTxt {
   color: rgb(@blue_0);
 }
-.txtPointer{ 
+
+.txtPointer {
   cursor: pointer;
 }
 </style>

src/i18n/zh/lotCard.js

@@ -181,7 +181,7 @@ export default {
      CardPackage:'卡套餐',
      EarlyWarningState:'预警状态',
      PoolName_Number:'池名称/编号',
-     TheExpirationTime:'沉默期到期时间',
+     TheExpirationTime:'沉默期/月',
      UsedPlanData:'已用(套餐流量)',
      AvailablePlanData:'可用(套餐流量)',
      used:'已用(加油包流量)',

src/views/lotCard/cardList/config.js

@@ -39,13 +39,13 @@ export const columns = [
   // { title: '支付方式', dataIndex: 'payType', align: 'center', ellipsis: true },
   {
     title: window.$t("lotCard.SimStatus"),
-    dataIndex: "iccidStatus",
+    slotName: "iccidStatus",
     align: "center",
     ellipsis: true,
   },
   {
     title: window.$t("lotCard.DatapackageStatus"),
-    dataIndex: "DatapackageStatus",
+    slotName: "DatapackageStatus",
     align: "center",
     ellipsis: true,
   },
@@ -114,7 +114,6 @@ export const columns = [
   {
     title: window.$t("lotCard.PoolName_Number"),
     dataIndex: "poolNum",
-    slotName: "poolNum",
     align: "center",
     width: 200,
     ellipsis: true,
@@ -195,7 +194,7 @@ export const SearchForm = [
   },
   {
     type: "select",
-    label: "来源",
+    label: "供应商",
     field: "source",
     options: [], // 默认空，后面会通过字典加载
     dict: "source",

src/views/lotCard/cardList/index.vue

@@ -3,28 +3,35 @@
   <div class="container">
     <!-- 搜索条件区 -->
     <div class="search-section">
-       <Search :SearchForm="SearchForm" @query="intData" @reset="reset"/>
+      <Search :SearchForm="SearchForm" @query="intData" @reset="reset" />
+    </div>
+
+    <div class="add_card">
+      <a-button type="primary">导卡</a-button>
     </div>
 
     <a-table row-key="iccid" :data="dataSource" :columns="columns" :pagination="false" :scroll="{ x: 'auto' }">
-      <template #poolNum="{ record }">
-        <span>{{ record.poolName }}</span>
-        <br />
-        <span>{{ record.poolId }}</span>
-      </template>
       <template #dataUsageTotal="{ record }">
         <span>{{ record.dataUsageTotal }}MB</span>
       </template>
+      <template #iccidStatus="{ record }">
+        <a-tag  color="#7bc616" v-if="record.iccidStatus=='正常'">{{ record.iccidStatus }}</a-tag>
+        <a-tag v-else>{{ record.iccidStatus }}</a-tag>
+      </template>
+      <template #DatapackageStatus="{ record }">
+        <a-tag  color="#7bc616" v-if="record.DatapackageStatus=='已激活'">{{ record.DatapackageStatus }}</a-tag>
+        <a-tag v-else>{{ record.DatapackageStatus }}</a-tag>
+      </template>
       <template #id="{ record }">
         <!-- 查看流量消耗 -->
         <a class="a-link" href="javascript:;" style="margin-right: 1rem" @click="handletrafficUseDialog(record)">详情</a>
+        <!-- 解绑卡和绑定卡 -->
       </template>
-
     </a-table>
 
     <div class="pagtion">
-      <a-pagination :total="pagination.total" v-model:current="pagination.current " show-total show-jumper show-page-size @change="evChangePage"
-        @page-size-change="pagesChange" />
+      <a-pagination :total="pagination.total" v-model:current="pagination.current" show-total show-jumper show-page-size
+        @change="evChangePage" @page-size-change="pagesChange" />
     </div>
     <!-- 查看流量消耗 -->
     <trafficUseDialog ref="trafficUseDialogRef" @submit="intData()" />
@@ -35,11 +42,11 @@
 
 <script setup>
 import { onMounted, ref, getCurrentInstance, h } from "vue";
-import { columns,SearchForm } from "./config";
+import { columns, SearchForm } from "./config";
 import { cardInfoList } from "@/api/path/lotCard.api"
 import trafficUseDialog from "./trafficUseDialog.vue";
 import { Getdictionary } from '@/mixins/index.js'
-import {sanitizeObject} from '@/utils/utils'
+import { sanitizeObject } from '@/utils/utils'
 import Add from './add.vue'
 import Search from '@/components/Search/index.vue'
 const { proxy } = getCurrentInstance()
@@ -61,7 +68,7 @@ const trafficUseDialogRef = ref()
 
 
 const intData = async (item) => {
-  if(item){
+  if (item) {
     SearchFormList.value = item
   }
   const param = {
@@ -80,15 +87,15 @@ const intData = async (item) => {
       SilenceEndtime: '一个月',
       usedBg: '0',
       usableBg: '0',
-      DatapackageStatus:item.dataPackage[0]?.status,
-      dataUsage: item.dataPackage[0]?.dataUsage?item.dataPackage[0]?.dataUsage:'0' + '/MB',
-      dataTotal: item.dataPackage[0]?.dataTotal?item.dataPackage[0]?.dataTotal:'0' + '/MB',
+      DatapackageStatus: item.dataPackage[0]?.status,
+      dataUsage: item.dataPackage[0]?.dataUsage ? item.dataPackage[0]?.dataUsage : '0' + '/MB',
+      dataTotal: item.dataPackage[0]?.dataTotal ? item.dataPackage[0]?.dataTotal : '0' + '/MB',
     }
   })
   pagination.value.total = data.total
 }
 
-const reset = (item)=>{
+const reset = (item) => {
   pagination.value.current = 1
   SearchFormList.value = item
   intData()
@@ -131,11 +138,8 @@ onMounted(() => {
   margin-top: 30px;
 }
 
-.head-title-right {
-  .m-r-10 {
-    margin-right: 10px;
-  }
-
+.add_card {
+  margin-bottom: 1rem;
 }
 
 .search-section {