# managehub-admin-web **Repository Path**: zhang_chen_long123/managehub-admin-web ## Basic Information - **Project Name**: managehub-admin-web - **Description**: managehub-admin-web - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: develop - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-07-15 - **Last Updated**: 2025-07-15 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 圣代企服 ## 前言 该项目为前后端分离项目的前端部分。 ## 项目介绍 `圣代企服`是一个税务管理系统的前端项目，基于Vue+Element实现。主要包括税务查询、机构管理、用户管理、角色管理、菜单列表、资源列表等功能。 ### 技术选型 | 技术 | 说明 | 官网 | | ----------------- | --------------------- | ------------------------------------------------------------ | | Vue | 前端框架 | [https://vuejs.org/](https://vuejs.org/) | | Vue-router | 路由框架 | [https://router.vuejs.org/](https://router.vuejs.org/) | | Vuex | 全局状态管理框架 | [https://vuex.vuejs.org/](https://vuex.vuejs.org/) | | Element | 前端UI框架 | [https://element.eleme.io/](https://element.eleme.io/) | | Axios | 前端HTTP框架 | [https://github.com/axios/axios](https://github.com/axios/axios) | | v-charts | 基于Echarts的图表框架 | [https://v-charts.js.org/](https://v-charts.js.org/) | | Js-cookie | cookie管理工具 | [https://github.com/js-cookie/js-cookie](https://github.com/js-cookie/js-cookie) | | nprogress | 进度条控件 | [https://github.com/rstacruz/nprogress](https://github.com/rstacruz/nprogress) | | vue-element-admin | 项目脚手架参考 | [https://github.com/PanJiaChen/vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) | ### 项目布局 ``` lua build -- 打包配置目录 ├── build.js -- 打包配置主文件 ├── check-versions.js -- 检查环境配置文件 ├── utils.js -- 打包相关配置 ├── vue-loader.conf.js -- vue-loader配置文件 ├── webpack.base.conf.js -- 基础打包配置 ├── webpack.dev.conf.js -- dev打包配置 └── webpack.prod.conf.js -- 生产环境打包配置 config -- 配置目录 ├── dev.env.js -- 开发环境请求域名配置 ├── index.js -- 配置目录主文件 ├── prod.env.js -- 生产环境请求域名配置 ├── staging.env.js -- 预留环境请求域名配置 ├── test.env.js -- 测试环境请求域名配置 └── uat.env.js -- uat环境请求域名配置 src -- 源码目录 ├── api -- axios网络请求接口定义 ├── assets -- 静态图片资源文件 ├── components -- 通用组件封装 ├── icons -- svg矢量图片文件 ├── router -- vue-router路由配置 ├── store -- vuex的状态管理 ├── styles -- 全局css样式 ├── utils -- 工具类 └── views -- 前端页面 ├── home -- 首页 ├── layout -- 通用页面加载框架 ├── login -- 登录页 ├── ums -- 系统管理页面 ├── user -- 用户信息页面 └── administration -- 税务查询页面 static -- 静态文件 ├── icon -- logo图标文件 └── tinymce4.7.5 -- 富文本文件 .editorconfig -- 统一编辑器开发格式 .gitignore -- git规则文件 .postcssrc.js -- postcss 配置 css打包兼容文件 .eslintrc.js -- eslint 配置项 .babelrc -- babel-loader 配置 package.json -- package.json ``` 其余或未提及目录或文件，是框架文件，不能轻易修改 二、项目进度 目前项目基本是迭代开发状态，做完的功能目前有 税务模块：税务查询，税务分析，此两模块主要的功能是负责查税以及 税务分析 ，税务任务是爬虫模块任务的管理，负责监控爬虫任务的成功与失败的状态。 产品模块：产品的增删改查以及产品的条件录入模块，对应前台展示产品模块， 产品匹配问卷模块，产品匹配模块的问答题库配置，智能客服匹配模块中的问题管理对应到产品的咨询问答配置，产品企业分析报告维护的是生成产品匹配报告时的条件。 客户管理模块：企业客户进行产品匹配的用户资料，主要的功能有产看详情，沟通，和分配客户经理，个人客户为后台新建的增删改查的表单，客户方案是对 前台的税务匹配和答题匹配用户的资料 ,分配客户经理，征信录入 以及客服沟通模块。公海客户模块为没有客户经理的客户进行的税务匹配 会员管理模块：用户管理模块为前台移动端的用户管理，意见反馈 为前台用户提交的建议表单填写 助融报告模块：助融报告管理 为公众号 助融报告的用户端的管理模块，工商查询管理为前台用户查询工商的管理模块 运营管理模块：运营看板主要有 数据概况的图表分析和数据表的统计，内容管理主要税对 前台的文章和帖子进行增删改查以及审核配置，以及包括前台的水军账号 和 ip 账号的管理，课程模块 主要是配置前台的课程配置以及课程素材功能，渠道管理主要是对公众号来源的配置管理，素材库 是爬虫爬取到的素材进行管理，短视频管理是前台公众号短视频的配置管理，工具箱管理模块是对移动端工具箱的配置 系统管理模块：机构管理的功能配置分公司，数据字典：前后端使用的固定参数，用户管理： 后台用户管理模块， 角色模块：后台管理角色模块，菜单列表：后台管理端菜单的配置，条件管理: 产品匹配相关的条件配置。参数配置： 前后端约定的固定参数配置，银行配置 ： 银行配置管理，地区维护：移动端查税省份地区维护。 日志管理模块：系统的操作日志管理模块 进件管理： 系统对接刻一刻订单管理 佣金管理：刻一刻订单的佣金结算管理 企业库： 爬虫爬取陕西省企业库数据管理 发布新版本 ，只需将代码 提交到对应分支的代码仓库，执行相关流水线操作即可 CRM配置新页面示例： 1. 后台管理->系统管理->菜单管理->添加菜单 选择对应的目录/菜单/按钮，可创建无限极菜单，只需要本目录和上级目录在选择的时候关联起来。 2. 代码src目录router 添加对应的路由文件; 3. 主文件路由 index 中导入即可 ```javascript // 产品模块路由 import Layout from "../views/layout/Layout"; ​ export const productRoute = [ { path: "", component: Layout, redirect: "/productIndex", name: "product", meta: { title: "产品管理", icon: "product", }, children: [ { path: "productIndex", name: "productIndex", component: () => import("@/views/product/index"), meta: { title: "产品中心", icon: "ums-admin" }, hidden: false, }, { path: "creatProduct", name: "creatProduct", component: () => import("@/views/product/creatProduct"), meta: { title: "发布产品", icon: "ums-admin" }, hidden: true, }, { path: "productDetail", name: "productDetail", component: () => import("@/views/product/detail"), meta: { title: "产品详情", icon: "ums-admin" }, hidden: true, }, { path: "conditionalIndex", name: "conditionalIndex", component: () => import("@/views/product/conditional"), meta: { title: "条件录入", icon: "ums-admin" }, hidden: true, }, { path: "matchingQuestionnaire", name: "matchingQuestionnaire", component: () => import("@/views/product/matchingQuestionnaire"), meta: { title: "产品匹配问卷", icon: "" }, hidden: true, }, ​ { path: "", redirect: "/article/questionIndex", name: "questionIndex", meta: { title: "" }, component: () => import("@/views/product/IntelligentService/route"), children: [ { path: "article/questionIndex", name: "questionIndex", component: () => import("@/views/product/IntelligentService/question/index"), meta: { title: "" }, }, { path: "article/anawerIndex", name: "answerIndex", component: () => import("@/views/product/IntelligentService/answer/index"), meta: { title: "" }, hidden: true, }, { path: "article/addAnswer", name: "addAnswer", component: () => import("@/views/product/IntelligentService/answer/add"), meta: { title: "新增问题" }, hidden: true, }, { path: "article/addprsduct", name: "addAnswer", component: () => import("@/views/product/IntelligentService/answer/addprsduct"), meta: { title: "新增问题" }, hidden: true, }, ], }, ​ { path: "", redirect: "/enterpriseReport/campanyInfoConfig", name: "enterpriseReport", meta: { title: "" }, component: () => import("@/views/product/enterpriseReport/route"), children: [ { path: "enterpriseReport/campanyInfoConfig", name: "campanyInfoConfig", component: () => import("@/views/product/enterpriseReport/campanyInfoConfig"), meta: { title: "" }, hidden: true, }, { path: "enterpriseReport/addConfig", name: "addConfig", component: () => import("@/views/product/enterpriseReport/addConfig"), meta: { title: "新增" }, hidden: true, }, ​ ], }, ], }, ]; import Vue from "vue"; import Router from "vue-router"; ​ Vue.use(Router); ​ import { productRoute } from "./product"; ​ //动态路由 export const asyncRouterMap = [ ...productRoute, { path: "*", redirect: "/404", hidden: true } ]; export default new Router({ // mode: 'history', //后端支持可开 scrollBehavior: () => ({ y: 0 }), routes: constantRouterMap }); ``` 需注意： 后台配置菜单填写的组件名称和前端路由文件中的name 必须保持一致，路由是通过递归数组中的name字段来进行匹配 另需注意 ： 需要 用到的按钮权限 必须要和代码里面的字符约定一致，需要用自定义指令 ## 开发 ```bash # 克隆项目 git clone http://gitlab.julimeng.com:30080/jlm-vue/managehub-admin-web.git # 进入项目目录 cd ## # 安装依赖 npm install # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 指定node版本为 12.14.0 npm install --registry=https://registry.npmmirror.com # 启动服务 npm run dev ``` 浏览器访问 http://localhost:8090 ## 发布 ```bash # 构建测试环境 npm run buildTest # 构建生产环境 npm run build # 构建开发环境 npm run buildDev # 构建uat环境 npm run buildUat ``` ## 搭建步骤 - 下载node并安装：[https://nodejs.org/dist/v12.14.0/node-v12.14.0-x64.msi](https://nodejs.org/dist/v12.14.0/node-v12.14.0-x64.msi); - 该项目为前后端分离项目，访问本地访问接口需搭建后台环境，搭建请参考后端项目[传送门](https://github.com/macrozheng/mall); - 访问在线接口无需搭建后台环境，只需将`config/dev.env.js`文件中的`BASE_API`改为[https://admin-api.macrozheng.com](https://admin-api.macrozheng.com)即可; - 如果你对接的是[mall-swarm](https://github.com/macrozheng/mall-swarm) 微服务后台的话，所有接口都需要通过网关访问，需要将`config/dev.env.js`文件中的`BASE_API`改为[http://localhost:8201/mall-admin](http://localhost:8201/mall-admin) ； - 克隆源代码到本地，使用IDEA打开，并完成编译; - 在IDEA命令行中运行命令：`npm install`,下载相关依赖; - 在IDEA命令行中运行命令：`npm run dev`,运行项目; - 访问地址：[http://localhost:8090](http://localhost:8090) 即可打开后台管理系统页面; - 具体部署过程请参考：[mall前端项目的安装与部署](https://www.macrozheng.com/mall/deploy/mall_deploy_web.html) - 前端自动化部署请参考：[使用Jenkins一键打包部署前端应用，就是这么6！](https://www.macrozheng.com/mall/reference/jenkins_vue.html)