Apple经销商ERP前端开发计划.md 21.8 KB

Raw Blame History Permalink



Apple经销商ERP前端开发计划


项目概述

基于Vue 3 + TypeScript + Element Plus技术栈，从零开始开发Apple经销商ERP系统前端，参考若依前端风格，实现现代化的企业级管理系统界面。


技术栈


框架：Vue 3.3+

构建工具：Vite 4.0+

UI组件库：Element Plus 2.3+

状态管理：Pinia 2.1+

路由管理：Vue Router 4.2+

HTTP客户端：Axios 1.4+

图表库：ECharts 5.4+

开发语言：TypeScript 5.0+

样式预处理：SCSS

代码规范：ESLint + Prettier


若依前端风格特点分析


界面风格特点


布局设计：


左侧导航栏 + 顶部面包屑 + 主内容区布局
简洁现代的扁平化设计
蓝色主题色调（#409EFF）
卡片式内容展示


组件特点：


基于Element UI/Plus的组件库
统一的表格、表单、按钮样式
响应式布局设计
丰富的图标系统


交互特点：


权限控制的菜单显示
统一的CRUD操作模式
分页、搜索、导出等标准功能
弹窗式的新增/编辑表单


前端项目结构设计

apple-erp-frontend/
├── public/                    # 静态资源
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── api/                   # API接口
│   │   ├── modules/          # 按模块分类的API
│   │   │   ├── order.ts      # 订单管理API
│   │   │   ├── delivery.ts   # 出库查询API
│   │   │   ├── invoice.ts    # 发票管理API
│   │   │   ├── rebate.ts     # 返利管理API
│   │   │   ├── system.ts     # 系统管理API
│   │   │   └── index.ts      # API统一导出
│   │   ├── request.ts        # Axios请求封装
│   │   └── types.ts          # API类型定义
│   ├── assets/               # 静态资源
│   │   ├── images/          # 图片资源
│   │   ├── icons/           # 图标资源
│   │   └── styles/          # 全局样式
│   │       ├── index.scss   # 样式入口
│   │       ├── variables.scss # SCSS变量
│   │       └── mixins.scss  # SCSS混入
│   ├── components/           # 公共组件
│   │   ├── common/          # 通用组件
│   │   │   ├── PageHeader/  # 页面头部
│   │   │   ├── SearchForm/  # 搜索表单
│   │   │   ├── DataTable/   # 数据表格
│   │   │   ├── DialogForm/  # 弹窗表单
│   │   │   └── UploadFile/  # 文件上传
│   │   ├── business/        # 业务组件
│   │   │   ├── OrderForm/   # 订单表单
│   │   │   ├── ProductSelect/ # 产品选择
│   │   │   └── DealerSelect/ # 经销商选择
│   │   └── charts/          # 图表组件
│   │       ├── LineChart/   # 折线图
│   │       ├── BarChart/    # 柱状图
│   │       └── PieChart/    # 饼图
│   ├── layouts/              # 布局组件
│   │   ├── DefaultLayout/   # 默认布局
│   │   ├── components/      # 布局子组件
│   │   │   ├── Sidebar/     # 侧边栏
│   │   │   ├── Navbar/      # 顶部导航
│   │   │   ├── Breadcrumb/  # 面包屑
│   │   │   └── TagsView/    # 标签页
│   │   └── index.vue        # 布局入口
│   ├── router/               # 路由配置
│   │   ├── index.ts         # 路由入口
│   │   ├── routes.ts        # 路由定义
│   │   └── guards.ts        # 路由守卫
│   ├── stores/               # 状态管理
│   │   ├── modules/         # 状态模块
│   │   │   ├── user.ts      # 用户状态
│   │   │   ├── permission.ts # 权限状态
│   │   │   ├── app.ts       # 应用状态
│   │   │   └── tabs.ts      # 标签页状态
│   │   └── index.ts         # 状态入口
│   ├── utils/                # 工具函数
│   │   ├── auth.ts          # 认证工具
│   │   ├── permission.ts    # 权限工具
│   │   ├── format.ts        # 格式化工具
│   │   ├── validate.ts      # 验证工具
│   │   └── request.ts       # 请求工具
│   ├── views/                # 页面组件
│   │   ├── dashboard/       # 首页
│   │   ├── order/           # 订单管理
│   │   ├── delivery/        # 出库查询
│   │   ├── invoice/         # 发票管理
│   │   ├── rebate/          # 返利管理
│   │   ├── exception/       # 异常工单
│   │   ├── product/         # 产品管理
│   │   ├── dealer/          # 经销商管理
│   │   ├── system/          # 系统管理
│   │   │   ├── user/        # 用户管理
│   │   │   ├── role/        # 角色管理
│   │   │   ├── menu/        # 菜单管理
│   │   │   ├── dict/        # 字典管理
│   │   │   └── log/         # 日志管理
│   │   └── login/           # 登录页面
│   ├── types/                # 类型定义
│   │   ├── api.ts           # API类型
│   │   ├── common.ts        # 通用类型
│   │   └── business.ts      # 业务类型
│   ├── App.vue              # 根组件
│   └── main.ts              # 入口文件
├── package.json             # 依赖配置
├── vite.config.ts           # Vite配置
├── tsconfig.json            # TypeScript配置
├── .eslintrc.js             # ESLint配置
└── .prettierrc              # Prettier配置


