fetch(add): 分配记录,批量分配/回收, 单卡列表, 任务列表, 导入ICCID

src/views/asset-management/task-management/index.vue

@@ -0,0 +1,329 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="task-management-page" id="table-full-screen">
+      <!-- 搜索栏 -->
+      <ArtSearchBar
+        v-model:filter="searchForm"
+        :items="searchFormItems"
+        @reset="handleReset"
+        @search="handleSearch"
+      ></ArtSearchBar>
+
+      <ElCard shadow="never" class="art-table-card">
+        <!-- 表格头部 -->
+        <ArtTableHeader
+          :columnList="columnOptions"
+          v-model:columns="columnChecks"
+          @refresh="handleRefresh"
+        />
+
+        <!-- 表格 -->
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="taskList"
+          :currentPage="pagination.page"
+          :pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :marginTop="10"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #default>
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { CardService } from '@/api/modules'
+  import { ElMessage, ElTag } from 'element-plus'
+  import type { SearchFormItem } from '@/types'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import { formatDateTime } from '@/utils/business/format'
+  import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import type { IotCardImportTask, IotCardImportTaskStatus } from '@/types/api/card'
+
+  defineOptions({ name: 'TaskManagement' })
+
+  const router = useRouter()
+  const loading = ref(false)
+  const tableRef = ref()
+
+  // 搜索表单初始值
+  const initialSearchState = {
+    status: undefined,
+    carrier_id: undefined,
+    batch_no: '',
+    start_time: '',
+    end_time: ''
+  }
+
+  // 搜索表单
+  const searchForm = reactive({ ...initialSearchState })
+
+  // 分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 搜索表单配置
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: '任务状态',
+      prop: 'status',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '待处理', value: 1 },
+        { label: '处理中', value: 2 },
+        { label: '已完成', value: 3 },
+        { label: '失败', value: 4 }
+      ]
+    },
+    {
+      label: '运营商',
+      prop: 'carrier_id',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '全部'
+      },
+      options: () => [
+        { label: '中国移动', value: 1 },
+        { label: '中国联通', value: 2 },
+        { label: '中国电信', value: 3 }
+      ]
+    },
+    {
+      label: '批次号',
+      prop: 'batch_no',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入批次号'
+      }
+    },
+    {
+      label: '创建时间',
+      prop: 'dateRange',
+      type: 'daterange',
+      config: {
+        type: 'daterange',
+        startPlaceholder: '开始时间',
+        endPlaceholder: '结束时间',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss'
+      }
+    }
+  ]
+
+  // 列配置
+  const columnOptions = [
+    { label: '任务编号', prop: 'task_no' },
+    { label: '批次号', prop: 'batch_no' },
+    { label: '运营商', prop: 'carrier_name' },
+    { label: '文件名', prop: 'file_name' },
+    { label: '任务状态', prop: 'status' },
+    { label: '总数', prop: 'total_count' },
+    { label: '成功数', prop: 'success_count' },
+    { label: '失败数', prop: 'fail_count' },
+    { label: '跳过数', prop: 'skip_count' },
+    { label: '创建时间', prop: 'created_at' },
+    { label: '完成时间', prop: 'completed_at' },
+    { label: '操作', prop: 'operation' }
+  ]
+
+  const taskList = ref<IotCardImportTask[]>([])
+
+  // 获取状态标签类型
+  const getStatusType = (status: IotCardImportTaskStatus) => {
+    switch (status) {
+      case 1:
+        return 'info'
+      case 2:
+        return 'warning'
+      case 3:
+        return 'success'
+      case 4:
+        return 'danger'
+      default:
+        return 'info'
+    }
+  }
+
+  // 查看详情
+  const viewDetail = (row: IotCardImportTask) => {
+    router.push({
+      path: '/asset-management/task-detail',
+      query: { id: row.id }
+    })
+  }
+
+  // 动态列配置
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'task_no',
+      label: '任务编号',
+      width: 150
+    },
+    {
+      prop: 'batch_no',
+      label: '批次号',
+      width: 120
+    },
+    {
+      prop: 'carrier_name',
+      label: '运营商',
+      width: 100
+    },
+    {
+      prop: 'file_name',
+      label: '文件名',
+      minWidth: 200
+    },
+    {
+      prop: 'status',
+      label: '任务状态',
+      width: 100,
+      formatter: (row: IotCardImportTask) => {
+        return h(ElTag, { type: getStatusType(row.status) }, () => row.status_text)
+      }
+    },
+    {
+      prop: 'total_count',
+      label: '总数',
+      width: 80
+    },
+    {
+      prop: 'success_count',
+      label: '成功数',
+      width: 80
+    },
+    {
+      prop: 'fail_count',
+      label: '失败数',
+      width: 80,
+      formatter: (row: IotCardImportTask) => {
+        const type = row.fail_count > 0 ? 'danger' : 'success'
+        return h(ElTag, { type, size: 'small' }, () => row.fail_count)
+      }
+    },
+    {
+      prop: 'skip_count',
+      label: '跳过数',
+      width: 80
+    },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      width: 160,
+      formatter: (row: IotCardImportTask) => formatDateTime(row.created_at)
+    },
+    {
+      prop: 'completed_at',
+      label: '完成时间',
+      width: 160,
+      formatter: (row: IotCardImportTask) => (row.completed_at ? formatDateTime(row.completed_at) : '-')
+    },
+    {
+      prop: 'operation',
+      label: '操作',
+      width: 100,
+      fixed: 'right',
+      formatter: (row: IotCardImportTask) => {
+        return h(ArtButtonTable, {
+          type: 'view',
+          onClick: () => viewDetail(row)
+        })
+      }
+    }
+  ])
+
+  onMounted(() => {
+    getTableData()
+  })
+
+  // 获取任务列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params: any = {
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        status: searchForm.status,
+        carrier_id: searchForm.carrier_id,
+        batch_no: searchForm.batch_no || undefined
+      }
+
+      // 处理时间范围
+      if (searchForm.dateRange && Array.isArray(searchForm.dateRange)) {
+        params.start_time = searchForm.dateRange[0]
+        params.end_time = searchForm.dateRange[1]
+      }
+
+      // 清理空值
+      Object.keys(params).forEach((key) => {
+        if (params[key] === '' || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      const res = await CardService.getIotCardImportTasks(params)
+      if (res.code === 0) {
+        taskList.value = res.data.list || []
+        pagination.total = res.data.total || 0
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('获取任务列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 重置搜索
+  const handleReset = () => {
+    Object.assign(searchForm, { ...initialSearchState })
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 搜索
+  const handleSearch = () => {
+    pagination.page = 1
+    getTableData()
+  }
+
+  // 刷新表格
+  const handleRefresh = () => {
+    getTableData()
+  }
+
+  // 处理表格分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getTableData()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.page = newCurrentPage
+    getTableData()
+  }
+</script>
+
+<style lang="scss" scoped>
+  .task-management-page {
+    // Task management page styles
+  }
+</style>