Industrial-image-management-system---web/src/views/system-resource/device-management/index.vue

<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="设备管理"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1400 }"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @refresh="search"
    >
      <template #top>
        <GiForm 
          v-model="searchForm" 
          search 
          :columns="queryFormColumns" 
          size="medium" 
          @search="search" 
          @reset="reset"
        />
      </template>
      
      <template #toolbar-left>
        <a-space>
          <a-button type="primary" @click="openAddModal">
            <template #icon><icon-plus /></template>
            <template #default>新增设备</template>
          </a-button>
          <a-button @click="exportData">
            <template #icon><icon-download /></template>
            <template #default>导出</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 设备类型 -->
      <template #deviceType="{ record }">
        <a-tag :color="getDeviceTypeColor(record.deviceType)">
          {{ record.deviceType }}
        </a-tag>
      </template>
      
      <!-- 设备状态 -->
      <template #status="{ record }">
        <a-space>
          <div 
            :class="getStatusDotClass(record.status)"
            class="status-dot"
          ></div>
          <a-tag :color="getStatusColor(record.status)">
            {{ getStatusText(record.status) }}
          </a-tag>
        </a-space>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="editRecord(record)">编辑</a-link>
          <a-link @click="returnDevice(record)" v-if="record.status === 'using'">归还</a-link>
        </a-space>
      </template>
    </GiTable>

    <!-- 新增设备弹窗 -->
    <DeviceAddModal 
      v-model:visible="addModalVisible"
      @save-success="handleAddSuccess"
    />
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'
import DeviceAddModal from './components/DeviceAddModal.vue'

// 搜索表单
let searchForm = reactive({
  projectName: '',
  deviceType: '',
  status: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'projectName',
    label: '项目选择',
    type: 'select' as const,
    props: {
      placeholder: '请选择项目',
      options: [
        { label: '风电塔下检测项目', value: '风电塔下检测项目' },
        { label: '叶片维修项目', value: '叶片维修项目' },
        { label: '防雷检测项目', value: '防雷检测项目' },
        { label: '太阳能巡检项目', value: '太阳能巡检项目' }
      ]
    }
  },
  {
    field: 'deviceType',
    label: '设备类型',
    type: 'select' as const,
    props: {
      placeholder: '请选择设备类型',
      options: [
        { label: '检测设备', value: '检测设备' },
        { label: '安全设备', value: '安全设备' },
        { label: '车辆', value: '车辆' }
      ]
    }
  },
  {
    field: 'status',
    label: '设备状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择设备状态',
      options: [
        { label: '使用中', value: 'using' },
        { label: '可用', value: 'available' },
        { label: '维修中', value: 'maintenance' }
      ]
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '设备名称', dataIndex: 'deviceName', width: 150 },
  { title: '设备类型', dataIndex: 'deviceType', slotName: 'deviceType', width: 120 },
  { title: '型号', dataIndex: 'model', width: 120 },
  { title: '序列号', dataIndex: 'serialNumber', width: 150 },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 120 },
  { title: '当前使用人', dataIndex: 'currentUser', width: 100 },
  { title: '所属项目', dataIndex: 'projectName', width: 150 },
  { title: '操作', slotName: 'action', width: 150, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const addModalVisible = ref(false)
const dataList = ref([
  {
    id: 1,
    deviceName: '红外热像仪',
    deviceType: '检测设备',
    model: 'FLIR T1020',
    serialNumber: 'IR20230001',
    status: 'using',
    currentUser: '李四',
    projectName: '风电塔下检测项目'
  },
  {
    id: 2,
    deviceName: '安全信号装置',
    deviceType: '安全设备',
    model: '3M DBI-SALA',
    serialNumber: 'SA20230001',
    status: 'using',
    currentUser: '李四',
    projectName: '风电塔下检测项目'
  },
  {
    id: 3,
    deviceName: '叶片内窥镜',
    deviceType: '检测设备',
    model: 'Olympus IPLEX GX/GT',
    serialNumber: 'EN20230001',
    status: 'available',
    currentUser: '',
    projectName: '叶片维修项目'
  },
  {
    id: 4,
    deviceName: '防雷测试仪',
    deviceType: '检测设备',
    model: 'FLUKE 1653',
    serialNumber: 'LT20230001',
    status: 'using',
    currentUser: '王五',
    projectName: '叶片维修项目'
  },
  {
    id: 5,
    deviceName: '高空作业车',
    deviceType: '车辆',
    model: 'JLG 600S',
    serialNumber: 'HV20230001',
    status: 'maintenance',
    currentUser: '',
    projectName: '太阳能巡检项目'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 5,
  showTotal: true,
  showPageSize: true
})

// 获取设备类型颜色
const getDeviceTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    '检测设备': 'blue',
    '安全设备': 'green',
    '车辆': 'orange'
  }
  return colorMap[type] || 'gray'
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'using': 'blue',
    'available': 'green',
    'maintenance': 'orange'
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'using': '使用中',
    'available': '可用',
    'maintenance': '维修中'
  }
  return textMap[status] || status
}

// 获取状态点样式
const getStatusDotClass = (status: string) => {
  const classMap: Record<string, string> = {
    'using': 'using-dot',
    'available': 'available-dot',
    'maintenance': 'maintenance-dot'
  }
  return classMap[status] || 'available-dot'
}

// 搜索和重置
const search = async () => {
  loading.value = true
  // 这里应该调用API获取数据
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const reset = () => {
  Object.assign(searchForm, {
    projectName: '',
    deviceType: '',
    status: '',
    page: 1,
    size: 10
  })
  pagination.current = 1
  search()
}

// 分页处理
const onPageChange = (page: number) => {
  searchForm.page = page
  pagination.current = page
  search()
}

const onPageSizeChange = (size: number) => {
  searchForm.size = size
  searchForm.page = 1
  pagination.pageSize = size
  pagination.current = 1
  search()
}

// 操作方法
const openAddModal = () => {
  addModalVisible.value = true
}

const handleAddSuccess = () => {
  search() // 重新加载数据
}

const exportData = () => {
  Message.info('导出数据功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看设备详情: ${record.deviceName}`)
}

const editRecord = (record: any) => {
  Message.info(`编辑设备: ${record.deviceName}`)
}

const returnDevice = (record: any) => {
  Message.info(`归还设备: ${record.deviceName}`)
}

onMounted(() => {
  search()
})
</script>

<style scoped>
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.using-dot {
  background-color: #1890ff;
}

.available-dot {
  background-color: #52c41a;
}

.maintenance-dot {
  background-color: #faad14;
}
</style>