base-web-ele

开发前须知

• 案例地址：https://base-web.btzh.net:4443/base-ele/#/，账号admin密码123456
• 目前项目接口使用的public\api中的静态文件，删除即可
• vue.config.js配置中publicPath配置改为/
• .env.development中更改配置地址和配置端口，防止和其他项目端口冲突
• src\views\Login.vue中登录调用的是get接口，改为post

更新记录

20220507

1. 更改了基本配置页面，采用了本地服务文件的方法
2. 删除了主题颜色配置功能
3. 删除了 gis 相关代码，后期放置到项目中
4. 增加了适配element黑色主题的代码逻辑

20210510

1. 增加tabStatus组件
2. 优化utils引入逻辑

20210428

1.整合Icon和SvgIcon组件逻辑，新增MyIcon使用方法不变 2.增加引入图片逻辑，可以使用this.$pictures调用icons/png文件夹下图片

20210324

1. 增加GisControl组件，控制电子地图，影像地图，行政区划等；
2. 增加GisMap内置方法，实现处理树状图层，图层切换功能

20210318

1. 优化biz文件内容，删除重复方法
2. 增加使用BaseWeb功能增删改查案例页面：Home
3. 更新BaseWeb版本为1.0.1

20210311

1. 增加GisLocation组件，实现选点弹窗
2. 优化SLocation组件，实现点位渲染，选点操作
3. 优化GisMap组件，增加绘图层、网格层，实现点位查询，点击操作

20210310

1. 增加主题配置功能

• BottomFloat:实现组件
• dark.scss样式配置

2. 增加阅读模式和深色模式选项

20210223

1. 增加gis文件夹
2. 优化配置引用逻辑
3. 增加 gis 相关混入方法

使用前

配置npm代理

本系统内置公司npm库中组件，需要首先配置npm代理地址，如果已经配置则不需进行这个步骤

npm config set registry https://nexus.btzh.net/repository/npm-group/
registry=https://nexus.btzh.net/repository/npm-group/
.npmrc

下载label

npm install

启动项目

本项目默认端口7220，如需变更在.env.development进行更改

npm run serve

打包项目

npm run build

项目目录

├─public
│  │  chalk.css       Element主题文档
│  │  favicon.ico
│  │  index.html
│  │
│  └─tinymce
└─src
    │  App.vue
    │  config.js
    │  main.js
    │
    ├─assets            静态文件
    ├─components
    │  │  index.js
    │  │
    │  ├─custom         自定义组件
    │  │      Copy.vue
    │  │      ErrorLog.vue
    │  │      Icon.vue
    │  │      SEditor.vue
    │  │      SvgIcon.vue
    │  │      ThemePicker.vue
    │  │
    │  └─page           page功能组件
    │          ButtonManage.vue
    │
    ├─icons             图标
    │  │  index.js
    │  │  svgo.yml
    │  │
    │  ├─png            存放png格式图片
    │  │
    │  └─svg            存放svg图片
    │
    ├─page               业务相关页面存放处
    │
    ├─router
    │  │  index.js
    │  │
    │  └─modules
    │          custom.js
    │          page.js
    │
    ├─store             Vuex配置目录
    │  │  getters.js
    │  │  index.js
    │  │
    │  └─modules
    │          custom.js
    │          setting.js
    │          theme.js
    │          user.js
    │
    ├─styles             样式目录
    │      common.scss
    │      icon.scss
    │      index.scss
    │      layout.scss
    │      public.scss
    │      variables.scss
    │
    ├─utils              工具类目录
    │      biz.js
    │      bus.js
    │      dark.js
    │      error.js
    │      file.js       文件服务相关方法
    │      http.js
    │      index.js
    │      single.js
    │      upload.js     组件覆盖逻辑
    │
    └─views              系统基础页面
        │  Login.vue
        │  LoginIframe.vue
        │
        ├─custom
        │      401.vue
        │      404.vue
        │      Black.vue
        │      Default.vue
        │
        └─index
                Index.vue
                IndexHeader.vue
                IndexMenuItem.vue
                IndexTabClose.vue
                IndexUpdatePassword.vue
│  .env.development
│  .eslintrc.js
│  .example.development
│  .gitignore
│  .postcssrc.js
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js

更新内容

本次主要针对之前项目所用系统进行代码、样式、逻辑上的优化，本文档以下部分主要讲解此次更新的内容和逻辑

全局

优化所有滚动条样式

/* src\styles\common.scss */
div,
body {
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: $--color-primary;
    background-image: -webkit-linear-gradient(
      45deg,
      hsla(0, 0%, 100%, 0.2) 25%,
      transparent 0,
      transparent 50%,
      hsla(0, 0%, 100%, 0.2) 0,
      hsla(0, 0%, 100%, 0.2) 75%,
      transparent 0,
      transparent
    );
  }

  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #ededed;
  }
}

头部功能增加

在顶部增加了系统主题变更和错误日志保存功能，双击头部标题名称即可显示

错误日志

错误日志逻辑主要通过

• src\utils\error.js中注册Vue.config.errorHandler全局事件
• src\utils\http.js中捕获错误
• src\store\modules\custom.js全局保存
• src\components\custom\ErrorLog.vue组件来显示错误来实现的，具体逻辑可以查看这几个文件

