init

README.md

+# hmit-enterprise-admin
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```

babel.config.js

+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

gulpfile.js

+var gulp   = require('gulp')
+var $      = require('gulp-load-plugins')()
+var fs     = require('fs')
+var path   = require('path')
+var del    = require('del')
+//var colors = require('colors')
+var child_process = require('child_process')
+
+var theme            = {}
+var themeList        = require('./src/element-ui/config.js').filter(item => !item.hasBuild)
+var styleFileDir     = './src/assets/scss'
+var styleFileDirTemp = `${styleFileDir}-temp`
+var themeFileDir     = './public/element-theme'
+var et               = require('element-theme')
+var etOptions        = require('./package.json')['element-theme']
+var themeFileName    = etOptions.config.replace(/.*\/(.+\.scss)/, '$1')
+
+/**
+ * 构建生成主题
+ */
+gulp.task('themes', () => {
+  if (themeList.length <= 0) { return del(styleFileDirTemp) }
+
+  // 删除临时文件，保证本次操作正常执行
+  //del(styleFileDirTemp)
+  console.log('del(styleFileDirTemp)');
+
+  // 拷贝一份scss样式文件夹，作为构建的临时处理文件夹
+  //child_process.spawnSync('cp', ['-r', styleFileDir, styleFileDirTemp])
+  console.log('copy styleFileDirTemp');
+
+  // 拷贝element组件scss变量样式文件至临时处理文件夹中，并修改相应配置信息
+  //child_process.spawnSync('cp', ['-r', etOptions.config, styleFileDirTemp])
+  etOptions.config = `${styleFileDirTemp}/${themeFileName}`
+
+  // 开始构建生成
+  fnCreate(themeList)
+
+  function fnCreate (themeList) {
+    if (themeList.length >= 1) {
+      // 保存当前构建生成的主题对象
+      theme = themeList[0]
+
+      console.log('\n')
+      console.log('-------------------- 待构建，主题 -------------------------')
+      console.log(themeList)
+      console.log('\n')
+      console.log('-------------------- 构建中，主题 -------------------------')
+      console.log(theme)
+      console.log('\n')
+
+      // 修改.scss临时文件中的$--color-primary主题变量值
+      var data = fs.readFileSync(etOptions.config, 'utf8')
+      var result = data.replace(/\$--color-primary:(.*) !default;/, `$--color-primary:${theme.color} !default;`)
+      fs.writeFileSync(path.resolve(etOptions.config), result)
+
+      // 修改aui.scss临时文件中引入element组件主题变量文件路径
+      var data = fs.readFileSync(`${styleFileDirTemp}/aui.scss`, 'utf8')
+      var result = data.replace(new RegExp(`(@import \")(.*\/)(${themeFileName}\";)`), '$1./$3')
+      fs.writeFileSync(path.resolve(`${styleFileDirTemp}/aui.scss`), result)
+
+      // 调用element-theme插件，生成element组件主题
+      etOptions.out = `${themeFileDir}/${theme.name}`
+      et.run(etOptions, () => {
+        // 生成后，构建同主题色aui.css项目主题
+        gulp.start(['styles'], () => {
+          // 递归下一步
+          themeList.splice(0, 1)
+          fnCreate(themeList)
+        })
+      })
+    } else {
+      // 删除临时文件
+      del(styleFileDirTemp)
+      console.log('\n')
+      console.log('-------------------- 构建完毕，删除临时文件 -------------------------')
+      console.log(styleFileDirTemp)
+      console.log('\n')
+
+      // 删除主题不需要的部分文件
+      var files = [
+        `${themeFileDir}/**/*.css`,
+        `!${themeFileDir}/**/index.css`,
+        `!${themeFileDir}/**/aui.css`,
+        `!${themeFileDir}/**/fonts`
+      ]
+      del(files)
+      console.log('-------------------- 构建完毕，删除主题独立组件文件 -------------------------')
+      console.log(files)
+      console.log('\n')
+    }
+  }
+})
+
+gulp.task('styles', () => {
+  return gulp.src([`${styleFileDirTemp}/aui.scss`])
+    .pipe($.sass().on('error', $.sass.logError))
+    .pipe($.autoprefixer({
+      browsers: etOptions.browsers,
+      cascade: false
+    }))
+    .pipe($.cleanCss())
+    .pipe($.rename('aui.css'))
+    .pipe(gulp.dest(`${themeFileDir}/${theme.name}`))
+})

package.json

+{
+  "name": "hmit-enterprise-admin",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "build:sit": "vue-cli-service build --mode production.sit",
+    "build:uat": "vue-cli-service build --mode production.uat",
+    "build:prod": "vue-cli-service build --mode production",
+    "lint": "vue-cli-service lint",
+    "et": "node_modules/.bin/et",
+    "et:init": "node_modules/.bin/et -i",
+    "et:list": "gulp themes"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "babel-plugin-component": "^1.1.1",
+    "babel-eslint": "^8.0.1",
+    "element-theme": "^2.0.1",
+    "element-ui": "^2.11.1",
+    "gulp-autoprefixer": "^6.1.0",
+    "gulp-clean-css": "^4.2.0",
+    "gulp-load-plugins": "^2.0.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.15",
+    "node-sass": "^4.12.0",
+    "qs": "^6.7.0",
+    "quill": "^1.3.6",
+    "sass-loader": "^7.1.0",
+    "screenfull": "^4.2.1",
+    "svg-sprite-loader": "^4.1.6",
+    "vue": "^2.6.10",
+    "vue-i18n": "^8.12.0",
+    "vue-router": "^3.0.7",
+    "vuex": "^3.1.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.10.0",
+    "@vue/cli-plugin-eslint": "^3.10.0",
+    "@vue/cli-service": "^3.10.0",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "element-theme-chalk": "^2.11.1",
+    "natives": "^1.1.6",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "@vue/standard"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "engines": {
+    "node": ">= 8.11.1",
+    "npm": ">= 5.6.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ],
+  "element-theme": {
+    "config": "./src/element-ui/theme-variables.scss",
+    "out": "./src/element-ui/theme",
+    "minimize": true,
+    "browsers": [
+      "> 1%",
+      "last 2 versions",
+      "not ie <= 10"
+    ]
+  }
+}

public/index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
+  <!-- 站点配置 -->
+  <script>
+    window.SITE_CONFIG = {};
+    window.SITE_CONFIG['version'] = 'v1.0.0';
+    window.SITE_CONFIG['nodeEnv'] = '<%= process.env.VUE_APP_NODE_ENV %>';
+    window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';                      // api请求地址
+    window.SITE_CONFIG['storeState'] = {};                  // vuex本地储存初始化状态（用于不刷新页面的情况下，也能重置初始化项目中所有状态）
+    window.SITE_CONFIG['contentTabDefault'] = {             // 内容标签页默认属性对象
+      'name': '',        // 名称, 由 this.$route.name 自动赋值（默认，名称 === 路由名称 === 路由路径）
+      'params': {},      // 参数, 由 this.$route.params 自动赋值
+      'query': {},       // 查询参数, 由 this.$route.query 自动赋值
+      'menuId': '',      // 菜单id（用于选中侧边栏菜单，与this.$store.state.sidebarMenuActiveName进行匹配）
+      'title': '',       // 标题
+      'isTab': true,     // 是否通过tab展示内容?
+      'iframeURL': ''    // 是否通过iframe嵌套展示内容? (以http[s]://开头, 自动匹配)
+    };
+    window.SITE_CONFIG['menuList'] = [];                     // 左侧菜单列表（后台返回，未做处理）
+    window.SITE_CONFIG['permissions'] = [];                  // 页面按钮操作权限（后台返回，未做处理）
+    window.SITE_CONFIG['dynamicRoutes'] = [];                // 动态路由列表
+    window.SITE_CONFIG['dynamicMenuRoutes'] = [];            // 动态(菜单)路由列表
+    window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false; // 动态(菜单)路由是否已经添加的状态标示（用于判断是否需要重新拉取数据并进行动态添加操作）
+  </script>
+
+  <!-- 开发环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
+  <% } %>
+  <!-- 集成测试环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'prod:sit') { %>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
+  <% } %>
+  <!-- 验收测试环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'prod:uat') { %>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
+  <% } %>
+  <!-- 生产环境 -->
+  <% if (process.env.VUE_APP_NODE_ENV === 'prod') { %>
+    <script>window.SITE_CONFIG['apiURL'] = 'http://localhost:8080/hmit-admin';</script>
+  <% } %>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/App.vue

