定制app开发B站云E办Springboot+vue——前端项目完整版（含源码）

一、项目简介

项目背景：定制app开发受疫情的影响，定制app开发许多企业由线上办公转定制app开发为线下办公。定制app开发随着线上办公的人数的增多，定制app开发线上办公的优点逐步凸显：定制app开发通过实现工作流程的自动化、定制app开发节省企业办公费用、定制app开发实现绿色办公，定制app开发同时提升办公效率。

项目介绍：定制app开发本项目实现了一个在线办公系统，定制app开发用来管理日常办公事物的：定制app开发日常流程审批，新闻，通知，公告，文件信息，财务，人事，费用，资产，行政，项目，定制app开发移动办公等。定制app开发通过软件的方式让办公定制app开发系统根据方便管理，定制app开发提高整体的管理运营水平。

实现方式：定制app开发本项目基于Vue+Spring Boot构架一个。定制app开发前端使用社区非常活跃定制app开发的开源框架vue进行构建。简单地说，定制app开发前后端分离 定制app开发的核心思想是前端页面通过 ajax 定制app开发调用后端的 restuful api 定制app开发进行数据交互，而 定制app开发单页面应用（single page web application，），定制app开发就是只有一张页面，定制app开发并在用户与应用程序交定制app开发互时动态更新该页面的 Web 应用程序。

1.1 技术架构

1.2 定制app开发前端技术架构

定制app开发本项目采用前后端分离开发模式，使用Spring Boot构建后端。

定制app开发前端使用的技术有：

Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat

项目搭建：Vue-cli ；状态管理：Vuex ；路由管理：VueRouter；UI界面：ElementUI；通讯框架：Axios ；

前端语法：ES6；打包工具：Webpack；在线聊天：WebSocket；字体：font-awesome；定制app开发文件上传下载：js-file-download；定制app开发在线聊天开源项目：vue-chat

定制app开发前端模块分为：登录、职位管理、职称管理、部门管理、操作员历、员工管理、定制app开发工资账套管理、个人中心、在线聊天

1.3 云E办（前端）

定制app开发前后端之间通过 RESTful API 传递 JSON 定制app开发数据进行交流。不同于 JSP 之类，定制app开发后端是不涉及页面本身的内容的。定制app开发在开发的时候，定制app开发前端用前端的服务器（Nginx），定制app开发后端用后端的服务器（Tomcat），定制app开发当我开发前端内容的时候，定制app开发可以把前端的请求通过定制app开发前端服务器转发给后端（称为反向代理），定制app开发这样就能实时观察结果，定制app开发并且不需要知道后端怎么实现，定制app开发而只需要知道接口提供的功能。

目录

二、Vue.js框架

Web定制app开发前端开发从开始到兴起再到如今，定制app开发已经发展了很多年，定制app开发同时累积了非常多的开定制app开发发经验和开发工具。定制app开发过去的开发者们的一些定制app开发经验也都经过了技术发展，定制app开发环境变化等重重考验，定制app开发他们所创造出来的思想、定制app开发技术和工具，定制app开发也非常值得我们后来开定制app开发发者的借鉴和学习，定制app开发甚至直接拿来使用。定制app开发因为开发工具和开发语定制app开发言不管怎么发展，定制app开发不管差异有多大，定制app开发但是他们所解决的问题定制app开发都是相似而统一的，定制app开发可以归纳为：

（1）扩充JavaScript、html和CSS定制app开发三种编程语言本身的语言能力；

（2）定制app开发解决开发过程中重复的工作；

（3）定制app开发将项目进行模块化；

（4）定制app开发解决功能复用和变更问题；

（5）定制app开发解决开发和产品环境差异问题；

（6）定制app开发解决发布流程问题。

定制app开发为了解决上述问题便产定制app开发生了工程化的思想，定制app开发工程化就是这种避免重定制app开发复造轮子的最好实践。Vue.js定制app开发是一套构建用户界面的定制app开发渐进式框架，定制app开发它是由中国程序开发者尤雨溪在2013年开发。因为Vue.js定制app开发简洁的语法设计、定制app开发轻量快速的特点在技术定制app开发社区中深受开发者欢迎，定制app开发因而也促进了Vue.js定制app开发的推广和流行。Vue.js定制app开发在相关的工具和支持库定制app开发配合使用下，定制app开发也能完美地驱动复杂的单页应用，定制app开发开发一个大型的Web应用。Vue.js在权威的JavaScript定制app开发趋势榜上已经蹿升到了总榜的前30定制app开发位且能持续的排在榜单的前列，定制app开发显然已成为一个全球顶尖的JavaScript框架。Vue.js定制app开发的生态不仅体现在趋势榜上，定制app开发其配套的数据管理库vuex、定制app开发路由管理库Vue-router、打包工具、定制app开发开发者调试插件和项目定制app开发脚手架等工具和库也都定制app开发逐渐开发成型，定制app开发同样也拥有非常活跃的技术社区。

Vue.js定制app开发是一个轻量级的MVVM前端框架，定制app开发可以用于构建渐进式用户界面。开发者在Vue.js定制app开发中构建前端页面时，定制app开发只用关心页面逻辑的实现。Vue.js定制app开发最大的特点是由底层逐定制app开发层向上应用，定制app开发不仅易上手还能兼容大量的第三方库。

2.1Vue特性

虚拟DOM

vue区别于传统框架的特点一是虚拟DOM。浏览器进行DOM操作会带来较大的开销，因此在Vue中通过diff算法构建了Virtual DOM，数据每次更新时比对最小变化，重新构建Virtual DOM。

响应式

Vue.js的核心被设计为一个响应的数据绑定系统，因此可以非常方便的将数据与DOM保持同步。在使用jQuery手工操作DOM时往往容易编写命令式的、重复的并且易错的代码。而Vue.js拥抱数据驱动的视图概念意味着在普通HTML模板中使用特殊的语法将DOM“绑定”到底层数据。这种绑定一旦创建，DOM便与数据实现了保持同步。每当对数据进行了修改则会相应的更新DOM。通过这种方式，在开发应用中，所有的业务逻辑就几乎只用直接修改数据，而不必与对DOM进行单独的更新操作，使得数据和DOM更新不会搅合在一起。这也让应用的代码更容易撰写、理解与维护。

组件化

在大型的应用开发中，往往会将应用抽象为多个相对独立的模块，目的是为了代码块的可复用性和维护性。然而只有当考虑复用性的时候才会将某一模块做成单独的一个组件，实际上，Web的视图界面也完全可以分为一个组件树。组件化是Vue.js最强大的功能之一。组件可以将视图页面的标签元素进行扩展然后进行封装，最终变成可重复使用的代码。从高层面上理解，组件也可以是一个自定义的元素，然后通过Vue.js的编译器的编译，可以为这个元素添加某种特殊的功能。同时，组件也可以是原生的HTML元素，通过is特性扩展。Vue.js和同样强调组件化思想的前端框架React.js有些类似，但是要比其更加轻量，简洁和先进。

组件化通常是指Vue.js能够将JavaScript代码、超文本标记语言(hypertext markup language, HTML)代码和层叠样式表 (cascadingstyle sheets, CSS)代码写在同一个文件里。开发者在实际开发中常常会遇到页面的功能需要多次使用的情况，这时可以在components目录下，构建可复用的组件。如果其他页面需要使用该组件，那么可以通过import方法进行引入。由于页面由多个组件构成，组件与组件之间耦合度较低，可大量减少重复性代码。

局部刷新

vue是一个，单页面应用的主要特性就是网页的局部刷新，网页应用通过控制控制路由调用AJAX，后台只需要提供接口即可实现。这样的应用优势明显，首先在用户体验上会更人性化，不需要刷新整个页面，因此加载速度快速，体验更好。

2.2 MVVM设计模式

基于B/S架构的Java Web应用系统在被开发时，前端页面的绘制与美化是系统开发的重要工作。页面的绘制与交互一般是基于对文档对象模型（document object model, DOM）元素节点和数据的操控来完成的，但直接操作DOM节点极易产生错误。近年来，随着前端技术的发展，涌现了各种各样的前端框架，这些框架基于MVVM (Model-View-ViewModel）设计模式，为前端工程的开发与维护带来了许多便利 。MVVM设计模式基于传统的MVC设计模式衍生而来，全称为Model-View-ViewModel。Model层负责持有用户数据，View层负责在屏幕上显示视觉元素和控件，ViewModel层负责将模型转换为可在视图上直接显示的值。

2.3 vue相关组件

脚手架vue-cli

快速开发工具vue-cli。它可以帮助开发者基于vue.js框架进行快速开发。vue-cli将各种工具标准化，确保各种构建工具能够基于智能的默认配置平稳衔接，使开发者在撰写前端应用时更加专注，不必花费很长时间去调整项目配置。

路由Vue-router

Vue.js构建的单页面的Web应用需要基于路由和组件。其中，路由的主要作用是用来设定访问路径，并将访问路径和视图组件相映射起来。在单页面的Web应用里，路径之间的跳转和切换其实是对应组件之间的切换。和React.js一样，Vue.js自身是也是不具有路由功能的。因此，在Vue.js框架使用的时候需要与一个路由工具库相互协作，即Vue-router。Vue-router能够将不同层级并且嵌套的路由关系映射到相应的嵌套的组件，并且提供了一个细致的控制路径跳转的解决方式。

状态管理vuex

Vue.js的视图变化都基于组件的状态，所以当构建大型的Web应用的时候会产生大量的组件状态，从而需要对这些状态进行管理。由于vue的“单向数据流”无法解决多个组件共享状态的问题，所以才有了vuex。Vuex便是一个集中式存储和管理应用的所有组件的状态的管理架构，专门为配合使用了Vue.js框架的应用而设计。它借鉴了React.js的状态管理工具Flux和Redux的设计理念，并对一些概念进行了简化，从而能更好的发挥Vue.js的数据响应机制。

通信框架axios

通信框架。因为vue的边界很明确，就是为了处理DOM，所以不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接使用jQuery提供的AJAX通信功能。经典的Ajax技术实现了网页的局部数据刷新，而Axios又对Ajax进行再次封装，它具备如下特征：

（1）从浏览器中创建XMLHttpRequest

（2）从node.js中发出http请求

（3）支持PromiseApi

（4）拦截请求和响应

（5）转换请求和相应数据

（6）取消请求

（7）自动转换JSON数据

（8）客户端支持防止CSRF/XSRF

Axios插件很好的封装了Ajax技术，在项目开发中写法简洁明了，因此不容易出错，即使出错也易于排查。

打包工具webpack

前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和中资源，并且保证他们在浏览器快速、优雅的加载和更新，就需要一个模块化系统。

webpack是一个大型js应用程序的模块化工具，会自动处理命名空间等一系列js编程遇到的问题。当webpack处理js的应用程序时，它会构建一个复杂的依赖关系图，这个关系图中包含了应用程序依赖的模块，甚至包含了很多静态资源，然后webpack会将这些模块打包成一个或多个大的模块，在应用程序中引用。

ES6模块

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看vue.js文档。ES6标准增加了javascript语言层面的模块体系定义。ES6模块的设计思想，是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。

UI框架

ElementUI，饿了么出

三、搭建vue.js项目

3.1 搭建vue.js项目

环境准备

安装Node.js(>=6.x，首选8.x）本项目是v14.18.0版本

安装 Vue CLI

因为需要使用 npm 安装 Vue CLI，而 npm 是集成在 Node.js 中的，所以第一步我们需要安装 Node.js，访问官网 ，首页即可下载。

下载完成后运行安装包，一路下一步就行。

然后在 cmd 中输入 node -v，检查node是否安装成功。

输入 npm -v 查看npm版本号

输入 npm -g install npm ，将 npm 更新至最新版本。

之后，使用 npm install -g vue-cli 安装脚手架。（本项目使用版本2.9.6）

注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目，并加入了项目健康监控的内容，但使用新版本创建的项目依赖与这个教程不太相符，折腾起来比较麻烦。

安装Node.js的淘宝镜像加速器cnpm

大部分情况使用npm，遇到安装不了的使用cnpm

npm install cnpm -g

或npm install --registry=https://registry.npm.taobao.org

3.2 构建前端项目

通用方法

直接使用命令行构建项目。

然后执行命令 vue init webpack yeb，这里 webpack 是以 webpack 为模板指生成项目，还可以替换为 pwa、simple 等参数，这里不再赘述。

在程序执行的过程中会有一些提示，可以按照默认的设定一路回车下去，也可以按需修改，比如下图问我项目名称是不是 wj-vue，直接回车确认就行。

这里还会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。

还有是否使用 es-lint，选N。

接下来等待项目构建完成就 OK 了。

可以看到 workspace 目录下生成了项目文件夹 需要在该文件夹执行 npm install ，npm run build 再执行 npm run dev

访问 ，查看网页 demo，大工告成！

注：在vue项目中，有的时候需要执行npm run serve启动项目，有的时候需要用npm run dev，具体有什么不一样呢？

区别

dev默认是-cli@2.x默认支持的命令；

serve默认是vue-cli@3.x及以上版本默认支持的命令。

3.3 vue项目结构分析

  1. ├── build --------------------------------- 项目构建(webpack)相关配置文件，配置参数什么的，一般不用动
  2.  
  3. │   ├── build.js --------------------------webpack打包配置文件
  4.  
  5. │   ├── check-versions.js ------------------------------ 检查npm,nodejs版本
  6.  
  7. │   ├── dev-client.js ---------------------------------- 设置环境
  8.  
  9. │   ├── dev-server.js ---------------------------------- 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目
  10.  
  11. │   ├── utils.js --------------------------------------- 配置资源路径，配置css加载器
  12.  
  13. │   ├── vue-loader.conf.js ----------------------------- 配置css加载器等
  14.  
  15. │   ├── webpack.base.conf.js --------------------------- webpack基本配置
  16.  
  17. │   ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
  18.  
  19. │   ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
  20.  
  21. ├── config ---------------------------------- 配置目录，包括端口号等。我们初学可以使用默认的。
  22.  
  23. │   ├── dev.env.js -------------------------- 开发环境变量
  24.  
  25. │   ├── index.js ---------------------------- 项目配置文件
  26.  
  27. │   ├── prod.env.js ------------------------- 生产环境变量
  28.  
  29. │   ├── test.env.js ------------------------- 测试环境变量
  30.  
  31. ├── node_modules ---------------------------- npm 加载的项目依赖模块
  32.  
  33. ├── src ------------------------------------- 我们要开发的目录，基本上要做的事情都在这个目录里。
  34.  
  35. │   ├── assets ------------------------------ 静态文件，放置一些图片，如logo等
  36.  
  37. │   ├── components -------------------------- 组件目录，存放组件文件，可以不用。
  38.  
  39. │   ├── main.js ----------------------------- 主js
  40.  
  41. │   ├── App.vue ----------------------------- 项目入口组件，我们也可以直接将组件写这里，而不使用 components 目录。
  42.  
  43. │   ├── router ------------------------------ 路由
  44.  
  45. ├── static ---------------------------- 静态资源目录，如图片、字体等。
  46.  
  47. ├── .babelrc--------------------------------- babel配置文件
  48.  
  49. ├── .editorconfig---------------------------- 编辑器配置
  50.  
  51. ├── .gitignore------------------------------- 配置git可忽略的文件
  52.  
  53. ├── index.html ------------------------------ 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
  54.  
  55. ├── package.json ---------------------------- node配置文件，记载着一些命令和依赖还有简要的项目描述信息
  56.  
  57. ├── .README.md------------------------------- 项目的说明文档，markdown 格式。想怎么写怎么写，不会写就参照github上star多的项目，看人家怎么写的

主要文件详解

src——[项目核心文件]

在vue-cli的项目中，其中src文件夹是必须要掌握的，因为基本上要做的事情都在这个目录里。

index.html——[主页]

index.html如其他html一样，但一般只定义一个空的根节点，在main.js里面定义的实例将挂载在根节点下，内容都通过vue组件来填充，构建的文件将会被自动注入，也就是说我们编写的其它的内容都将在这个 div 中展示。整个项目只有这一个 html 文件，所以这是一个 单页面应用，当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个 div 中。

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5.   <head>
  6.  
  7.     <meta charset="utf-8">
  8.  
  9.     <title>vuedemo</title>
  10.  
  11.   </head>
  12.  
  13.   <body>
  14.  
  15.       <!-- 定义的vue实例将挂载在#app节点下 -->
  16.  
  17.     <div id="app"></div>
  18.  
  19.   </body>
  20.  
  21. </html>

App.vue——[根组件]

这个文件称为“根组件”，因为其它的组件又都包含在这个组件中。.vue 文件是一种自定义文件类型，在结构上类似 html，一个 .vue 文件即是一个 vue 组件。

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

<!-- 模板 -->

  1. <template><template>
  2.  
  3.   <div id="app">
  4.  
  5.     <img src="./assets/logo.png">
  6.  
  7.     <router-view></router-view>
  8.  
  9.   </div>
  10.  
  11. </template>
  12.  
  13. <!-- script -->
  14.  
  15. <script>
  16.  
  17. export default {
  18.  
  19.   name: 'app'
  20.  
  21. }
  22.  
  23. </script>
  24.  
  25.   <div id="app">
  26.  
  27.     <img src="./assets/logo.png">
  28.  
  29.     <router-view></router-view>
  30.  
  31.   </div>
  32.  
  33. </template>
  34.  
  35. <!-- script -->
  36.  
  37. <script>
  38.  
  39. export default {
  40.  
  41.   name: 'app'
  42.  
  43. }
  44.  
  45. </script>

<!-- 样式 -->

  1. <style>
  2.  
  3. #app {
  4.  
  5.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
  6.  
  7.   -webkit-font-smoothing: antialiased;
  8.  
  9.   -moz-osx-font-smoothing: grayscale;
  10.  
  11.   text-align: center;
  12.  
  13.   color: #2c3e50;
  14.  
  15.   margin-top: 60px;
  16.  
  17. }
  18.  
  19. </style>

【template】

其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如上面代码，父节点为#app的div，其没有兄弟节点）。这里也有一句 <div id="app">，但跟 index.html 里的那个是没有关系的。这个id=app 只是跟下面的 css 对应。

<router-view></router-view>是子路由视图，后面的路由页面都显示在此处。打一个比喻吧,<router-view>类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示

【script】

<script>标签里的内容即该组件的脚本，也就是 js 代码，export default 是 ES6 的语法，意思是将这个组件整体导出，之后就可以使用 import 导入组件了。大括号里的内容是这个组件的相关属性。

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等，具体语法请看vue.js文档。

【style】

样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped.

如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader,回车。

安装完成后，就可以在style标签下import所需的css文件，例如：

  1. <style>
  2.  
  3.     import './assets/css/public.css'
  4.  
  5. </style>

main.js——[入口文件]

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下面的 components:{App}就是引入的根组件App.vue。后期还可以引入插件，当然首先得安装插件。

前面我们说 App.vue 里的<div id="app"> 和 index.html 里的<div id="app"> 没有关系，那么这两个文件是怎么建立联系的呢？让我们来看入口文件 main.js 的代码

  1. /*引入vue框架*/
  2.  
  3. import Vue from 'vue'
  4.  
  5. /*引入根组件*/
  6.  
  7. import App from './App'
  8.  
  9. /*引入路由设置*/
  10.  
  11. import router from './router'
  12.  
  13. /*关闭生产模式下给出的提示*/
  14.  
  15. Vue.config.productionTip = false
  16.  
  17. /*定义实例*/
  18.  
  19. new Vue({
  20.  
  21.   el: '#app',
  22.  
  23.   router,
  24.  
  25.   template: '<App/>',
  26.  
  27.   components: { App }
  28.  
  29. })

最上面 import 了几个模块，其中 vue 模块在 node_modules 中，App 即 App.vue 里定义的组件，router 即 router 文件夹里定义的路由。

Vue.config.productionTip = false ,作用是阻止vue 在启动时生成生产提示。

在这个 js 文件中，我们创建了一个 Vue 对象（实例），el 属性提供一个在页面上已存在的 DOM 元素作为 Vue 对象的挂载目标，这里就通过index.html中的<div id="app"><div>中的id=“app”和这里的“#app”进行挂载。

router 代表该对象包含 Vue Router，并使用项目中定义的路由。components 表示该对象包含的 Vue 组件，template 是用一个字符串模板作为 Vue 实例的标识使用，类似于定义一个 html 标签。

3.4 安装 Element-UI

Element 的官方地址为

1.安装 Element

根据官方文档的描述，在项目文件夹下，执行 npm i element-ui -S 即可

在这里插入图片描述

2.引入 Element

引入分为完整引入和按需引入两种模式，按需引入可以缩小项目的体积，这里我们选择完整引入。

根据文档，我们需要修改 main.js 为如下内容

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

3.5 安装axios

进入到项目文件夹中，执行

npm install --save axios，以安装这个模块。

3.6 安装Vuex

Vuex，它是专门为 Vue 开发的状态管理方案，我们可以把需要在各个组件中传递使用的变量、方法定义在这里。之前我一直没有使用它，所以在不同组件传值的问题上十分头疼，要写很多多余的代码来调用不同组件的值，所以推荐大家从一开始就去熟悉这种管理方式。

运行 npm install vuex --save

之后，在 src 目录下新建一个文件夹 store，并在该目录下新建 index.js 文件，在该文件中引入 vue 和 vuex，代码如下：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

安装vuex 启动 报错 “export ‘watch‘ was not found in ‘vue‘

如果你的vue版本是 2.X ，将vuex升到 3.X.X 就能够解决

npm install --save vuex@3.6.2

如果你的vue版本是 3.X ，将vuex升到 4.X.X 就能够解决

npm install --save vue@3.0.2

npm install --save vuex@4.0.0

解决版本冲突

可能是npm版本问题报错

解决方法：在命令后面加上

  --legacy-peer-deps

3.7 安装VueRouter

npm install vue-router --save-dev

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

router文件夹下，有一个index.js，即为路由配置文件。可以设置多个路由，‘/index’,’/list’之类的，当然首先得引入该组件，再为该组件设置路由。

3.8 安装font-awesome

npm install font-awesome

四、前端拦截器

4.1 配置登陆拦截器

顾名思义就是对请求的拦截，请求接口之前或之后的预处理工作。分别为请求拦截器和响应拦截器， 执行顺序: 请求拦截器 -> api请求 -> 响应拦截器。 拦截器的作用：a. 统计api从发起请求到返回数据需要的时间；b. 配置公共的请求头，加载弹窗等；c. 对响应状态码做拦截，比入后端返回400或500的状态码， 返回对应错误信息。

4.2 axios请求拦截器request

在vue项目中，我们通常使用与后台进行数据交互，axios是一款基于promise封装的库，可以运行在浏览器端和node环境中。请求拦截器request作用：在请求发送前统一执行某些操作，常用在请求头中处理token等 

添加请求拦截器的方法

  1. axios.interceptors.request.use(function (config) {
  2.  
  3. // 在发送请求之前做些什么
  4.  
  5. return config;
  6.  
  7. }, function (error) {
  8.  
  9. // 对请求错误做些什么
  10.  
  11. return Promise.reject(error);
  12.  
  13. })

4.3 axios响应拦截器response

返回对象response中有response.status:Http响应码;response.data:后端返回的Json对象，包括response.data.code业务逻辑响应码，response.data.message:后端返回的响应提示信息；

添加响应拦截器方法

  1. axios.interceptors.response.use(function (response) {
  2.  
  3. // 对响应数据做点什么
  4.  
  5. return response;
  6.  
  7. }, function (error) {
  8.  
  9. // 对响应错误做点什么
  10.  
  11. return Promise.reject(error);
  12.  
  13. });
  14.  
  15. }

4.4 封装请求

 在项目中，我们并不会直接使用 axios，而是会对它进行一层封装。 通过export导出封装的请求，如定义一个postRequest方法接收url和params，然后axios对象。在axios里进行实际接口调用操作。

  1. export const postRequest = (url, params) => {
  2.  
  3.     return axios({
  4.  
  5.         method: 'post',
  6.  
  7.         url: `${base}${url}`,
  8.  
  9.         data: params
  10.  
  11.     })
  12.  
  13. }

4.5 代码实现src/utils/api.js

  1. import axios from "axios";
  2.  
  3. import {Message} from "element-ui";
  4.  
  5. import router from "@/router";
  6.  
  7. // 请求拦截器
  8.  
  9. axios.interceptors.request.use(config => {
  10.  
  11.     // 如果存在 token，请求携带这个 token( 登录的时候 把 token 存入了 sessionStorage ）
  12.  
  13.     if (window.sessionStorage.getItem("tokenStr")) {
  14.  
  15.         // token 的key : Authorization ; value: tokenStr
  16.  
  17.         config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr')
  18.  
  19.     }
  20.  
  21.     return config;
  22.  
  23. },error => {
  24.  
  25.     console.log(error)
  26.  
  27. })
  28.  
  29. // 响应拦截器 - 统一处理消息提示
  30.  
  31. axios.interceptors.response.use(success => {
  32.  
  33.     // 业务逻辑错误
  34.  
  35.     if (success.status && success.status === 200) { // 调到接口
  36.  
  37.         // 后端：500 业务逻辑错误，401 未登录，403 无权访问；
  38.  
  39.         if (success.data.code === 500 || success.data.code === 401 || success.data.code === 403) {
  40.  
  41.             Message.error({message: success.data.message})
  42.  
  43.             return
  44.  
  45.         }
  46.  
  47.         if (success.data.message) { // 输出后端 添加成功 之类的信息
  48.  
  49.             Message.success({message: success.data.message})
  50.  
  51.         }
  52.  
  53.     }
  54.  
  55.     return success.data
  56.  
  57. }, error => { // 没访问到后端接口
  58.  
  59.     if (error.response.code === 504 || error.response.code === 404) {
  60.  
  61.         Message.error({message: '服务器不存在'})
  62.  
  63.     } else if (error.response.code === 403) {
  64.  
  65.         Message.error({message: '权限不足，请联系管理员！'})
  66.  
  67.     } else if (error.response.code === 401) {
  68.  
  69.         Message.error({message: '您还未登录，请登录！'})
  70.  
  71.         router.replace('/') // 路由替换
  72.  
  73.     } else {
  74.  
  75.         if (error.response.data.message) {
  76.  
  77.             Message.error({message: error.response.data.message})
  78.  
  79.         } else {
  80.  
  81.             Message.error({message: '未知错误！'})
  82.  
  83.         }
  84.  
  85.     }
  86.  
  87.     return
  88.  
  89. })
  90.  
  91. // 预备前置路径
  92.  
  93. let base = '';
  94.  
  95. // 传送 json 格式的 post 请求
  96.  
  97. export const postRequest = (url, params) => {
  98.  
  99.     return axios({
  100.  
  101.         method: 'post',
  102.  
  103.         url: `${base}${url}`,
  104.  
  105.         data: params
  106.  
  107.     })
  108.  
  109. }
  110.  
  111. // 传送 json 格式的 get 请求
  112.  
  113. export const getRequest = (url, params) => {
  114.  
  115.     return axios({
  116.  
  117.         method: 'get',
  118.  
  119.         url: `${base}${url}`,
  120.  
  121.         data: params
  122.  
  123.     })
  124.  
  125. }
  126.  
  127. // 传送 json 格式的 put 请求
  128.  
  129. export const putRequest = (url, params) => {
  130.  
  131.     return axios({
  132.  
  133.         method: 'put',
  134.  
  135.         url: `${base}${url}`,
  136.  
  137.         data: params
  138.  
  139.     })
  140.  
  141. }
  142.  
  143. // 传送 json 格式的 delete 请求
  144.  
  145. export const deleteRequest = (url, params) => {
  146.  
  147.     return axios({
  148.  
  149.         method: 'delete',
  150.  
  151.         url: `${base}${url}`,
  152.  
  153.         data: params
  154.  
  155.     })
  156.  
  157. }


