更新记录

1.0（2025-04-10） 下载此版本

记账与采购管理系统文档

1. 需求文档

1.1 项目概述

开发一款记账和采购管理应用，重点是支持采购订单的创建、管理和可视化展示。

1.2 核心功能需求

  1. 采购单管理

    • 创建、编辑、删除采购单
    • 支持表格式采购单录入
    • 采购单包含：序号、菜品、成品/半成品、采购渠道、价格、单位、备注等信息
    • 支持批量导入/导出

  2. 记账功能

    • 采购支出记录
    • 收支统计
    • 账单查询

  3. 采购单展示

    • 生成采购单图片
    • 支持多种模板样式
    • 支持分享功能

1.3 参考采购单格式

序号 菜品 成品/半成品 采购渠道 价格 单位 备注
1 酸肉 成品 川维商城 7.4 斤
2 鸭心 半成品 川维商城 4.4 斤
... ... ... ... ... ... ...

2. 开发文档

2.1 技术选型

  • 前端：UniApp + Vue3 + TypeScript
  • 后端：NestJS + TypeScript + MySQL
  • 数据存储：本地存储 + 云数据库
  • 图片生成：HTML2Canvas / uCharts

2.2 数据库设计

采购单表 (purchase_orders)

CREATE TABLE purchase_orders (
  id VARCHAR(36) PRIMARY KEY,
  title VARCHAR(100) NOT NULL,
  create_time DATETIME NOT NULL,
  creator_id VARCHAR(36) NOT NULL,
  total_amount DECIMAL(10,2) NOT NULL,
  status VARCHAR(20) NOT NULL
);

采购单明细表 (purchase_order_items)

CREATE TABLE purchase_order_items (
  id VARCHAR(36) PRIMARY KEY,
  order_id VARCHAR(36) NOT NULL,
  seq_no INT NOT NULL,
  name VARCHAR(100) NOT NULL,
  type VARCHAR(20) NOT NULL,
  source VARCHAR(100) NOT NULL,
  price DECIMAL(10,2) NOT NULL,
  unit VARCHAR(20) NOT NULL,
  remark VARCHAR(200),
  FOREIGN KEY (order_id) REFERENCES purchase_orders(id)
);

2.3 API设计

采购单API

GET    /api/purchase-orders         - 获取采购单列表
POST   /api/purchase-orders         - 创建采购单
GET    /api/purchase-orders/:id     - 获取采购单详情
PUT    /api/purchase-orders/:id     - 更新采购单
DELETE /api/purchase-orders/:id     - 删除采购单
POST   /api/purchase-orders/:id/image - 生成采购单图片

2.4 前端页面设计

页面结构

pages/
├── index/index.vue           # 首页
├── purchase/
│   ├── list.vue              # 采购单列表
│   ├── create.vue            # 创建采购单
│   ├── detail.vue            # 采购单详情
│   └── image-preview.vue     # 图片预览
└── account/
    ├── statement.vue         # 账单明细
    └── statistics.vue        # 统计分析

2.5 关键功能实现

采购单图片生成

import html2canvas from 'html2canvas';

// 生成采购单图片
export async function generateOrderImage(
  orderId: string,
  templateType: string = 'default'
): Promise<string> {
  // 1. 获取采购单数据
  const orderData = await getOrderById(orderId);

  // 2. 渲染模板到DOM
  const template = document.getElementById('order-template');
  renderOrderTemplate(template, orderData, templateType);

  // 3. 使用html2canvas生成图片
  const canvas = await html2canvas(template, {
    scale: 2, // 提高清晰度
    useCORS: true,
    logging: false
  });

  // 4. 转换为图片URL
  return canvas.toDataURL('image/png');
}

本地数据与云端同步

// 数据同步服务
export class DataSyncService {
  // 检查并同步本地数据到云端
  public async syncLocalData(): Promise<void> {
    const networkAvailable = await this.checkNetworkStatus();

    if (!networkAvailable) {
      return;
    }

    const unsyncedOrders = this.getUnsyncedData();

    if (unsyncedOrders.length > 0) {
      try {
        await this.apiService.syncOrders(unsyncedOrders);
        this.markAsSynced(unsyncedOrders);
      } catch (error) {
        console.error('同步失败', error);
      }
    }
  }
}

2.6 项目结构

