运营小工具

millionz 11f01a8950 fix: 修复在咨询派单设置页面知识库关联列表做关联操作时,不应显示操作列的问题 3 months ago
docker b599ba0124 feat: 兼容saas版商户后台-登陆改造&&mid环境变量新增 4 months ago
public 7e7656fc29 fix: 新增导航规则确立 3 months ago
src 11f01a8950 fix: 修复在咨询派单设置页面知识库关联列表做关联操作时,不应显示操作列的问题 3 months ago
.cz-config.js 6dc7d84ddd chore: 修改commit message 辅助生成工具 1 year ago
.drone.yml 6bf0c31a07 fix: 重置drone触发分支为dev 10 months ago
.env 2f61fa8b92 feat: 新增jwt过期机制 3 months ago
.eslintrc.js 200cf19475 feat: 完成数据面板页面 1 year ago
.gitignore b2bad5f191 refactor: 修改 easy-mock 地址 1 year ago
.npmrc 66d19d87b0 chore: 更换npm包的下载地址 7 months ago
.postcssrc.js 9bd0995cad test: 修改filterRoutes 1 year ago
.prettierrc.yml 818854ef69 chore: 修改格式化工具以及规范 1 year ago
.stylelintrc.json d008eeeca9 fix: 还原UI稿并修复样式问题 1 year ago
Dockerfile 0f480cde0c chore: 修改dockerfile文件 7 months ago
README.md 243e2e5ddc feat: 合并dev最新的代码 4 months ago
babel.config.js b1c6974aab init 1 year ago
commitlint.config.js 8c41e149c7 feat: 阶段1:基础搭建,登录、错误页面、换肤、icon 1 year ago
jest.config.js 34933e0bd2 feat: UI, 权限菜单, refactor 1 year ago
package.json 53cb89631a feat: 完成推荐产品部分联调工作 6 months ago
vue.config.js 2bf36c8601 fix: 删减代码 4 months ago
yarn.lock 53cb89631a feat: 完成推荐产品部分联调工作 6 months ago

README.md

金服宝管理后台 V2 Build Status

git 相关

开发流程:

功能开发,需要基于 dev 分支拉出新的功能分支,例如:feature/product,在开发完成后 merge 到 dev 分支,并且删除拉出的开发分支。
小 bug 的修复可以在 dev 上进行,但是绝对严禁在 dev 分支上进行功能的开发。

提交规范:

在提交前必须先 pull 当前分支的代码,处理完冲突后再提交。
禁止手动填写 commit message,请使用命令 git cz 进行 commit message 的填写。
详细流程请阅读:https://wiki.finogeeks.club/pages/viewpage.action?pageId=28803723

访问地址

页面路由

路由结构图

1.通用模块

名称 name id path
首页 home '1000' /
登录 login '1001' /login
401 error_401 '1002' /error_401
403 error_404 '1003' /error_404

2.工单管理

名称 name id path
工单管理 orderList '2100' /list
工单规则 rules '2200' /rules
派单规则 rules '2200' /rules
抢单规则 grabOrder '2220' /grab
超时规则 timeoutOrder '2220' /timeout

3.积分管理

名称 name id path
积分规则 rule '3100' /rule
积分总览 excitation '3110' /overview
积分规则管理 deduction '3120' /rules
积分结算 settlement '3200' /settlement

4.合规管理

名称 name id path
敏感词 sensitive '4100' /sensitive
敏感词管理 managementWords '4100' /management
敏感词类型 sensitiveType '4110' /sensitive-type
知识库 knowledge '4200' /knowledge
知识库管理 questionsGroups '4210' /questions
知识库分组 serviceKnowledgeList '4220' /questions-groups
工单监控 monitor '4300' /monitor

5.产品管理

名称 name id path
基金产品 serviceProductFinancial '5100' /financial

6.基础管理

名称 name id path
人员管理 personnel '6100' /personnel
人员列表 staff '6110' /staffCustomer
分组管理 staffGroup '6120' /group
合规 compliance '5200' /platform/compliance
营业部管理 department '6200' /department