顾名思义就是对请求的拦截，分别为请求拦截器和响应拦截器， 执行顺序: 请求拦截器 -> api请求 -> 响应拦截器。 拦截器的作用：a. 统计api从发起请求到返回数据需要的时间；b. 配置公共的请求头，加载弹窗等；c. 对响应状态码做拦截，比入后端返回400或500的状态码， 返回对应错误信息。

4.6 main.js全局引入封装请求

通过main.js全局引入然后通过插件的方式使用方法。在具体调用时使用this.putRequest(url,params)形式使用

  1. import {postRequest} from "@/utils/api";
  2.  
  3. import {putRequest} from "@/utils/api";
  4.  
  5. import {getRequest} from "@/utils/api";
  6.  
  7. import {deleteRequest} from "@/utils/api";
  1. Vue.prototype.postRequest = postRequest
  2.  
  3. Vue.prototype.putRequest = putRequest
  4.  
  5. Vue.prototype.getRequest = getRequest
  6.  
  7. Vue.prototype.deleteRequest = deleteRequest

五、登陆页面

5.1 样式设计

为了设计界面，我们需要关注的地方是 <template> 标签内的 html 和 <style> 标签内的 css。登录框我们一般会用 Form 来做，打开 Element 的组件文档（），发现它为我们提供了丰富的 Form 组件，我们可以点击“显示代码”，复制我们需要的部分。

不过这里好像并没有特别符合我们应用场景的表单，或者说这些都是比较复杂的，我们只需要其中的一小部分。把页面再往下拉，可以看到关于这个组件的属性、事件、方法等的文档，根据这个文档，我们可以自己去构建需要的表单。

5.2 登陆页功能设计

5.3 Login.vue登录页

验证码通过后端返回图片。表单通过rules绑定规则，通过prop为元素添加属性，在rules里写规则。验证方式：this.$refs.loginForm.validate。

/captcha返回信息

 /login登陆返回报文

登陆成功后会返回一个token。此token会作为后面前后端数据交互的一个凭证。为了保证系统安全性后端会定期更新该token，超过token的失效之后用户需要重新登录。前端将获取来的token存入sessionStorage中作为之后调用接口的钥匙，此后通过Axios进行get或者post请求时都需要带上此token。

在请求拦截器里判断toke是否存在，之后每次请求都会校验token，如果存在则请求携带token，放入Authorization参数中；后端校验token。

前端登陆成功后 通过this.$router.replace('/home') 跳转到home首页。replace方法替换后点击浏览器回退按钮不会跳转到登陆页面。登陆失败后端返回失败原因。

在用户未登陆的情况下，如果用户不是以访问登陆页，而是访问某个登陆后才能访问的路由，如。需要分情况讨论：1.用户可能输入首页地址或错误地址，登陆成功后让他跳到首页；2.否则成功跳转到他输入的地址。

this.$router.replace((path === '/' || path === undefined) ? '/home' : path)

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <el-form
  6.  
  7.       v-loading="loading"
  8.  
  9.       element-loading-text="正在登录......"
  10.  
  11.       element-loading-spinner="el-icon-loading"
  12.  
  13.       element-loading-background="rgba(0, 0, 0, 0.8)"
  14.  
  15.       ref="loginForm" :model="loginForm" :rules="rules" class="loginContainer">
  16.  
  17.       <h3 class="loginTitle">系统登录</h3>
  18.  
  19.       <el-form-item prop="username">
  20.  
  21.         <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
  22.  
  23.       </el-form-item>
  24.  
  25.       <el-form-item prop="password">
  26.  
  27.         <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
  28.  
  29.       </el-form-item>
  30.  
  31.       <el-form-item prop="code">
  32.  
  33.         <el-input type="text" v-model="loginForm.code" placeholder="点击图片更换验证码"
  34.  
  35.                   style="width: 250px;margin-right: 5px;"></el-input>
  36.  
  37.         <img :src="captchaUrl" @click="updateCaptcha">
  38.  
  39.       </el-form-item>
  40.  
  41.       <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
  42.  
  43.     </el-form>
  44.  
  45.   </div>
  46.  
  47. </template>
  48.  
  49. <script>
  50.  
  51.   export default {
  52.  
  53.     name: 'Login',
  54.  
  55.     components: {},
  56.  
  57.     props: [],
  58.  
  59.     data() {
  60.  
  61.       return {
  62.  
  63.         // 验证码
  64.  
  65.         captchaUrl:'/captcha?time=' + new Date(),//获取响应码后端接口
  66.  
  67.         loginForm: {
  68.  
  69.           username: 'admin',
  70.  
  71.           password: '123',
  72.  
  73.           code: '',
  74.  
  75.         },
  76.  
  77.         loading: false, // 加载中
  78.  
  79.         //校验规则，与表单绑定
  80.  
  81.         rules: {
  82.  
  83.           username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
  84.  
  85.           password: [{required: true, message: '请输入密码', trigger: 'blur'}],
  86.  
  87.           code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
  88.  
  89.         }
  90.  
  91.       }
  92.  
  93.     },
  94.  
  95.     mounted(){
  96.  
  97.  
  98.  
  99.     },
  100.  
  101.     methods: {
  102.  
  103.       // 点击刷新验证码
  104.  
  105.       updateCaptcha() {
  106.  
  107.       this.captchaUrl="/captcha?time="+new Date();
  108.  
  109.  
  110.  
  111.       },
  112.  
  113.       submitLogin() {
  114.  
  115.         // 登录
  116.  
  117.         this.$refs.loginForm.validate((valid) => {
  118.  
  119.           if (valid) {
  120.  
  121.             this.loading = true;//准备调登录接口时，出现正在加载
  122.  
  123.             //第一个参数请求后端的地址，第二个参数，传给后端的数据
  124.  
  125.             this.postRequest('/login', this.loginForm).then(resp => {
  126.  
  127.               this.loading = false;//登录成功后关闭
  128.  
  129.               if (resp) {
  130.  
  131.                 // 存储用户 token 到 sessionStorage
  132.  
  133.                 const tokenStr = resp.obj.tokenHead + resp.obj.token;
  134.  
  135.                 window.sessionStorage.setItem('tokenStr', tokenStr);
  136.  
  137.                 // 跳转到首页
  138.  
  139.                 // this.$router.push('/home') // 路由跳转，可以回退到上一页
  140.  
  141.                 this.$router.replace('/home') // 路径替换，无法回退到上一页
  142.  
  143.  
  144.  
  145.                 // 页面跳转
  146.  
  147.                 // 拿到用户要跳转的路径
  148.  
  149.                 let path = this.$route.query.redirect;
  150.  
  151.                 // 用户可能输入首页地址或错误地址，让他跳到首页，否则跳转到他输入的地址
  152.  
  153.                 this.$router.replace((path === '/' || path === undefined) ? '/home' : path)
  154.  
  155.               }
  156.  
  157.  
  158.  
  159.             })
  160.  
  161.           } else {
  162.  
  163.             this.$message.error('请输入所有字段！');
  164.  
  165.             return false;
  166.  
  167.           }
  168.  
  169.         })
  170.  
  171.       }
  172.  
  173.     }
  174.  
  175.   }
  176.  
  177. </script>
  178.  
  179. <style>
  180.  
  181.   .loginContainer {
  182.  
  183.     border-radius: 15px;
  184.  
  185.     background-clip: padding-box;
  186.  
  187.     /*属性规定背景的绘制区域 背景被裁剪到内边距框。 margin: 180 px auto;*/
  188.  
  189.     margin: 180px auto;
  190.  
  191.     width: 350px;
  192.  
  193.     padding: 15px 35px;
  194.  
  195.     background: #fff;
  196.  
  197.     border: 1px solid #eaeaea;
  198.  
  199.     box-shadow: 0 0 25px #cac6c6;
  200.  
  201.     /*  X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式]; */
  202.  
  203.   }
  204.  
  205.  
  206.  
  207.   .loginTitle {
  208.  
  209.     margin: 0 auto 40px auto;
  210.  
  211.     text-align: center;
  212.  
  213.   }
  214.  
  215.  
  216.  
  217.   .loginRemember {
  218.  
  219.     text-align: left;
  220.  
  221.     margin: 0 0 15px 0;
  222.  
  223.   }
  224.  
  225.  
  226.  
  227.   /*验证码*/
  228.  
  229.   .el-form-item__content {
  230.  
  231.     display: flex;
  232.  
  233.     align-items: center;
  234.  
  235.   }
  236.  
  237. </style>

 SessionStorage.setItem()中，为了使axios做下一次请求时获取token认证，登录之后拿到token放到sessionStrorage里         

    // 存储用户 token 到 sessionStorage

                const tokenStr = resp.obj.tokenHead + resp.obj.token;

                window.sessionStorage.setItem('tokenStr', tokenStr);

5.4 配置页面路由——router/index.js

  1. import Vue from 'vue'
  2.  
  3. import Router from 'vue-router'
  4.  
  5. import Login from "@/views/Login";
  6.  
  7. Vue.use(Router)
  8.  
  9. export default new Router({
  10.  
  11.   routes: [
  12.  
  13.     {
  14.  
  15.       path: '/',
  16.  
  17.       name: 'Login',
  18.  
  19.       component: Login,
  20.  
  21.       hidden: true // 不会被循环遍历出来
  22.  
  23.   },
  24.  
  25.   ]
  26.  
  27. })

5.5 前端路由导航守卫

登录页面的开发似乎已经较为完善了，但其实还没有完，因为这个登录页面其实没有用，别人直接输入首页的网址，就可以绕过登录页面。为了让它发挥作用，我们还需要开发一个拦截器。使用钩子函数判断是否拦截函数及在某些时机会被调用的函数。这里我们使用 router.beforeEach()，意思是在访问每一个路由前调用。to 要去的路由; from 来自哪里的路由 ; next() 放行。

通过sessionStorage.getItem('user')获取用户的token，如果token不存在则需要登陆。

在判断是否为if (to.path == '/')登陆页，是的话放行，否则按用户指定的路由登陆；

main.js

  1. // 使用 router.beforeEach 注册一个全局前置守卫
  2.  
  3. router.beforeEach((to, from, next) => {
  4.  
  5.   // to 要去的路由; from 来自哪里的路由 ; next() 放行
  6.  
  7.   // 用户登录成功时，把 token 存入 sessionStorage，如果携带 token，初始化菜单，放行
  8.  
  9.   if (window.sessionStorage.getItem('tokenStr')) {
  10.  
  11.       // 如果用户不存在
  12.  
  13.          //待首页功能部分完善后补充
  14.  
  15.   } else {
  16.  
  17.       if (to.path === '/') {
  18.  
  19.           next()
  20.  
  21.       } else {
  22.  
  23.           next('/?redirect=' + to.path)
  24.  
  25.       }
  26.  
  27.   }
  28.  
  29. })

5.6 解决前后端跨域

前端端口默认8080，假设后端端口是8081，那8080如何访问到8081的数据，我们通过Node.js实现端口自动转发。浏览器的同源策略：两个页面必须具有相同的协议（protocol）主机（host）端口号(port)。同源策略是浏览器的一种安全机制，它是指浏览器会阻止对非同源页面的DOM操作以及XMLHttpRequest对象向非同源服务器发起http请求。请求一个接口时，出现Access-Control-Allow-Origin等，说明出现请求跨域了。vue中解决跨域的方法：配置vue.config.js文件，如果没有就自行新建一个。

原理：

1.将域名发送给本地的服务器（localhost:8080)

2.再由本地的服务器去请求真正的服务器

3.因为请求是从服务端发出的，所以不存在跨域的问题了。

在vue中是由node.js自动进行的

前端反向代理

vue.config.js

修改proxyTable 请求地址经过node.js后代理到后端地址8081

  1.  proxyTable: {
  2.  
  3.       '/': {
  4.  
  5.         changeOrigin: true, //跨域
  6.  
  7.         target: 'http://localhost:8081',
  8.  
  9.         pathRewrite: {
  10.  
  11.           // '^/api': ''
  12.  
  13.         }
  14.  
  15.       },
  16.  
  17.    
  18.  
  19.     },

5.7 运行项目

六、首页页面  

我们的项目虽然本质上是单页面应用，但表面上有多个功能页面。为了方便用户在这各个页面之间切换，我们需要添加一个导航栏。这个导航栏的要求很简单：

能够在每个页面显示

美观

为了实现第一个要求，我们需要把导航栏放在其它页面的父页面中（对 Vue 来说就是父组件），之前我们讲过，App.vue 是所有组件的父组件，但把导航栏放进去不合适，因为我们的登录页面中不应该显示导航栏。为了解决这个问题，我们在views目录下直接新建一个组件，命名为 Home.vue。和 App.vue 一样，写入了一个

<router-view/>，也就是子页面（组件）显示的地方。

Home.vue整体上实现了首页左侧菜单的获取和展示，右上角的个人中心的设置。从store.state中获取当前菜单信息、当前用户的登陆信息.。

 6.1 菜单功能设计与实现

需要文件目录如下：views/emp基本资料    新建 EmpBasic.vue  EmpAdv.vue

views/per  员工资料新建 PerEmp.vu  PerEc.vue  PerTrain.vue  PerSalary.vue   PerMv.vue

views/sal  工资账套 SalSob.vue SalSobcfg.vue SalTable.vue SalMonth.vue  SalSearch.vue

views/sta 综合信息统计 新增StaAll.vue  StaScore.vue   StaPers.vue  StaRecord.vue

views/sys 系统管理  新增 SysBasic.vue SysConfig.vue SysLog.vue  SysAdmin.vue  SysData.vue SysInit.vue

配置store/index.js

通过vuex进行路由状态管理

  1. import Vue from 'vue'
  2.  
  3. import Vuex from 'vuex'
  4.  
  5. Vue.use(Vuex)
  6.  
  7. // 导入 Vuex
  8.  
  9. const store = new Vuex.Store({
  10.  
  11.     state: {
  12.  
  13.         routes: []
  14.  
  15.     },
  16.  
  17.     mutations: { // 与 state 同步执行；可以改变 state 对应的值的方法
  18.  
  19.         // 初始化路由 菜单
  20.  
  21.         initRoutes(state, data) {
  22.  
  23.             state.routes = data
  24.  
  25.         },
  26.  
  27.     },
  28.  
  29.     // 异步执行
  30.  
  31.     actions: {
  32.  
  33.         }
  34.  
  35. })
  36.  
  37. export default store;

在Main.js中引入store

  1. import store from './store'
  2.  
  3. new Vue({
  4.  
  5.     router,
  6.  
  7.     store,
  8.  
  9.     render: h => h(App)
  10.  
  11. }).$mount('#app')

6.2 封装菜单请求工具

后端请求菜单接口返回信息

我们设计的菜单是根据用户信息加载的路由信息，即不同用户可能有不同的菜单权限。接口返回的菜单信息如下。通过children表示子菜单，子菜单中的parentId与父菜单的id相等时表示一个确定的父子菜单关系。如下的关系表示有一个层级菜单“员工资料/基本资料”。

如果store.state.routes有数据，初始化路由菜单。通过getRequest('/system/config/menu')方法从后端获取路由数据，按照层次关系拆分。

如何根据接口中的component字段找到对应的代码路径呢？

通过对接口对象中的component字段分类查找，例如component以Home开头，源代码在src/views/Home.vue中。

  1.                 if (component.startsWith('Home')) {
  2.  
  3.                     require(['@/views/' + component + '.vue'], resolve);
  4.  
  5.                 }

initMenu方法将路由数据存于store中，如果store中有数据则无需初始化，否则，初始化。

什么时候调用？每一个页面都需要调用初始化菜单方法。放在路由拦截器里，每次访问路由都要执行一次。

  1. import {getRequest} from "@/utils/api";
  2.  
  3. // 菜单请求工具类
  4.  
  5. // router 路由； store Vuex
  6.  
  7. export const initMenu = (router, store) => {
  8.  
  9.     // 如果有数据，初始化路由菜单
  10.  
  11.     if (store.state.routes.length > 0) {
  12.  
  13.         return;
  14.  
  15.     }
  16.  
  17.     getRequest('/system/config/menu').then(data => {
  18.  
  19.         // 如果数据存在 格式化路由
  20.  
  21.         if (data) {
  22.  
  23.             // 格式化好路由
  24.  
  25.             let fmtRoutes = formatRoutes(data)
  26.  
  27.             // 添加到 router
  28.  
  29.             router.addRoutes(fmtRoutes)
  30.  
  31.             // 将数据存入 Vuex
  32.  
  33.             store.commit('initRoutes',fmtRoutes)
  34.  
  35.             // 连接 WebSocket
  36.  
  37.             store.dispatch('connect')
  38.  
  39.         }
  40.  
  41.     })
  42.  
  43. }
  44.  
  45. export const formatRoutes = (routes) => {
  46.  
  47.     let fmtRoutes = []
  48.  
  49.     routes.forEach(router => {
  50.  
  51.         let {
  52.  
  53.             path,
  54.  
  55.             component,
  56.  
  57.             name,
  58.  
  59.             iconCls,
  60.  
  61.             children
  62.  
  63.         } = router;
  64.  
  65.         // 如果有 children 并且类型是数组
  66.  
  67.         if (children && children instanceof Array) {
  68.  
  69.             // 递归
  70.  
  71.             children = formatRoutes(children)
  72.  
  73.         }
  74.  
  75.         // 单独对某一个路由格式化 component
  76.  
  77.         let fmRouter = {
  78.  
  79.             path: path,
  80.  
  81.             name: name,
  82.  
  83.             iconCls: iconCls,
  84.  
  85.             children: children,
  86.  
  87.             component(resolve) {
  88.  
  89.                 // 判断组件以什么开头，到对应的目录去找
  90.  
  91.                 if (component.startsWith('Home')) {
  92.  
  93.                     require(['@/views/' + component + '.vue'], resolve);
  94.  
  95.                 }else if (component.startsWith('Emp')) {
  96.  
  97.                     require(['@/views/emp/' + component + '.vue'], resolve);
  98.  
  99.                 }else if (component.startsWith('Per')) {
  100.  
  101.                     require(['@/views/per/' + component + '.vue'], resolve);
  102.  
  103.                 }else if (component.startsWith('Sal')) {
  104.  
  105.                     require(['@/views/sal/' + component + '.vue'], resolve);
  106.  
  107.                 }else if (component.startsWith('Sta')) {
  108.  
  109.                     require(['@/views/sta/' + component + '.vue'], resolve);
  110.  
  111.                 }else if (component.startsWith('Sys')) {
  112.  
  113.                     require(['@/views/sys/' + component + '.vue'], resolve);
  114.  
  115.                 }
  116.  
  117.             }
  118.  
  119.         }
  120.  
  121.         fmtRoutes.push(fmRouter)
  122.  
  123.     })
  124.  
  125.     return fmtRoutes
  126.  
  127. }

更新main.js

获取当前用户登陆信息

将当前用户信息保存在sessionStorage的user中，每次路由切换时获取用户的登陆信息。

  1. // 使用 router.beforeEach 注册一个全局前置守卫
  2.  
  3. router.beforeEach((to, from, next) => {
  4.  
  5.   // to 要去的路由; from 来自哪里的路由 ; next() 放行
  6.  
  7.   // 用户登录成功时，把 token 存入 sessionStorage，如果携带 token，初始化菜单，放行
  8.  
  9.   if (window.sessionStorage.getItem('tokenStr')) {
  10.  
  11.       initMenu(router, store)
  12.  
  13.       // 如果用户不存在
  14.  
  15.       if (!window.sessionStorage.getItem('user')
  16.  
  17.       ) {
  18.  
  19.           // 判断用户信息是否存在
  20.  
  21.           return getRequest('/admin/info').then(resp => {
  22.  
  23.               if (resp) {
  24.  
  25.                   // 存入用户信息，转字符串，存入 sessionStorage
  26.  
  27.                   window.sessionStorage.setItem('user', JSON.stringify(resp))
  28.  
  29.                   // 同步用户信息 编辑用户
  30.  
  31.                   store.commit('INIT_ADMIN',resp)
  32.  
  33.                   next();
  34.  
  35.               }
  36.  
  37.           })
  38.  
  39.       }
  40.  
  41.       next();
  42.  
  43.   } else {
  44.  
  45.       if (to.path === '/') {
  46.  
  47.           next()
  48.  
  49.       } else {
  50.  
  51.           next('/?redirect=' + to.path)
  52.  
  53.       }
  54.  
  55.   }
  56.  
  57. })

6.3 样式设计

登陆后的前端页面被分解为上方导航栏，左侧菜单栏和中间的主要功能区域，对于不同页面的切换，仅需要变化中间功能区域内容，提高了代码重用性。首先自定义页面各区域组件并将各组件文件保存到Views文件夹中，每个.vue文件都是单独的组件，路由中指定的组件通过导入语句<router-view></router-view>在页面中渲染。

布局使用了element-ui的container布局容器：el-container 外层容器；el-header 顶栏容器；el-aside 侧边栏容器 ；el-menu导航区域；el-main 主要区域容器；el-footer底栏容器

样式设计如下：

在el-menu导航里添加router属性实现菜单路由的动态渲染；首页导航菜单使用element-ui的NavMenu导航菜单控件。使用属性unique-opened：保证每次点击菜单只有一个菜单的展开。使用router属性，在激活导航时以 index 作为 path 进行路由跳转。

通过el-dropdown的@command点击菜单项触发的事件回调方法绑定el-dropdown-item中的command，实现注销登陆和进入个人中心功能。

elemet的MessageBox弹框实现注销登陆提示弹框。退出登陆后清除vuex中的菜单信息。

使用el-breadcrumb面包屑控件实现显示当前页面的路径，快速返回之前的任意页面功能。对于非首页的页面v-if="this.$router.currentRoute.path!=='/home'"显示层级：首先/当前页。

对于首页v-if="this.$router.currentRoute.path==='/home'"，显示欢迎字体。

6.4 Home.vue代码

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <el-container>
  6.  
  7.       <el-header class="homeHeader">
  8.  
  9.         <div class="title">云办公</div>
  10.  
  11.         <!-- 1-1 添加在线聊天入口 -->
  12.  
  13.         <div>
  14.  
  15.           <el-button type="text" icon="el-icon-bell" size="normal"
  16.  
  17.                      style="margin-right: 8px;color: black;" @click="goChar"></el-button>
  18.  
  19.           <el-dropdown class="userInfo" @command="commandHandler">
  20.  
  21.           <span class="el-dropdown-link">
  22.  
  23.             {{ user.name }}<i><img :src="user.userFace"></i>
  24.  
  25.           </span>
  26.  
  27.             <el-dropdown-menu slot="dropdown">
  28.  
  29.               <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
  30.  
  31.               <el-dropdown-item command="setting">设置</el-dropdown-item>
  32.  
  33.               <el-dropdown-item command="logout">注销登录</el-dropdown-item>
  34.  
  35.             </el-dropdown-menu>
  36.  
  37.           </el-dropdown>
  38.  
  39.         </div>
  40.  
  41.       </el-header>
  42.  
  43.       <el-container>
  44.  
  45.         <el-aside width="200px">
  46.  
  47.           <!-- 1、添加 router  -->
  48.  
  49.           <el-menu router unique-opened>
  50.  
  51.             <!-- 2、循环整个路由组件，不展示 hidden: true 的路由组件 -->
  52.  
  53.             <el-submenu :index="index +''" v-for="(item,index) in routes"
  54.  
  55.                         :key="index" v-if="!item.hidden">
  56.  
  57.               <template slot="title"><i :class="item.iconCls" style="color: black;margin-right: 5px"></i>
  58.  
  59.                 <span>{{ item.name }}</span>
  60.  
  61.               </template>
  62.  
  63.               <!-- 3、循环遍历子路由 -->
  64.  
  65.               <el-menu-item :index="children.path"
  66.  
  67.                             v-for="(children,index) in item.children" :key="index">{{ children.name }}
  68.  
  69.               </el-menu-item>
  70.  
  71.             </el-submenu>
  72.  
  73.           </el-menu>
  74.  
  75.         </el-aside>
  76.  
  77.         <el-main>
  78.  
  79.           <!-- 面包屑导航区域 -->
  80.  
  81.           <el-breadcrumb separator-class="el-icon-arrow-right"
  82.  
  83.                          v-if="this.$router.currentRoute.path!=='/home'">
  84.  
  85.             <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  86.  
  87.             <el-breadcrumb-item>{{ this.$router.currentRoute.name }}</el-breadcrumb-item>
  88.  
  89.           </el-breadcrumb>
  90.  
  91.           <div class="homeWelcome" v-if="this.$router.currentRoute.path==='/home'">
  92.  
  93.             欢迎来到云办公系统！
  94.  
  95.           </div>
  96.  
  97.           <!-- 路由点位符 -->
  98.  
  99.           <router-view class="homeRouterView"/>
  100.  
  101.         </el-main>
  102.  
  103.       </el-container>
  104.  
  105.     </el-container>
  106.  
  107.   </div>
  108.  
  109. </template>
  110.  
  111. <script>
  112.  
  113.   export default {
  114.  
  115.     name: 'Home',
  116.  
  117.     data() {
  118.  
  119.       return {
  120.  
  121.         // 获取用户信息，将字符串转对象
  122.  
  123.         // user: JSON.parse(window.sessionStorage.getItem('user'))
  124.  
  125.       }
  126.  
  127.     },
  128.  
  129.     computed: {
  130.  
  131.       // 从 vuex 获取 routes
  132.  
  133.       routes() {
  134.  
  135.         return this.$store.state.routes
  136.  
  137.       },
  138.  
  139.       user() {
  140.  
  141.         return this.$store.state.currentAdmin
  142.  
  143.       }
  144.  
  145.     },
  146.  
  147.     methods: {
  148.  
  149.       // 1-2 进入在线聊天页面
  150.  
  151.       goChar() {
  152.  
  153.         this.$router.push('/chat')
  154.  
  155.       },
  156.  
  157.       // 注销登录
  158.  
  159.       commandHandler(command) {
  160.  
  161.         if (command === 'logout') {
  162.  
  163.           // 弹框提示用户是否要删除
  164.  
  165.           this.$confirm('此操作将注销登录, 是否继续?', '提示', {
  166.  
  167.             confirmButtonText: '确定',
  168.  
  169.             cancelButtonText: '取消',
  170.  
  171.             type: 'warning'
  172.  
  173.           }).then(() => {
  174.  
  175.             // 注销登录
  176.  
  177.             this.postRequest('/logout')
  178.  
  179.             // 清空用户信息
  180.  
  181.             window.sessionStorage.removeItem('tokenStr')
  182.  
  183.             window.sessionStorage.removeItem('user')
  184.  
  185.             // 路由替换到登录页面
  186.  
  187.             // this.$router.replace('/')
  188.  
  189.             // 清空菜单信息；在src/utils/menus.js 中初始化菜单信息
  190.  
  191.             this.$store.commit('initRoutes', [])
  192.  
  193.             this.$router.replace('/')
  194.  
  195.           }).catch(() => {
  196.  
  197.             this.$message({
  198.  
  199.               type: 'info',
  200.  
  201.               message: '已取消注销登录'
  202.  
  203.             });
  204.  
  205.           });
  206.  
  207.         }
  208.  
  209.         if (command === 'userinfo') {
  210.  
  211.           this.$router.push('/userinfo')
  212.  
  213.         }
  214.  
  215.       }
  216.  
  217.     }
  218.  
  219.   }
  220.  
  221. </script>
  222.  
  223. <style scoped>
  224.  
  225.   .homeHeader {
  226.  
  227.     background: #3e9ef5;
  228.  
  229.     display: flex;
  230.  
  231.     align-items: center;
  232.  
  233.     justify-content: space-between;
  234.  
  235.     padding: 0 15px;
  236.  
  237.     box-sizing: border-box;
  238.  
  239.   }
  240.  
  241.   .homeHeader .title {
  242.  
  243.     font-size: 30px;
  244.  
  245.     /*font-family: 微软雅黑;*/
  246.  
  247.     font-family: 华文楷体;
  248.  
  249.     color: white;
  250.  
  251.   }
  252.  
  253.   .homeHeader .userInfo {
  254.  
  255.     cursor: pointer;
  256.  
  257.   }
  258.  
  259.   .el-dropdown-link img {
  260.  
  261.     width: 48px;
  262.  
  263.     height: 48px;
  264.  
  265.     border-radius: 50%;
  266.  
  267.     margin-left: 8px;
  268.  
  269.   }
  270.  
  271.   .homeWelcome {
  272.  
  273.     text-align: center;
  274.  
  275.     font-size: 30px;
  276.  
  277.     font-family: 华文楷体;
  278.  
  279.     color: #409ef4;
  280.  
  281.     padding-top: 50px;
  282.  
  283.   }
  284.  
  285.   .homeRouterView {
  286.  
  287.     margin-top: 10px;
  288.  
  289.   }
  290.  
  291. </style>

