# project-admin **Repository Path**: kangchenxi/project-admin ## Basic Information - **Project Name**: project-admin - **Description**: 企业ERP系统带基础功能，微服务项目Vue管理端模板 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-05-05 - **Last Updated**: 2026-03-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 项目简介 ​ 这是一个企业级的ERP系统前端框架，可使用Ant Design和Element UI两种框架风格。 - 本项目基于 [ruoyi-nbcio](https://gitee.com/nbacheng/ruoyi-nbcio) 进行二次开发，集成了常用的前端组件库，富文本、文件上传、视频播放、流程图绘制、数据缓存等。 - 可切换saas多租户模式或单用户模式。 - 采用Springboot2+vue2框架，功能基本完成，流程已实现自定义业务关联，全部开源，个人与企业可免费使用。 - 项目自带ERP业务，用户、角色、部门、权限、流程等，且将用户分为管理端和用户端，其余业务可自行扩展。 - 后端代码请查看[project-server](https://gitee.com/kangchenxi/project-server)仓库。 ## 前端技术架构 - 基础框架：Vue2 - UI框架：Ant Design、Element UI ## 开发环境 - IDE： IDEA、VsCode - npm版本：8+ - nodel版本：16+ ## 项目整体架构 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_13-34-07.png) ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_15-49-25.png) ## 启动项目 先启动对应的后端服务Api-Admin、Gateway 配置.env.development中的接口地址 ``` # 页面标题 VUE_APP_TITLE = 后台管理系统 # 开发环境配置 ENV = 'development' # 接口地址 #VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = 'http://localhost:8897/api-admin' # WebSoket地址 VUE_APP_WS_API = 'ws://localhost:8897/api-admin' # 应用访问路径,一般与nginx配置前缀相同,例如使用前缀 /admin/ VUE_APP_CONTEXT_PATH = '/' # 代码生成接口地址 VUE_APP_GENERATOR_API = 'http://localhost:8897/common-generator' # xxl-job 控制台地址 VUE_APP_XXL_JOB_ADMIN = 'http://localhost:8894/xxl-job-admin' # 路由懒加载 VUE_CLI_BABEL_TRANSPILE_MODULES = true ``` 修改代理配置vue.config.js ``` // webpack-dev-server 相关配置 devServer: { host: '0.0.0.0', port: port, open: false, proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://localhost:8897/api-admin`, changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } } }, disableHostCheck: true }, ``` 安装依赖并运行 ```bash # 安装依赖 npm install # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npmmirror.com # 启动服务 npm run dev ``` 浏览器访问 http://localhost:9666 ## 流程使用介绍 #### 流程分类 这里可以添加分类，只是做一个区分，在执行流程真正区分的是应用类型，目前只分为OA流程和自定义业务流程，建议不要修改。 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-04-24.png) #### OA表单配置 这里对OA流程的提交表单进行配置，如请假审批表单等，提供表单设计。 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-10-57.png) #### 自定义表单配置 这里对自定义流程提交表单进行配置，比如新增一个商品管理的功能，那么需要提供一个商品的详情页面，在这里配置新增商品后提交流程审批，审批人看到的详情页面，注意业务服务名称、前端路由地址、组件注入方法必须填写正确，目前做了一个示例数据。 - **业务服务名称是后端对应功能的Service层注入bean的名称，该类必须继承IWfCallBackService接口实现其getBusinessDataById方法，后续会根据他来查询到对应需要审核的那条数据。** - **前端路由地址是前端views目录下的相对页面路径，后续会根据它展示对应的页面** - **关联流程发布主键不用填写，在流程配置中如果有流程选择了这个表单，在部署时会自动关联对应的流程部署ID** ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-12-17.png) #### 流程配置 这里绘制流程图并进行部署，这里注意选择的流程分类，选择OA流程只能选择OA表单配置的数据，选择自定义业务流程只能选择自定义表单配置的数据 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-23-16.png) 点击设计绘制流程图，注意开始节点必须选择表单，开始节点后的第一个节点必须是用户节点且审批人必须是发起人，因为这样程序才能知道需要审批的数据是什么，然后启动后默认执行完成第一个节点，即用户提交审批。 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-24-34.png) ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-24-50.png) 审批人可以手动选择固定人，也可以后续根据对应的数据情况，动态指定审批人，使用java反射方法实现。 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-25-20.png) 在使用网关时，可以根据指定的条件走哪条线路 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-37-28.png) 对应代码中的反射方法示例： 这个示例演示了怎么通过任务找到对应某个业务表的数据，dataId就是主键，从而控制流程下一个节点的审批人和分支线路 - **num则是流程图上${num}解析的变量值** ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-11_15-13-31.png) #### 流程部署 这里显示流程配置中已部署的流程，这些流程才能启动。 - **OA流程的启动在流程任务->发起OA流程中启动** - **自定义流程需要在对应页面引入流程公共提交按钮，传入业务服务名称启动** ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-43-49.png) #### 钉钉流程 功能目前未开发完成，只开发了ui组件。 #### 流程查看 这里可以看到所有的流程任务，发起OA流程可以发起任一的OA流程，自定义流程部署了一个自定义业务走流程的案例，如果以后开发其他的功能也需要走流程，可以按照这个功能去实现，自定义流程的的状态放在wf_custom_business表中，根据业务服务名和业务表ID关联任意的业务表。 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_16-50-32.png) #### OA流程部署审批步骤 1.在OA表单配置中绘制一个表单 2.在流程配置中新增一个流程分类为OA流程的数据 3.点击设计绘制流程图，必须有开始节点、结束节点，开始节点中选择之前配置的OA表单，开始节点后的第一个节点必须是用户任务节点且审批人为发起人，含义为发起人提交，这个用户任务节点在启动后会自动完成，点击保存，再点击部署流程 4.在发起OA流程中找到对应的流程，点击发起，填写表单并提交 5.审批人可以在右上角收到通知点击进行办理，也可以点我的代办进行办理 6.在我的申请中查看流程进度 #### 自定义流程部署审批步骤 1.先写好对应的列表查询页面和详情页面 列表查询页面包含通用的流程提交和详情按钮组件 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_17-05-51.png) 详情页面必须包含customFormData，通用组件会将这个值传进来，这个值就是业务服务名称对应bean继承IWfCallBackService接口实现的getBusinessDataById查询出来的业务数据 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_17-06-25.png) 2.在自定义表单配置中新增一条数据，前端路由地址就是详情页面的相对地址，业务服务名称就是对应后端的bean ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_17-12-52.png) 2.在流程配置中新增一个流程分类为自定义业务流程的数据 3.点击设计绘制流程图，必须有开始节点、结束节点，开始节点中选择之前配置的自定义表单，开始节点后的第一个节点必须是用户任务节点且审批人为发起人，含义为发起人提交，这个用户任务节点在启动后会自动完成，点击保存，再点击部署流程 4.在列表查询页面点击提交流程，注意提交按钮传入的serviceName必须和业务服务名称相同，填写表单并提交 ``` ``` 5.审批人可以在右上角收到通知点击进行办理，也可以点我的代办进行办理 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_17-18-27.png) ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_17-18-53.png) 6.在我的申请中查看流程进度 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_17-19-07.png) ## ElementUI和AntDesign组件对比 在我的消息功能中，提供了这两套组件实现同一功能的页面对比 ![](https://kcxbucket.oss-cn-shenzhen.aliyuncs.com/md/Snipaste_2025-10-08_17-27-09.png) ## 发布 ```bash # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod ```