qmes/pamido

Fork 0

Files

T

mrpmall 8da6567178 first commit

2026-05-08 03:06:24 +08:00

5.6 KiB

Raw Blame History

窗帘工厂管理系统 - 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

联系方式

如有问题或建议，请联系开发团队。

5.6 KiB Raw Blame History