忽略hidden属性

            <!-- 2、循环整个路由组件，不展示 hidden: true 的路由组件 -->

            <el-submenu :index="index +''" v-for="(item,index) in routes"

                        :key="index" v-if="!item.hidden">

6.5 更新路由router/index.js

忽略router/index.js的hidden:true的

/home路由从首页获取

  1. import Vue from 'vue'
  2.  
  3. import VueRouter from 'vue-router'
  4.  
  5. import Login from "@/views/Login";
  6.  
  7. Vue.use(VueRouter)
  8.  
  9. const routes = [
  10.  
  11.     {
  12.  
  13.         path: '/',
  14.  
  15.         name: 'Login',
  16.  
  17.         component: Login,
  18.  
  19.         hidden: true // 不会被循环遍历出来
  20.  
  21.     }
  22.  
  23. ]
  24.  
  25. const router = new VueRouter({
  26.  
  27.     routes
  28.  
  29. })
  30.  
  31. export default router

6.6 index.html消除边距

添加样式

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5.   <head>
  6.  
  7.     <meta charset="utf-8">
  8.  
  9.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  10.  
  11.     <title>yeb-front</title>
  12.  
  13.   </head>
  14.  
  15.   <body style="margin:0px;padding:0px">
  16.  
  17.     <div id="app"></div>
  18.  
  19.     <!-- built files will be auto injected -->
  20.  
  21.   </body>
  22.  
  23. </html>

七、基础信息设置

7.1 样式设计

系统管理/基础信息设置设计如下几个模块：部门管理、职位管理、职称管理、奖惩规则、权限组

Tabs 标签页

使用element的Tabs标签页完成不同业务功能的切换；分隔内容上有关联但属于不同类别的数据集合。

abs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标签页。

  1. <template>
  2.  
  3.   <el-tabs v-model="activeName" @tab-click="handleClick">
  4.  
  5.     <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
  6.  
  7.     <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
  8.  
  9.     <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
  10.  
  11.     <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  12.  
  13.   </el-tabs>
  14.  
  15. </template>
  16.  
  17. <script>
  18.  
  19.   export default {
  20.  
  21.     data() {
  22.  
  23.       return {
  24.  
  25.         activeName: 'second'
  26.  
  27.       };
  28.  
  29.     },
  30.  
  31.     methods: {
  32.  
  33.       handleClick(tab, event) {
  34.  
  35.         console.log(tab, event);
  36.  
  37.       }
  38.  
  39.     }
  40.  
  41.   };
  42.  
  43. </script>

7.2 组件化开发

在我们开发的过程中会遇到很多可以重复使用的代码块，而Vue则提供了这样的封装方式也就是Vue.。利用组件化开发，将部门管理、职位管理、职称管理、奖惩规则、权限组等使用组件方式引入。组件也是.vue文件。组件导入方式 import 组件名 from “组件路径”，示例：

import DepMana from "@/components/sys/basic/DepMana";导入后并不能直接使用，需要在components对象中注册组件。之后是组件的应用：<DepMana/>或<DepMana></DepMana/>

组件目录

7.3 SysBasic.vue

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <el-tabs v-model="activeName" type="card">
  6.  
  7.       <el-tab-pane label="部门管理" name="DepMana"><DepMana/></el-tab-pane>
  8.  
  9.       <el-tab-pane label="职位管理" name="PosMana"><PosMana/></el-tab-pane>
  10.  
  11.       <el-tab-pane label="职称管理" name="JobLevelMana"><JobLevelMana/></el-tab-pane>
  12.  
  13.       <el-tab-pane label="奖惩规则" name="EcMana"><EcMana/></el-tab-pane>
  14.  
  15.       <el-tab-pane label="权限组" name="PositionMana"><PositionMana/></el-tab-pane>
  16.  
  17.     </el-tabs>
  18.  
  19.   </div>
  20.  
  21. </template>
  22.  
  23. <script>
  24.  
  25. import DepMana from "@/components/sys/basic/DepMana";  // 部门管理
  26.  
  27. import EcMana from "@/components/sys/basic/EcMana"; // 奖惩规则
  28.  
  29. import JobLevelMana from "@/components/sys/basic/JobLevelMana"; // 职称管理
  30.  
  31. import PositionMana from "@/components/sys/basic/PositionMana"; // 权限组
  32.  
  33. import PosMana from "@/components/sys/basic/PosMana"; // 职位管理
  34.  
  35. export default {
  36.  
  37.   name: "SysBasic",
  38.  
  39.   components:{
  40.  
  41.     JobLevelMana,
  42.  
  43.     DepMana,
  44.  
  45.     EcMana,
  46.  
  47.     PositionMana,
  48.  
  49.     PosMana
  50.  
  51.   },
  52.  
  53.   data() {
  54.  
  55.     return {
  56.  
  57.       activeName: 'DepMana' // 激活项
  58.  
  59.     }
  60.  
  61.   },
  62.  
  63.   methods: {}
  64.  
  65. }
  66.  
  67. </script>
  68.  
  69. <style scoped>
  70.  
  71. </style>

7.4 部门管理DepMana.vue组件

为了使用方便，一次性加载所有的部门。

样式设计：flex布局，space-between：两端对齐，与父元素对齐宽度。

搜索框过滤节点的方法，通过filterNode方法传入两个参数，value-搜索输入的值，data树形标签绑定的数据。value为空时展示所有标签值，否则，判断输入的value能否在data.name（展示在树形标签上的值）找到，这里用了js查找字符串方法indexOf，返回查找元素的下标，能找到返回下标（>=0)

 expand-on-click-node仅当鼠标点击展开按钮时展开，方便添加和删除功能的使用。

点击按钮时获取当前节点的数据即要添加子部门的“上级部门”id（parentId)

  1. <template>
  2.  
  3.   <div style="width: 500px">
  4.  
  5.     <!-- 1 -->
  6.  
  7.     <el-input
  8.  
  9.         placeholder="请输入部门名称进行搜索..."
  10.  
  11.         prefix-icon="el-icon-search"
  12.  
  13.         v-model="filterText">
  14.  
  15.     </el-input>
  16.  
  17.     <!-- 9、:expand-on-click-node="false" 点击小三角箭头才会展开
  19.             :default-expand-all="false" 设置默认不展开所有节点 -->
  20.  
  21.     <el-tree
  22.  
  23.         :data="deps"
  24.  
  25.         :props="defaultProps"
  26.  
  27.         default-expand-all
  28.  
  29.         :filter-node-method="filterNode"
  30.  
  31.         :expand-on-click-node="false"
  32.  
  33.         ref="tree">
  34.  
  35.       <!-- 7、label: 'name' -->
  36.  
  37.       <!-- 8、style="display: flex;justify-content: space-between;width: 100% 父容器宽度" 让添加和删除按键居右 -->
  38.  
  39.       <span class="custom-tree-node" slot-scope="{ node, data }"
  40.  
  41.             style="display: flex;justify-content: space-between;width: 100%">
  42.  
  43.         <span>{{ data.name }}</span>
  44.  
  45.         <span>
  46.  
  47.           <el-button
  48.  
  49.               plain
  50.  
  51.               type="primary"
  52.  
  53.               size="mini"
  54.  
  55.               class="depBtn"
  56.  
  57.               @click="() => showAddDep(data)">
  58.  
  59.             添加部门
  60.  
  61.           </el-button>
  62.  
  63.           <!-- 10、showAddDep(data)  deleteDep(data)  data 后端传过来的完整的 json 对象 -->
  64.  
  65.           <el-button
  66.  
  67.               plain
  68.  
  69.               type="danger"
  70.  
  71.               size="mini"
  72.  
  73.               class="depBtn"
  74.  
  75.               @click="() => deleteDep(data)">
  76.  
  77.             删除部门
  78.  
  79.           </el-button>
  80.  
  81.         </span>
  82.  
  83.       </span>
  84.  
  85.     </el-tree>
  86.  
  87.     <!-- 13、对话弹框 -->
  88.  
  89.     <el-dialog
  90.  
  91.         title="添加部门"
  92.  
  93.         :visible.sync="dialogVisible"
  94.  
  95.         width="30%">
  96.  
  97.       <!-- 16 -->
  98.  
  99.       <div>
  100.  
  101.         <table>
  102.  
  103.           <tr>
  104.  
  105.             <td>
  106.  
  107.               <el-tag>上级部门</el-tag>
  108.  
  109.             </td>
  110.  
  111.             <td>{{ pname }}</td>
  112.  
  113.           </tr>
  114.  
  115.           <tr>
  116.  
  117.             <td>
  118.  
  119.               <el-tag>部门名称</el-tag>
  120.  
  121.             </td>
  122.  
  123.             <td>
  124.  
  125.               <el-input v-model="dep.name" placeholder="请输入部门名称..." size="small"></el-input>
  126.  
  127.             </td>
  128.  
  129.           </tr>
  130.  
  131.         </table>
  132.  
  133.       </div>
  134.  
  135.       <span slot="footer" class="dialog-footer">
  136.  
  137.         <el-button @click="dialogVisible = false">取 消</el-button>
  138.  
  139.         <!-- 18、确定添加按钮绑定事件 @click="doAddDep" -->
  140.  
  141.         <el-button type="primary" @click="doAddDep">确 定</el-button>
  142.  
  143.       </span>
  144.  
  145.     </el-dialog>
  146.  
  147.   </div>
  148.  
  149. </template>
  150.  
  151. <script>
  152.  
  153. export default {
  154.  
  155.   name: "DepMana",
  156.  
  157.   data() {
  158.  
  159.     return { // 2
  160.  
  161.       filterText: '',
  162.  
  163.       deps: [], // 所有部门整个数组
  164.  
  165.       defaultProps: { // 2 关联子部门
  166.  
  167.         children: 'children',
  168.  
  169.         label: 'name'
  170.  
  171.       },
  172.  
  173.       dialogVisible: false, // 14
  174.  
  175.       dep: { // 15、添加部门数据象
  176.  
  177.         name: '',
  178.  
  179.         parentId: -1,
  180.  
  181.         isParent: ''
  182.  
  183.       },
  184.  
  185.       pname: '' // 15、上级部门名称
  186.  
  187.     }
  188.  
  189.   },
  190.  
  191.   watch: {
  192.  
  193.     // 4、观察者事件，监控输入框的值(框架方法）
  194.  
  195.     filterText(val) {
  196.  
  197.       this.$refs.tree.filter(val);
  198.  
  199.     }
  200.  
  201.   },
  202.  
  203.   mounted() {
  204.  
  205.     this.initDeps()  // 6、调用获取所有部门方法
  206.  
  207.   },
  208.  
  209.   methods: {
  210.  
  211.     // 删除部门调用的方法
  212.  
  213.     removeDepFromDeps(p, deps, id) {
  214.  
  215.       for (let i = 0; i < deps.length; i++) {
  216.  
  217.         let d = deps[i]
  218.  
  219.         if (d.id === id) {
  220.  
  221.           deps.splice(i, 1)
  222.  
  223.           if (deps.length === 0) {
  224.  
  225.             p.isParent = false
  226.  
  227.           }
  228.  
  229.           return;
  230.  
  231.         } else {
  232.  
  233.           this.removeDepFromDeps(d, d.children, id)
  234.  
  235.         }
  236.  
  237.       }
  238.  
  239.     },
  240.  
  241.     // 12、删除部门
  242.  
  243.     deleteDep(data) {
  244.  
  245.       // console.log(data)
  246.  
  247.       if (data.isParent) {
  248.  
  249.         this.$message.error('父部门删除失败！')
  250.  
  251.       } else {
  252.  
  253.         this.$confirm('此操作将永久删除该[' + data.name + ']部门, 是否继续?', '提示', {
  254.  
  255.           confirmButtonText: '确定',
  256.  
  257.           cancelButtonText: '取消',
  258.  
  259.           type: 'warning'
  260.  
  261.         }).then(() => {
  262.  
  263.           this.deleteRequest('/system/basic/department/' + data.id).then(resp => {
  264.  
  265.             if (resp) {
  266.  
  267.               this.removeDepFromDeps(null, this.deps, data.id)
  268.  
  269.             }
  270.  
  271.           })
  272.  
  273.         }).catch(() => {
  274.  
  275.           this.$message({
  276.  
  277.             type: 'info',
  278.  
  279.             message: '已取消删除'
  280.  
  281.           });
  282.  
  283.         });
  284.  
  285.       }
  286.  
  287.     },
  288.  
  289.     // 20、添加完部门 初始化 清空数据
  290.  
  291.     initDep() {
  292.  
  293.       this.dep = {
  294.  
  295.         name: '',
  296.  
  297.         parentId: -1
  298.  
  299.       }
  300.  
  301.       this.pname = ''
  302.  
  303.     },
  304.  
  305.     // 22、 递归查询所有部门信息，deps 查询到的整个数组，dep 添加的部门
  306.  
  307.     addDep2Deps(deps, dep) {
  308.  
  309.       for (let i = 0; i < deps.length; i++) {
  310.  
  311.         let d = deps[i] // 父部门
  312.  
  313.         if (d.id === dep.parentId) {
  314.  
  315.           d.children = d.children.concat(dep) // 把 dep 加为 d 的子部门
  316.  
  317.           if (d.children.length > 0) {
  318.  
  319.             d.isParent = true
  320.  
  321.           }
  322.  
  323.           return;
  324.  
  325.         } else {
  326.  
  327.           this.addDep2Deps(d.children, dep) // 递归调用此方法 以查询结果为条件 继续查询子部门
  328.  
  329.         }
  330.  
  331.       }
  332.  
  333.     },
  334.  
  335.     // 19、确认添加部门
  336.  
  337.     doAddDep() {
  338.  
  339.       this.postRequest('/system/basic/department/', this.dep).then(resp => {
  340.  
  341.         if (resp) {
  342.  
  343.           // console.log(resp)
  344.  
  345.           this.dialogVisible = false // 关闭对话框
  346.  
  347.           this.addDep2Deps(this.deps, resp.data) // 23、【无效】手动插入部门 显示添加后的数据
  348.  
  349.           this.initDep() // 21、调用初始化方法 清空数据
  350.  
  351.         }
  352.  
  353.       })
  354.  
  355.     },
  356.  
  357.     // 11、17、添加部门弹框
  358.  
  359.     showAddDep(data) {
  360.  
  361.       // console.log(data)
  362.  
  363.       this.dep.parentId = data.id
  364.  
  365.       this.pname = data.name
  366.  
  367.       this.dialogVisible = true
  368.  
  369.     },
  370.  
  371.     // 5、获取所有部门
  372.  
  373.     initDeps() {
  374.  
  375.       this.getRequest('/system/basic/department/').then(resp => {
  376.  
  377.         if (resp) {
  378.  
  379.           this.deps = resp
  380.  
  381.         }
  382.  
  383.       })
  384.  
  385.     },
  386.  
  387.     // 3、事件(框架方法）
  388.  
  389.     filterNode(value, data) { // data 整行数据
  390.  
  391.       if (!value) return true; // true 节点可以展示，false 节点隐藏
  392.  
  393.       return data.name.indexOf(value) !== -1; // label: 'name'
  394.  
  395.     }
  396.  
  397.   }
  398.  
  399. }
  400.  
  401. </script>
  402.  
  403. <style scoped>
  404.  
  405. /* 8 */
  406.  
  407. .depBtn {
  408.  
  409.   padding: 2px;
  410.  
  411. }
  412.  
  413. </style>

7.5 职位管理PosMana.vue组件

element的表格控件，第一列做多选框，将其type="selection"。表格绑定多选事件@selection-change="handleSelectionChange"

 通过el-dialog编辑按钮修改职位名称。绑定弹出框显示方法:visible.sync="dialogVisible"，取消时dialogVisible=false，点击“编辑”时dialogVisible=true。

 批量删除。通过multipleSelection数组获取多选数据，multipleSelection为空时，批量删除按钮禁用。提示框内通过multipleSelection展示多选信息

接口数据返回信息

 PosMana.vue

键盘事件@keydown.enter.native="addPosition"输入后自动调用”添加“按钮绑定的方法。

编辑职位信息后：刷新列表数据，关闭弹框。

使用数据的拷贝Object.assign(this.updatePos, data)，将data中数据赋值给updatePos，避免浅拷贝引发的updatePos对data的数据修改。

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <div>
  6.  
  7.       <el-input
  8.  
  9.           size="small"
  10.  
  11.           class="addPosInput"
  12.  
  13.           placeholder="请选择日期"
  14.  
  15.           suffix-icon="el-icon-plus"
  16.  
  17.           @keydown.enter.native="addPosition"
  18.  
  19.           v-model="pos.name">
  20.  
  21.       </el-input>
  22.  
  23.       <el-button size="small" icon="el-icon-plus" type="primary" @click="addPosition">添加</el-button>
  24.  
  25.     </div>
  26.  
  27.     <div class="posManaMain">
  28.  
  29.       <el-table
  30.  
  31.           border
  32.  
  33.           stripe
  34.  
  35.           size="small"
  36.  
  37.           :data="positions"
  38.  
  39.           style="width: 70%"
  40.  
  41.           @selection-change="handleSelectionChange">
  42.  
  43.         <el-table-column
  44.  
  45.             type="selection"
  46.  
  47.             width="55">
  48.  
  49.         </el-table-column>
  50.  
  51.         <el-table-column
  52.  
  53.             prop="id"
  54.  
  55.             label="编号"
  56.  
  57.             width="55">
  58.  
  59.         </el-table-column>
  60.  
  61.         <el-table-column
  62.  
  63.             prop="name"
  64.  
  65.             label="职位"
  66.  
  67.             width="120">
  68.  
  69.         </el-table-column>
  70.  
  71.         <el-table-column
  72.  
  73.             prop="createDate"
  74.  
  75.             label="创建时间"
  76.  
  77.             width="200">
  78.  
  79.         </el-table-column>
  80.  
  81.         <el-table-column label="操作">
  82.  
  83.           <template slot-scope="scope">
  84.  
  85.             <el-button
  86.  
  87.                 size="mini"
  88.  
  89.                 @click="showEditView(scope.$index, scope.row)">编辑
  90.  
  91.             </el-button>
  92.  
  93.             <el-button
  94.  
  95.                 size="mini"
  96.  
  97.                 type="danger"
  98.  
  99.                 @click="handleDelete(scope.$index, scope.row)">删除
  100.  
  101.             </el-button>
  102.  
  103.           </template>
  104.  
  105.         </el-table-column>
  106.  
  107.       </el-table>
  108.  
  109.     </div>
  110.  
  111.     <!-- :disabled 不禁用条件为勾选中，没勾选中为禁用。 -->
  112.  
  113.     <el-button size="small" style="margin-top: 8px" type="danger"
  114.  
  115.                :disabled="this.multipleSelection.length===0" @click="deleteMany">批量删除
  116.  
  117.     </el-button>
  118.  
  119.     <el-dialog
  120.  
  121.         title="提示"
  122.  
  123.         :visible.sync="dialogVisible"
  124.  
  125.         width="30%">
  126.  
  127.       <div>
  128.  
  129.         <el-tag>职位名称</el-tag>
  130.  
  131.         <el-input v-model="updatePos.name" size="small" class="updatePosInput"></el-input>
  132.  
  133.       </div>
  134.  
  135.       <span slot="footer" class="dialog-footer">
  136.  
  137.         <el-button size="small" @click="dialogVisible = false">取 消</el-button>
  138.  
  139.         <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
  140.  
  141.       </span>
  142.  
  143.     </el-dialog>
  144.  
  145.   </div>
  146.  
  147. </template>
  148.  
  149. <script>
  150.  
  151. export default {
  152.  
  153.   name: "PosMana",
  154.  
  155.   data() {
  156.  
  157.     return {
  158.  
  159.       pos: { // 查询添加职位数据
  160.  
  161.         name: ''
  162.  
  163.       },
  164.  
  165.       positions: [],
  166.  
  167.       dialogVisible: false,
  168.  
  169.       updatePos: { // 更新职位数据
  170.  
  171.         name: ''
  172.  
  173.       },
  174.  
  175.       multipleSelection: [] // 批量删除勾选的对象
  176.  
  177.     }
  178.  
  179.   },
  180.  
  181.   mounted() {
  182.  
  183.     // 调用获取后端接口所有职位数据方法
  184.  
  185.     this.initPositions()
  186.  
  187.   },
  188.  
  189.   methods: {
  190.  
  191.     // 批量删除请求
  192.  
  193.     deleteMany() {
  194.  
  195.       this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条职位, 是否继续?', '提示', {
  196.  
  197.         confirmButtonText: '确定',
  198.  
  199.         cancelButtonText: '取消',
  200.  
  201.         type: 'warning'
  202.  
  203.       }).then(() => {
  204.  
  205.         let ids = '?'
  206.  
  207.         this.multipleSelection.forEach(item => {
  208.  
  209.           ids += 'ids=' + item.id + '&'
  210.  
  211.         })
  212.  
  213.         this.deleteRequest('/system/basic/pos/' + ids).then(resp => {
  214.  
  215.           if (resp) {
  216.  
  217.             this.initPositions()
  218.  
  219.           }
  220.  
  221.         })
  222.  
  223.       }).catch(() => {
  224.  
  225.         this.$message({
  226.  
  227.           type: 'info',
  228.  
  229.           message: '已取消删除'
  230.  
  231.         });
  232.  
  233.       });
  234.  
  235.     },
  236.  
  237.     // 批量删除(取值）
  238.  
  239.     handleSelectionChange(val) {
  240.  
  241.       this.multipleSelection = val
  242.  
  243.       // console.log(val)
  244.  
  245.     },
  246.  
  247.     // 编辑职位
  248.  
  249.     doUpdate() {
  250.  
  251.       this.putRequest('/system/basic/pos/', this.updatePos).then(resp => {
  252.  
  253.         if (resp) {
  254.  
  255.           this.initPositions() // 刷新数据列表
  256.  
  257.           this.dialogVisible = false // 关闭对话框
  258.  
  259.         }
  260.  
  261.       })
  262.  
  263.     },
  264.  
  265.     // 编辑职位对话框
  266.  
  267.     showEditView(index, data) {
  268.  
  269.       Object.assign(this.updatePos, data) // 回显数据,数据拷贝
  270.  
  271.       // this.updatePos = data // 回显数据 有bug
  272.  
  273.       this.updatePos.createDate = ''
  274.  
  275.       this.dialogVisible = true // 显示编辑框
  276.  
  277.     },
  278.  
  279.     // 添加职位
  280.  
  281.     addPosition() {
  282.  
  283.       if (this.pos.name) {
  284.  
  285.         this.postRequest('/system/basic/pos/', this.pos).then(resp => {
  286.  
  287.           if (resp) {
  288.  
  289.             this.initPositions()
  290.  
  291.             this.pos.name = ''
  292.  
  293.           }
  294.  
  295.         })
  296.  
  297.       } else {
  298.  
  299.         this.$message.error('职位名称不能为空！')
  300.  
  301.       }
  302.  
  303.     },
  304.  
  305.     // 删除职位
  306.  
  307.     handleDelete(index, data) {
  308.  
  309.       this.$confirm('此操作将永久删除[' + data.name + ']职位, 是否继续?', '提示', {
  310.  
  311.         confirmButtonText: '确定',
  312.  
  313.         cancelButtonText: '取消',
  314.  
  315.         type: 'warning'
  316.  
  317.       }).then(() => {
  318.  
  319.         this.deleteRequest(' /system/basic/pos/' + data.id).then(resp => {
  320.  
  321.           if (resp) {
  322.  
  323.             this.initPositions()
  324.  
  325.           }
  326.  
  327.         })
  328.  
  329.       }).catch(() => {
  330.  
  331.         this.$message({
  332.  
  333.           type: 'info',
  334.  
  335.           message: '已取消删除'
  336.  
  337.         });
  338.  
  339.       });
  340.  
  341.     },
  342.  
  343.     // 获取后端接口所有职位数据
  344.  
  345.     initPositions() {
  346.  
  347.       this.getRequest('/system/basic/pos/').then(resp => {
  348.  
  349.         if (resp) {
  350.  
  351.           this.positions = resp
  352.  
  353.         }
  354.  
  355.       })
  356.  
  357.     }
  358.  
  359.   }
  360.  
  361. }
  362.  
  363. </script>
  364.  
  365. <style scoped>
  366.  
  367. /*添加职位输入框*/
  368.  
  369. .addPosInput {
  370.  
  371.   width: 300px;
  372.  
  373.   margin-right: 8px;
  374.  
  375. }
  376.  
  377. /*所有数据表格*/
  378.  
  379. .posManaMain {
  380.  
  381.   margin-top: 10px;
  382.  
  383. }
  384.  
  385. /*编号职位输入框*/
  386.  
  387. .updatePosInput {
  388.  
  389.   width: 200px;
  390.  
  391.   margin-left: 8px;
  392.  
  393. }
  394.  
  395. </style>

7.6 职称管理JobLevelMana.vue组件

职称管理实现了职称的添加、更新、单条删除、批量删除功能。