配置

域名以及二级目录的配置

  1. 首先环境配置文件.env中配置上默认的二级目录,例如:

VUE_APP_GATEWAY_PATH=/gateway-path-to-replace

以及个性化目录:

VUE_APP_ADMIN_PATH=/pc/admin

  1. 修改vue.config.js文件的打包配置,

在文件中通过 process.env.获取到配置文件的变量:

const fullPath = process.env.VUE_APP_GATEWAY_PATH + process.env.VUE_APP_ADMIN_PATH;

此时fullPath就是项目的 baseUrl。

  1. 定义脚本模板,使用dockerize通过脚本模板生成脚本来替换配置文件里定义的默认二级目录为真实的目录。栗子:
   #!/bin/sh
   set -e

   # 替换目标为默认的二级目录
   search='/gateway-path-to-replace'
   # 替换内容为rancher定义的变量
   # 因为考虑到测试环境以及部分客户的生产环境不需要二级目录,所以需要在这里设置一个""默认值。
   replace={{ default .Env.GATEWAY_PATH "" }}
   # 脚本执行的目录
   distPath=/root/dist

   export LC_CTYPE=C
   export LANG=C

   # 执行查找替换命令,将默认的二级目录替换为真实的二级目录
   find $distPath -type f -print0 | xargs -0 sed -i "s~$search~$replace~g"

4.keep-alive 缓存 keep-alive 字段保存在路由文件中 meta 对象中

主题配置

其实原理差不多,只不过主题的配置需要提前将整个项目相关的 class 抽取出来,写成一个新的样式文件,然后通过修改这个样式文件来控制主题色。

  1. 使用 iview 官方推荐的变量覆盖的方式,修改整个项目的默认主题色。

src/theme/blue.less

  1. 抽取需要自定义覆盖的 class 组成新的模板样式文件。

docker/config.css.tpl

  1. app.vue里动态引入生成的 css 样式文件:
    loadCss() {
         const fullPath = process.env.VUE_APP_GATEWAY_PATH + process.env.VUE_APP_ADMIN_PATH;
         const head = document.getElementsByTagName('head')[0];
         const link = document.createElement('link');
         link.href = `${fullPath}/theme/config.css`;
         link.rel = 'stylesheet';
         link.type = 'text/css';
         head.appendChild(link);
       },
  1. 在运行时动态修改模板文件里使用的变量就可以修改主题色。

logo 配置

logo 配置也被一并放在主题配置文件里:

docker/config.css.tpl

{{ if .Env.LOGO_IMG }}
.header-nav__logo {
  background: url("{{.Env.LOGO_IMG }}") no-repeat center !important;
}
{{ end }}

1.先将 logo 上传至 fin-statics 服务下的:

statics/images/swan_admin

2.在 rancher 环境变量配置

LOGO_IMG:https://api.finolabs.club/statics/images/swan_admin/logo_icbc.svg

其他配置

管理后台的功能也可以根据配置文件来动态配置。

  1. 首先需要添加一个默认配置文件(可以随意添加需要的变量):

src/configs/config.js

   export default {
     // 是否是对接版
     docking: false,
     // 超级管理员ID
     superAccount: '@staff_super:im.icbc.com.cn',
     // 表格内链接的颜色
     themeColor: '#BA1219',
   };
  1. 同主题配置一样,添加配置文件生成模板,根据 rancher 变量来动态生成配置文件(只有当与默认配置文件不同时,才需要在模板里配置)。