+<template>
+  <transition name="el-fade-in-linear">
+    <router-view />
+  </transition>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import { messages } from '@/i18n'
+export default {
+  watch: {
+    '$i18n.locale': 'i18nHandle'
+  },
+  created () {
+    this.i18nHandle(this.$i18n.locale)
+  },
+  methods: {
+    i18nHandle (val, oldVal) {
+      Cookies.set('language', val)
+      document.querySelector('html').setAttribute('lang', val)
+      document.title = messages[val].brand.lg
+      // 非登录页面，切换语言刷新页面
+      if (this.$route.name !== 'login' && oldVal) {
+        window.location.reload()
+      }
+    }
+  }
+}
+</script>

src/assets/scss/aui.scss

+// 变量
+@import "~@/element-ui/theme-variables.scss";
+@import "./variables.scss";
+// 公共
+@import "./normalize.scss";
+@import "./common.scss";
+// 页面
+@import "./pages/login.scss";
+@import "./pages/404.scss";
+// 模块
+@import "./modules/home.scss";

src/assets/scss/modules/home.scss

+.mod-home {
+  table {
+    width: 100%;
+    border: 1px solid $--border-color-lighter;
+    border-collapse: collapse;
+    th,
+    td {
+      padding: 12px 10px;
+      border: 1px solid $--border-color-lighter;
+    }
+    th {
+      width: 30%;
+    }
+  }
+}

src/assets/scss/normalize.scss

+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
\ No newline at end of file

src/assets/scss/pages/404.scss