单条更新里是否启用按钮使用了element的开关控件

 JobLevelMana.vue

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <div>
  6.  
  7.       <el-input size="small" v-model="jl.name" placeholder="添加职称名称..."
  8.  
  9.                 prefix-icon="el-icon-plus" style="width: 300px"></el-input>
  10.  
  11.       <el-select size="small" v-model="jl.titleLevel" placeholder="职称等级" style="margin-left: 6px;margin-right: 6px">
  12.  
  13.         <el-option
  14.  
  15.             v-for="item in titleLevels"
  16.  
  17.             :key="item"
  18.  
  19.             :label="item"
  20.  
  21.             :value="item">
  22.  
  23.         </el-option>
  24.  
  25.       </el-select>
  26.  
  27.       <el-button type="primary" icon="el-icon-plus" size="small" @click="addJobLevel">添加</el-button>
  28.  
  29.     </div>
  30.  
  31.     <div style="margin-top: 10px;">
  32.  
  33.       <el-table
  34.  
  35.           :data="jls"
  36.  
  37.           stripe
  38.  
  39.           border
  40.  
  41.           size="small"
  42.  
  43.           style="width: 70%;"
  44.  
  45.           @selection-change="handleSelectionChange">
  46.  
  47.       <el-table-column
  48.  
  49.             type="selection"
  50.  
  51.             width="55">
  52.  
  53.         </el-table-column>
  54.  
  55.         <el-table-column
  56.  
  57.             prop="id"
  58.  
  59.             label="编号"
  60.  
  61.             width="55">
  62.  
  63.         </el-table-column>
  64.  
  65.         <el-table-column
  66.  
  67.             prop="name"
  68.  
  69.             label="职称名称"
  70.  
  71.             width="150">
  72.  
  73.         </el-table-column>
  74.  
  75.         <el-table-column
  76.  
  77.             prop="titleLevel"
  78.  
  79.             label="职称等级"
  80.  
  81.             width="150">
  82.  
  83.         </el-table-column>
  84.  
  85.         <el-table-column
  86.  
  87.             prop="createDate"
  88.  
  89.             label="创建日期"
  90.  
  91.             width="150">
  92.  
  93.         </el-table-column>
  94.  
  95.         <el-table-column
  96.  
  97.             prop="enabled"
  98.  
  99.             label="是否启用"
  100.  
  101.             width="100">
  102.  
  103.           <template slot-scope="scope">
  104.  
  105.             <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
  106.  
  107.             <el-tag type="danger" v-else>未启用</el-tag>
  108.  
  109.           </template>
  110.  
  111.         </el-table-column>
  112.  
  113.         <el-table-column label="操作" width="350">
  114.  
  115.           <template slot-scope="scope">
  116.  
  117.             <el-button
  118.  
  119.                 size="small"
  120.  
  121.                 @click="showEditView(scope.row)">编辑
  122.  
  123.             </el-button>
  124.  
  125.             <el-button
  126.  
  127.                 size="small"
  128.  
  129.                 type="danger"
  130.  
  131.                 @click="deleteHandle(scope.row)">删除
  132.  
  133.             </el-button>
  134.  
  135.           </template>
  136.  
  137.         </el-table-column>
  138.  
  139.       </el-table>
  140.  
  141.       <el-button size="small" style="margin-top: 8px" type="danger"
  142.  
  143.                  :disabled="this.multipleSelection.length===0" @click="deleteMany">批量删除
  144.  
  145.       </el-button>
  146.  
  147.     </div>
  148.  
  149.     <!-- 编辑弹框 -->
  150.  
  151.     <el-dialog
  152.  
  153.         title="编辑职称"
  154.  
  155.         :visible.sync="dialogVisible"
  156.  
  157.         width="30%">
  158.  
  159.       <table>
  160.  
  161.         <tr>
  162.  
  163.           <td>
  164.  
  165.             <el-tag>职称名称</el-tag>
  166.  
  167.           </td>
  168.  
  169.           <td>
  170.  
  171.             <el-input v-model="updateJl.name" size="small" style="margin-left: 6px"></el-input>
  172.  
  173.           </td>
  174.  
  175.         </tr>
  176.  
  177.         <tr>
  178.  
  179.           <td>
  180.  
  181.             <el-tag>职称等级</el-tag>
  182.  
  183.           </td>
  184.  
  185.           <td>
  186.  
  187.             <el-select size="small" v-model="updateJl.titleLevel" placeholder="职称等级"
  188.  
  189.                        style="margin-left: 6px;margin-right: 6px">
  190.  
  191.               <el-option
  192.  
  193.                   v-for="item in titleLevels"
  194.  
  195.                   :key="item"
  196.  
  197.                   :label="item"
  198.  
  199.                   :value="item">
  200.  
  201.               </el-option>
  202.  
  203.             </el-select>
  204.  
  205.           </td>
  206.  
  207.         </tr>
  208.  
  209.         <tr>
  210.  
  211.           <td>
  212.  
  213.             <el-tag>是否启用</el-tag>
  214.  
  215.           </td>
  216.  
  217.           <td>
  218.  
  219.             <el-switch
  220.  
  221.                 style="margin-left: 6px"
  222.  
  223.                 v-model="updateJl.enabled"
  224.  
  225.                 active-color="#13ce66"
  226.  
  227.                 inactive-color="#ff4949"
  228.  
  229.                 active-text="启用"
  230.  
  231.                 inactive-text="未启用">
  232.  
  233.             </el-switch>
  234.  
  235.           </td>
  236.  
  237.         </tr>
  238.  
  239.       </table>
  240.  
  241.       <span slot="footer" class="dialog-footer">
  242.  
  243.         <el-button @click="dialogVisible = false">取 消</el-button>
  244.  
  245.         <el-button type="primary" @click="doUpdate">确 定</el-button>
  246.  
  247.       </span>
  248.  
  249.     </el-dialog>
  250.  
  251.   </div>
  252.  
  253. </template>
  254.  
  255. <script>
  256.  
  257. export default {
  258.  
  259.   name: "JobLevelMana",
  260.  
  261.   data() {
  262.  
  263.     return {
  264.  
  265.       // 查询 添加 数据对象
  266.  
  267.       jl: {
  268.  
  269.         name: '',
  270.  
  271.         titleLevel: ''
  272.  
  273.       },
  274.  
  275.       // 更新 数据对象
  276.  
  277.       updateJl: {
  278.  
  279.         name: '',
  280.  
  281.         titleLevel: '',
  282.  
  283.         enabled: false
  284.  
  285.       },
  286.  
  287.       titleLevels: [
  288.  
  289.         '正高级',
  290.  
  291.         '副高级',
  292.  
  293.         '中级',
  294.  
  295.         '初级',
  296.  
  297.         '员级'
  298.  
  299.       ],
  300.  
  301.       jls: [], // 删除单条
  302.  
  303.       dialogVisible: false,
  304.  
  305.       multipleSelection: [] // 批量删除勾选中的值
  306.  
  307.     }
  308.  
  309.   },
  310.  
  311.   mounted() {
  312.  
  313.     this.initJls()
  314.  
  315.   },
  316.  
  317.   methods: {
  318.  
  319.     // 执行批量删除
  320.  
  321.     deleteMany(){
  322.  
  323.       this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条职称, 是否继续?', '提示', {
  324.  
  325.         confirmButtonText: '确定',
  326.  
  327.         cancelButtonText: '取消',
  328.  
  329.         type: 'warning'
  330.  
  331.       }).then(() => {
  332.  
  333.         let ids = '?'
  334.  
  335.         this.multipleSelection.forEach(item => {
  336.  
  337.           ids += 'ids=' + item.id + '&'
  338.  
  339.         })
  340.  
  341.         this.deleteRequest('/system/basic/joblevel/' + ids).then(resp => {
  342.  
  343.           if (resp) {
  344.  
  345.             this.initJls()
  346.  
  347.           }
  348.  
  349.         })
  350.  
  351.       }).catch(() => {
  352.  
  353.         this.$message({
  354.  
  355.           type: 'info',
  356.  
  357.           message: '已取消删除'
  358.  
  359.         });
  360.  
  361.       });
  362.  
  363.     },
  364.  
  365.     // 批量删除勾选中的值
  366.  
  367.     handleSelectionChange(val){
  368.  
  369.       this.multipleSelection = val
  370.  
  371.     },
  372.  
  373.     // 更新职称信息
  374.  
  375.     doUpdate() {
  376.  
  377.       this.putRequest('/system/basic/joblevel/', this.updateJl).then(resp => {
  378.  
  379.         if (resp) {
  380.  
  381.           this.initJls()
  382.  
  383.           this.dialogVisible = false
  384.  
  385.         }
  386.  
  387.       })
  388.  
  389.     },
  390.  
  391.     // 显示编辑弹框
  392.  
  393.     showEditView(data) {
  394.  
  395.       Object.assign(this.updateJl, data) // 复制数据,注意这里是 , 号隔开
  396.  
  397.       this.updateJl.createDate = '' // 更新日期由后端处理，这里不用传
  398.  
  399.       this.dialogVisible = true // 显示编辑弹框
  400.  
  401.     },
  402.  
  403.     // 删除职称
  404.  
  405.     deleteHandle(data) {
  406.  
  407.       this.$confirm('此操作将永久删除[' + data.name + ']职称, 是否继续?', '提示', {
  408.  
  409.         confirmButtonText: '确定',
  410.  
  411.         cancelButtonText: '取消',
  412.  
  413.         type: 'warning'
  414.  
  415.       }).then(() => {
  416.  
  417.         this.deleteRequest(' /system/basic/joblevel/' + data.id).then(resp => {
  418.  
  419.           if (resp) {
  420.  
  421.             this.initJls()
  422.  
  423.           }
  424.  
  425.         })
  426.  
  427.       }).catch(() => {
  428.  
  429.         this.$message({
  430.  
  431.           type: 'info',
  432.  
  433.           message: '已取消删除'
  434.  
  435.         });
  436.  
  437.       });
  438.  
  439.     },
  440.  
  441.     // 添加职称
  442.  
  443.     addJobLevel() {
  444.  
  445.       if (this.jl.name && this.jl.titleLevel) {
  446.  
  447.         this.postRequest('/system/basic/joblevel/', this.jl).then(resp => {
  448.  
  449.           if (resp) {
  450.  
  451.             this.initJls()
  452.  
  453.           }
  454.  
  455.         })
  456.  
  457.       } else {
  458.  
  459.         this.$message.error('字段不能为空！')
  460.  
  461.       }
  462.  
  463.     },
  464.  
  465.     // 获取职称列表数据
  466.  
  467.     initJls() {
  468.  
  469.       this.getRequest('/system/basic/joblevel/').then(resp => {
  470.  
  471.         if (resp) {
  472.  
  473.           this.jls = resp
  474.  
  475.           this.jl.name = ''
  476.  
  477.           this.jl.titleLevel = ''
  478.  
  479.         }
  480.  
  481.       })
  482.  
  483.     }
  484.  
  485.   }
  486.  
  487. }
  488.  
  489. </script>
  490.  
  491. <style scoped>
  492.  
  493. </style>

7.7 权限组PositionMana.vue组件

样式设计：由外到内依次使用了el-collapse折叠面板-》el-card卡片-》el-tree树形控件

<template slot="prepend">ROLE_</template>

使用element折叠面板展示角色，使用的是折叠面板的手风琴模式accordion，每次只能展开一个面板。

后端获取所有用户角色接口

与接口返回的nameZh角色字段绑定，展示在折叠面板上

折叠面板每个角色的菜单访问权限，采用树形控件设置角色权限。el-tree添加show-checkbox属性展示可选框。

默认选中的角色菜单列表根据角色rid获取后端接口返回的菜单selectedMenus。通过:default-checked-keys方式绑定。

使用getCheckedKeys获取选中节点key组成的数组。let selectedKeys = tree.getCheckedKeys(true) // 获取选中的节点数组,true 仅返回被选中的叶子节点的 keys,如三级分类

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <div class="positionManaTool">
  6.  
  7.       <el-input v-model="role.name" placeholder="请输入角色英文名" size="small">
  8.  
  9.         <template slot="prepend">ROLE_</template>
  10.  
  11.       </el-input>
  12.  
  13.       <el-input v-model="role.nameZh" placeholder="请输入角色中文名" size="small" @keydown.enter.native="doAddRole"></el-input>
  14.  
  15.       <el-button type="primary" icon="el-icon-plus" size="mini" @click="doAddRole">添加角色</el-button>
  16.  
  17.     </div>
  18.  
  19.     <!-- 手风琴 -->
  20.  
  21.     <div class="positionManaMain">
  22.  
  23.       <el-collapse v-model="activeName" accordion @change="change">
  24.  
  25.         <el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">
  26.  
  27.           <el-card class="box-card">
  28.  
  29.             <div slot="header" class="clearfix">
  30.  
  31.               <span>可访问资源</span>
  32.  
  33.               <el-button type="text" icon="el-icon-delete" style="float: right;padding: 3px 0;color: #f41f0a" @click="doDeleteRole(r)">
  34.  
  35.               </el-button>
  36.  
  37.             </div>
  38.  
  39.             <div>
  40.  
  41.               <el-tree ref="treeRef" show-checkbox :data="allMenus" :props="defaultProps"
  42.  
  43.                        :default-checked-keys="selectedMenus"
  44.  
  45.                        node-key="id" :key="index"></el-tree>
  46.  
  47.               <div style="display: flex;justify-content: flex-end">
  48.  
  49.                 <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
  50.  
  51.                 <el-button size="mini" type="primary" @click="doUpdate(r.id,index)">确认修改</el-button>
  52.  
  53.               </div>
  54.  
  55.             </div>
  56.  
  57.           </el-card>
  58.  
  59.         </el-collapse-item>
  60.  
  61.       </el-collapse>
  62.  
  63.     </div>
  64.  
  65.   </div>
  66.  
  67. </template>
  68.  
  69. <script>
  70.  
  71. export default {
  72.  
  73.   name: "PositionMana",
  74.  
  75.   data() {
  76.  
  77.     return {
  78.  
  79.       role: {
  80.  
  81.         name: '',
  82.  
  83.         nameZh: ''
  84.  
  85.       },
  86.  
  87.       roles: [],
  88.  
  89.       allMenus: [],
  90.  
  91.       defaultProps: { // 树形控件
  92.  
  93.         children: 'children',
  94.  
  95.         label: 'name' // 绑定数据 :name="r.id"
  96.  
  97.       },
  98.  
  99.       selectedMenus: [],
  100.  
  101.       activeName: -1 // 折叠面板 默认关闭
  102.  
  103.     }
  104.  
  105.   },
  106.  
  107.   mounted() {
  108.  
  109.     this.initRoles()
  110.  
  111.     this.initAllMenus()
  112.  
  113.   },
  114.  
  115.   methods: {
  116.  
  117.     // 删除角色
  118.  
  119.     doDeleteRole(role){
  120.  
  121.       this.$confirm('此操作将永久删除[' + role.nameZh + ']角色, 是否继续?', '提示', {
  122.  
  123.         confirmButtonText: '确定',
  124.  
  125.         cancelButtonText: '取消',
  126.  
  127.         type: 'warning'
  128.  
  129.       }).then(() => {
  130.  
  131.         this.deleteRequest('/system/basic/permission/role/' + role.id).then(resp => {
  132.  
  133.           if (resp) {
  134.  
  135.             this.initRoles()
  136.  
  137.           }
  138.  
  139.         })
  140.  
  141.       }).catch(() => {
  142.  
  143.         this.$message({
  144.  
  145.           type: 'info',
  146.  
  147.           message: '已取消删除'
  148.  
  149.         });
  150.  
  151.       });
  152.  
  153.     },
  154.  
  155.     // 添加角色
  156.  
  157.     doAddRole(){
  158.  
  159.       if (this.role.name && this.role.nameZh) {
  160.  
  161.         this.postRequest('/system/basic/permission/role',this.role).then(resp=>{
  162.  
  163.           if (resp) {
  164.  
  165.             this.initRoles()
  166.  
  167.             this.role.name = ''
  168.  
  169.             this.role.nameZh = ''
  170.  
  171.           }
  172.  
  173.         })
  174.  
  175.       }else {
  176.  
  177.         this.$message.error('所有字段不能为空！')
  178.  
  179.       }
  180.  
  181.     },
  182.  
  183.     // 取消修改
  184.  
  185.     cancelUpdate() {
  186.  
  187.       this.activeName = -1 // 关闭折叠面板
  188.  
  189.     },
  190.  
  191.     // 确认修改
  192.  
  193.     doUpdate(rid, index) {
  194.  
  195.       let tree = this.$refs.treeRef[index] // 获取引用对象和索引
  196.  
  197.       let selectedKeys = tree.getCheckedKeys(true) // 获取选中的节点数组,true 仅返回被选中的叶子节点的 keys,如三级分类
  198.  
  199.       // console.log(selectedKeys)
  200.  
  201.       let url = '/system/basic/permission/?rid=' + rid
  202.  
  203.       selectedKeys.forEach(key => {
  204.  
  205.         // 循环遍历出数组 id ，拼接在一起
  206.  
  207.         url += '&mids=' + key
  208.  
  209.       })
  210.  
  211.       this.putRequest(url).then(resp => {
  212.  
  213.         if (resp) {
  214.  
  215.           this.activeName = -1 // 关闭折叠面板
  216.  
  217.         }
  218.  
  219.       })
  220.  
  221.     },
  222.  
  223.     // 手风琴点击事件
  224.  
  225.     change(rid) {
  226.  
  227.       if (rid) {
  228.  
  229.         this.initAllMenus() // 调用获取所有菜单
  230.  
  231.         this.initSelectedMenus(rid) // 调用获取所有选中的菜单
  232.  
  233.         // alert(rid) // :name="r.id"  label: 'name'
  234.  
  235.       }
  236.  
  237.     },
  238.  
  239.     // 获取所有选中的菜单
  240.  
  241.     initSelectedMenus(rid) { // :name="r.id"  change(rid)
  242.  
  243.       this.getRequest('/system/basic/permission/mid/' + rid).then(resp => {
  244.  
  245.         if (resp) {
  246.  
  247.           this.selectedMenus = resp
  248.  
  249.         }
  250.  
  251.       })
  252.  
  253.     },
  254.  
  255.     // 获取所有菜单
  256.  
  257.     initAllMenus() {
  258.  
  259.       this.getRequest('/system/basic/permission/menus').then(resp => {
  260.  
  261.         if (resp) {
  262.  
  263.           this.allMenus = resp
  264.  
  265.         }
  266.  
  267.       })
  268.  
  269.     },
  270.  
  271.     // 获取所有角色
  272.  
  273.     initRoles() {
  274.  
  275.       this.getRequest('/system/basic/permission/').then(resp => {
  276.  
  277.         if (resp) {
  278.  
  279.           this.roles = resp
  280.  
  281.         }
  282.  
  283.       })
  284.  
  285.     }
  286.  
  287.   }
  288.  
  289. }
  290.  
  291. </script>
  292.  
  293. <style scoped>
  294.  
  295. .positionManaTool {
  296.  
  297.   display: flex;
  298.  
  299.   justify-content: flex-start;
  300.  
  301. }
  302.  
  303. .positionManaTool .el-input {
  304.  
  305.   width: 300px;
  306.  
  307.   margin-right: 6px;
  308.  
  309. }
  310.  
  311. .positionManaMain {
  312.  
  313.   margin-top: 10px;
  314.  
  315.   width: 700px;
  316.  
  317. }
  318.  
  319. </style>

八、操作员管理

可以通过搜索操作员的名字，来单独显示操作员的信息。展示所有操作员的时候，不会把自己当前登录的操作员显示出来。

操作员涉及了权限：操作员拥有哪些角色，在根据角色再去拥有哪些菜单的权限。

获取操作员管理后端信息返回

 

SysAdmin.vue

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <!-- 1、 -->
  6.  
  7.     <div style="display: flex;justify-content: center;margin-top: 10px;">
  8.  
  9.       <!-- 9、v-model="keywords" \ @click="doSearch">搜索 -->
  10.  
  11.       <el-input v-model="keywords" placeholder="通过用户名搜索用户..." prefix-icon="el-icon-search"
  12.  
  13.                 style="width: 400px;margin-right: 10px;"></el-input>
  14.  
  15.       <el-button type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
  16.  
  17.     </div>
  18.  
  19.     <!-- 2、6、 -->
  20.  
  21.     <div class="admin-container">
  22.  
  23.       <el-card class="admin-card" v-for="(admin,index) in admins" :key="index">
  24.  
  25.         <div slot="header" class="clearfix">
  26.  
  27.             <div class="userInfoTab">
  28.  
  29.                 <div style="margin-top:5px;margin-right: 8px;">{{ admin.name}}</div>
  30.  
  31.                 <div><img :src="admin.userFace" :alt="admin.name" :title="admin.name" class="userFace-img"></div>
  32.  
  33.             </div>
  34.  
  35.            <!-- 12、 @click="deleteAdmin(admin)" -->
  36.  
  37.           <el-button style="color:red;" type="text" icon="el-icon-delete"
  38.  
  39.                      @click="deleteAdmin(admin)"></el-button>
  40.  
  41.         </div>
  42.  
  43.         <div class="userinfo-container">
  44.  
  45.           <div>用户名：{{ admin.name }}</div>
  46.  
  47.           <div>手机号码：{{ admin.phone }}</div>
  48.  
  49.           <div>电话号码：{{ admin.telephone }}</div>
  50.  
  51.           <div>地址：{{ admin.address }}</div>
  52.  
  53.           <div>用户状态：
  54.  
  55.             <!-- 14、更新操作员 @change="enabledChange(admin)" -->
  56.  
  57.             <el-switch
  58.  
  59.                 v-model="admin.enabled"
  60.  
  61.                 active-color="#13ce66"
  62.  
  63.                 inactive-color="#ff4949"
  64.  
  65.                 @change="enabledChange(admin)"
  66.  
  67.                 active-text="启用"
  68.  
  69.                 inactive-text="禁用">
  70.  
  71.             </el-switch>
  72.  
  73.           </div>
  74.  
  75.           <div>
  76.  
  77.             用户角色：
  78.  
  79.             <el-tag style="margin-right: 4px;" type="success" v-for="(role,index) in admin.roles" :key="index">
  80.  
  81.               {{ role.nameZh }}
  82.  
  83.             </el-tag>
  84.  
  85.             <!-- 16、更新操作员角色 弹出框、选择器、 -->
  86.  
  87.             <!-- 20、@show="showPop(admin)" -->
  88.  
  89.             <!-- 24、@hide="hidePop(admin)" hide 隐藏时触发-->
  90.  
  91.             <el-popover
  92.  
  93.                 placement="right"
  94.  
  95.                 title="角色列表"
  96.  
  97.                 width="200"
  98.  
  99.                 @show="showPop(admin)"
  100.  
  101.                 @hide="hidePop(admin)"
  102.  
  103.                 trigger="click">
  104.  
  105.               <!-- 17、更新操作员角色 下拉框 -->
  106.  
  107.               <!-- 22、v-model="selectedRoles" 存的是1个角色id，multiple 多选，显示已有角色 -->
  108.  
  109.               <el-select v-model="selectedRoles" multiple placeholder="请选择">
  110.  
  111.                 <el-option
  112.  
  113.                     v-for="(r,index) in allRoles"
  114.  
  115.                     :key="index"
  116.  
  117.                     :label="r.nameZh"
  118.  
  119.                     :value="r.id">
  120.  
  121.                 </el-option>
  122.  
  123.               </el-select>
  124.  
  125.               <!-- 3个点按钮 ... -->
  126.  
  127.               <el-button slot="reference" type="text" icon="el-icon-more"></el-button>
  128.  
  129.             </el-popover>
  130.  
  131.           </div>
  132.  
  133.           <div>备注：{{ admin.remark }}</div>
  134.  
  135.         </div>
  136.  
  137.       </el-card>
  138.  
  139.     </div>
  140.  
  141.   </div>
  142.  
  143. </template>
  144.  
  145. <script>
  146.  
  147. export default {
  148.  
  149.   name: "SysAdmin",
  150.  
  151.   data() {
  152.  
  153.     return {
  154.  
  155.       admins: [], // 3
  156.  
  157.       keywords: '', // 8、搜索关键字
  158.  
  159.       allRoles: [], // 18、更新操作员角色
  160.  
  161.       selectedRoles: [] // 23
  162.  
  163.     }
  164.  
  165.   },
  166.  
  167.   mounted() {
  168.  
  169.     this.initAdmins() // 5
  170.  
  171.   },
  172.  
  173.   methods: {
  174.  
  175.     // 25、更新操作员角色
  176.  
  177.     hidePop(admin) {
  178.  
  179.       let roles = []
  180.  
  181.       Object.assign(roles, admin.roles) // 拷贝对象
  182.  
  183.       let flag = false
  184.  
  185.       // 如果选中的角色 id 的长度和原来的不一样
  186.  
  187.       if (roles.length != this.selectedRoles.length) { // 用户对应角色id
  188.  
  189.         flag = true
  190.  
  191.       } else {
  192.  
  193.         // 角色 id 长度和原来的一样，但可能角色不一样
  194.  
  195.         // 先循环 admin.roles
  196.  
  197.         for (let i = 0; i < roles.length; i++) {
  198.  
  199.           let role = roles[i] // 用户对应的角色对象
  200.  
  201.           for (let j = 0; j < this.selectedRoles.length; j++) {
  202.  
  203.             let sr = this.selectedRoles[j]  // 拿到用户对应的角色对象的id
  204.  
  205.             if (role.id == sr) { // 角色一样
  206.  
  207.               roles.splice(i, 1) // 删除
  208.  
  209.               i--
  210.  
  211.               break
  212.  
  213.             }
  214.  
  215.           }
  216.  
  217.         }
  218.  
  219.         if (roles.length != 0) {
  220.  
  221.           flag = true
  222.  
  223.         }
  224.  
  225.       }
  226.  
  227.       if (flag) {
  228.  
  229.         // 拼接 url(参数为 adminId、角色 rids )
  230.  
  231.         let url = '/system/admin/role?adminId=' + admin.id;
  232.  
  233.         this.selectedRoles.forEach(sr => {
  234.  
  235.           url += '&rids=' + sr
  236.  
  237.         });
  238.  
  239.         this.putRequest(url).then(resp => {
  240.  
  241.           if (resp) {
  242.  
  243.             this.initAdmins()
  244.  
  245.           }
  246.  
  247.         });
  248.  
  249.       }
  250.  
  251.     },
  252.  
  253.     // 21、下拉框获取所有用户角色
  254.  
  255.     showPop(admin) {
  256.  
  257.       this.initAllRoles()
  258.  
  259.       let roles = admin.roles // 拿到整个数组
  260.  
  261.       this.selectedRoles = []
  262.  
  263.       roles.forEach(r => {
  264.  
  265.         this.selectedRoles.push(r.id) // r.id 相同的角色放进数组
  266.  
  267.       })
  268.  
  269.     },
  270.  
  271.     // 19、获取所有操作员
  272.  
  273.     initAllRoles() {
  274.  
  275.       this.getRequest(' /system/admin/roles').then(resp => {
  276.  
  277.         if (resp) {
  278.  
  279.           this.allRoles = resp
  280.  
  281.         }
  282.  
  283.       })
  284.  
  285.     },
  286.  
  287.     // 15、更新操作员
  288.  
  289.     enabledChange(admin) {
  290.  
  291.       this.putRequest('/system/admin/', admin).then(resp => {
  292.  
  293.         if (resp) {
  294.  
  295.           this.initAdmins()
  296.  
  297.         }
  298.  
  299.       })
  300.  
  301.     },
  302.  
  303.     // 13、删除操作员
  304.  
  305.     deleteAdmin(admin) {
  306.  
  307.       this.$confirm('此操作将永久删除该[' + admin.name + '], 是否继续?', '提示', {
  308.  
  309.         confirmButtonText: '确定',
  310.  
  311.         cancelButtonText: '取消',
  312.  
  313.         type: 'warning'
  314.  
  315.       }).then(() => {
  316.  
  317.         this.deleteRequest('/system/admin/' + admin.id).then(resp => {
  318.  
  319.           if (resp) {
  320.  
  321.             this.initAdmins()
  322.  
  323.           }
  324.  
  325.         })
  326.  
  327.       }).catch(() => {
  328.  
  329.         this.$message({
  330.  
  331.           type: 'info',
  332.  
  333.           message: '已取消删除'
  334.  
  335.         });
  336.  
  337.       });
  338.  
  339.     },
  340.  
  341.     // 10 搜索
  342.  
  343.     doSearch() {
  344.  
  345.       this.initAdmins()
  346.  
  347.     },
  348.  
  349.     // 4、获取所有操作员；11、加参数关键字
  350.  
  351.     initAdmins() {
  352.  
  353.       this.getRequest('/system/admin/?keywords=' + this.keywords).then(resp => {
  354.  
  355.         if (resp) {
  356.  
  357.           this.admins = resp
  358.  
  359.         }
  360.  
  361.       })
  362.  
  363.     }
  364.  
  365.   }
  366.  
  367. }
  368.  
  369. </script>
  370.  
  371. <style >
  372.  
  373. /* 7 */
  374.  
  375. .admin-container {
  376.  
  377.   margin-top: 10px;
  378.  
  379.   display: flex;
  380.  
  381.   justify-content: space-between;
  382.  
  383.   flex-wrap: wrap; /* 自动换行 */
  384.  
  385. }
  386.  
  387. .admin-card {
  388.  
  389.   width: 280px;
  390.  
  391.   margin-bottom: 20px;
  392.  
  393. }
  394.  
  395. .userInfoTab{
  396.  
  397.     /* background-color: black; */
  398.  
  399.     display: flex;
  400.  
  401.     justify-content: center;
  402.  
  403. }
  404.  
  405. /* 卡片顶部 */
  406.  
  407. .clearfix {
  408.  
  409.     display: flex;
  410.  
  411.     justify-content: space-between;
  412.  
  413. }
  414.  
  415. .userFace-img {
  416.  
  417.   width: 36px;
  418.  
  419.   height: 36px;
  420.  
  421.   border-radius: 36px;
  422.  
  423. }
  424.  
  425. /* 头像居中 */
  426.  
  427. /* .img-container {
  429.   /* width: 100%;
  431.   display: flex;
  433.   justify-content: center;
  435. } */
  436.  
  437. .userinfo-container {
  438.  
  439.   font-size: 12px;
  440.  
  441.   color: #3e9ef5;
  442.  
  443. }
  444.  
  445. </style>