src/
├── api/                      # API请求
├── components/
│   ├── common/               # 通用组件
│   └── purchase/             # 采购相关组件
│       ├── OrderForm.vue     # 采购单表单
│       ├── OrderTable.vue    # 采购单表格
│       └── OrderImage.vue    # 采购单图片生成
├── pages/                    # 页面
├── store/                    # 状态管理
├── utils/                    # 工具函数
│   ├── storage.ts            # 存储工具
│   ├── sync.ts               # 同步工具
│   └── image.ts              # 图片生成工具
└── static/                   # 静态资源
    └── templates/            # 采购单模板

2.7 本地存储设计

为确保数据不丢失，系统将实现多层数据存储机制：

  1. 即时存储：表单输入自动保存
  2. 本地数据库：使用SQLite/IndexedDB存储完整数据
  3. 云端备份：有网络时自动同步到云端

本地存储实现

// 本地存储服务
export class LocalStorageService {
  // 保存采购单到本地
  public saveOrder(order: PurchaseOrder): void {
    // 获取现有数据
    const orders = uni.getStorageSync('orders') || [];
    const existingIndex = orders.findIndex(o => o.id === order.id);

    if (existingIndex >= 0) {
      // 更新现有采购单
      orders[existingIndex] = order;
    } else {
      // 添加新采购单
      orders.push(order);
    }

    // 保存回本地
    uni.setStorageSync('orders', orders);

    // 标记为未同步
    this.markAsUnsynced(order.id);
  }
}

3. 项目计划

3.1 开发阶段

  1. 需求分析与设计 (1周)
  2. 数据库与API设计 (1周)
  3. 前端开发 (3周)
    • 基础框架搭建
    • 采购单管理
    • 记账功能
    • 图片生成功能
  4. 后端开发 (2周)
    • API实现
    • 数据持久化
  5. 测试与上线 (1周)

3.2 迭代计划

  • v1.0: 基础采购单管理和图片生成
  • v1.1: 记账功能和数据统计
  • v1.2: 高级模板和导出功能

4. 附录

4.1 技术要点

  • UniApp跨平台开发
  • 离线优先设计
  • 响应式布局
  • 数据安全保障

4.2 风险管理

  • 数据丢失风险：实现自动保存和多重备份
  • 网络不稳定风险：离线优先设计，支持本地操作

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.61 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

记账与采购管理系统文档

1. 需求文档

1.1 项目概述

开发一款记账和采购管理应用，重点是支持采购订单的创建、管理和可视化展示。

1.2 核心功能需求

  1. 采购单管理

    • 创建、编辑、删除采购单
    • 支持表格式采购单录入
    • 采购单包含：序号、菜品、成品/半成品、采购渠道、价格、单位、备注等信息
    • 支持批量导入/导出

  2. 记账功能

    • 采购支出记录
    • 收支统计
    • 账单查询

  3. 采购单展示

    • 生成采购单图片
    • 支持多种模板样式
    • 支持分享功能

1.3 参考采购单格式

序号 菜品 成品/半成品 采购渠道 价格 单位 备注
1 酸肉 成品 川维商城 7.4 斤
2 鸭心 半成品 川维商城 4.4 斤
... ... ... ... ... ... ...

2. 开发文档

2.1 技术选型

  • 前端：UniApp + Vue3 + TypeScript
  • 后端：NestJS + TypeScript + MySQL
  • 数据存储：本地存储 + 云数据库
  • 图片生成：HTML2Canvas / uCharts

2.2 数据库设计

采购单表 (purchase_orders)

CREATE TABLE purchase_orders (
  id VARCHAR(36) PRIMARY KEY,
  title VARCHAR(100) NOT NULL,
  create_time DATETIME NOT NULL,
  creator_id VARCHAR(36) NOT NULL,
  total_amount DECIMAL(10,2) NOT NULL,
  status VARCHAR(20) NOT NULL
);

采购单明细表 (purchase_order_items)

CREATE TABLE purchase_order_items (
  id VARCHAR(36) PRIMARY KEY,
  order_id VARCHAR(36) NOT NULL,
  seq_no INT NOT NULL,
  name VARCHAR(100) NOT NULL,
  type VARCHAR(20) NOT NULL,
  source VARCHAR(100) NOT NULL,
  price DECIMAL(10,2) NOT NULL,
  unit VARCHAR(20) NOT NULL,
  remark VARCHAR(200),
  FOREIGN KEY (order_id) REFERENCES purchase_orders(id)
);

2.3 API设计