+.aui-page__not-found {
+  .aui-content {
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+    min-height: 100vh;
+    padding: 15% 50px 50px;
+    text-align: center;
+    &__wrapper {
+      height: 100vh;
+      background-color: transparent;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+  .title {
+    margin: 0 0 15px;
+    font-size: 10em;
+    font-weight: 400;
+    color: $--color-text-regular;
+  }
+  .desc {
+    margin: 0 0 20px;
+    font-size: 26px;
+    color: $--color-text-secondary;
+    > em {
+      margin: 0 5px;
+      font-style: normal;
+      color: $--color-warning;
+    }
+  }
+  .btn-bar .el-button {
+    margin: 0 15px;
+  }
+}
+@media (max-width: 767px) {
+  .aui-page__not-found {
+    .title {
+      font-size: 8em;
+    }
+    .desc {
+      font-size: 20px;
+    }
+    .btn-bar .el-button {
+      margin: 0 7.5px;
+    }
+  }
+}
\ No newline at end of file

src/assets/scss/pages/login.scss

+.aui-page__login {
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    content: "";
+  }
+  &::before {
+    background-image: url(~@/assets/img/login_bg.jpg);
+    background-size: cover;
+  }
+  &::after {
+    background-color: rgba(38, 50, 56, .4);
+  }
+  .aui-content {
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 50px 20px 150px;
+    text-align: center;
+    &__wrapper {
+      height: 100vh;
+      background-color: transparent;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+  .login-header {
+    padding: 20px;
+    color: #fff;
+    .login-brand {
+      margin: 0 0 15px;
+      font-size: 40px;
+      font-weight: 400;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+    }
+    .login-intro {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      > li {
+        font-size: 16px;
+        line-height: 1.5;
+        color: rgba(255, 255, 255, .6);
+        & + li {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+  .login-body,
+  .login-footer {
+    width: 460px;
+  }
+  .login-body {
+    padding: 20px 30px;
+    background-color: #fff;
+    .login-title {
+      font-size: 18px;
+      font-weight: 400;
+    }
+    .el-input__prefix .el-input__icon {
+      font-size: 16px;
+    }
+    .login-captcha {
+      height: $--input-height;
+      line-height: $--input-height -2px;
+      > img {
+        max-width: 100%;
+        cursor: pointer;
+      }
+    }
+    .login-shortcut {
+      margin-bottom: 20px;
+      &__title {
+        position: relative;
+        margin: 0 0 15px;
+        font-weight: 400;
+        
+        &::before {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          left: 0;
+          z-index: 1;
+          content: "";
+          height: 1px;
+          margin-top: -.5px;
+          background-color: $--border-color-base;
+          overflow: hidden;
+        }
+        > span {
+          position: relative;
+          z-index: 2;
+          padding: 0 20px;
+          color: rgba(0, 0, 0, .3);
+          background-color: #fff;
+        }
+      }
+      &__list {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+        font-size: 0;
+        > li {
+          display: inline-block;
+          vertical-align: middle;
+          margin: 0 10px;
+          font-size: 28px;
+        }
+      }
+    }
+    .login-guide {
+      color: rgba(0, 0, 0, .3);
+    }
+  }
+  .login-footer {
+    position: absolute;
+    bottom: 0;
+    padding: 20px;
+    color: rgba(255, 255, 255, .6);
+    p {
+      margin: 10px 0;
+    }
+    a {
+      padding: 0 5px;
+      color: rgba(255, 255, 255, .6);
+      &:focus,
+      &:hover {
+        color: #fff;
+      }
+    }
+  }
+  // 右侧垂直风格
+  &--right-vertical {
+    .aui-content {
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+      align-items: stretch;
+      padding: 0;
+    }
+    .login-header {
+      flex: 1;
+      display: flex;
+      flex-flow: column wrap;
+      justify-content: center;
+      padding: 30px 120px;
+      text-align: left;
+    }
+    .login-body {
+      position: relative;
+      display: flex;
+      flex-flow: column wrap;
+      justify-content: center;
+      padding: 120px 30px 150px;
+      text-align: center;
+      .login-guide {
+        margin-top: 0;
+      }
+    }
+    .login-footer {
+      right: 0;
+      color: $--color-text-regular;
+      a {
+        color: $--color-text-regular;
+        &:focus,
+        &:hover {
+          color: $--color-primary;
+        }
+      }
+    }
+  }
+}
+@media (max-width: 991px) {
+  .aui-page__login {
+    &--right-vertical {
+      .login-header {
+        padding: 30px;
+      }
+    }
+  }
+}
+@media (max-width: 767px) {
+  .aui-page__login {
+    &--right-vertical {
+      .login-header {
+        .login-brand,
+        .login-intro {
+          display: none;
+        }
+      }
+    }
+  }
+}
+@media (max-width: 575px) {
+  .aui-page__login {
+    .login-body,
+    .login-footer {
+      width: 100%;
+    }
+    .login-captcha {
+      text-align: left;
+      > img {
+        width: 136px;
+      }
+    }
+    &--right-vertical {
+      .login-header {
+        display: none;
+      }
+    }
+  }
+}
\ No newline at end of file

src/assets/scss/variables.scss

+// Base
+$base--line-height: 1.15;
+
+// Navbar
+$navbar--height: 50px;
+
+// Sidebar
+$sidebar--width: 230px;
+$sidebar--width-fold: 64px;
+$sidebar--background-color-dark: #263238;
+$sidebar--text-color-dark: #8a979e;
+$sidebar--menu-item-height: 48px;
+
+// Content
+$content--padding: 15px; 
+$content--background-color: #f1f4f5;
+$content--card-header-height: 60px;
+$content--tabs-header-height: 38px;
+// Content, 填充整屏高度(非tabs状态) = 整屏高度 - 导航条高度 - aui-content上下内边距高度
+$content--fill-height: calc(100vh - #{$navbar--height} - #{$content--padding * 2});
+// Content, 填充整屏高度(是tabs状态) = 整屏高度 - 导航条高度 - tabs组件header高度 - tabs组件content上下内边距高度
+$content--fill-height-tabs: calc(100vh - #{$navbar--height} - #{$content--tabs-header-height} - #{$content--padding * 2});

src/components/ren-dept-tree/index.js

+import RenDeptTree from './src/ren-dept-tree'
+
+RenDeptTree.install = function (Vue) {
+  Vue.component(RenDeptTree.name, RenDeptTree)
+}
+
+export default RenDeptTree

src/components/ren-dept-tree/src/ren-dept-tree.vue

+<template>
+  <div>
+  <el-input v-model="showDeptName" :placeholder="placeholder" @focus="deptDialog">
+    <el-button slot="append" icon="el-icon-search" @click="deptDialog"></el-button>
+  </el-input>
+  <el-input :value="value" style="display: none"></el-input>
+  <el-dialog :visible.sync="visibleDept" width="30%" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form size="mini" :inline="true">
+      <el-form-item :label="$t('keyword')">
+        <el-input v-model="filterText"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="default">{{ $t('query') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <el-tree
+      class="filter-tree"
+      :data="deptList"
+      :default-expanded-keys="expandedKeys"
+      :props="{ label: 'name', children: 'children' }"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :highlight-current="true"
+      node-key="id"
+      ref="tree">
+    </el-tree>
+    <template slot="footer">
+      <el-button type="default" @click="cancelHandle()" size="mini">{{ $t('cancel') }}</el-button>
+      <el-button v-if="query" type="info" @click="clearHandle()" size="mini">{{ $t('clear') }}</el-button>
+      <el-button type="primary" @click="commitHandle()" size="mini">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  name: 'RenDeptTree',
+  data () {
+    return {
+      filterText: '',
+      visibleDept: false,
+      deptList: [],
+      showDeptName: '',
+      expandedKeys: null,
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  props: {
+    value: [Number, String],
+    deptName: String,
+    query: Boolean,
+    placeholder: String
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    },
+    deptName (val) {
+      this.showDeptName = val
+    }
+  },
+  methods: {
+    deptDialog () {
+      this.expandedKeys = null
+      if (this.$refs.tree) {
+        this.$refs.tree.setCurrentKey(null)
+      }
+      this.visibleDept = true
+      this.getDeptList(this.value)
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    getDeptList (id) {
+      return this.$http.get('/sys/dept/list').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.deptList = res.data
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(id)
+          this.expandedKeys = [id]
+        })
+      }).catch(() => {})
+    },
+    cancelHandle () {
+      this.visibleDept = false
+      this.deptList = []
+      this.filterText = ''
+    },
+    clearHandle () {
+      this.$emit('input', '')
+      this.$emit('update:deptName', '')
+      this.showDeptName = ''
+      this.visibleDept = false
+      this.deptList = []
+      this.filterText = ''
+    },
+    commitHandle () {
+      const node = this.$refs.tree.getCurrentNode()
+      if (!node) {
+        this.$message.error(this.$t('dept.chooseerror'))
+        return
+      }
+      this.$emit('input', node.id)
+      this.$emit('update:deptName', node.name)
+      this.showDeptName = node.name
+      this.visibleDept = false
+      this.deptList = []
+      this.filterText = ''
+    }
+  }
+}
+</script>

src/components/ren-process-detail/index.js

+import RenProcessDetail from './src/ren-process-detail'
+
+RenProcessDetail.install = function (Vue) {
+  Vue.component(RenProcessDetail.name, RenProcessDetail)
+}
+
+export default RenProcessDetail

src/components/ren-process-detail/src/ren-process-detail.vue

+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <h4>{{ $t('process.flowImage') }}</h4>
+    <img :src="getResourceURL()" class="image">
+    <h4>{{ $t('process.circulation') }}</h4>
+    <div class="mod-sys__dict">
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%;">
+        <el-table-column prop="activityName"  :label="$t('process.taskName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="assignee" :label="$t('process.assignee')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('task.startTime')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="endTime" :label="$t('task.endTime')"  header-align="center" align="center"></el-table-column>
+        <el-table-column prop="comment" :label="$t('process.comment')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="durationInSeconds" :label="$t('task.durationInSeconds')" header-align="center" align="center" width="180"></el-table-column>
+      </el-table>
+      <el-pagination
+        v-if="dataForm.pid === '0'"
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+<style scoped>
+  .image {
+    width: 60%;
+    display: block;
+    margin: 0 auto 30px auto;
+  }
+</style>
+
+<script>
+import Cookies from 'js-cookie'
+import qs from 'qs'
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  name: 'RenProcessDetail',
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/act/his/getTaskHandleDetailInfo',
+        getDataListIsPage: false,
+        createdIsNeed: false,
+        deleteIsBatch: true,
+        deleteIsBatchKey: 'deploymentId'
+      },
+      dataForm: {
+        processInstanceId: ''
+      }
+    }
+  },
+  created () {
+    this.dataForm.processInstanceId = this.$route.params.processInstanceId
+    this.getResourceURL()
+    this.getDataList()
+  },
+  methods: {
+    // 获取流程(xml/image)url地址
+    getResourceURL () {
+      var params = qs.stringify({
+        'token': Cookies.get('token'),
+        'processInstanceId': this.dataForm.processInstanceId
+      })
+      return `${window.SITE_CONFIG['apiURL']}/act/his/getInstImage?${params}`
+    }
+  }
+}
+</script>

src/components/ren-process-multiple/index.js

+import RenProcessMultiple from './src/ren-process-multiple'
+
+RenProcessMultiple.install = function (Vue) {
+  Vue.component(RenProcessMultiple.name, RenProcessMultiple)
+}
+
+export default RenProcessMultiple

src/components/ren-process-multiple/src/ren-process-multiple.vue

+<template>
+  <div>
+    <ren-process-start v-if="startProcessVisible" :saveFormUrl="saveFormUrl" :updateInstanceIdUrl="updateInstanceIdUrl" :dataFormName="dataFormName" ref="renProcessStart"></ren-process-start>
+    <ren-process-running v-if="runningHandleVisible" ref="renProcessRunning"></ren-process-running>
+    <ren-process-detail v-if="processDetailVisible" ref="renProcessDetail"></ren-process-detail>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RenProcessMultiple',
+  data () {
+    return {
+      // 是否显示启动流程
+      startProcessVisible: false,
+      // 是否任务处理
+      runningHandleVisible: false,
+      // 是否显示流程处理详情
+      processDetailVisible: false,
+      // 用于区分流程启动（start）、任务处理(taskHandle)以及查看详情(null)
+      showType: null,
+      // 父级对象
+      parentObj: null,
+      dataForm: {
+        processDefinitionKey: '',
+        taskId: '',
+        businessKey: '',
+        processInstanceId: ''
+      },
+      // 回调函数
+      callbacks: {
+        // 启动成功回调
+        startProcessSuccessCallback: null,
+        // 启动失败回调
+        startProcessErrorCallback: null,
+        // 任务处理成功回调
+        taskHandleSuccessCallback: null,
+        // 任务处理失败回调
+        taskHandleErrorCallback: null,
+        // 表单保存成功回调
+        formSaveSuccessCallback: null,
+        // 表单保存失败回调
+        formSaveErrorCallback: null
+      }
+    }
+  },
+  components: {
+  },
+  created () {
+    this.$nextTick(() => {
+      if (!this.showType) {
+        this.startProcessVisible = false
+        this.runningHandleVisible = false
+        this.processDetailVisible = true
+      } else if (this.showType === 'start') {
+        // 启动流程
+        this.startProcessVisible = true
+        this.$nextTick(() => {
+          this.$refs.renProcessStart.rootObj = this.parentObj
+          this.$refs.renProcessStart.callbacks = this.callbacks
+          this.$refs.renProcessStart.dataForm.processDefinitionKey = this.dataForm.processDefinitionKey
+        })
+      } else if (this.showType === 'taskHandle') {
+        // 任务处理
+        this.runningHandleVisible = true
+        this.$nextTick(() => {
+          this.$refs.renProcessRunning.rootObj = this.parentObj
+          this.$refs.renProcessRunning.dataForm.taskId = this.dataForm.taskId
+          this.$refs.renProcessRunning.dataForm.processInstanceId = this.dataForm.processInstanceId
+          this.$refs.renProcessRunning.callbacks = this.callbacks
+          this.$refs.renProcessRunning.dataForm.businessKey = this.dataForm.businessKey
+          this.$refs.renProcessRunning.dataForm.processDefinitionKey = this.dataForm.processDefinitionKey
+        })
+      }
+    })
+  },
+  props: {
+    saveFormUrl: String,
+    updateInstanceIdUrl: String,
+    dataFormName: String
+  },
+  watch: {
+  },
+  methods: {
+  }
+}
+</script>

src/components/ren-process-running/index.js

+import RenProcessRunning from './src/ren-process-running'
+
+RenProcessRunning.install = function (Vue) {
+  Vue.component(RenProcessRunning.name, RenProcessRunning)
+}
+
+export default RenProcessRunning

src/components/ren-process-running/src/ren-process-running.vue

+<template>
+  <div>
+    <el-button type="primary" @click="completeTask()">{{ $t('process.completeTask') }}</el-button>
+    <el-button type="warning" @click="rejectTask()">{{ $t('process.rejectTask') }}</el-button>
+    <el-button type="success" @click="rollbackTask()">{{ $t('process.doBackRollback') }}</el-button>
+    <el-button type="info" @click="entrustTask()">{{ $t('process.entrustTask') }}</el-button>
+    <el-button type="danger" @click="terminationTask()">{{ $t('process.terminationTask') }}</el-button>
+    <ren-task-back v-if="renTaskBackVisible" ref="renTaskBack"></ren-task-back>
+    <ren-task-entrust v-if="renTaskEntrustVisible" ref="renTaskEntrust"></ren-task-entrust>
+    <ren-task-handle v-if="renTaskHandleVisible" ref="renTaskHandle"></ren-task-handle>
+  </div>
+</template>
+
+<script>
+import RenTaskBack from './ren-task-back'
+import RenTaskEntrust from './ren-task-entrust'
+import RenTaskHandle from './ren-task-handle'
+export default {
+  name: 'RenProcessRunning',
+  data () {
+    return {
+      // 是否显示退回窗口
+      renTaskBackVisible: false,
+      renTaskEntrustVisible: false,
+      renTaskHandleVisible: false,
+      parentObj: null,
+      dataForm: {
+        taskId: '',
+        businessKey: '',
+        processDefinitionKey: '',
+        processInstanceId: ''
+      },
+      // 回调函数
+      callbacks: {
+        taskHandleSuccessCallback: null,
+        taskHandleErrorCallback: null
+      }
+    }
+  },
+  components: {
+    RenTaskBack,
+    RenTaskEntrust,
+    RenTaskHandle
+  },
+  created () {
+    this.$nextTick(() => {
+    })
+  },
+  props: {
+  },
+  watch: {
+  },
+  methods: {
+    completeTask () {
+      this.renTaskHandleVisible = true
+      this.$nextTick(() => {
+        this.$refs.renTaskHandle.dataForm.taskId = this.dataForm.taskId
+        this.$refs.renTaskHandle.callbacks = this.callbacks
+        this.$refs.renTaskHandle.handleType = 'complete'
+        this.$refs.renTaskHandle.init()
+      })
+    },
+    rejectTask () {
+      this.renTaskHandleVisible = true
+      this.$nextTick(() => {
+        this.$refs.renTaskHandle.dataForm.taskId = this.dataForm.taskId
+        this.$refs.renTaskHandle.callbacks = this.callbacks
+        this.$refs.renTaskHandle.handleType = 'reject'
+        this.$refs.renTaskHandle.init()
+      })
+    },
+    rollbackTask () {
+      this.renTaskBackVisible = true
+      this.$nextTick(() => {
+        this.$refs.renTaskBack.dataForm.taskId = this.dataForm.taskId
+        this.$refs.renTaskBack.dataForm.processInstanceId = this.dataForm.processInstanceId
+        this.$refs.renTaskBack.callbacks = this.callbacks
+        this.$refs.renTaskBack.init()
+      })
+    },
+    entrustTask () {
+      this.renTaskEntrustVisible = true
+      this.$nextTick(() => {
+        this.$refs.renTaskEntrust.dataForm.taskId = this.dataForm.taskId
+        this.$refs.renTaskEntrust.callbacks = this.callbacks
+        this.$refs.renTaskEntrust.init()
+      })
+    },
+    terminationTask () {
+      this.renTaskHandleVisible = true
+      this.$nextTick(() => {
+        this.$refs.renTaskHandle.dataForm.taskId = this.dataForm.taskId
+        this.$refs.renTaskHandle.callbacks = this.callbacks
+        this.$refs.renTaskHandle.handleType = 'termination'
+        this.$refs.renTaskHandle.init()
+      })
+    }
+  }
+}
+</script>

src/components/ren-process-running/src/ren-task-back.vue

+<template>
+  <el-dialog :visible.sync="visible" :title="$t('process.doBackRollback')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+      <el-form-item :label="$t('process.comment')" prop="comment">
+            <el-input type="textarea" v-model="dataForm.comment" :placeholder="$t('process.comment')"></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="doBackRollback()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import qs from 'qs'
+export default {
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        id: '',
+        comment: '',
+        taskId: '',
+        processInstanceId: ''
+      },
+      // 回调函数
+      callbacks: {
+        taskHandleSuccessCallback: null,
+        taskHandleErrorCallback: null
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        comment: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    doBackRollback: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        var params = qs.stringify({
+          'taskId': this.dataForm.taskId,
+          'processInstanceId': this.dataForm.processInstanceId,
+          'comment': this.dataForm.comment
+        })
+        this.$http['post']('/act/task/backPreviousTask?', params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+            if (this.callbacks.taskHandleErrorCallback) {
+              this.callbacks.taskHandleErrorCallback(res)
+            }
+            return
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              if (this.callbacks.taskHandleSuccessCallback) {
+                this.callbacks.taskHandleSuccessCallback(res)
+              }
+            }
+          })
+        })
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/components/ren-process-running/src/ren-task-entrust.vue