九、员工资料

一、展示所有员工

二、分页展示

三、员工搜索

四、员工添加

五、更新和删除

六、导入导出数据

axios本身不提供下载功能，需要安装js-file-download

npm install js-file-download

以流的形式输出，流的格式是二进制数组。与axios的接口请求类似，js-file-download也需要封装请求拦截器和响应拦截器，因为js-file-download不共用axios封装的拦截器功能。请求拦截器需要重新设置对请求头Authorization的设置。axios的响应拦截器是对响应码进行判断，而js-file-download需要判断返回的是否是json字符串。通过判断返回头中的content-type，如果content-type是application/json格式，则是普通的json返回，需要将二进制编码转为普通的string形式。非json字符串才是流的形式返回，需要获取fileName，contentType。为了防止可能因为文件名是中文而造成乱码，需要将fileName进行格式转换。

  1.         let fileDownload = require('js-file-download') // 插件
  2.  
  3.         let fileName = headers['content-disposition'].split(';')[1].split('filename=')[1]//文件名
  4.  
  5.         let contentType = headers['content-type'] // 响应类型
  6.  
  7.         fileName = decodeURIComponent(fileName) // 格式转换 防止乱码
  8.  
  9.         fileDownload(resp.data, fileName, contentType) // 通过插件下载文件

 EmpBasic.vue

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <div>
  6.  
  7.       <div style="display: flex;justify-content: space-between;">
  8.  
  9.         <!-- 1、 -->
  10.  
  11.         <!-- 20、搜索 v-model="empName" <el-input @keydown.enter.native="initEmps" 回车键调用初始化会员方法
  13.              21、@click="initEmps">搜索</el-button>
  15.              22、清空 clearable @clear="initEmps" -->
  16.  
  17.         <!-- 28-8  :disabled="showAdvanceSearchVisible" -->
  18.  
  19.         <div style="margin-top: 10px;">
  20.  
  21.           <el-input style="width: 300px;margin-right: 10px;"
  22.  
  23.                     prefix-icon="el-icon-search"
  24.  
  25.                     v-model="empName"
  26.  
  27.                     placeholder="请输入员工名进行搜索..."
  28.  
  29.                     @keydown.enter.native="initEmps"
  30.  
  31.                     clearable
  32.  
  33.                     @clear="initEmps"
  34.  
  35.                     :disabled="showAdvanceSearchVisible"
  36.  
  37.           ></el-input>
  38.  
  39.           <el-button type="primary" icon="el-icon-search" @click="initEmps"
  40.  
  41.                      :disabled="showAdvanceSearchVisible">搜索
  42.  
  43.           </el-button>
  44.  
  45.           <!-- 28-3 @click="showAdvanceSearchVisible = !showAdvanceSearchVisible" -->
  46.  
  47.           <!-- 28-5 判断图标样式 :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'"-->
  48.  
  49.           <el-button type="primary" @click="showAdvanceSearchVisible = !showAdvanceSearchVisible">
  50.  
  51.             <i :class="showAdvanceSearchVisible?'fa fa-angle-double-up':'fa fa-angle-double-down'"
  52.  
  53.                aria-hidden="true"></i>高级搜索
  54.  
  55.           </el-button>
  56.  
  57.         </div>
  58.  
  59.         <div>
  60.  
  61.           <!-- 27-1、3 导入数据 上传组件 用自己的按钮 -->
  62.  
  63.           <!-- 27-5 on-success 文件上传成功时的钩子; on-error 文件上传失败时的钩子; -->
  64.  
  65.           <!-- 27-8 导入的时候禁用导入按钮 :disabled="importDataDisabled"  -->
  66.  
  67.           <!-- 27-11 :headers="headers" 设置上传的请求头部 -->
  68.  
  69.           <el-upload style="display: inline-flex;margin-right: 8px;" :show-file-list="false"
  70.  
  71.                      :headers="headers"
  72.  
  73.                      :before-upload="beforeUpload"
  74.  
  75.                      :on-success="onSuccess"
  76.  
  77.                      :on-error="onError"
  78.  
  79.                      :disabled="importDataDisabled"
  80.  
  81.                      action="/employee/basic/import"
  82.  
  83.           >
  84.  
  85.             <el-button type="success" :icon="importDataBtnIcon" :disabled="importDataDisabled">{{
  86.  
  87.                 importDataBtnText
  88.  
  89.               }}
  90.  
  91.             </el-button>
  92.  
  93.           </el-upload>
  94.  
  95.           <!-- 26-1、导出数据 @click="exportData" -->
  96.  
  97.           <el-button type="success" @click="exportData"><i class="el-icon-download" aria-hidden="true"></i>  导出数据
  98.  
  99.           </el-button>
  100.  
  101.           <!-- 23-3、 @click="showAddEmpView" -->
  102.  
  103.           <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">添加员工</el-button>
  104.  
  105.         </div>
  106.  
  107.       </div>
  108.  
  109.       <!-- 28-1 高级搜索条件框 -->
  110.  
  111.       <!-- 28-4 高级搜索条件框 v-show="showAdvanceSearchVisible" -->
  112.  
  113.       <!-- 28-6 添加展开动画效果 <transition name="fade"> 包含整个搜索条件框 </transition> -->
  114.  
  115.       <!-- 30-2 绑定搜索条件数据 v-model="searchValue.xxxxx" -->
  116.  
  117.       <transition name="slide-fade">
  118.  
  119.         <div v-show="showAdvanceSearchVisible"
  120.  
  121.              style="border: 1px solid #379ff5;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px 0;">
  122.  
  123.           <el-row>
  124.  
  125.             <el-col :span="5">
  126.  
  127.               政治面貌：
  128.  
  129.               <el-select v-model="searchValue.politicId" placeholder="请选择政治面貌" size="mini" style="width: 130px;">
  130.  
  131.                 <el-option
  132.  
  133.                     v-for="item in politicsstatus"
  134.  
  135.                     :key="item.id"
  136.  
  137.                     :label="item.name"
  138.  
  139.                     :value="item.id">
  140.  
  141.                 </el-option>
  142.  
  143.               </el-select>
  144.  
  145.             </el-col>
  146.  
  147.             <el-col :span="4">
  148.  
  149.               民族：
  150.  
  151.               <el-select v-model="searchValue.nationId" placeholder="民族" size="mini" style="width: 130px;">
  152.  
  153.                 <el-option
  154.  
  155.                     v-for="item in nations"
  156.  
  157.                     :key="item.id"
  158.  
  159.                     :label="item.name"
  160.  
  161.                     :value="item.id">
  162.  
  163.                 </el-option>
  164.  
  165.               </el-select>
  166.  
  167.             </el-col>
  168.  
  169.             <el-col :span="4">
  170.  
  171.               职位：
  172.  
  173.               <el-select v-model="searchValue.posId" placeholder="职位" size="mini" style="width: 130px;">
  174.  
  175.                 <el-option
  176.  
  177.                     v-for="item in positions"
  178.  
  179.                     :key="item.id"
  180.  
  181.                     :label="item.name"
  182.  
  183.                     :value="item.id">
  184.  
  185.                 </el-option>
  186.  
  187.               </el-select>
  188.  
  189.             </el-col>
  190.  
  191.             <el-col :span="4">
  192.  
  193.               职称：
  194.  
  195.               <el-select v-model="searchValue.jobLevelId" placeholder="职称" size="mini" style="width: 130px;">
  196.  
  197.                 <el-option
  198.  
  199.                     v-for="item in joblevels"
  200.  
  201.                     :key="item.id"
  202.  
  203.                     :label="item.name"
  204.  
  205.                     :value="item.id">
  206.  
  207.                 </el-option>
  208.  
  209.               </el-select>
  210.  
  211.             </el-col>
  212.  
  213.             <el-col :span="6">
  214.  
  215.               聘用形式：
  216.  
  217.               <el-radio-group v-model="searchValue.engageForm">
  218.  
  219.                 <el-radio label="劳动合同">劳动合同</el-radio>
  220.  
  221.                 <el-radio label="劳务合同">劳务合同</el-radio>
  222.  
  223.               </el-radio-group>
  224.  
  225.             </el-col>
  226.  
  227.           </el-row>
  228.  
  229.           <el-row style="margin-top: 10px;">
  230.  
  231.             <!-- 30-4 处理部门 v-model="visible2" -->
  232.  
  233.             <el-col :span="5">
  234.  
  235.               所属部门：
  236.  
  237.               <el-popover
  238.  
  239.                   placement="bottom"
  240.  
  241.                   title="请选择部门"
  242.  
  243.                   width="220"
  244.  
  245.                   trigger="manual"
  246.  
  247.                   v-model="visible2">
  248.  
  249.                 <!-- 23-20 添加树形控件 default-expand-all  是否默认展开所有节点 ，节点点击事件 @node-click="handleNodeClick" -->
  250.  
  251.                 <el-tree :data="allDeps"
  252.  
  253.                          :props="defaultProps"
  254.  
  255.                          default-expand-all
  256.  
  257.                          @node-click="searchHandleNodeClick"></el-tree>
  258.  
  259.                 <!-- 30-6 @node-click="searchHandleNodeClick" -->
  260.  
  261.                 <!-- node-click 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 -->
  262.  
  263.                 <!-- 自定义点击事件 -->
  264.  
  265.                 <!-- 30-7 @click="showDepView2" -->
  266.  
  267.                 <div slot="reference"
  268.  
  269.                      style="width:130px;display: inline-flex;
  271.                  border-radius: 5px;border: 1px solid #dedede;height: 28px;cursor: pointer;align-items: center;
  273.                  font-size: 12px;padding-left: 8px;box-sizing: border-box;"
  274.  
  275.                      @click="showDepView2">{{ inputDepName }}
  276.  
  277.                 </div><!-- 23-25 回显数据 {{inputDepName}} -->
  278.  
  279.               </el-popover>
  280.  
  281.             </el-col>
  282.  
  283.             <!-- 30-3 处理日期：v-model="searchValue.beginDateScope" value-format="yyyy-MM-dd" ;
  285.                  两个面板各自独立切换当前年份 使用unlink-panels -->
  286.  
  287.             <el-col :span="10">
  288.  
  289.               入职日期：
  290.  
  291.               <el-date-picker
  292.  
  293.                   unlink-panels
  294.  
  295.                   size="mini"
  296.  
  297.                   v-model="searchValue.beginDateScope"
  298.  
  299.                   type="datetimerange"
  300.  
  301.                   range-separator="至"
  302.  
  303.                   value-format="yyyy-MM-dd"
  304.  
  305.                   start-placeholder="开始日期"
  306.  
  307.                   end-placeholder="结束日期">
  308.  
  309.               </el-date-picker>
  310.  
  311.             </el-col>
  312.  
  313.             <el-col :span="5" :offset="4">
  314.  
  315.               <el-button size="mini">取消</el-button>
  316.  
  317.               <!-- 30-10 @click="initEmps('advanced')" -->
  318.  
  319.               <el-button type="primary" icon="el-icon-search" size="mini" @click="initEmps('advanced')">搜索</el-button>
  320.  
  321.             </el-col>
  322.  
  323.           </el-row>
  324.  
  325.         </div>
  326.  
  327.       </transition>
  328.  
  329.     </div>
  330.  
  331.     <div style="margin-top: 10px;">
  332.  
  333.       <!-- 2、表格；6、添加 loading -->
  334.  
  335.       <el-table
  336.  
  337.           :data="emps"
  338.  
  339.           v-loading="loading"
  340.  
  341.           element-loading-text="拼命加载中"
  342.  
  343.           element-loading-spinner="el-icon-loading"
  344.  
  345.           element-loading-background="rgba(0, 0, 0, 0.8)"
  346.  
  347.           style="width: 100%" stripe border>
  348.  
  349.         <el-table-column
  350.  
  351.             type="selection"
  352.  
  353.             width="55">
  354.  
  355.         </el-table-column>
  356.  
  357.         <el-table-column
  358.  
  359.             prop="name"
  360.  
  361.             label="姓名"
  362.  
  363.             align="left"
  364.  
  365.             fixed
  366.  
  367.             width="90">
  368.  
  369.         </el-table-column>
  370.  
  371.         <el-table-column
  372.  
  373.             prop="gender"
  374.  
  375.             label="性别"
  376.  
  377.             align="left"
  378.  
  379.             width="40">
  380.  
  381.         </el-table-column>
  382.  
  383.         <el-table-column
  384.  
  385.             prop="workId"
  386.  
  387.             label="工号"
  388.  
  389.             align="left"
  390.  
  391.             width="85">
  392.  
  393.         </el-table-column>
  394.  
  395.         <el-table-column
  396.  
  397.             prop="birthday"
  398.  
  399.             label="出生日期"
  400.  
  401.             align="left"
  402.  
  403.             width="95">
  404.  
  405.         </el-table-column>
  406.  
  407.         <el-table-column
  408.  
  409.             prop="idCard"
  410.  
  411.             label="身份证号"
  412.  
  413.             width="150">
  414.  
  415.         </el-table-column>
  416.  
  417.         <el-table-column
  418.  
  419.             prop="wedlock"
  420.  
  421.             label="婚姻状态"
  422.  
  423.             align="center"
  424.  
  425.             width="70">
  426.  
  427.         </el-table-column>
  428.  
  429.         <el-table-column
  430.  
  431.             prop="nation.name"
  432.  
  433.             label="民族"
  434.  
  435.             align="left"
  436.  
  437.             width="50">
  438.  
  439.         </el-table-column>
  440.  
  441.         <el-table-column
  442.  
  443.             prop="nativePlace"
  444.  
  445.             label="籍贯"
  446.  
  447.             align="center"
  448.  
  449.             width="80">
  450.  
  451.         </el-table-column>
  452.  
  453.         <el-table-column
  454.  
  455.             prop="politicsStatus.name"
  456.  
  457.             label="政治面貌"
  458.  
  459.             width="100">
  460.  
  461.         </el-table-column>
  462.  
  463.         <el-table-column
  464.  
  465.             prop="email"
  466.  
  467.             label="电子邮件"
  468.  
  469.             align="left"
  470.  
  471.             width="150">
  472.  
  473.         </el-table-column>
  474.  
  475.         <el-table-column
  476.  
  477.             prop="phone"
  478.  
  479.             label="电话号码"
  480.  
  481.             align="left"
  482.  
  483.             width="100">
  484.  
  485.         </el-table-column>
  486.  
  487.         <el-table-column
  488.  
  489.             prop="address"
  490.  
  491.             label="联系地址"
  492.  
  493.             align="center"
  494.  
  495.             width="220">
  496.  
  497.         </el-table-column>
  498.  
  499.         <el-table-column
  500.  
  501.             prop="department.name"
  502.  
  503.             label="所属部门"
  504.  
  505.             align="left"
  506.  
  507.             width="100">
  508.  
  509.         </el-table-column>
  510.  
  511.         <el-table-column
  512.  
  513.             prop="position.name"
  514.  
  515.             label="职位"
  516.  
  517.             width="100">
  518.  
  519.         </el-table-column>
  520.  
  521.         <el-table-column
  522.  
  523.             prop="joblevel.name"
  524.  
  525.             label="级别"
  526.  
  527.             width="100">
  528.  
  529.         </el-table-column>
  530.  
  531.         <el-table-column
  532.  
  533.             prop="engageForm"
  534.  
  535.             label="聘用形式"
  536.  
  537.             align="left"
  538.  
  539.             width="100">
  540.  
  541.         </el-table-column>
  542.  
  543.         <el-table-column
  544.  
  545.             prop="tiptopDegree"
  546.  
  547.             label="最高学历"
  548.  
  549.             align="center"
  550.  
  551.             width="80">
  552.  
  553.         </el-table-column>
  554.  
  555.         <el-table-column
  556.  
  557.             prop="school"
  558.  
  559.             label="毕业学校"
  560.  
  561.             align="left"
  562.  
  563.             width="150">
  564.  
  565.         </el-table-column>
  566.  
  567.         <el-table-column
  568.  
  569.             prop="specialty"
  570.  
  571.             label="所属专业"
  572.  
  573.             align="left"
  574.  
  575.             width="150">
  576.  
  577.         </el-table-column>
  578.  
  579.         <el-table-column
  580.  
  581.             prop="workState"
  582.  
  583.             label="在职状态"
  584.  
  585.             align="center"
  586.  
  587.             width="70">
  588.  
  589.         </el-table-column>
  590.  
  591.         <el-table-column
  592.  
  593.             prop="beginDate"
  594.  
  595.             label="入职日期"
  596.  
  597.             align="left"
  598.  
  599.             width="95">
  600.  
  601.         </el-table-column>
  602.  
  603.         <el-table-column
  604.  
  605.             prop="conversionTime"
  606.  
  607.             label="转正日期"
  608.  
  609.             align="left"
  610.  
  611.             width="95">
  612.  
  613.         </el-table-column>
  614.  
  615.         <el-table-column
  616.  
  617.             prop="beginContract"
  618.  
  619.             label="合同起始日期"
  620.  
  621.             align="left"
  622.  
  623.             width="95">
  624.  
  625.         </el-table-column>
  626.  
  627.         <el-table-column
  628.  
  629.             prop="endContract"
  630.  
  631.             label="合同截止日期"
  632.  
  633.             align="left"
  634.  
  635.             width="95">
  636.  
  637.         </el-table-column>
  638.  
  639.         <el-table-column
  640.  
  641.             label="合同期限"
  642.  
  643.             align="left"
  644.  
  645.             width="100">
  646.  
  647.           <template slot-scope="scope">
  648.  
  649.             <el-tag>{{ scope.row.contractTerm }}</el-tag>
  650.  
  651.             年
  652.  
  653.           </template>
  654.  
  655.         </el-table-column>
  656.  
  657.         <el-table-column
  658.  
  659.             label="操作"
  660.  
  661.             fixed="right"
  662.  
  663.             width="200">
  664.  
  665.           <template slot-scope="scope">
  666.  
  667.             <!-- 25-4 给编辑按钮绑定点击事件 @click="showEmpView(scope.row)" -->
  668.  
  669.             <el-button style="padding: 3px;" size="mini" @click="showEmpView(scope.row)">编辑</el-button>
  670.  
  671.             <!-- <el-button style="padding: 3px;" size="mini" type="primary" plain>查看高级资料</el-button> -->
  672.  
  673.             <!-- 24-1 删除员工 @click="deleteEmp(scope.row)" -->
  674.  
  675.             <el-button style="padding: 3px;" size="mini" type="danger" @click="deleteEmp(scope.row)">删除</el-button>
  676.  
  677.           </template>
  678.  
  679.         </el-table-column>
  680.  
  681.       </el-table>
  682.  
  683.       <!-- 10、分页 -->
  684.  
  685.       <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
  686.  
  687.         <!-- 13、@current-change="currentChange" 当前页
  689.              14、@size-change="sizeChange" 每页显示多少条 -->
  690.  
  691.         <el-pagination
  692.  
  693.             prev-text="上一页"
  694.  
  695.             next-text="下一页"
  696.  
  697.             @current-change="currentChange"
  698.  
  699.             @size-change="sizeChange"
  700.  
  701.             :page-sizes="[10,20,30,50,100]"
  702.  
  703.             layout="total, sizes, prev, pager, next, jumper"
  704.  
  705.             :total="total" background>
  706.  
  707.         </el-pagination>
  708.  
  709.       </div>
  710.  
  711.     </div>
  712.  
  713.     <!-- 23-1、开始- 添加员工弹框 -->
  714.  
  715.     <!-- 25-1 编辑员工 将添加员工弹框标题改为变量 根据条件显示是添加还是编辑 :title="title"  -->
  716.  
  717.     <el-dialog
  718.  
  719.         :title="title"
  720.  
  721.         :visible.sync="dialogVisible"
  722.  
  723.         width="80%">
  724.  
  725.       <div>
  726.  
  727.         <!-- 23-6、<el-row  <el-form -->
  728.  
  729.         <!-- 23-28 数据校验对象 :rules="empRules" ，每项属性对应 prop="posId" -->
  730.  
  731.         <el-form ref="empRef" :model="emp" :rules="empRules">
  732.  
  733.           <el-row>
  734.  
  735.             <el-col :span="6">
  736.  
  737.               <el-form-item label="姓名：" prop="name">
  738.  
  739.                 <el-input v-model="emp.name" prefix-icon="el-icon-edit" placeholder="请输入员工姓名" size="mini"
  740.  
  741.                           style="width: 150px;"></el-input>
  742.  
  743.               </el-form-item>
  744.  
  745.             </el-col>
  746.  
  747.             <el-col :span="5">
  748.  
  749.               <el-form-item label="性别：" prop="gender">
  750.  
  751.                 <el-radio-group v-model="emp.gender" style="margin-top: 8px;">
  752.  
  753.                   <el-radio label="男">男</el-radio>
  754.  
  755.                   <el-radio label="女">女</el-radio>
  756.  
  757.                 </el-radio-group>
  758.  
  759.               </el-form-item>
  760.  
  761.             </el-col>
  762.  
  763.             <el-col :span="6">
  764.  
  765.               <el-form-item label="出生日期：" prop="birthday">
  766.  
  767.                 <el-date-picker
  768.  
  769.                     v-model="emp.birthday"
  770.  
  771.                     type="date"
  772.  
  773.                     value-format="yyyy-MM-dd"
  774.  
  775.                     size="mini"
  776.  
  777.                     style="width: 150px;"
  778.  
  779.                     placeholder="出生日期">
  780.  
  781.                 </el-date-picker>
  782.  
  783.               </el-form-item>
  784.  
  785.             </el-col>
  786.  
  787.             <el-col :span="7">
  788.  
  789.               <!-- 23-10、 添加员工 给每项赋值 -->
  790.  
  791.               <el-form-item label="政治面貌：" prop="politicId">
  792.  
  793.                 <el-select v-model="emp.politicId" placeholder="请选择政治面貌" size="mini" style="width: 200px;">
  794.  
  795.                   <el-option
  796.  
  797.                       v-for="item in politicsstatus"
  798.  
  799.                       :key="item.id"
  800.  
  801.                       :label="item.name"
  802.  
  803.                       :value="item.id">
  804.  
  805.                   </el-option>
  806.  
  807.                 </el-select>
  808.  
  809.               </el-form-item>
  810.  
  811.             </el-col>
  812.  
  813.           </el-row>
  814.  
  815.           <el-row>
  816.  
  817.             <el-col :span="6">
  818.  
  819.               <el-form-item label="民族：" prop="nationId">
  820.  
  821.                 <el-select v-model="emp.nationId" placeholder="民族" size="mini" style="width: 150px;">
  822.  
  823.                   <el-option
  824.  
  825.                       v-for="item in nations"
  826.  
  827.                       :key="item.id"
  828.  
  829.                       :label="item.name"
  830.  
  831.                       :value="item.id">
  832.  
  833.                   </el-option>
  834.  
  835.                 </el-select>
  836.  
  837.               </el-form-item>
  838.  
  839.             </el-col>
  840.  
  841.             <el-col :span="5">
  842.  
  843.               <el-form-item label="籍贯：" prop="nativePlace">
  844.  
  845.                 <el-input v-model="emp.nativePlace" placeholder="籍贯" prefix-icon="el-icon-edit" size="small"
  846.  
  847.                           style="width: 120px;"></el-input>
  848.  
  849.               </el-form-item>
  850.  
  851.             </el-col>
  852.  
  853.             <el-col :span="6">
  854.  
  855.               <el-form-item label="电子邮箱：" prop="email">
  856.  
  857.                 <el-input v-model="emp.email" placeholder="请输入电子邮箱" prefix-icon="el-icon-message" size="mini"
  858.  
  859.                           style="width: 150px;"></el-input>
  860.  
  861.               </el-form-item>
  862.  
  863.             </el-col>
  864.  
  865.             <el-col :span="7">
  866.  
  867.               <el-form-item label="联系地址：" prop="address">
  868.  
  869.                 <el-input v-model="emp.address" placeholder="请输入联系地址" prefix-icon="el-icon-edit" size="mini"
  870.  
  871.                           style="width: 200px;"></el-input>
  872.  
  873.               </el-form-item>
  874.  
  875.             </el-col>
  876.  
  877.           </el-row>
  878.  
  879.           <el-row>
  880.  
  881.             <el-col :span="6">
  882.  
  883.               <el-form-item label="职位：" prop="posId">
  884.  
  885.                 <el-select v-model="emp.posId" placeholder="职位" size="mini" style="width: 150px;">
  886.  
  887.                   <el-option
  888.  
  889.                       v-for="item in positions"
  890.  
  891.                       :key="item.id"
  892.  
  893.                       :label="item.name"
  894.  
  895.                       :value="item.id">
  896.  
  897.                   </el-option>
  898.  
  899.                 </el-select>
  900.  
  901.               </el-form-item>
  902.  
  903.             </el-col>
  904.  
  905.             <el-col :span="5">
  906.  
  907.               <el-form-item label="职称：" prop="jobLevelId">
  908.  
  909.                 <el-select v-model="emp.jobLevelId" placeholder="职称" size="mini" style="width: 150px;">
  910.  
  911.                   <el-option
  912.  
  913.                       v-for="item in joblevels"
  914.  
  915.                       :key="item.id"
  916.  
  917.                       :label="item.name"
  918.  
  919.                       :value="item.id">
  920.  
  921.                   </el-option>
  922.  
  923.                 </el-select>
  924.  
  925.               </el-form-item>
  926.  
  927.             </el-col>
  928.  
  929.             <el-col :span="6">
  930.  
  931.               <!-- 23-15  -->
  932.  
  933.               <el-form-item label="所属部门：" prop="departmentId">
  934.  
  935.                 <!-- 23-17 manual 手动弹出框 -->
  936.  
  937.                 <el-popover
  938.  
  939.                     placement="bottom"
  940.  
  941.                     title="请选择部门"
  942.  
  943.                     width="200"
  944.  
  945.                     trigger="manual"
  946.  
  947.                     v-model="visible">
  948.  
  949.                   <!-- 23-20 添加树形控件 default-expand-all  是否默认展开所有节点 ，节点点击事件 @node-click="handleNodeClick" -->
  950.  
  951.                   <el-tree :data="allDeps"
  952.  
  953.                            :props="defaultProps"
  954.  
  955.                            default-expand-all
  956.  
  957.                            @node-click="handleNodeClick"></el-tree>
  958.  
  959.                   <!-- node-click 节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 -->
  960.  
  961.                   <!-- 自定义点击事件 -->
  962.  
  963.                   <div slot="reference"
  964.  
  965.                        style="width:150px;display: inline-flex;
  967.                        border-radius: 5px;border: 1px solid #dedede;height: 28px;cursor: pointer;align-items: center;
  969.                        font-size: 12px;padding-left: 8px;box-sizing: border-box;"
  970.  
  971.                        @click="showDepView">{{ inputDepName }}
  972.  
  973.                   </div><!-- 23-25 回显数据 {{inputDepName}} -->
  974.  
  975.                 </el-popover>
  976.  
  977.               </el-form-item>
  978.  
  979.             </el-col>
  980.  
  981.             <el-col :span="7">
  982.  
  983.               <el-form-item label="电话号码：" prop="phone">
  984.  
  985.                 <el-input v-model="emp.phone" placeholder="请输入电话号码" size="mini" style="width: 200px;"
  986.  
  987.                           prefix-icon="el-icon-phone"></el-input>
  988.  
  989.               </el-form-item>
  990.  
  991.             </el-col>
  992.  
  993.           </el-row>
  994.  
  995.           <el-row>
  996.  
  997.             <el-col :span="6">
  998.  
  999.               <el-form-item label="工号：" prop="workId">
  1000.  
  1001.                 <el-input v-model="emp.workId" placeholder="请输入工号" size="mini" style="width: 150px;"
  1002.  
  1003.                           prefix-icon="el-icon-edit" disabled></el-input>
  1004.  
  1005.               </el-form-item>
  1006.  
  1007.             </el-col>
  1008.  
  1009.             <el-col :span="5">
  1010.  
  1011.               <!-- 23-14 数据在 data 中写死的 -->
  1012.  
  1013.               <el-form-item label="学历：" prop="tiptopDegree">
  1014.  
  1015.                 <el-select v-model="emp.tiptopDegree" placeholder="职称" size="mini" style="width: 150px;">
  1016.  
  1017.                   <el-option
  1018.  
  1019.                       v-for="item in tiptopDegrees"
  1020.  
  1021.                       :key="item"
  1022.  
  1023.                       :label="item"
  1024.  
  1025.                       :value="item">
  1026.  
  1027.                   </el-option>
  1028.  
  1029.                 </el-select>
  1030.  
  1031.               </el-form-item>
  1032.  
  1033.             </el-col>
  1034.  
  1035.             <el-col :span="6">
  1036.  
  1037.               <el-form-item label="毕业院校：" prop="school">
  1038.  
  1039.                 <el-input v-model="emp.school" placeholder="请输入学校" size="mini" style="width: 150px;"
  1040.  
  1041.                           prefix-icon="el-icon-edit"></el-input>
  1042.  
  1043.               </el-form-item>
  1044.  
  1045.             </el-col>
  1046.  
  1047.             <el-col :span="7">
  1048.  
  1049.               <el-form-item label="专业名称：" prop="specialty">
  1050.  
  1051.                 <el-input v-model="emp.specialty" placeholder="请输入专业名称" size="mini" style="width: 200px;"
  1052.  
  1053.                           prefix-icon="el-icon-edit"></el-input>
  1054.  
  1055.               </el-form-item>
  1056.  
  1057.             </el-col>
  1058.  
  1059.           </el-row>
  1060.  
  1061.           <el-row>
  1062.  
  1063.             <el-col :span="6">
  1064.  
  1065.               <el-form-item label="入职日期：" prop="beginDate">
  1066.  
  1067.                 <el-date-picker
  1068.  
  1069.                     v-model="emp.beginDate"
  1070.  
  1071.                     type="date"
  1072.  
  1073.                     value-format="yyyy-MM-dd"
  1074.  
  1075.                     size="mini"
  1076.  
  1077.                     style="width: 120px;"
  1078.  
  1079.                     placeholder="入职日期">
  1080.  
  1081.                 </el-date-picker>
  1082.  
  1083.               </el-form-item>
  1084.  
  1085.             </el-col>
  1086.  
  1087.             <el-col :span="5">
  1088.  
  1089.               <el-form-item label="转正日期：" prop="conversionTime">
  1090.  
  1091.                 <el-date-picker
  1092.  
  1093.                     v-model="emp.conversionTime"
  1094.  
  1095.                     type="date"
  1096.  
  1097.                     value-format="yyyy-MM-dd"
  1098.  
  1099.                     size="mini"
  1100.  
  1101.                     style="width: 120px;"
  1102.  
  1103.                     placeholder="转正日期">
  1104.  
  1105.                 </el-date-picker>
  1106.  
  1107.               </el-form-item>
  1108.  
  1109.             </el-col>
  1110.  
  1111.             <el-col :span="6">
  1112.  
  1113.               <el-form-item label="合同起始日期：" prop="beginContract">
  1114.  
  1115.                 <el-date-picker
  1116.  
  1117.                     v-model="emp.beginContract"
  1118.  
  1119.                     type="date"
  1120.  
  1121.                     value-format="yyyy-MM-dd"
  1122.  
  1123.                     size="mini"
  1124.  
  1125.                     style="width: 135px;"
  1126.  
  1127.                     placeholder="合同起始日期">
  1128.  
  1129.                 </el-date-picker>
  1130.  
  1131.               </el-form-item>
  1132.  
  1133.             </el-col>
  1134.  
  1135.             <el-col :span="7">
  1136.  
  1137.               <el-form-item label="合同截止日期：" prop="endContract">
  1138.  
  1139.                 <el-date-picker
  1140.  
  1141.                     v-model="emp.endContract"
  1142.  
  1143.                     type="date"
  1144.  
  1145.                     value-format="yyyy-MM-dd"
  1146.  
  1147.                     size="mini"
  1148.  
  1149.                     style="width: 170px;"
  1150.  
  1151.                     placeholder="合同截止日期">
  1152.  
  1153.                 </el-date-picker>
  1154.  
  1155.               </el-form-item>
  1156.  
  1157.             </el-col>
  1158.  
  1159.           </el-row>
  1160.  
  1161.           <el-row>
  1162.  
  1163.             <el-col :span="8">
  1164.  
  1165.               <el-form-item label="身份证号码：" prop="idCard">
  1166.  
  1167.                 <el-input v-model="emp.idCard" placeholder="请输入身份证号码"
  1168.  
  1169.                           size="mini" prefix-icon="el-icon-edit" style="width: 180px;"></el-input>
  1170.  
  1171.               </el-form-item>
  1172.  
  1173.             </el-col>
  1174.  
  1175.             <el-col :span="8">
  1176.  
  1177.               <el-form-item label="聘用形式：" prop="engageForm">
  1178.  
  1179.                 <el-radio-group v-model="emp.engageForm" style="margin-top: 8px;">
  1180.  
  1181.                   <el-radio label="劳动合同">劳动合同</el-radio>
  1182.  
  1183.                   <el-radio label="劳务合同">劳务合同</el-radio>
  1184.  
  1185.                 </el-radio-group>
  1186.  
  1187.               </el-form-item>
  1188.  
  1189.             </el-col>
  1190.  
  1191.             <el-col :span="8">
  1192.  
  1193.               <el-form-item label="婚姻状况：" prop="wedlock">
  1194.  
  1195.                 <el-radio-group v-model="emp.wedlock" style="margin-top: 8px;">
  1196.  
  1197.                   <el-radio label="未婚">未婚</el-radio>
  1198.  
  1199.                   <el-radio label="已婚">已婚</el-radio>
  1200.  
  1201.                   <el-radio label="离异">离异</el-radio>
  1202.  
  1203.                 </el-radio-group>
  1204.  
  1205.               </el-form-item>
  1206.  
  1207.             </el-col>
  1208.  
  1209.           </el-row>
  1210.  
  1211.         </el-form>
  1212.  
  1213.       </div>
  1214.  
  1215.       <span slot="footer" class="dialog-footer">
  1216.  
  1217.         <el-button @click="dialogVisible = false">取 消</el-button>
  1218.  
  1219.         <!-- 23-26 @click="doAddEmp"-->
  1220.  
  1221.         <el-button type="primary" @click="doAddEmp">确 定</el-button>
  1222.  
  1223.       </span>
  1224.  
  1225.     </el-dialog>
  1226.  
  1227.   </div>
  1228.  
  1229. </template>
  1230.  
  1231. <script>
  1232.  
  1233. export default {
  1234.  
  1235.   name: "EmpBasic",
  1236.  
  1237.   data() {
  1238.  
  1239.     return {
  1240.  
  1241.       searchValue: { // 30-1 高级搜索 条件对象
  1242.  
  1243.         politicId: null, // 政治面貌
  1244.  
  1245.         nationId: null, // 民族
  1246.  
  1247.         posId: null, // 职位
  1248.  
  1249.         jobLevelId: null, // 职称
  1250.  
  1251.         engageForm: '', // 聘用形式
  1252.  
  1253.         departmentId: null, // 部门 id
  1254.  
  1255.         beginDateScope: null // 入职日期范围
  1256.  
  1257.       },
  1258.  
  1259.       showAdvanceSearchVisible: false, // 28-2 高级搜索框 动态效果
  1260.  
  1261.       headers: { // 27-12 定义请求头
  1262.  
  1263.         Authorization: window.sessionStorage.getItem('tokenStr')
  1264.  
  1265.       },
  1266.  
  1267.       importDataDisabled: false, // 27-9 导入按钮 默认不禁用
  1268.  
  1269.       importDataBtnText: '导入数据', // 27-2 导入数据
  1270.  
  1271.       importDataBtnIcon: 'el-icon-upload2', // 27-2 导入数据
  1272.  
  1273.       title: '', // 25-2 添加编辑员工弹框动态标题
  1274.  
  1275.       emps: [], // 3、获取所有员工（分页）
  1276.  
  1277.       loading: false, // 7、添加 loading
  1278.  
  1279.       total: 0, // 11 分页总条数
  1280.  
  1281.       currentPage: 1, // 14、默认显示第1页(currentPage 后端字段）
  1282.  
  1283.       size: 10, // 15、默认每页显示 10 条
  1284.  
  1285.       empName: '', // 18、搜索
  1286.  
  1287.       dialogVisible: false, // 23-2、添加员工弹框
  1288.  
  1289.       nations: [],   // 23-7 添加员工 民族
  1290.  
  1291.       joblevels: [], // 23-7 职称
  1292.  
  1293.       politicsstatus: [], // 23-7 政治面貌
  1294.  
  1295.       positions: [],  // 23-7 职位
  1296.  
  1297.       department: [], // 部门
  1298.  
  1299.       // 23-13、学历
  1300.  
  1301.       tiptopDegrees: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其它'],
  1302.  
  1303.       // 23-5、添加员工
  1304.  
  1305.       emp: {
  1306.  
  1307.         id: null,
  1308.  
  1309.         name: '',
  1310.  
  1311.         gender: '',
  1312.  
  1313.         birthday: '',
  1314.  
  1315.         idCard: '',
  1316.  
  1317.         wedlock: '',
  1318.  
  1319.         nationId: null,
  1320.  
  1321.         nativePlace: '',
  1322.  
  1323.         politicId: null,
  1324.  
  1325.         email: '',
  1326.  
  1327.         phone: '',
  1328.  
  1329.         address: '',
  1330.  
  1331.         departmentId: null,
  1332.  
  1333.         jobLevelId: null,
  1334.  
  1335.         posId: null,
  1336.  
  1337.         engageForm: '',
  1338.  
  1339.         tiptopDegree: '',
  1340.  
  1341.         specialty: '',
  1342.  
  1343.         school: '',
  1344.  
  1345.         beginDate: '',
  1346.  
  1347.         workState: '在职',
  1348.  
  1349.         workId: '',
  1350.  
  1351.         contractTerm: null,
  1352.  
  1353.         conversionTime: '',
  1354.  
  1355.         notworkDate: null,
  1356.  
  1357.         beginContract: '',
  1358.  
  1359.         endContract: '',
  1360.  
  1361.         workAge: null,
  1362.  
  1363.         salaryId: null
  1364.  
  1365.       },
  1366.  
  1367.       visible: false, // 23-18 弹出框
  1368.  
  1369.       visible2: false, // 30-5 高级搜索 部门
  1370.  
  1371.       // 23-21 树形控件
  1372.  
  1373.       defaultProps: {
  1374.  
  1375.         children: 'children',
  1376.  
  1377.         label: 'name'
  1378.  
  1379.       },
  1380.  
  1381.       allDeps: [], // 23-21 树形控件 绑定 所属部门 数据对象
  1382.  
  1383.       inputDepName: '',// 23-23 回显部门数据
  1384.  
  1385.       // 23-30 表单数据校验
  1386.  
  1387.       empRules: {
  1388.  
  1389.         name: [{required: true, message: '请输入员工名', trigger: 'blur'}],
  1390.  
  1391.         gender: [{required: true, message: '请输入员工性别', trigger: 'blur'}],
  1392.  
  1393.         birthday: [{required: true, message: '请输入出生日期', trigger: 'blur'}],
  1394.  
  1395.         idCard: [{required: true, message: '请输入身份证号码', trigger: 'blur'},
  1396.  
  1397.           {
  1398.  
  1399.             pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
  1400.  
  1401.             message: '身份证号码不正确', trigger: 'blur'
  1402.  
  1403.           }],
  1404.  
  1405.         wedlock: [{required: true, message: '请输入婚姻状况', trigger: 'blur'}],
  1406.  
  1407.         nationId: [{required: true, message: '请输入民族', trigger: 'blur'}],
  1408.  
  1409.         nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
  1410.  
  1411.         politicId: [{required: true, message: '请输入政治面貌', trigger: 'blur'}],
  1412.  
  1413.         email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'},
  1414.  
  1415.           {type: 'email', message: '邮箱地址格式不正确', trigger: 'blur'}],
  1416.  
  1417.         phone: [{required: true, message: '请输入电话号码', trigger: 'blur'},
  1418.  
  1419.           {
  1420.  
  1421.             pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
  1422.  
  1423.             message: '请输入合法手机号码', trigger: 'blur'
  1424.  
  1425.           }],
  1426.  
  1427.         address: [{required: true, message: '请输入地址', trigger: 'blur'}],
  1428.  
  1429.         departmentId: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
  1430.  
  1431.         jobLevelId: [{required: true, message: '请输入职称', trigger: 'blur'}],
  1432.  
  1433.         posId: [{required: true, message: '请输入职位', trigger: 'blur'}],
  1434.  
  1435.         engageForm: [{required: true, message: '请输入聘用形式', trigger: 'blur'}],
  1436.  
  1437.         tiptopDegree: [{required: true, message: '请输入学历', trigger: 'blur'}],
  1438.  
  1439.         specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
  1440.  
  1441.         school: [{required: true, message: '请输入毕业院校', trigger: 'blur'}],
  1442.  
  1443.         beginDate: [{required: true, message: '请输入入职日期', trigger: 'blur'}],
  1444.  
  1445.         workState: [{required: true, message: '请输入工作状态', trigger: 'blur'}],
  1446.  
  1447.         workId: [{required: true, message: '请输入工号', trigger: 'blur'}],
  1448.  
  1449.         contractTerm: [{required: true, message: '请输入合同期限', trigger: 'blur'}],
  1450.  
  1451.         conversionTime: [{required: true, message: '请输入转正日期', trigger: 'blur'}],
  1452.  
  1453.         notworkDate: [{required: true, message: '请输入离职日期', trigger: 'blur'}],
  1454.  
  1455.         beginContract: [{required: true, message: '请输入合同起始日期', trigger: 'blur'}],
  1456.  
  1457.         endContract: [{required: true, message: '请输入合同结束日期', trigger: 'blur'}],
  1458.  
  1459.         workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}]
  1460.  
  1461.       }
  1462.  
  1463.     }
  1464.  
  1465.   },
  1466.  
  1467.   mounted() {
  1468.  
  1469.     this.initEmps() // 5、获取所有员工（分页）
  1470.  
  1471.     this.initData() // 23-9 添加员工
  1472.  
  1473.     this.initPositions() // 23-12 获取职位
  1474.  
  1475.   },
  1476.  
  1477.   methods: {
  1478.  
  1479.     // 27-6 数据导入成功 恢复原来的图标和状态
  1480.  
  1481.     onSuccess() {
  1482.  
  1483.       this.importDataBtnIcon = 'el-icon-upload2'
  1484.  
  1485.       this.importDataBtnText = '导入数据'
  1486.  
  1487.       this.importDataDisabled = false // 29-10 不禁用导入按钮
  1488.  
  1489.       this.initEmps()
  1490.  
  1491.     },
  1492.  
  1493.     // 27-7 数据导入失败 恢复原来的图标和状态
  1494.  
  1495.     onError() {
  1496.  
  1497.       this.importDataBtnIcon = 'el-icon-upload2'
  1498.  
  1499.       this.importDataBtnText = '导入数据'
  1500.  
  1501.       this.importDataDisabled = false // 29-10 不禁用导入按钮
  1502.  
  1503.     },
  1504.  
  1505.     // 27-4、导入数据 改变图标和添加 loading 状态
  1506.  
  1507.     beforeUpload() {
  1508.  
  1509.       this.importDataBtnIcon = 'el-icon-loading'
  1510.  
  1511.       this.importDataBtnText = '正在导入'
  1512.  
  1513.       this.importDataDisabled = true // 29-10 禁用导入按钮
  1514.  
  1515.     },
  1516.  
  1517.     // 26-2 下载请求
  1518.  
  1519.     exportData() {
  1520.  
  1521.       this.downloadRequest('/employee/basic/export')
  1522.  
  1523.     },
  1524.  
  1525.     // 25-5 编辑员工按钮 点击事件
  1526.  
  1527.     showEmpView(data) {
  1528.  
  1529.       this.title = '编辑员工信息'
  1530.  
  1531.       this.emp = data // 回显数据
  1532.  
  1533.       this.inputDepName = data.department.name // 25-7 回显部门信息
  1534.  
  1535.       this.initPositions() // 25-9 初始化职位信息
  1536.  
  1537.       this.dialogVisible = true
  1538.  
  1539.     },
  1540.  
  1541.     // 24-2 删除员工
  1542.  
  1543.     deleteEmp(data) {
  1544.  
  1545.       this.$confirm('此操作将永久删除该员工' + data.name + ', 是否继续?', '提示', {
  1546.  
  1547.         confirmButtonText: '确定',
  1548.  
  1549.         cancelButtonText: '取消',
  1550.  
  1551.         type: 'warning'
  1552.  
  1553.       }).then(() => {
  1554.  
  1555.         this.deleteRequest('/employee/basic/' + data.id).then(resp => {
  1556.  
  1557.           if (resp) {
  1558.  
  1559.             this.initEmps()
  1560.  
  1561.           }
  1562.  
  1563.         })
  1564.  
  1565.       }).catch(() => {
  1566.  
  1567.         this.$message({
  1568.  
  1569.           type: 'info',
  1570.  
  1571.           message: '已取消删除'
  1572.  
  1573.         });
  1574.  
  1575.       });
  1576.  
  1577.     },
  1578.  
  1579.     // 23-27 确定添加员工
  1580.  
  1581.     // 25-10 添加或编辑员工 有id编辑员工 没有id添加员工
  1582.  
  1583.     // 添加和编辑这里就请求方式不一样 putRequest postRequest ，其它的都一样
  1584.  
  1585.     doAddEmp() {
  1586.  
  1587.       if (this.emp.id) {
  1588.  
  1589.         // 有 id 编辑员工
  1590.  
  1591.         this.$refs['empRef'].validate(valid => {
  1592.  
  1593.           if (valid) {
  1594.  
  1595.             this.putRequest('/employee/basic/', this.emp).then(resp => {
  1596.  
  1597.               if (resp) {
  1598.  
  1599.                 this.dialogVisible = false
  1600.  
  1601.                 this.initEmps()
  1602.  
  1603.               }
  1604.  
  1605.             })
  1606.  
  1607.           }
  1608.  
  1609.         })
  1610.  
  1611.       } else {
  1612.  
  1613.         // 没有id 添加员工
  1614.  
  1615.         // empRef 表单中定义的引用对象 ref="empRef"
  1616.  
  1617.         this.$refs['empRef'].validate(valid => {
  1618.  
  1619.           if (valid) {
  1620.  
  1621.             this.postRequest('/employee/basic/', this.emp).then(resp => {
  1622.  
  1623.               if (resp) {
  1624.  
  1625.                 this.dialogVisible = false
  1626.  
  1627.                 this.initEmps()
  1628.  
  1629.               }
  1630.  
  1631.             })
  1632.  
  1633.           }
  1634.  
  1635.         })
  1636.  
  1637.       }
  1638.  
  1639.     },
  1640.  
  1641.     // 30-7 高级搜索 部门点击事件
  1642.  
  1643.     searchHandleNodeClick(data) {
  1644.  
  1645.       this.inputDepName = data.name
  1646.  
  1647.       this.searchValue.departmentId = data.id
  1648.  
  1649.       this.visible2 = !this.visible2 // 弹框
  1650.  
  1651.     },
  1652.  
  1653.     // 23-22、24 树控件节点点击事件
  1654.  
  1655.     handleNodeClick(data) {
  1656.  
  1657.       this.inputDepName = data.name
  1658.  
  1659.       this.emp.departmentId = data.id
  1660.  
  1661.       this.visible = !this.visible // 弹框
  1662.  
  1663.     },
  1664.  
  1665.     // 30-9 高级搜索 部门弹框
  1666.  
  1667.     showDepView2() {
  1668.  
  1669.       this.visible2 = !this.visible2
  1670.  
  1671.     },
  1672.  
  1673.     // 23-16 添加员工 所属部门
  1674.  
  1675.     showDepView() {
  1676.  
  1677.       this.visible = !this.visible // 23-19 弹出框
  1678.  
  1679.     },
  1680.  
  1681.     // 23-13 添加员工 获取最大号
  1682.  
  1683.     getMaxworkId() {
  1684.  
  1685.       this.getRequest('/employee/basic/maxWorkID').then(resp => {
  1686.  
  1687.         if (resp) {
  1688.  
  1689.           this.emp.workId = resp.obj
  1690.  
  1691.         }
  1692.  
  1693.       })
  1694.  
  1695.     },
  1696.  
  1697.     // 23-11、 添加员工 获取职位 有可能变动 打开对话框的时候调用此方法
  1698.  
  1699.     initPositions() {
  1700.  
  1701.       this.getRequest('/employee/basic/Positions').then(resp => {
  1702.  
  1703.         if (resp) {
  1704.  
  1705.           this.positions = resp
  1706.  
  1707.         }
  1708.  
  1709.       })
  1710.  
  1711.     },
  1712.  
  1713.     // 23-8、添加员工 不怎么变动的数据。放 sessionStorage ，就不用怎么去查
  1714.  
  1715.     initData() {
  1716.  
  1717.       // 获取民族数据:先从 sessionStorage 里取，取不到再调用接口获取数据
  1718.  
  1719.       if (!window.sessionStorage.getItem("nations")) {
  1720.  
  1721.         this.getRequest('/employee/basic/nations').then(resp => {
  1722.  
  1723.           this.nations = resp
  1724.  
  1725.           // 存到 sessionStorage 里,把对象转字符串
  1726.  
  1727.           window.sessionStorage.setItem('nations', JSON.stringify(resp))
  1728.  
  1729.         })
  1730.  
  1731.       } else {
  1732.  
  1733.         // 从 sessionStorage 获取，字符串转对象
  1734.  
  1735.         this.nations = JSON.parse(window.sessionStorage.getItem('nations'))
  1736.  
  1737.       }
  1738.  
  1739.       // 获取职称
  1740.  
  1741.       if (!window.sessionStorage.getItem('joblevels')) {
  1742.  
  1743.         this.getRequest('/employee/basic/joblevels').then(resp => {
  1744.  
  1745.           if (resp) {
  1746.  
  1747.             this.joblevels = resp
  1748.  
  1749.             window.sessionStorage.setItem('joblevels', JSON.stringify(resp))
  1750.  
  1751.           }
  1752.  
  1753.         })
  1754.  
  1755.       } else {
  1756.  
  1757.         // 从 sessionStorage 获取，字符串转对象
  1758.  
  1759.         this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'))
  1760.  
  1761.       }
  1762.  
  1763.       // 获取政治面貌
  1764.  
  1765.       if (!window.sessionStorage.getItem('politicsstatus')) {
  1766.  
  1767.         this.getRequest('/employee/basic/politicsStatus').then(resp => {
  1768.  
  1769.           if (resp) {
  1770.  
  1771.             this.politicsstatus = resp
  1772.  
  1773.             window.sessionStorage.setItem('politicsstatus', JSON.stringify(resp))
  1774.  
  1775.           }
  1776.  
  1777.         })
  1778.  
  1779.       } else {
  1780.  
  1781.         // 从 sessionStorage 获取，字符串转对象
  1782.  
  1783.         this.politicsstatus = JSON.parse(window.sessionStorage.getItem('politicsstatus'))
  1784.  
  1785.       }
  1786.  
  1787.       // 23-22 树形控件 绑定 所属部门 数据对象
  1788.  
  1789.       if (!window.sessionStorage.getItem('allDeps')) {
  1790.  
  1791.         this.getRequest('/employee/basic/deps').then(resp => {
  1792.  
  1793.           if (resp) {
  1794.  
  1795.             this.allDeps = resp
  1796.  
  1797.             window.sessionStorage.setItem('allDeps', JSON.parse(resp))
  1798.  
  1799.           }
  1800.  
  1801.         })
  1802.  
  1803.       } else {
  1804.  
  1805.         this.allDeps = window.sessionStorage.getItem('allDeps')
  1806.  
  1807.       }
  1808.  
  1809.     },
  1810.  
  1811.     // 23-4、添加员点击事件
  1812.  
  1813.     showAddEmpView() {
  1814.  
  1815.       // 25-6 清空表单
  1816.  
  1817.       this.emp = {
  1818.  
  1819.         id: null,
  1820.  
  1821.         name: '',
  1822.  
  1823.         gender: '',
  1824.  
  1825.         birthday: '',
  1826.  
  1827.         idCard: '',
  1828.  
  1829.         wedlock: '',
  1830.  
  1831.         nationId: null,
  1832.  
  1833.         nativePlace: '',
  1834.  
  1835.         politicId: null,
  1836.  
  1837.         email: '',
  1838.  
  1839.         phone: '',
  1840.  
  1841.         address: '',
  1842.  
  1843.         departmentId: null,
  1844.  
  1845.         jobLevelId: null,
  1846.  
  1847.         posId: null,
  1848.  
  1849.         engageForm: '',
  1850.  
  1851.         tiptopDegree: '',
  1852.  
  1853.         specialty: '',
  1854.  
  1855.         school: '',
  1856.  
  1857.         beginDate: '',
  1858.  
  1859.         workState: '在职',
  1860.  
  1861.         workId: '',
  1862.  
  1863.         contractTerm: null,
  1864.  
  1865.         conversionTime: '',
  1866.  
  1867.         notworkDate: null,
  1868.  
  1869.         beginContract: '',
  1870.  
  1871.         endContract: '',
  1872.  
  1873.         workAge: null,
  1874.  
  1875.         salaryId: null
  1876.  
  1877.       }
  1878.  
  1879.       this.inputDepName = '' // 25-8 清空部门信息
  1880.  
  1881.       this.title = '添加员工' // 25-3 点击添加员工按钮时，弹出框标题为 添加员工
  1882.  
  1883.       this.getMaxworkId() // 23-14 获取最大工号
  1884.  
  1885.       this.initPositions() // 23-12 获取职位
  1886.  
  1887.       this.dialogVisible = true
  1888.  
  1889.     },
  1890.  
  1891.     // 15、分页 每页显示多少条 默认会把 size 传进来
  1892.  
  1893.     sizeChange(size) {
  1894.  
  1895.       this.size = size
  1896.  
  1897.       this.initEmps()
  1898.  
  1899.     },
  1900.  
  1901.     // 13、分页-当前页-currentPage 点击的时候自己会带过来
  1902.  
  1903.     currentChange(currentPage) {
  1904.  
  1905.       this.currentPage = currentPage // 16
  1906.  
  1907.       this.initEmps() // 18、调用方法
  1908.  
  1909.     },
  1910.  
  1911.     // 4、获取所有员工（分页）
  1912.  
  1913.     initEmps(type) {
  1914.  
  1915.       this.loading = true // 8、添加 loading
  1916.  
  1917.       // 30-11 定义高级搜索 url
  1918.  
  1919.       let url = '/employee/basic/?currentPage=' + this.currentPage + '&size=' + this.size
  1920.  
  1921.       if (type && type === 'advanced') { // 说明是高级搜索
  1922.  
  1923.         if (this.searchValue.politicId) {
  1924.  
  1925.           url += '&politicId=' + this.searchValue.politicId
  1926.  
  1927.         }
  1928.  
  1929.         if (this.searchValue.nationId) {
  1930.  
  1931.           url += '&nationId=' + this.searchValue.nationId
  1932.  
  1933.         }
  1934.  
  1935.         if (this.searchValue.posId) {
  1936.  
  1937.           url += '&posId=' + this.searchValue.posId
  1938.  
  1939.         }
  1940.  
  1941.         if (this.searchValue.jobLevelId) {
  1942.  
  1943.           url += '&jobLevelId=' + this.searchValue.jobLevelId
  1944.  
  1945.         }
  1946.  
  1947.         if (this.searchValue.engageForm) {
  1948.  
  1949.           url += '&engageForm=' + this.searchValue.engageForm
  1950.  
  1951.         }
  1952.  
  1953.         if (this.searchValue.departmentId) {
  1954.  
  1955.           url += '&departmentId=' + this.searchValue.departmentId
  1956.  
  1957.         }
  1958.  
  1959.         if (this.searchValue.beginDateScope) {
  1960.  
  1961.           url += '&beginDateScope=' + this.searchValue.beginDateScope
  1962.  
  1963.         }
  1964.  
  1965.       } else {
  1966.  
  1967.         url += '&name=' + this.empName
  1968.  
  1969.       }
  1970.  
  1971.       // 17、添加分页参数 ?currentPage='+this.currentPage+'&size='+this.size
  1972.  
  1973.       // 19、添加用户名搜索参数 +'&name='+this.empName,传参 根据条件搜索，不传参查询所有
  1974.  
  1975.       this.getRequest(url).then(resp => {
  1976.  
  1977.         // this.getRequest('/employee/basic/').then(resp => {
  1978.  
  1979.         this.loading = false // 9、关闭 loading
  1980.  
  1981.         if (resp) {
  1982.  
  1983.           this.emps = resp.data
  1984.  
  1985.           this.total = resp.total // 12、分页
  1986.  
  1987.         }
  1988.  
  1989.       });
  1990.  
  1991.     }
  1992.  
  1993.   }
  1994.  
  1995. }
  1996.  
  1997. </script>
  1998.  
  1999. <style>
  2000.  
  2001. /*28-7 展开收起条件搜索框动画样式 */
  2002.  
  2003. /* 可以设置不同的进入和离开动画 */
  2004.  
  2005. /* 设置持续时间和动画函数 */
  2006.  
  2007. .slide-fade-enter-active {
  2008.  
  2009.   transition: all .8s ease;
  2010.  
  2011. }
  2012.  
  2013. .slide-fade-leave-active {
  2014.  
  2015.   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  2016.  
  2017. }
  2018.  
  2019. .slide-fade-enter, .slide-fade-leave-to
  2020.  
  2021.   /* .slide-fade-leave-active for below version 2.1.8 */
  2022.  
  2023. {
  2024.  
  2025.   transform: translateX(10px);
  2026.  
  2027.   opacity: 0;
  2028.  
  2029. }
  2030.  
  2031. </style>