主题切换

主要通过

• src\styles\variables.scss储存主题变量
• src\store\modules\theme.js全局变更
• src\utils\color.js中的方法

来实现的

左侧菜单优化

优化开合菜单图标和菜单列表图标

原有问题：菜单图标和控制开合菜单的图标由于通过image标签引入，不会根据主题颜色更改，经常出现违和情况

此次更改之后菜单图片会根据菜单选中颜色和主题颜色进行改变

• 实现原理

  • 为标签增加drop-shadow属性，复制图标
  • 在进行位移，通过父标签设置大小遮住原来图标

/* src\styles\layout.scss */
img {
  filter: drop-shadow($--color-primary 25px 0);
  height: 22px;
  width: 22px;
  transform: translateX(-22px);
  cursor: pointer;
}

优化菜单开合右侧内容区宽度不变问题

/* src\styles\layout.scss */
.index-layout .index-container.collapsed {
  width: calc(100% - 76px);
}

菜单支持多级菜单功能

主要通过对IndexMenuItem组件的引用

实现代码位置：src\views\index\IndexMenuItem.vue

案例代码

(data = [
  {
    "menuId": 26,
    "parentId": 0,
    "name": "第一级",
    "address": "0",
    "orderNo": 5,
    "children": [
      {
        "menuId": 27,
        "parentId": 26,
        "name": "第二级",
        "address": "evaluation_management",
        "orderNo": 1,
        "children": [
          {
            "menuId": 31,
            "parentId": 30,
            "name": "第三级",
            "address": "indicator_library",
            "orderNo": 1,
          }
        ],
      },
      {
        "menuId": 28,
        "parentId": 26,
        "name": "第二级",
        "address": "evaluation_question",
        "orderNo": 2,
      }
    ],
  }
])

右侧内容优化

右侧为主要业务逻辑区，用法还和之前一直，未进行大的改动，主要增加了无菜单显示页面，无权限显示页面，无功能显示页面，未开发业务显示页面

• 无菜单显示页面：src\views\custom\Default.vue

  • 关闭所有页面会显示此页面

• 无权限显示页面：src\views\custom\401.vue

  • 访问page有的页面，但是没有权限显示此页面

• 无功能显示页面：src\views\custom\404.vue

  • 访问page没的页面，但是也没有权限的显示此页面

• 未开发业务显示页面：src\views\custom\Black.vue

  • 访问page没的页面，但是有权限的显示此页面

除了以上系统内部访问的页面除外，增加了其他系统通过iframe访问功能页面

文件路径src\views\LoginIframe.vue

• 优化config配置获取api,web,fls逻辑
• 优化Vuex交互逻辑
• components 组件引用方式

代码优化

配置文件config获取逻辑变更

解决痛点：在项目需要一个新的域名的情况下，都需要再配置中增加

if (!api) {
  let segments = location.href.split("/");
  api = segments[0] + "//" + segments[2];
}

let publicPath = "/";
if (publicPath === "/" || !publicPath) {
  web = api;
} else if (publicPath.startsWith("/")) {
  web = api + publicPath;
} else {
  web = api + "/" + publicPath;
}
if (!web.endsWith("/")) {
  web = web + "/";
}
fls = api;

路由组件缓存引入文件逻辑

解决痛点：一般新建页面，组件等在新建完文件之后都需要再引入，该优化通过前端自动化方法require.context来进行统一引入，只需要新建文件即可

• 组件引用逻辑 src\components\index.js

const modulesFiles = require.context("./", true, /\.vue$/);
const components = modulesFiles.keys().reduce((components, modulePath) => {
  const moduleName = modulePath.replace(/^\.(.*)\/(.*)\.\w+$/, "$2");
  const value = modulesFiles(modulePath);
  components[moduleName] = value.default;
  return components;
}, {});

export default {
  install(Vue) {
    for (const name in components) {
      Vue.component(name, components[name]);
    }
  },
};

• 页面引用逻辑 src\router\modules\page.js

import Vue from "vue";

const modulesFiles = require.context("@/page", true, /\.vue$/);
const page = modulesFiles.keys().reduce((page, modulePath) => {
  const value = modulesFiles(modulePath);
  page.push(value.default);
  return page;
}, []);

let pageRouter = [];

for (const component of page) {
  pageRouter.push({
    path: "/" + component.name,
    component,
    name: component.name,
    meta: { login: true },
  });
  Vue.component(component.name, component);
}
export default pageRouter;

新组件

• 点击复制组件 src\components\custom\Copy.vue
• 通用图标组件 src\components\custom\Icon.vue
• 富文本编辑器 src\components\custom\SEditor.vue
• svg 图标组件 src\components\custom\SvgIcon.vue

关于SvgIcon组件

iconfont官网下载相关的svg图片,直接放入src\icons\svg文件夹中，通过以下代码使用即可

<my-icon icon-class="bug" size="small" />

解决痛点

• 解决之前需要变更图标颜色时需要两张图片切换来实现，svg可以通过color和fill属性来变更颜色
• 解决图片引入时仍需要变更样式等问题