采购单API

GET    /api/purchase-orders         - 获取采购单列表
POST   /api/purchase-orders         - 创建采购单
GET    /api/purchase-orders/:id     - 获取采购单详情
PUT    /api/purchase-orders/:id     - 更新采购单
DELETE /api/purchase-orders/:id     - 删除采购单
POST   /api/purchase-orders/:id/image - 生成采购单图片

2.4 前端页面设计

页面结构

pages/
├── index/index.vue           # 首页
├── purchase/
│   ├── list.vue              # 采购单列表
│   ├── create.vue            # 创建采购单
│   ├── detail.vue            # 采购单详情
│   └── image-preview.vue     # 图片预览
└── account/
    ├── statement.vue         # 账单明细
    └── statistics.vue        # 统计分析

2.5 关键功能实现

采购单图片生成

import html2canvas from 'html2canvas';

// 生成采购单图片
export async function generateOrderImage(
  orderId: string,
  templateType: string = 'default'
): Promise<string> {
  // 1. 获取采购单数据
  const orderData = await getOrderById(orderId);

  // 2. 渲染模板到DOM
  const template = document.getElementById('order-template');
  renderOrderTemplate(template, orderData, templateType);

  // 3. 使用html2canvas生成图片
  const canvas = await html2canvas(template, {
    scale: 2, // 提高清晰度
    useCORS: true,
    logging: false
  });

  // 4. 转换为图片URL
  return canvas.toDataURL('image/png');
}

本地数据与云端同步

// 数据同步服务
export class DataSyncService {
  // 检查并同步本地数据到云端
  public async syncLocalData(): Promise<void> {
    const networkAvailable = await this.checkNetworkStatus();

    if (!networkAvailable) {
      return;
    }

    const unsyncedOrders = this.getUnsyncedData();

    if (unsyncedOrders.length > 0) {
      try {
        await this.apiService.syncOrders(unsyncedOrders);
        this.markAsSynced(unsyncedOrders);
      } catch (error) {
        console.error('同步失败', error);
      }
    }
  }
}

2.6 项目结构

src/
├── api/                      # API请求
├── components/
│   ├── common/               # 通用组件
│   └── purchase/             # 采购相关组件
│       ├── OrderForm.vue     # 采购单表单
│       ├── OrderTable.vue    # 采购单表格
│       └── OrderImage.vue    # 采购单图片生成
├── pages/                    # 页面
├── store/                    # 状态管理
├── utils/                    # 工具函数
│   ├── storage.ts            # 存储工具
│   ├── sync.ts               # 同步工具
│   └── image.ts              # 图片生成工具
└── static/                   # 静态资源
    └── templates/            # 采购单模板

2.7 本地存储设计

为确保数据不丢失，系统将实现多层数据存储机制：

  1. 即时存储：表单输入自动保存
  2. 本地数据库：使用SQLite/IndexedDB存储完整数据
  3. 云端备份：有网络时自动同步到云端

本地存储实现

// 本地存储服务
export class LocalStorageService {
  // 保存采购单到本地
  public saveOrder(order: PurchaseOrder): void {
    // 获取现有数据
    const orders = uni.getStorageSync('orders') || [];
    const existingIndex = orders.findIndex(o => o.id === order.id);

    if (existingIndex >= 0) {
      // 更新现有采购单
      orders[existingIndex] = order;
    } else {
      // 添加新采购单
      orders.push(order);
    }

    // 保存回本地
    uni.setStorageSync('orders', orders);

    // 标记为未同步
    this.markAsUnsynced(order.id);
  }
}

3. 项目计划

3.1 开发阶段

  1. 需求分析与设计 (1周)
  2. 数据库与API设计 (1周)
  3. 前端开发 (3周)
    • 基础框架搭建
    • 采购单管理
    • 记账功能
    • 图片生成功能
  4. 后端开发 (2周)
    • API实现
    • 数据持久化
  5. 测试与上线 (1周)

3.2 迭代计划

  • v1.0: 基础采购单管理和图片生成
  • v1.1: 记账功能和数据统计
  • v1.2: 高级模板和导出功能

4. 附录

4.1 技术要点

  • UniApp跨平台开发
  • 离线优先设计
  • 响应式布局
  • 数据安全保障

4.2 风险管理

  • 数据丢失风险：实现自动保存和多重备份
  • 网络不稳定风险：离线优先设计，支持本地操作

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...