十、工资账套管理

树形结构

 SalSob.vue

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <!-- 1-1 绘制表格 -->
  6.  
  7.     <div style="display: flex;justify-content: space-between;">
  8.  
  9.       <!-- 2-3 @click="showAddSalaryView" 点击打开 添加工资账套对话框 -->
  10.  
  11.       <el-button type="primary" icon="el-icon-plus" size="mini" @click="showAddSalaryView">添加工资账套</el-button>
  12.  
  13.       <!-- 5-3 刷新功能 直接绑定点击事件 调用获取所有数据方法 -->
  14.  
  15.       <el-button type="success" icon="el-icon-refresh" size="mini" @click="initSalaries"></el-button>
  16.  
  17.     </div>
  18.  
  19.     <div style="margin-top: 10px;">
  20.  
  21.       <el-table
  22.  
  23.           :data="salaries"
  24.  
  25.           stripe
  26.  
  27.           border>
  28.  
  29.         <!-- 多选框 type="selection" -->
  30.  
  31.         <el-table-column
  32.  
  33.             type="selection"
  34.  
  35.             width="40">
  36.  
  37.         </el-table-column>
  38.  
  39.         <el-table-column
  40.  
  41.             prop="name"
  42.  
  43.             label="账套名称"
  44.  
  45.             width="120">
  46.  
  47.         </el-table-column>
  48.  
  49.         <el-table-column
  50.  
  51.             prop="basicSalary"
  52.  
  53.             label="基本工资"
  54.  
  55.             width="70">
  56.  
  57.         </el-table-column>
  58.  
  59.         <el-table-column
  60.  
  61.             prop="trafficSalary"
  62.  
  63.             label="交通补助"
  64.  
  65.             width="70">
  66.  
  67.         </el-table-column>
  68.  
  69.         <el-table-column
  70.  
  71.             prop="lunchSalary"
  72.  
  73.             label="午餐补助"
  74.  
  75.             width="70">
  76.  
  77.         </el-table-column>
  78.  
  79.         <el-table-column
  80.  
  81.             prop="bonus"
  82.  
  83.             label="奖金"
  84.  
  85.             width="70">
  86.  
  87.         </el-table-column>
  88.  
  89.         <el-table-column
  90.  
  91.             prop="createDate"
  92.  
  93.             label="启用时间"
  94.  
  95.             width="100">
  96.  
  97.         </el-table-column>
  98.  
  99.         <!-- 多级表头：el-table-column 里面嵌套 el-table-column，就可以实现多级表头  -->
  100.  
  101.         <el-table-column
  102.  
  103.             label="养老金"
  104.  
  105.             align="center">
  106.  
  107.           <el-table-column
  108.  
  109.               prop="pensionPer"
  110.  
  111.               label="比率"
  112.  
  113.               width="70">
  114.  
  115.           </el-table-column>
  116.  
  117.           <el-table-column
  118.  
  119.               prop="pensionBase"
  120.  
  121.               label="基数"
  122.  
  123.               width="70">
  124.  
  125.           </el-table-column>
  126.  
  127.         </el-table-column>
  128.  
  129.         <!-- 多级表头 -->
  130.  
  131.         <el-table-column
  132.  
  133.             label="医疗保险"
  134.  
  135.             align="center">
  136.  
  137.           <el-table-column
  138.  
  139.               prop="medicalPer"
  140.  
  141.               label="比率"
  142.  
  143.               width="70">
  144.  
  145.           </el-table-column>
  146.  
  147.           <el-table-column
  148.  
  149.               prop="medicalBase"
  150.  
  151.               label="基数"
  152.  
  153.               width="70">
  154.  
  155.           </el-table-column>
  156.  
  157.         </el-table-column>
  158.  
  159.         <!-- 多级表头 -->
  160.  
  161.         <el-table-column
  162.  
  163.             label="公积金"
  164.  
  165.             align="center">
  166.  
  167.           <el-table-column
  168.  
  169.               prop="accumulationFundPer"
  170.  
  171.               label="比率"
  172.  
  173.               width="70">
  174.  
  175.           </el-table-column>
  176.  
  177.           <el-table-column
  178.  
  179.               prop="accumulationFundBase"
  180.  
  181.               label="基数"
  182.  
  183.               width="70">
  184.  
  185.           </el-table-column>
  186.  
  187.         </el-table-column>
  188.  
  189.         <el-table-column
  190.  
  191.             label="操作">
  192.  
  193.           <!-- 5-1 删除工资账套 拿到当前行数据 绑定点击事件 传行数据-->
  194.  
  195.           <template slot-scope="scope">
  196.  
  197.             <!-- 6-4 @click="showEditSalaryView(scope.row)">编辑  -->
  198.  
  199.             <el-button type="primary" size="mini" @click="showEditSalaryView(scope.row)">编辑</el-button>
  200.  
  201.             <el-button type="danger" size="mini" @click="deleteSalary(scope.row)">删除</el-button>
  202.  
  203.           </template>
  204.  
  205.         </el-table-column>
  206.  
  207.       </el-table>
  208.  
  209.     </div>
  210.  
  211.     <!-- 2-1 添加工资账套对话框 -->
  212.  
  213.     <!-- 6-2 把标题变成属性 -->
  214.  
  215.     <el-dialog
  216.  
  217.         :title="dialogTitle"
  218.  
  219.         :visible.sync="dialogVisible"
  220.  
  221.         width="50%">
  222.  
  223.       <!-- 3-8 调整样式 -->
  224.  
  225.       <div style="display: flex;justify-content: space-around;align-items: center;">
  226.  
  227.         <!-- 3-1 添加步骤条 -->
  228.  
  229.         <!-- 3-5  :active="activeItemIndex" -->
  230.  
  231.         <el-steps direction="vertical" :active="activeItemIndex">
  232.  
  233.           <!-- 3-3 循环遍历数据 -->
  234.  
  235.           <el-step :title="itemName" v-for="(itemName,index) in salaryItemName" :key="index"></el-step>
  236.  
  237.         </el-steps>
  238.  
  239.         <!-- 3-4 循环遍历数据 -->
  240.  
  241.         <!-- 3-7 v-show="activeItemIndex = index" 与下标相等才展示 -->
  242.  
  243.         <!-- 4-2 修改各项的值 绑定和遍历-->
  244.  
  245.         <el-input v-model="salary[title]" :placeholder="'请输入'+salaryItemName[index]+'...'"
  246.  
  247.                   v-for="(value,title,index) in salary"
  248.  
  249.                   :key="index" v-show="activeItemIndex === index" style="width: 200px;"></el-input>
  250.  
  251.       </div>
  252.  
  253.       <span slot="footer" class="dialog-footer">
  254.  
  255.         <!-- 3-10 按钮判断根据索引显示 文字提示 -->
  256.  
  257.         <el-button @click="preStep">{{ activeItemIndex === 10 ? '取消' : '上一步' }}</el-button>
  258.  
  259.         <el-button type="primary" @click="nextStep">{{ activeItemIndex === 10 ? '完成' : '下一步' }}</el-button>
  260.  
  261.       </span>
  262.  
  263.     </el-dialog>
  264.  
  265.   </div>
  266.  
  267. </template>
  268.  
  269. <script>
  270.  
  271. export default {
  272.  
  273.   name: "SalSob",
  274.  
  275.   data() {
  276.  
  277.     return {
  278.  
  279.       dialogTitle: '添加工资账套', // 6-1 标题
  280.  
  281.       dialogVisible: false, // 2-2 添加工资账套对话框
  282.  
  283.       salaries: [], // 1-2 定义数组
  284.  
  285.       activeItemIndex: 0, // 3-6 步骤条激活索引
  286.  
  287.       salaryItemName: [ // 3-2 步骤条数据对象
  288.  
  289.         '账套名称',
  290.  
  291.         '基本工资',
  292.  
  293.         '交通补助',
  294.  
  295.         '午餐补助',
  296.  
  297.         '奖金',
  298.  
  299.         '养老金比率',
  300.  
  301.         '养老金基数',
  302.  
  303.         '医疗保险比率',
  304.  
  305.         '医疗保险基数',
  306.  
  307.         '公积金比率',
  308.  
  309.         '公积金基数'
  310.  
  311.       ],
  312.  
  313.       // 4-1 定义工资账套数据
  314.  
  315.       salary: {
  316.  
  317.         name: '',
  318.  
  319.         basicSalary: 0,
  320.  
  321.         trafficSalary: 0,
  322.  
  323.         lunchSalary: 0,
  324.  
  325.         bonus: 0,
  326.  
  327.         pensionPer: 0.0,
  328.  
  329.         pensionBase: 0,
  330.  
  331.         medicalPer: 0.0,
  332.  
  333.         medicalBase: 0,
  334.  
  335.         accumulationFundPer: 0.0,
  336.  
  337.         accumulationFundBase: 0
  338.  
  339.       }
  340.  
  341.     }
  342.  
  343.   },
  344.  
  345.   mounted() {
  346.  
  347.     this.initSalaries()
  348.  
  349.   },
  350.  
  351.   methods: {
  352.  
  353.     // 6-5 点击编辑显示对话框
  354.  
  355.     showEditSalaryView(data) {
  356.  
  357.       this.dialogTitle = '编辑工资账套' // 设置标题
  358.  
  359.       this.activeItemIndex = 0 // 默认激活的索引
  360.  
  361.       this.salary.id = data.id
  362.  
  363.       this.salary.name = data.name
  364.  
  365.       this.salary.basicSalary = data.basicSalary
  366.  
  367.       this.salary.trafficSalary = data.trafficSalary
  368.  
  369.       this.salary.lunchSalary = data.lunchSalary
  370.  
  371.       this.salary.bonus = data.bonus
  372.  
  373.       this.salary.pensionPer = data.pensionPer
  374.  
  375.       this.salary.pensionBase = data.pensionBase
  376.  
  377.       this.salary.medicalPer = data.medicalPer
  378.  
  379.       this.salary.medicalBase = data.medicalBase
  380.  
  381.       this.salary.accumulationFundPer = data.accumulationFundPer
  382.  
  383.       this.salary.accumulationFundBase = data.accumulationFundBase
  384.  
  385.       this.dialogVisible = true // 打开对话框
  386.  
  387.     },
  388.  
  389.     // 5-2 删除工资账套
  390.  
  391.     deleteSalary(data) {
  392.  
  393.       this.$confirm('此操作将永久删除该[' + data.name + ']工资账套, 是否继续?', '提示', {
  394.  
  395.         confirmButtonText: '确定',
  396.  
  397.         cancelButtonText: '取消',
  398.  
  399.         type: 'warning'
  400.  
  401.       }).then(() => {
  402.  
  403.         this.deleteRequest('/salary/sob/' + data.id).then(resp => {
  404.  
  405.           if (resp) {
  406.  
  407.             this.initSalaries()
  408.  
  409.           }
  410.  
  411.         })
  412.  
  413.       }).catch(() => {
  414.  
  415.         this.$message({
  416.  
  417.           type: 'info',
  418.  
  419.           message: '已取消删除'
  420.  
  421.         });
  422.  
  423.       });
  424.  
  425.     },
  426.  
  427.     preStep() { // 3-13 上一步 取消
  428.  
  429.       if (this.activeItemIndex === 0) {
  430.  
  431.         return
  432.  
  433.       } else if (this.activeItemIndex === 10) {
  434.  
  435.         this.dialogVisible = false;
  436.  
  437.         return;
  438.  
  439.       }
  440.  
  441.       this.activeItemIndex--
  442.  
  443.     },
  444.  
  445.     nextStep() { // 3-12 下一步 完成
  446.  
  447.       if (this.activeItemIndex === 10) {
  448.  
  449.         // alert("ok")
  450.  
  451.         // console.log(this.salary)
  452.  
  453.         // 4-4 添加工资账套
  454.  
  455.         if (this.salary.id) { // 6-6 有 id 调用编辑接口，没有 id 执行添加
  456.  
  457.           this.putRequest('/salary/sob/', this.salary).then(resp => {
  458.  
  459.             if (resp) {
  460.  
  461.               this.initSalaries()
  462.  
  463.               this.dialogVisible = false // 关闭弹框
  464.  
  465.             }
  466.  
  467.           })
  468.  
  469.         } else {
  470.  
  471.           this.postRequest('/salary/sob/', this.salary).then(resp => {
  472.  
  473.             if (resp) {
  474.  
  475.               this.initSalaries()
  476.  
  477.               this.dialogVisible = false
  478.  
  479.             }
  480.  
  481.           })
  482.  
  483.         }
  484.  
  485.         return
  486.  
  487.       }
  488.  
  489.       this.activeItemIndex++
  490.  
  491.     },
  492.  
  493.     // 2-4 点击打开添加工资账套对话框
  494.  
  495.     showAddSalaryView() {
  496.  
  497.       this.dialogTitle = '添加工资账套' // 6-3 添加的时候显示此标题
  498.  
  499.       this.salary = { // 4-3 清空表单
  500.  
  501.         name: '',
  502.  
  503.         basicSalary: 0,
  504.  
  505.         trafficSalary: 0,
  506.  
  507.         lunchSalary: 0,
  508.  
  509.         bonus: 0,
  510.  
  511.         pensionPer: 0.0,
  512.  
  513.         pensionBase: 0,
  514.  
  515.         medicalPer: 0.0,
  516.  
  517.         medicalBase: 0,
  518.  
  519.         accumulationFundPer: 0.0,
  520.  
  521.         accumulationFundBase: 0
  522.  
  523.       }
  524.  
  525.       this.activeItemIndex = 0 // 3-14 步骤条索引从0开始
  526.  
  527.       this.dialogVisible = true;
  528.  
  529.     },
  530.  
  531.     // 1-3 初始化数据
  532.  
  533.     initSalaries() {
  534.  
  535.       this.getRequest('/salary/sob/').then(resp => {
  536.  
  537.         if (resp) {
  538.  
  539.           this.salaries = resp
  540.  
  541.         }
  542.  
  543.       })
  544.  
  545.     }
  546.  
  547.   }
  548.  
  549. }
  550.  
  551. </script>
  552.  
  553. <style scoped>
  554.  
  555. </style>