docker/config.json.tpl

  1. 根据默认配置文件和动态生成的配置文件来合并生成最终的全局配置对象:
   import * as _ from 'lodash';
   import axios from '@/libs/axios';
   import defaultConfig from '@/configs/config';

   export function loadConfig() {
     // 生产环境才合并,开发环境读取本地默认文件
     if (process.env.NODE_ENV === 'production') {
       const fullPath =
         process.env.VUE_APP_GATEWAY_PATH + process.env.VUE_APP_ADMIN_PATH;
       // 读取生成的配置文件
       return axios.get(`${fullPath}/config.json`).then(res => {
         // 使用lodash提供的merge方法来合并两个json对象
         const appConfig = _.merge(defaultConfig, res.data);
         return appConfig;
       });
     }

     return defaultConfig;
   }
  1. 在需要使用的地方通过 loadConfig()来获取变量。 loadConfig()会多次加载 config.json,全部改用 store 里面获取

部署

在 rancher 启动时配置需要的变量

例如:

// 将主题色变更为#BA1219
THEME_COLOR: #BA1219
// 修改版本为对接版
DOCKING_VERSION:true

工行部署

测试环境

配置 rancher 环境变量

// 主题色为红色
THEME_COLOR: #BA1219
// 二级目录
GATEWAY_PATH:/gdfdcrcj/gdbee
// logo
LOGO_IMG:对应域名/statics/images/swan_admin/logo_icbc.svg
正式环境

配置 rancher 环境变量

// 主题色为红色
THEME_COLOR: #BA1219
// 二级目录
GATEWAY_PATH:/ghol/gdbee
// logo
LOGO_IMG:对应域名/statics/images/swan_admin/logo_icbc.svg

test

docker 环境变量含义
LOGO_IMG // 左上角logo

THEME_COLOR: #407de0 // 主题色

WEBSITE_TITLE // 管理后台命名title

GATEWAY :http://gateway.gateway:8000 //接口转发到内网用,一创

PRIVATE_NETWORK : false // 是否内网访问,过滤路径处理

ACCOUNT_TYPE : manager //登陆类型 ?

HIDE_RESET_PWD : false //是否隐藏重置密码

PRODUCT_TYPE // 产品类型,准备弃用

APPID : wxd256e18732777b2a  //渠道跳转小程序用 ?

IS_SAAS:true //是否saas版本

IS_TAMP : // 是否tamp平台

RICH_TEXT_HOST: https://swan.finogeeks.com  //富文本上传图片域名

HOST: https://swan.finogeeks.com // 渠道生成h5链接

INCLUDE_ROUTES // 包括的路由

EXCLUDE_ROUTES // 排除的路由
PROXY_URL: http://gateway.gateway:8000 //接口转发到内网用

BASE_URL: https://swan.finogeeks.com  // 外网基础url

ACCESS_NETWORK: 'INNER' // INNER内网/OUTER外网

PLATFORM_TYPE: 'TAMP' // 'SAAS'/SaaS多租户  'STANDARD'/标准版(私有化部署) 'TAMP'/盈米统包资产管理平台

INCLUDE_ROUTES // 包括的路由

EXCLUDE_ROUTES // 排除的路由



WEBAPP_NAME   // 管理后台title

WEBAPP_LOGO  // 主页左上角logo

THEME_COLOR: #407de0 // 主题色

MINIPROGRAM_APPID : wxd256e18732777b2a  //渠道跳转小程序用 ?

FEATURE_HIDE_RESET_PWD : false //是否隐藏重置密码

同步tamp-broker项目

具体步骤如下:

2、把新项目添加到旧项目中:git remote add tamp-broker https://git.finogeeks.club/swan-fe/tamp-broker.git
3、验证一下:git remote -v
4、抓取新项目:git fetch tamp-broker
5、合并新项目到本地克隆项目:git merge tamp-broker/develop --allow-unrelated-histories
6、将本地克隆项目推动到旧项目:git push origin master

swan-admin 代码规范

  • 两个空格进行缩进
  • 文件命名全小写,用中划线 — 链接
  • 代码变量/属性/函数命名用小驼峰
  • 常量命名全大写,用下滑线 _ 链接,抽离到文件头部或者引入常量配置
  • 类名要用大驼峰
  • 使用 Promise 一定要捕捉错误
  • 尽量用 async await 替代 new Promise -