+<template>
+  <el-dialog :visible.sync="visible" :title="$t('process.entrustTask')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+      <el-form-item :label="$t('process.assignee')">
+        <el-input v-model="dataForm.entrustUserName" class="input-with-select">
+          <el-button slot="append" icon="el-icon-search" @click="selectUserInfo()"></el-button>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="entrustTask()">{{ $t('confirm') }}</el-button>
+    </template>
+    <select-user v-if="selectUserVisible" ref="selectUser" ></select-user>
+  </el-dialog>
+</template>
+
+<script>
+import SelectUser from './select-user'
+import qs from 'qs'
+export default {
+  data () {
+    return {
+      visible: false,
+      selectUserVisible: false,
+      dataForm: {
+        id: '',
+        entrustUserId: '',
+        entrustUserName: '',
+        taskId: ''
+      },
+      // 回调函数
+      callbacks: {
+        taskHandleSuccessCallback: null,
+        taskHandleErrorCallback: null
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        entrustUserName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  components: {
+    SelectUser
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 委托
+    entrustTask () {
+      if (!this.dataForm.entrustUserId) {
+        this.$message.error(this.$t('process.entrustError'))
+        return
+      }
+      var task = qs.stringify({
+        taskId: this.dataForm.taskId,
+        assignee: this.dataForm.entrustUserId
+      })
+      this.$http['post']('/act/task/entrust', task).then(({ data: res }) => {
+        if (res.code !== 0) {
+          this.$message.error(res.msg)
+          if (this.callbacks.taskHandleErrorCallback) {
+            this.callbacks.taskHandleErrorCallback(res)
+          }
+          return
+        }
+        this.$message({
+          message: this.$t('prompt.success'),
+          type: 'success',
+          duration: 500,
+          onClose: () => {
+            this.visible = false
+            if (this.callbacks.taskHandleSuccessCallback) {
+              this.callbacks.taskHandleSuccessCallback(res)
+            }
+          }
+        })
+      }).catch(() => {})
+    },
+    selectUserInfo () {
+      this.selectUserVisible = true
+      this.$nextTick(() => {
+        this.$refs.selectUser.dataForm.id = ''
+        this.$refs.selectUser.init(this.setUserInfo)
+      })
+    },
+    setUserInfo (userInfo) {
+      this.dataForm.entrustUserId = userInfo.id
+      this.dataForm.entrustUserName = userInfo.realName
+    }
+  }
+}
+</script>

src/components/ren-process-running/src/ren-task-handle.vue

+<template>
+  <el-dialog :visible.sync="visible" :title="handleTitle" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
+      <el-form-item :label="$t('process.comment')" prop="comment">
+        <el-input type="textarea" v-model="dataForm.comment" :placeholder="$t('process.comment')"></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import debounce from 'lodash/debounce'
+import qs from 'qs'
+export default {
+  data () {
+    return {
+      visible: false,
+      handleType: '',
+      handleTitle: '',
+      dataForm: {
+        comment: '',
+        taskId: ''
+      },
+      // 回调函数
+      callbacks: {
+        taskHandleSuccessCallback: null,
+        taskHandleErrorCallback: null
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        comment: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      if (this.handleType === 'complete') {
+        this.handleTitle = this.$t('process.completeTask')
+      } else if (this.handleType === 'reject') {
+        this.handleTitle = this.$t('process.rejectTask')
+      } else if (this.handleType === 'termination') {
+        this.handleTitle = this.$t('process.terminationTask')
+      }
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmitHandle () {
+      if (this.handleType === 'complete') {
+        this.completeTask()
+      } else if (this.handleType === 'reject') {
+        this.rejectTask()
+      } else if (this.handleType === 'termination') {
+        this.terminationTask()
+      }
+    },
+    // 驳回
+    rejectTask: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        if (!this.dataForm.taskId) {
+          return false
+        }
+        var params = qs.stringify({
+          'taskId': this.dataForm.taskId,
+          'comment': this.dataForm.comment
+        })
+        this.$http['post']('/act/task/backToFirst?', params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+            if (this.callbacks.taskHandleErrorCallback) {
+              this.callbacks.taskHandleErrorCallback(res)
+            }
+            return
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              if (this.callbacks.taskHandleSuccessCallback) {
+                this.callbacks.taskHandleSuccessCallback(res)
+              }
+            }
+          })
+        })
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    // 通过
+    completeTask: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        if (!this.dataForm.taskId) {
+          return false
+        }
+        var params = qs.stringify({
+          'taskId': this.dataForm.taskId,
+          'comment': this.dataForm.comment
+        })
+        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+            if (this.callbacks.taskHandleErrorCallback) {
+              this.callbacks.taskHandleErrorCallback(res)
+            }
+            return
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              if (this.callbacks.taskHandleSuccessCallback) {
+                this.callbacks.taskHandleSuccessCallback(res)
+              }
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false }),
+    // 终止
+    terminationTask: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        if (!this.dataForm.taskId) {
+          return false
+        }
+        var task = qs.stringify({
+          taskId: this.dataForm.taskId,
+          comment: this.dataForm.comment
+        })
+        this.$http['post']('/act/task/endProcess', task).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.$message.error(res.msg)
+            if (this.callbacks.taskHandleErrorCallback) {
+              this.callbacks.taskHandleErrorCallback(res)
+            }
+            return
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              if (this.callbacks.taskHandleSuccessCallback) {
+                this.callbacks.taskHandleSuccessCallback(res)
+              }
+            }
+          })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/components/ren-process-running/src/select-user.vue

