卡清单，流量列表，订单等模块数据更新及接口对接

src/views/lotCard/cardList/config.js

@@ -1,14 +1,14 @@
 export const columns = [
-  { title: window.$t('lotCard.iccid'), dataIndex: 'iccid', align: 'center', width:200   },
-  { title: window.$t('lotCard.himsi'), dataIndex: 'hImsi', align: 'center', width:200   },
-  { title: window.$t('lotCard.status'), dataIndex: 'status', align: 'center', width:100 },
-  { title: window.$t('lotCard.created_at'), dataIndex: 'created_at', align: 'center', width:200 },
-  { title: window.$t('lotCard.deleted_at'), dataIndex: 'deleted_at', align: 'center', width:200 },
-  { title: window.$t('lotCard.updated_at'), dataIndex: 'updated_at', align: 'center', width:200 },
-  { title: window.$t('lotCard.msisdn'), dataIndex: 'msisdn', align: 'center', width:200 },
-  { title: window.$t('lotCard.source'), dataIndex: 'source', align: 'center', width:200 },
-  { title: window.$t('lotCard.ExpireTime'), dataIndex: 'expire_time', align: 'center', width:200 },
-  { title: window.$t('lotCard.UserId'), dataIndex: 'user_id', align: 'center', width:200 },
+  { title: window.$t('lotCard.iccid'), dataIndex: 'iccid', align: 'center', width: 200 },
+  { title: window.$t('lotCard.himsi'), dataIndex: 'hImsi', align: 'center', width: 200 },
+  { title: window.$t('lotCard.status'), dataIndex: 'status', align: 'center', width: 100 },
+  { title: window.$t('lotCard.created_at'), dataIndex: 'created_at', align: 'center', width: 200 },
+  { title: window.$t('lotCard.deleted_at'), dataIndex: 'deleted_at', align: 'center', width: 200 },
+  { title: window.$t('lotCard.updated_at'), dataIndex: 'updated_at', align: 'center', width: 200 },
+  { title: window.$t('lotCard.msisdn'), dataIndex: 'msisdn', align: 'center', width: 200 },
+  { title: window.$t('lotCard.source'), dataIndex: 'source', align: 'center', width: 200 },
+  { title: window.$t('lotCard.ExpireTime'), dataIndex: 'expire_time', align: 'center', width: 200 },
+  { title: window.$t('lotCard.UserId'), dataIndex: 'user_id', align: 'center', width: 200 },
   {
     title: window.$t('global.common.operations'),
     dataIndex: 'id',
@@ -19,31 +19,3 @@ export const columns = [
   }
 ]
 
-
-export const dialogColumns = [
-  { title: window.$t('lotCard.cardHlrId'), dataIndex: 'cardHlrId', align: 'center', width:200   },
-  { title: window.$t('lotCard.cardHlrId'), dataIndex: 'cardHlrId', align: 'center', width:200   },
-  { title: window.$t('lotCard.CreateTime'), dataIndex: 'createTime', align: 'center', width:200 },
-  { title: window.$t('lotCard.lastModifyTime'), dataIndex: 'lastModifyTime', align: 'center', width:200 },
-  { title: window.$t('lotCard.ExpireTime'), dataIndex: 'expireTime', align: 'center', width:200 },
-  { title: window.$t('lotCard.himsi'), dataIndex: 'himsi', align: 'center', width:200 },
-  { title: window.$t('lotCard.iccid'), dataIndex: 'iccid', align: 'center', width:200 },
-  { title: window.$t('lotCard.msisdn'), dataIndex: 'msisdn', align: 'center', width:200 },
-  { title: window.$t('lotCard.realRuleListName'), dataIndex: 'realRuleListName', align: 'center', width:200 },
-  { title: window.$t('lotCard.serviceUsageMode'), dataIndex: 'serviceUsageMode', align: 'center', width:200 },
-  { title: window.$t('lotCard.statusSim'), dataIndex: 'status', align: 'center', width:200 },
-  {
-    title: window.$t('global.common.operations'),
-    dataIndex: 'id',
-    slotName: 'id',
-    align: 'center',
-    width: 180,
-    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

@@ -4,9 +4,12 @@
     <div class="head-title">
       <span>{{ route.meta.title }} </span>
       <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>
+        <a-popconfirm :content="$t('form.ImportConfirm')" :ok-text="$t('form.Confirm')" :cancel-text="$t('form.Cancel')"
+          @ok="handleImport()">
+          <a-button class="m-r-10" type="primary"> {{ $t('form.Import') }}</a-button>
+        </a-popconfirm>
       </span>
+
     </div>
     <!-- 搜索条件区 -->
     <div class="search-section">
@@ -30,23 +33,14 @@
     <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)">{{
-          $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>
 
@@ -55,10 +49,8 @@ import { onMounted, ref, reactive, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
 import { columns } from "./config";
 import { Message, Notification } from '@arco-design/web-vue'
-import { cardInfoList } from "@/api/path/lotCard.api"
-import cardDialog from "./cardDialog.vue";
+import { cardInfoList, cardInfoImport } from "@/api/path/lotCard.api"
 import issuedDialog from "./issuedDialog.vue";
-import orderDialog from "./orderDialog.vue";
 
 const { proxy } = getCurrentInstance()
 const formRef = ref()
@@ -82,9 +74,7 @@ const rowSelection = reactive({
 });
 const selectedKeys = ref([])
 
-const dialogRef = ref()
 const issuedDialogRef = ref()
-const orderDialogRef = ref()
 
 
 const intData = async () => {
@@ -98,12 +88,29 @@ const intData = async () => {
   pagination.value.total = data.total
 }
 
-const handleDialog = (data) => {
-  if (selectedKeys.value.length > 0) {
-    dialogRef.value.open(selectedKeys.value)
+const handleImport = async () => {
+  if (!searchForm.value.iccid) {
+    Message.warning({
+      content: '请先输入ICCID,可输入多个以逗号分隔,然后再点击导入！',
+      duration: 2000,
+    })
     return
   }
-  dialogRef.value.open([data.iccid])
+  const iccids = searchForm.value.iccid.split(',')
+  const iccidList = iccids.map(item => {
+    return {
+      iccid: item
+    }
+  })
+  const { code, data } = await cardInfoImport({ iccidList })
+  if (code == 200) {
+    Message.success({
+      content: data,
+      duration: 2000,
+    })
+    intData()
+  }
+
 };
 
 const handleIssuedDialog = (data) => {
@@ -114,9 +121,6 @@ const handleIssuedDialog = (data) => {
   issuedDialogRef.value.open([data.iccid])
 }
 
-const handleOrderDialog = (data) => {
-  orderDialogRef.value.open(data)
-}
 
 const handleSearch = () => {
   formRef.value.validate((errors) => {

src/views/lotCard/orderMange/config.js

@@ -1,37 +1,16 @@
 export const columns = [
-  { title: window.$t('lotCard.iccid'), dataIndex: 'ICCID', align: 'center', width:200   },
-  { title: window.$t('lotCard.currency'), dataIndex: 'currency', align: 'center', width:200   },
-  { title: window.$t('lotCard.dataBundleId'), dataIndex: 'dataBundleId', align: 'center', width:200 },
-  { title: window.$t('lotCard.created_at'), dataIndex: 'created_at', align: 'center', width:200 },
-  { title: window.$t('lotCard.deleted_at'), dataIndex: 'deleted_at', align: 'center', width:200 },
-  { title: window.$t('lotCard.updated_at'), dataIndex: 'updated_at', align: 'center', width:200 },
-  { title: window.$t('lotCard.is_Refuel'), dataIndex: 'is_Refuel', align: 'center', width:200 },
-  { title: window.$t('lotCard.price'), dataIndex: 'price', align: 'center', width:200 },
-  { title: window.$t('lotCard.quantity'), dataIndex: 'quantity', align: 'center', width:200 },
-  { title: window.$t('lotCard.UserId'), dataIndex: 'user_id', align: 'center', width:200 },
-  // {
-  //   title: window.$t('global.common.operations'),
-  //   dataIndex: 'id',
-  //   slotName: 'id',
-  //   align: 'center',
-  //   width: 180,
-  //   fixed: "right",
-  // }
-]
-
-
-export const dialogColumns = [
-  { title: window.$t('lotCard.cardHlrId'), dataIndex: 'cardHlrId', align: 'center', width:200   },
-  { title: window.$t('lotCard.cardHlrId'), dataIndex: 'cardHlrId', align: 'center', width:200   },
-  { title: window.$t('lotCard.CreateTime'), dataIndex: 'createTime', align: 'center', width:200 },
-  { title: window.$t('lotCard.lastModifyTime'), dataIndex: 'lastModifyTime', align: 'center', width:200 },
-  { title: window.$t('lotCard.ExpireTime'), dataIndex: 'expireTime', align: 'center', width:200 },
-  { title: window.$t('lotCard.himsi'), dataIndex: 'himsi', align: 'center', width:200 },
-  { title: window.$t('lotCard.iccid'), dataIndex: 'iccid', align: 'center', width:200 },
-  { title: window.$t('lotCard.msisdn'), dataIndex: 'msisdn', align: 'center', width:200 },
-  { title: window.$t('lotCard.realRuleListName'), dataIndex: 'realRuleListName', align: 'center', width:200 },
-  { title: window.$t('lotCard.serviceUsageMode'), dataIndex: 'serviceUsageMode', align: 'center', width:200 },
-  { title: window.$t('lotCard.statusSim'), dataIndex: 'status', align: 'center', width:200 },
+  { title: window.$t('lotCard.iccid'), dataIndex: 'ICCID', align: 'center', width: 200 },
+  { title: window.$t('lotCard.dataBundleId'), dataIndex: 'dataBundleId', align: 'center', width: 200 },
+  { title: window.$t('lotCard.ExpireTime'), dataIndex: 'expire_time', align: 'center', width: 200 },
+  { title: window.$t('lotCard.CreateTime'), dataIndex: 'created_time', align: 'center', width: 200 },
+  { title: window.$t('lotCard.created_at'), dataIndex: 'created_at', align: 'center', width: 200 },
+  { title: window.$t('lotCard.deleted_at'), dataIndex: 'deleted_at', align: 'center', width: 200 },
+  { title: window.$t('lotCard.updated_at'), dataIndex: 'updated_at', align: 'center', width: 200 },
+  { title: window.$t('lotCard.orderID'), dataIndex: 'orderId', align: 'center', width: 200 },
+  { title: window.$t('lotCard.price'), dataIndex: 'price', align: 'center', width: 200 },
+  { title: window.$t('lotCard.quantity'), dataIndex: 'quantity', align: 'center', width: 200 },
+  { title: window.$t('lotCard.source'), dataIndex: 'source', align: 'center', width: 200 },
+  { title: window.$t('lotCard.UserId'), dataIndex: 'user_id', align: 'center', width: 200 },
   {
     title: window.$t('global.common.operations'),
     dataIndex: 'id',
@@ -41,3 +20,8 @@ export const dialogColumns = [
     fixed: "right",
   }
 ]
+
+
+
+
+

src/views/lotCard/orderMange/index.vue

@@ -4,9 +4,14 @@
         <div class="head-title">
             <span>{{ route.meta.title }} </span>
             <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>
+                <a-popconfirm :content="$t('lotCard.confirmTitleOrder')" :ok-text="$t('form.Confirm')"
+                    :cancel-text="$t('form.Cancel')" @ok="handleOrderDialog(record)">
+                    <a-button class="m-r-10" type="primary">{{ $t('lotCard.titleOrder') }}</a-button>
+                </a-popconfirm>
+                <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>
         <!-- 搜索条件区 -->
@@ -30,13 +35,20 @@
             </a-form>
         </div>
 
-        <a-table row-key="ICCID" :data="dataSource" :columns="columns" :pagination="pagination"
+        <a-table row-key="id" :data="dataSource" :columns="columns" :pagination="pagination"
             :row-selection="rowSelection" v-model:selectedKeys="selectedKeys" :scroll="{ x: 'auto' }">
             <template #id="{ record }">
-                <!-- 结束套餐 -->
-                <a-popconfirm :content="$t('lotCard.confirmOrderEnd')" :ok-text="$t('form.Confirm')"
+                <!-- 订购生成订单 -->
+                <a-popconfirm :content="$t('lotCard.confirmTitleOrder')" :ok-text="$t('form.Confirm')"
+                    :cancel-text="$t('form.Cancel')" @ok="handleOrderDialog(record)">
+                    <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{
+                        $t('lotCard.titleOrder') }}</a>
+                </a-popconfirm>
+                <!-- 取消订单-退订 -->
+                <a-popconfirm :content="$t('lotCard.confirmTitleCancelOrder')" :ok-text="$t('form.Confirm')"
                     :cancel-text="$t('form.Cancel')" @ok="handleUnsubscribeDialog(record)">
-                    <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{ $t('lotCard.orderEnd') }}</a>
+                    <a class="a-link" href="javascript:;" style="margin-right: 1rem">{{ $t('lotCard.titleCancelOrder')
+                        }}</a>
                 </a-popconfirm>
             </template>
 
@@ -45,11 +57,11 @@
 </template>
 
 <script setup>
-import { onMounted, ref, reactive, getCurrentInstance } from "vue";
+import { onMounted, ref, reactive, getCurrentInstance, nextTick } from "vue";
 import { useRoute } from "vue-router";
 import { columns } from "./config";
 import { Message, Notification } from '@arco-design/web-vue'
-import { orderList } from "@/api/path/lotCard.api"
+import { orderList, setOrderDataPlan, orderCancel } from "@/api/path/lotCard.api"
 
 const { proxy } = getCurrentInstance()
 const formRef = ref()
@@ -85,8 +97,6 @@ const rowSelection = reactive({
 const selectedKeys = ref([])
 
 const dialogRef = ref()
-const issuedDialogRef = ref()
-const orderDialogRef = ref()
 
 
 const intData = async () => {
@@ -100,60 +110,91 @@ const intData = async () => {
     pagination.value.total = data.total
 }
 
-const handleDialog = (data) => {
-    if (selectedKeys.value.length > 0) {
-        dialogRef.value.open(selectedKeys.value)
-        return
-    }
-    dialogRef.value.open([data.ICCID])
-};
 
-const handleIssuedDialog = (data) => {
+
+// 订购生成订单
+const handleOrderDialog = async (info) => {
+    let paramList = []
     if (selectedKeys.value.length > 0) {
-        issuedDialogRef.value.open(selectedKeys.value)
-        return
+        const list = dataSource.value.filter(item => selectedKeys.value.some(item2 => item.id === item2))
+
+        paramList = list.map(item => {
+            return {
+                ICCID: item.ICCID,
+                dataBundleId: item.dataBundleId,
+                source: item.source,
+                quantity: 1
+            }
+        })
+    }
+    if (info && Object.keys(info).length > 0) {
+        paramList = [{
+            ICCID: info.ICCID,
+            dataBundleId: info.dataBundleId,
+            source: info.source,
+            quantity: 1
+        }]
     }
-    issuedDialogRef.value.open([data.ICCID])
-}
 
-const handleOrderDialog = (data) => {
-    orderDialogRef.value.open(data)
-}
 
+    if (selectedKeys.value.length > 0 || info && Object.keys(info).length > 0) {
 
-const handleUnsubscribeDialog = async (data) => {
+        const { code, data } = await setOrderDataPlan(paramList)
+
+        if (code == 200) {
+            Message.success({
+                content: data,
+                duration: 2000,
+            })
+        }
+    } else {
+        Message.warning({
+            content: $t('lotCard.tipsOrder'),
+            duration: 2000,
+        })
+    }
+}
+
+// 退订
+const handleUnsubscribeDialog = async (record) => {
     // 订阅关系状态
     // 1：未激活
     // 2: 已过期
     // 3: 已激活99：已退款
-    let info = {}
     let param = {}
-    // TODO 入参获取不到，结束套餐可能位置存在错误
-    if (data.status == 1) {
+    let statusFlag = true
+    if (selectedKeys.value.length > 0) {
+        const list = dataSource.value.filter(item => selectedKeys.value.some(item2 => item.id === item2))
+        list.forEach(item => {
+            if (!(item.status == 2 || item.status == 3)) statusFlag = false
+        })
         param = {
-            "orderId": "12410291340347056782",
-            "thirdOrderId": "1848992146566851025"
+            ids: selectedKeys.value
         }
-        info = await unsubscribe(param)
     }
-    if (data.status == 3) {
+    if (record && record.id && !(record.status == 2 || record.status == 3)) {
+        statusFlag = false
         param = {
-            "iccidPackageList": [
-                {
-                    "iccid": "1845700383613420930",
-                    "imsi": "454120387374989",
-                    "packageid": "1851137028516811138"
-                }
-            ]
+            ids: [record.id]
         }
-        info = await release(param)
-
     }
-    if (info.code == 200) {
-        Message.success({
-            content: data.msg,
+
+
+    if ((selectedKeys.value.length > 0 || record && record.id) && statusFlag) {
+
+        const { code, data } = await orderCancel(param)
+
+        if (code == 200) {
+            Message.success({
+                content: data,
+                duration: 2000,
+            })
+        }
+    } else {
+        Message.warning({
+            content: $t('lotCard.tipsOrder'),
             duration: 2000,
-        });
+        })
     }
 };
 

src/views/lotCard/trafficList/config.js

@@ -1,22 +1,20 @@
 export const columns = [
-    { title: window.$t('lotCard.activationMode'), dataIndex: 'activationMode', align: 'center', width:100   },
-    // { title: window.$t('lotCard.cardPools'), dataIndex: 'cardPools', align: 'center', width:100   },
-    // { title: window.$t('lotCard.desc'), dataIndex: 'desc', align: 'center', width:200 },
-    { title: window.$t('lotCard.lastModifyTime'), dataIndex: 'lastModifyTime', align: 'center', width:200 },
-    // { title: window.$t('lotCard.name'), dataIndex: 'name', align: 'center', width:200 },
-    { title: window.$t('lotCard.period'), dataIndex: 'period', align: 'center', width:200 },
-    { title: window.$t('lotCard.periodType'), dataIndex: 'periodType', align: 'center', width:200 },
-    { title: window.$t('lotCard.status'), dataIndex: 'status', align: 'center', width:200 },
-    { title: window.$t('lotCard.type'), dataIndex: 'type', align: 'center', width:200 },
-    {
-      title: window.$t('global.common.operations'),
-      dataIndex: 'id',
-      slotName: 'id',
-      align: 'center',
-      width: 180,
-      fixed: "right",
-    }
-  ]
+  { title: window.$t('lotCard.created_at'), dataIndex: 'created_at', align: 'center', width: 200 },
+  { title: window.$t('lotCard.updated_at'), dataIndex: 'updated_at', align: 'center', width: 200 },
+  { title: window.$t('lotCard.orderExpireTime'), dataIndex: 'orderExpireTime', align: 'center', width: 200 },
+  { title: window.$t('lotCard.period'), dataIndex: 'period', align: 'center', width: 200 },
+  { title: window.$t('lotCard.sourcePlan'), dataIndex: 'source', align: 'center', width: 200 },
+  { title: window.$t('lotCard.statusTraffic'), dataIndex: 'status', align: 'center', width: 200 },
+  { title: window.$t('lotCard.superior_id'), dataIndex: 'superior_id', align: 'center', width: 200 },
+  { title: window.$t('lotCard.type'), dataIndex: 'type', align: 'center', width: 200 },
+  // {
+  //   title: window.$t('global.common.operations'),
+  //   dataIndex: 'id',
+  //   slotName: 'id',
+  //   align: 'center',
+  //   width: 180,
+  //   fixed: "right",
+  // }
+]
 
 
-  

src/views/lotCard/trafficList/index.vue

@@ -7,8 +7,7 @@
     <!-- 搜索条件区 -->
     <div class="search-section">
       <a-form :model="searchForm" ref="formRef" layout="inline">
-        <a-form-item field="status" :label="$t('lotCard.statusTraffic')" :validate-trigger="['change', 'input', 'blur']"
-          :rules="[{ required: true, message: $t('lotCard.please') + $t('lotCard.statusTraffic') }]">
+        <a-form-item field="status" :label="$t('lotCard.statusTraffic')">
           <a-input v-model="searchForm.status" :placeholder="$t('lotCard.please') + $t('lotCard.statusTraffic')"
             allow-clear />
         </a-form-item>
@@ -28,12 +27,11 @@
     <a-table :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="handleDialog(record)">查看卡</a> -->
+
 
       </template>
 
     </a-table>
-    <trafficDialog ref="dialogRef" />
   </div>
 </template>
 
@@ -42,9 +40,7 @@ import { onMounted, ref, getCurrentInstance } 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"
-import trafficDialog from "./trafficDialog.vue";
-import lotCard from "@/i18n/zh/lotCard";
+import { dataPlanList } from "@/api/path/lotCard.api"
 
 const { proxy } = getCurrentInstance()
 const formRef = ref()
@@ -61,18 +57,17 @@ const pagination = ref({
   current: 1,
 })
 
-const dialogRef = ref()
 
 
 const intData = async () => {
   const param = {
     current: pagination.value.current,
-    size: 9999999,
+    size: pagination.value.pageSize,
     ...searchForm.value,
   }
-  const { data } = await packageInfo(param)
-  dataSource.value = data || []
-  pagination.value.total = dataSource.value.length
+  const { data } = await dataPlanList(param)
+  dataSource.value = data?.records || []
+  pagination.value.total = data.total
 }
 
 
@@ -88,16 +83,9 @@ const resetSearch = () => {
 }
 
 const handleSearch = () => {
-  formRef.value.validate((errors) => {
-    if (!errors) {
-      intData()
-    }
-  });
+  intData()
 }
 
-const handleDialog = (data) => {
-  dialogRef.value.open({ "iccid": "89852342022040149139" })
-};
 
 
 onMounted(() => {