前端开发计划


第一阶段：基础架构搭建（Day 1-2）


Day 1：项目初始化和基础配置

上午（4小时）


 创建Vue 3项目

npm create vue@latest apple-erp-frontend
cd apple-erp-frontend


 安装核心依赖

npm install element-plus @element-plus/icons-vue
npm install pinia vue-router@4 axios
npm install echarts vue-echarts
npm install sass -D


 安装开发工具

npm install eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin -D


 配置项目基础文件


配置vite.config.ts
配置tsconfig.json
配置ESLint和Prettier


下午（4小时）


 创建项目目录结构

 配置路由系统（Vue Router）

 配置状态管理（Pinia）

 配置HTTP请求（Axios）

 创建基础类型定义


交付物：


Vue 3项目创建完成
基础依赖安装完成
项目结构搭建完成
基础配置完成


Day 2：基础组件和布局开发

上午（4小时）


 开发默认布局组件


创建DefaultLayout组件
实现左侧导航栏
实现顶部导航栏
实现主内容区域


 开发侧边栏组件


菜单树形结构
权限控制显示
折叠/展开功能
图标和文字显示


下午（4小时）


 开发顶部导航组件


面包屑导航
用户信息显示
退出登录功能
全屏切换功能


 开发标签页组件


多标签页管理
标签页切换
关闭标签页
右键菜单功能


交付物：


默认布局组件完成
侧边栏组件完成
顶部导航组件完成
标签页组件完成


第二阶段：核心业务页面开发（Day 3-6）


Day 3：登录页面和首页

上午（4小时）


 开发登录页面


登录表单设计（参考若依风格）
用户名/密码输入
验证码功能
记住密码功能
登录状态管理


 开发首页Dashboard


数据统计卡片
快捷操作入口
系统状态监控
最近操作记录


下午（4小时）


 集成ECharts图表组件


折线图组件
柱状图组件
饼图组件
图表响应式设计


 实现数据统计功能


订单统计
返利统计
异常工单统计
经销商统计


交付物：


登录页面完成
首页Dashboard完成
图表组件完成
数据统计功能完成


Day 4：订单管理页面

上午（4小时）


 开发订单列表页面


订单数据表格
分页功能
排序功能
状态标识显示


 开发订单查询表单


经销商选择
日期范围选择
状态筛选
订单编号搜索


下午（4小时）


 开发订单详情页面


订单基本信息
商品明细列表
操作历史记录
关联数据展示


 实现订单导出功能