十一、员工账套设置

SalSobCfg.vue

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <el-table
  6.  
  7.         size="mini"
  8.  
  9.         :data="emps"
  10.  
  11.         stripe
  12.  
  13.         border>
  14.  
  15.       <el-table-column
  16.  
  17.           align="left"
  18.  
  19.           type="selection"
  20.  
  21.           width="55">
  22.  
  23.       </el-table-column>
  24.  
  25.       <el-table-column
  26.  
  27.           prop="name"
  28.  
  29.           label="姓名"
  30.  
  31.           align="left"
  32.  
  33.           fixed
  34.  
  35.           width="120">
  36.  
  37.       </el-table-column>
  38.  
  39.       <el-table-column
  40.  
  41.           prop="workId"
  42.  
  43.           label="工号"
  44.  
  45.           align="left"
  46.  
  47.           width="120">
  48.  
  49.       </el-table-column>
  50.  
  51.       <el-table-column
  52.  
  53.           prop="email"
  54.  
  55.           label="邮箱地址"
  56.  
  57.           align="left"
  58.  
  59.           width="200">
  60.  
  61.       </el-table-column>
  62.  
  63.       <el-table-column
  64.  
  65.           prop="phone"
  66.  
  67.           label="电话号码"
  68.  
  69.           align="left"
  70.  
  71.           width="120">
  72.  
  73.       </el-table-column>
  74.  
  75.       <el-table-column
  76.  
  77.           prop="department.name"
  78.  
  79.           label="所属部门"
  80.  
  81.           align="left"
  82.  
  83.           width="120">
  84.  
  85.       </el-table-column>
  86.  
  87.       <el-table-column
  88.  
  89.           label="工资账套"
  90.  
  91.           align="center">
  92.  
  93.         <template slot-scope="scope">
  94.  
  95.           <el-tooltip placement="right" v-if="scope.row.salary">
  96.  
  97.             <div slot="content">
  98.  
  99.               <table>
  100.  
  101.                 <tr>
  102.  
  103.                   <td>基本工资</td>
  104.  
  105.                   <td>{{ scope.row.salary.basicSalary }}</td>
  106.  
  107.                 </tr>
  108.  
  109.                 <tr>
  110.  
  111.                   <td>交通补助</td>
  112.  
  113.                   <td>{{ scope.row.salary.trafficSalary }}</td>
  114.  
  115.                 </tr>
  116.  
  117.                 <tr>
  118.  
  119.                   <td>午餐补助</td>
  120.  
  121.                   <td>{{ scope.row.salary.lunchSalary }}</td>
  122.  
  123.                 </tr>
  124.  
  125.                 <tr>
  126.  
  127.                   <td>奖金</td>
  128.  
  129.                   <td>{{ scope.row.salary.bonus }}</td>
  130.  
  131.                 </tr>
  132.  
  133.                 <tr>
  134.  
  135.                   <td>养老金比率</td>
  136.  
  137.                   <td>{{ scope.row.salary.pensionPer }}</td>
  138.  
  139.                 </tr>
  140.  
  141.                 <tr>
  142.  
  143.                   <td>养老金基数</td>
  144.  
  145.                   <td>{{ scope.row.salary.pensionBase }}</td>
  146.  
  147.                 </tr>
  148.  
  149.                 <tr>
  150.  
  151.                   <td>医疗保险比率</td>
  152.  
  153.                   <td>{{ scope.row.salary.medicalPer }}</td>
  154.  
  155.                 </tr>
  156.  
  157.                 <tr>
  158.  
  159.                   <td>医疗保险基数</td>
  160.  
  161.                   <td>{{ scope.row.salary.medicalBase }}</td>
  162.  
  163.                 </tr>
  164.  
  165.                 <tr>
  166.  
  167.                   <td>公积金比率</td>
  168.  
  169.                   <td>{{ scope.row.salary.accumulationFundPer }}</td>
  170.  
  171.                 </tr>
  172.  
  173.                 <tr>
  174.  
  175.                   <td>公积金基数</td>
  176.  
  177.                   <td>{{ scope.row.salary.accumulationFundBase }}</td>
  178.  
  179.                 </tr>
  180.  
  181.               </table>
  182.  
  183.             </div>
  184.  
  185.             <el-tag>{{ scope.row.salary.name }}</el-tag>
  186.  
  187.           </el-tooltip>
  188.  
  189.           <el-tag v-else>暂未设置</el-tag>
  190.  
  191.         </template>
  192.  
  193.       </el-table-column>
  194.  
  195.       <!-- 2-1 编辑工资账套 -->
  196.  
  197.       <el-table-column
  198.  
  199.           label="操作"
  200.  
  201.           align="center">
  202.  
  203.         <template slot-scope="scope">
  204.  
  205.           <!-- 2-5 当前员工的工资账套 @show="showPop(scope.row.salary)" show 显示时触发 -->
  206.  
  207.           <!-- 2-9 @hide="hidePop(scope.row)" hide  隐藏时触发 -->
  208.  
  209.           <el-popover
  210.  
  211.               size="mini"
  212.  
  213.               @show="showPop(scope.row.salary)"
  214.  
  215.               @hide="hidePop(scope.row)"
  216.  
  217.               placement="right"
  218.  
  219.               title="编辑工资账套"
  220.  
  221.               width="200"
  222.  
  223.               trigger="click">
  224.  
  225.             <div>
  226.  
  227.               <!-- 2-6  v-model="currentSalary" -->
  228.  
  229.               <el-select v-model="currentSalary" placeholder="请选择">
  230.  
  231.                 <el-option
  232.  
  233.                     size="mini"
  234.  
  235.                     v-for="item in salaries"
  236.  
  237.                     :key="item.id"
  238.  
  239.                     :label="item.name"
  240.  
  241.                     :value="item.id">
  242.  
  243.                 </el-option>
  244.  
  245.               </el-select>
  246.  
  247.             </div>
  248.  
  249.             <el-button slot="reference" type="danger">修改工资账套</el-button>
  250.  
  251.           </el-popover>
  252.  
  253.         </template>
  254.  
  255.       </el-table-column>
  256.  
  257.     </el-table>
  258.  
  259.     <!-- 1-1 分页组件 -->
  260.  
  261.     <div style="display: flex;justify-content: flex-end;margin-top: 5px;">
  262.  
  263.       <el-pagination
  264.  
  265.           @size-change="sizeChange"
  266.  
  267.           @current-change="currentChange"
  268.  
  269.           layout="total, sizes, prev, pager, next, jumper"
  270.  
  271.           :total="total" background>
  272.  
  273.       </el-pagination>
  274.  
  275.     </div>
  276.  
  277.   </div>
  278.  
  279. </template>
  280.  
  281. <script>
  282.  
  283. export default {
  284.  
  285.   name: "SalSobCfg",
  286.  
  287.   data() {
  288.  
  289.     return {
  290.  
  291.       emps: [],
  292.  
  293.       salaries: [], // 2-2 工资账套数组
  294.  
  295.       currentPage: 1, // 1-2 当前页
  296.  
  297.       size: 10, // 1-2 每页显示条数
  298.  
  299.       total: 0, // 1-2 分页
  300.  
  301.       currentSalary: null // 2-7 当前员工工资账套
  302.  
  303.     }
  304.  
  305.   },
  306.  
  307.   mounted() {
  308.  
  309.     this.initEmps()
  310.  
  311.     this.initSalaries() // 2-4 初始化 获取所有工资账套
  312.  
  313.   },
  314.  
  315.   methods: {
  316.  
  317.     // 2-10
  318.  
  319.     hidePop(data) { // 隐藏时触发
  320.  
  321.       // 当前员工工资账套存在 并且不等于当前的 才更新
  322.  
  323.       if (this.currentSalary && this.currentSalary!==data.salary.id) {
  324.  
  325.         this.putRequest('/salary/sobcfg/?eid=' + data.id + '&sid=' + this.currentSalary).then(resp => {
  326.  
  327.           if (resp) {
  328.  
  329.             this.initEmps()
  330.  
  331.           }
  332.  
  333.         });
  334.  
  335.       }
  336.  
  337.     },
  338.  
  339.     // 2-8 员工工资账套
  340.  
  341.     showPop(data) { // 显示时触发
  342.  
  343.       if (data) {
  344.  
  345.         this.currentSalary = data.id;
  346.  
  347.       } else {
  348.  
  349.         this.currentSalary = null
  350.  
  351.       }
  352.  
  353.     },
  354.  
  355.     // 2-3 获取所有工资账套
  356.  
  357.     initSalaries() {
  358.  
  359.       this.getRequest('/salary/sobcfg/salaries').then(resp => {
  360.  
  361.         if (resp) {
  362.  
  363.           this.salaries = resp
  364.  
  365.         }
  366.  
  367.       })
  368.  
  369.     },
  370.  
  371.     // 1-3 分页-当前页
  372.  
  373.     currentChange(page) {
  374.  
  375.       this.currentPage = page
  376.  
  377.       this.initEmps()
  378.  
  379.     },
  380.  
  381.     // 1-4 分页-每页显示数量
  382.  
  383.     sizeChange(size) {
  384.  
  385.       this.size = size
  386.  
  387.       this.initEmps()
  388.  
  389.     },
  390.  
  391.     // 获取所有数据
  392.  
  393.     initEmps() {
  394.  
  395.       this.getRequest('/salary/sobcfg/?currentPage=' + this.currentPage + '&size=' + this.size).then(resp => {
  396.  
  397.         if (resp) {
  398.  
  399.           this.emps = resp.data
  400.  
  401.           this.total = resp.total
  402.  
  403.         }
  404.  
  405.       })
  406.  
  407.     }
  408.  
  409.   }
  410.  
  411. }
  412.  
  413. </script>
  414.  
  415. <style scoped>
  416.  
  417. </style>

