FranklinWH-Toolbox/src/views/sim-card-manage/index.vue

<template>
  <div class="main-wrap p-4 flex flex-col gap-y-4">
    <NCard
      ref="mainCardRef"
      class="h-full"
      content-class="h-full flex flex-col"
      :style="cardHeight"
    >
      <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">
            <NInput
              v-model:value="searchKeyword"
              round
              clearable
              placeholder="搜索..."
              style="max-width: 200px"
              size="small"
            />
          </NFormItem>
          <NFormItem>
            <NButton text :focusable="false" style="font-size: 18px" @click="clickSearch">
              <span class="i-mdi:search" />
            </NButton>
          </NFormItem>
        </NForm>
        <NButton
          class="shrink-0"
          text
          :focusable="false"
          style="font-size: 18px"
          disabled
          @click="clickExportSiteInfo"
        >
          <span class="i-material-symbols:download-rounded" />
        </NButton>
      </div>
      <NDivider style="margin: 16px 0" />
      <div class="flex flex-1 flex-col min-h-0">
        <div ref="tableWrapper" class="flex-1 min-h-0 overflow-hidden">
          <NDataTable
            ref="dataTableRef"
            v-model:checked-row-keys="checkedRowKeys"
            class="max-height-auto"
            :remote="true"
            size="small"
            :columns="tableColumns"
            :data="tableData"
            :row-key="tableRowKey"
            :loading="isRequestLoading"
            striped
            :single-line="false"
            :style="{ height: `${tableHeight}px` }"
            flex-height
            :scroll-x="dataTableMaxWidth"
          />
        </div>
        <div class="mt-3 flex items-end justify-between">
          <div class="flex gap-x-3 items-center">
            <span>已选择&nbsp;{{ checkedRowKeys.length }}&nbsp; 条</span>
          </div>
          <NPagination v-bind="tablePagination" :prefix="paginationPrefix" />
        </div>
      </div>
    </NCard>
    <SimCardDataView v-model:show="showSimCardDataView" :data="simCardData" />
    <SiteInfoView ref="siteInfoViewRef" />
  </div>
</template>

<script setup lang="tsx">
import { useClipboard } from '@vueuse/core'
import {
  useDialog,
  useMessage,
  NCard,
  NButton,
  NInput,
  NDivider,
  NDataTable,
  NNumberAnimation,
  NSelect,
  NForm,
  NFormItem,
  NScrollbar,
  NSpin,
} from 'naive-ui'
import type { PaginationProps, DataTableColumns, SelectOption } from 'naive-ui'
import { useFullCard } from '@/composable/comp/useFullCard'
import { getSimCardInfo } from '@/service/simCardManage'
import type {
  SimCardInfo,
  SimCardMonthlyData,
  SimCardPlatform,
  SimCardStatus,
} from '@/service/simCardManage/interface'
import SimCardDataView from './component/simCardDataView.vue'
import SiteInfoView from '../site-info-manage/component/siteInfoView.vue'
import { useSimCardMonthlyCache, cacheKey } from './useSimCardMonthlyCache'

const dialog = useDialog()
const message = useMessage()

const { memoryCache, loadingSet, failedSet, computeDailyIncrement, onPageChange, getWithPriority } =
  useSimCardMonthlyCache()

const mainCardRef = useTemplateRef<InstanceType<typeof NCard>>('mainCardRef')
const dataTableRef = useTemplateRef<InstanceType<typeof NDataTable>>('dataTableRef')
const siteInfoViewRef = useTemplateRef<InstanceType<typeof SiteInfoView>>('siteInfoViewRef')

const { height } = useFullCard(mainCardRef)

const searchKeyword = ref('')

const clickSearch = async () => {
  // 请求查询数据
  handleListQuery()
}

const isRequestLoading = ref(false)
const checkedRowKeys = ref<Array<number | string>>([])

const tableWrapper = ref<HTMLDivElement | null>(null)
const tableHeight = ref(100)

const cardHeight = computed(() => {
  return { height: `${height.value === undefined || height.value === 0 ? 480 : height.value}px` }
})

const prevUserListTotal = ref(0)

const paginationPrefix: PaginationProps['prefix'] = (info) => {
  const { itemCount } = info
  return (
    itemCount && (
      <div>
        <span>总 &nbsp; </span>
        <NNumberAnimation
          from={prevUserListTotal.value}
          to={itemCount}
          onFinish={() => {
            prevUserListTotal.value = itemCount
          }}
        />
        <span> &nbsp; 条 </span>
      </div>
    )
  )
}

const tableRowKey = (rowData: SimCardInfo) => {
  return rowData.giccid
}

const showSimCardDataView = ref<boolean>(false)
const simCardData = ref<SimCardMonthlyData>({
  simId: '',
  updateTime: '',
  month: '',
  allDataUsage: 0,
  dailyUsage: {},
})

