zcglxt/QUICK_START_GUIDE.md

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

## 📦 安装依赖

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

## 🚀 启动开发服务器

```bash
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` - 资产列表（集成导入导出）

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

```bash
# 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` 中添加以下路由：

```typescript
{
  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/` 中添加以下接口（部分已存在）：

```typescript
// 分配单相关
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`)
}
```

## 🎨 样式主题

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

```scss
$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

## 📖 代码示例

### 使用批量导入组件

```vue
<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>
```

### 使用资产选择器组件

```vue
<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图表

```vue
<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接口已对接
- [ ] 环境变量已配置
- [ ] 构建无错误
- [ ] 基础功能测试通过
- [ ] 浏览器兼容性测试

## 🚢 部署

```bash
# 构建
npm run build

# 预览
npm run preview
```

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

---

祝您使用愉快！🎉