zcglxt/QUICK_START_GUIDE.md

资产管理系统前端 - 快速开始指南

📦 安装依赖

cd C:/Users/Administrator/asset-management-frontend
npm install

🚀 启动开发服务器

npm run dev

访问: http://localhost:5173

📝 新增页面和组件列表

本次开发新增的文件：

资产管理相关

1. src/views/assets/components/BatchImportDialog.vue - 批量导入对话框
2. src/views/assets/components/BatchExportDialog.vue - 批量导出对话框
3. src/views/assets/components/MaintenanceDialog.vue - 维修记录对话框

资产分配相关

4. src/views/allocation/AllocationList.vue - 分配单列表
5. src/views/allocation/components/CreateAllocationDialog.vue - 创建分配单
6. src/views/allocation/components/AssetSelectorDialog.vue - 资产选择器
7. src/views/allocation/components/AllocationDetailDialog.vue - 分配单详情

更新的文件

8. src/views/assets/AssetScan.vue - 扫码查询页面（完善）
9. src/views/assets/MaintenanceManagement.vue - 维修管理页面（完善）
10. src/views/assets/StatisticsDashboard.vue - 统计报表页面（完善）
11. src/views/assets/AssetList.vue - 资产列表（集成导入导出）

📚 需要额外安装的包（可选）

# ECharts Vue组件（已使用但未在package.json中）
npm install vue-echarts@6.6.0

# 二维码识别库（用于扫码功能）
npm install @zxing/library@0.20.0

# Excel解析库（用于批量导入）
npm install xlsx@0.18.5

🎯 路由配置

需要在 src/router/index.ts 中添加以下路由：

{
  path: '/allocation',
  component: () => import('@/layouts/MainLayout.vue'),
  meta: { title: '资产分配', requiresAuth: true },
  children: [
    {
      path: 'list',
      component: () => import('@/views/allocation/AllocationList.vue'),
      meta: { title: '分配单列表' }
    }
  ]
}

📊 API接口

需要在 src/api/ 中添加以下接口（部分已存在）：

// 分配单相关
export const deleteAllocationOrder = (id: number) => {
  return request.delete(`/allocation-orders/${id}`)
}

export const updateAllocationOrder = (id: number, data: any) => {
  return request.put(`/allocation-orders/${id}`, data)
}

// 维修相关
export const startMaintenance = (id: number) => {
  return request.post(`/maintenance-records/${id}/start`)
}

export const completeMaintenance = (id: number, data: any) => {
  return request.post(`/maintenance-records/${id}/complete`, data)
}

export const cancelMaintenance = (id: number) => {
  return request.post(`/maintenance-records/${id}/cancel`)
}

🎨 样式主题

系统使用青灰主题，主色调：

$primary-color: #409EFF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$info-color: #909399;
$text-primary: #303133;
$text-regular: #606266;
$border-color: #DCDFE6;

🔧 开发工具推荐

VSCode插件

• Volar（Vue 3支持）
• TypeScript Vue Plugin
• ESLint
• Prettier

浏览器插件

• Vue.js devtools

📖 代码示例

使用批量导入组件

<template>
  <el-button @click="showImport">导入资产</el-button>

  <BatchImportDialog
    v-model="importVisible"
    @success="handleImportSuccess"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BatchImportDialog from '@/views/assets/components/BatchImportDialog.vue'

const importVisible = ref(false)

const showImport = () => {
  importVisible.value = true
}

const handleImportSuccess = () => {
  // 刷新列表
  console.log('导入成功')
}
</script>

使用资产选择器组件

<template>
  <el-button @click="showSelector">选择资产</el-button>

  <AssetSelectorDialog
    v-model="selectorVisible"
    :exclude-ids="selectedAssetIds"
    @confirm="handleAssetSelect"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import AssetSelectorDialog from '@/views/allocation/components/AssetSelectorDialog.vue'

const selectorVisible = ref(false)
const selectedAssetIds = ref<number[]>([])

const showSelector = () => {
  selectorVisible.value = true
}

const handleAssetSelect = (assets: any[]) => {
  console.log('已选资产:', assets)
  selectedAssetIds.value = assets.map(a => a.id)
}
</script>

使用ECharts图表

<template>
  <v-chart
    :option="chartOption"
    :style="{ height: '400px' }"
    autoresize
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent } from 'echarts/components'

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent])

const chartOption = ref({
  title: { text: '示例图表' },
  tooltip: {},
  series: [{
    type: 'pie',
    data: [
      { value: 335, name: '类别A' },
      { value: 234, name: '类别B' }
    ]
  }]
})
</script>

🐛 常见问题

Q1: ECharts图表不显示？

A: 确保已安装vue-echarts并正确注册ECharts组件

Q2: 批量导入失败？

A: 检查后端API是否实现了 /assets/import 接口

Q3: 扫码功能无法使用？

A: 需要HTTPS环境或localhost才能访问摄像头

Q4: 样式不一致？

A: 确保使用了全局样式变量和Element Plus主题

Q5: TypeScript类型错误？

A: 检查是否正确导入了类型定义

📞 技术支持

• 查看 FRONTEND_COMPLETION_SUMMARY.md 了解完整功能列表
• 查看 complete_api_reference.md 了解API规范
• 查看 development_standards_guide.md 了解开发规范

✅ 检查清单

在部署前，请确认：

• 所有依赖已安装
• 路由配置正确
• API接口已对接
• 环境变量已配置
• 构建无错误
• 基础功能测试通过
• 浏览器兼容性测试

🚢 部署

# 构建
npm run build

# 预览
npm run preview

构建产物在 dist/ 目录，可部署到任何静态服务器。

---

祝您使用愉快！🎉