function createColumns(): DataTableColumns<SimCardInfo> {
  return [
    {
      title: 'No.',
      key: '',
      width: 50,
      minWidth: 50,
      fixed: 'left',
      render(_, index) {
        const page = tablePagination.page ?? 1
        const pageSize = tablePagination.pageSize ?? 10
        const n = (page - 1) * pageSize + index + 1
        return `${n}`
      },
    },
    {
      title: 'GICCID',
      key: 'giccid',
      width: 200,
      fixed: 'left',
      render(rowData, rowIndex) {
        return h(
          'div',
          { class: 'flex gap-1' },
          {
            default: () => [
              h(
                NButton,
                {
                  text: true,
                  onClick: () => {
                    getWithPriority(rowData.giccid, rowData.month)
                      .then((resp) => {
                        simCardData.value = resp
                        showSimCardDataView.value = true
                      })
                      .catch((err: unknown) => {
                        if (err instanceof Error) {
                          message.error(err.message)
                        } else {
                          message.error(String(err))
                        }
                      })
                  },
                },
                { default: () => rowData.giccid },
              ),
              h(
                NButton,
                {
                  text: true,
                  focusable: false,
                  onClick: () => {
                    useClipboard()
                      .copy(rowData.giccid)
                      .then(() => {
                        message.success('复制成功')
                      })
                      .catch(() => {
                        message.error('复制失败')
                      })
                  },
                },
                {
                  default: () => h('span', { class: 'i-ph:copy-duotone' }),
                },
              ),
            ],
          },
        )
      },
    },
    {
      title: 'SN',
      key: 'sn',
      width: 200,
      render(rowData, rowIndex) {
        return h(
          NScrollbar,
          {
            style: 'max-height: 120px',
            trigger: 'none',
          },
          {
            // default: () => rowData.sn.join(',\n'),
            default: () => [
              ...rowData.sn.map((sn) => {
                return h(
                  NButton,
                  {
                    text: true,
                    onClick: () => siteInfoViewRef.value?.show(sn),
                  },
                  {
                    default: () => sn,
                  },
                )
              }),
            ],
          },
        )
      },
    },
    {
      title: 'Status',
      key: 'status',
      width: 150,
    },
    {
      title: 'Platform',
      key: 'platform',
      width: 120,
    },
    {
      title: 'Usage (MB)',
      key: 'allDataUsage',
      minWidth: 100,
      render(rowData) {
        return (rowData.allDataUsage / 1024).toFixed(2)
      },
    },
    {
      title: 'Increment (MB)',
      key: 'increment',
      minWidth: 130,
      render(rowData) {
        const key = cacheKey(rowData.giccid, rowData.month)

        // 请求失败：停止转圈，显示 "-"
        if (failedSet.has(key)) return '-'

        // 正在加载 或 尚未开始加载：显示加载态
        if (loadingSet.has(key) || !memoryCache.has(key)) {
          return h(NSpin, { size: 'small' })
        }

        const increment = computeDailyIncrement(rowData.giccid, rowData.month)
        if (increment === null) return '-'
        const valueMB = (increment / 1024).toFixed(2)
        return increment >= 0 ? `+${valueMB}` : valueMB
      },
    },
    {
      title: 'UpdateTime',
      key: 'updateTime',
      width: 300,
    },
  ]
}

const selectStatus = ref<SimCardStatus[]>([])
const optionsStatus: SelectOption[] = [
  { label: 'UNKNOWN', value: 'UNKNOWN' },
  { label: 'NOT_ACTIVATED', value: 'NOT_ACTIVATED' },
  { label: 'ACTIVATED', value: 'ACTIVATED' },
  { label: 'DEACTIVATED', value: 'DEACTIVATED' },
  { 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>(1250)
const tableColumns = computed<DataTableColumns<SimCardInfo>>(createColumns)
const tablePagination = reactive<PaginationProps>({
  simple: false,
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100],
  pageSlot: 5,
  itemCount: 0,
  showQuickJumper: false,
  showQuickJumpDropdown: true,
  onUpdatePage: (page: number) => {
    tablePagination.page = page
    handleListQuery()
  },
  onUpdatePageSize: (pageSize: number) => {
    tablePagination.pageSize = pageSize
    tablePagination.page = 1
    handleListQuery()
  },
})

const clickExportSiteInfo = () => {
  dialog.warning({
    title: '确认导出',
    content: `是否确定导出当前查询条件的${tablePagination.itemCount}条数据？`,
    positiveText: '确定',
    negativeText: '取消',
    maskClosable: false,
    onPositiveClick: () => {
      console.log('开始导出')
    },
    onNegativeClick: () => {
      console.log('取消导出')
    },
  })
}

const querySimCardInfoList = async (
  pageSize: number,
  pageNum: number,
  search: string,
  status: string | undefined,
  platform: string | undefined,
) => {
  const responseList = await getSimCardInfo(pageNum, pageSize, search, status, platform)
  if (responseList.data != null) {
    tableData.value = responseList.data
  } else {
    tableData.value = []
  }
  tablePagination.itemCount = responseList.total

  // 触发预加载队列（已缓存的会被跳过）
  if (tableData.value.length > 0) {
    onPageChange(tableData.value)
  }
}

const handleListQuery = async () => {
  const pageSize = tablePagination.pageSize ?? 10
  const pageNum = tablePagination.page ?? 1

  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 () => {
  // 请求查询数据
  await handleListQuery()

  nextTick(() => {
    const observer = new ResizeObserver((entries) => {
      tableHeight.value = entries[0].contentRect.height
    })

    if (tableWrapper.value) {
      observer.observe(tableWrapper.value)
    }
  })
})
</script>