web-comp-ecif

web-front

当前最新版本： 1.1.0（发布日期：20210826）

Overview

基于 Ant Design of Vue 实现的 Ant Design Pro Vue 版

前端技术

• 基础框架：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 封装实现

• 安装依赖

yarn install

• 开发模式运行

yarn run serve

• 编译项目

yarn run build

• Lints and fixes files

yarn run lint

MOCK使用说明

如果需要本地mock，修改配置如下：

1、将src/mock/index.js里面options.mock设置为true;
2、按模块创建mockjs文件，文件内容如下：
import Mock from 'mockjs'

export default ({ mock }) => {
    if (!mock) return;
    let url = window._CONFIG.domianURL
    // 数据字典查询
   Mock.mock(url+'/base/sys/rule/listRuleParmDef',  {"rtnCode":"SUCCESS","rtnMsg":"服务调用成功","subCode":"SUCCESS","errCode":"000000","errMsg":"交易成功","outMsgNo":"20210927000000014","bizContent":"{\"list\":[{\"brNo\":\"999999\",\"dicKey\":\"flowBusType\",\"dicName\":\"审批业务类型\",\"list\":[{\"dicValue\":\"addAdvance\",\"dicDesc\":\"积分预提规则新增\",\"dicSts\":\"ST00\",\"dicNo\":\"0\"},{\"dicValue\":\"addGradeBase\",\"dicDesc\":\"会员等级信息新增维护\",\"dicSts\":\"ST00\",\"dicNo\":\"1\"},{\"dicValue\":\"advanceRuleAp\",\"dicDesc\":\"积分预提规则审批\",\"dicSts\":\"ST00\",\"dicNo\":\"2\"},{\"dicValue\":\"applyAdjust\",\"dicDesc\":\"手工调账审批\",\"dicSts\":\"ST00\",\"dicNo\":\"3\"},{\"dicValue\":\"applyWelfareInfo\",\"dicDesc\":\"福利券信息审批\",\"dicSts\":\"ST00\",\"dicNo\":\"4\"},{\"dicValue\":\"busInvite\",\"dicDesc\":\"业务邀请关系批量调整\",\"dicSts\":\"ST00\",\"dicNo\":\"5\"},{\"dicValue\":\"colorRightBatch\",\"dicDesc\":\"批量导入白名单\",\"dicSts\":\"ST00\",\"dicNo\":\"6\"},{\"dicValue\":\"commonOnOffAp\",\"dicDesc\":\"积分规则开关配置审批\",\"dicSts\":\"ST00\",\"dicNo\":\"7\"},{\"dicValue\":\"conScaleAp\",\"dicDesc\":\"积分兑换比例设置审批\",\"dicSts\":\"ST00\",\"dicNo\":\"8\"},{\"dicValue\":\"delComColorRight\",\"dicDesc\":\"白名单移除\",\"dicSts\":\"ST00\",\"dicNo\":\"9\"},{\"dicValue\":\"editActBaseInfo\",\"dicDesc\":\"活动信息编辑添加\",\"dicSts\":\"ST00\",\"dicNo\":\"10\"},{\"dicValue\":\"harmfulOverAp\",\"dicDesc\":\"不良客户积分兑换规则\",\"dicSts\":\"ST00\",\"dicNo\":\"11\"},{\"dicValue\":\"invitationRelation\",\"dicDesc\":\"会员邀请关系批量调整\",\"dicSts\":\"ST00\",\"dicNo\":\"12\"},{\"dicValue\":\"inviteReg\",\"dicDesc\":\"业务注册邀请调整\",\"dicSts\":\"ST00\",\"dicNo\":\"13\"},{\"dicValue\":\"inviteRelation\",\"dicDesc\":\"会员注册邀请调整\",\"dicSts\":\"ST00\",\"dicNo\":\"14\"},{\"dicValue\":\"modAdvance\",\"dicDesc\":\"积分预提规则编辑\",\"dicSts\":\"ST00\",\"dicNo\":\"15\"},{\"dicValue\":\"modGradeBase\",\"dicDesc\":\"会员等级信息编辑维护\",\"dicSts\":\"ST00\",\"dicNo\":\"16\"},{\"dicValue\":\"pointAdjust\",\"dicDesc\":\"积分调整\",\"dicSts\":\"ST00\",\"dicNo\":\"17\"},{\"dicValue\":\"pointBatchAdjust\",\"dicDesc\":\"积分批量调整\",\"dicSts\":\"ST00\",\"dicNo\":\"18\"},{\"dicValue\":\"removeAdvance\",\"dicDesc\":\"积分预提规则删除\",\"dicSts\":\"ST00\",\"dicNo\":\"19\"},{\"dicValue\":\"removeGradeBase\",\"dicDesc\":\"会员等级信息移除\",\"dicSts\":\"ST00\",\"dicNo\":\"20\"},{\"dicValue\":\"settleSubmit\",\"dicDesc\":\"结算单审批\",\"dicSts\":\"ST00\",\"dicNo\":\"21\"},{\"dicValue\":\"whiteColorListAdd\",\"dicDesc\":\"白名单新增\",\"dicSts\":\"ST00\",\"dicNo\":\"22\"},{\"dicValue\":\"whiteColorListUpdate\",\"dicDesc\":\"白名单维护\",\"dicSts\":\"ST00\",\"dicNo\":\"23\"},{\"dicValue\":\"empCondAuth\",\"dicDesc\":\"员工兑换权限设置\",\"dicSts\":\"ST00\",\"dicNo\":\"24\"},{\"dicValue\":\"gradeEquity\",\"dicDesc\":\"等级权益维护\",\"dicSts\":\"ST00\",\"dicNo\":\"25\"},{\"dicValue\":\"withholdingpoint\",\"dicDesc\":\"预提积分审批\",\"dicSts\":\"ST00\",\"dicNo\":\"26\"},{\"dicValue\":\"pointFrozen\",\"dicDesc\":\"会员冻结\",\"dicSts\":\"ST00\",\"dicNo\":\"25\"},{\"dicValue\":\"pointUnFrozen\",\"dicDesc\":\"会员解冻\",\"dicSts\":\"ST00\",\"dicNo\":\"26\"},{\"dicValue\":\"modGradeBaseImg\",\"dicDesc\":\"会员等级图片编辑\",\"dicSts\":\"ST00\",\"dicNo\":\"27\"}]}],\"pageSize\":10,\"pages\":1,\"currentPage\":1,\"totalRows\":1}"});
}
说明： Mock.mock(uri, respontData), 第一个参数为请求路径，第二个参数为模拟应答数据；
3、在src/mock/index.js中引用添加的js文件，并调用js文件中的方法,如：
import dataDic from './data-dic';

dataDic(options);

注意：mock只能在正常请求后端服务时使用，前端本地代理模式下无法mock代理请求地址；

其他说明

• 项目使用的 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,
      }
    }
  }

附属文档

• Ant Design Vue

• 报表 viser-vue

• Vue