十二、聊天功能

安装npm install --save stompjs

将GitHub上的开源项目与自身项目进行整合来实现即时聊天功能

简介

一个基于Vue + Webpack构建的简单chat示例，聊天记录保存在localStorge。简单演示了Vue的 component、filter、directive、computed以及组件间的事件通讯。 原项目目前存在一个Bug：打开项目关闭浏览器再次打开会报错。这里使用在此项目基础上重构的项目 来与我们项目进行整合.

下载（用chrom打开下载）

地址：

整合项目

将下载下来的项目所在的文件，加入到本项目中。

在这里插入图片描述

assets：是网页所需要的图片，这个不需要，因为后端提供了图片，更改代码直接从后端获取。

componts：在自己的目录下创建该目录下的几个文件，复制过去。

vuex：是stroy，将其中的的代码，加入到本项目的story/index.js

main.js：就是一个普通的入口，不需要加入项目当汇总。

components

card.vue

  1. <template>
  2.  
  3.   <div id="card">
  4.  
  5.     <header>
  6.  
  7.         <img class="avatar" v-bind:src="user.userFace" v-bind:alt="user.name">
  8.  
  9.         <p class="name">{{user.name}}</p>
  10.  
  11.     </header>
  12.  
  13.     <footer>
  14.  
  15.         <input class="search" type="text" v-model="$store.state.filterKey" placeholder="search user...">
  16.  
  17.     </footer>
  18.  
  19.   </div>
  20.  
  21. </template>
  22.  
  23. <script>
  24.  
  25. export default {
  26.  
  27.   name: 'card',
  28.  
  29.   data () {
  30.  
  31.     return {
  32.  
  33.       user:JSON.parse(window.sessionStorage.getItem("user"))
  34.  
  35.     }
  36.  
  37.   }
  38.  
  39. }
  40.  
  41. </script>
  42.  
  43. <style lang="scss" scoped>
  44.  
  45. #card {
  46.  
  47.     padding: 12px;
  48.  
  49.   .avatar{
  50.  
  51.     width: 40px;
  52.  
  53.     height: 40px;
  54.  
  55.     vertical-align: middle;/*这个是图片和文字居中对齐*/
  56.  
  57.   }
  58.  
  59.   .name {
  60.  
  61.     display: inline-block;
  62.  
  63.     padding: 10px;
  64.  
  65.     margin-bottom: 15px;
  66.  
  67.     font-size: 16px;
  68.  
  69.   }
  70.  
  71.   .search {
  72.  
  73.     background: #26292E;
  74.  
  75.     height: 30px;
  76.  
  77.     line-height: 30px;
  78.  
  79.     padding: 0 10px;
  80.  
  81.     border: 1px solid #3a3a3a;
  82.  
  83.     border-radius: 4px;
  84.  
  85.     outline: none;/*鼠标点击后不会出现蓝色边框*/
  86.  
  87.     color: #FFF;
  88.  
  89.   }
  90.  
  91. }
  92.  
  93. </style>

list.vue

  1. <template>
  2.  
  3.   <div id="list">
  4.  
  5.     <ul style="padding-left: 0;">
  6.  
  7.       <li v-for="item in admins" :class="{ active: currentSession?item.username === currentSession.username:false }"
  8.  
  9.           v-on:click="changecurrentSession(item)"><!--   :class="[item.id === currentSession ? 'active':'']" -->
  10.  
  11.         <!-- 未读消息提示 小红点  <el-badge is-dot> </el-badge> -->
  12.  
  13.         <el-badge is-dot :is-dot="idDot[user.username+'#'+item.username]"><img class="avatar" :src="item.userFace" :alt="item.name"></el-badge>
  14.  
  15.         <p class="name">{{ item.name }}</p>
  16.  
  17.       </li>
  18.  
  19.     </ul>
  20.  
  21.   </div>
  22.  
  23. </template>
  24.  
  25. <script>
  26.  
  27. import {mapState} from 'vuex'
  28.  
  29. export default {
  30.  
  31.   name: 'list',
  32.  
  33.   data() {
  34.  
  35.     return {
  36.  
  37.       user:JSON.parse(window.sessionStorage.getItem('user'))
  38.  
  39.     }
  40.  
  41.   },
  42.  
  43.   computed: mapState([
  44.  
  45.     'idDot',
  46.  
  47.     'admins',
  48.  
  49.     'currentSession'
  50.  
  51.   ]),
  52.  
  53.   methods: {
  54.  
  55.     changecurrentSession: function (currentSession) {
  56.  
  57.       this.$store.commit('changecurrentSession', currentSession)
  58.  
  59.     }
  60.  
  61.   }
  62.  
  63. }
  64.  
  65. </script>
  66.  
  67. <style lang="scss" scoped>
  68.  
  69. #list {
  70.  
  71.   li {
  72.  
  73.     padding: 0 15px;
  74.  
  75.     border-bottom: 1px solid #292C33;
  76.  
  77.     cursor: pointer;
  78.  
  79.     &:hover {
  80.  
  81.       background-color: rgba(255, 255, 255, 0.03);
  82.  
  83.     }
  84.  
  85.   }
  86.  
  87.   li.active { /*注意这个是.不是冒号:*/
  88.  
  89.     background-color: rgba(255, 255, 255, 0.1);
  90.  
  91.   }
  92.  
  93.   .avatar {
  94.  
  95.     border-radius: 2px;
  96.  
  97.     width: 30px;
  98.  
  99.     height: 30px;
  100.  
  101.     vertical-align: middle;
  102.  
  103.   }
  104.  
  105.   .name {
  106.  
  107.     display: inline-block;
  108.  
  109.     margin-left: 15px;
  110.  
  111.   }
  112.  
  113. }
  114.  
  115. </style>

message.vue

  1. <template>
  2.  
  3.   <div id="message" v-scroll-bottom="sessions">
  4.  
  5.     <ul v-if="currentSession">
  6.  
  7.       <li v-for="entry in sessions[user.username+'#'+currentSession.username]">
  8.  
  9.         <p class="time">
  10.  
  11.           <span>{{ entry.date | time }}</span>
  12.  
  13.         </p>
  14.  
  15.         <div class="main" :class="{self:entry.self}">
  16.  
  17.           <img class="avatar" :src="entry.self ? user.userFace:currentSession.userFace" alt="">
  18.  
  19.           <p class="text">{{ entry.content }}</p>
  20.  
  21.         </div>
  22.  
  23.       </li>
  24.  
  25.     </ul>
  26.  
  27.   </div>
  28.  
  29. </template>
  30.  
  31. <script>
  32.  
  33. import {mapState} from 'vuex'
  34.  
  35. export default {
  36.  
  37.   name: 'message',
  38.  
  39.   data() {
  40.  
  41.     return {
  42.  
  43.       user: JSON.parse(window.sessionStorage.getItem('user')), // 当前用户
  44.  
  45.     }
  46.  
  47.   },
  48.  
  49.   computed: mapState([
  50.  
  51.     'sessions',
  52.  
  53.     'currentSession'
  54.  
  55.   ]),
  56.  
  57.   filters: {
  58.  
  59.     time(date) {
  60.  
  61.       if (date) {
  62.  
  63.         date = new Date(date);
  64.  
  65.       }
  66.  
  67.       return `${date.getHours()}:${date.getMinutes()}`;
  68.  
  69.     }
  70.  
  71.   },
  72.  
  73.   directives: {/*这个是vue的自定义指令,官方文档有详细说明*/
  74.  
  75.     // 发送消息后滚动到底部,这里无法使用原作者的方法，也未找到合理的方法解决，暂用setTimeout的方法模拟
  76.  
  77.     'scroll-bottom'(el) {
  78.  
  79.       //console.log(el.scrollTop);
  80.  
  81.       setTimeout(function () {
  82.  
  83.         el.scrollTop += 9999;
  84.  
  85.       }, 1)
  86.  
  87.     }
  88.  
  89.   }
  90.  
  91. }
  92.  
  93. </script>
  94.  
  95. <style lang="scss" scoped>
  96.  
  97. #message {
  98.  
  99.   padding: 15px;
  100.  
  101.   max-height: 68%;
  102.  
  103.   overflow-y: scroll;
  104.  
  105.   ul {
  106.  
  107.     list-style-type: none;
  108.  
  109.     padding-left: 0;
  110.  
  111.     li {
  112.  
  113.       margin-bottom: 15px;
  114.  
  115.     }
  116.  
  117.   }
  118.  
  119.   .time {
  120.  
  121.     text-align: center;
  122.  
  123.     margin: 7px 0;
  124.  
  125.     > span {
  126.  
  127.       display: inline-block;
  128.  
  129.       padding: 0 18px;
  130.  
  131.       font-size: 12px;
  132.  
  133.       color: #FFF;
  134.  
  135.       background-color: #dcdcdc;
  136.  
  137.       border-radius: 2px;
  138.  
  139.     }
  140.  
  141.   }
  142.  
  143.   .main {
  144.  
  145.     .avatar {
  146.  
  147.       float: left;
  148.  
  149.       margin: 0 10px 0 0;
  150.  
  151.       border-radius: 3px;
  152.  
  153.       width: 30px;
  154.  
  155.       height: 30px;
  156.  
  157.     }
  158.  
  159.     .text {
  160.  
  161.       display: inline-block;
  162.  
  163.       padding: 0 10px;
  164.  
  165.       max-width: 80%;
  166.  
  167.       background-color: #fafafa;
  168.  
  169.       border-radius: 4px;
  170.  
  171.       line-height: 30px;
  172.  
  173.     }
  174.  
  175.   }
  176.  
  177.   .self {
  178.  
  179.     text-align: right;
  180.  
  181.     .avatar {
  182.  
  183.       float: right;
  184.  
  185.       margin: 0 0 0 10px;
  186.  
  187.       border-radius: 3px;
  188.  
  189.       width: 30px;
  190.  
  191.       height: 30px;
  192.  
  193.     }
  194.  
  195.     .text {
  196.  
  197.       display: inline-block;
  198.  
  199.       padding: 0 10px;
  200.  
  201.       max-width: 80%;
  202.  
  203.       background-color: #b2e281;
  204.  
  205.       border-radius: 4px;
  206.  
  207.       line-height: 30px;
  208.  
  209.     }
  210.  
  211.   }
  212.  
  213. }
  214.  
  215. </style>

usertext.vue

  1. <template>
  2.  
  3.   <div id="uesrtext">
  4.  
  5.     <textarea placeholder="按 Ctrl + Enter 发送" v-model="content" v-on:keyup="addMessage"></textarea>
  6.  
  7.   </div>
  8.  
  9. </template>
  10.  
  11. <script>
  12.  
  13. import {mapState} from 'vuex'
  14.  
  15. export default {
  16.  
  17.   name: 'uesrtext',
  18.  
  19.   data() {
  20.  
  21.     return {
  22.  
  23.       content: ''
  24.  
  25.     }
  26.  
  27.   },
  28.  
  29.   computed: mapState([
  30.  
  31.     'currentSession'
  32.  
  33.   ]),
  34.  
  35.   methods: {
  36.  
  37.     addMessage(e) {
  38.  
  39.       if (e.ctrlKey && e.keyCode === 13 && this.content.length) {
  40.  
  41.         // 自定义发送消息
  42.  
  43.         let msgObj = {}
  44.  
  45.         // let msgObj = new Object()
  46.  
  47.         msgObj.to = this.currentSession.username
  48.  
  49.         msgObj.content = this.content
  50.  
  51.         this.$store.state.stomp.send('/ws/chat', {}, JSON.stringify(msgObj))
  52.  
  53.         this.$store.commit('addMessage', msgObj);
  54.  
  55.         this.content = '';
  56.  
  57.       }
  58.  
  59.     }
  60.  
  61.   }
  62.  
  63. }
  64.  
  65. </script>
  66.  
  67. <style lang="scss" scoped>
  68.  
  69. #uesrtext {
  70.  
  71.   position: absolute;
  72.  
  73.   bottom: 0;
  74.  
  75.   right: 0;
  76.  
  77.   width: 100%;
  78.  
  79.   height: 30%;
  80.  
  81.   border-top: solid 1px #DDD;
  82.  
  83.   > textarea {
  84.  
  85.     padding: 10px;
  86.  
  87.     width: 100%;
  88.  
  89.     height: 100%;
  90.  
  91.     border: none;
  92.  
  93.     outline: none;
  94.  
  95.   }
  96.  
  97. }
  98.  
  99. </style>
  100.  
  101. chat/FriendChat.vue
  102.  
  103. <template>
  104.  
  105.   <div id="app">
  106.  
  107.     <div class="sidebar">
  108.  
  109.       <card></card>
  110.  
  111.       <list></list>
  112.  
  113.     </div>
  114.  
  115.     <div class="main">
  116.  
  117.       <message></message>
  118.  
  119.       <userText></userText>
  120.  
  121.     </div>
  122.  
  123.   </div>
  124.  
  125. </template>
  126.  
  127. <script>
  128.  
  129. import card from '@/components/chat/card.vue'
  130.  
  131. import list from '@/components/chat/list.vue'
  132.  
  133. import message from '@/components/chat/message.vue'
  134.  
  135. import userText from '@/components/chat/usertext.vue'
  136.  
  137. export default {
  138.  
  139.   name: 'FriendChat',
  140.  
  141.   data () {
  142.  
  143.     return {
  144.  
  145.     }
  146.  
  147.   },
  148.  
  149.   mounted:function() {
  150.  
  151.     this.$store.dispatch('initData');
  152.  
  153.   },
  154.  
  155.   components:{
  156.  
  157.     card,
  158.  
  159.     list,
  160.  
  161.     message,
  162.  
  163.     userText
  164.  
  165.   }
  166.  
  167. }
  168.  
  169. </script>
  170.  
  171. <style lang="scss" scoped>
  172.  
  173. #app {
  174.  
  175.   margin: 20px 100px;
  176.  
  177.   //margin: 20px auto;
  178.  
  179.   width: 800px;
  180.  
  181.   height: 600px;
  182.  
  183.   overflow: hidden;
  184.  
  185.   border-radius: 10px;
  186.  
  187.   border: 1px solid #c8c9c9;
  188.  
  189.   .sidebar, .main {
  190.  
  191.     height: 100%;
  192.  
  193.   }
  194.  
  195.   .sidebar {
  196.  
  197.     float: left;
  198.  
  199.     color: #f4f4f4;
  200.  
  201.     background-color: #2e3238;
  202.  
  203.     width: 200px;
  204.  
  205.   }
  206.  
  207.   .main {
  208.  
  209.     position: relative;
  210.  
  211.     overflow: hidden;
  212.  
  213.     background-color: #eee;
  214.  
  215.   }
  216.  
  217. }
  218.  
  219. </style>

十三、个人中心

 AdminInfo.vue

  1. <template>
  2.  
  3.   <div>
  4.  
  5.     <el-card class="box-card" style="width: 400px;">
  6.  
  7.       <div slot="header" class="clearfix">
  8.  
  9.         <span>{{ admin.name }}</span>
  10.  
  11.       </div>
  12.  
  13.       <div>
  14.  
  15.         <div>
  16.  
  17.           <div style="display: flex;justify-content: center;">
  18.  
  19.             <img title="点击修改用户头像" :src="admin.userFace" style="height: 100px;width: 100px;border-radius: 50px;" alt="">
  20.  
  21.           </div>
  22.  
  23.           <div>电话号码：
  24.  
  25.             <el-tag>{{ admin.telephone }}</el-tag>
  26.  
  27.           </div>
  28.  
  29.           <div>手机号码：
  30.  
  31.             <el-tag>{{ admin.phone }}</el-tag>
  32.  
  33.           </div>
  34.  
  35.           <div>居住地址：
  36.  
  37.             <el-tag>{{ admin.address }}</el-tag>
  38.  
  39.           </div>
  40.  
  41.           <div>用户标签：
  42.  
  43.             <el-tag type="success" v-for="(r,index) in admin.roles" :key="index">{{ r.nameZh }}</el-tag>
  44.  
  45.           </div>
  46.  
  47.         </div>
  48.  
  49.         <div style="display: flex;justify-content: space-around;margin-top: 10px;">
  50.  
  51.           <!-- 1-3 @click="showUpdateAdminInfoView" -->
  52.  
  53.           <el-button type="primary" size="mini" @click="showUpdateAdminInfoView">修改信息</el-button>
  54.  
  55.           <!-- 2-1 用户修改密码 @click="showUpdatePasswordView"  -->
  56.  
  57.           <el-button type="danger" size="mini" @click="showUpdatePasswordView">修改密码</el-button>
  58.  
  59.         </div>
  60.  
  61.       </div>
  62.  
  63.     </el-card>
  64.  
  65.     <!-- 1-1 编辑用户信息 -->
  66.  
  67.     <el-dialog
  68.  
  69.         title="编辑用户信息"
  70.  
  71.         :visible.sync="dialogVisible"
  72.  
  73.         width="30%">
  74.  
  75.       <div>
  76.  
  77.         <table>
  78.  
  79.           <tr>
  80.  
  81.             <td>用户昵称：</td>
  82.  
  83.             <td>
  84.  
  85.               <!-- 1-5 重新给每项赋值 admin2 -->
  86.  
  87.               <el-input v-model="admin2.name"></el-input>
  88.  
  89.             </td>
  90.  
  91.           </tr>
  92.  
  93.           <tr>
  94.  
  95.             <td>电话号码：</td>
  96.  
  97.             <td>
  98.  
  99.               <el-input v-model="admin2.telephone"></el-input>
  100.  
  101.             </td>
  102.  
  103.           </tr>
  104.  
  105.           <tr>
  106.  
  107.             <td>手机号码：</td>
  108.  
  109.             <td>
  110.  
  111.               <el-input v-model="admin2.phone"></el-input>
  112.  
  113.             </td>
  114.  
  115.           </tr>
  116.  
  117.           <tr>
  118.  
  119.             <td>用户地址：</td>
  120.  
  121.             <td>
  122.  
  123.               <el-input v-model="admin2.address"></el-input>
  124.  
  125.             </td>
  126.  
  127.           </tr>
  128.  
  129.         </table>
  130.  
  131.       </div>
  132.  
  133.       <span slot="footer" class="dialog-footer">
  134.  
  135.         <el-button @click="dialogVisible = false">取 消</el-button>
  136.  
  137.         <!-- 1-8 @click="updateAdminInfo" -->
  138.  
  139.         <el-button type="primary" @click="updateAdminInfo">确 定</el-button>
  140.  
  141.       </span>
  142.  
  143.     </el-dialog>
  144.  
  145.     <!-- 2-2 修改密码 -->
  146.  
  147.     <el-dialog
  148.  
  149.         title="更新密码"
  150.  
  151.         :visible.sync="passwordDialogVisible"
  152.  
  153.         width="30%">
  154.  
  155.       <div>
  156.  
  157.         <!-- 2-8 调整修改密码表单 -->
  158.  
  159.         <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  160.  
  161.           <el-form-item label="请输入旧密码" prop="oldPass">
  162.  
  163.             <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off"></el-input>
  164.  
  165.           </el-form-item>
  166.  
  167.           <el-form-item label="请输入新密码" prop="pass">
  168.  
  169.             <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  170.  
  171.           </el-form-item>
  172.  
  173.           <el-form-item label="确认新密码" prop="checkPass">
  174.  
  175.             <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  176.  
  177.           </el-form-item>
  178.  
  179.           <el-form-item>
  180.  
  181.             <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  182.  
  183.             <el-button @click="resetForm('ruleForm')">重置</el-button>
  184.  
  185.           </el-form-item>
  186.  
  187.         </el-form>
  188.  
  189.       </div>
  190.  
  191.     </el-dialog>
  192.  
  193.   </div>
  194.  
  195. </template>
  196.  
  197. <script>
  198.  
  199. export default {
  200.  
  201.   name: "AdminInfo",
  202.  
  203.   data() {
  204.  
  205.     // 2-5 修改密码校验规则 一定要放最前面
  206.  
  207.     var validatePass = (rule, value, callback) => {
  208.  
  209.       if (value === '') {
  210.  
  211.         callback(new Error('请输入密码'));
  212.  
  213.       } else {
  214.  
  215.         if (this.ruleForm.checkPass !== '') {
  216.  
  217.           this.$refs.ruleForm.validateField('checkPass');
  218.  
  219.         }
  220.  
  221.         callback();
  222.  
  223.       }
  224.  
  225.     }
  226.  
  227.     var validatePass2 = (rule, value, callback) => {
  228.  
  229.       if (value === '') {
  230.  
  231.         callback(new Error('请再次输入密码'));
  232.  
  233.       } else if (value !== this.ruleForm.pass) {
  234.  
  235.         callback(new Error('两次输入密码不一致!'));
  236.  
  237.       } else {
  238.  
  239.         callback();
  240.  
  241.       }
  242.  
  243.     }
  244.  
  245.     return {
  246.  
  247.       admin: null,
  248.  
  249.       admin2: null, // 1-5 编辑的对象
  250.  
  251.       dialogVisible: false, // 1-2 编辑用户信息
  252.  
  253.       passwordDialogVisible: false, // 2-3 修改密码
  254.  
  255.       ruleForm: { // 2-6 校验对象 规则
  256.  
  257.         pass: '',
  258.  
  259.         checkPass: '',
  260.  
  261.         oldPass: '', // 2-9
  262.  
  263.       },
  264.  
  265.       rules: {
  266.  
  267.         pass: [
  268.  
  269.           {validator: validatePass, trigger: 'blur'}
  270.  
  271.         ],
  272.  
  273.         checkPass: [
  274.  
  275.           {validator: validatePass2, trigger: 'blur'}
  276.  
  277.         ],
  278.  
  279.         oldPass: [
  280.  
  281.           {validator: validatePass, trigger: 'blur'}
  282.  
  283.         ]
  284.  
  285.       }
  286.  
  287.     }
  288.  
  289.   },
  290.  
  291.   mounted() {
  292.  
  293.     this.initAdmin()
  294.  
  295.   },
  296.  
  297.   methods: {
  298.  
  299.     // 2-7 预校验 提交表单
  300.  
  301.     submitForm(formName) {
  302.  
  303.       this.$refs[formName].validate((valid) => {
  304.  
  305.         if (valid) {
  306.  
  307.           // alert('submit!');
  308.  
  309.           this.ruleForm.adminId = this.admin.id
  310.  
  311.           this.putRequest('/admin/pass', this.ruleForm).then(resp => {
  312.  
  313.             if (resp) {
  314.  
  315.               // 更新密码成功后 退出登录
  316.  
  317.               this.postRequest('/logout') // 退出登录
  318.  
  319.               window.sessionStorage.removeItem('user')
  320.  
  321.               window.sessionStorage.removeItem('tokenStr')
  322.  
  323.               this.$store.commit('initRoutes', []) // 初始化路由 菜单 置空
  324.  
  325.               this.$router.replace('/') // 跳到登录页面
  326.  
  327.             }
  328.  
  329.           })
  330.  
  331.         } else {
  332.  
  333.           console.log('error submit!!');
  334.  
  335.           return false;
  336.  
  337.         }
  338.  
  339.       });
  340.  
  341.     },
  342.  
  343.     // 2-7 重围修改密码表单
  344.  
  345.     resetForm(formName) {
  346.  
  347.       this.$refs[formName].resetFields();
  348.  
  349.     },
  350.  
  351.     // 2-4 修改密码
  352.  
  353.     showUpdatePasswordView() {
  354.  
  355.       this.passwordDialogVisible = true
  356.  
  357.     },
  358.  
  359.     // 1-9 更新用户
  360.  
  361.     updateAdminInfo() {
  362.  
  363.       this.putRequest('/admin/info', this.admin2).then(resp => {
  364.  
  365.         if (resp) {
  366.  
  367.           this.dialogVisible = false
  368.  
  369.           this.initAdmin()
  370.  
  371.         }
  372.  
  373.       })
  374.  
  375.     },
  376.  
  377.     // 1-4 编辑用户信息弹框
  378.  
  379.     showUpdateAdminInfoView() {
  380.  
  381.       this.dialogVisible = true
  382.  
  383.     },
  384.  
  385.     initAdmin() {
  386.  
  387.       this.getRequest('/admin/info').then(resp => {
  388.  
  389.         if (resp) {
  390.  
  391.           this.admin = resp
  392.  
  393.           this.admin2 = Object.assign({}, this.admin) // 1-6 对象拷贝给 admin2
  394.  
  395.           window.sessionStorage.setItem('user', JSON.stringify(resp))
  396.  
  397.           this.$store.commit('INIT_ADMIN', resp)
  398.  
  399.         }
  400.  
  401.       })
  402.  
  403.     }
  404.  
  405.   }
  406.  
  407. }
  408.  
  409. </script>
  410.  
  411. <style scoped>
  412.  
  413. </style>

十四、源代码

前端地址：

后端地址：

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发