窗帘工厂管理系统 - Vue3版本
项目简介
这是一个基于 Vue 3 + Vite + Pinia 构建的窗帘工厂管理系统，提供完整的客户管理、订单管理、生产管理、安装管理、财务管理等功能模块。
技术栈
- 前端框架: Vue 3.3+ (Composition API + script setup)
- 构建工具: Vite 4.4+
- 状态管理: Pinia 2.1+
- 路由管理: Vue Router 4.6+
- 图表库: Chart.js 4.4+
- UI设计: 自定义CSS变量系统
项目结构
html-vue3/
├── public/ # 静态资源
├── src/
│ ├── assets/ # 资源文件
│ │ └── css/
│ │ └── global.css # 全局样式
│ │
│ ├── components/ # 组件目录
│ │ ├── common/ # 通用组件
│ │ │ └── PagePlaceholder.vue
│ │ └── layout/ # 布局组件
│ │ ├── MainLayout.vue # 主布局
│ │ ├── Sidebar.vue # 侧边栏
│ │ └── TopBar.vue # 顶部栏
│ │
│ ├── composables/ # 组合式函数
│ │ ├── useToast.js # Toast提示
│ │ ├── usePagination.js # 分页功能
│ │ ├── useSearch.js # 搜索过滤
│ │ └── useModal.js # 模态框管理
│ │
│ ├── stores/ # Pinia状态管理
│ │ ├── userStore.js # 用户状态
│ │ ├── customerStore.js # 客户状态
│ │ └── orderStore.js # 订单状态
│ │
│ ├── views/ # 页面视图
│ │ ├── customer/ # 客户管理
│ │ ├── quote/ # 测量报价
│ │ ├── order/ # 订单管理
│ │ ├── production/ # 生产管理
│ │ ├── install/ # 安装管理
│ │ ├── aftersale/ # 售后管理
│ │ ├── finance/ # 财务管理
│ │ ├── purchase/ # 采购库存
│ │ ├── product/ # 产品管理
│ │ ├── staff/ # 人员管理
│ │ ├── system/ # 系统设置
│ │ └── analysis/ # 数据分析
│ │
│ ├── router/ # 路由配置
│ │ └── index.js
│ │
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
│
├── index.html # HTML模板
├── vite.config.js # Vite配置
├── package.json # 项目配置
└── start.bat # 启动脚本
功能模块
1. 首页与总览
- 经营仪表盘 - 实时KPI展示
- 功能流程图 - 业务流程展示
2. 客户管理
- 客户管理 - 客户信息CRUD
- 预约测量 - 预约管理
- 测量管理 - 测量记录
3. 测量报价
- 测量报价 - 产品测量和报价
- 报价表生成 - 生成专业报价单
4. 订单管理
- 订单管理 - 订单全流程管理
- 订单跟踪 - 物流跟踪
- 跟单页 - 跟单处理
- 定单明细 - 订单详情
- 成交定单 - 成交记录
- 复尺确认 - 尺寸确认
5. 生产管理
- 生产任务板 - 任务分配和跟踪
- 生产采购 - 物料采购
- 生产采购明细 - 采购记录
6. 安装管理
- 新增安装 - 创建安装任务
- 安装任务板 - 任务管理
- 安装人员排班表 - 排班管理
- 帘窗安装完成 - 完成记录
7. 售后管理
- 售后原因 - 问题记录分析
- 维修安排 - 维修任务
8. 财务管理
- 收尾款 - 尾款管理
- 发票管理 - 发票开具
9. 采购库存
- 采购订单 - 采购管理
- 供应商管理 - 供应商信息
- 库存管理 - 库存盘点
10. 产品管理
- 产品库管理 - 产品信息
- 面料配件库 - 面料配件
11. 人员管理
- 测量师管理 - 测量师信息
- 安装师傅管理 - 安装师傅信息
12. 系统设置
- 角色权限 - 权限配置
- 系统用户 - 用户管理
- 通知模板 - 消息模板
- 工作时间 - 时间设置
- 消息中心 - 消息管理
13. 数据分析
- 数据分析中心 - 综合分析
- 报表分析 - 图表报表
- 满意度调查 - 客户满意度
- 渠道管理 - 渠道统计
快速开始
安装依赖
npm install
启动开发服务器
npm run dev
或双击 start.bat 文件
构建生产版本
npm run build
预览生产版本
npm run preview
开发规范
组件命名
- 组件文件: PascalCase (如
CustomerList.vue) - 组合式函数: camelCase with use prefix (如
useToast.js)
代码组织
<script setup>
// 1. Imports
import { ref, computed } from 'vue'
// 2. Props & Emits
const props = defineProps({ ... })
const emit = defineEmits(['update'])
// 3. Reactive State
const data = ref({})
// 4. Computed
const computed = computed(() => { ... })
// 5. Methods
const handleClick = () => { ... }
// 6. Lifecycle
onMounted(() => { ... })
</script>
样式规范
- 使用 scoped 样式
- 使用 CSS 变量
- 遵循 BEM 命名约定
特性
- ✅ Vue 3 Composition API
- ✅ Pinia 状态管理
- ✅ Vue Router 路由守卫
- ✅ 响应式设计
- ✅ 组件化开发
- ✅ 组合式函数复用
- ✅ 模块化路由配置
- ✅ 全局样式系统
浏览器支持
- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88
许可证
MIT License
联系方式
如有问题或建议，请联系开发团队。