|
|
@@ -6,15 +6,26 @@
|
|
|
content-class="h-full flex flex-col"
|
|
|
:style="cardHeight"
|
|
|
>
|
|
|
- <div class="flex gap-2 h-6 items-center">
|
|
|
- <!-- <div class="flex items-center"> -->
|
|
|
- <NForm inline label-placement="left" label-width="auto" :show-feedback="false">
|
|
|
+ <div class="flex gap-2 min-h-6 items-center">
|
|
|
+ <NForm inline label-placement="left" label-width="auto" :show-feedback="false" class="flex-1 flex-wrap">
|
|
|
<NFormItem label="Status">
|
|
|
<NSelect
|
|
|
v-model:value="selectStatus"
|
|
|
class="w-180px"
|
|
|
:options="optionsStatus"
|
|
|
+ multiple
|
|
|
clearable
|
|
|
+ :max-tag-count="2"
|
|
|
+ />
|
|
|
+ </NFormItem>
|
|
|
+ <NFormItem label="Platform">
|
|
|
+ <NSelect
|
|
|
+ v-model:value="selectPlatform"
|
|
|
+ class="w-160px"
|
|
|
+ :options="optionsPlatform"
|
|
|
+ multiple
|
|
|
+ clearable
|
|
|
+ :max-tag-count="1"
|
|
|
/>
|
|
|
</NFormItem>
|
|
|
<NFormItem label="GICCID">
|
|
|
@@ -27,13 +38,14 @@
|
|
|
size="small"
|
|
|
/>
|
|
|
</NFormItem>
|
|
|
+ <NFormItem>
|
|
|
+ <NButton text :focusable="false" style="font-size: 18px" @click="clickSearch">
|
|
|
+ <span class="i-mdi:search" />
|
|
|
+ </NButton>
|
|
|
+ </NFormItem>
|
|
|
</NForm>
|
|
|
- <NButton text :focusable="false" style="font-size: 18px" @click="clickSearch">
|
|
|
- <span class="i-mdi:search" />
|
|
|
- </NButton>
|
|
|
- <!-- </div> -->
|
|
|
<NButton
|
|
|
- class="ml-auto"
|
|
|
+ class="shrink-0"
|
|
|
text
|
|
|
:focusable="false"
|
|
|
style="font-size: 18px"
|
|
|
@@ -98,6 +110,7 @@ import { getSimCardInfo, getSimCardMonthlyData } from '@/service/simCardManage'
|
|
|
import type {
|
|
|
SimCardInfo,
|
|
|
SimCardMonthlyData,
|
|
|
+ SimCardPlatform,
|
|
|
SimCardStatus,
|
|
|
} from '@/service/simCardManage/interface'
|
|
|
import SimCardDataView from './component/simCardDataView.vue'
|
|
|
@@ -272,9 +285,17 @@ function createColumns(): DataTableColumns<SimCardInfo> {
|
|
|
width: 150,
|
|
|
},
|
|
|
{
|
|
|
- title: 'Usage',
|
|
|
+ title: 'Platform',
|
|
|
+ key: 'platform',
|
|
|
+ width: 120,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'Usage (MB)',
|
|
|
key: 'allDataUsage',
|
|
|
minWidth: 100,
|
|
|
+ render(rowData) {
|
|
|
+ return (rowData.allDataUsage / 1024).toFixed(2)
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
title: 'UpdateTime',
|
|
|
@@ -284,7 +305,7 @@ function createColumns(): DataTableColumns<SimCardInfo> {
|
|
|
]
|
|
|
}
|
|
|
|
|
|
-const selectStatus = ref<SimCardStatus | undefined>()
|
|
|
+const selectStatus = ref<SimCardStatus[]>([])
|
|
|
const optionsStatus: SelectOption[] = [
|
|
|
{ label: 'UNKNOWN', value: 'UNKNOWN' },
|
|
|
{ label: 'NOT_ACTIVATED', value: 'NOT_ACTIVATED' },
|
|
|
@@ -293,8 +314,14 @@ const optionsStatus: SelectOption[] = [
|
|
|
{ label: 'RETIRED', value: 'RETIRED' },
|
|
|
]
|
|
|
|
|
|
+const selectPlatform = ref<SimCardPlatform[]>([])
|
|
|
+const optionsPlatform: SelectOption[] = [
|
|
|
+ { label: 'SmartHub', value: 'SmartHub' },
|
|
|
+ { label: 'Acceleronix', value: 'Acceleronix' },
|
|
|
+]
|
|
|
+
|
|
|
const tableData = ref<SimCardInfo[]>([])
|
|
|
-const dataTableMaxWidth = ref<number | undefined>(undefined)
|
|
|
+const dataTableMaxWidth = ref<number | undefined>(1120)
|
|
|
const tableColumns = computed<DataTableColumns<SimCardInfo>>(createColumns)
|
|
|
const tablePagination = reactive<PaginationProps>({
|
|
|
simple: false,
|
|
|
@@ -338,8 +365,9 @@ const querySimCardInfoList = async (
|
|
|
pageNum: number,
|
|
|
search: string,
|
|
|
status: string | undefined,
|
|
|
+ platform: string | undefined,
|
|
|
) => {
|
|
|
- const responseList = await getSimCardInfo(pageNum, pageSize, search, status)
|
|
|
+ const responseList = await getSimCardInfo(pageNum, pageSize, search, status, platform)
|
|
|
if (responseList.data != null) {
|
|
|
tableData.value = responseList.data
|
|
|
} else {
|
|
|
@@ -352,7 +380,10 @@ const handleListQuery = async () => {
|
|
|
const pageSize = tablePagination.pageSize ?? 10
|
|
|
const pageNum = tablePagination.page ?? 1
|
|
|
|
|
|
- await querySimCardInfoList(pageSize, pageNum, searchKeyword.value, selectStatus.value)
|
|
|
+ const status = selectStatus.value.length > 0 ? selectStatus.value.join(',') : undefined
|
|
|
+ const platform = selectPlatform.value.length > 0 ? selectPlatform.value.join(',') : undefined
|
|
|
+
|
|
|
+ await querySimCardInfoList(pageSize, pageNum, searchKeyword.value, status, platform)
|
|
|
}
|
|
|
|
|
|
onMounted(async () => {
|