fetch(add): 新增

src/views/asset-management/device-list/index.vue

@@ -0,0 +1,674 @@
+<template>
+  <ArtTableFullScreen>
+    <div class="device-list-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"
+        >
+          <template #left>
+            <ElButton
+              type="primary"
+              @click="handleBatchAllocate"
+              :disabled="!selectedDevices.length"
+            >
+              批量分配
+            </ElButton>
+            <ElButton @click="handleBatchRecall" :disabled="!selectedDevices.length">
+              批量回收
+            </ElButton>
+            <ElButton @click="handleImportDevice">导入设备</ElButton>
+          </template>
+        </ArtTableHeader>
+
+        <!-- 表格 -->
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="deviceList"
+          :currentPage="pagination.page"
+          :pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :marginTop="10"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          @selection-change="handleSelectionChange"
+        >
+          <template #default>
+            <ElTableColumn type="selection" width="55" />
+            <ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
+          </template>
+        </ArtTable>
+
+        <!-- 批量分配对话框 -->
+        <ElDialog v-model="allocateDialogVisible" title="批量分配设备" width="600px">
+          <ElForm ref="allocateFormRef" :model="allocateForm" :rules="allocateRules" label-width="120px">
+            <ElFormItem label="已选设备数">
+              <span style="color: #409eff; font-weight: bold">{{ selectedDevices.length }}</span> 台
+            </ElFormItem>
+            <ElFormItem label="目标店铺" prop="target_shop_id">
+              <ElSelect
+                v-model="allocateForm.target_shop_id"
+                placeholder="请选择目标店铺"
+                filterable
+                style="width: 100%"
+              >
+                <ElOption
+                  v-for="shop in shopList"
+                  :key="shop.id"
+                  :label="shop.name"
+                  :value="shop.id"
+                />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem label="备注">
+              <ElInput
+                v-model="allocateForm.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入备注信息（选填）"
+              />
+            </ElFormItem>
+          </ElForm>
+
+          <!-- 分配结果 -->
+          <div v-if="allocateResult" style="margin-top: 20px">
+            <ElAlert
+              :type="allocateResult.fail_count === 0 ? 'success' : 'warning'"
+              :closable="false"
+              style="margin-bottom: 10px"
+            >
+              <template #title>
+                成功分配 {{ allocateResult.success_count }} 台，失败 {{ allocateResult.fail_count }} 台
+              </template>
+            </ElAlert>
+            <div v-if="allocateResult.failed_items && allocateResult.failed_items.length > 0">
+              <div style="margin-bottom: 10px; font-weight: bold">失败详情：</div>
+              <div
+                v-for="item in allocateResult.failed_items"
+                :key="item.device_id"
+                style="margin-bottom: 8px; color: #f56c6c; font-size: 12px"
+              >
+                设备号: {{ item.device_no }} - {{ item.reason }}
+              </div>
+            </div>
+          </div>
+
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="handleCloseAllocateDialog">
+                {{ allocateResult ? '关闭' : '取消' }}
+              </ElButton>
+              <ElButton
+                v-if="!allocateResult"
+                type="primary"
+                @click="handleConfirmAllocate"
+                :loading="allocateLoading"
+              >
+                确认分配
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+
+        <!-- 批量回收对话框 -->
+        <ElDialog v-model="recallDialogVisible" title="批量回收设备" width="600px">
+          <ElForm ref="recallFormRef" :model="recallForm" label-width="120px">
+            <ElFormItem label="已选设备数">
+              <span style="color: #e6a23c; font-weight: bold">{{ selectedDevices.length }}</span> 台
+            </ElFormItem>
+            <ElFormItem label="备注">
+              <ElInput
+                v-model="recallForm.remark"
+                type="textarea"
+                :rows="3"
+                placeholder="请输入备注信息（选填）"
+              />
+            </ElFormItem>
+          </ElForm>
+
+          <!-- 回收结果 -->
+          <div v-if="recallResult" style="margin-top: 20px">
+            <ElAlert
+              :type="recallResult.fail_count === 0 ? 'success' : 'warning'"
+              :closable="false"
+              style="margin-bottom: 10px"
+            >
+              <template #title>
+                成功回收 {{ recallResult.success_count }} 台，失败 {{ recallResult.fail_count }} 台
+              </template>
+            </ElAlert>
+            <div v-if="recallResult.failed_items && recallResult.failed_items.length > 0">
+              <div style="margin-bottom: 10px; font-weight: bold">失败详情：</div>
+              <div
+                v-for="item in recallResult.failed_items"
+                :key="item.device_id"
+                style="margin-bottom: 8px; color: #f56c6c; font-size: 12px"
+              >
+                设备号: {{ item.device_no }} - {{ item.reason }}
+              </div>
+            </div>
+          </div>
+
+          <template #footer>
+            <div class="dialog-footer">
+              <ElButton @click="handleCloseRecallDialog">
+                {{ recallResult ? '关闭' : '取消' }}
+              </ElButton>
+              <ElButton
+                v-if="!recallResult"
+                type="primary"
+                @click="handleConfirmRecall"
+                :loading="recallLoading"
+              >
+                确认回收
+              </ElButton>
+            </div>
+          </template>
+        </ElDialog>
+      </ElCard>
+    </div>
+  </ArtTableFullScreen>
+</template>
+
+<script setup lang="ts">
+  import { h } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { DeviceService, ShopService } from '@/api/modules'
+  import { ElMessage, ElMessageBox, ElTag, ElSwitch } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import type {
+    Device,
+    DeviceStatus,
+    AllocateDevicesResponse,
+    RecallDevicesResponse
+  } from '@/types/api'
+  import type { SearchFormItem } from '@/types'
+  import { useCheckedColumns } from '@/composables/useCheckedColumns'
+  import ArtButtonTable from '@/components/core/forms/ArtButtonTable.vue'
+  import { formatDateTime } from '@/utils/business/format'
+  import { CommonStatus, getStatusText } from '@/config/constants'
+
+  defineOptions({ name: 'DeviceList' })
+
+  const router = useRouter()
+  const loading = ref(false)
+  const allocateLoading = ref(false)
+  const recallLoading = ref(false)
+  const tableRef = ref()
+  const allocateFormRef = ref<FormInstance>()
+  const recallFormRef = ref<FormInstance>()
+  const allocateDialogVisible = ref(false)
+  const recallDialogVisible = ref(false)
+  const selectedDevices = ref<Device[]>([])
+  const shopList = ref<any[]>([])
+  const allocateResult = ref<AllocateDevicesResponse | null>(null)
+  const recallResult = ref<RecallDevicesResponse | null>(null)
+
+  // 搜索表单初始值
+  const initialSearchState = {
+    device_no: '',
+    device_name: '',
+    status: undefined as DeviceStatus | undefined,
+    shop_id: undefined as number | undefined,
+    batch_no: '',
+    device_type: '',
+    manufacturer: '',
+    created_at_start: '',
+    created_at_end: ''
+  }
+
+  // 搜索表单
+  const searchForm = reactive({ ...initialSearchState })
+
+  // 搜索表单配置
+  const searchFormItems: SearchFormItem[] = [
+    {
+      label: '设备号',
+      prop: 'device_no',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入设备号'
+      }
+    },
+    {
+      label: '设备名称',
+      prop: 'device_name',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入设备名称'
+      }
+    },
+    {
+      label: '状态',
+      prop: 'status',
+      type: 'select',
+      config: {
+        clearable: true,
+        placeholder: '请选择状态',
+        options: [
+          { label: '在库', value: 1 },
+          { label: '已分销', value: 2 },
+          { label: '已激活', value: 3 },
+          { label: '已停用', value: 4 }
+        ]
+      }
+    },
+    {
+      label: '批次号',
+      prop: 'batch_no',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入批次号'
+      }
+    },
+    {
+      label: '设备类型',
+      prop: 'device_type',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入设备类型'
+      }
+    },
+    {
+      label: '制造商',
+      prop: 'manufacturer',
+      type: 'input',
+      config: {
+        clearable: true,
+        placeholder: '请输入制造商'
+      }
+    }
+  ]
+
+  // 分页
+  const pagination = reactive({
+    page: 1,
+    pageSize: 20,
+    total: 0
+  })
+
+  // 列配置
+  const columnOptions = [
+    { label: 'ID', prop: 'id' },
+    { label: '设备号', prop: 'device_no' },
+    { label: '设备名称', prop: 'device_name' },
+    { label: '设备型号', prop: 'device_model' },
+    { label: '设备类型', prop: 'device_type' },
+    { label: '制造商', prop: 'manufacturer' },
+    { label: '最大插槽数', prop: 'max_sim_slots' },
+    { label: '已绑定卡数', prop: 'bound_card_count' },
+    { label: '状态', prop: 'status' },
+    { label: '店铺', prop: 'shop_name' },
+    { label: '批次号', prop: 'batch_no' },
+    { label: '激活时间', prop: 'activated_at' },
+    { label: '创建时间', prop: 'created_at' },
+    { label: '操作', prop: 'operation' }
+  ]
+
+  const deviceList = ref<Device[]>([])
+
+  // 分配表单
+  const allocateForm = reactive({
+    target_shop_id: undefined as number | undefined,
+    remark: ''
+  })
+
+  // 分配表单验证规则
+  const allocateRules = reactive<FormRules>({
+    target_shop_id: [{ required: true, message: '请选择目标店铺', trigger: 'change' }]
+  })
+
+  // 回收表单
+  const recallForm = reactive({
+    remark: ''
+  })
+
+  // 动态列配置
+  const { columnChecks, columns } = useCheckedColumns(() => [
+    {
+      prop: 'id',
+      label: 'ID',
+      width: 80
+    },
+    {
+      prop: 'device_no',
+      label: '设备号',
+      minWidth: 150
+    },
+    {
+      prop: 'device_name',
+      label: '设备名称',
+      minWidth: 120
+    },
+    {
+      prop: 'device_model',
+      label: '设备型号',
+      minWidth: 120
+    },
+    {
+      prop: 'device_type',
+      label: '设备类型',
+      width: 100
+    },
+    {
+      prop: 'manufacturer',
+      label: '制造商',
+      minWidth: 120
+    },
+    {
+      prop: 'max_sim_slots',
+      label: '最大插槽数',
+      width: 100,
+      align: 'center'
+    },
+    {
+      prop: 'bound_card_count',
+      label: '已绑定卡数',
+      width: 110,
+      align: 'center',
+      formatter: (row: Device) => {
+        const color = row.bound_card_count > 0 ? '#67c23a' : '#909399'
+        return h('span', { style: { color, fontWeight: 'bold' } }, row.bound_card_count)
+      }
+    },
+    {
+      prop: 'status',
+      label: '状态',
+      width: 100,
+      formatter: (row: Device) => {
+        const statusMap: Record<number, { text: string; type: any }> = {
+          1: { text: '在库', type: 'info' },
+          2: { text: '已分销', type: 'primary' },
+          3: { text: '已激活', type: 'success' },
+          4: { text: '已停用', type: 'danger' }
+        }
+        const status = statusMap[row.status] || { text: '未知', type: 'info' }
+        return h(ElTag, { type: status.type }, () => status.text)
+      }
+    },
+    {
+      prop: 'shop_name',
+      label: '店铺',
+      minWidth: 120,
+      formatter: (row: Device) => row.shop_name || '-'
+    },
+    {
+      prop: 'batch_no',
+      label: '批次号',
+      minWidth: 120,
+      formatter: (row: Device) => row.batch_no || '-'
+    },
+    {
+      prop: 'activated_at',
+      label: '激活时间',
+      width: 180,
+      formatter: (row: Device) => (row.activated_at ? formatDateTime(row.activated_at) : '-')
+    },
+    {
+      prop: 'created_at',
+      label: '创建时间',
+      width: 180,
+      formatter: (row: Device) => formatDateTime(row.created_at)
+    },
+    {
+      prop: 'operation',
+      label: '操作',
+      width: 150,
+      fixed: 'right',
+      formatter: (row: Device) => {
+        return h('div', { style: 'display: flex; gap: 8px;' }, [
+          h(ArtButtonTable, {
+            type: 'view',
+            onClick: () => viewDeviceDetail(row)
+          }),
+          h(ArtButtonTable, {
+            type: 'delete',
+            onClick: () => deleteDevice(row)
+          })
+        ])
+      }
+    }
+  ])
+
+  onMounted(() => {
+    getTableData()
+    loadShopList()
+  })
+
+  // 加载店铺列表
+  const loadShopList = async () => {
+    try {
+      const res = await ShopService.getShops({ page: 1, pageSize: 1000 })
+      if (res.code === 0) {
+        shopList.value = res.data.items || []
+      }
+    } catch (error) {
+      console.error('获取店铺列表失败:', error)
+    }
+  }
+
+  // 获取设备列表
+  const getTableData = async () => {
+    loading.value = true
+    try {
+      const params = {
+        page: pagination.page,
+        page_size: pagination.pageSize,
+        device_no: searchForm.device_no || undefined,
+        device_name: searchForm.device_name || undefined,
+        status: searchForm.status,
+        shop_id: searchForm.shop_id,
+        batch_no: searchForm.batch_no || undefined,
+        device_type: searchForm.device_type || undefined,
+        manufacturer: searchForm.manufacturer || undefined,
+        created_at_start: searchForm.created_at_start || undefined,
+        created_at_end: searchForm.created_at_end || undefined
+      }
+      const res = await DeviceService.getDevices(params)
+      if (res.code === 0 && res.data) {
+        deviceList.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()
+  }
+
+  // 处理选择变化
+  const handleSelectionChange = (selection: Device[]) => {
+    selectedDevices.value = selection
+  }
+
+  // 查看设备详情
+  const viewDeviceDetail = (row: Device) => {
+    router.push({
+      path: '/asset-management/device-detail',
+      query: { id: row.id }
+    })
+  }
+
+  // 删除设备
+  const deleteDevice = (row: Device) => {
+    ElMessageBox.confirm(`确定删除设备 ${row.device_no} 吗？删除后将自动解绑所有卡。`, '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'error'
+    })
+      .then(async () => {
+        try {
+          await DeviceService.deleteDevice(row.id)
+          ElMessage.success('删除成功')
+          await getTableData()
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('删除失败')
+        }
+      })
+      .catch(() => {
+        // 用户取消删除
+      })
+  }
+
+  // 批量分配
+  const handleBatchAllocate = () => {
+    if (selectedDevices.value.length === 0) {
+      ElMessage.warning('请先选择要分配的设备')
+      return
+    }
+    allocateForm.target_shop_id = undefined
+    allocateForm.remark = ''
+    allocateResult.value = null
+    allocateDialogVisible.value = true
+  }
+
+  // 确认批量分配
+  const handleConfirmAllocate = async () => {
+    if (!allocateFormRef.value) return
+
+    await allocateFormRef.value.validate(async (valid) => {
+      if (valid) {
+        allocateLoading.value = true
+        try {
+          const data = {
+            device_ids: selectedDevices.value.map((d) => d.id),
+            target_shop_id: allocateForm.target_shop_id!,
+            remark: allocateForm.remark
+          }
+          const res = await DeviceService.allocateDevices(data)
+          if (res.code === 0) {
+            allocateResult.value = res.data
+            if (res.data.fail_count === 0) {
+              ElMessage.success('全部分配成功')
+              setTimeout(() => {
+                handleCloseAllocateDialog()
+                getTableData()
+              }, 1500)
+            } else {
+              ElMessage.warning(`部分分配失败，请查看失败详情`)
+            }
+          }
+        } catch (error) {
+          console.error(error)
+          ElMessage.error('分配失败')
+        } finally {
+          allocateLoading.value = false
+        }
+      }
+    })
+  }
+
+  // 关闭分配对话框
+  const handleCloseAllocateDialog = () => {
+    allocateDialogVisible.value = false
+    allocateResult.value = null
+    if (allocateFormRef.value) {
+      allocateFormRef.value.resetFields()
+    }
+  }
+
+  // 批量回收
+  const handleBatchRecall = () => {
+    if (selectedDevices.value.length === 0) {
+      ElMessage.warning('请先选择要回收的设备')
+      return
+    }
+    recallForm.remark = ''
+    recallResult.value = null
+    recallDialogVisible.value = true
+  }
+
+  // 确认批量回收
+  const handleConfirmRecall = async () => {
+    recallLoading.value = true
+    try {
+      const data = {
+        device_ids: selectedDevices.value.map((d) => d.id),
+        remark: recallForm.remark
+      }
+      const res = await DeviceService.recallDevices(data)
+      if (res.code === 0) {
+        recallResult.value = res.data
+        if (res.data.fail_count === 0) {
+          ElMessage.success('全部回收成功')
+          setTimeout(() => {
+            handleCloseRecallDialog()
+            getTableData()
+          }, 1500)
+        } else {
+          ElMessage.warning(`部分回收失败，请查看失败详情`)
+        }
+      }
+    } catch (error) {
+      console.error(error)
+      ElMessage.error('回收失败')
+    } finally {
+      recallLoading.value = false
+    }
+  }
+
+  // 关闭回收对话框
+  const handleCloseRecallDialog = () => {
+    recallDialogVisible.value = false
+    recallResult.value = null
+    recallForm.remark = ''
+  }
+
+  // 导入设备
+  const handleImportDevice = () => {
+    router.push('/batch/device-import')
+  }
+</script>
+
+<style scoped lang="scss">
+  .device-list-page {
+    height: 100%;
+  }
+</style>