+<template>
+  <el-dialog :visible.sync="visibleSelect" width="60%" :modal="false" :title="$t('user.select')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <div class="mod-sys__user">
+      <el-form :inline="true" size="mini" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-input v-model="dataForm.username" :placeholder="$t('user.username')" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%;" size="mini">
+        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+        <el-table-column prop="username" :label="$t('user.username')" sortable="custom" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="deptName" :label="$t('user.deptName')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="email" :label="$t('user.email')" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="mobile" :label="$t('user.mobile')" sortable="custom" header-align="center" align="center"></el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle">
+      </el-pagination>
+    </div>
+    <template slot="footer">
+      <el-button type="default" @click="cancelHandle()">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="commitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      visibleSelect: false,
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/user/page',
+        getDataListIsPage: true
+      },
+      dataForm: {
+        username: ''
+      },
+      callback: null
+    }
+  },
+  components: {},
+  methods: {
+    init (callback) {
+      this.visibleSelect = true
+      this.callback = callback
+      this.$nextTick(() => {
+        this.getDataList()
+      })
+    },
+    cancelHandle () {
+      this.visibleSelect = false
+    },
+    commitHandle () {
+      if (this.callback) {
+        if (this.dataListSelections.length !== 1) {
+          this.$message.error(this.$t('user.selecterror'))
+          return
+        } else {
+          this.callback(this.dataListSelections[0])
+        }
+      }
+      this.visibleSelect = false
+    }
+  }
+}
+</script>

