ajy/code/frontend/src/views/device/index.vue

<template>
  <div class="page-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <el-form :model="query" inline>
        <el-form-item label="设备编号">
          <el-input v-model="query.deviceCode" placeholder="请输入设备编号" clearable style="width:160px" />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="query.deviceName" placeholder="请输入设备名称" clearable style="width:160px" />
        </el-form-item>
        <el-form-item label="关联用户/成员">
          <el-input v-model="query.boundUserName" placeholder="姓名模糊搜索" clearable style="width:160px" />
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="query.deviceType" placeholder="全部" clearable style="width:120px">
            <el-option label="家庭设备" :value="1" />
            <el-option label="公共设备" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="在线状态">
          <el-select v-model="query.onlineStatus" placeholder="全部" clearable style="width:110px">
            <el-option label="在线" :value="1" />
            <el-option label="离线" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="固件版本">
          <el-select v-model="query.firmwareVersion" placeholder="全部" clearable style="width:130px">
            <el-option label="v1.2.0" value="v1.2.0" />
            <el-option label="v1.1.0" value="v1.1.0" />
            <el-option label="v1.0.0" value="v1.0.0" />
          </el-select>
        </el-form-item>
        <el-form-item label="省">
          <el-select-v2
            v-model="query.provinceCode"
            :options="provinceList"
            placeholder="全部"
            clearable
            filterable
            style="width:160px"
            @change="onQueryProvinceChange"
          />
        </el-form-item>
        <el-form-item label="市">
          <el-select-v2
            v-model="query.cityCode"
            :options="queryCityList"
            placeholder="全部"
            clearable
            filterable
            style="width:200px"
            @change="onQueryCityChange"
          />
        </el-form-item>
        <el-form-item label="区/县">
          <el-select-v2
            v-model="query.districtCode"
            :options="queryDistrictList"
            placeholder="全部"
            clearable
            filterable
            style="width:240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮区 -->
    <el-card class="action-card">
      <div class="action-bar">
        <div class="action-left">
          <ExcelImport :on-import="handleImport" button-text="导入" @success="onImportSuccess" />
          <ExcelExport
            :headers="exportHeaders"
            :data="tableData"
            file-name="设备列表"
          />
          <el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
          <el-button
            type="danger"
            :icon="Delete"
            :disabled="selectedIds.length === 0"
            @click="handleBatchDelete"
          >批量删除</el-button>
        </div>
      </div>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table
        :data="tableData"
        v-loading="loading"
        border
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="deviceCode" label="设备编号" min-width="110" />
        <el-table-column prop="deviceName" label="设备名称" min-width="120" />
        <el-table-column prop="deviceModel" label="设备型号" width="90">
          <template #default="{ row }">{{ row.deviceModel || '-' }}</template>
        </el-table-column>
        <el-table-column label="设备类型" width="95" align="center">
          <template #default="{ row }">
            <el-tag :type="row.deviceType === 2 ? 'warning' : 'success'" size="small">
              {{ formatDeviceType(row.deviceType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="关联人数" width="95" align="center">
          <template #default="{ row }">
            <el-tag type="info" size="small">{{ row.boundUserCount || 0 }} 人</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="boundUserNames" label="关联用户/成员" min-width="130">
          <template #default="{ row }">{{ formatBoundUserNames(row) }}</template>
        </el-table-column>
        <el-table-column label="在线状态" width="90" align="center">
          <template #default="{ row }">
            <el-tag :type="row.onlineStatus === 1 ? 'success' : 'info'" size="small">
              {{ row.onlineStatus === 1 ? '在线' : '离线' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="firmwareVersion" label="固件版本" width="95">
          <template #default="{ row }">{{ row.firmwareVersion || '-' }}</template>
        </el-table-column>
        <el-table-column label="所在地区" min-width="160">
          <template #default="{ row }">{{ formatRegion(row) }}</template>
        </el-table-column>
        <el-table-column prop="lastOnlineTime" label="最后在线时间" width="170">
          <template #default="{ row }">{{ formatDateTime(row.lastOnlineTime) }}</template>
        </el-table-column>
        <el-table-column label="操作" width="170" align="center" fixed="right">
          <template #default="{ row }">
            <el-button size="small" type="primary" link @click="handleView(row)">查看</el-button>
            <el-button size="small" type="warning" link @click="handleEdit(row)">编辑</el-button>
            <el-button size="small" type="success" link @click="handleManageUsers(row)">
              {{ manageUsersText(row) }}
            </el-button>
            <el-button size="small" type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :total="total"
        :hide-on-single-page="false"
        layout="total, sizes, prev, pager, next, jumper"
        background
        class="pagination"
        @size-change="loadData"
        @current-change="loadData"
      />
    </el-card>

    <!-- 新增/编辑弹窗 -->
    <el-dialog
      v-model="formDialogVisible"
      :title="formMode === 'add' ? '新增设备' : (formMode === 'view' ? '查看设备' : '编辑设备')"
      width="580px"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <el-form
        :model="deviceForm"
        :rules="formMode !== 'view' ? deviceRules : {}"
        ref="deviceFormRef"
        label-width="100px"
      >
        <el-form-item label="设备编号" prop="deviceCode">
          <el-input
            v-model="deviceForm.deviceCode"
            placeholder="请输入设备编号（如：AJY001）"
            maxlength="50"
            :disabled="formMode !== 'add'"
          />
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-input
            v-model="deviceForm.deviceName"
            placeholder="请输入设备名称"
            maxlength="100"
            :disabled="formMode === 'view'"
          />
        </el-form-item>
        <el-form-item label="设备型号" prop="deviceModel">
          <el-select
            v-model="deviceForm.deviceModel"
            placeholder="请选择设备型号"
            style="width:100%"
            :disabled="formMode === 'view'"
          >
            <el-option label="AJY-2026" value="AJY-2026" />
            <el-option label="AJY-2025" value="AJY-2025" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备类型" prop="deviceType">
          <el-select
            v-model="deviceForm.deviceType"
            placeholder="请选择设备类型"
            style="width:100%"
            :disabled="isDeviceTypeDisabled"
          >
            <el-option label="家庭设备" :value="1" />
            <el-option label="公共设备" :value="2" />
          </el-select>
          <div v-if="deviceTypeDisabledTip" class="form-tip">{{ deviceTypeDisabledTip }}</div>
        </el-form-item>
        <el-form-item label="设备序列号" prop="serialNo">
          <el-input
            v-model="deviceForm.serialNo"
            placeholder="请输入设备序列号"
            maxlength="50"
            :disabled="formMode === 'view'"
          />
        </el-form-item>
        <el-form-item label="固件版本" prop="firmwareVersion">
          <el-input
            v-model="deviceForm.firmwareVersion"
            placeholder="请输入固件版本（如：v1.2.0）"
            maxlength="20"
            :disabled="formMode === 'view'"
          />
        </el-form-item>
        <el-form-item :label="formUserLabel">
          <el-select
            v-model="deviceForm.userIds"
            multiple
            filterable
            remote
            :remote-method="searchUserOptions"
            :loading="userOptionsLoading"
            :placeholder="formUserPlaceholder"
            style="width:100%"
            :disabled="formMode === 'view'"
          >
            <el-option
              v-for="u in userOptions"
              :key="u.id"
              :label="`${u.name}（${u.phone || '-'}）`"
              :value="u.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所在地区">
          <el-cascader
            v-model="deviceForm.regionCodes"
            :options="regionOptions"
            :props="regionCascaderProps"
            placeholder="请选择省/市/区"
            clearable
            filterable
            style="width:100%"
            :disabled="formMode === 'view'"
          />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
            v-model="deviceForm.address"
            placeholder="请输入详细地址（选填）"
            maxlength="200"
            :disabled="formMode === 'view'"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="deviceForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注（选填）"
            maxlength="200"
            show-word-limit
            :disabled="formMode === 'view'"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="formDialogVisible = false">{{ formMode === 'view' ? '关闭' : '取消' }}</el-button>
        <el-button
          v-if="formMode !== 'view'"
          type="primary"
          :loading="submitLoading"
          @click="submitForm"
        >保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Delete } from '@element-plus/icons-vue'
import { regionData, codeToText } from 'element-china-area-data'
import ExcelImport from '@/components/ExcelImport.vue'
import ExcelExport from '@/components/ExcelExport.vue'
import { formatDateTime } from '@/utils/date'
import { parsePageData } from '@/utils/pagination'
import {
  getDevicePageList,
  addDevice,
  updateDevice,
  deleteDevice,
  batchDeleteDevice,
  batchImportDevice,
  getUserProfileOptions,
  getDeviceUsers
} from '@/api/device'

const router = useRouter()

// ======================== 列表数据 ========================
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const selectedIds = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const BOUND_USER_DISPLAY_LIMIT = 3

/** 搜索条件 */
const query = reactive({
  deviceCode: '',
  deviceName: '',
  boundUserName: '',
  deviceType: null,
  onlineStatus: null,
  firmwareVersion: '',
  provinceCode: '',
  cityCode: '',
  districtCode: ''
})

// ======================== 省市区数据 ========================
const regionOptions = regionData
const regionCascaderProps = { value: 'value', label: 'label', children: 'children' }

// 查询区域：省列表
const provinceList = computed(() => regionData.map(p => ({ value: p.value, label: p.label })))

// 预计算"全国所有市"与"全国所有区"（模块级常量，仅计算一次）
const ALL_CITIES = []
const ALL_DISTRICTS = []
regionData.forEach(p => {
  ;(p.children || []).forEach(c => {
    ALL_CITIES.push({ value: c.value, label: `${p.label} / ${c.label}` })
    ;(c.children || []).forEach(d => {
      ALL_DISTRICTS.push({ value: d.value, label: `${p.label} / ${c.label} / ${d.label}` })
    })
  })
})

/** 市列表：选了省则返回该省市；未选省则返回全国所有市 */
const queryCityList = computed(() => {
  if (query.provinceCode) {
    const prov = regionData.find(p => p.value === query.provinceCode)
    return (prov?.children || []).map(c => ({ value: c.value, label: c.label }))
  }
  return ALL_CITIES
})

/** 区/县列表：选了市则返回该市下区；只选省返回该省下区；都未选返回全国区 */
const queryDistrictList = computed(() => {
  if (query.cityCode) {
    for (const p of regionData) {
      const city = (p.children || []).find(c => c.value === query.cityCode)
      if (city) {
        return (city.children || []).map(d => ({ value: d.value, label: d.label }))
      }
    }
    return []
  }
  if (query.provinceCode) {
    const prov = regionData.find(p => p.value === query.provinceCode)
    const all = []
    ;(prov?.children || []).forEach(c => {
      (c.children || []).forEach(d => {
        all.push({ value: d.value, label: `${c.label} / ${d.label}` })
      })
    })
    return all
  }
  return ALL_DISTRICTS
})

/** 选了省：如果已选的市/区不属于该省则清空 */
function onQueryProvinceChange(val) {
  if (!val) return
  const prov = regionData.find(p => p.value === val)
  const cities = prov?.children || []
  if (query.cityCode && !cities.find(c => c.value === query.cityCode)) {
    query.cityCode = ''
    query.districtCode = ''
  } else if (query.districtCode) {
    const city = cities.find(c => c.value === query.cityCode)
    if (city && !(city.children || []).find(d => d.value === query.districtCode)) {
      query.districtCode = ''
    }
  }
}

/** 选了市：如果已选的区不属于该市则清空 */
function onQueryCityChange(val) {
  if (!val) return
  for (const p of regionData) {
    const city = (p.children || []).find(c => c.value === val)
    if (city) {
      if (query.districtCode && !(city.children || []).find(d => d.value === query.districtCode)) {
        query.districtCode = ''
      }
      return
    }
  }
}

/** 根据行政区划编码还原为 "省/市/区" 文本 */
function formatRegion(row) {
  const parts = [row.provinceCode, row.cityCode, row.districtCode]
    .filter(c => !!c)
    .map(c => codeToText[c] || '')
    .filter(t => !!t)
  return parts.length > 0 ? parts.join(' / ') : '-'
}

/**
 * 设备列表只展示最新绑定的前 3 个用户，更多用户用省略号提示。
 * boundUserNames 由后端按绑定时间倒序拼接。
 */
function formatBoundUserNames(row) {
  const names = String(row.boundUserNames || '')
    .split('、')
    .map(name => name.trim())
    .filter(Boolean)

  if (names.length === 0) {
    return '-'
  }

  const total = Number(row.boundUserCount) || names.length
  const displayText = names.slice(0, BOUND_USER_DISPLAY_LIMIT).join('、')
  return total > BOUND_USER_DISPLAY_LIMIT || names.length > BOUND_USER_DISPLAY_LIMIT
    ? `${displayText}...`
    : displayText
}

function formatDeviceType(deviceType) {
  return Number(deviceType) === 2 ? '公共设备' : '家庭设备'
}

function manageUsersText(row) {
  return Number(row.deviceType) === 2 ? '绑定用户' : '成员管理'
}

/** 导出表头配置 */
const exportHeaders = [
  { label: '设备编号', prop: 'deviceCode' },
  { label: '设备名称', prop: 'deviceName' },
  { label: '设备型号', prop: 'deviceModel' },
  { label: '设备类型', prop: 'deviceTypeLabel' },
  { label: '所在地区', prop: 'regionText' },
  { label: '关联人数', prop: 'boundUserCount' },
  { label: '关联用户/成员', prop: 'boundUserNames' },
  { label: '在线状态', prop: 'onlineStatusLabel' },
  { label: '固件版本', prop: 'firmwareVersion' },
  { label: '最后在线时间', prop: 'lastOnlineTime' }
]

/**
 * 加载设备列表数据
 */
async function loadData() {
  loading.value = true
  try {
    const res = await getDevicePageList({
      ...query,
      pageNum: pageNum.value,
      pageSize: pageSize.value
    })
    const { records, total: pageTotal } = parsePageData(res.data)
    // 为导出添加状态标签字段和地区文本
    tableData.value = records.map(r => ({
      ...r,
      deviceTypeLabel: formatDeviceType(r.deviceType),
      onlineStatusLabel: r.onlineStatus === 1 ? '在线' : '离线',
      regionText: formatRegion(r)
    }))
    total.value = pageTotal
  } finally {
    loading.value = false
  }
}

/**
 * 点击查询
 */
function handleSearch() {
  pageNum.value = 1
  loadData()
}

/**
 * 重置查询条件
 */
function handleReset() {
  Object.assign(query, {
    deviceCode: '',
    deviceName: '',
    boundUserName: '',
    deviceType: null,
    onlineStatus: null,
    firmwareVersion: '',
    provinceCode: '',
    cityCode: '',
    districtCode: ''
  })
  pageNum.value = 1
  loadData()
}

/**
 * 多选变化
 */
function handleSelectionChange(selection) {
  selectedIds.value = selection.map(r => r.id)
}

// ======================== 新增/编辑表单 ========================
const formDialogVisible = ref(false)
const submitLoading = ref(false)
const deviceFormRef = ref(null)
const formMode = ref('add') // 'add' | 'edit' | 'view'
const currentBoundUserCount = ref(0)

const deviceForm = reactive({
  id: null,
  deviceCode: '',
  deviceName: '',
  deviceModel: '',
  deviceType: 1,
  serialNo: '',
  firmwareVersion: '',
  userIds: [],
  regionCodes: [],
  address: '',
  remark: ''
})

const formIsFamilyDevice = computed(() => Number(deviceForm.deviceType || 1) !== 2)
const formUserLabel = computed(() => formIsFamilyDevice.value ? '家庭成员' : '绑定用户')
const formUserPlaceholder = computed(() => formIsFamilyDevice.value ? '可搜索并选择家庭成员（选填）' : '可搜索并选择绑定用户（选填）')
const isDeviceTypeDisabled = computed(() => formMode.value === 'view' || (formMode.value === 'edit' && currentBoundUserCount.value > 0))
const deviceTypeDisabledTip = computed(() => {
  if (formMode.value === 'edit' && currentBoundUserCount.value > 0) {
    return '已有成员或绑定用户的设备不允许直接修改设备类型'
  }
  return ''
})

const deviceRules = {
  deviceCode: [
    { required: true, message: '请输入设备编号', trigger: 'blur' },
    { max: 50, message: '设备编号不超过50个字符', trigger: 'blur' }
  ],
  deviceName: [
    { required: true, message: '请输入设备名称', trigger: 'blur' },
    { max: 100, message: '设备名称不超过100个字符', trigger: 'blur' }
  ],
  deviceModel: [{ required: true, message: '请选择设备型号', trigger: 'change' }],
  deviceType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
  serialNo: [
    { required: true, message: '请输入设备序列号', trigger: 'blur' },
    { max: 50, message: '序列号不超过50个字符', trigger: 'blur' }
  ],
  firmwareVersion: [{ required: true, message: '请输入固件版本', trigger: 'blur' }]
}

// 用户选项数据（供关联用户/成员下拉使用）
const userOptions = ref([])
const userOptionsLoading = ref(false)

/**
 * 搜索用户选项
 * @param {string} keyword 搜索关键字
 */
async function searchUserOptions(keyword) {
  userOptionsLoading.value = true
  try {
    const res = await getUserProfileOptions(keyword)
    userOptions.value = res.data || []
  } finally {
    userOptionsLoading.value = false
  }
}

/**
 * 打开新增对话框
 */
async function handleAdd() {
  formMode.value = 'add'
  currentBoundUserCount.value = 0
  Object.assign(deviceForm, {
    id: null,
    deviceCode: '',
    deviceName: '',
    deviceModel: '',
    deviceType: 1,
    serialNo: '',
    firmwareVersion: '',
    userIds: [],
    regionCodes: [],
    address: '',
    remark: ''
  })
  // 预加载用户选项
  await searchUserOptions('')
  formDialogVisible.value = true
}

/**
 * 打开查看对话框
 * @param {Object} row 设备行数据
 */
async function handleView(row) {
  formMode.value = 'view'
  currentBoundUserCount.value = Number(row.boundUserCount) || 0
  // 获取当前关联用户/成员列表，填充 userOptions 和 userIds 以实现回显
  const res = await getDeviceUsers(row.id)
  const boundUsers = res.data || []
  userOptions.value = boundUsers.map(u => ({ id: u.userId, name: u.userName, phone: u.phone }))
  Object.assign(deviceForm, {
    ...row,
    deviceType: row.deviceType || 1,
    userIds: boundUsers.map(u => u.userId),
    regionCodes: [row.provinceCode, row.cityCode, row.districtCode].filter(Boolean),
    address: row.address || ''
  })
  formDialogVisible.value = true
}

/**
 * 打开编辑对话框
 * @param {Object} row 设备行数据
 */
async function handleEdit(row) {
  formMode.value = 'edit'
  currentBoundUserCount.value = Number(row.boundUserCount) || 0
  // 加载全量用户选项（供重新选择）
  await searchUserOptions('')
  // 获取当前关联用户/成员列表，回显已选用户
  const res = await getDeviceUsers(row.id)
  const boundUsers = res.data || []
  // 将已关联用户/成员合并进 userOptions，防止 remote 模式下找不到对应选项
  boundUsers.forEach(u => {
    if (!userOptions.value.find(o => o.id === u.userId)) {
      userOptions.value.push({ id: u.userId, name: u.userName, phone: u.phone })
    }
  })
  Object.assign(deviceForm, {
    id: row.id,
    deviceCode: row.deviceCode,
    deviceName: row.deviceName,
    deviceModel: row.deviceModel || '',
    deviceType: row.deviceType || 1,
    serialNo: row.serialNo || '',
    firmwareVersion: row.firmwareVersion || '',
    remark: row.remark || '',
    userIds: boundUsers.map(u => u.userId),
    regionCodes: [row.provinceCode, row.cityCode, row.districtCode].filter(Boolean),
    address: row.address || ''
  })
  formDialogVisible.value = true
}

/**
 * 提交表单（新增或编辑）
 */
async function submitForm() {
  await deviceFormRef.value.validate()
  submitLoading.value = true
  try {
    const codes = deviceForm.regionCodes || []
    const payload = {
      id: deviceForm.id,
      deviceCode: deviceForm.deviceCode.replace(/\s+/g, ''),
      deviceName: deviceForm.deviceName,
      deviceModel: deviceForm.deviceModel,
      deviceType: deviceForm.deviceType || 1,
      serialNo: deviceForm.serialNo,
      firmwareVersion: deviceForm.firmwareVersion,
      provinceCode: codes[0] || '',
      cityCode: codes[1] || '',
      districtCode: codes[2] || '',
      address: deviceForm.address || undefined,
      remark: deviceForm.remark || undefined,
      userIds: deviceForm.userIds || []
    }
    if (formMode.value === 'add') {
      await addDevice(payload)
      ElMessage.success('新增成功')
    } else {
      await updateDevice(payload)
      ElMessage.success('修改成功')
    }
    formDialogVisible.value = false
    loadData()
  } finally {
    submitLoading.value = false
  }
}

// ======================== 删除 ========================

/**
 * 删除单条设备
 * @param {Object} row 设备行数据
 */
async function handleDelete(row) {
  await ElMessageBox.confirm(
    `确认删除设备「${row.deviceName}」吗？删除后将同时移除或解绑该设备的所有关联用户。`,
    '删除确认',
    { type: 'warning', confirmButtonText: '确认删除', cancelButtonText: '取消' }
  )
  await deleteDevice(row.id)
  ElMessage.success('删除成功')
  loadData()
}

/**
 * 批量删除设备（需二次确认）
 */
async function handleBatchDelete() {
  await ElMessageBox.confirm(
    `确认批量删除选中的 ${selectedIds.value.length} 台设备吗？删除后将同时移除或解绑这些设备的所有关联用户。`,
    '批量删除确认',
    { type: 'warning', confirmButtonText: '确认删除', cancelButtonText: '取消' }
  )
  await batchDeleteDevice(selectedIds.value)
  ElMessage.success('批量删除成功')
  selectedIds.value = []
  loadData()
}

// ======================== 导入导出 ========================

/**
 * 处理 Excel 导入数据
 * @param {Object[]} data 解析后的数据列表
 */
async function handleImport(data) {
  const list = data.map(row => ({
    deviceCode: (row['设备编号'] || row.deviceCode || '').replace(/\s+/g, ''),
    deviceName: row['设备名称'] || row.deviceName,
    deviceModel: row['设备型号'] || row.deviceModel,
    deviceType: parseDeviceType(row['设备类型'] || row.deviceType),
    serialNo: row['设备序列号'] || row.serialNo,
    firmwareVersion: row['固件版本'] || row.firmwareVersion,
    remark: row['备注'] || row.remark
  }))
  await batchImportDevice(list)
}

function parseDeviceType(value) {
  if (value === 2 || value === '2' || value === '公共设备') {
    return 2
  }
  return 1
}

/**
 * 导入成功回调
 */
function onImportSuccess() {
  ElMessage.success('导入成功')
  loadData()
}

// ======================== 用户管理跳转 ========================

/**
 * 跳转到设备用户管理页面
 * @param {Object} row 设备行数据
 */
function handleManageUsers(row) {
  router.push({
    path: '/device/users',
    query: {
      deviceId: row.id,
      deviceCode: row.deviceCode,
      deviceName: row.deviceName,
      deviceType: row.deviceType || 1
    }
  })
}

onMounted(loadData)
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-card {
  :deep(.el-card__body) {
    padding: 18px 20px 4px;
  }
}

.form-tip {
  margin-top: 4px;
  color: #909399;
  font-size: 12px;
  line-height: 1.4;
}

.action-card {
  :deep(.el-card__body) {
    padding: 14px 20px;
  }

  .action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .action-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
}

.table-card {
  flex: 1;
}

.pagination {
  margin-top: 16px;
  justify-content: flex-end;
}
</style>