推荐一款Vue开发的OA系统 -- 基于Ant Design Pro 开发，项目名：VueOA

最新推荐文章于 2024-08-21 08:37:01 发布

星河_赵梓宇

最新推荐文章于 2024-08-21 08:37:01 发布

阅读量9.7k

点赞数 9

本文链接：https://blog.csdn.net/Aria_Miazzy/article/details/104960221

版权

基于Ant Design Pro 开发，项目名：VueOA

源码地址：

github: https://github.com/Miazzy/oa-front-service

gitee: https://gitee.com/yunwisdoms/oa-front-service

Overview

基于 Ant Design of Vue 开发的OA综合管理系统

Vue 开发的OA系统

具有工作流动态审批、加签、会签等工作流功能，可以对工作流程的审批业务进行评论/讨论
具有文档预览、图片预览等功能
具有博客编写、预览、查看、搜索等功能
具有社区、问答等功能
具有OA系统常用功能
具有在线网盘等功能
工作流引擎完全手写且开源，可以类似钉钉/飞书那样，动态选择审批人员。

源码地址：

github: https://github.com/Miazzy/oa-front-service
gitee: https://gitee.com/yunwisdoms/oa-front-service
注意：由于码云仓库最大只支持5G空间，现在容量不足，已经无法提交，故最新代码提交至github仓库，目前由于开发文档、部署文档尚未编写，在后续将抽空编写

依赖项目

https://gitee.com/yunwisdoms/xmysql (数据库API接口Rest服务)
https://gitee.com/kekingcn/file-online-preview.git (文档预览服务)
https://gitee.com/yunwisdoms/imgproxy.git (图片压缩、在线裁剪、在线处理服务)
https://gitee.com/jeecg/jeecg-boot.git (SpringBoot后端服务,本项目的后端是jeecg-boot改造的，用原始的jeecg-boot也是支持)
https://gitee.com/sendya/ant-design-pro-vue.git (本项目前端项目由这个开源项目改造而来)
https://gitee.com/vilson/vue-projectManage.git (本项目的项目管理系统，就是把这个集成过来，尚未完成)
https://gitee.com/miazzy/mili (米粒网开源社区的项目，集成到本项目，提供社区论坛，第三方博客功能)

预览地址

https://www.shengtai.club （账户 zhaoziyu/Miazzy@163.com 各位大大，请不要胡乱操作哦，测试环境懒得部署，这个算个小的正式环境）

部署文件

部署本地mysql数据库（支持mysql5.7/mysql8.0 , 数据库SQL传送门：https://gitee.com/yunwisdoms/jeecg-database-sync , 下载最新的一个sql.gz，然后用vim打开即可）
部署本地redis缓存服务器（redis-4/redis-5）
部署xmysql (xmysql要配置本地的mysql数据库，xmysql项目有配置教程，传送门：https://gitee.com/yunwisdoms/xmysql)
https://www.shengtai.club/apache-tomcat.tar （下载解压缩，修改里面的application-dev.yml里面数据库连接地址,Redis连接地址）
git clone https://gitee.com/yunwisdoms/oa-front-service . (克隆本项目，yarn install后，yarn run serve 运行测试环境，测试环境请修改index.html中的后端服务器、rest服务器连接地址，其他文档预览，图片裁剪的暂时不管)
前端部署打包，在前端项目中运行 yarn run build , 然后将打包后的目录放入Nginx的html文件夹中，配置nginx服务器
部署Nginx ，请先确保安装docker， docker run --name docker-nginx -p 80:80 -p 8080:80 -p 443:443 -p 8443:443 nginx (未安装docker不影响哈，自行在linux上部署nginx即可，然后把打包后的前端目录放入Nginx对应的目录中，修改Nginx配置，在下文中列出了一个线上版本的Nginx配置文件)

前端技术

基础框架：ant-design-vue - Ant Design Of Vue 实现
JavaScript 框架：Vue
Webpack
node
yarn
eslint
@vue/cli 3.2.1
vue-cropper - 头像裁剪组件
@antv/g2 - Alipay AntV 数据可视化图表
Viser-vue - antv/g2 封装实现

项目下载和运行

输入图片说明

拉取项目代码

git clone https://gitee.com/yunwisdoms/oa-front-service.git .

安装依赖

yarn install

开发模式运行

yarn run serve

编译项目

yarn run build

Lints and fixes files

yarn run lint

其他说明

项目使用的 vue-cli3, 请更新您的 cli
关闭 Eslint (不推荐) 移除 package.json 中 eslintConfig 整个节点代码
修改 Ant Design 配色，在文件 vue.config.js 中，其他 less 变量覆盖参考 ant design

官方说明

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖，用于自定义 ant design 主题 */

          'primary-color': '#F5222D',
          'link-color': '#F5222D',
          'border-radius-base': '4px',
        },
        javascriptEnabled: true,
      }
    }
  }

项目截图

首页，含有我的待办，我的已办，行政公告，红头文件，新闻资讯，市场观察等内容，提交审批后，待处理人会收到我的待办消息，点击进入我的审批详情进行审批操作

输入图片说明

审批流程详情页面，点击‘打码’按钮可以生成二维码，手机扫码后，可以直接跳转到此详情页面输入图片说明

审批流程详情页面，点击‘打码’按钮可以生成短链接，浏览器打开短链接，可以直接跳转到此审批详情页面

输入图片说明审批流程详情页面，上传的附件，可以进行预览，支持Office、PDF、图片预览，后续添加音频、视频等多媒体文件播放功能，Office文档上传后，会触发文档转PDF任务，在文档转换期间，如果预览文档，则调用KKfileView进行预览文档，转换完毕，且文档存在于服务器后端，则直接用已经转换完毕的完毕的PDF文档进行预览，上传的图片会被压缩处理，并生成100x60的缩略图。