src/components/ren-process-start/index.js

+import RenProcessStart from './src/ren-process-start'
+
+RenProcessStart.install = function (Vue) {
+  Vue.component(RenProcessStart.name, RenProcessStart)
+}
+
+export default RenProcessStart

src/components/ren-process-start/src/ren-process-start.vue

+<template>
+  <el-button type="primary" @click="processStartHandle()">{{ $t('process.createInstance') }}</el-button>
+</template>
+
+<script>
+import qs from 'qs'
+export default {
+  name: 'RenProcessStart',
+  data () {
+    return {
+      formUrl: '',
+      instanceIdUrl: '',
+      formName: null,
+      rootObj: null,
+      dataForm: {
+        processDefinitionKey: ''
+      },
+      // 回调函数
+      callbacks: {
+        startProcessSuccessCallback: null,
+        startProcessErrorCallback: null,
+        formSaveSuccessCallback: null,
+        formSaveErrorCallback: null
+      }
+    }
+  },
+  components: {
+  },
+  created () {
+    this.$nextTick(() => {
+      this.formUrl = this.saveFormUrl
+      this.instanceIdUrl = this.updateInstanceIdUrl
+      this.formName = this.dataFormName
+    })
+  },
+  props: {
+    saveFormUrl: String,
+    updateInstanceIdUrl: String,
+    dataFormName: String
+  },
+  watch: {
+    saveFormUrl (val) {
+      this.formUrl = val
+    },
+    updateInstanceIdUrl (val) {
+      this.instanceIdUrl = val
+    },
+    dataFormName (val) {
+      this.formName = val
+    }
+  },
+  methods: {
+    // 启动流程事件
+    processStartHandle () {
+      if (!this.formUrl) {
+        return this.$message.error(this.$t('process.formURLError'))
+      }
+      if (!this.dataForm.processDefinitionKey) {
+        return this.$message.error(this.$t('process.keyError'))
+      }
+      if (!this.formName) {
+        return this.$message.error(this.$t('process.formNameError'))
+      }
+      this.rootObj.$refs[this.formName].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http.get(`/act/process/lastestPage`, {
+          params: {
+            key: this.dataForm.processDefinitionKey
+          }
+        }).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          if (!res.data.list || res.data.list.length <= 0) {
+            return this.$message.error(this.$t('process.notExistError'))
+          }
+          this.$http['post'](this.formUrl, this.rootObj[this.formName]).then(({ data: res }) => {
+            if (res.code !== 0) {
+              this.$message.error(res.msg)
+              if (this.callbacks.formSaveErrorCallback) {
+                this.callbacks.formSaveErrorCallback(res)
+              }
+            }
+            if (this.callbacks.formSaveSuccessCallback) {
+              this.callbacks.formSaveSuccessCallback(res)
+            }
+            if (!res.data.businessKey) {
+              return this.$message.error(this.$t('process.businessKeyError'))
+              // this.startProcess(this.dataForm.processDefinitionKey, null, this.rootObj[this.formName])
+            } else {
+              this.startProcess(this.dataForm.processDefinitionKey, res.data.businessKey, this.rootObj[this.formName])
+            }
+          }).catch(() => {})
+        }).catch(() => {})
+      })
+    },
+    // 启动流程
+    startProcess (processDefinitionKey, businessKey, formData) {
+      var data = {
+        processDefinitionKey: processDefinitionKey,
+        businessKey: businessKey,
+        variables: formData
+      }
+      this.$http['post']('/act/running/startOfBusinessKey', data).then(({ data: res }) => {
+        if (res.code !== 0) {
+          if (this.callbacks.startProcessErrorCallback) {
+            this.callbacks.startProcessErrorCallback(res.data)
+          }
+        }
+        this.$message({
+          message: this.$t('prompt.success'),
+          type: 'success',
+          duration: 500,
+          onClose: () => {
+            if (this.callbacks.startProcessSuccessCallback) {
+              this.callbacks.startProcessSuccessCallback(res.data)
+            }
+          }
+        })
+        if (this.instanceIdUrl) {
+          var params = qs.stringify({
+            processInstanceId: res.data.processInstanceId,
+            processDefinitionKey: processDefinitionKey,
+            businessKey: businessKey
+          })
+          this.$http['post'](this.instanceIdUrl + '?' + params).then(({ data: res }) => {})
+        }
+      }).catch(() => {})
+    }
+  }
+}
+</script>