Excel导出
数据格式化
导出进度显示
错误处理


交付物：


订单列表页面完成
订单查询功能完成
订单详情页面完成
订单导出功能完成


Day 5：出库查询和发票管理

上午（4小时）


 开发出库查询页面


出库数据表格
查询条件表单
关联订单显示
出库状态管理


 开发发票管理页面


发票数据表格
发票状态管理
金额计算显示
税率信息展示


下午（4小时）


 实现关联查询功能


订单-出库关联
出库-发票关联
数据一致性检查
异常数据标识


 开发数据验证页面


验证规则配置
验证结果展示
异常数据列表
验证历史记录


交付物：


出库查询页面完成
发票管理页面完成
关联查询功能完成
数据验证页面完成


Day 6：返利管理和异常工单

上午（4小时）


 开发返利看板页面


返利趋势图表
返利明细列表
经销商返利排行
返利统计卡片


 开发异常工单页面


工单列表展示
工单状态管理
严重程度标识
处理进度跟踪


下午（4小时）


 实现工单处理流程


工单分配功能
处理意见录入
状态变更记录
附件上传功能


 开发通知提醒功能


高优先级提醒
超时预警
消息通知中心
邮件/短信通知


交付物：


返利看板页面完成
异常工单页面完成
工单处理流程完成
通知提醒功能完成


第三阶段：系统管理页面开发（Day 7-8）


Day 7：系统管理基础页面

上午（4小时）


 开发用户管理页面


用户列表展示
用户新增/编辑
角色分配功能
状态管理功能


 开发角色管理页面


角色列表展示
角色新增/编辑
权限分配功能
用户关联管理


下午（4小时）


 实现权限分配功能


菜单权限配置
按钮权限配置
权限验证逻辑
权限继承机制


 开发菜单管理页面


菜单树形展示
菜单新增/编辑
菜单排序功能
菜单状态管理


交付物：


用户管理页面完成
角色管理页面完成
权限分配功能完成
菜单管理页面完成


Day 8：系统管理高级功能

上午（4小时）


 开发字典管理页面


字典类型管理
字典项管理
字典数据预览
缓存刷新功能


 开发日志管理页面


操作日志展示
登录日志展示
异常日志展示
日志详情查看


下午（4小时）


 实现数据导入导出


Excel模板下载
批量数据导入
数据格式校验
错误报告生成


 开发系统配置页面


系统参数配置
邮件配置
短信配置
缓存配置


交付物：


字典管理页面完成
日志管理页面完成
数据导入导出完成
系统配置页面完成


第四阶段：优化和测试（Day 9-10）


Day 9：功能优化

上午（4小时）


 响应式布局优化


移动端适配
平板端适配
大屏端适配
布局自适应


 性能优化


组件懒加载
虚拟滚动
图片懒加载
缓存策略


下午（4小时）


 用户体验优化


加载状态优化
错误提示优化
操作反馈优化
交互流程优化


 错误处理完善


全局错误处理
网络错误处理
业务错误处理
错误日志记录


交付物：


响应式布局完成
性能优化完成
用户体验优化完成
错误处理完善


Day 10：测试和部署

上午（4小时）


 功能测试


页面功能测试
业务流程测试
权限控制测试
数据验证测试


 兼容性测试


浏览器兼容性
设备兼容性
分辨率兼容性
网络环境测试


下午（4小时）


 性能测试


页面加载速度
接口响应时间
内存使用情况
并发用户测试


 部署配置


生产环境配置
构建优化
静态资源优化
部署脚本准备


交付物：


功能测试完成
兼容性测试完成
性能测试完成
部署配置完成


若依风格实现要点


1. 界面风格实现

// 主题色彩（参考若依）
$primary-color: #409EFF;
$success-color: #67C23A;
$warning-color: #E6A23C;
$danger-color: #F56C6C;
$info-color: #909399;

// 布局尺寸
$sidebar-width: 210px;
$navbar-height: 50px;
$breadcrumb-height: 40px;

// 若依风格样式
.app-container {
  padding: 20px;

  .filter-container {
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .table-container {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .pagination-container {
    padding: 20px;
    text-align: right;
  }
}


2. 组件风格统一

<!-- 参考若依的表格样式 -->
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="经销商名称" prop="dealerName">
          <el-input
            v-model="queryParams.dealerName"
            placeholder="请输入经销商名称"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="订单日期" prop="orderDate">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-container">
      <el-table :data="tableData" v-loading="loading" border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="订单编号" prop="orderNo" width="180" />
        <el-table-column label="经销商名称" prop="dealerName" />
        <el-table-column label="订单日期" prop="orderDate" width="120" />
        <el-table-column label="订单金额" prop="totalAmount" width="120" align="right">
          <template #default="scope">
            <span class="amount-text">¥{{ formatMoney(scope.row.totalAmount) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="出库状态" prop="deliveryStatus" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.deliveryStatus === 1 ? 'success' : 'info'">
              {{ scope.row.deliveryStatus === 1 ? '已出库' : '未出库' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button type="success" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>


3. 权限控制实现

// 权限指令
import { usePermission } from '@/stores/permission'

export const permission = {
  mounted(el: HTMLElement, binding: any) {
    const { value } = binding
    const permissionStore = usePermission()

    if (value && !permissionStore.hasPermission(value)) {
      el.parentNode?.removeChild(el)
    }
  }
}

// 权限工具函数
export const hasPermission = (permission: string): boolean => {
  const permissionStore = usePermission()
  return permissionStore.hasPermission(permission)
}

// 按钮权限使用
<el-button 
  v-permission="'order:add'"
  type="primary" 
  @click="handleAdd"
>
  新增订单
</el-button>


4. 路由权限控制

// 路由守卫
import { useUserStore } from '@/stores/user'
import { usePermissionStore } from '@/stores/permission'

router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore()
  const permissionStore = usePermissionStore()

  // 获取token
  const token = userStore.token

  if (token) {
    if (to.path === '/login') {
      next({ path: '/' })
    } else {
      // 检查用户信息
      if (!userStore.userInfo) {
        try {
          await userStore.getUserInfo()
          await permissionStore.generateRoutes()
          next({ ...to, replace: true })
        } catch (error) {
          userStore.logout()
          next(`/login?redirect=${to.path}`)
        }
      } else {
        next()
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
    }
  }
})


开发工具和配置


Vite配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]'
      }
    }
  }
})


TypeScript配置

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}


ESLint配置

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier'
  ],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-unused-vars': 'warn',
    'vue/multi-word-component-names': 'off'
  }
}


Prettier配置

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100,
  "endOfLine": "auto"
}


关键里程碑


第一周里程碑


Day 2结束：基础架构和布局完成

Day 4结束：核心业务页面完成

Day 6结束：所有业务功能完成


第二周里程碑


Day 8结束：系统管理功能完成

Day 10结束：测试和部署完成


项目总结


成功因素


参考成熟框架：基于若依前端风格，界面设计成熟稳定

现代化技术栈：Vue 3 + TypeScript + Element Plus，技术先进

组件化开发：高度复用的组件库，开发效率高

权限控制完善：完整的RBAC权限体系

响应式设计：适配各种设备和屏幕尺寸


预期成果


开发周期：2周完成前端开发

代码质量：TypeScript类型安全，代码规范统一

用户体验：若依风格界面，操作流畅直观

可维护性：模块化架构，组件复用性高

扩展性：易于添加新功能和页面


后续优化


性能优化：代码分割、懒加载、缓存策略

功能完善：根据用户反馈完善功能

移动端适配：开发移动端专用界面

国际化支持：多语言支持

主题定制：支持多主题切换


本开发计划基于Vue 3 + TypeScript + Element Plus技术栈，参考若依前端风格，确保开发出高质量、易维护的企业级管理系统前端。