src/components/ren-radio-group/index.js

+import RenRadioGroup from './src/ren-radio-group'
+
+RenRadioGroup.install = function (Vue) {
+  Vue.component(RenRadioGroup.name, RenRadioGroup)
+}
+
+export default RenRadioGroup

src/components/ren-radio-group/src/ren-radio-group.vue

+<template>
+  <el-radio-group :value="value+''" @input="$emit('input', $event)">
+    <el-radio :label="data.dictValue" v-for="data in dataList" :key="data.dictValue">{{data.dictLabel}}</el-radio>
+  </el-radio-group>
+</template>
+<script>
+import { getDictDataList } from '@/utils'
+export default {
+  name: 'RenRadioGroup',
+  data () {
+    return {
+      dataList: getDictDataList(this.dictType)
+    }
+  },
+  props: {
+    value: [Number, String],
+    dictType: String
+  }
+}
+</script>

src/components/ren-region-tree/index.js

+import RenRegionTree from './src/ren-region-tree'
+
+RenRegionTree.install = function (Vue) {
+  Vue.component(RenRegionTree.name, RenRegionTree)
+}
+
+export default RenRegionTree

src/components/ren-region-tree/src/ren-region-tree.vue

+<template>
+  <div class="ren-region">
+  <el-input v-model="showName" :placeholder="placeholder" @focus="treeDialog">
+    <el-button slot="append" icon="el-icon-search" @click="treeDialog"></el-button>
+  </el-input>
+  <el-input :value="value" style="display: none"></el-input>
+  <el-dialog :visible.sync="visibleTree" width="360px" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form size="mini" :inline="true">
+      <el-form-item :label="$t('keyword')">
+        <el-input v-model="filterText"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="default">{{ $t('query') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <el-tree
+      class="filter-tree"
+      :data="dataList"
+      :default-expanded-keys="expandedKeys"
+      :props="{ label: 'name', children: 'children' }"
+      :expand-on-click-node="false"
+      :filter-node-method="filterNode"
+      :highlight-current="true"
+      node-key="id"
+      ref="tree">
+    </el-tree>
+    <template slot="footer">
+      <el-button type="default" @click="cancelHandle()" size="mini">{{ $t('cancel') }}</el-button>
+      <el-button type="info" @click="clearHandle()" size="mini">{{ $t('clear') }}</el-button>
+      <el-button type="primary" @click="commitHandle()" size="mini">{{ $t('confirm') }}</el-button>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+<style lang="scss">
+.ren-region {
+    .filter-tree {
+        max-height: 230px;
+        overflow: auto;
+    }
+    .el-dialog__body {
+        padding: 0px 0px 0px 20px;
+    }
+    .el-dialog__footer {
+        padding: 10px 20px 8px 20px;
+    }
+}
+</style>
+<script>
+import { treeDataTranslate } from '@/utils'
+export default {
+  name: 'RenRegionTree',
+  data () {
+    return {
+      filterText: '',
+      visibleTree: false,
+      dataList: [],
+      showName: '',
+      expandedKeys: null,
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  props: {
+    value: [Number, String],
+    parentName: String,
+    placeholder: String
+  },
+  watch: {
+    filterText (val) {
+      this.$refs.tree.filter(val)
+    },
+    parentName (val) {
+      this.showName = val
+    }
+  },
+  methods: {
+    treeDialog () {
+      this.expandedKeys = null
+      if (this.$refs.tree) {
+        this.$refs.tree.setCurrentKey(null)
+      }
+      this.visibleTree = true
+      this.getDataList(this.value)
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.name.indexOf(value) !== -1
+    },
+    getDataList (id) {
+      return this.$http.get('/sys/region/tree').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataList = treeDataTranslate(res.data)
+        this.$nextTick(() => {
+          this.$refs.tree.setCurrentKey(id)
+          this.expandedKeys = [id]
+        })
+      }).catch(() => {})
+    },
+    cancelHandle () {
+      this.visibleTree = false
+      this.dataList = []
+      this.filterText = ''
+    },
+    clearHandle () {
+      this.$emit('input', '0')
+      this.$emit('update:parentName', '')
+      this.showName = ''
+      this.visibleTree = false
+      this.dataList = []
+      this.filterText = ''
+    },
+    commitHandle () {
+      const node = this.$refs.tree.getCurrentNode()
+      if (!node) {
+        this.$message.error(this.$t('choose'))
+        return
+      }
+      this.$emit('input', node.id)
+      this.$emit('update:parentName', node.name)
+      this.showName = node.name
+      this.visibleTree = false
+      this.dataList = []
+      this.filterText = ''
+    }
+  }
+}
+</script>

src/components/ren-select/index.js

+import RenSelect from './src/ren-select'
+
+RenSelect.install = function (Vue) {
+  Vue.component(RenSelect.name, RenSelect)
+}
+
+export default RenSelect

src/components/ren-select/src/ren-select.vue

+<template>
+    <el-select :value="value+''" @input="$emit('input', $event)" :placeholder="placeholder" clearable>
+        <el-option :label="data.dictLabel" v-for="data in dataList" :key="data.dictValue" :value ="data.dictValue">{{data.dictLabel}}</el-option>
+    </el-select>
+</template>
+<script>
+import { getDictDataList } from '@/utils'
+export default {
+  name: 'RenSelect',
+  data () {
+    return {
+      dataList: getDictDataList(this.dictType)
+    }
+  },
+  props: {
+    value: [Number, String],
+    dictType: String,
+    placeholder: String
+  }
+}
+</script>

src/element-ui/config.js

+/* eslint-disable */
+/**
+ * 主题配置信息
+ * 
+ * hasBuild 是否已构建？
+ *  true ：已构建，不再构建
+ *  false：未构建，执行命令后会自动构建
+ */
+module.exports = [
+  {  name: 'default',   color: '#409EFF', desc: '默认色', hasBuild: false },
+  {  name: 'cyan',      color: '#0BB2D4', desc: '青色',   hasBuild: false },
+  {  name: 'blue',      color: '#3E8EF7', desc: '蓝色',   hasBuild: false },
+  {  name: 'green',     color: '#11C26D', desc: '绿色',   hasBuild: false },
+  {  name: 'turquoise', color: '#17B3A3', desc: '蓝绿色', hasBuild: false },
+  {  name: 'indigo',    color: '#667AFA', desc: '靛青色', hasBuild: false },
+  {  name: 'brown',     color: '#997B71', desc: '棕色',   hasBuild: false },
+  {  name: 'purple',    color: '#9463F7', desc: '紫色',   hasBuild: false },
+  {  name: 'gray',      color: '#757575', desc: '灰色',   hasBuild: false },
+  {  name: 'orange',    color: '#EB6709', desc: '橙色',   hasBuild: false },
+  {  name: 'pink',      color: '#F74584', desc: '粉红色', hasBuild: false },
+  {  name: 'yellow',    color: '#FCB900', desc: '黄色',   hasBuild: false },
+  {  name: 'red',       color: '#FF4C52', desc: '红色',   hasBuild: false }
+]

src/element-ui/theme/alert.css

+.el-alert{width:100%;padding:8px 16px;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;position:relative;background-color:#FFF;overflow:hidden;opacity:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:opacity .2s;transition:opacity .2s}.el-alert.is-light .el-alert__closebtn{color:#C0C4CC}.el-alert.is-dark .el-alert__closebtn,.el-alert.is-dark .el-alert__description{color:#FFF}.el-alert.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-alert--success.is-light{background-color:#f0f9eb;color:#67C23A}.el-alert--success.is-light .el-alert__description{color:#67C23A}.el-alert--success.is-dark{background-color:#67C23A;color:#FFF}.el-alert--info.is-light{background-color:#f4f4f5;color:#909399}.el-alert--info.is-dark{background-color:#909399;color:#FFF}.el-alert--info .el-alert__description{color:#909399}.el-alert--warning.is-light{background-color:#fdf6ec;color:#E6A23C}.el-alert--warning.is-light .el-alert__description{color:#E6A23C}.el-alert--warning.is-dark{background-color:#E6A23C;color:#FFF}.el-alert--error.is-light{background-color:#fef0f0;color:#F56C6C}.el-alert--error.is-light .el-alert__description{color:#F56C6C}.el-alert--error.is-dark{background-color:#F56C6C;color:#FFF}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert .el-alert__description{font-size:12px;margin:5px 0 0}.el-alert__closebtn{font-size:12px;opacity:1;position:absolute;top:12px;right:15px;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-alert-fade-enter,.el-alert-fade-leave-active{opacity:0}
\ No newline at end of file

src/element-ui/theme/aside.css

+.el-aside{overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0}
\ No newline at end of file

src/element-ui/theme/avatar.css

+.el-avatar{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden;color:#fff;background:#C0C4CC;width:40px;height:40px;line-height:40px;font-size:14px}.el-avatar>img{display:block;height:100%;vertical-align:middle}.el-avatar--circle{border-radius:50%}.el-avatar--square{border-radius:4px}.el-avatar--icon{font-size:18px}.el-avatar--large{width:40px;height:40px;line-height:40px}.el-avatar--medium{width:36px;height:36px;line-height:36px}.el-avatar--small{width:28px;height:28px;line-height:28px}
\ No newline at end of file

src/element-ui/theme/backtop.css

+.el-backtop{position:fixed;background-color:#FFF;width:40px;height:40px;border-radius:50%;color:#17B3A3;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:20px;-webkit-box-shadow:0 0 6px rgba(0,0,0,.12);box-shadow:0 0 6px rgba(0,0,0,.12);cursor:pointer;z-index:5}.el-backtop:hover{background-color:#F2F6FC}
\ No newline at end of file

src/element-ui/theme/badge.css

+.el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#F56C6C;border-radius:10px;color:#FFF;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #FFF}.el-badge__content.is-fixed{position:absolute;top:0;right:10px;-webkit-transform:translateY(-50%) translateX(100%);transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-badge__content.is-dot{height:8px;width:8px;padding:0;right:0;border-radius:50%}.el-badge__content--primary{background-color:#17B3A3}.el-badge__content--success{background-color:#67C23A}.el-badge__content--warning{background-color:#E6A23C}.el-badge__content--info{background-color:#909399}.el-badge__content--danger{background-color:#F56C6C}
\ No newline at end of file