添加全路由

.browserslistrc

+> 1%
+last 2 versions
+not ie <= 8

.editorconfig

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.env

+VUE_APP_LIB_BASE_MANAGER=http://ex-dev-dcxy-static.168cad.top
+VUE_APP_BASE_URL=/systemManageShell/
+VUE_APP_MENU_CODE=0003
+VUE_APP_WHITE_LIST=/login,/404,/401
+VUE_APP_SYSTEM_SERVER_URL=http://ex-dev-dcxy-system-manage.168cad.top
+VUE_APP_CUSTOMER_SERVER_URL=http://ex-dev-customer-manage.168cad.top
+VUE_APP_BASE_SERVER_URL=http://ex-dev-dcxy-base-manage.168cad.top
+VUE_APP_BASE_SERVER_URL_APP=http://ex-dev-dcxy-base-app.168cad.top

.env.dev

+NODE_ENV = production
+VUE_APP_SYSTEM_SERVER_URL=http://192.168.1.33:8886
+VUE_APP_CUSTOMER_SERVER_URL=http://ex-dev-customer-manage.168cad.top
+VUE_APP_BASE_SERVER_URL=http://ex-dev-dcxy-base-manage.168cad.top
+VUE_APP_BASE_SERVER_URL_APP=http://ex-dev-dcxy-base-app.168cad.top
+

.env.master

+NODE_ENV = production

.env.test

+NODE_ENV = production
+VUE_APP_SYSTEM_SERVER_URL=http://ex-test-dcxy-system-manage.168cad.top
+VUE_APP_CUSTOMER_SERVER_URL=http://ex-test-customer-manage.168cad.top
+VUE_APP_BASE_SERVER_URL=http://ex-test-dcxy-base-manage.168cad.top
+VUE_APP_BASE_SERVER_URL_APP=http://ex-test-dcxy-base-app.168cad.top

.eslintignore

+/build/
+/config/
+/dist/
+/*.js

.eslintrc.js

+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+  extends: ['plugin:vue/essential'],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}

.gitignore

+.DS_Store
+node_modules/
+/dist/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

.prettierrc

+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid",
+  "requirePragma": false,
+  "proseWrap": "preserve"
+}

README.md

+# 运维替换文件
+
+打包分别有 3 种模式
+
+```bash
+npm run build:dev      # 开发环境
+npm run build:test     # 测试环境
+npm run build:master   # 生成环境
+```
+
+替换配置也有 3 种模式
+
+根目录下`.env.dev`,`.env.test`,`.env.master`,分别替换服务地址
+
+```bash
+VUE_APP_SYSTEM_SERVER_URL=http://ex-dev-dcxy-system-manage.168cad.top   #系统管理接口
+VUE_APP_CUSTOMER_SERVER_URL=http://ex-dev-customer-manage.168cad.top    #会员系统接口
+VUE_APP_BASE_SERVER_URL=http://ex-dev-dcxy-base-manage.168cad.top       #基础服务接口
+VUE_APP_BASE_SERVER_URL_APP=http://ex-dev-dcxy-base-app.168cad.top      #基础服务APP接口
+```
+
+## Build Setup
+
+```bash
+# install dependencies
+npm install
+
+# build for production with minification
+npm run build:{mode}
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

babel.config.js

+module.exports = {
+  presets: ['@vue/app'],
+  plugins: [
+    [
+      'component',
+      {
+        libraryName: 'element-ui',
+        styleLibraryName: 'theme-chalk',
+      },
+    ],
+  ],
+};

package.json

+{
+  "name": "admin",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "kuangshu <252019869@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve --port 8891",
+    "start": "npm run dev",
+    "lint": "eslint --ext .js,.vue src",
+    "build": "vue-cli-service build --modern",
+    "build:dev": "vue-cli-service build --modern --mode dev",
+    "build:test": "vue-cli-service build --modern --mode test",
+    "build:master": "vue-cli-service build --modern --mode master",
+    "build:prod": "vue-cli-service build --modern",
+    "buildapp:dev": "vue-cli-service build --modern --mode dev",
+    "buildlib:dev": "vue-cli-service build --target lib --name manageShell ./src/lib-main.js --modern --mode dev",
+    "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "blueimp-md5": "^2.10.0",
+    "element-ui": "^2.4.5",
+    "js-cookie": "^2.2.0",
+    "lodash": "^4.17.5",
+    "normalize.css": "^8.0.0",
+    "nprogress": "^0.2.0",
+    "popmotion": "^8.1.22",
+    "qiniu-js": "^2.2.0",
+    "rym-element-ui": "^0.1.43",
+    "vue": "^2.5.2",
+    "vue-qr": "^1.2.8",
+    "vue-router": "^3.0.1",
+    "vuedraggable": "^2.16.0",
+    "vuex": "^3.0.1",
+    "wangeditor": "^3.1.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.2.0",
+    "@vue/cli-plugin-eslint": "^3.2.0",
+    "@vue/cli-service": "^3.2.0",
+    "@vue/eslint-config-prettier": "^4.0.1",
+    "babel-eslint": "^10.0.1",
+    "babel-plugin-component": "^1.1.1",
+    "cross-env": "^5.2.0",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.1",
+    "vue-template-compiler": "^2.5.21",
+    "webpack": "^4.28.3"
+  },
+  "engines": {
+    "node": ">= 8.0.0",
+    "npm": ">= 3.0.0"
+  }
+}

public/baseManage/baseManage.css

+.el-message{min-width:380px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border-width:1px;border-style:solid;border-color:#ebeef5;position:fixed;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#edf2fc;-webkit-transition:opacity .3s,-webkit-transform .4s;transition:opacity .3s,-webkit-transform .4s;transition:opacity .3s,transform .4s;transition:opacity .3s,transform .4s,-webkit-transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--info .el-message__content{color:#909399}.el-message--success{background-color:#f0f9eb;border-color:#e1f3d8}.el-message--success .el-message__content{color:#67c23a}.el-message--warning{background-color:#fdf6ec;border-color:#faecd8}.el-message--warning .el-message__content{color:#e6a23c}.el-message--error{background-color:#fef0f0;border-color:#fde2e2}.el-message--error .el-message__content{color:#f56c6c}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__content:focus{outline-width:0}.el-message__closeBtn{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:#c0c4cc;font-size:16px}.el-message__closeBtn:focus{outline-width:0}.el-message__closeBtn:hover{color:#909399}.el-message .el-icon-success{color:#67c23a}.el-message .el-icon-error{color:#f56c6c}.el-message .el-icon-info{color:#909399}.el-message .el-icon-warning{color:#e6a23c}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45);transform:scale(.45)}.collapse-transition{-webkit-transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out;transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.horizontal-collapse-transition{-webkit-transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out;transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out}.el-list-enter-active,.el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.el-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}@font-face{font-family:element-icons;src:url(fonts/element-icons.2fad952a.woff) format("woff"),url(fonts/element-icons.6f0a7632.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-info:before{content:"\E61A"}.el-icon-error:before{content:"\E62C"}.el-icon-success:before{content:"\E62D"}.el-icon-warning:before{content:"\E62E"}.el-icon-question:before{content:"\E634"}.el-icon-back:before{content:"\E606"}.el-icon-arrow-left:before{content:"\E600"}.el-icon-arrow-down:before{content:"\E603"}.el-icon-arrow-right:before{content:"\E604"}.el-icon-arrow-up:before{content:"\E605"}.el-icon-caret-left:before{content:"\E60A"}.el-icon-caret-bottom:before{content:"\E60B"}.el-icon-caret-top:before{content:"\E60C"}.el-icon-caret-right:before{content:"\E60E"}.el-icon-d-arrow-left:before{content:"\E610"}.el-icon-d-arrow-right:before{content:"\E613"}.el-icon-minus:before{content:"\E621"}.el-icon-plus:before{content:"\E62B"}.el-icon-remove:before{content:"\E635"}.el-icon-circle-plus:before{content:"\E601"}.el-icon-remove-outline:before{content:"\E63C"}.el-icon-circle-plus-outline:before{content:"\E602"}.el-icon-close:before{content:"\E60F"}.el-icon-check:before{content:"\E611"}.el-icon-circle-close:before{content:"\E607"}.el-icon-circle-check:before{content:"\E639"}.el-icon-circle-close-outline:before{content:"\E609"}.el-icon-circle-check-outline:before{content:"\E63E"}.el-icon-zoom-out:before{content:"\E645"}.el-icon-zoom-in:before{content:"\E641"}.el-icon-d-caret:before{content:"\E615"}.el-icon-sort:before{content:"\E640"}.el-icon-sort-down:before{content:"\E630"}.el-icon-sort-up:before{content:"\E631"}.el-icon-tickets:before{content:"\E63F"}.el-icon-document:before{content:"\E614"}.el-icon-goods:before{content:"\E618"}.el-icon-sold-out:before{content:"\E63B"}.el-icon-news:before{content:"\E625"}.el-icon-message:before{content:"\E61B"}.el-icon-date:before{content:"\E608"}.el-icon-printer:before{content:"\E62F"}.el-icon-time:before{content:"\E642"}.el-icon-bell:before{content:"\E622"}.el-icon-mobile-phone:before{content:"\E624"}.el-icon-service:before{content:"\E63A"}.el-icon-view:before{content:"\E643"}.el-icon-menu:before{content:"\E620"}.el-icon-more:before{content:"\E646"}.el-icon-more-outline:before{content:"\E626"}.el-icon-star-on:before{content:"\E637"}.el-icon-star-off:before{content:"\E63D"}.el-icon-location:before{content:"\E61D"}.el-icon-location-outline:before{content:"\E61F"}.el-icon-phone:before{content:"\E627"}.el-icon-phone-outline:before{content:"\E628"}.el-icon-picture:before{content:"\E629"}.el-icon-picture-outline:before{content:"\E62A"}.el-icon-delete:before{content:"\E612"}.el-icon-search:before{content:"\E619"}.el-icon-edit:before{content:"\E61C"}.el-icon-edit-outline:before{content:"\E616"}.el-icon-rank:before{content:"\E632"}.el-icon-refresh:before{content:"\E633"}.el-icon-share:before{content:"\E636"}.el-icon-setting:before{content:"\E638"}.el-icon-upload:before{content:"\E60D"}.el-icon-upload2:before{content:"\E644"}.el-icon-download:before{content:"\E617"}.el-icon-loading:before{content:"\E61E"}.el-icon-loading{-webkit-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotating{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.el-message-box,.el-popup-parent--hidden{overflow:hidden}.el-button,.el-input__inner{-webkit-appearance:none}.el-button,.el-input__inner,.el-textarea__inner{-webkit-box-sizing:border-box}.v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@-webkit-keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-in{0%{opacity:0}}@-webkit-keyframes v-modal-out{to{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;text-align:center;box-sizing:border-box;outline:0;margin:0;-webkit-transition:.1s;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button:focus,.el-button:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.el-button:active{color:#3a8ee6;border-color:#3a8ee6;outline:0}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#409eff;color:#409eff}.el-button.is-active,.el-button.is-plain:active{color:#3a8ee6;border-color:#3a8ee6}.el-button.is-plain:active{background:#fff;outline:0}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#ebeef5;color:#c0c4cc}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35)}.el-button.is-round{border-radius:20px;padding:12px 23px}.el-button.is-circle{border-radius:50%;padding:12px}.el-button--primary{color:#fff;background-color:#409eff;border-color:#409eff}.el-button--primary:focus,.el-button--primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.el-button--primary.is-active,.el-button--primary:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff}.el-button--primary:active{outline:0}.el-button--primary.is-disabled,.el-button--primary.is-disabled:active,.el-button--primary.is-disabled:focus,.el-button--primary.is-disabled:hover{color:#fff;background-color:#a0cfff;border-color:#a0cfff}.el-button--primary.is-plain{color:#409eff;background:#ecf5ff;border-color:#b3d8ff}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#409eff;border-color:#409eff;color:#fff}.el-button--primary.is-plain:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff;outline:0}.el-button--primary.is-plain.is-disabled,.el-button--primary.is-plain.is-disabled:active,.el-button--primary.is-plain.is-disabled:focus,.el-button--primary.is-plain.is-disabled:hover{color:#8cc5ff;background-color:#ecf5ff;border-color:#d9ecff}.el-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.el-button--success:focus,.el-button--success:hover{background:#85ce61;border-color:#85ce61;color:#fff}.el-button--success.is-active,.el-button--success:active{background:#5daf34;border-color:#5daf34;color:#fff}.el-button--success:active{outline:0}.el-button--success.is-disabled,.el-button--success.is-disabled:active,.el-button--success.is-disabled:focus,.el-button--success.is-disabled:hover{color:#fff;background-color:#b3e19d;border-color:#b3e19d}.el-button--success.is-plain{color:#67c23a;background:#f0f9eb;border-color:#c2e7b0}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#67c23a;border-color:#67c23a;color:#fff}.el-button--success.is-plain:active{background:#5daf34;border-color:#5daf34;color:#fff;outline:0}.el-button--success.is-plain.is-disabled,.el-button--success.is-plain.is-disabled:active,.el-button--success.is-plain.is-disabled:focus,.el-button--success.is-plain.is-disabled:hover{color:#a4da89;background-color:#f0f9eb;border-color:#e1f3d8}.el-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;color:#fff}.el-button--warning.is-active,.el-button--warning:active{background:#cf9236;border-color:#cf9236;color:#fff}.el-button--warning:active{outline:0}.el-button--warning.is-disabled,.el-button--warning.is-disabled:active,.el-button--warning.is-disabled:focus,.el-button--warning.is-disabled:hover{color:#fff;background-color:#f3d19e;border-color:#f3d19e}.el-button--warning.is-plain{color:#e6a23c;background:#fdf6ec;border-color:#f5dab1}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.el-button--warning.is-plain:active{background:#cf9236;border-color:#cf9236;color:#fff;outline:0}.el-button--warning.is-plain.is-disabled,.el-button--warning.is-plain.is-disabled:active,.el-button--warning.is-plain.is-disabled:focus,.el-button--warning.is-plain.is-disabled:hover{color:#f0c78a;background-color:#fdf6ec;border-color:#faecd8}.el-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.el-button--danger:focus,.el-button--danger:hover{background:#f78989;border-color:#f78989;color:#fff}.el-button--danger.is-active,.el-button--danger:active{background:#dd6161;border-color:#dd6161;color:#fff}.el-button--danger:active{outline:0}.el-button--danger.is-disabled,.el-button--danger.is-disabled:active,.el-button--danger.is-disabled:focus,.el-button--danger.is-disabled:hover{color:#fff;background-color:#fab6b6;border-color:#fab6b6}.el-button--danger.is-plain{color:#f56c6c;background:#fef0f0;border-color:#fbc4c4}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.el-button--danger.is-plain:active{background:#dd6161;border-color:#dd6161;color:#fff;outline:0}.el-button--danger.is-plain.is-disabled,.el-button--danger.is-plain.is-disabled:active,.el-button--danger.is-plain.is-disabled:focus,.el-button--danger.is-plain.is-disabled:hover{color:#f9a7a7;background-color:#fef0f0;border-color:#fde2e2}.el-button--info{color:#fff;background-color:#909399;border-color:#909399}.el-button--info:focus,.el-button--info:hover{background:#a6a9ad;border-color:#a6a9ad;color:#fff}.el-button--info.is-active,.el-button--info:active{background:#82848a;border-color:#82848a;color:#fff}.el-button--info:active{outline:0}.el-button--info.is-disabled,.el-button--info.is-disabled:active,.el-button--info.is-disabled:focus,.el-button--info.is-disabled:hover{color:#fff;background-color:#c8c9cc;border-color:#c8c9cc}.el-button--info.is-plain{color:#909399;background:#f4f4f5;border-color:#d3d4d6}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#909399;border-color:#909399;color:#fff}.el-button--info.is-plain:active{background:#82848a;border-color:#82848a;color:#fff;outline:0}.el-button--info.is-plain.is-disabled,.el-button--info.is-plain.is-disabled:active,.el-button--info.is-plain.is-disabled:focus,.el-button--info.is-plain.is-disabled:hover{color:#bcbec2;background-color:#f4f4f5;border-color:#e9e9eb}.el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.el-button--mini,.el-button--small{font-size:12px;border-radius:3px}.el-button--medium.is-round{padding:10px 20px}.el-button--medium.is-circle{padding:10px}.el-button--small,.el-button--small.is-round{padding:9px 15px}.el-button--small.is-circle{padding:9px}.el-button--mini,.el-button--mini.is-round{padding:7px 15px}.el-button--mini.is-circle{padding:7px}.el-button--text{border-color:transparent;color:#409eff;background:0 0;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#66b1ff;border-color:transparent;background-color:transparent}.el-button--text:active{color:#3a8ee6;border-color:transparent;background-color:transparent}.el-input__inner,.el-textarea__inner{color:#606266;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-button--text.is-disabled,.el-button--text.is-disabled:focus,.el-button--text.is-disabled:hover{border-color:transparent}.el-button-group .el-button--danger:last-child,.el-button-group .el-button--danger:not(:first-child):not(:last-child),.el-button-group .el-button--info:last-child,.el-button-group .el-button--info:not(:first-child):not(:last-child),.el-button-group .el-button--primary:last-child,.el-button-group .el-button--primary:not(:first-child):not(:last-child),.el-button-group .el-button--success:last-child,.el-button-group .el-button--success:not(:first-child):not(:last-child),.el-button-group .el-button--warning:last-child,.el-button-group .el-button--warning:not(:first-child):not(:last-child),.el-button-group>.el-dropdown>.el-button{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:first-child,.el-button-group .el-button--danger:not(:first-child):not(:last-child),.el-button-group .el-button--info:first-child,.el-button-group .el-button--info:not(:first-child):not(:last-child),.el-button-group .el-button--primary:first-child,.el-button-group .el-button--primary:not(:first-child):not(:last-child),.el-button-group .el-button--success:first-child,.el-button-group .el-button--success:not(:first-child):not(:last-child),.el-button-group .el-button--warning:first-child,.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-right-color:hsla(0,0%,100%,.5)}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-button-group>.el-button{float:left;position:relative}.el-button-group>.el-button+.el-button{margin-left:0}.el-button-group>.el-button.is-disabled{z-index:1}.el-button-group>.el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group>.el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group>.el-button:first-child:last-child{border-radius:4px}.el-button-group>.el-button:first-child:last-child.is-round{border-radius:20px}.el-button-group>.el-button:first-child:last-child.is-circle{border-radius:50%}.el-button-group>.el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group>.el-button:not(:last-child){margin-right:-1px}.el-button-group>.el-button.is-active,.el-button-group>.el-button:active,.el-button-group>.el-button:focus,.el-button-group>.el-button:hover{z-index:1}.el-button-group>.el-dropdown>.el-button{border-top-left-radius:0;border-bottom-left-radius:0}.el-textarea{display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;box-sizing:border-box;width:100%;font-size:inherit;background-color:#fff;background-image:none;border:1px solid #dcdfe6;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#c0c4cc}.el-textarea__inner::-ms-input-placeholder{color:#c0c4cc}.el-textarea__inner::placeholder{color:#c0c4cc}.el-textarea__inner:hover{border-color:#c0c4cc}.el-textarea__inner:focus{outline:0;border-color:#409eff}.el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#c0c4cc}.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#c0c4cc}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#c0c4cc}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner,.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#c0c4cc;font-size:14px;line-height:16px;cursor:pointer;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#909399}.el-input__inner{background-color:#fff;background-image:none;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;display:inline-block;font-size:inherit;height:40px;line-height:40px;outline:0;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__prefix,.el-input__suffix{position:absolute;-webkit-transition:all .3s;text-align:center;height:100%;color:#c0c4cc;top:0}.el-input__inner::-webkit-input-placeholder{color:#c0c4cc}.el-input__inner::-ms-input-placeholder{color:#c0c4cc}.el-input__inner::placeholder{color:#c0c4cc}.el-input__inner:hover{border-color:#c0c4cc}.el-input.is-active .el-input__inner,.el-input__inner:focus{border-color:#409eff;outline:0}.el-input__suffix{right:5px;transition:all .3s;pointer-events:none}.el-input__suffix-inner{pointer-events:all}.el-input__prefix{left:5px;transition:all .3s}.el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__inner::placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:28px;line-height:28px}.el-input--mini .el-input__icon{line-height:28px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate;border-spacing:0}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#f5f7fa;color:#909399;vertical-align:middle;display:table-cell;position:relative;border:1px solid #dcdfe6;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--append .el-input__inner,.el-input-group__prepend{border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append:focus,.el-input-group__prepend:focus{outline:0}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:inline-block;margin:-10px -20px}.el-input-group__append button.el-button,.el-input-group__append div.el-select .el-input__inner,.el-input-group__append div.el-select:hover .el-input__inner,.el-input-group__prepend button.el-button,.el-input-group__prepend div.el-select .el-input__inner,.el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0}.el-input-group__append{border-left:0}.el-input-group--append .el-select .el-input.is-focus .el-input__inner,.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input__inner::-ms-clear{display:none;width:0;height:0}.el-message-box{display:inline-block;width:420px;padding-bottom:10px;vertical-align:middle;background-color:#fff;border-radius:4px;border:1px solid #ebeef5;font-size:18px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);text-align:left;-webkit-backface-visibility:hidden;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:15px 15px 10px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:18px;line-height:1;color:#303133}.el-message-box__headerbtn{position:absolute;top:15px;right:15px;padding:0;border:none;outline:0;background:0 0;font-size:16px;cursor:pointer}.el-message-box__headerbtn .el-message-box__close{color:#909399}.el-message-box__headerbtn:focus .el-message-box__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#409eff}.el-message-box__content{position:relative;padding:10px 15px;color:#606266;font-size:14px}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#f56c6c}.el-message-box__status{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:24px!important}.el-message-box__status:before{padding-left:1px}.el-message-box__status+.el-message-box__message{padding-left:36px;padding-right:12px}.el-message-box__status.el-icon-success{color:#67c23a}.el-message-box__status.el-icon-info{color:#909399}.el-message-box__status.el-icon-warning{color:#e6a23c}.el-message-box__status.el-icon-error{color:#f56c6c}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:24px}.el-message-box__errormsg{color:#f56c6c;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__btns{padding:5px 15px 0;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.el-message-box--center{padding-bottom:30px}.el-message-box--center .el-message-box__header{padding-top:30px}.el-message-box--center .el-message-box__title{position:relative;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}.el-message-box--center .el-message-box__status{position:relative;top:auto;padding-right:5px;text-align:center;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.el-message-box--center .el-message-box__message{margin-left:0}.el-message-box--center .el-message-box__btns,.el-message-box--center .el-message-box__content{text-align:center}.el-message-box--center .el-message-box__content{padding-left:27px;padding-right:27px}.msgbox-fade-enter-active{-webkit-animation:msgbox-fade-in .3s;animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{-webkit-animation:msgbox-fade-out .3s;animation:msgbox-fade-out .3s}@-webkit-keyframes msgbox-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes msgbox-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes msgbox-fade-out{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes msgbox-fade-out{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}.areaRecharge_page .tablecolor{background-color:#fff;font-weight:700}.areaRecharge_page .big.filter-item .filter-item-label{width:100px}.areaRecharge_page .detailClass{height:35px;font-weight:700}.areaRecharge_page .detailClass .detailClass-title{margin-left:40px;margin-right:20px;margin-top:15px;font-size:14px}.areaRecharge_page .click-tab-class{cursor:pointer}.areaRecharge_page .textarea_class{resize:none;border-radius:4px;width:360px;height:95px}.areaRecharge_page .radio-class-isGive .el-radio__label{font-size:16px}.areaRecharge_page .radio-class-give .el-radio__label{font-size:14px}.areaRecharge_page .radio-class-give .el-radio{width:60px}.areaRecharge_page .giveserviceClass{font-size:16px;margin-top:15px}.areaRecharge_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:185px}.areaRecharge_page .giveserviceClass .title{margin-right:10px;width:130px;vertical-align:top;display:inline-block;text-align:justify;text-align-last:justify}.areaRecharge_page .giveserviceClass .content{display:inline-block}.areaRecharge_page .payType-class{font-size:16px;margin-top:15px;width:100%}.areaRecharge_page .payType-class .payType-title-class{width:130px;text-align:justify;text-align-last:justify;display:inline-block;vertical-align:top;margin-top:14px}.areaRecharge_page .payType-class .payType-content-class{display:inline-block;width:80%}.areaRecharge_page .payType-class .payType-content-class input{width:100%}@media screen and (max-width:1600px){.areaRecharge_page .el-button{padding:0 0}.areaRecharge_page .detailClass{height:30px;font-size:12px;font-weight:700}.areaRecharge_page .detailClass .detailClass-title{margin-right:20px;margin-top:15px;font-size:12px}.areaRecharge_page .giveserviceClass,.areaRecharge_page .radio-class-give .el-radio__label,.areaRecharge_page .radio-class-isGive .el-radio__label{font-size:12px}.areaRecharge_page .giveserviceClass .title{position:relative;text-align:justify;text-align-last:justify;width:130px;vertical-align:top;display:inline-block}.areaRecharge_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}.areaRecharge_page .giveserviceClass .content{display:inline-block}.areaRecharge_page .payType-class{font-size:12px;margin-top:15px;width:100%}.areaRecharge_page .payType-class .payType-title-class{width:130px;text-align:justify;text-align-last:justify;display:inline-block;vertical-align:top;margin-top:14px}.areaRecharge_page .payType-class .payType-content-class{display:inline-block;width:80%}.areaRecharge_page .payType-class .payType-content-class .el-table .cell,.areaRecharge_page .payType-class .payType-content-class .el-table th>.cell{font-size:12px}.areaRecharge_page .payType-class .payType-content-class input{width:100%}}.area_page .tablecolor{background-color:#fff}.area_page .config_style{display:flex;margin-top:5px}.area_page .el-button{padding:0 8px}.area_page .search-box .button_q{min-width:194px;margin-left:-20px}@media screen and (max-width:1600px){.area_page .el-button{padding:0 1px}}.CreditMarginEdit .el-input-number{width:100%}.CreditMarginEdit .el-input-number .el-input__inner{text-align:left}.pointer{cursor:pointer}.activityDialog .el-dialog{width:565px}.activityDialog .el-dialog .FormLine{height:auto}.activityDialog .el-dialog .FormItem{width:100%}.activityDialog .el-dialog .FormItem-label{width:100px;text-align:right;text-align-last:auto}.activityDialog .el-dialog .FormItem-content{flex:1;display:flex}.activityDialog .el-dialog .FormItem-content>.el-input,.activityDialog .el-dialog .FormItem-content>.el-input-number,.activityDialog .el-dialog .FormItem-content>.el-textarea{width:300px}.activityDialog .el-dialog .FormItem-content .el-radio{line-height:22px}.activityDialog .el-dialog .FormItem-content .date-range-pick{width:300px}.activityDialog .el-dialog .FormItem-content .date-range-pick .md-data-picker,.activityDialog .el-dialog .givenRange .el-input-number{width:140px}.activityDialog .el-dialog .givenRange .givenRange-connect{width:20px;text-align:center}.activityDialog .el-dialog .groupItem .groupItemCount,.activityDialog .el-dialog .groupItem .groupItemSize{width:140px}.activityDialog .el-dialog .groupItem .groupItemSize{margin-right:20px}.activityDialog .el-dialog .groupItem .el-input-number{width:100px;margin-right:10px}.activityDialog .el-dialog .with-text .el-input-number{width:250px;margin-right:20px}@media screen and (min-width:1600px){.activityDialog .el-dialog{width:765px}.activityDialog .el-dialog .FormItem-label{width:200px}.activityDialog .el-dialog .FormItem-content .date-range-pick,.activityDialog .el-dialog .FormItem-content>.el-input,.activityDialog .el-dialog .FormItem-content>.el-input-number,.activityDialog .el-dialog .FormItem-content>.el-textarea{width:400px}.activityDialog .el-dialog .FormItem-content .date-range-pick .md-data-picker,.activityDialog .el-dialog .givenRange .el-input-number{width:190px}.activityDialog .el-dialog .givenRange .givenRange-connect{width:20px}.activityDialog .el-dialog .groupItem .groupItemCount,.activityDialog .el-dialog .groupItem .groupItemSize{width:190px}.activityDialog .el-dialog .groupItem .el-input-number{width:136px}.activityDialog .el-dialog .with-text .el-input-number{width:336px}}.euipmentConf .FormLine .FormItem{display:flex;width:100%}.euipmentConf .FormLine .FormItem-label{text-align-last:right;width:100px}.euipmentConf .FormLine .FormItem-content{flex:1}.cmb-activity .payTypeConfig .payTypeConfig-item{margin:0 30px 0 0}.euipmentConf .record-List .record-Item{display:inline-block;width:30%}.cmb-payway .cmb-payway_table-wrap{display:flex;justify-content:flex-end}.cmb-payway .cmb-payway_table{width:500px;padding-left:40px}.cmb-payway .cmb-payway_table .payway-table-line{display:flex;margin-bottom:20px}.cmb-payway .cmb-payway_table .payway-table-item{width:33%}.cmb-payway .cmb-payway_table .payway-table-item .el-input-number{width:50%}.cmb-payway .cmb-payway_table .payway-table-item .el-input-number .el-input__inner{text-align:right}.cmb-payway .records-list{width:100%;display:block;height:auto;padding-left:20px}.cmb-payway .records-list .records-item{margin-top:10px;display:flex}.cmb-payway .records-list .records-col{width:30%}.cmb-payway .payline-wrap{display:block;height:auto}.cmb-payway .payline-wrap .payline{flex:1}.cmb-payway .payline-wrap .paytype-item{display:flex;margin-bottom:10px;padding-left:20px}.cmb-payway .payline-wrap .paytype-col{width:30%}.errPage-container[data-v-509f1e64]{width:800px;margin:100px auto}.errPage-container .pan-back-btn[data-v-509f1e64]{background:#008489;color:#fff}.errPage-container .pan-gif[data-v-509f1e64],.errPage-container .pan-img[data-v-509f1e64]{margin:0 auto;display:block}.errPage-container .text-jumbo[data-v-509f1e64]{font-size:60px;font-weight:700;color:#484848}.errPage-container .list-unstyled[data-v-509f1e64]{font-size:14px}.errPage-container .list-unstyled li[data-v-509f1e64]{padding-bottom:5px}.errPage-container .list-unstyled a[data-v-509f1e64]{color:#008489;text-decoration:none}.errPage-container .list-unstyled a[data-v-509f1e64]:hover{text-decoration:underline}.wscn-http404[data-v-9feff8fe]{position:relative;width:1200px;margin:20px auto 60px;padding:0 100px;overflow:hidden}.wscn-http404 .pic-404[data-v-9feff8fe]{position:relative;float:left;width:600px;padding:150px 0;overflow:hidden}.wscn-http404 .pic-404__parent[data-v-9feff8fe]{width:100%}.wscn-http404 .pic-404__child[data-v-9feff8fe]{position:absolute}.wscn-http404 .pic-404__child.left[data-v-9feff8fe]{width:80px;top:17px;left:220px;opacity:0;animation-name:cloudLeft-data-v-9feff8fe;animation-duration:2s;animation-timing-function:linear;animation-fill-mode:forwards;animation-delay:1s}.wscn-http404 .pic-404__child.mid[data-v-9feff8fe]{width:46px;top:10px;left:420px;opacity:0;animation-name:cloudMid-data-v-9feff8fe;animation-duration:2s;animation-timing-function:linear;animation-fill-mode:forwards;animation-delay:1.2s}.wscn-http404 .pic-404__child.right[data-v-9feff8fe]{width:62px;top:100px;left:500px;opacity:0;animation-name:cloudRight-data-v-9feff8fe;animation-duration:2s;animation-timing-function:linear;animation-fill-mode:forwards;animation-delay:1s}@keyframes cloudLeft-data-v-9feff8fe{0%{top:17px;left:220px;opacity:0}20%{top:33px;left:188px;opacity:1}80%{top:81px;left:92px;opacity:1}to{top:97px;left:60px;opacity:0}}@keyframes cloudMid-data-v-9feff8fe{0%{top:10px;left:420px;opacity:0}20%{top:40px;left:360px;opacity:1}70%{top:130px;left:180px;opacity:1}to{top:160px;left:120px;opacity:0}}@keyframes cloudRight-data-v-9feff8fe{0%{top:100px;left:500px;opacity:0}20%{top:120px;left:460px;opacity:1}80%{top:180px;left:340px;opacity:1}to{top:200px;left:300px;opacity:0}}.wscn-http404 .bullshit[data-v-9feff8fe]{position:relative;float:left;width:300px;padding:150px 0;overflow:hidden}.wscn-http404 .bullshit__oops[data-v-9feff8fe]{font-size:32px;font-weight:700;line-height:40px;color:#1482f0;opacity:0;margin-bottom:20px;animation-name:slideUp-data-v-9feff8fe;animation-duration:.5s;animation-fill-mode:forwards}.wscn-http404 .bullshit__headline[data-v-9feff8fe]{font-size:20px;line-height:24px;color:#1482f0;opacity:0;margin-bottom:10px;animation-name:slideUp-data-v-9feff8fe;animation-duration:.5s;animation-delay:.1s;animation-fill-mode:forwards}.wscn-http404 .bullshit__info[data-v-9feff8fe]{font-size:13px;line-height:21px;color:grey;opacity:0;margin-bottom:30px;animation-name:slideUp-data-v-9feff8fe;animation-duration:.5s;animation-delay:.2s;animation-fill-mode:forwards}.wscn-http404 .bullshit__return-home[data-v-9feff8fe]{display:block;float:left;width:110px;height:36px;background:#1482f0;border-radius:100px;text-align:center;color:#fff;opacity:0;font-size:14px;line-height:36px;cursor:pointer;animation-name:slideUp-data-v-9feff8fe;animation-duration:.5s;animation-delay:.3s;animation-fill-mode:forwards}@keyframes slideUp-data-v-9feff8fe{0%{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}.tab-container[data-v-210c9018]{margin:30px}.image-uploader[data-v-168afdb0]{width:123px;height:123px;border:1px solid #ccc}.image-uploader .mask[data-v-168afdb0]{position:absolute;z-index:20;width:100%;height:100%;background-color:rgba(0,0,0,.5)}.image-uploader .image-uploader-done[data-v-168afdb0],.image-uploader .image-uploader-pre[data-v-168afdb0]{display:block;position:relative;height:100%}.image-uploader .image-uploader-done .delimg[data-v-168afdb0],.image-uploader .image-uploader-pre .delimg[data-v-168afdb0]{width:50px;height:50px;position:absolute;left:50%;top:50%;font-size:50px;fill:#999;margin-left:-25px;margin-top:-25px;fill:#fff}.image-uploader .image-uploader-done .image-uploader-img[data-v-168afdb0],.image-uploader .image-uploader-pre .image-uploader-img[data-v-168afdb0]{width:100%}.image-uploader .image-uploader-icon[data-v-168afdb0]{position:absolute;display:block;width:50px;height:50px;font-size:50px;left:50%;top:50%;margin-top:-25px;margin-left:-25px;fill:#999}.posBox{width:100px;height:100px;background-color:bisque;position:relative;top:0;left:-20px;z-index:2000}.line{text-align:center}.from-box{width:800px}.table-card{display:flex;flex-wrap:wrap}.timeBox{color:#fff}.timeBox .time{margin-right:10px}.avatar-container{margin-right:12px;display:flex;color:#fff;height:22px;line-height:22px;font-size:12px;flex:1;justify-content:flex-end}.avatar-container .avatar-container-line{margin:0 20px}.avatar-container .avatar-name{margin-right:25px}.avatar-container .avatar-quit{cursor:pointer;font-size:10px;line-height:24px}.avatar-container .avatar-quit .avatar-quit-icon{display:inline-block;margin-left:10px;margin-top:-2px;width:20px;height:18px;vertical-align:middle}.avatar-container .avatar-wrapper{cursor:pointer;color:#a0acb9;position:relative}.avatar-container .avatar-wrapper .user-avatar{width:40px;height:40px;border-radius:10px}.avatar-container .avatar-wrapper .el-icon-caret-bottom{position:absolute;right:-18px;top:6px;font-size:12px}.avatar-container .setpwd-info{color:red}@media screen and (min-width:1600px){.avatar-container{margin-right:24px;font-size:16px}.avatar-container .avatar-quit{font-size:14px}}.login-container{position:fixed;height:100%;width:100%;background:#f5f6ff url(img/home_bg_img.8db24a28.png) no-repeat;background-size:contain}.login-container .login-form{position:absolute;top:148px;right:187px;width:494px}.login-container .title{display:flex;justify-content:space-between;font-size:34px;color:#333;font-weight:600;margin:0 0 54px;height:66px}.login-container .title .logo-icom{width:204px;height:66px}.login-container .title .title-text{line-height:82px}.login-container .el-form-item{margin-bottom:16px}.login-container .show-pwd{position:absolute;top:22px;right:26px;width:22px;height:22px;cursor:pointer}.login-container .vcode-box{display:flex;justify-content:space-between;position:absolute;top:18px;right:18px;width:150px;line-height:36px;font-size:14px}.login-container .vcode-box .vcode-img{width:90px}.login-container .vcode-box .vcode-text{cursor:pointer;color:#4e82fb}.login-container .account-tool{height:20px;line-height:20px;display:flex;justify-content:space-between;color:#666}.login-container .account-tool .forget-pwd{cursor:pointer}.login-container .login-btn{margin-top:60px;height:66px;font-size:24px;background-color:#4e82fb}.login-container input{border-color:#666;background-color:#fff}.login-container .el-input,.login-container .el-input__inner{height:66px;line-height:66px;font-size:20px}.login-container .com-info{position:absolute;right:213px;bottom:40px;color:#666;font-size:16px}@media screen and (max-width:1600px){.login-container .login-form{top:125px;right:105px;width:340px}.login-container .title{font-size:24px;margin:0 0 38px;height:45px}.login-container .title .logo-icom{width:140px;height:45px}.login-container .title .title-text{line-height:60px}.login-container .el-form-item{margin-bottom:12px}.login-container .show-pwd{top:12px;right:16px}.login-container .vcode-box{top:8px;right:18px;width:120px;line-height:30px;font-size:12px}.login-container .vcode-box .vcode-img{width:63px}.login-container .account-tool{height:16px;line-height:16px}.login-container .account-tool .el-checkbox__label{font-size:12px}.login-container .login-btn{margin-top:40px;height:46px;font-size:16px}.login-container .el-input,.login-container .el-input__inner{height:46px;line-height:46px;font-size:14px}.login-container .com-info{right:120px;font-size:10px}}.datepicker-overlay[data-v-26682d23]{position:fixed;width:100%;height:100%;z-index:998;top:0;left:0;overflow:hidden;-webkit-animation:fadein-data-v-26682d23 .5s;-moz-animation:fadein-data-v-26682d23 .5s;-ms-animation:fadein-data-v-26682d23 .5s;-o-animation:fadein-data-v-26682d23 .5s;animation:fadein-data-v-26682d23 .5s}@keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}@-moz-keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}@-ms-keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}@-o-keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}.cov-date-body[data-v-26682d23]{display:inline-block;background:#3f51b5;overflow:hidden;position:relative;font-size:16px;font-family:Roboto;font-weight:400;position:fixed;display:block;width:400px;max-width:100%;z-index:999;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);box-shadow:0 1px 3px 0 rgba(0,0,0,.2)}.cov-picker-box[data-v-26682d23]{background:#fff;width:100%;display:inline-block;padding:25px;box-sizing:border-box!important;-moz-box-sizing:border-box!important;-webkit-box-sizing:border-box!important;-ms-box-sizing:border-box!important;width:400px;max-width:100%;height:280px;text-align:start!important}.cov-picker-box td[data-v-26682d23]{height:34px;width:34px;padding:0;line-height:34px;color:#000;background:#fff;text-align:center;cursor:pointer}.cov-picker-box td[data-v-26682d23]:hover{background:#e6e6e6}table[data-v-26682d23]{border-collapse:collapse;border-spacing:0;width:100%}.day[data-v-26682d23]{width:14.2857143%;display:inline-block;text-align:center;cursor:pointer;height:34px;padding:0;line-height:34px;color:#000;background:#fff;vertical-align:middle}.week ul[data-v-26682d23]{margin:0 0 8px;padding:0;list-style:none}.week ul li[data-v-26682d23]{width:14.2%;display:inline-block;text-align:center;background:transparent;color:#000;font-weight:700}.passive-day[data-v-26682d23]{color:#bbb}.checked[data-v-26682d23]{background:#f50057;color:#fff!important;border-radius:3px}.unavailable[data-v-26682d23]{color:#ccc;cursor:not-allowed}.cov-date-monthly[data-v-26682d23]{height:150px}.cov-date-monthly>div[data-v-26682d23]{display:inline-block;padding:0;margin:0;vertical-align:middle;color:#fff;height:150px;float:left;text-align:center;cursor:pointer}.cov-date-next[data-v-26682d23],.cov-date-previous[data-v-26682d23]{position:relative;width:20%!important;text-indent:-300px;overflow:hidden;color:#fff}.cov-date-caption[data-v-26682d23]{width:60%;padding:50px 0!important;box-sizing:border-box;font-size:24px}.cov-date-caption span[data-v-26682d23]:hover{color:hsla(0,0%,100%,.7)}.cov-date-next[data-v-26682d23]:hover,.cov-date-previous[data-v-26682d23]:hover{background:hsla(0,0%,100%,.1)}.day[data-v-26682d23]:hover{background:#eaeaea}.unavailable[data-v-26682d23]:hover{background:none}.checked[data-v-26682d23]:hover{background:#ff4f8e}.cov-date-next[data-v-26682d23]:before,.cov-date-previous[data-v-26682d23]:before{width:20px;height:2px;text-align:center;position:absolute;background:#fff;top:50%;margin-top:-7px;margin-left:-7px;left:50%;line-height:0;content:"";-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.cov-date-next[data-v-26682d23]:after,.cov-date-previous[data-v-26682d23]:after{width:20px;height:2px;text-align:center;position:absolute;background:#fff;margin-top:6px;margin-left:-7px;top:50%;left:50%;line-height:0;content:"";-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}.cov-date-previous[data-v-26682d23]:after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.cov-date-previous[data-v-26682d23]:before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}.date-item[data-v-26682d23]{text-align:center;font-size:20px;padding:10px 0;cursor:pointer}.date-item[data-v-26682d23]:hover{background:#e0e0e0}.date-list[data-v-26682d23]{overflow:auto;vertical-align:top;padding:0}.cov-vue-date[data-v-26682d23]{display:inline-block;color:#5d5d5d}.button-box[data-v-26682d23]{background:#fff;vertical-align:top;height:50px;line-height:50px;text-align:right;padding-right:20px}.button-box span[data-v-26682d23]{cursor:pointer;padding:10px 20px}.watch-box[data-v-26682d23]{height:100%;overflow:hidden}.hour-box[data-v-26682d23],.min-box[data-v-26682d23]{display:inline-block;width:50%;text-align:center;height:100%;overflow:auto;float:left}.hour-box ul[data-v-26682d23],.min-box ul[data-v-26682d23]{list-style:none;margin:0;padding:0}.hour-item[data-v-26682d23],.min-item[data-v-26682d23]{padding:10px;font-size:36px;cursor:pointer}.hour-item[data-v-26682d23]:hover,.min-item[data-v-26682d23]:hover{background:#e3e3e3}.hour-box .active[data-v-26682d23],.min-box .active[data-v-26682d23]{background:#f50057;color:#fff!important}[data-v-26682d23]::-webkit-scrollbar{width:2px}[data-v-26682d23]::-webkit-scrollbar-track{background:#e3e3e3}[data-v-26682d23]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:2px}.active-give-bean-detail-class{font-size:14px}.active-give-bean-detail-class .tablecolor{background-color:#fff;font-weight:700}.active-give-bean-detail-class .big.filter-item .filter-item-label{width:100px}.active-give-bean-detail-class .click-tab-class{cursor:pointer}.active-give-bean-detail-class .radio-class-give .el-radio__label{font-size:14px}.active-give-bean-detail-class .radio-class-give .el-radio{width:60px}.active-give-bean-detail-class .giveserviceClass.footer{margin-left:20px;vertical-align:top}.active-give-bean-detail-class .giveserviceClass{font-size:14px;margin-top:15px;display:inline-block}.active-give-bean-detail-class .giveserviceClass .customer-type{display:inline-block}.active-give-bean-detail-class .giveserviceClass .customer-type .el-checkbox{width:30px}.active-give-bean-detail-class .giveserviceClass .title.executeDate-class{height:20px;vertical-align:middle}.active-give-bean-detail-class .giveserviceClass .content{display:inline-block}.active-give-bean-detail-class .giveserviceClass .content textarea{width:295px;height:80px;resize:none}.active-give-bean-detail-class .giveserviceClass input{border-radius:5px;height:27px;line-height:40px;font-size:14px;width:200px}.active-give-bean-detail-class .giveserviceClass .title{margin-right:10px;width:100px;vertical-align:top;display:inline-block;text-align:right;height:27px}.active-give-bean-detail-class .md-data-picker.el-input--prefix .el-input__inner{padding:0 0}@media screen and (max-width:1600px){.active-give-bean-detail-class .el-button{padding:0 0}.active-give-bean-detail-class .giveserviceClass,.active-give-bean-detail-class .giveserviceClass .el-checkbox__label,.active-give-bean-detail-class .radio-class-give .el-radio__label{font-size:12px}.active-give-bean-detail-class .giveserviceClass .content input{border-radius:5px;height:24px;line-height:40px;font-size:12px;width:146px}.active-give-bean-detail-class .giveserviceClass .title{margin-right:10px;width:100px;vertical-align:top;display:inline-block;text-align:right}.active-give-bean-detail-class .md-data-picker.el-input--prefix .el-input__inner{padding:0 0;font-size:12px}}.active-give-bean-class{font-size:14px}.active-give-bean-class .feedback_detail_dialog .el-dialog{min-width:1275px}.active-give-bean-class .tablecolor{background-color:#fff;font-weight:700}.active-give-bean-class .big.filter-item .filter-item-label{width:100px}.active-give-bean-class .click-tab-class{cursor:pointer}.active-give-bean-class .radio-class-give .el-radio__label{font-size:14px}.active-give-bean-class .radio-class-give .el-radio{width:60px}.active-give-bean-class .giveserviceClass{font-size:14px;margin-top:15px}.active-give-bean-class .giveserviceClass .customer-type{display:inline-block}.active-give-bean-class .giveserviceClass .customer-type .el-checkbox{width:30px}.active-give-bean-class .giveserviceClass .title.executeDate-class{height:20px;vertical-align:middle}.active-give-bean-class .giveserviceClass .content{display:inline-block}.active-give-bean-class .giveserviceClass .content textarea{width:295px;height:80px;resize:none}.active-give-bean-class .giveserviceClass input{border-radius:5px;height:27px;line-height:40px;font-size:14px;width:200px}.active-give-bean-class .giveserviceClass .title{margin-right:10px;width:100px;vertical-align:top;display:inline-block;text-align:right;height:27px}.active-give-bean-class .md-data-picker.el-input--prefix .el-input__inner{padding:0 0}@media screen and (max-width:1600px){.active-give-bean-class .el-button{padding:0 0}.active-give-bean-class .giveserviceClass,.active-give-bean-class .giveserviceClass .el-checkbox__label,.active-give-bean-class .radio-class-give .el-radio__label{font-size:12px}.active-give-bean-class .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}.active-give-bean-class .giveserviceClass .title{margin-right:10px;width:100px;vertical-align:top;display:inline-block;text-align:right}}.firstrechargeConf_page .tablecolor{background-color:#fff;font-weight:700}.firstrechargeConf_page .big.filter-item .filter-item-label{width:100px}.firstrechargeConf_page .detailClass{height:35px;font-weight:700}.firstrechargeConf_page .detailClass .detailClass-title{margin-left:40px;margin-right:20px;margin-top:15px;font-size:14px}.firstrechargeConf_page .click-tab-class{cursor:pointer}.firstrechargeConf_page .textarea_class{resize:none;border-radius:4px;width:360px;height:95px}.firstrechargeConf_page .radio-class-isGive .el-radio__label{font-size:16px}.firstrechargeConf_page .radio-class-give .el-radio__label{font-size:14px}.firstrechargeConf_page .radio-class-give .el-radio{width:60px}.firstrechargeConf_page .giveserviceClass{font-size:16px;margin-top:15px}.firstrechargeConf_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:185px}.firstrechargeConf_page .giveserviceClass .title{margin-right:10px;width:86px;vertical-align:top}@media screen and (max-width:1600px){.firstrechargeConf_page .el-button{padding:0 0}.firstrechargeConf_page .detailClass{height:30px;font-size:12px;font-weight:700}.firstrechargeConf_page .detailClass .detailClass-title{margin-right:20px;margin-top:15px;font-size:12px}.firstrechargeConf_page .giveserviceClass,.firstrechargeConf_page .radio-class-give .el-radio__label,.firstrechargeConf_page .radio-class-isGive .el-radio__label{font-size:12px}.firstrechargeConf_page .giveserviceClass .title{position:relative;text-align:justify;text-align-last:justify;width:57px;vertical-align:top}.firstrechargeConf_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}}.rechargeConf_page .tablecolor{background-color:#fff;font-weight:700}.rechargeConf_page .list-content-class{line-height:5;font-size:14px}.rechargeConf_page .detailClass{height:35px;font-weight:700;flex-direction:row;min-width:330px}.rechargeConf_page .detailClass div{display:inline-block}.rechargeConf_page .detailClass .detailClass-content{margin-left:20px}.rechargeConf_page .detailClass .detailClass-title{margin-left:40px;margin-right:20px;margin-top:15px;font-size:14px;width:100px;text-align:justify;text-align-last:justify}.rechargeConf_page .click-tab-class{cursor:pointer}.rechargeConf_page .textarea_class{resize:none;border-radius:4px}.rechargeConf_page .radio-class-give .el-radio__label,.rechargeConf_page .radio-class-isGive .el-radio__label{font-size:16px}.rechargeConf_page .giveserviceClass{font-size:14px;margin-top:15px}.rechargeConf_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:185px}.rechargeConf_page .giveserviceClass .title{margin-right:10px;width:86px;vertical-align:top}.rechargeConf_page .udpate-class input{width:60px}.rechargeConf_page .udpate-class .backage{background-color:#6895fe;color:#ebeef5;line-height:3;font-size:14px}.rechargeConf_page .udpate-class .udpate-titile-class{display:inline-block;width:100px;margin-top:20px;text-align:center}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-title-class{text-align:center;width:130px;margin-top:20px}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class{text-align:left;width:130px;margin-top:20px}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio{width:0}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio .el-radio__label{padding-left:3px}@media screen and (max-width:1600px){.rechargeConf_page .el-button{padding:0 0}.rechargeConf_page .detailClass{height:30px;font-size:12px;font-weight:700}.rechargeConf_page .detailClass .detailClass-title{margin-right:20px;margin-top:15px;font-size:12px}.rechargeConf_page .giveserviceClass,.rechargeConf_page .radio-class-give .el-radio__label,.rechargeConf_page .radio-class-isGive .el-radio__label{font-size:12px}.rechargeConf_page .giveserviceClass .title{position:relative;text-align:justify;text-align-last:justify;width:57px;vertical-align:top}.rechargeConf_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}.rechargeConf_page .udpate-class input{width:60px}.rechargeConf_page .udpate-class .backage{background-color:#6895fe;color:#ebeef5;line-height:3;font-size:12px}.rechargeConf_page .udpate-class .udpate-titile-class{display:inline-block;width:100px;margin-top:20px;text-align:center}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-title-class{text-align:center;width:130px;margin-top:20px}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class{text-align:left;width:130px;margin-top:20px}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio{width:0}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio .el-radio__label{padding-left:3px}}.register-page .tablecolor{background-color:#fff;font-weight:700}.register-page .big.filter-item .filter-item-label{width:100px}.register-page .detailClass{height:35px;font-weight:700;flex-direction:row;min-width:330px}.register-page .detailClass div{display:inline-block}.register-page .detailClass .detailClass-content{margin-left:20px}.register-page .detailClass .detailClass-title{margin-left:40px;margin-right:20px;margin-top:15px;font-size:14px;width:100px;text-align:justify;text-align-last:justify}.register-page .click-tab-class{cursor:pointer}.register-page .textarea_class{resize:none;border-radius:4px}.register-page .radio-class-isGive .el-radio__label{font-size:16px}.register-page .radio-class-give .el-radio__label{font-size:14px}.register-page .radio-class-give .el-radio{width:60px}.register-page .giveserviceClass{font-size:14px;margin-top:15px}.register-page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:100px}.register-page .giveserviceClass .title{margin-right:10px;width:86px;vertical-align:top}.register-page .udpate-class input{width:60px}.register-page .udpate-class .backage{background-color:#6895fe;color:#ebeef5;line-height:3;font-size:14px}.register-page .udpate-class .udpate-titile-class{display:inline-block;width:100px;margin-top:20px;text-align:center}.register-page .udpate-class .udpate-titile-class.is-give-title-class{text-align:center;width:130px;margin-top:20px}.register-page .udpate-class .udpate-titile-class.is-give-class{text-align:left;width:130px;margin-top:20px}.register-page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio{width:0}.register-page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio .el-radio__label{padding-left:3px}@media screen and (max-width:1600px){.register-page .el-button{padding:0 0}.register-page .detailClass{height:30px;font-size:12px;font-weight:700}.register-page .detailClass .detailClass-title{margin-right:20px;margin-top:15px;font-size:12px}.register-page .giveserviceClass,.register-page .radio-class-give .el-radio__label,.register-page .radio-class-isGive .el-radio__label{font-size:12px}.register-page .giveserviceClass .title{position:relative;text-align:justify;text-align-last:justify;width:57px;vertical-align:top}.register-page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}.register-page .udpate-class input{width:60px}.register-page .udpate-class .backage{background-color:#6895fe;color:#ebeef5;line-height:3;font-size:12px}.register-page .udpate-class .udpate-titile-class{display:inline-block;width:100px;margin-top:20px;text-align:center}.register-page .udpate-class .udpate-titile-class.is-give-title-class{text-align:center;width:130px;margin-top:20px}.register-page .udpate-class .udpate-titile-class.is-give-class{text-align:left;width:130px;margin-top:20px}.register-page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio{width:0}.register-page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio .el-radio__label{padding-left:3px}}.HeaderImgBox{width:40px;height:40px}.UserInfo-Box{width:170px;min-width:170px;font-family:Microsoft YaHei;font-size:12px;border-radius:8px}.UserInfo-Box .UserInfo-Title{flex-wrap:wrap;background-color:#4e82fb;position:relative;align-self:flex-start;padding:10px;box-sizing:border-box;display:flex}.UserInfo-Box .UserInfo-Title .UserInfo-Name-Box{align-self:center;flex:1;color:#fff;font-size:12px;line-height:24px}.UserInfo-Box .UserInfo-Title .UserInfo-Name-Box .UserInfo-Name-Col{margin-left:8px;display:flex;justify-content:space-between}.UserInfo-Box .UserInfo-Title .UserInfo-HeaderImg{width:46px;height:46px;border:3px solid #a7c0fd;border-radius:50%;margin-right:8px;overflow:hidden}.UserInfo-Box .UserInfo-Title .header-down{bottom:0;color:#fff;line-height:30px;min-width:130px}.UserInfo-Box .UserInfo-Title .UserInfo-IdTag{border-radius:0 8px 8px 0;box-shadow:0 0 10px #666;position:absolute;width:70px;height:18px;line-height:18px;text-indent:5px;left:0;bottom:-9px;background-color:#ffd737;font-size:12px;font-weight:700;color:#084e8a}.UserInfo-Box .UserInfo-Content{position:relative;height:auto;background-color:#fff;padding:10px}.UserInfo-Box .UserInfo-Content .UserInfo-Content-Col{line-height:25px}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box{margin-top:2px;display:flex}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box .UserInfo-State{display:flex;margin-right:10px;align-items:center}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box .UserInfo-State .UserInfo-State-Icon{width:12px;height:12px;margin-right:4px}.UserInfo-Box .UserInfo-Content .UserInfo-CampusName{line-height:1;margin-top:0}.UserInfo-Box .UserInfo-Content .user-pay{flex-wrap:wrap;display:flex}.UserInfo-Box .UserInfo-Content .user-pay .user-pay-pic{width:30px;height:30px;margin-right:10px}.UserInfo-Box .UserInfo-Content .user-pay .user-pay-pic .img{width:auto;height:auto}.UserInfo-Box .UserInfo-Content .add-button,.UserInfo-Box .UserInfo-Content .add-button .is-button{width:30px;height:30px}@media screen and (min-width:1600px){.UserInfo-Box{width:300px;min-width:300px;height:300px;font-size:16px}.UserInfo-Box .UserInfo-Title{padding:20px}.UserInfo-Box .UserInfo-Title .UserInfo-Name-Box{font-size:18px;line-height:38px}.UserInfo-Box .UserInfo-Title .UserInfo-HeaderImg{width:80px;height:80px;border-width:5px;margin-right:10px}.UserInfo-Box .UserInfo-Title .UserInfo-IdTag{width:128px;height:30px;line-height:30px;text-indent:5px;bottom:-20px;font-size:16px}.UserInfo-Box .UserInfo-Content{height:180px;padding:20px}.UserInfo-Box .UserInfo-Content .UserInfo-Content-Col{line-height:38px}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box{margin-top:6px}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box .UserInfo-State{margin-right:20px}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box .UserInfo-State .UserInfo-State-Icon{width:20px;height:20px;margin-right:10px}.UserInfo-Box .UserInfo-Content .UserInfo-CampusName{line-height:1;margin-top:10px}}.SigleUserWithContent .SigleUserWithContent-inner .right-part{border-radius:0 8px 8px 8px}.SigleUserWithContent .SigleUserWithContent-inner .right-part .el-dialog__header{border-radius:0 8px 0 0}.operpay .operpay-hsz{color:#f70707;margin-top:10px;margin-bottom:10px;margin-left:8px}.operpay .operpay-body{margin-bottom:15px;font-size:15px}.operpay .operpay-body .FormItem{margin-left:10px}.operpay .operpay-body .FormItem .FormItem-content.normal{width:252px}.operpay .table-with-body8 .table-width-body{width:1024px}.operpay .table-with-body8 .table-width-body .column-pic{width:20px;height:20px;margin:0 10px 0 70px}.operpay .table-with-body8 .table-width-body .just-format-picture{display:flex;justify-content:center;align-items:center}.operpay .table-with-body8 .table-width-body .just-format-picture img{width:20px;height:20px}.operpay .expand-item .expand-item-kv{display:flex;font-size:16px;line-height:23px}.operpay .expand-item .expand-item-kv .expand-item-key{text-align:right;width:200px}.operpay .expand-item .expand-item-kv .expand-item-value{width:auto;margin-left:10px}.operpay .operpay-body-self .FormLine{height:auto}.operpay .operpay-body-self .versionkey{width:435px}.operpay .operpay-body-self .versionkey .versionkey-item{margin:0 0 10px 30px}.operpay .key-class{margin-top:16px}.operpay .key-class .key-class-v{display:flex;font-size:16px;line-height:23px;margin-top:16px}.operpay .key-class .key-class-v .key-class-v-k{line-height:40px;text-align:justify;text-align-last:justify;width:128px}.operpay .key-class .key-class-v .key-class-v-k:after{content:"\FF1A";position:absolute}.operpay .key-class .key-class-v .key-class-v-v{width:auto;margin-left:20px}.oper_page .FormItem .FormItem-content.big{width:293px}.oper_page .search-box .button_q{min-width:194px;margin-left:-20px}.oper_page .img_style{display:flex;position:relative;margin-left:10px}.oper_page .img_style .image-uploader{height:109px}.oper_page .zi_style{font-size:18px;color:#333}.oper_page .pay_img{width:30px;height:30px;display:inline-block}@media screen and (max-width:1600px){.oper_page .zi_style{font-size:12px;color:#333;width:57px}.oper_page .img_style{margin-left:10px}.oper_page .el-dialog__wrapper .el-dialog__footer{box-sizing:content-box;height:40px;padding:89px 10px 20px;text-align:center}.oper_page .img_style{display:flex;position:relative}.oper_page .img_style .image-uploader{height:100px}}.SigleUserWithContent .SigleUserWithContent-inner{margin-left:60px;display:flex;background:transparent;box-shadow:none}.SigleUserWithContent .SigleUserWithContent-inner .UserInfo-Box{border-radius:8px}.SigleUserWithContent .SigleUserWithContent-inner .UserInfo-Box .UserInfo-Title{border-radius:8px 8px 0 0}.SigleUserWithContent .SigleUserWithContent-inner .UserInfo-Box .UserInfo-Content{border-radius:0 0 8px 8px}.SigleUserWithContent .SigleUserWithContent-inner .left-part{z-index:2;border-radius:8px;box-shadow:2px 2px 10px #333;box-shadow:none;align-self:flex-start}.SigleUserWithContent .SigleUserWithContent-inner .right-part{margin-left:20px;background-color:#fff;border-radius:8px 8px 8px 8px}.SigleUserWithContent .SigleUserWithContent-inner .right-part .el-dialog__header{border-radius:8px 8px 0 0}.SigleUserWithContent .sigle-user__body{display:flex;padding:0}.SigleUserWithContent .el-dialog__header{position:relative;height:38px;background-color:#4e82fb;padding:10px}.SigleUserWithContent .el-dialog__header .el-dialog__headerbtn{position:absolute;top:-20px;right:-20px;width:39px;height:39px}.SigleUserWithContent .el-dialog__header .connect-line{position:absolute;left:-50px;top:0;border-top:19px solid transparent;border-right:50px solid #4e82fb;border-bottom:19px solid transparent}.SigleUserWithContent .el-dialog__header .el-dialog__title{margin:0 auto 0;display:flex;justify-content:center;align-items:center;color:#fff;line-height:18px;vertical-align:top;font-size:14px}.SigleUserWithContent .el-dialog__header .el-dialog__title img{width:14px;height:14px;margin-right:20px}.SigleUserWithContent .el-dialog__footer{box-sizing:content-box;text-align:center}@media screen and (min-width:1600px){.SigleUserWithContent .SigleUserWithContent-inner .right-part{margin-left:25px}.SigleUserWithContent .el-dialog__header{height:96px}.SigleUserWithContent .el-dialog__header .el-dialog__headerbtn{top:-30px;right:-30px;width:65px;height:65px}.SigleUserWithContent .el-dialog__header .connect-line{left:-70px;border-top-width:48px;border-right-width:70px;border-bottom-width:48px}.SigleUserWithContent .el-dialog__header .el-dialog__title{margin:14px auto 0;font-size:22px}.SigleUserWithContent .el-dialog__header .el-dialog__title img{width:28px;height:28px;margin-right:20px}.SigleUserWithContent .el-dialog__footer{padding:50px 20px 40px}}.pay-ability .operpay-hsz{color:#f70707;margin-top:10px;margin-bottom:10px;margin-left:8px}.pay-ability .operate-payinfo .operpay-body{margin-bottom:15px;font-size:15px}.pay-ability .operate-payinfo .operpay-body .FormItem{margin-left:10px}.pay-ability .operate-payinfo .operpay-body .FormItem .FormItem-content.normal{width:252px}.pay-ability .operate-payinfo .table-width-body{width:1024px}.pay-ability .operate-payinfo .table-width-body .column-pic{width:22px;height:22px;margin:0 10px 0 25px}.pay-ability .operate-payinfo .expand-item .expand-item-kv{display:flex;font-size:16px;line-height:23px}.pay-ability .operate-payinfo .expand-item .expand-item-kv .expand-item-key{text-align:right;width:200px}.pay-ability .operate-payinfo .expand-item .expand-item-kv .expand-item-value{width:auto;margin-left:10px}.pay-ability .operate-payinfo .operpay-body-self .FormLine{height:auto}.pay-ability .operate-payinfo .operpay-body-self .versionkey{width:435px}.pay-ability .operate-payinfo .operpay-body-self .versionkey .versionkey-item{margin:0 0 10px 30px}.pay-ability .operate-payinfo .add-or-edit .el-dialog{width:900px!important}.pay-ability .operate-payinfo .add-or-edit .el-dialog .province-city .FormItem-content{width:254px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class{margin-top:16px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v{display:flex;font-size:16px;line-height:23px;color:#262626;margin-top:16px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-k{line-height:40px;text-align:end;width:160px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-k:after{content:"\FF1A";position:absolute}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-v{width:auto;margin-left:20px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-v .el-input{width:600px}@media screen and (max-width:1600px){.pay-ability .operate-payinfo .add-or-edit .el-dialog{width:680px!important}.pay-ability .operate-payinfo .add-or-edit .el-dialog .province-city .FormItem-content{width:254px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class{margin-top:0}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v{display:flex;font-size:12px;color:#262626;line-height:23px;margin-top:0}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-k{width:120px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-k:after{content:"\FF1A";position:absolute}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-v{padding-top:10px;width:auto;margin-left:10px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-v .el-input{width:360px}}.pav .column-pic{width:30px;height:30px;margin:0 auto}.pav .version-dialog-search .el-dialog__body{background-color:#f5f5f5}.pav .version-dialog-search .version-table-data{margin-top:60px}.pav .version-search-box{margin:22px 12px 0;background-color:#fff;border-radius:8px;padding:12px 8px 0;display:flex}.pav .version-search-box .version-search{flex:1;flex-grow:1;flex-shrink:1;flex-basis:0%;display:flex;flex-wrap:wrap}.pav .version-search-box .version-button{display:flex;flex-wrap:wrap;width:208px}.pav .version-size .version-input8{margin-top:10px}.pav .version-size .version-input8 .FormLine{margin-top:10x}.pav .version-size .version-input8 .FormLine .FormItem{width:515px}.pav .version-size .version-input8 .FormLine .FormItem .FormItem-content.normal{width:auto}.pav .version-size .version-input8 .FormLine .FormItem .FormItem-content.normal .version-input{width:auto;display:flex}.pav .version-detail .main-key8{font-size:12px;margin-top:10px;margin-bottom:10px}.pav .version-detail .main-key8 .FormLine{flex-wrap:wrap;height:auto}.pav .version-detail .main-key8 .FormLine .main-key:after{content:":";position:absolute;right:-5px}.pav .version-detail .main-key8 .FormLine .main-key{width:57px;text-align:justify;text-align-last:justify;position:relative}.pav .version-detail .main-key8 .FormLine .key-class-8{width:410px;display:flex;flex-wrap:wrap}.pav .version-detail .main-key8 .FormLine .key-class-8 .key-class-v-k{width:200px;padding-left:10px}.pav .upload-pic{margin-top:20px;width:40px;height:40px}.pav .upload-pic .image-uploader{width:auto;height:auto}.pav .dialog-paydetail .detail-show-pic img{width:20px;height:20px}.pav .dialog-paydetail .paydetail-version .FormLine{display:flex;height:auto}.pav .dialog-paydetail .paydetail-version .FormLine .big{display:flex;flex-wrap:wrap}.pav .dialog-paydetail .paydetail-version .FormLine .big .version-name{width:auto;padding-right:10px}.pav .dialog-paydetail .tablecolor{height:140px;background-color:#fff}@media screen and (min-width:1600px){.pav .version-detail .main-key8{font-size:18px;color:#262626}.pav .version-detail .main-key8 .FormLine{flex-wrap:wrap;height:auto}.pav .version-detail .main-key8 .FormLine .main-key:after{content:":";position:absolute;right:-5px}.pav .version-detail .main-key8 .FormLine .main-key{width:77px;text-align:justify;text-align-last:justify;position:relative}.pav .version-detail .main-key8 .FormLine .key-class-8{width:620px;display:flex;flex-wrap:wrap}.pav .version-detail .main-key8 .FormLine .key-class-8 .key-class-v-k{width:300px;margin-left:10px}.pav .dialog-paydetail .detail-show-pic .FormItem-content.big img{width:25px;height:25px;margin-top:7px}.pav .dialog-paydetail .paydetail-version .FormLine{display:flex;height:auto}.pav .dialog-paydetail .paydetail-version .FormLine .big{width:270px;display:flex;flex-wrap:wrap}.pav .dialog-paydetail .paydetail-version .FormLine .big .version-name{width:auto;padding-right:10px}}.self-service .service-comment .FormLine{height:auto;margin-top:10px}.self-service .service-comment .FormLine .FormItem .FormItem-content.big{width:300px}.self-service .service-comment .FormLine .FormItem .FormItem-content.big .el-textarea__inner{height:100px}.self-service .payway-table{width:500px}.self-service .payway-table .payway-table-line{display:flex}.self-service .payway-table .payway-table-item{text-align:center;width:33%}.self-service .service-dialog-detail .tablecolor{height:200px;background-color:#fff}.ChinaMapWrap{position:relative;width:100%;padding-top:50%}#china{width:100%;height:100%;position:absolute;left:0;top:0}.tipMarker{color:#555;background-color:rgba(255,254,239,.8);border:1px solid #7e7e7e;padding:2px 6px;font-size:12px;white-space:nowrap;display:inline-block}.tipMarker:after,.tipMarker:before{content:"";display:block;position:absolute;margin:auto;width:0;height:0;border:solid transparent;border-width:5px 5px}.tipMarker.top{transform:translate(-50%,-110%)}.tipMarker.top:after,.tipMarker.top:before{bottom:-9px;left:0;right:0;border-top-color:rgba(255,254,239,.8)}.tipMarker.top:before{bottom:-10px;border-top-color:#7e7e7e}.mapcontainer{position:relative}
\ No newline at end of file

public/baseManage/demo.html

+<meta charset="utf-8">
+<title>baseManage demo</title>
+<script src="https://unpkg.com/vue"></script>
+<script src="./baseManage.umd.js"></script>
+<link rel="stylesheet" href="./baseManage.css">
+
+<script>
+console.log(baseManage)
+</script>

public/baseManage/img/delimg.1e054df9.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M817.968553 215.897142l-169.357176 0 0-58.869782c0-25.391297-20.657482-46.048779-46.048779-46.048779l-181.125197 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 58.869782-169.357176 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 71.631434c0 25.391297 20.657482 46.048779 46.048779 46.048779l28.321022 0 0 425.947112c0 59.246359 48.200792 107.447151 107.447151 107.447151l340.40076 0c59.246359 0 107.447151-48.200792 107.447151-107.447151L789.647531 379.626133l28.321022 0c25.391297 0 46.048779-20.657482 46.048779-46.048779l0-71.631434C864.017332 236.554624 843.35985 215.897142 817.968553 215.897142zM426.553932 162.14389l170.892135 0 0 53.753251-170.892135 0L426.553932 162.14389zM738.482221 805.574269c0 31.033807-25.248034 56.281841-56.281841 56.281841L341.79962 861.85611c-31.033807 0-56.281841-25.248034-56.281841-56.281841L285.517779 379.626133l452.964442 0L738.482221 805.574269zM812.852022 328.460824l-601.704045 0 0-61.398372 203.227588 0c2.302439 0.356111 4.66116 0.542352 7.061836 0.542352l181.125197 0c2.400676 0 4.759397-0.186242 7.062859-0.542352l203.226564 0L812.852022 328.460824zM513.023306 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655-14.128789 0-25.582655 11.453866-25.582655 25.582655l0 288.572348C487.440651 771.866562 498.894518 783.320429 513.023306 783.320429zM645.541459 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C619.958804 771.866562 631.41267 783.320429 645.541459 783.320429zM380.505154 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C354.922499 771.866562 366.376365 783.320429 380.505154 783.320429z" p-id="3757"></path></svg>
\ No newline at end of file

public/baseManage/img/plus.b37e3783.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M185.89696 532.2752h286.72v286.72a20.48 20.48 0 1 0 40.96 0v-286.72h286.72a20.48 20.48 0 1 0 0-40.96h-286.72v-286.72a20.48 20.48 0 1 0-40.96 0v286.72h-286.72a20.48 20.48 0 1 0 0 40.96z" fill="" p-id="3098"></path></svg>
\ No newline at end of file

public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> -->
+    <!-- <script src="<%= VUE_APP_LIB_BASE_MANAGER %>/baseManage/lib/manageShell.umd.js"></script> -->
+    <link
+      rel="stylesheet"
+      href="<%= VUE_APP_LIB_BASE_MANAGER %>/baseManage/lib/manageShell.css"
+    />
+    <title>系统管理</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but hello-world doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

+<template>
+  <div id="app">
+    <app-layout v-if="isInnerPage">
+      <template slot="title">
+        <UserBox />
+      </template>
+      <template slot="nav">
+        <sidebar-nav :routers="route" />
+      </template>
+      <router-view v-if="routerDone" />
+      <div
+        class="loading-container"
+        v-else
+        v-loading="!routerDone"
+      ></div>
+    </app-layout>
+    <router-view v-else />
+  </div>
+</template>
+
+<script>
+import UserBox from './containers/layout/components/UserBox';
+
+const whiteList = process.env.VUE_APP_WHITE_LIST.split(','); // 不重定向白名单
+
+export default {
+  name: 'App',
+  components: { UserBox },
+  props: {
+    route: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      routerDone: false,
+      isInnerPage: true,
+    };
+  },
+  mounted() {
+    if (this.$route.meta && this.$route.meta.store) {
+      this.showComponents(this.$route.meta.store);
+    } else {
+      this.showComponents();
+    }
+  },
+  watch: {
+    $route(newVal) {
+      this.routerDone = false;
+      if (newVal.meta && newVal.meta.store) {
+        this.showComponents(newVal.meta.store);
+      } else {
+        this.showComponents();
+      }
+    },
+  },
+  methods: {
+    showComponents(store) {
+      this.isInnerPage =
+        whiteList.indexOf(this.$route.path) !== -1 ? false : true;
+      if (store) {
+        store.install(this.$store);
+        this.$nextTick(vm => {
+          this.routerDone = true;
+        });
+      } else {
+        this.routerDone = true;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.loading-container {
+  margin: 50px;
+}
+</style>
+

src/api/base/imageToken.js

+import fetch from '../fetch';
+
+const path = process.env.VUE_APP_BASE_SERVER_URL_APP;
+
+export const getUploadImgToken = req =>
+  fetch({
+    url: path + '/common/getQNToken',
+    ...req,
+  });
+export const getDelImgToken = req =>
+  fetch({
+    url: path + '/common/deleteFiles',
+    ...req,
+  });

src/api/base/index.js

+import fetch from '../fetch';
+
+const path = process.env.VUE_APP_BASE_SERVER_URL;
+// const path = 'http://192.168.1.33:8889';
+
+export const fetchAreaList = req =>
+  fetch({
+    url: path + '/dcxy/baseArea/queryAlls',
+    method: 'get',
+    ...req,
+  });
+
+//获取下拉列表
+export const fetchSelectList = req =>
+  fetch({
+    url: path + '/baseData/get/baseData',
+    method: 'get',
+    ...req,
+  });
+
+//获取服务类型
+export const fetchServiceList = req =>
+  fetch({
+    url: path + '/baseData/get/service',
+    method: 'get',
+    ...req,
+  });
+// 获取运营商
+export const fetchOperatorList = req =>
+  fetch({
+    url: path + '/dcxy/baseOperator/queryAll',
+    method: 'get',
+    ...req,
+  });
+// 获取豆类型
+export const fetchBeansList = req =>
+  fetch({
+    url: '/baseData/beans',
+    method: 'get',
+    ...req,
+  });
+// 获取所有菜单
+export const fetchMenuTree = req =>
+  fetch({
+    url: '/menu/menuButton/list',
+    method: 'get',
+    ...req,
+  });
+// 获取所有系统用户
+export const fetchAdminList = req =>
+  fetch({
+    url: '/admin/admin',
+    method: 'get',
+    ...req,
+  });

src/api/baseFetch.js

+import axios from 'axios';
+import { Message, MessageBox } from 'element-ui';
+import store from '@/store';
+import { errorHandle } from './validate';
+
+const createBaseFetch = config => {
+  const service = axios.create({
+    timeout: 10000,
+    ...config,
+  });
+  let logout = false;
+  // request拦截器
+  service.interceptors.request.use(
+    conf => {
+      store.dispatch('fetchStart');
+      conf.headers = {
+        ...conf.headers,
+        reqSource: 'pc',
+        token: store.getters.token ? store.getters.token : '',
+      };
+      return conf;
+    },
+    error => {
+      // Do something with request error
+      console.log(error); // for debug
+      Promise.reject(error);
+    }
+  );
+
+  // respone拦截器
+  service.interceptors.response.use(response => {
+    const res = response.data;
+    /**
+     * code为非 1000 是抛错
+     */
+    setTimeout(() => {
+      store.dispatch('fetchDone');
+    }, 500);
+    if (res.code !== 1000) {
+      if (
+        response.headers &&
+        /application\/octet-stream/.test(response.headers['content-type'])
+      ) {
+        return response;
+      }
+      Message({
+        message: res.msg || '网络错误！',
+        type: 'error',
+        duration: 5 * 1000,
+      });
+
+      // -2:其他客户端登录了;Token 过期了;
+      if (res.code === -2) {
+        if (logout) return;
+        logout = true;
+        MessageBox.confirm(
+          '你已被登出，可以取消继续留在该页面，或者重新登录',
+          '确定登出',
+          {
+            confirmButtonText: '重新登录',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }
+        )
+          .then(() => {
+            store.dispatch('FedLogOut').then(() => {
+              location.reload(); // 为了重新实例化vue-router对象 避免bug
+            });
+          })
+          .catch(err => {
+            console.log(err);
+            logout = false;
+          });
+      }
+
+      return Promise.reject(response.data);
+    } else {
+      return response.data;
+    }
+  }, errorHandle);
+
+  return service;
+};
+
+export default createBaseFetch;

src/api/fetch.js

+import axios from 'axios';
+import { Message, MessageBox } from 'element-ui';
+import store from '../store';
+import { SUCCESS_CODE } from '@/config';
+import { errorHandle } from './validate';
+import { getYourIP } from '@/utils/getIp.js';
+
+let ip = '127.0.0.1';
+getYourIP(ipVal => {
+  ip = ipVal;
+});
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: process.env.VUE_APP_SYSTEM_SERVER_URL, // api的base_url
+  timeout: 10000,
+});
+let logout = false;
+// request拦截器
+service.interceptors.request.use(
+  conf => {
+    store.dispatch('fetchStart');
+    if (store.getters.token) {
+      conf.headers = {
+        ...conf.headers,
+        reqSource: 'pc',
+        token: store.getters.token,
+        ip: ip,
+      };
+    } else {
+      conf.headers = {
+        ...conf.headers,
+        reqSource: 'pc',
+        ip: ip,
+      };
+    }
+
+    return conf;
+  },
+  error => {
+    // Do something with request error
+    console.log(error); // for debug
+    Promise.reject(error);
+  }
+);
+
+// respone拦截器
+service.interceptors.response.use(response => {
+  const res = response.data;
+  /**
+   * code为非'0'是抛错
+   */
+  setTimeout(() => {
+    store.dispatch('fetchDone');
+  }, 500);
+  if (res.code !== SUCCESS_CODE) {
+    if (
+      response.headers &&
+      response.headers['content-type'] === 'application/octet-stream'
+    ) {
+      return response;
+    }
+    Message({
+      message: res.msg || '网络错误！',
+      type: 'error',
+      duration: 5 * 1000,
+    });
+
+    // -2:其他客户端登录了;Token 过期了;
+    if (res.code === '-2') {
+      if (logout) return;
+      logout = true;
+      MessageBox.confirm(
+        '你已被登出，可以取消继续留在该页面，或者重新登录',
+        '确定登出',
+        {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }
+      )
+        .then(() => {
+          store.dispatch('FedLogOut').then(() => {
+            location.reload(); // 为了重新实例化vue-router对象 避免bug
+          });
+        })
+        .catch(err => {
+          console.log(err);
+          logout = false;
+        });
+    }
+    return Promise.reject(response.data);
+  } else {
+    return response.data;
+  }
+}, errorHandle);
+
+export default service;

src/api/user/login.js

+import fetch from '@/api/fetch';
+
+// 登录
+export const login = req =>
+  fetch({
+    url: '/login',
+    method: 'post',
+    withCredentials: true,
+    timeout: 60000,
+    ...req,
+  });
+// 登出
+export const logout = () =>
+  fetch({
+    method: 'post',
+    data: {},
+  });
+// 修改密码
+export const changePwd = req =>
+  fetch({
+    url: '/login/modifiyPwd',
+    method: 'post',
+    ...req,
+  });
+// 获取验证码
+export const fetchVcode = req =>
+  fetch({
+    url: '/login/verifyCode',
+    method: 'get',
+    withCredentials: true,
+    ...req,
+  });

src/api/validate.js

+import { Message, MessageBox } from 'element-ui';
+import store from '../store';
+
+export const validateCode = res => {
+  const { code } = res;
+  switch (code) {
+    case '0':
+      return res;
+    case '-2':
+      MessageBox.confirm(
+        '你已被登出，可以取消继续留在该页面，或者重新登录',
+        '确定登出',
+        {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }
+      ).then(() => {
+        store.dispatch('FedLogOut').then(() => {
+          location.reload(); // 为了重新实例化vue-router对象 避免bug
+        });
+      });
+      return Promise.reject(res);
+    default:
+      return Promise.reject(res);
+  }
+};
+
+export const errorHandle = error => {
+  console.log('err' + error); // for debug
+  store.dispatch('fetchDone');
+  if (error.message && /timeout/.test(error.message)) {
+    Message({
+      message: '请求超时！',
+      type: 'error',
+      duration: 5 * 1000,
+    });
+    return Promise.reject({ error, msg: '请求超时！' });
+  }
+  Message({
+    message: error.message,
+    type: 'error',
+    duration: 5 * 1000,
+  });
+  return Promise.reject(error);
+};

src/assets/icons/index.js

+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon'// svg组件
+
+// register globally
+Vue.component('svg-icon', SvgIcon)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)

src/assets/icons/svg/delimg.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M817.968553 215.897142l-169.357176 0 0-58.869782c0-25.391297-20.657482-46.048779-46.048779-46.048779l-181.125197 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 58.869782-169.357176 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 71.631434c0 25.391297 20.657482 46.048779 46.048779 46.048779l28.321022 0 0 425.947112c0 59.246359 48.200792 107.447151 107.447151 107.447151l340.40076 0c59.246359 0 107.447151-48.200792 107.447151-107.447151L789.647531 379.626133l28.321022 0c25.391297 0 46.048779-20.657482 46.048779-46.048779l0-71.631434C864.017332 236.554624 843.35985 215.897142 817.968553 215.897142zM426.553932 162.14389l170.892135 0 0 53.753251-170.892135 0L426.553932 162.14389zM738.482221 805.574269c0 31.033807-25.248034 56.281841-56.281841 56.281841L341.79962 861.85611c-31.033807 0-56.281841-25.248034-56.281841-56.281841L285.517779 379.626133l452.964442 0L738.482221 805.574269zM812.852022 328.460824l-601.704045 0 0-61.398372 203.227588 0c2.302439 0.356111 4.66116 0.542352 7.061836 0.542352l181.125197 0c2.400676 0 4.759397-0.186242 7.062859-0.542352l203.226564 0L812.852022 328.460824zM513.023306 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655-14.128789 0-25.582655 11.453866-25.582655 25.582655l0 288.572348C487.440651 771.866562 498.894518 783.320429 513.023306 783.320429zM645.541459 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C619.958804 771.866562 631.41267 783.320429 645.541459 783.320429zM380.505154 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C354.922499 771.866562 366.376365 783.320429 380.505154 783.320429z" p-id="3757"></path></svg>
\ No newline at end of file

src/assets/icons/svg/example.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M770.56 460.8h250.88C998.4 220.16 803.84 25.6 563.2 2.56v250.88c104.96 20.48 186.88 102.4 207.36 207.36z m0 0M460.8 253.44V2.56C220.16 25.6 25.6 220.16 2.56 460.8h250.88c20.48-104.96 102.4-186.88 207.36-207.36z m0 0M563.2 770.56v250.88c243.2-23.04 435.2-217.6 460.8-460.8H773.12C750.08 668.16 668.16 750.08 563.2 770.56z m0 0M253.44 563.2H2.56c23.04 243.2 217.6 435.2 460.8 460.8V773.12C355.84 750.08 273.92 668.16 253.44 563.2z m0 0" fill="" p-id="1816"></path></svg>
\ No newline at end of file

src/assets/icons/svg/eye.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503993826520" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7878" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M941.677063 391.710356c9.337669-14.005992 6.224772-32.68133-6.224772-43.575447-14.005992-10.894118-32.68133-7.78122-43.575447 6.224771-1.556449 1.556449-174.300768 205.426673-379.727441 205.426673-199.200878 0-379.727441-205.426673-381.28389-206.982098-10.894118-12.450567-31.124881-14.005992-43.575448-3.112898-12.450567 10.894118-14.005992 31.124881-3.112897 43.575448 3.112897 4.668323 40.46255 46.687322 99.600439 93.375667l-79.369676 82.48155c-12.450567 12.450567-10.894118 32.68133 1.556449 43.575448 3.112897 6.224772 10.894118 9.337669 18.675338 9.337669 7.78122 0 15.562441-3.112897 21.787213-9.337669l85.594447-88.706321c40.46255 28.013007 88.706321 54.469566 141.619438 73.14388L340.959485 707.631586c-4.668323 17.118889 4.669346 34.237779 21.787213 38.906101h9.337669c14.005992 0 26.456558-9.337669 29.568432-23.343661l32.68133-110.494556c24.90011 4.668323 51.356668 7.78122 77.813227 7.78122s52.913117-3.112897 77.813227-7.78122l32.68133 108.938108c3.112897 14.005992 17.118889 23.343661 29.569456 23.343661 3.112897 0 6.224772 0 7.78122-1.556449 17.118889-4.669346 26.456558-21.787212 21.788236-38.906102l-32.68133-108.938108c52.913117-18.675338 101.156888-45.131897 141.619438-73.14388l84.037998 87.150896c6.224772 6.224772 14.005992 9.337669 21.787212 9.337669 7.78122 0 15.562441-3.112897 21.787212-9.337669 12.450567-12.450567 12.450567-31.124881 1.556449-43.575448l-79.369675-82.48155c63.808258-46.688345 101.158934-91.820242 101.158934-91.820242z" p-id="7879"></path></svg>
\ No newline at end of file

src/assets/icons/svg/form.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504319223" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3230" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M942.827259 80.3367c-11.42419-11.406794-26.41051-17.117866-41.377386-17.117866-14.985296 0-29.952172 5.711072-41.358967 17.117866L719.392444 221.014696l-19.441794 19.441794L681.577187 258.832 569.516971 370.909611 375.99749 564.411697l0 0.019443 0 84.372619 81.145112 0 0.010233 0 95.418186-95.435583 213.398228-213.400275 3.14155-3.14155-0.019443 0 9.979282-9.977235 0 0L942.827259 163.073052C965.697129 140.259464 965.697129 103.186104 942.827259 80.3367z" p-id="3231"></path><path d="M793.542234 367.521444 580.14196 580.939115 484.72582 676.376745 473.299583 687.800935 457.152834 687.800935 375.99749 687.800935 337.000314 687.800935 337.000314 648.803759 337.000314 564.411697 337.000314 548.264948 348.424504 536.838711 541.943986 343.338672 654.004201 231.259014 665.428392 219.834824 64.020082 219.834824 64.020082 960.781166 804.966425 960.781166 804.966425 356.116697 796.607036 364.475062Z" p-id="3232"></path></svg>
\ No newline at end of file

src/assets/icons/svg/icon_delete.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1521704598179" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4010" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 557.223994l249.203712 249.203712c12.491499 12.491499 32.730449 12.489452 45.221948-0.002047s12.493545-32.730449 0.002047-45.221948L557.223994 512l249.203712-249.203712c12.491499-12.491499 12.489452-32.730449-0.002047-45.221948s-32.730449-12.493545-45.221948-0.002047L512 466.776006 262.796288 217.572294c-12.491499-12.491499-32.729425-12.490475-45.220924 0.001023-6.246261 6.246261-9.370415 14.429641-9.370415 22.610974s3.121084 16.365736 9.367345 22.610974L466.774983 512 217.572294 761.203712c-6.246261 6.246261-9.367345 14.428617-9.367345 22.610974s3.125177 16.365736 9.370415 22.610974c12.491499 12.491499 32.729425 12.493545 45.220924 0.002047L512 557.223994z" p-id="4011" fill="#d81e06"></path></svg>
\ No newline at end of file

src/assets/icons/svg/link.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1534225155003" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="755" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M516.672 605.76c11.136 42.624 0.64 89.856-32.64 123.136L348.288 864.64c-49.792 49.792-131.264 49.792-180.992 0l-45.248-45.248c-49.792-49.792-49.792-131.264 0-180.992l135.744-135.744c33.216-33.216 80.512-43.776 123.136-32.64L303.04 547.904 277.568 573.312l-110.336 110.336c-24.96 24.96-24.96 65.536 0 90.496l45.248 45.248c24.96 24.96 65.536 24.96 90.496 0l110.336-110.336 25.472-25.472L516.672 605.76zM891.328 140.608 846.08 95.36c-49.792-49.792-131.264-49.792-180.992 0L529.28 231.104C496.064 264.32 485.568 311.616 496.704 354.24l77.888-77.888L600 250.88l110.336-110.336c24.96-24.96 65.536-24.96 90.496 0l45.248 45.248c24.96 24.96 24.96 65.536 0 90.496l-110.336 110.336-25.472 25.472L632.448 489.984c42.624 11.136 89.856 0.64 123.136-32.64l135.744-135.744C941.12 271.808 941.12 190.336 891.328 140.608zM690.496 296.128c-12.416-12.416-32.832-12.48-45.248 0L574.528 366.848 529.28 412.096 438.784 502.656 393.536 547.904 322.816 618.624C319.744 621.696 317.376 625.28 315.84 629.184c-3.136 7.68-3.136 16.384 0 24.128 1.536 3.84 3.904 7.488 6.976 10.56 3.136 3.136 6.72 5.44 10.56 6.976 7.68 3.136 16.384 3.136 24.128 0 3.84-1.536 7.488-3.904 10.56-6.976l70.72-70.72 45.248-45.248 90.496-90.496 45.248-45.248 70.72-70.72C702.976 328.96 702.976 308.608 690.496 296.128z" p-id="756"></path></svg>
\ No newline at end of file

src/assets/icons/svg/password.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994678729" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9229" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M780.8 354.579692 665.6 354.579692 665.6 311.689846c0-72.310154-19.849846-193.299692-153.6-193.299692-138.870154 0-153.6 135.049846-153.6 193.299692l0 42.889846L243.2 354.579692 243.2 311.689846C243.2 122.249846 348.790154 0 512 0s268.8 122.249846 268.8 311.689846L780.8 354.579692zM588.8 669.420308C588.8 625.900308 554.220308 590.769231 512 590.769231s-76.8 35.131077-76.8 78.651077c0 29.459692 15.399385 54.468923 38.439385 67.820308l0 89.639385c0 21.740308 17.250462 39.699692 38.4 39.699692s38.4-17.959385 38.4-39.699692l0-89.639385C573.44 723.889231 588.8 698.88 588.8 669.420308zM896 512l0 393.609846c0 65.260308-51.869538 118.390154-115.2 118.390154L243.2 1024c-63.291077 0-115.2-53.129846-115.2-118.390154L128 512c0-65.220923 51.869538-118.390154 115.2-118.390154l537.6 0C844.130462 393.609846 896 446.779077 896 512z" p-id="9230"></path></svg>
\ No newline at end of file

src/assets/icons/svg/plus.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M185.89696 532.2752h286.72v286.72a20.48 20.48 0 1 0 40.96 0v-286.72h286.72a20.48 20.48 0 1 0 0-40.96h-286.72v-286.72a20.48 20.48 0 1 0-40.96 0v286.72h-286.72a20.48 20.48 0 1 0 0 40.96z" fill="" p-id="3098"></path></svg>
\ No newline at end of file

src/assets/icons/svg/star.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994797471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9770" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M565.272827 34.627285l112.095872 237.542288c8.706637 18.321022 25.411424 31.051641 44.82285 33.996289l250.776598 38.081157c48.697387 7.411435 68.22505 70.046082 32.933559 105.979639l-181.494353 184.937155c-13.998147 14.230618-20.352386 34.815477-17.05903 54.93539l42.819161 261.127145c8.346858 50.695541-42.64204 89.451974-86.225039 65.51841l-224.307979-123.271141c-17.285968-9.525824-37.992596-9.525824-55.278564 0l-224.313514 123.271141c-43.582999 23.933565-94.571897-14.822869-86.219504-65.51841l42.813626-261.127145c3.321031-20.119914-3.088559-40.704772-17.086706-54.93539l-181.439002-184.937155c-35.285956-35.933557-15.819179-98.57374 32.933559-105.979639l250.748923-38.081157c19.350541-2.939112 36.083003-15.675267 44.75643-33.996289l112.123547-237.542288C480.497972-11.540583 543.509003-11.540583 565.272827 34.627285z" p-id="9771"></path></svg>
\ No newline at end of file

src/assets/icons/svg/table.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504440567" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5070" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M568.6 0h454.9v454.9H568.6V0z m0 568.6h454.9v454.9H568.6V568.6zM0 568.6h454.9v454.9H0V568.6zM0 0h454.9v454.9H0V0z" fill="" p-id="5071"></path></svg>
\ No newline at end of file

src/assets/icons/svg/tree.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511512690058" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3507" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M1013.703 693.345c6.865 6.865 10.297 14.874 10.297 24.027l0 205.944c0 9.916-3.432 18.115-10.297 24.599-6.865 6.483-15.255 9.725-25.171 9.725L782.588 957.64c-9.153 0-17.162-3.242-24.027-9.725-6.865-6.483-10.297-14.683-10.297-24.599L748.264 717.372c0-6.102 1.526-11.823 4.577-17.162s7.246-9.534 12.586-12.586 11.06-4.577 17.162-4.577l77.801 0L860.39 546.896c0-4.577-1.144-8.772-3.432-12.586s-5.339-6.865-9.153-9.153-8.009-3.432-12.585-3.432L543.464 521.725l0 161.323 77.801 0c9.153 0 17.162 3.432 24.027 10.297s10.297 14.874 10.297 24.027l0 205.944c0 6.102-1.526 11.823-4.577 17.162s-7.246 9.534-12.585 12.585-11.06 4.577-17.162 4.577L415.321 957.64c-6.102 0-11.823-1.526-17.162-4.577s-9.725-7.246-13.158-12.585-5.149-11.06-5.149-17.162L379.852 717.372c0-9.153 3.432-17.162 10.297-24.027s15.255-10.297 25.171-10.297l76.657 0L491.977 521.725 188.782 521.725c-7.628 0-13.92 2.479-18.878 7.437-4.958 4.958-7.437 10.869-7.437 17.734l0 136.152 77.801 0c9.916 0 18.115 3.432 24.599 10.297s9.725 14.874 9.725 24.027l0 205.944c0 9.916-3.242 18.115-9.725 24.599-6.483 6.483-14.683 9.725-24.599 9.725L34.324 957.64c-3.814 0-7.437-0.572-10.869-1.716-3.432-1.144-6.483-2.67-9.153-4.577-2.67-1.907-5.149-4.386-7.437-7.437-2.288-3.051-4.004-6.293-5.149-9.725C0.572 930.753 0 927.13 0 923.316L0 717.372c0-3.051 0.381-6.102 1.144-9.153s1.907-5.721 3.432-8.009 3.432-4.577 5.721-6.865 4.577-4.195 6.865-5.721 4.958-2.67 8.009-3.432 6.102-1.144 9.153-1.144l77.801 0L112.125 495.41c0-6.865 2.479-12.776 7.437-17.734s10.869-7.437 17.734-7.437l354.682 0L491.978 342.096l-76.657 0c-9.916 0-18.306-3.432-25.171-10.297s-10.297-14.874-10.297-24.027L379.853 101.828c0-9.916 3.432-18.306 10.297-25.171s15.255-10.297 25.171-10.297l205.944 0c6.102 0 11.823 1.716 17.162 5.149 5.339 3.432 9.534 7.818 12.585 13.158 3.051 5.339 4.577 11.06 4.577 17.162l0 205.944c0 9.153-3.432 17.162-10.297 24.027s-14.874 10.297-24.027 10.297l-77.801 0 0 128.143L885.56 470.24c7.628 0 13.92 2.479 18.878 7.437s7.437 10.869 7.437 17.734l0 187.638 76.657 0C998.448 683.048 1006.838 686.48 1013.703 693.345z" p-id="3508"></path></svg>
\ No newline at end of file

src/assets/icons/svg/user.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503993891882" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7986" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M504.951 511.98c93.49 0 169.28-74.002 169.28-165.26 0-91.276-75.79-165.248-169.28-165.248-93.486 0-169.287 73.972-169.279 165.248-0.001 91.258 75.793 165.26 169.28 165.26z m77.6 55.098H441.466c-120.767 0-218.678 95.564-218.678 213.45V794.3c0 48.183 97.911 48.229 218.678 48.229H582.55c120.754 0 218.66-1.78 218.66-48.229v-13.77c0-117.887-97.898-213.45-218.66-213.45z" p-id="7987"></path></svg>
\ No newline at end of file

src/assets/styles/element-ui.scss

+//to reset element-ui default css
+
+/* 改变主题色变量 */
+$--color-primary: #1459fc;
+$--color-danger: #ff3333;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import '~element-ui/packages/theme-chalk/src/index';
+
+#app {
+  .el-checkbox__input.is-checked + .el-checkbox__label {
+    color: $--color-primary;
+  }
+  .el-checkbox__input.is-checked .el-checkbox__inner,
+  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: $--color-primary;
+    border-color: $--color-primary;
+  }
+}
+
+.el-upload {
+  input[type='file'] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+.el-dialog {
+  transform: none;
+  left: 0;
+  position: relative;
+  margin: 0 auto;
+}
+.el-dialog__body {
+  padding: 30px 40px;
+}
+//element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+.el-input__inner {
+  background-color: #f6f6f6;
+  border-color: #f6f6f6;
+}
+.el-select .el-input .el-select__caret.is-reverse {
+  color: $--color-primary;
+}
+.el-select {
+  width: 100%;
+}
+.el-submenu .el-menu-item,
+.el-submenu__title {
+  height: 40px;
+  line-height: 40px;
+}
+.el-input__inner,
+.el-button {
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+}
+.el-button {
+  padding: 0 8px;
+}
+.el-input {
+  .el-input__suffix .el-input__icon {
+    line-height: 22px;
+  }
+}
+.el-loading-mask {
+  z-index: 1000 !important;
+}
+@media screen and (min-width: $bigScreenWidth) {
+  .el-submenu .el-menu-item,
+  .el-submenu__title {
+    height: 56px;
+    line-height: 56px;
+  }
+  .el-input__inner,
+  .el-button {
+    height: 40px;
+    line-height: 1;
+    font-size: 14px;
+  }
+  .el-button {
+    font-size: 14px;
+    padding: 12px 20px;
+  }
+  .el-input {
+    .el-input__suffix .el-input__icon {
+      line-height: 40px;
+    }
+  }
+}

src/assets/styles/index.scss

+@import './variables.scss';
+@import './element-ui.scss';
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+div:focus {
+  outline: none;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type='number'] {
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+}
+
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: ' ';
+    clear: both;
+    height: 0;
+  }
+}
+.ImportentText {
+  font-style: normal;
+  color: #ffd200;
+}
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.pointer {
+  cursor: pointer;
+}
+.el-tooltip__popper {
+  max-width: 60%;
+}
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+#app {
+  font-size: 12px;
+}
+body {
+  .el-input-number,
+  .el-input__inner,
+  .el-input,
+  .el-button {
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+  }
+}
+
+.el-button {
+  padding: 0 8px;
+}
+@media screen and (min-width: $bigScreenWidth) {
+  #app {
+    font-size: 14px;
+  }
+  body {
+    .el-input-number,
+    .el-input__inner,
+    .el-input,
+    .el-button {
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+    }
+    .el-button {
+      line-height: 1;
+    }
+  }
+  .el-button {
+    padding: 12px 20px;
+  }
+}

src/assets/styles/variables.scss

+// media min-width
+$bigScreenWidth: 1600px;
+//sidebar
+$sideBar-width: 112px;
+$menuBg: #477cfa;
+$subMenuBg: #306bf6;
+$menuHover: #1459fc;
+$menuActions: #1459fc;
+// topbar
+$topBar-height: 44px;
+
+// footer
+$footer-height: 30px;

src/components/Breadcrumb/index.vue

+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <template v-for="(item,index)  in levelList">
+        <el-breadcrumb-item  :key="item.path" v-if="item.meta.title">
+          <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
+          <router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
+        </el-breadcrumb-item>
+      </template>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script>
+export default {
+  created() {
+    this.getBreadcrumb()
+  },
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  },
+  methods: {
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter(item => item.name)
+      const first = matched[0]
+      if (first && first.name !== 'home') {
+        matched = [{ path: '/home', meta: { title: '首页' }}].concat(matched)
+      }
+      this.levelList = matched
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-breadcrumb.el-breadcrumb {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 50px;
+    margin-left: 10px;
+    .no-redirect {
+      color: #97a8be;
+      cursor: text;
+    }
+  }
+</style>

src/components/ScrollBar/index.vue

+<template>
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
+    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const delta = 15;
+
+export default {
+  name: 'scrollBar',
+  data() {
+    return {
+      top: 0,
+    };
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 3;
+      const $container = this.$refs.scrollContainer;
+      const $containerHeight = $container.offsetHeight;
+      const $wrapper = this.$refs.scrollWrapper;
+      const $wrapperHeight = $wrapper.offsetHeight;
+      if (eventDelta > 0) {
+        this.top = Math.min(0, this.top + eventDelta);
+      } else {
+        if ($containerHeight - delta < $wrapperHeight) {
+          if (this.top < -($wrapperHeight - $containerHeight + delta)) {
+            this.top = this.top;
+          } else {
+            this.top = Math.max(
+              this.top + eventDelta,
+              $containerHeight - $wrapperHeight - delta
+            );
+          }
+        } else {
+          this.top = 0;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.scroll-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .scroll-wrapper {
+    position: absolute;
+    width: 100% !important;
+  }
+}
+</style>

src/components/ScrollPane/index.vue

+<template>
+  <div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll">
+    <div class="scroll-wrapper" ref="scrollWrapper" :style="{left: left + 'px'}">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+const padding = 15 // tag's padding
+
+export default {
+  name: 'scrollPane',
+  data() {
+    return {
+      left: 0
+    }
+  },
+  methods: {
+    handleScroll(e) {
+      const eventDelta = e.wheelDelta || -e.deltaY * 3
+      const $container = this.$refs.scrollContainer
+      const $containerWidth = $container.offsetWidth
+      const $wrapper = this.$refs.scrollWrapper
+      const $wrapperWidth = $wrapper.offsetWidth
+
+      if (eventDelta > 0) {
+        this.left = Math.min(0, this.left + eventDelta)
+      } else {
+        if ($containerWidth - padding < $wrapperWidth) {
+          if (this.left < -($wrapperWidth - $containerWidth + padding)) {
+            this.left = this.left
+          } else {
+            this.left = Math.max(this.left + eventDelta, $containerWidth - $wrapperWidth - padding)
+          }
+        } else {
+          this.left = 0
+        }
+      }
+    },
+    moveToTarget($target) {
+      const $container = this.$refs.scrollContainer
+      const $containerWidth = $container.offsetWidth
+      const $targetLeft = $target.offsetLeft
+      const $targetWidth = $target.offsetWidth
+
+      if ($targetLeft < -this.left) {
+        // tag in the left
+        this.left = -$targetLeft + padding
+      } else if ($targetLeft + padding > -this.left && $targetLeft + $targetWidth < -this.left + $containerWidth - padding) {
+        // tag in the current view
+        // eslint-disable-line
+      } else {
+        // tag in the right
+        this.left = -($targetLeft - ($containerWidth - $targetWidth) + padding)
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.scroll-container {
+  white-space: nowrap;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  .scroll-wrapper {
+    position: absolute;
+  }
+}
+</style>

src/components/input/AreaSelect/AreaSelect.vue

+<template>
+  <el-select
+    clearable
+    filterable
+    :value="value"
+    @change="changeHandle"
+  >
+    <el-option
+      v-for="(item, index) in areaList"
+      :key="index"
+      :value="item.id"
+      :label="item.areaName"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+import areaMixin from './mixin.js';
+
+export default {
+  name: 'area-select',
+  props: {
+    size: String,
+    value: Number,
+  },
+  mixins: [areaMixin],
+  methods: {
+    changeHandle(val) {
+      if (val) {
+        this.$emit('input', val);
+      } else {
+        this.$emit('input', null);
+      }
+    },
+  },
+};
+</script>
+

src/components/input/AreaSelect/areaStore.js

+import { fetchAreaList } from '@/api/base/index';
+
+const GET_AREA_LIST = 'GET_AREA_LIST';
+const FETCH_STATE = 'FETCH_STATE';
+
+const state = () => ({
+  list: [],
+  fetching: false,
+});
+
+const getters = {
+  areaList: state => state.list,
+};
+
+const actions = {
+  fetchAreaList({ state, commit }) {
+    if (state.fetching) return;
+    commit(FETCH_STATE, true);
+    return fetchAreaList().then(res => {
+      const list = res.data;
+      commit(GET_AREA_LIST, list);
+      commit(FETCH_STATE, false);
+    });
+  },
+};
+
+const mutations = {
+  [GET_AREA_LIST](state, list) {
+    state.list = list;
+  },
+  [FETCH_STATE](state, fetching) {
+    state.fetching = fetching;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/components/input/AreaSelect/index.js

+import AreaSelect from './AreaSelect';
+import areaMixin from './mixin';
+
+export { areaMixin };
+export default AreaSelect;

src/components/input/AreaSelect/mixin.js

+import { mapGetters, mapActions } from 'vuex';
+import store from './store';
+
+export default {
+  created() {
+    store.install(this.$store);
+  },
+  mounted() {
+    if (!this.areaList.length) {
+      this.fetchAreaList();
+    }
+  },
+  computed: {
+    ...mapGetters('area', ['areaList']),
+  },
+  methods: {
+    ...mapActions('area', ['fetchAreaList']),
+    getAreaName(id) {
+      let item = this.areaList.find(area => area.id === id);
+      if (item) {
+        return item.areaName;
+      } else {
+        return '';
+      }
+    },
+  },
+};

src/components/input/AreaSelect/store.js

+import areaStroe from './areaStore';
+
+export default {
+  install(store) {
+    if (!store.state.base) {
+      store.registerModule(['base'], {
+        state: {},
+      });
+    }
+    if (!store.state.base.area) {
+      store.registerModule(['base', 'area'], areaStroe);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['base', 'area']);
+  },
+};

src/components/input/BaseDataSelect/BaseDataSelect.vue

+<template>
+  <el-select
+    clearable
+    filterable
+    :value="value"
+    @change="changeHandle"
+  >
+    <el-option
+      v-for="(item, index) in baseDataOptionsList"
+      :key="index"
+      :value="item.value"
+      :label="item.name"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import baseDataMixin from './mixin.js';
+import { selectTypeMapping } from '@/config';
+
+export default {
+  name: 'base-data-select',
+  mixins: [baseDataMixin],
+  props: {
+    size: {
+      type: String,
+      default: 'normal',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      baseDataOptionsList: [],
+    };
+  },
+  created() {
+    if (this.label) {
+      this.getOptionsList(this.label).then(list => {
+        this.baseDataOptionsList = list;
+      });
+    }
+  },
+};
+</script>
+

src/components/input/BaseDataSelect/baseDataStore.js

+import { fetchSelectList } from '@/api/base/index';
+import { selectTypeMapping } from '@/config';
+
+const GET_OPTIONS_LIST = 'GET_OPTIONS_LIST';
+
+const state = () => {
+  let baseState = {};
+  selectTypeMapping.map(typeItem => {
+    baseState['list' + typeItem.value] = [];
+  });
+  return baseState;
+};
+const initGetters = () => {
+  let getters = {};
+  selectTypeMapping.map(typeItem => {
+    getters['optionList' + typeItem.value] = state =>
+      state['list' + typeItem.value];
+    return {
+      ['optionList' + typeItem.value]: state => state['list' + typeItem.value],
+    };
+  });
+  return getters;
+};
+const initActions = () => {
+  let actions = {};
+  selectTypeMapping.map(typeItem => {
+    actions['fetchOptionList' + typeItem.value] = ({ commit }) => {
+      return fetchSelectList({
+        params: {
+          type: typeItem.value,
+        },
+      }).then(res => {
+        const list = res.data;
+        if (list) {
+          commit(GET_OPTIONS_LIST, {
+            key: 'list' + typeItem.value,
+            list,
+          });
+        }
+        return list;
+      });
+    };
+  });
+  return actions;
+};
+
+const getters = initGetters();
+
+const actions = initActions();
+
+const mutations = {
+  [GET_OPTIONS_LIST](state, { key, list }) {
+    state[key] = list;
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/components/input/BaseDataSelect/index.js

+import BaseDataSelect from './BaseDataSelect.vue';
+import baseDataMixin from './mixin';
+
+export { baseDataMixin };
+export default BaseDataSelect;

src/components/input/BaseDataSelect/mixin.js

+import { selectTypeMapping } from '@/config';
+import { mapGetters, mapActions } from 'vuex';
+import store from './store';
+
+const getterList = selectTypeMapping.map(types => `optionList${types.value}`);
+const actionsList = selectTypeMapping.map(
+  types => `fetchOptionList${types.value}`
+);
+
+export default {
+  data() {
+    return {
+      baseDataOptionsLabel: [], // 页面需要声明需要使用的基础数据 例如： ['赠送类型']
+    };
+  },
+  created() {
+    store.install(this.$store);
+    this.baseDataOptionsLabel.map(this.getOptionsValue).map(value => {
+      if (this[`optionList${value}`] && !this[`optionList${value}`].length) {
+        this[`fetchOptionList${value}`]();
+      }
+    });
+  },
+  computed: {
+    ...mapGetters(getterList),
+  },
+  methods: {
+    ...mapActions(actionsList),
+    changeHandle(val) {
+      this.$emit('input', val);
+    },
+    getOptionsList(label) {
+      let optionValue = this.getOptionsValue(label);
+      if (optionValue) {
+        let options = this.$store.getters['optionList' + optionValue];
+        if (options && options.length) {
+          return Promise.resolve(options);
+        } else {
+          return this.$store.dispatch('fetchOptionList' + optionValue);
+        }
+      } else {
+        return Promise.resolve([]);
+      }
+    },
+    getOptionsValue(label) {
+      let item = selectTypeMapping.find(item => item.label === label);
+      return item ? item.value : null;
+    },
+    getOptionsName(label, val) {
+      let optionValue = this.getOptionsValue(label);
+      if (optionValue) {
+        let item = this[`optionList${optionValue}`].find(
+          ({ value }) => val === value
+        );
+        return item ? item.name : '';
+      }
+      return '';
+    },
+    formatterMoneyToDouble(val) {
+      return val ? Number(val).toFixed(2) : Number(0).toFixed(2);
+    },
+  },
+};

src/components/input/BaseDataSelect/store.js

+import baseDataStore from './baseDataStore';
+
+export default {
+  install(store) {
+    if (!store.state.base) {
+      store.registerModule(['base'], {
+        state: {},
+      });
+    }
+    if (!store.state.base.baseData) {
+      store.registerModule(['base', 'baseData'], baseDataStore);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['base', 'baseData']);
+  },
+};

src/components/input/BeanTypeSelect/BeanTypeSelect.vue

+<template>
+  <el-select
+    clearable
+    filterable
+    :value="value"
+    @change="changeHandle"
+  >
+    <el-option
+      v-for="(item, index) in beansList"
+      :key="index"
+      :value="item.value"
+      :label="item.name"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+import beansMixin from './mixin.js';
+
+export default {
+  name: 'beans-select',
+  props: {
+    size: String,
+    value: Number,
+  },
+  mixins: [beansMixin],
+  methods: {
+    changeHandle(val) {
+      this.$emit('input', val);
+    },
+  },
+};
+</script>
+

src/components/input/BeanTypeSelect/beansStore.js

+import { fetchBeansList } from '@/api/base/index';
+
+const GET_BEANS_LIST = 'GET_BEANS_LIST';
+const FETCH_STATE = 'FETCH_STATE';
+
+const state = () => ({
+  list: [],
+  fetching: false,
+});
+
+const getters = {
+  beansList: state => state.list,
+};
+
+const actions = {
+  fetchBeansList({ state, commit }) {
+    if (state.fetching) return;
+    commit(FETCH_STATE, true);
+    return fetchBeansList().then(res => {
+      const list = res.data;
+      commit(GET_BEANS_LIST, list);
+      commit(FETCH_STATE, false);
+    });
+  },
+};
+
+const mutations = {
+  [GET_BEANS_LIST](state, list) {
+    state.list = list.map(item => ({ ...item, value: Number(item.value) }));
+  },
+  [FETCH_STATE](state, fetching) {
+    state.fetching = fetching;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/components/input/BeanTypeSelect/index.js

+import BeanTypeSelect from './BeanTypeSelect.vue';
+import beansMixin from './mixin';
+
+export { beansMixin };
+export default BeanTypeSelect;

src/components/input/BeanTypeSelect/mixin.js

+import { mapGetters, mapActions } from 'vuex';
+import store from './store';
+
+export default {
+  created() {
+    store.install(this.$store);
+  },
+  mounted() {
+    if (!this.beansList.length) {
+      this.fetchBeansList();
+    }
+  },
+  computed: {
+    ...mapGetters('beans', ['beansList']),
+  },
+  methods: {
+    ...mapActions('beans', ['fetchBeansList']),
+    getBeanName(value) {
+      let item = this.beansList.find(area => area.value === value);
+      if (item) {
+        return item.name;
+      } else {
+        return '';
+      }
+    },
+  },
+};

src/components/input/BeanTypeSelect/store.js

+import beansStore from './beansStore';
+
+export default {
+  install(store) {
+    if (!store.state.base) {
+      store.registerModule(['base'], {
+        state: {},
+      });
+    }
+    if (!store.state.base.beans) {
+      store.registerModule(['base', 'beans'], beansStore);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['base', 'beans']);
+  },
+};

src/components/input/Editor.vue

+<template>
+  <div class="editor-wrapper" ref="editor" style="text-align:left;margin-top: 20px;"></div>
+</template>
+
+<script>
+import E from 'wangeditor';
+import * as qiniu from 'qiniu-js';
+import config from '@/config/index';
+import { getUploadImgToken, getDelImgToken } from '@/api/mall/common';
+
+export default {
+  name: 'editor',
+  props: {
+    onchange: Function,
+    config: Object,
+  },
+  data() {
+    return {
+      IMG_URL: config.IMG_URL,
+      editor: null,
+    };
+  },
+  methods: {
+    getImgToken(isReload) {
+      if (isReload) {
+        getUploadImgToken().then(res => {
+          console.log(res);
+          window.$imageToken = res.data;
+          this.uploadImg();
+        });
+        return;
+      }
+      if (window.hasToken) return;
+      window.hasToken = true;
+      getUploadImgToken().then(res => {
+        window.$imageToken = res.data;
+      });
+    },
+    uploadImg(files, insert) {
+      console.log(files);
+      // files 是 input 中选中的文件列表
+      // insert 是获取图片 url 后，插入到编辑器的方法
+      let file = files[0];
+      let key = null;
+      let putExtra = {
+        fname: '',
+        params: {},
+        mimeType: null,
+      };
+      let config = {
+        useCdnDomain: true,
+        region: qiniu.region.z2,
+      };
+      // 调用sdk上传接口获得相应的observable，控制上传和暂停
+      let observable = qiniu.upload(
+        file,
+        key,
+        window.$imageToken,
+        putExtra,
+        config
+      );
+      // 上传代码返回结果之后，将图片插入到编辑器中
+      let complete = response => {
+        insert(this.IMG_URL + response.key);
+      };
+      let _error = err => {
+        console.log(err);
+        if (err.isRequestError && err.code == 401) {
+          this.getImgToken(true);
+        } else {
+          console.log(err);
+          this.$refs.input.value = '';
+        }
+      };
+      let _next = res => {
+        // total: {
+        //  loaded: number，已上传大小，单位为字节。
+        //  total: number，本次上传的总量控制信息，单位为字节。
+        //  percent: number，当前上传进度，范围：0～100。
+        // }
+        console.log(res.total.percent);
+      };
+      observable.subscribe({
+        next: this._next,
+        error: _error,
+        complete,
+      });
+    },
+  },
+  mounted() {
+    this.editor = new E(this.$refs.editor);
+    this.editor.customConfig = {
+      menus: [
+        'head', // 标题
+        'bold', // 粗体
+        'fontSize', // 字号
+        'fontName', // 字体
+        'italic', // 斜体
+        'underline', // 下划线
+        'strikeThrough', // 删除线
+        'foreColor', // 文字颜色
+        'backColor', // 背景颜色
+        // 'link', // 插入链接
+        // 'list', // 列表
+        'justify', // 对齐方式
+        'quote', // 引用
+        // 'emoticon', // 表情
+        'image', // 插入图片
+        // 'table', // 表格
+        // 'video', // 插入视频
+        // 'code', // 插入代码
+        'undo', // 撤销
+        'redo', // 重复
+      ],
+      customUploadImg: this.uploadImg,
+      onchange: this.onchange,
+      zIndex: 300,
+      ...this.config,
+    };
+    this.editor.create();
+  },
+};
+</script>
+
+<style>
+.editor-wrapper {
+  width: 80%;
+}
+.editor-wrapper img {
+  width: auto;
+}
+</style>

src/components/input/GiveTypeSelect.vue

+<template>
+  <search-item
+    label="赠送类型"
+    
+    :size="size"
+  >
+    <el-select
+      clearable
+      filterable
+      :value="value"
+      @change="changeHandle"
+    >
+      <el-option
+        v-for="(item, index) in giveTypeList"
+        :key="index"
+        :value="item.value"
+        :label="item.name"
+      ></el-option>
+    </el-select>
+  </search-item>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  name: 'give-select',
+  props: {
+    size: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  mounted() {
+    if (!this.giveTypeList.length) {
+      this.fetchGiveTypeList();
+    }
+  },
+  computed: {
+    ...mapGetters(['giveTypeList']),
+  },
+  methods: {
+    ...mapActions(['fetchGiveTypeList']),
+    changeHandle(val) {
+       this.$emit('input', val);
+           
+    },
+    getTypeName(val){
+      let item = this.giveTypeList.find(({value}) => val === value);
+      return item?item.name: '';
+    }
+  },
+};
+</script>
+

src/components/input/ImageUploader/ImageTokenStore.js

+import { getUploadImgToken } from '@/api/base/imageToken';
+
+const GET_UPLOADIMG_TOKEN = 'GET_UPLOADIMG_TOKEN';
+const FETCH_STATE = 'FETCH_STATE';
+
+const state = {
+  imgToken: '',
+  fetching: false,
+};
+
+const getters = {
+  imgToken: state => state.imgToken,
+};
+
+const actions = {
+  getUploadImgToken({ commit }) {
+    if (state.fetching) return;
+    commit(FETCH_STATE, true);
+    return getUploadImgToken().then(res => {
+      const { token } = res.data;
+      commit(GET_UPLOADIMG_TOKEN, token);
+      commit(FETCH_STATE, false);
+    });
+  },
+};
+
+const mutations = {
+  [GET_UPLOADIMG_TOKEN](state, data) {
+    state.imgToken = data;
+  },
+  [FETCH_STATE](state, fetching) {
+    state.fetching = fetching;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/components/input/ImageUploader/ImageUploader.vue

+<template>
+  <div class="image-uploader">
+    <div
+      v-if="done"
+      @mouseover="toogleDelIcon"
+      @mouseout="toogleDelIcon"
+      class="image-uploader-done"
+    >
+      <div
+        v-if="showDel && canDelete"
+        class="mask"
+      >
+        <div
+          @click="delImg"
+          class="delimg icon"
+        >
+          <img src="@/assets/icons/svg/delimg.svg" />
+        </div>
+      </div>
+      <img
+        class="image-uploader-img"
+        :src="url"
+      />
+      <!-- <img class="del" src="@/assets/images/icon_delete.png" @click="delImg" /> -->
+    </div>
+    <label
+      v-else
+      class="image-uploader-pre"
+    >
+      <slot>
+        <div
+          class="icon image-uploader-icon"
+          aria-hidden="true"
+        >
+          <img src="@/assets/icons/svg/plus.svg" />
+        </div>
+      </slot>
+      <input
+        ref='input'
+        type="file"
+        accept='image/*'
+        @change="uploadImg"
+        style="display: none;"
+      />
+    </label>
+  </div>
+</template>
+
+<script>
+import * as qiniu from 'qiniu-js';
+import { getDelImgToken } from '@/api/base/imageToken';
+import { mapGetters, mapActions } from 'vuex';
+import store from './store.js';
+
+export default {
+  name: 'image-uploader',
+  data() {
+    return {
+      file: null,
+      fileName: '',
+      url: '',
+      domain: 'http://qiniu.dcrym.com/',
+      showDel: false,
+    };
+  },
+  props: {
+    value: {
+      // 图片地址
+      type: String,
+      default: '',
+    },
+    canDelete: {
+      // 是否显示删除按钮
+      type: Boolean,
+      default: true,
+    },
+    option: {
+      // 剪裁比例大小
+      type: Object,
+      default: () => ({
+        CropBox: {
+          width: 200,
+          height: 100,
+        },
+      }),
+    },
+  },
+  beforeCreate() {
+    store.install(this.$store);
+  },
+  mounted() {
+    this.getImgToken();
+    this.setUrl(this.value);
+  },
+  computed: {
+    ...mapGetters(['userInfo']),
+    ...mapGetters('ImgToken', ['imgToken']),
+    done() {
+      return this.value ? true : false;
+    },
+  },
+  watch: {
+    value(newVal) {
+      this.setUrl(newVal);
+    },
+  },
+  deactivated() {
+    this.refreshData();
+  },
+  methods: {
+    ...mapActions('ImgToken', ['getUploadImgToken']),
+    setUrl(val) {
+      this.url = val ? val : '';
+      this.fileName = val ? val.replace(this.domain, '') : '';
+    },
+    toogleDelIcon() {
+      this.showDel = !this.showDel;
+    },
+    getImgToken(isReload) {
+      if (isReload) {
+        return this.getUploadImgToken().then(res => {
+          this.uploadImg(null, this.file);
+          return;
+        });
+      }
+      if (window.hasToken) return;
+      window.hasToken = true;
+      this.getUploadImgToken();
+    },
+    refreshData() {
+      this.file = null;
+      this.fileName = '';
+      this.url = '';
+      if (this.$refs.input && this.$refs.input.value) {
+        this.$refs.input.value = '';
+      }
+    },
+    uploadImg(e, blob) {
+      let file = blob ? blob : this.$refs.input.files[0];
+      this.file = file;
+      const id = this.userInfo.id;
+      const timeStemp = new Date().getTime();
+      let key = id + timeStemp;
+
+      let putExtra = {
+        fname: '',
+        params: {},
+        mimeType: null,
+      };
+      let config = {
+        useCdnDomain: true,
+        region: qiniu.region.z2,
+      };
+      // 调用sdk上传接口获得相应的observable，控制上传和暂停
+      let observable = qiniu.upload(file, key, this.imgToken, putExtra, config);
+      observable.subscribe({
+        next: this._next,
+        error: this._error,
+        complete: this._complete,
+      });
+    },
+    delImg() {
+      getDelImgToken({
+        params: {
+          fileNames: this.fileName,
+        },
+      })
+        .then(res => {
+          this.$emit('input', '');
+          this.$nextTick(() => {
+            if (this.$refs.input) this.$refs.input.value = '';
+          });
+        })
+        .catch(err => {
+          console.log('删除错误：' + err.msg);
+        });
+    },
+    _error(err) {
+      if (err.isRequestError && err.code == '401') {
+        this.getImgToken(true);
+      } else {
+        console.log(err);
+        this.$refs.input.value = '';
+      }
+    },
+    _next(res) {
+      // total: {
+      //  loaded: number，已上传大小，单位为字节。
+      //  total: number，本次上传的总量控制信息，单位为字节。
+      //  percent: number，当前上传进度，范围：0～100。
+      // }
+      console.log(res.total.percent);
+    },
+    _complete(response) {
+      console.log(response);
+      this.$emit('input', this.domain + response.key);
+      this.fileName = response.key;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.image-uploader {
+  width: 123px;
+  height: 123px;
+  border: 1px solid #ccc;
+  .mask {
+    position: absolute;
+    z-index: 20;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .image-uploader-pre,
+  .image-uploader-done {
+    display: block;
+    position: relative;
+    height: 100%;
+    .delimg {
+      width: 50px;
+      height: 50px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      font-size: 50px;
+      fill: #999;
+      margin-left: -25px;
+      margin-top: -25px;
+      fill: #fff;
+    }
+    .image-uploader-img {
+      width: 100%;
+    }
+  }
+  .image-uploader-icon {
+    position: absolute;
+    display: block;
+    width: 50px;
+    height: 50px;
+    font-size: 50px;
+    left: 50%;
+    top: 50%;
+    margin-top: -25px;
+    margin-left: -25px;
+    fill: #999;
+  }
+}
+</style>

src/components/input/ImageUploader/index.js

+import ImageUploader from './ImageUploader.vue';
+
+export default ImageUploader;

src/components/input/ImageUploader/store.js

+import ImageTokenStore from './ImageTokenStore';
+
+export default {
+  install(store) {
+    if (!store.state.base) {
+      store.registerModule(['base'], {
+        state: {},
+      });
+    }
+    if (!store.state.base.ImgToken) {
+      store.registerModule(['base', 'ImgToken'], ImageTokenStore);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['base', 'ImgToken']);
+  },
+};

src/components/input/OperatorSelect/OperatorSelect.vue

+<template>
+  <el-select
+    clearable
+    filterable
+    :value="value"
+    @change="changeHandle"
+  >
+    <el-option
+      v-for="(item, index) in operatorOptionList"
+      :key="index"
+      :value="item.id"
+      :label="item.operateName"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+import operatorMixin from './mixin.js';
+
+export default {
+  name: 'operator-select',
+  props: {
+    size: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Number,
+      default: null,
+    },
+  },
+  mixins: [operatorMixin],
+  methods: {
+    changeHandle(val) {
+      if (!val) {
+        this.$emit('input', null);
+      } else {
+        this.$emit('input', val);
+      }
+    },
+  },
+};
+</script>
+

src/components/input/OperatorSelect/OperatorStore.js

+import { fetchOperatorList } from '@/api/base/index';
+
+const FETCH_OPERATOR_LIST = 'FETCH_OPERATOR_LIST';
+const FETCH_STATE = 'FETCH_STATE';
+
+const state = () => ({
+  list: [],
+  fetching: false,
+});
+
+const getters = {
+  operatorOptionList: state => state.list,
+};
+
+const actions = {
+  fetchOperatorList({ state, commit }) {
+    if (state.fetching) return;
+    commit(FETCH_STATE, true);
+    return fetchOperatorList().then(res => {
+      const list = res.data;
+      commit(FETCH_OPERATOR_LIST, list);
+      commit(FETCH_STATE, false);
+    });
+  },
+};
+
+const mutations = {
+  [FETCH_OPERATOR_LIST](state, list) {
+    state.list = list;
+  },
+  [FETCH_STATE](state, fetching) {
+    state.fetching = fetching;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/components/input/OperatorSelect/index.js

+import OperatorSelect from './OperatorSelect.vue';
+import operatorMixin from './mixin';
+
+export { operatorMixin };
+export default OperatorSelect;

src/components/input/OperatorSelect/mixin.js

+import { mapGetters, mapActions } from 'vuex';
+import store from './store';
+
+export default {
+  created() {
+    store.install(this.$store);
+  },
+  mounted() {
+    if (!this.operatorOptionList.length) {
+      this.fetchOperatorList();
+    }
+  },
+  computed: {
+    ...mapGetters('OperatoerOption', ['operatorOptionList']),
+  },
+  methods: {
+    ...mapActions('OperatoerOption', ['fetchOperatorList']),
+    getOperatorName(id) {
+      let item = this.operatorOptionList.find(
+        ServiceType => ServiceType.id === id
+      );
+      if (item) {
+        return item.operateName;
+      } else {
+        return '';
+      }
+    },
+  },
+};

src/components/input/OperatorSelect/store.js

+import OperatorStore from './OperatorStore';
+
+export default {
+  install(store) {
+    if (!store.state.base) {
+      store.registerModule(['base'], {
+        state: {},
+      });
+    }
+    if (!store.state.base.OperatoerOption) {
+      store.registerModule(['base', 'OperatoerOption'], OperatorStore);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['base', 'OperatoerOption']);
+  },
+};

src/components/input/Select.vue

+<script>
+import { Select } from 'element-ui';
+
+export default {
+  name: 'md-select',
+  extends: Select,
+  props: {
+    placeholder: {
+      type: String,
+      default() {
+        return '--- 请选择 ---';
+      },
+    },
+  },
+};
+</script>

src/components/input/ServiceTypeSelect/ServiceTypeSelect.vue

+<template>
+  <el-select
+    clearable
+    filterable
+    :value="value"
+    @change="changeHandle"
+  >
+    <el-option
+      v-for="(item, index) in serviceTypeLists[ServiceType]"
+      :key="index"
+      :value="item.id"
+      :label="item.serviceName"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+import serviceTypeMixin from './mixin.js';
+
+export default {
+  name: 'service-select',
+  props: {
+    size: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: Number,
+      default: null,
+    },
+  },
+  mixins: [serviceTypeMixin],
+  methods: {
+    changeHandle(val) {
+      if (val || val === 0) {
+        this.$emit('input', val);
+      } else {
+        this.$emit('input', null);
+      }
+    },
+  },
+};
+</script>
+

src/components/input/ServiceTypeSelect/index.js

+import ServiceTypeSelect from './ServiceTypeSelect.vue';
+import serviceTypeMixin from './mixin';
+
+export { serviceTypeMixin };
+export default ServiceTypeSelect;

src/components/input/ServiceTypeSelect/mixin.js

+import { mapGetters, mapActions } from 'vuex';
+import store from './store';
+
+export default {
+  props: {
+    // null所有/1自助/2三方
+    ServiceType: {
+      type: Number,
+      default: null,
+    },
+  },
+  created() {
+    store.install(this.$store);
+    if (!this.serviceTypeLists[this.ServiceType].length) {
+      this.fetchServiceTypeList(this.ServiceType);
+    }
+  },
+  computed: {
+    ...mapGetters('serviceTypeOption', ['serviceTypeLists']),
+  },
+  methods: {
+    ...mapActions('serviceTypeOption', ['fetchServiceTypeList']),
+    getServiceTypeName(id) {
+      let item = this.serviceTypeLists[this.ServiceType].find(
+        ServiceType => ServiceType.id === id
+      );
+
+      return item ? item.serviceName : '';
+    },
+  },
+};

src/components/input/ServiceTypeSelect/serviceTypeStore.js

+import { fetchServiceList } from '@/api/base/index';
+
+const SERVICE_TYPE_LIST = 'SERVICE_TYPE_LIST';
+const FETCH_STATE = 'FETCH_STATE';
+
+const state = () => ({
+  lists: {
+    null: [],
+    1: [],
+    2: [],
+  },
+  fetching: {
+    null: false,
+    1: false,
+    2: false,
+  },
+});
+
+const getters = {
+  serviceTypeLists: state => state.lists,
+};
+
+const actions = {
+  fetchServiceTypeList({ state, commit }, serviceType) {
+    if (state.fetching[serviceType]) return;
+    commit(FETCH_STATE, { value: true, index: serviceType });
+    return fetchServiceList({
+      params: { serviceType },
+    }).then(res => {
+      const { selfService } = res;
+      commit(SERVICE_TYPE_LIST, { list: selfService, index: serviceType });
+      commit(FETCH_STATE, false);
+    });
+  },
+};
+
+const mutations = {
+  [SERVICE_TYPE_LIST](state, { list, index }) {
+    state.lists[index] = list;
+  },
+  [FETCH_STATE](state, { value, index }) {
+    state.fetching[index] = value;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/components/input/ServiceTypeSelect/store.js

+import serviceTypeStore from './serviceTypeStore';
+
+export default {
+  install(store) {
+    if (!store.state.base) {
+      store.registerModule(['base'], {
+        state: {},
+      });
+    }
+    if (!store.state.base.serviceTypeOption) {
+      store.registerModule(['base', 'serviceTypeOption'], serviceTypeStore);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['base', 'serviceTypeOption']);
+  },
+};

src/config/index.js

+export const TOKEN_KEY = 'dcrym';
+export const SUCCESS_CODE = 1000;
+
+export const selectTypeMapping = [
+  { label: '赠送类型', value: '2' },
+  { label: '消费类型', value: '3' },
+  { label: '支付方式', value: '4' },
+  { label: '支付类型', value: '5' },
+  { label: '业务功能', value: '7' },
+];
+
+export const customerStateOptions = [
+  { value: '1', label: '正常' },
+  { value: '2', label: '锁定' },
+];
+
+export const customerTypesOptions = [
+  { label: '学生', value: '1' },
+  { label: '教师', value: '2' },
+  { label: '职工', value: '3' },
+  { label: '群众', value: '4' },
+  { label: '社区领导', value: '5' },
+  { label: '学校领导', value: '6' },
+  { label: '单位领导', value: '7' },
+];
+
+export const customerSexOptions = [
+  { label: '男', value: '1' },
+  { label: '女', value: '2' },
+];
+
+export const customerIsFirstRechargeOptions = [
+  { label: '未充值', value: '0' },
+  { label: '已充值', value: '1' },
+];
+
+export const operClassifyList = [
+  { label: '新增', value: '01' },
+  { label: '修改', value: '02' },
+  { label: '删除', value: '03' },
+  { label: '开启', value: '04' },
+  { label: '关闭', value: '05' },
+];
+//角色操作记录
+export const operClassifyName4role = [
+  { label: '新增', value: '01' },
+  { label: '修改', value: '02' },
+  { label: '锁定', value: '03' },
+  { label: '解锁', value: '04' },
+  { label: '绑定用户', value: '05' },
+  { label: '授权', value: '06' },
+];
+
+//用户操作记录
+export const operClassifyName4User = [
+  { label: '重置密码', value: '01' },
+  { label: '修改', value: '02' },
+  { label: '锁定', value: '03' },
+  { label: '解锁', value: '04' },
+  { label: '新增', value: '05' },
+];
+
+export default {
+  selectTypeMapping,
+  customerStateOptions,
+  customerTypesOptions,
+  customerSexOptions,
+  customerIsFirstRechargeOptions,
+  operClassifyList,
+  operClassifyName4role,
+  operClassifyName4User,
+};

src/containers/errorPage/401.vue

+<template>
+  <div class="errPage-container">
+    <el-button
+      @click="back"
+      icon='arrow-left'
+      class="pan-back-btn"
+    >返回</el-button>
+    <el-row>
+      <el-col :span="12">
+        <h1 class="text-jumbo text-ginormous">Oops!</h1>
+        gif来源<a
+          href='https://zh.airbnb.com/'
+          target='_blank'
+        >airbnb</a> 页面
+        <h2>你没有权限去该页面</h2>
+        <h6>如有不满请联系你领导</h6>
+        <ul class="list-unstyled">
+          <li>或者你可以去:</li>
+          <li class="link-type">
+            <router-link to="/">回首页</router-link>
+          </li>
+        </ul>
+      </el-col>
+      <el-col :span="12">
+        <img
+          :src="errGif"
+          width="313"
+          height="428"
+          alt="Girl has dropped her ice cream."
+        >
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import errGif from '@/assets/images/401.gif';
+export default {
+  name: 'page401',
+  data() {
+    return {
+      errGif: errGif + '?' + +new Date(),
+      ewizardClap:
+        'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
+      dialogVisible: false,
+    };
+  },
+  methods: {
+    back() {
+      if (this.$route.query.noGoBack) {
+        this.$router.push({ path: '/dashboard' });
+      } else {
+        this.$router.go(-1);
+      }
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.errPage-container {
+  width: 800px;
+  margin: 100px auto;
+  .pan-back-btn {
+    background: #008489;
+    color: #fff;
+  }
+  .pan-gif {
+    margin: 0 auto;
+    display: block;
+  }
+  .pan-img {
+    display: block;
+    margin: 0 auto;
+  }
+  .text-jumbo {
+    font-size: 60px;
+    font-weight: 700;
+    color: #484848;
+  }
+  .list-unstyled {
+    font-size: 14px;
+    li {
+      padding-bottom: 5px;
+    }
+    a {
+      color: #008489;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

src/containers/errorPage/404.vue

+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_404" alt="404" />
+        <img class="pic-404__child left" :src="img_404_cloud" alt="404" />
+        <img class="pic-404__child mid" :src="img_404_cloud" alt="404" />
+        <img class="pic-404__child right" :src="img_404_cloud" alt="404" />
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">
+          版权所有<a
+            class="link-type"
+            href="https://wallstreetcn.com"
+            target="_blank"
+            >华尔街见闻</a
+          >
+        </div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">
+          请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告
+        </div>
+        <router-link class="bullshit__return-home" to="/">返回首页</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_404 from '@/assets/images/404_images/404.png';
+import img_404_cloud from '@/assets/images/404_images/404_cloud.png';
+
+export default {
+  data() {
+    return {
+      img_404,
+      img_404_cloud,
+    };
+  },
+  computed: {
+    message() {
+      return '特朗普说这个页面你不能进......';
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 0;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        height: 56px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/containers/home/about/about.js

+import pagination from '@/store/modules/pagination';
+
+const GET_LIST = 'GET_LIST';
+
+const state = () => ({
+  list: [],
+});
+
+const getters = {
+  listData: state => state.list,
+};
+
+const actions = {
+  fetchAboutList({ state, commit, dispatch }, entity) {
+    return new Promise(resolve => {
+      const list = [
+        { id: 1, name: '123' },
+        { id: 2, name: '223' },
+        { id: 3, name: '323' },
+      ];
+      const pagination = {
+        pageNum: state.pagination.pageNum,
+        pageSize: state.pagination.pageSize,
+        ...entity,
+        total: 500,
+      };
+      dispatch('updatePagination', pagination);
+      commit(GET_LIST, list);
+      resolve();
+    });
+    return fetchAboutList({
+      data: {
+        pageNum: state.pagination.pageNum,
+        pageSize: state.pagination.pageSize,
+        ...entity,
+      },
+    }).then(res => {
+      const { list, ...pagination } = res.data;
+      dispatch('updatePagination', pagination);
+      commit(GET_LIST, list);
+    });
+  },
+};
+
+const mutations = {
+  [GET_LIST]: (state, list) => {
+    state.list = list;
+  },
+};
+
+export default {
+  namespaced: true,
+  modules: {
+    pagination,
+  },
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/containers/home/about/about.vue

+<template>
+  <list-layout>
+    <template slot="filterItem">
+      <search-item label="姓名">
+        <el-input
+          v-model.trim="filters.name"
+          clearable
+        />
+      </search-item>
+    </template>
+
+    <template slot="filterBtn">
+      <el-button
+        type="primary"
+        @click="searchList"
+      >查询</el-button>
+    </template>
+
+    <Table
+      :listData="listData"
+      :showEditDialog="showEditDialog"
+      :showDetail="showDetail"
+    />
+
+    <template slot="footer">
+      <md-pagination
+        :pagination="pagination"
+        :changePage="changePage"
+        :changeSizeHandle="changeSizeHandle"
+      />
+    </template>
+
+    <EditDialog
+      :visible.sync="dialogEditVisible"
+      :resetDialog="resetEditDialog"
+      :type="editType"
+      :selected="selected"
+      :submitUpdateHandle="updateSelected"
+      :cancelHandle="resetEditDialog"
+    />
+
+    <DetailDialog
+      :visible.sync="dialogDetailVisible"
+      :resetDialog="resetDetailDialog"
+      :selected="selected"
+    />
+  </list-layout>
+</template>
+
+<script>
+import ListMixin from '@/mixins/listPage.js';
+import { mapGetters, mapActions } from 'vuex';
+import Table from './components/Table';
+import EditDialog from './components/EditDialog';
+import DetailDialog from './components/DetailDialog';
+
+export default {
+  name: 'about',
+  mixins: [ListMixin],
+  components: { Table, EditDialog, DetailDialog },
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters('system/about', ['listData', 'pagination']),
+  },
+  methods: {
+    ...mapActions('system/about', ['fetchAboutList', 'updatePagination']),
+    fetchList(entity) {
+      this.fetchAboutList(entity);
+    },
+    showEditDialog(type, data) {
+      this.editType = type;
+      this.selected = {
+        ...data,
+      };
+      this.dialogEditVisible = true;
+    },
+    updateSelected() {
+      const type = this.editType;
+      this.dialogEditVisible = false;
+    },
+    showDetail(data) {
+      this.selected = {
+        ...data,
+      };
+      this.dialogDetailVisible = true;
+    },
+  },
+};
+</script>

src/containers/home/about/components/DetailDialog.vue

+<template>
+  <normal-dialog
+    :visible="visible"
+    :before-close="resetDialog"
+    @update:visible="updateVisibleHandle"
+    class="SystemUserDetail"
+  >
+    <template slot="title">详情</template>
+    <form-area title="详情">
+      <form-line>
+        <form-item label="登录账号">{{selected.loginAccount}}</form-item>
+        <form-item label="姓名">{{selected.name}}</form-item>
+      </form-line>
+    </form-area>
+    <form-area title="操作记录">
+      <div
+        class="record-List"
+        v-for="(item, index) in selected.adminRecordVoList"
+        :key="index"
+      >
+        <span class="record-Item">{{getOperClassifyName(item.operClassify)}}</span>
+        <span class="record-Item">{{item.handler}}</span>
+        <span class="record-Item">{{$formatDate(item.createAt)}}</span>
+      </div>
+    </form-area>
+  </normal-dialog>
+</template>
+
+<script>
+import dialogMixin from '@/mixins/dialog.js';
+
+export default {
+  mixins: [dialogMixin],
+};
+</script>
+
+<style lang="scss">
+.SystemUserDetail {
+  .record-List {
+    .record-Item {
+      display: inline-block;
+      width: 30%;
+    }
+  }
+  .login-List {
+    display: flex;
+    justify-content: space-between;
+    padding-right: 40px;
+  }
+}
+</style>
+

src/containers/home/about/components/EditDialog.vue

+<template>
+  <normal-dialog
+    :visible="visible"
+    :before-close="resetDialog"
+    @update:visible="updateVisibleHandle"
+    class="CreditMarginEdit"
+  >
+    <template
+      v-if="type == 0"
+      slot="title"
+    >
+      <img src="@/assets/images/dialog/add_icon.png" />
+      新增
+    </template>
+    <template
+      v-else
+      slot="title"
+    >
+      <img src="@/assets/images/dialog/edit_icon.png" />
+      编辑
+    </template>
+
+    <el-form label-width="180px">
+      <el-form-item label="姓名">
+        <el-input
+          v-model="selected.name"
+          :maxlength="20"
+          clearable
+        />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer">
+      <el-button
+        type="primary"
+        @click="submitUpdateHandle"
+        :disabled="loading"
+      >确定</el-button>
+      <el-button @click="cancelHandle">取消</el-button>
+    </div>
+
+  </normal-dialog>
+</template>
+
+<script>
+import dialogMixin from '@/mixins/dialog.js';
+
+export default {
+  mixins: [dialogMixin],
+  methods: {
+    changeHandle(val) {
+      if (val.length > 11) {
+        this.selected.cellphone = val.slice(0, 11);
+      } else {
+        this.selected.cellphone = val;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.CreditMarginEdit {
+  .el-input-number {
+    width: 100%;
+    .el-input__inner {
+      text-align: left;
+    }
+  }
+}
+</style>
+

src/containers/home/about/components/Table.vue

+<template>
+  <md-table
+    :data="listData"
+    v-loading="loading"
+  >
+    <md-table-column
+      type="index"
+      label="序号"
+      align="center"
+      min-width="55"
+      width="55"
+    />
+    <md-table-column
+      label="姓名"
+      min-width="100"
+      prop="name"
+      align="center"
+    >
+      <template slot-scope="scope">
+        <span
+          class="pointer"
+          @click="showDetail(scope.row)"
+        >{{scope.row.name}}</span>
+      </template>
+    </md-table-column>
+
+    <md-table-column
+      label="操作"
+      min-width="200"
+      fixed="right"
+    >
+      <template slot-scope="scope">
+        <el-button
+          type="primary"
+          @click="showEditDialog(1, scope.row)"
+        >修改</el-button>
+      </template>
+    </md-table-column>
+  </md-table>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  props: {
+    listData: { type: Array },
+    showEditDialog: { type: Function },
+    showDetail: { type: Function },
+  },
+  computed: {
+    ...mapGetters(['loading']),
+  },
+};
+</script>

src/containers/home/about/store.js

+import about from './about';
+
+export default {
+  install(store) {
+    if (!store.state.system) {
+      store.registerModule(['system'], {
+        namespaced: true,
+      });
+    }
+    if (!store.state.system.about) {
+      store.registerModule(['system', 'about'], about);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['system', 'about']);
+  },
+};

src/containers/home/index.vue

+<template>
+  <list-layout>
+    <template slot="filterItem">
+      <search-item label="赠送类型">
+        <base-data-select
+          label="赠送类型"
+          v-model="filters.giveType"
+        ></base-data-select>
+      </search-item>
+      <search-item label="会员ID">
+        <date-picker v-model="filters.customerId" />
+      </search-item>
+      <search-item
+        label="会员ID"
+        size="big"
+      >
+        <date-range-picker
+          v-model="filters.timeRange"
+          :noLabel="true"
+        />
+      </search-item>
+      <el-button
+        type="primary"
+        @click="searchList"
+      >查询</el-button>
+      <el-button
+        type="primary"
+        @click="showDialog"
+      >操作成功点击</el-button>
+
+      <el-button
+        type="primary"
+        @click="showInfoDialog"
+      >信息点击</el-button>
+
+      <el-button
+        type="primary"
+        @click="showCheckDialog"
+      >确认框点击</el-button>
+
+      <el-button
+        type="primary"
+        @click="dialogVisible = !dialogVisible"
+      >新增点击</el-button>
+
+      <el-button
+        type="primary"
+        @click="showDialogVisible"
+      >用户点击</el-button>
+
+      <search-item label="会员ID">
+        <date-picker v-model="filters.customerId" />
+      </search-item>
+
+      <search-item label="运营商">
+        <operator-select v-model="filters.operatorId" />
+      </search-item>
+
+      <el-button
+        type="primary"
+        @click="fetchTest"
+      >请求</el-button>
+    </template>
+
+    <!-- <div class="posBox"></div> -->
+
+    <!-- <div>{{getOptionsName('赠送类型' ,'01')}}</div> -->
+
+    <!-- <normal-dialog :visible.sync="dialogVisible" :before-close="closeHandle">
+      <template slot="title">
+        <img src="@/assets/images/dialog/add_icon.png" /> 新增
+      </template>
+      <form-area title="基本信息">
+        <form-line>
+          <form-item label="姓名" size="big"> <el-input></el-input> </form-item>
+          <form-item label="性别"> <el-input></el-input> </form-item>
+        </form-line>
+        <form-line>
+          <form-item label="会员类型" size="big"></form-item>
+          <form-item label="所属区域">
+            <area-select v-model="filters.areaId" size="big" :noLabel="true" />
+          </form-item>
+        </form-line>
+      </form-area>
+      <div slot="footer">
+        <el-button type="primary">确定</el-button>
+        <el-button>取消</el-button>
+      </div>
+    </normal-dialog> -->
+    <md-table :data="listData">
+      <md-table-column
+        type="index"
+        label="序号"
+        align="center"
+        min-width="55"
+        width="55"
+      />
+      <md-table-column
+        label="姓名"
+        align="center"
+        min-width="100"
+        prop="name"
+      />
+    </md-table>
+    <ImageUploader v-model="imgUrl" />
+    {{imgUrl}}
+    <template slot="footer">
+      <div class="footer-info">总共123123条 共234234元</div>
+      <md-pagination
+        :pagination="pagination"
+        :changePage="changePage"
+        :changeSizeHandle="changeSizeHandle"
+      />
+    </template>
+  </list-layout>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import ListMixin from '@/mixins/listPage.js';
+import headImg from '@/assets/images/demo/head_icon.png';
+import ImageUploader from '../../components/input/ImageUploader/index.js';
+
+export default {
+  name: 'tab',
+  mixins: [ListMixin],
+  components: { ImageUploader },
+  data() {
+    return {
+      imgUrl: '',
+      listData: [{ name: '111' }, { name: '222' }],
+      filters: {
+        areaId: null,
+        giveType: '',
+        dateTime: null,
+      },
+      selected: {
+        id: null,
+      },
+      userInfo: {
+        areaId: 0,
+        areaName: '大苏打发生的更改',
+        createAt: '2018-12-17T07:58:42.218Z',
+        customerHead: headImg,
+        customerName: '张三',
+        customerPhone: '18108096066',
+        customerSex: '男',
+        customerType: '1',
+        id: 1535156,
+        isFirstRecharge: 0,
+        state: '1',
+      },
+      dialogVisible: false,
+      userDialogVisible: false,
+      pagination: {
+        pageNum: 1,
+        pageSize: 10,
+        total: 88815,
+      },
+      props: {
+        label: 'campusName',
+        value: 'id',
+        children: 'children',
+      },
+
+      index: 1,
+      options: [],
+    };
+  },
+  computed: {
+    campusSelectList() {
+      return this.campusList.map(item => ({
+        label: item.campusName,
+        value: item.id,
+        children: [],
+      }));
+    },
+    cabinetSelectList() {
+      return this.cabinetList.map(item => ({
+        label: item.cabinetLocation,
+        value: item.cabinetId,
+        children: [],
+      }));
+    },
+    latticeSelectList() {
+      return this.latticeList.map(item => ({
+        label: item.location,
+        value: item.id,
+      }));
+    },
+  },
+
+  methods: {
+    searchList() {
+      console.log(this.filters.giveType);
+    },
+    closeEmitHandle(a, b, c) {
+      console.log(a, b, c);
+    },
+    closeHandle(done) {
+      done();
+    },
+    showDialogVisible() {
+      this.selected.id = Math.random() > 0.5 ? 12 : 11;
+      console.log(this.selected.id);
+      this.userDialogVisible = !this.userDialogVisible;
+    },
+    fetchTest() {
+      // fetchAreaList({
+      //   params: {
+      //     areaId: 0,
+      //     customerCellphone: 'string',
+      //   },
+      //   data: {
+      //     areaId: 0,
+      //     customerCellphone: 'string',
+      //     customerName: 'string',
+      //     endTime: '2018-12-14T01:29:46.450Z',
+      //     equipmentNum: 'string',
+      //     equipmentPosition: 'string',
+      //     pageNum: 0,
+      //     pageSize: 0,
+      //     serviceId: 0,
+      //     startTime: '2018-12-14T01:29:46.450Z',
+      //   },
+      // });
+    },
+    showDialog() {
+      console.log('show');
+      // this.$alert('asd').then(result => {
+      //   console.log(result);
+      // });
+      this.$mdAlert.success('dasd');
+    },
+    showcheck() {
+      this.$mdAlert.info('内层弹窗');
+    },
+    showInfoDialog() {
+      this.$mdAlert.info('dasd');
+    },
+    showCheckDialog() {
+      this.$mdAlert.confirm(
+        <div class="im">
+          adsasd<i class="ImportentText"> 51</i>sss
+        </div>
+      );
+    },
+    ...mapActions('listData1', ['updatePagination']),
+    getChange(val) {
+      console.log(val);
+    },
+    handleChange(val) {
+      if (val.length === 1) {
+        let campusValue = val[0];
+        console.log(campusValue);
+        this.$store
+          .dispatch('fetchCabinetList', { campusId: campusValue })
+          .then(res => {
+            this.campusSelectList.find(
+              item => item.value == campusValue
+            ).children = this.cabinetSelectList;
+          });
+      } else if (val.length === 2) {
+        let campusValue = val[0];
+        let cabinetValue = val[1];
+        this.$store
+          .dispatch('fetchLatticeList', {
+            campusId: campusValue,
+            cabinetId: cabinetValue,
+          })
+          .then(res => {
+            this.cabinetSelectList.find(
+              item => item.value == cabinetValue
+            ).children = this.latticeSelectList;
+          });
+      }
+    },
+    onSubmit() {
+      this.$message.success('提交成功！');
+    },
+    add() {
+      this.index += 1;
+      this.$store.dispatch('listData1/updatePagination', {
+        pageNum: this.index,
+      });
+      // this.updatePagination({pageNum: this.index})
+    },
+    getCompus() {
+      this.$store.dispatch('fetchCampusList');
+    },
+    ret() {
+      this.$store.dispatch('resetLatticeCabinet');
+    },
+  },
+};
+</script>
+
+<style>
+.posBox {
+  width: 100px;
+  height: 100px;
+  background-color: bisque;
+  position: relative;
+  top: 0;
+  left: -20px;
+  z-index: 2000;
+}
+.line {
+  text-align: center;
+}
+
+.from-box {
+  width: 800px;
+}
+.table-card {
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>

src/containers/layout/components/TimeBox.vue

+<template>
+  <div class="timeBox">
+    <span class="time">{{ formatDate }}</span>
+    <span>{{ day }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'time-box',
+  data() {
+    return {
+      timer: null,
+      date: new Date(),
+    };
+  },
+  computed: {
+    formatDate() {
+      return this.$formatDate(this.date);
+    },
+    day() {
+      return this.$parseTime(this.date, '周{a}');
+    },
+  },
+  created() {
+    this.startTimer();
+  },
+  destroyed() {
+    clearInterval(this.timer);
+  },
+  methods: {
+    startTimer() {
+      this.timer = setInterval(() => {
+        this.date = new Date();
+      }, 1000);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.timeBox {
+  color: #fff;
+  .time {
+    margin-right: 10px;
+  }
+}
+</style>

src/containers/layout/components/UserBox.vue

+<template>
+  <div class="avatar-container">
+    <TimeBox />
+    <span class="avatar-container-line">|</span>
+    <span class="avatar-name">欢迎，{{userInfo.name}}</span>
+    <span
+      class="avatar-quit"
+      @click="logout"
+    >退出登录
+      <i class="avatar-quit-icon">
+        <img src="@/assets/images/user/header_quit.png" />
+      </i>
+    </span>
+    <normal-dialog
+      title="修改密码"
+      :visible="dialogVisible"
+      width="50%"
+      :before-close="cancelPwdUpdate"
+      :close-on-click-modal="!(showSetPassword)"
+      :show-close="!(showSetPassword)"
+    >
+      <el-form
+        :model="pwd"
+        :rules="rules"
+        ref="pwdForm"
+      >
+        <el-form-item
+          label="原密码"
+          prop="oldPwd"
+          :label-width="formLabelWidth"
+        >
+          <el-input
+            type="password"
+            v-model="pwd.oldPwd"
+            placeholder="请输入原密码"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="新密码"
+          prop="newPwd"
+          :label-width="formLabelWidth"
+        >
+          <el-input
+            type="password"
+            v-model="pwd.newPwd"
+            placeholder="请输入新密码"
+          ></el-input>
+        </el-form-item>
+        <el-form-item
+          label="重复新密码"
+          prop="rePwd"
+          :label-width="formLabelWidth"
+        >
+          <el-input
+            type="password"
+            v-model="pwd.rePwd"
+            placeholder="请再输入新密码"
+          ></el-input>
+        </el-form-item>
+        <el-form-item :label-width="formLabelWidth">
+          <p
+            class="setpwd-info"
+            v-if="showSetPassword"
+          >原始密码登陆请务必修改密码</p>
+        </el-form-item>
+      </el-form>
+      <span
+        v-if="showSetPassword"
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          type="primary"
+          @click="checkPwdForm"
+        >确 定</el-button>
+      </span>
+      <span
+        v-else
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button @click="resetPwdForm">取 消</el-button>
+        <el-button
+          type="primary"
+          @click="checkPwdForm"
+        >确 定</el-button>
+      </span>
+    </normal-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+import TimeBox from './TimeBox';
+
+export default {
+  components: {
+    TimeBox,
+  },
+  data() {
+    const validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请再次输入密码'));
+      } else if (value !== this.pwd.newPwd) {
+        callback(new Error('两次输入密码不一致!'));
+      } else {
+        callback();
+      }
+    };
+    return {
+      dialogVisible: false,
+      formLabelWidth: '200px',
+      pwd: {
+        oldPwd: '',
+        newPwd: '',
+        rePwd: '',
+      },
+      rules: {
+        oldPwd: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
+        newPwd: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
+        rePwd: [
+          { required: true, message: '请再输入新密码', trigger: 'blur' },
+          { validator: validatePass },
+        ],
+      },
+    };
+  },
+  computed: {
+    ...mapGetters(['userInfo']),
+    showSetPassword() {
+      return this.userInfo && this.userInfo.isSetPassword === 0;
+    },
+  },
+  mounted() {
+    this.dialogVisible = this.showSetPassword;
+  },
+  watch: {
+    userInfo(nVal) {
+      if (nVal && nVal.isSetPassword === 0) {
+        this.dialogVisible = true;
+      }
+    },
+  },
+  methods: {
+    ...mapActions(['updatePassword']),
+    cancelPwdUpdate(done) {
+      this.resetPwdForm();
+      done();
+    },
+    resetPwdForm() {
+      this.$refs.pwdForm.resetFields();
+      this.dialogVisible = false;
+    },
+    checkPwdForm() {
+      this.$refs.pwdForm.validate(valid => {
+        if (valid) {
+          this.updatePassword(this.pwd)
+            .then(() => {
+              this.$message.success('修改密码成功!');
+              this.resetPwdForm();
+            })
+            .catch(err => {
+              console.error(err);
+              // this.$message.error('修改密码失败!');
+            });
+        }
+      });
+    },
+    logout() {
+      this.$store.dispatch('FedLogOut').then(() => {
+        location.reload(); // 为了重新实例化vue-router对象 避免bug
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/styles/variables.scss';
+.avatar-container {
+  margin-right: 12px;
+  display: flex;
+  color: #fff;
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+  flex: 1;
+  justify-content: flex-end;
+  .avatar-container-line {
+    margin: 0 20px;
+  }
+  .avatar-name {
+    margin-right: 25px;
+  }
+  .avatar-quit {
+    cursor: pointer;
+    font-size: 10px;
+    line-height: 24px;
+    .avatar-quit-icon {
+      display: inline-block;
+      margin-left: 10px;
+      margin-top: -2px;
+      width: 20px;
+      height: 18px;
+      vertical-align: middle;
+    }
+  }
+  .avatar-wrapper {
+    cursor: pointer;
+    color: #a0acb9;
+    position: relative;
+    .user-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+    }
+    .el-icon-caret-bottom {
+      position: absolute;
+      right: -18px;
+      top: 6px;
+      font-size: 12px;
+    }
+  }
+  .setpwd-info {
+    color: red;
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  .avatar-container {
+    margin-right: 24px;
+    font-size: 16px;
+    .avatar-quit {
+      font-size: 14px;
+    }
+  }
+}
+</style>

src/containers/login/components/CodeView.vue

+<template>
+  <img :src="dataUrl" />
+</template>
+
+<script>
+export default {
+  created() {
+    let canDom = document.createElement('canvas');
+    canDom.id = 'ksCanvas';
+    canDom.setAttribute('width', '160px');
+    canDom.setAttribute('height', '64px');
+    canDom.setAttribute('style', 'display: none');
+    document.body.appendChild(canDom);
+    this.canvas = canDom;
+  },
+  mounted() {
+    this.renderImg();
+  },
+  destroyed() {
+    document.body.removeChild(this.canvas);
+  },
+  props: {
+    value: String,
+  },
+  data() {
+    return {
+      dataUrl: '',
+    };
+  },
+  watch: {
+    value(val) {
+      if (val) {
+        this.renderImg();
+      }
+    },
+  },
+  methods: {
+    renderImg() {
+      const ctx = this.canvas.getContext('2d');
+      ctx.fillStyle = '#6180f4';
+      ctx.fillRect(0, 0, 160, 64);
+      ctx.font = '60px arial';
+      // 创建渐变
+      var gradient = ctx.createLinearGradient(0, 0, 160, 0);
+      gradient.addColorStop('0', 'magenta');
+      gradient.addColorStop('0.5', 'yellow');
+      gradient.addColorStop('1.0', 'red');
+      // 用渐变填色
+      // ctx.strokeStyle = gradient;
+      ctx.fillStyle = gradient;
+      let height = 50;
+      if (this.value) {
+        //画布上添加验证码
+        this.value.split('').map((val, index) => {
+          ctx.save();
+          ctx.rotate(((Math.random() - 0.5) * 20 * Math.PI) / 180);
+          ctx.fillText(val, index * 40, height);
+          ctx.restore();
+        });
+        // 添加干扰线
+        [
+          // '#f2ce19',
+          '#ea639e',
+          '#a14c63',
+          // '#fed5d6',
+        ].map((color, index) => {
+          ctx.save();
+          ctx.fillStyle = color;
+          ctx.translate(
+            80 + (Math.random() - 0.5) * 20,
+            32 + (Math.random() - 0.5) * 20
+          );
+          ctx.rotate(((Math.random() - 0.5) * 100000 * Math.PI) / 180);
+          ctx.fillRect(80 * index, 0, 300, 2);
+          ctx.fillRect(80 * index, 0, -300, 2);
+          ctx.restore();
+        });
+      }
+      this.dataUrl = this.canvas.toDataURL();
+    },
+  },
+};
+</script>

src/containers/login/index.vue

+<template>
+  <div class="login-container">
+    <el-form
+      autoComplete="on"
+      :model="loginForm"
+      ref="loginForm"
+      label-position="left"
+      label-width="0px"
+      class="card-box login-form"
+    >
+      <h3 class="title">
+        <i class="logo-icom"><img src="./images/home_logo_img.png" /></i>
+        <span class="title-text">综合管理平台</span>
+
+      </h3>
+      <el-form-item>
+        <el-input
+          name="username"
+          type="text"
+          v-model="loginForm.name"
+          autoComplete="on"
+          placeholder="登录账号"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          name="password"
+          :type="pwdType"
+          v-model="loginForm.password"
+          autoComplete="on"
+          placeholder="输入密码"
+        ></el-input>
+        <span
+          class="show-pwd"
+          @click="showPwd"
+        >
+          <img
+            v-if="pwdType === 'password'"
+            src="./images/home_mima_nor_icon.png"
+          />
+          <img
+            v-else
+            src="./images/home_mima_sel_icon.png"
+          />
+        </span>
+      </el-form-item>
+      <el-form-item>
+        <el-input
+          @keyup.enter.native="handleLogin"
+          v-model="loginForm.vcode"
+          autoComplete="on"
+          placeholder="输入验证码"
+          :maxlength="4"
+        ></el-input>
+        <div class="vcode-box">
+          <i class="vcode-img">
+            <CodeView :value="verifyCode" /></i>
+          <span
+            class="vcode-text"
+            @click="fetchVcode"
+          >换一个</span>
+        </div>
+      </el-form-item>
+      <div class="account-tool">
+        <el-checkbox v-model="remenberAccount">记住账号</el-checkbox>
+        <!-- <span class="forget-pwd">忘记密码</span> -->
+      </div>
+
+      <el-button
+        class="login-btn"
+        type="primary"
+        style="width:100%;"
+        :loading="loading"
+        @click.native.prevent="handleLogin"
+      >
+        登录
+      </el-button>
+    </el-form>
+    <span class="com-info">技术支持：028-12231123&nbsp;&nbsp;&nbsp;&nbsp;邮箱地址：reyimen@126.com</span>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+import { fetchVcode } from '@/api/user/login';
+import CodeView from './components/CodeView';
+
+export default {
+  name: 'login',
+  components: { CodeView },
+  data() {
+    return {
+      loginForm: {
+        name: '',
+        password: '',
+        vcode: '',
+      },
+      loading: false,
+      pwdType: 'password',
+      verifyCode: '',
+      remenberAccount: false,
+    };
+  },
+  created() {
+    this.fetchVcode();
+  },
+  methods: {
+    ...mapActions(['Login']),
+    showPwd() {
+      if (this.pwdType === 'password') {
+        this.pwdType = '';
+      } else {
+        this.pwdType = 'password';
+      }
+    },
+    validateLoginForm() {
+      if (!this.loginForm.name) {
+        this.$message.error('请输入账号');
+        return;
+      }
+      if (!this.loginForm.password) {
+        this.$message.error('请输入密码');
+        return;
+      }
+      if (!this.loginForm.vcode) {
+        this.$message.error('请输入验证码');
+        return;
+      }
+      if (
+        this.loginForm.vcode.toUpperCase() !== this.verifyCode.toUpperCase()
+      ) {
+        this.$message.error('请输入正确验证码');
+        return;
+      }
+      return true;
+    },
+    handleLogin() {
+      if (this.validateLoginForm()) {
+        this.loading = true;
+        this.Login({
+          account: this.loginForm.name,
+          pwd: this.loginForm.password,
+          varifyCode: this.loginForm.vcode,
+          remenberAccount: this.remenberAccount,
+        })
+          .then(() => {
+            console.log('login done');
+            this.loading = false;
+            this.$router.push({ path: '/' });
+          })
+          .catch(err => {
+            console.log(err);
+            this.loading = false;
+          });
+      }
+    },
+    setToken() {
+      if (this.remenberAccount) {
+        console.log('记住账号');
+      }
+    },
+    fetchVcode() {
+      fetchVcode()
+        .then(res => {
+          console.log(res);
+          const { saltKey, verifyCode } = res;
+          this.verifyCode = verifyCode;
+        })
+        .catch(err => {
+          this.$message.error('获取验证码失败！');
+          console.log(err);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '@/assets/styles/variables.scss';
+$loginColor: #4e82fb;
+
+.login-container {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background: #f5f6ff url('./images/home_bg_img.png') no-repeat;
+  background-size: contain;
+  .login-form {
+    position: absolute;
+    top: 148px;
+    right: 187px;
+    width: 494px;
+  }
+  .title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 34px;
+    color: #333;
+    font-weight: 600;
+    margin: 0 0 54px;
+    height: 66px;
+    .logo-icom {
+      width: 204px;
+      height: 66px;
+    }
+    .title-text {
+      line-height: 82px;
+    }
+  }
+  .el-form-item {
+    margin-bottom: 16px;
+  }
+  .show-pwd {
+    position: absolute;
+    top: 22px;
+    right: 26px;
+    width: 22px;
+    height: 22px;
+    cursor: pointer;
+  }
+  .vcode-box {
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 18px;
+    right: 18px;
+    width: 150px;
+    line-height: 36px;
+    font-size: 14px;
+    .vcode-img {
+      width: 90px;
+    }
+    .vcode-text {
+      cursor: pointer;
+      color: $loginColor;
+    }
+  }
+  .account-tool {
+    height: 20px;
+    line-height: 20px;
+    display: flex;
+    justify-content: space-between;
+    color: #666;
+    .forget-pwd {
+      cursor: pointer;
+    }
+  }
+  .login-btn {
+    margin-top: 60px;
+    height: 66px;
+    font-size: 24px;
+    background-color: $loginColor;
+  }
+  input {
+    border-color: #666;
+    background-color: #fff;
+  }
+  .el-input,
+  .el-input__inner {
+    height: 66px;
+    line-height: 66px;
+    font-size: 20px;
+  }
+  .com-info {
+    position: absolute;
+    right: 213px;
+    bottom: 40px;
+    color: #666;
+    font-size: 16px;
+  }
+}
+@media screen and (max-width: $bigScreenWidth) {
+  .login-container {
+    .login-form {
+      top: 125px;
+      right: 105px;
+      width: 340px;
+    }
+    .title {
+      font-size: 24px;
+      margin: 0 0 38px;
+      height: 45px;
+      .logo-icom {
+        width: 140px;
+        height: 45px;
+      }
+      .title-text {
+        line-height: 60px;
+      }
+    }
+    .el-form-item {
+      margin-bottom: 12px;
+    }
+    .show-pwd {
+      top: 12px;
+      right: 16px;
+    }
+    .vcode-box {
+      top: 8px;
+      right: 18px;
+      width: 120px;
+      line-height: 30px;
+      font-size: 12px;
+      .vcode-img {
+        width: 63px;
+      }
+    }
+    .account-tool {
+      height: 16px;
+      line-height: 16px;
+      .el-checkbox__label {
+        font-size: 12px;
+      }
+    }
+    .login-btn {
+      margin-top: 40px;
+      height: 46px;
+      font-size: 16px;
+    }
+    .el-input,
+    .el-input__inner {
+      height: 46px;
+      line-height: 46px;
+      font-size: 14px;
+    }
+    .com-info {
+      right: 120px;
+      font-size: 10px;
+    }
+  }
+}
+</style>

src/lib-main.js

+import 'normalize.css/normalize.css';
+
+import App from './App';
+import router, { constantRouterMap, routeStore } from './router';
+import store from './store';
+import { formatRouteLink } from './utils/route';
+
+routeStore.install(store);
+
+import '@/assets/styles/index.scss'; // global css
+import '@/permission'; // 用户登录认证
+// import './mock' // mockjs
+import extendCom from '@/utils/extends';
+
+const createSystem = () => {
+  extendCom(Vue);
+
+  Vue.config.productionTip = false;
+
+  /* eslint-disable no-new */
+  return new Vue({
+    el: '#app',
+    router,
+    store,
+    render: h => {
+      let routes = [...constantRouterMap];
+      let allRoute = store.getters.asyncRoutes;
+      if (allRoute && allRoute.length) {
+        let addRoute = allRoute.find(
+          menu => menu.menuCode === process.env.VUE_APP_MENU_CODE
+        );
+        if (addRoute) {
+          addRoute = addRoute.childs;
+        } else {
+          addRoute = [];
+        }
+        routes = [...routes, ...formatRouteLink(addRoute)];
+      }
+      return <App route={routes} />;
+    },
+  });
+};
+
+export default createSystem;

src/main.js

+import Vue from 'vue';
+import 'normalize.css/normalize.css';
+
+import App from './App';
+import router, { constantRouterMap, routeStore } from './router';
+import store from './store';
+import { formatRouteLink } from './utils/route';
+
+routeStore.install(store);
+
+import '@/assets/styles/index.scss'; // global css
+import '@/permission'; // 用户登录认证
+// import './mock' // mockjs
+import extendCom from '@/utils/extends';
+
+extendCom(Vue);
+
+Vue.config.productionTip = false;
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  store,
+  render: h => {
+    let routes = [...constantRouterMap];
+    let allRoute = store.getters.asyncRoutes;
+    if (allRoute && allRoute.length) {
+      for (let index = 0; index < allRoute.length; index++) {
+        const element = allRoute[index];
+        if (element.childs) {
+          let addRoute = formatRouteLink(element.childs);
+          routes = routes.concat(addRoute);
+        }
+      }
+    }
+    return <App route={routes} />;
+  },
+});

src/mixins/admins/admins.js

+import store from './store';
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  created() {
+    store.install(this.$store);
+  },
+  mounted() {
+    if (!this.AdminList.length) {
+      this.fetchAdminList();
+    }
+  },
+  computed: {
+    ...mapGetters('admins', ['AdminList']),
+  },
+  methods: {
+    ...mapActions('admins', ['fetchAdminList']),
+  },
+};

src/mixins/admins/adminsStore.js

+import { fetchAdminList } from '@/api/base/index';
+
+const GET_ADMINS_LIST = 'GET_ADMINS_LIST';
+const FETCH_STATE = 'FETCH_STATE';
+
+const state = () => ({
+  list: [],
+  fetching: false,
+});
+
+const getters = {
+  AdminList: state => state.list,
+};
+
+const actions = {
+  fetchAdminList({ state, commit }) {
+    if (state.fetching) return;
+    commit(FETCH_STATE, true);
+    return fetchAdminList().then(res => {
+      const list = res.data;
+      commit(GET_ADMINS_LIST, list);
+      commit(FETCH_STATE, false);
+    });
+  },
+};
+
+const mutations = {
+  [GET_ADMINS_LIST](state, list) {
+    state.list = list;
+  },
+  [FETCH_STATE](state, fetching) {
+    state.fetching = fetching;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/mixins/admins/store.js

+import adminsStore from './adminsStore';
+
+export default {
+  install(store) {
+    if (!store.state.base) {
+      store.registerModule(['base'], {
+        state: {},
+      });
+    }
+    if (!store.state.base.admins) {
+      store.registerModule(['base', 'admins'], adminsStore);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['base', 'admins']);
+  },
+};

src/mixins/campusListPage.js

+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  data() {
+    return {
+      filters: {},
+      selected: {},
+      selectedList: [],
+      editType: 0,
+      dialogEditVisible: false,
+    };
+  },
+  computed: {
+    ...mapGetters(['loading', 'campusList']),
+  },
+  created() {
+    let campusPromise = null;
+    if (this.campusList && this.campusList.length) {
+      campusPromise = new Promise(resolve => resolve());
+    } else {
+      campusPromise = this.fetchCampusList();
+    }
+    campusPromise.then(() => {
+      if (this.campusId) {
+        this.filters.campusId = this.campusId;
+      } else if (this.campusList.length === 1) {
+        this.filters.campusId = this.campusList[0].oldCampusid;
+      }
+    });
+  },
+  methods: {
+    ...mapActions(['fetchCampusList']), //权限校区
+    fetchList() {},
+    searchList() {
+      this.changePage(1);
+    },
+    refreshList() {
+      this.changePage(1);
+    },
+    getFilters() {
+      let filters = this.$getFilters(this.filters);
+      return filters;
+    },
+    changePage(index) {
+      const filters = this.getFilters();
+      this.fetchList({
+        ...filters,
+        pageNum: index,
+      });
+    },
+    changeSizeHandle(pageSize) {
+      const filters = this.getFilters();
+      this.fetchList({
+        ...filters,
+        pageNum: 1,
+        pageSize: pageSize,
+      });
+      this.updatePagination({
+        pageNum: 1,
+        pageSize: pageSize,
+      });
+    },
+    handleSelectionChange(val) {
+      this.selectedList = val;
+    },
+  },
+};

src/mixins/dialog.js

+import {
+  operClassifyList,
+  operClassifyName4role,
+  operClassifyName4User,
+} from '@/config';
+import { mapGetters } from 'vuex';
+
+export default {
+  props: {
+    visible: Boolean,
+    resetDialog: Function,
+    type: Number, // 0 新增 1 修改
+    selected: Object,
+    submitUpdateHandle: Function,
+    cancelHandle: Function,
+  },
+  computed: {
+    ...mapGetters(['loading']),
+  },
+  methods: {
+    updateVisibleHandle(val) {
+      this.$emit('update:visible', val);
+    },
+    getOperClassifyName(val) {
+      let item = operClassifyList.find(item => item.value === val);
+      return item ? item.label : val;
+    },
+
+    getOperClassifyName4role(val) {
+      let item = operClassifyName4role.find(item => item.value === val);
+      return item ? item.label : val;
+    },
+
+    getOperClassifyName4User(val) {
+      let item = operClassifyName4User.find(item => item.value === val);
+      return item ? item.label : val;
+    },
+  },
+};

src/mixins/listPage.js

+import { mapGetters } from 'vuex';
+
+/**
+ * 需要页面组件自己注入或重写参数
+ * listData: 页面列表数据 导入名字key需重命名为listData
+ * pagination: 列表的分页数据
+ * filters: 带有搜索条件的页面需自己定义filters
+ *
+ * 需要页面组件自己注入或重写方法
+ * fetchList: 获取列表数据的方法 通常为触发action的方法
+ * updatePagination: 切换分页大小需要注入此方法更新分页信息
+ */
+export default {
+  data() {
+    return {
+      // listData: [], // 需页面组件自己注入列表并命名为 listData
+      filters: {},
+      selected: {},
+      selectedList: [], // 带有选择框列表选中的列表项
+      editType: 0, // 带有新增/编辑的页面区分编辑状态
+      dialogEditVisible: false, // 带有新增/编辑的页面弹出框可/不可见
+      dialogDetailVisible: false, // 详情弹窗
+    };
+  },
+  //
+  computed: {
+    ...mapGetters(['loading']),
+  },
+  created() {
+    // 当页面没有列表数据的时候调用
+    if (!this.listData || !this.listData.length) {
+      this.fetchList({
+        pageNum: 1,
+      });
+    }
+  },
+  methods: {
+    // 页面组件需自己实现获取列表数据的方法
+    fetchList() {},
+    // 点击搜索时处理函数
+    searchList() {
+      this.changePage(1);
+    },
+    // 获取过滤条件方法 组件可自己实现
+    getFilters() {
+      let { timeRange, ...filters } = this.$getFilters(this.filters);
+      if (timeRange) {
+        const [starttime, endtime] = timeRange;
+        if (starttime) filters.starttime = starttime;
+        if (endtime) filters.endtime = endtime;
+      }
+      return filters;
+    },
+    // 页码改变时处理函数
+    changePage(index = 1) {
+      const filters = this.getFilters();
+      this.fetchList({
+        ...filters,
+        pageNum: index,
+      });
+    },
+    // 分页大小改变时处理函数
+    changeSizeHandle(pageSize) {
+      const filters = this.getFilters();
+      this.fetchList({
+        ...filters,
+        pageNum: 1,
+        pageSize: pageSize,
+      });
+      this.updatePagination({
+        pageNum: 1,
+        pageSize: pageSize,
+      });
+    },
+    // 当列表可选时 处理选择函数
+    handleSelectionChange(val) {
+      this.selectedList = val;
+    },
+    resetEditDialog(done) {
+      if (typeof this.initSelected === 'function') {
+        this.selected = this.initSelected();
+      } else {
+        this.selected = {};
+      }
+      done && typeof done == 'function'
+        ? done()
+        : (this.dialogEditVisible = false);
+    },
+    resetDetailDialog(done) {
+      if (typeof this.initSelected === 'function') {
+        this.selected = this.initSelected();
+      } else {
+        this.selected = {};
+      }
+      done && typeof done == 'function'
+        ? done()
+        : (this.dialogEditVisible = false);
+    },
+  },
+};

src/mixins/menu/menus.js

+import store from './store';
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  created() {
+    store.install(this.$store);
+  },
+  mounted() {
+    if (!this.MenuTree.length) {
+      this.fetchMenuTree();
+    }
+  },
+  data() {
+    return {
+      propsMap: {
+        children: 'childs',
+        label: 'menuName',
+      },
+    };
+  },
+  computed: {
+    ...mapGetters('menus', ['MenuTree']),
+  },
+  methods: {
+    ...mapActions('menus', ['fetchMenuTree']),
+  },
+};

src/mixins/menu/menusStore.js

+import { fetchMenuTree } from '@/api/base/index';
+
+const GET_MENUS_TREE = 'GET_MENUS_TREE';
+const FETCH_STATE = 'FETCH_STATE';
+
+const state = () => ({
+  list: [],
+  fetching: false,
+});
+
+const getters = {
+  MenuTree: state => state.list,
+};
+
+const actions = {
+  fetchMenuTree({ state, commit }) {
+    if (state.fetching) return;
+    commit(FETCH_STATE, true);
+    return fetchMenuTree().then(res => {
+      const list = res.data;
+      commit(GET_MENUS_TREE, list);
+      commit(FETCH_STATE, false);
+    });
+  },
+};
+
+const mutations = {
+  [GET_MENUS_TREE](state, list) {
+    state.list = list;
+  },
+  [FETCH_STATE](state, fetching) {
+    state.fetching = fetching;
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/mixins/menu/store.js

+import menusStore from './menusStore';
+
+export default {
+  install(store) {
+    if (!store.state.base) {
+      store.registerModule(['base'], {
+        state: {},
+      });
+    }
+    if (!store.state.base.menus) {
+      store.registerModule(['base', 'menus'], menusStore);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['base', 'menus']);
+  },
+};

src/mixins/operator.js

+import { mapGetters,mapActions} from 'vuex';
+export default {
+  data() {
+    return {
+      // listData: [], // 需页面组件自己注入列表并命名为 listData
+      filters: {},
+      selected: {},
+      selectedList: [], // 带有选择框列表选中的列表项
+      editType: 0, // 带有新增/编辑的页面区分编辑状态
+      dialogEditVisible: false, // 带有新增/编辑的页面弹出框可/不可见
+    };
+  },
+
+  computed: {
+    ...mapGetters(['loading', 'operatorList']),
+
+  },
+  created() {
+    let operatorPromise = null;
+    if (this.operatorList && this.operatorList.length) {
+      operatorPromise = new Promise(resolve => resolve());
+    } else {
+      operatorPromise = this.getOperatorList();
+    }
+    operatorPromise.then(() => {
+      if (this.operatorId) {
+        this.filters.operatorId = this.operatorId;
+      } else if (this.operatorList.length === 1) {
+        this.filters.operatorId = this.operatorList[0].operatorId;
+      }
+    });
+  },
+
+  methods:{
+    ...mapActions(['getOperatorList']),
+      // 页面组件需自己实现获取列表数据的方法
+      fetchList() {},
+      // 点击搜索时处理函数
+      searchList() {
+        this.changePage(1);
+      },
+      // 获取过滤条件方法 组件可自己实现
+      getFilters() {
+        let filters = this.$getFilters(this.filters);
+        return filters;
+      },
+      // 页码改变时处理函数
+      changePage(index) {
+        const filters = this.getFilters();
+        this.fetchList({
+          ...filters,
+          pageNum: index,
+        });
+      },
+      // 分页大小改变时处理函数
+      changeSizeHandle(pageSize) {
+        const filters = this.getFilters();
+        this.fetchList({
+          ...filters,
+          pageNum: 1,
+          pageSize: pageSize,
+        });
+        this.updatePagination({
+          pageNum: 1,
+          pageSize: pageSize,
+        });
+      },
+      // 当列表可选时 处理选择函数
+      handleSelectionChange(val) {
+        this.selectedList = val;
+      },
+      resetEditDialog(done) {
+        this.selected = {};
+        done && typeof done == 'function'
+          ? done()
+          : (this.dialogEditVisible = false);
+      },
+
+  }
+};

src/mixins/user/getUserInfoLabel.js

+import {
+  customerStateOptions,
+  customerTypesOptions,
+  customerSexOptions,
+  customerIsFirstRechargeOptions,
+  areaTypes,
+  properties,
+} from '@/config';
+
+export default {
+  data() {
+    return {
+      customerStateOptions,
+      customerTypesOptions,
+      customerSexOptions,
+      customerIsFirstRechargeOptions,
+      areaTypes,
+      properties,
+    };
+  },
+  methods: {
+    getTypeLabel(val) {
+      let item = customerTypesOptions.find(item => item.value === val);
+      return item ? item.label : '';
+    },
+    
+    getAreaTypeLabel(val) {
+      let item = areaTypes.find(item => item.value === val);
+      return item ? item.label : '';
+    },
+    
+    getAreaProplabel(val) {
+      let item = properties.find(item => item.value === val);
+      return item ? item.label : '';
+    },
+    getStateLabel(val) {
+      let item = customerStateOptions.find(item => item.value === val);
+      return item ? item.label : '';
+    },
+    getSexLabel(val) {
+      let item = customerSexOptions.find(item => item.value === val);
+      return item ? item.label : '';
+    },
+    getIsFirstRechargeLabel(val) {
+      let item = customerIsFirstRechargeOptions.find(
+        item => item.value === val
+      );
+      return item ? item.label : '';
+    },
+  },
+};

src/mixins/user/userBaseInfo.js

+import { mapActions, mapGetters } from 'vuex';
+
+export default {
+  props: {
+    visible: { type: Boolean, default: false },
+    customerId: Number,
+    customerPhone: String,
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal) {
+        this.fetchUserBaseInfo({
+          customerId: this.customerId,
+        });
+      }
+    },
+    customerId(newId) {
+      if (newId && this.visible) {
+        this.fetchUserBaseInfo({
+          customerId: this.customerId,
+        });
+      }
+    },
+    customerPhone(newPhone) {
+      if (!this.customerId && newPhone && this.visible) {
+        this.fetchUserBaseInfoByPhone({
+          customerPhone: this.customerPhone,
+        });
+      }
+    },
+  },
+  created() {
+    if (this.visible && this.customerId) {
+      this.fetchUserBaseInfo({
+        customerId: this.customerId,
+      });
+    }
+    if (this.visible && !this.customerId && this.customerPhone) {
+      this.fetchUserBaseInfoByPhone({
+        customerPhone: this.customerPhone,
+      });
+    }
+  },
+  computed: {
+    ...mapGetters(['customerBaseInfo']),
+  },
+  methods: {
+    ...mapActions(['fetchUserBaseInfo', 'fetchUserBaseInfoByPhone']),
+  },
+};

src/mixins/user/validate.js

+export default {
+  methods: {
+    validateCustomerId(cid) {
+      if(cid){
+        //只能是数字的验证
+        let cidboolean = new RegExp('^[0-9]*[1-9][0-9]*$')
+        .test(cid);
+        return cidboolean;
+      }
+    },
+    validatePhone(cphone) {
+      if(cphone){
+        //电话号码验证
+        let cpboolean = new RegExp('^[1][3,4,5,6,7,8,9][0-9]{9}$')
+        .test(cphone);
+        return cpboolean;
+      }
+    },
+    validateMoney(money) {
+        if(money){
+            //金额验证
+            let mboolean = new RegExp('^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,2})?$')
+            .test(money);
+            return mboolean;
+        }
+    },
+    validateidCard(idcard) {
+      if(idcard){
+          //身份证验证
+          let cardboolean = new RegExp( /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))((\d{4})|(\d{3}[Xx]))$/)
+          .test(idcard);
+          return cardboolean;
+      }
+  },
+  },
+}

src/permission.js

+import router, { asyncRouterMap } from './router';
+import store from './store';
+import NProgress from 'nprogress'; // Progress 进度条
+import 'nprogress/nprogress.css'; // Progress 进度条样式
+import { getToken } from '@/utils/auth'; // 验权
+import { getAuthRoute } from './utils/route';
+
+const allAasyncRouterMap = [];
+
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
+
+const whiteList = process.env.VUE_APP_WHITE_LIST.split(','); // 不重定向白名单
+
+const getRouteAdd = () => {
+  let allRoute = store.getters.asyncRoutes;
+  // let item = allRoute.find(
+  //   menu => menu.menuCode === process.env.VUE_APP_MENU_CODE
+  // );
+  for (let index = 0; index < allRoute.length; index++) {
+    const element = allRoute[index];
+    if (element && element.childs) {
+      let addRoute = element.childs;
+      let asyncRouters = getAuthRoute(allAasyncRouterMap, addRoute);
+      router.addRoutes(asyncRouters); // 动态添加可访问路由表
+    }
+  }
+  router.addRoutes(asyncRouterMap);
+};
+
+router.beforeEach((to, from, next) => {
+  NProgress.start(); // 进度条Progress
+  if (getToken()) {
+    if (to.path === '/login') {
+      next({ path: '/' });
+      NProgress.done();
+    } else {
+      if (store.getters.isRouteDone) {
+        next(); //
+      } else {
+        let addRoute = store.getters.asyncRoutes;
+        if (addRoute && addRoute.length) {
+          getRouteAdd();
+          store.dispatch('GenerateRoutes');
+          next({ ...to, replace: true });
+        } else {
+          store
+            .dispatch('TokenLogin', {
+              data: { token: getToken() },
+            })
+            .then(() => {
+              getRouteAdd();
+              store.dispatch('GenerateRoutes');
+              next({ ...to, replace: true });
+            })
+            .catch(err => {
+              console.log(err);
+              store.dispatch('FedLogOut').then(() => {
+                next({ path: '/login' });
+              });
+            });
+        }
+      }
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      next();
+    } else {
+      next('/login');
+      NProgress.done();
+    }
+  }
+});
+
+router.afterEach(() => {
+  NProgress.done(); // 结束Progress
+});

src/router/_import.js

+const _import = require(`./_import_${
+  process.env.NODE_ENV !== 'development' ? 'production' : 'development'
+}`);
+
+export default _import;

src/router/_import_development.js

+module.exports = file => require('@/containers/' + file + '.vue').default;

src/router/_import_production.js

+module.exports = file => () => import('@/containers/' + file + '.vue');

src/router/index.js

+import Vue from 'vue';
+import Router from 'vue-router';
+import _import from './_import';
+import routeStore from './store';
+import Login from '@/containers/login/index';
+import errorPage404 from '@/containers/errorPage/404';
+import errorPage401 from '@/containers/errorPage/401';
+import HomeIcon from '@/assets/images/menu/home.png';
+
+Vue.use(Router);
+
+const constantRouterMap = [
+  { path: '/login', component: Login, hidden: true },
+  { path: '/404', component: errorPage404, hidden: true },
+  { path: '/401', component: errorPage401, hidden: true },
+  {
+    path: '/',
+    name: 'home',
+    meta: { title: '首页', icon: HomeIcon },
+    component: { render: h => <router-view /> },
+  },
+];
+
+const asyncRouterMap = [{ path: '*', redirect: '/404', hidden: true }];
+
+export { constantRouterMap, asyncRouterMap, routeStore };
+
+export default new Router({
+  mode: 'history',
+  base: process.env.VUE_APP_BASE_URL,
+  scrollBehavior: () => ({ y: 0 }),
+  routes: constantRouterMap,
+});

src/router/store.js

+const SET_ROUTERS = 'SET_ROUTERS';
+const ROUTERS_DONE = 'ROUTERS_DONE';
+
+const state = () => ({
+  isRouteDone: false, // 是否生成了动态路由
+  asyncRoutes: [],
+});
+
+const getters = {
+  isRouteDone: state => state.isRouteDone,
+  asyncRoutes: state => state.asyncRoutes,
+};
+
+const actions = {
+  getAsyncRoute({ commit }, menus) {
+    commit(SET_ROUTERS, menus);
+  },
+  GenerateRoutes({ commit }) {
+    commit(ROUTERS_DONE);
+  },
+};
+
+const mutations = {
+  [SET_ROUTERS](state, routers) {
+    state.asyncRoutes = routers;
+  },
+  [ROUTERS_DONE](state) {
+    state.isRouteDone = true;
+  },
+};
+
+const RouteStore = {
+  state,
+  getters,
+  actions,
+  mutations,
+};
+
+export default {
+  install(store) {
+    if (!store.state.Route) {
+      store.registerModule(['Route'], RouteStore);
+    }
+  },
+  uninstall(store) {
+    store.unregisterModule(['Route']);
+  },
+};

src/store/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import createLogger from 'vuex/dist/logger';
+import app from './modules/app/index';
+import user from './modules/user/index';
+import base from './modules/base/index';
+
+Vue.use(Vuex);
+
+const debug = process.env.NODE_ENV !== 'production';
+
+const store = new Vuex.Store({
+  modules: {
+    app,
+    user,
+    base,
+  },
+  strict: debug,
+  plugins: debug ? [createLogger()] : [],
+});
+export default store;

src/store/modules/app/index.js

+import sidebar from './sidebar';
+import { FETCH_START, FETCH_DONE } from './mutation-types';
+
+let fetchCount = 0;
+const state = () => ({
+  loading: false,
+});
+
+const getters = {
+  loading: state => state.loading,
+};
+
+const actions = {
+  fetchStart({ commit }) {
+    commit(FETCH_START);
+  },
+  fetchDone({ commit }) {
+    commit(FETCH_DONE);
+  },
+};
+const mutations = {
+  [FETCH_START](state) {
+    fetchCount++;
+    state.loading = true;
+  },
+  [FETCH_DONE](state) {
+    fetchCount--;
+    if (fetchCount === 0) {
+      state.loading = false;
+    }
+  },
+};
+export default {
+  modules: {
+    sidebar,
+  },
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/store/modules/app/mutation-types.js

+export const FETCH_START = 'FETCH_START';
+export const FETCH_DONE = 'FETCH_DONE';
+
+export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
+
+export const ADD_VISITED_VIEWS = 'ADD_VISITED_VIEWS';
+export const DEL_VISITED_VIEWS = 'DEL_VISITED_VIEWS';
+export const DEL_OTHERS_VIEWS = 'DEL_OTHERS_VIEWS';
+export const DEL_ALL_VIEWS = 'DEL_ALL_VIEWS';

src/store/modules/app/sidebar.js

+import Cookies from 'js-cookie';
+import { TOGGLE_SIDEBAR } from './mutation-types';
+
+const state = () => ({
+  opened: !+Cookies.get('sidebarStatus'),
+});
+
+const getters = {
+  sidebar: state => state,
+};
+
+const actions = {
+  ToggleSideBar: ({ commit }) => {
+    commit(TOGGLE_SIDEBAR);
+  },
+};
+
+const mutations = {
+  [TOGGLE_SIDEBAR]: state => {
+    if (state.opened) {
+      Cookies.set('sidebarStatus', 1);
+    } else {
+      Cookies.set('sidebarStatus', 0);
+    }
+    state.opened = !state.opened;
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/store/modules/base/giveTypeOption.js

+import { fetchSelectList } from '@/api/base/index';
+
+const GIVE_TYPE_LIST = 'GIVE_TYPE_LIST';
+const CONSUME_TYPE_LIST = 'CONSUME_TYPE_LIST';
+const PAYMENT_CONSUME_PAY_WAY_LIST = 'PAYMENT_CONSUME_PAY_WAY_LIST';
+const state = () => ({
+  list: [],
+  consumeTypeList : [],//消费类型
+  paymentConsumePayWayList : [],//执法方式
+});
+
+const getters = {
+  giveTypeList: state => state.list,
+  consumeTypeList :state => state.consumeTypeList,
+  paymentConsumePayWayList :state=>state.paymentConsumePayWayList,
+};
+
+const actions = {
+
+  //赠送类型
+  fetchGiveTypeList({ commit }) {
+    return fetchSelectList({
+      params: {
+          type:"2",
+      },
+    }).then(res => {
+      const list = res.data;
+      commit(GIVE_TYPE_LIST, list);
+    });
+  },
+
+  //消费类型
+  fetchConsumeTypeList({ commit }) {
+    return fetchSelectList({
+      params: {
+          type:"3",
+      },
+    }).then(res => {
+      const list = res.data;
+      commit(CONSUME_TYPE_LIST, list);
+    });
+  },
+
+    //支付方式
+    fetchPaymentConsumePayWayList({ commit }) {
+      return fetchSelectList({
+        params: {
+            type:"4",
+        },
+      }).then(res => {
+        const list = res.data;
+        commit(PAYMENT_CONSUME_PAY_WAY_LIST, list);
+      });
+    },
+};
+
+const mutations = {
+  [GIVE_TYPE_LIST](state, list) {
+    state.list = list;
+  },
+  [CONSUME_TYPE_LIST](state, list) {
+    state.consumeTypeList = list;
+  },
+  [PAYMENT_CONSUME_PAY_WAY_LIST](state, paymentConsumePayWayList) {
+    state.paymentConsumePayWayList = paymentConsumePayWayList;
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/store/modules/base/index.js

+import giveTypeOption from './giveTypeOption.js';
+
+export default {
+  modules: {
+    giveTypeOption,
+  },
+};

src/store/modules/filters.js

+const UPDATE_FILTERS = 'UPDATE_FILTERS';
+
+const initFiltersStore = (
+  initState = {},
+  otherGetters = {},
+  otherActions = {},
+  otherMutations = {}
+) => {
+  const state = () => ({
+    filters: initState,
+  });
+  const getters = {
+    filters: state => state.filters,
+    ...otherGetters,
+  };
+  const actions = {
+    updateFilters({ commit }, filters) {
+      commit(UPDATE_FILTERS, filters);
+    },
+    ...otherActions,
+  };
+  const mutations = {
+    [UPDATE_FILTERS](state, filters) {
+      state.filters = {
+        ...state.filters,
+        ...filters,
+      };
+    },
+    ...otherMutations,
+  };
+
+  return {
+    state,
+    getters,
+    actions,
+    mutations,
+  };
+};
+
+export default initFiltersStore;

src/store/modules/pagination.js

+import { UPDATE_PAGINATION } from '../mutation-types';
+
+const state = () => ({
+  pageNum: 1, // 当前分页
+  pageSize: 10, // 分页大小
+  startRow: 0,
+  endRow: 0,
+  total: 0,
+  pages: 0,
+});
+
+const getters = {
+  pagination: state => state,
+};
+
+const actions = {
+  updatePagination({ commit }, pagination) {
+    commit(UPDATE_PAGINATION, pagination);
+  },
+};
+
+const mutations = {
+  [UPDATE_PAGINATION](state, pagination) {
+    state = Object.assign(state, {
+      ...pagination,
+    });
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/store/modules/user/index.js

+import { login, logout, changePwd } from '@/api/user/login';
+import { getToken, setToken, removeToken } from '@/utils/auth';
+import { SET_TOKEN, UPDATE_USERINFO } from './mutation-types';
+import md5 from 'blueimp-md5';
+
+const state = {
+  token: getToken(),
+  name: '',
+  id: '',
+  createDate: '',
+  trueName: '',
+  isSetPassword: null,
+};
+
+const getters = {
+  token: state => state.token,
+  userInfo: ({ token, ...other }) => other,
+  adminId: state => state.id,
+};
+
+const actions = {
+  // 登录
+  Login({ commit, dispatch }, { remenberAccount, ...entity }) {
+    return login({
+      data: {
+        ...entity,
+        pwd: md5(entity.pwd),
+      },
+    }).then(response => {
+      const {
+        token,
+        data: { userRoles, userInfo },
+      } = response;
+      if (remenberAccount) {
+        setToken(token, 7);
+      } else {
+        setToken(token, 1);
+      }
+      commit(SET_TOKEN, token);
+      commit(UPDATE_USERINFO, userInfo);
+      dispatch('getAsyncRoute', userRoles);
+    });
+  },
+  // token登录
+  TokenLogin({ commit, dispatch }, entity) {
+    return login(entity).then(response => {
+      const {
+        data: { userRoles, userInfo },
+      } = response;
+      commit(UPDATE_USERINFO, userInfo);
+      dispatch('getAsyncRoute', userRoles);
+    });
+  },
+
+  // 登出
+  LogOut({ commit, state }) {
+    return logout(state.token).then(() => {
+      commit(SET_TOKEN, '');
+      removeToken();
+      resolve();
+    });
+  },
+
+  // 前端 登出
+  FedLogOut({ commit }) {
+    return new Promise(resolve => {
+      commit(SET_TOKEN, '');
+      removeToken();
+      resolve();
+    });
+  },
+
+  // 修改密码
+  updatePassword({ commit, dispatch }, { oldPwd, newPwd }) {
+    return changePwd({
+      data: {
+        oldPwd: md5(oldPwd),
+        newPwd: md5(newPwd),
+      },
+    }).then(res => {
+      const {
+        data: { userRoles, userInfo },
+      } = res;
+      commit(UPDATE_USERINFO, userInfo);
+      dispatch('getAsyncRoute', userRoles);
+    });
+  },
+};
+
+const mutations = {
+  [SET_TOKEN](state, token) {
+    state.token = token;
+  },
+  [UPDATE_USERINFO](state, userInfo) {
+    state = Object.assign(state, {
+      ...userInfo,
+    });
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/store/modules/user/mutation-types.js

+export const SET_TOKEN = 'SET_TOKEN';
+export const UPDATE_USERINFO = 'UPDATE_USERINFO';
+export const SET_ROUTERS = 'SET_ROUTERS';
+export const INIT_ROUTERS = 'INIT_ROUTERS';
+export const ROUTERS_DONE = 'ROUTERS_DONE';

src/store/mutation-types.js

+export const USER_LOGIN = 'USER_LOGIN';
+export const FETCH_PRODUCT_LIST = 'FETCH_PRODUCT_LIST';
+// pagination
+export const UPDATE_PAGINATION = 'UPDATE_PAGINATION';
\ No newline at end of file

src/utils/auth.js

+import Cookies from 'js-cookie';
+import { TOKEN_KEY } from '@/config/index';
+
+const TokenKey = TOKEN_KEY;
+
+export function getToken() {
+  return Cookies.get(TokenKey);
+}
+
+export function setToken(token, expires) {
+  return Cookies.set(TokenKey, token, { expires: expires });
+}
+
+export function removeToken() {
+  return Cookies.remove(TOKEN_KEY);
+}

src/utils/download.js

+const downloadUrl = (blob, fileName) => {
+  if (window.navigator.msSaveOrOpenBlob) {
+    console.log('in msSaveOrOpenBlob')
+    navigator.msSaveBlob(blob, fileName);
+  } else {
+    console.log('in create a')
+    let link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = fileName;
+    link.click();
+    window.URL.revokeObjectURL(link.href);
+  }
+};
+
+export const downloadBlob = async res => {
+  let resBlob = res.data;
+  let resData = null;
+  try {
+    let resText = await new Promise((resolve, reject) => {
+      // 通过 FileReader 接受并解析
+      let reader = new FileReader();
+      reader.addEventListener('abort', reject);
+      reader.addEventListener('error', reject);
+      reader.addEventListener('loadend', () => {
+        resolve(reader.result);
+      });
+      // 文件
+      reader.readAsText(resBlob);
+    });
+    // JSON
+    resData = JSON.parse(resText);
+  } catch (err) {
+    console.log(err);
+  }
+  return { res, resData, resBlob };
+};
+
+export default downloadUrl;

src/utils/extends.js

+import {
+  formatDate,
+  parseTime,
+  getFilters,
+  formatePhone,
+  allowLetterNumber,
+} from '@/utils/index';
+import rymUi from 'rym-element-ui';
+import 'rym-element-ui/lib/rymUi.css';
+import AreaSelect from '../components/input/AreaSelect/index';
+import ServiceTypeSelect from '../components/input/ServiceTypeSelect/index';
+import GiveTypeSelect from '../components/input/GiveTypeSelect.vue';
+import BaseDataSelect from '../components/input/BaseDataSelect/index';
+import OperatorSelect from '../components/input/OperatorSelect/index';
+import BeansSelect from '../components/input/BeanTypeSelect/index';
+
+const extendVue = Vue => {
+  Vue.use(rymUi);
+  Vue.prototype.$formatDate = formatDate;
+  Vue.prototype.$parseTime = parseTime;
+  Vue.prototype.$formatePhone = formatePhone;
+  Vue.prototype.$getFilters = getFilters;
+  Vue.prototype.$allowLetterNumber = allowLetterNumber;
+  // input
+  Vue.component(AreaSelect.name, AreaSelect);
+  Vue.component(BaseDataSelect.name, BaseDataSelect);
+  Vue.component(ServiceTypeSelect.name, ServiceTypeSelect);
+  Vue.component(GiveTypeSelect.name, GiveTypeSelect);
+  Vue.component(OperatorSelect.name, OperatorSelect);
+  Vue.component(BeansSelect.name, BeansSelect);
+};
+
+export default extendVue;

src/utils/getIp.js

+export const getYourIP = (callback) => {
+  var RTCPeerConnection =
+    window.RTCPeerConnection ||
+    window.webkitRTCPeerConnection ||
+    window.mozRTCPeerConnection;
+  if (RTCPeerConnection)
+    (function() {
+      var rtc = new RTCPeerConnection({ iceServers: [] });
+      if (1 || window.mozRTCPeerConnection) {
+        rtc.createDataChannel('', { reliable: false });
+      }
+
+      rtc.onicecandidate = function(evt) {
+        if (evt.candidate) grepSDP('a=' + evt.candidate.candidate);
+      };
+      rtc.createOffer(
+        function(offerDesc) {
+          grepSDP(offerDesc.sdp);
+          rtc.setLocalDescription(offerDesc);
+        },
+        function(e) {
+          console.warn('offer failed', e);
+        }
+      );
+
+      var addrs = Object.create(null);
+      addrs['0.0.0.0'] = false;
+      function updateDisplay(newAddr) {
+        if (newAddr in addrs) return;
+        else addrs[newAddr] = true;
+        var displayAddrs = Object.keys(addrs).filter(function(k) {
+          return addrs[k];
+        });
+        for (var i = 0; i < displayAddrs.length; i++) {
+          if (displayAddrs[i].length > 16) {
+            displayAddrs.splice(i, 1);
+            i--;
+          }
+        }
+        return displayAddrs[0];
+      }
+
+      function grepSDP(sdp) {
+        var hosts = [];
+        sdp.split('\r\n').forEach(function(line, index, arr) {
+          if (~line.indexOf('a=candidate')) {
+            var parts = line.split(' '),
+              addr = parts[4],
+              type = parts[7];
+            if (type === 'host') {
+                callback(updateDisplay(addr))
+            }
+          } else if (~line.indexOf('c=')) {
+            var parts = line.split(' '),
+              addr = parts[2];
+              callback(updateDisplay(addr))
+          }
+        });
+      }
+    })();
+  else {
+  }
+};

src/utils/index.js

+export function parseTime(time, cFormat) {
+  if (arguments.length === 0) {
+    return null;
+  }
+  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}';
+  let date;
+  if (typeof time === 'object') {
+    date = time;
+  } else {
+    if (('' + time).length === 10) time = parseInt(time) * 1000;
+    date = new Date(time);
+  }
+  const formatObj = {
+    y: date.getFullYear(),
+    m: date.getMonth() + 1,
+    d: date.getDate(),
+    h: date.getHours(),
+    i: date.getMinutes(),
+    s: date.getSeconds(),
+    a: date.getDay(),
+  };
+  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
+    let value = formatObj[key];
+    if (key === 'a')
+      return ['一', '二', '三', '四', '五', '六', '日'][value - 1];
+    if (result.length > 0 && value < 10) {
+      value = '0' + value;
+    }
+    return value || 0;
+  });
+  return time_str;
+}
+export function formatTime(time, option) {
+  time = +time * 1000;
+  const d = new Date(time);
+  const now = Date.now();
+
+  const diff = (now - d) / 1000;
+
+  if (diff < 30) {
+    return '刚刚';
+  } else if (diff < 3600) {
+    // less 1 hour
+    return Math.ceil(diff / 60) + '分钟前';
+  } else if (diff < 3600 * 24) {
+    return Math.ceil(diff / 3600) + '小时前';
+  } else if (diff < 3600 * 24 * 2) {
+    return '1天前';
+  }
+  if (option) {
+    return parseTime(time, option);
+  } else {
+    return (
+      d.getMonth() +
+      1 +
+      '月' +
+      d.getDate() +
+      '日' +
+      d.getHours() +
+      '时' +
+      d.getMinutes() +
+      '分'
+    );
+  }
+}
+
+// 格式化时间
+export function getQueryObject(url) {
+  url = url == null ? window.location.href : url;
+  const search = url.substring(url.lastIndexOf('?') + 1);
+  const obj = {};
+  const reg = /([^?&=]+)=([^?&=]*)/g;
+  search.replace(reg, (rs, $1, $2) => {
+    const name = decodeURIComponent($1);
+    let val = decodeURIComponent($2);
+    val = String(val);
+    obj[name] = val;
+    return rs;
+  });
+  return obj;
+}
+
+/**
+ * get getByteLen
+ * @param {Sting} val input value
+ * @returns {number} output value
+ */
+export function getByteLen(val) {
+  let len = 0;
+  for (let i = 0; i < val.length; i++) {
+    if (val[i].match(/[^\x00-\xff]/gi) != null) {
+      len += 1;
+    } else {
+      len += 0.5;
+    }
+  }
+  return Math.floor(len);
+}
+
+export function cleanArray(actual) {
+  const newArray = [];
+  for (let i = 0; i < actual.length; i++) {
+    if (actual[i]) {
+      newArray.push(actual[i]);
+    }
+  }
+  return newArray;
+}
+
+export function param(json) {
+  if (!json) return '';
+  return cleanArray(
+    Object.keys(json).map(key => {
+      if (json[key] === undefined) return '';
+      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
+    })
+  ).join('&');
+}
+
+export function param2Obj(url) {
+  const search = url.split('?')[1];
+  if (!search) {
+    return {};
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"') +
+      '"}'
+  );
+}
+
+export function html2Text(val) {
+  const div = document.createElement('div');
+  div.innerHTML = val;
+  return div.textContent || div.innerText;
+}
+
+export function objectMerge(target, source) {
+  /* Merges two  objects,
+     giving the last one precedence */
+
+  if (typeof target !== 'object') {
+    target = {};
+  }
+  if (Array.isArray(source)) {
+    return source.slice();
+  }
+  for (const property in source) {
+    if (source.hasOwnProperty(property)) {
+      const sourceProperty = source[property];
+      if (typeof sourceProperty === 'object') {
+        target[property] = objectMerge(target[property], sourceProperty);
+        continue;
+      }
+      target[property] = sourceProperty;
+    }
+  }
+  return target;
+}
+
+export function scrollTo(element, to, duration) {
+  if (duration <= 0) return;
+  const difference = to - element.scrollTop;
+  const perTick = (difference / duration) * 10;
+  setTimeout(() => {
+    console.log(new Date());
+    element.scrollTop = element.scrollTop + perTick;
+    if (element.scrollTop === to) return;
+    scrollTo(element, to, duration - 10);
+  }, 10);
+}
+
+export function toggleClass(element, className) {
+  if (!element || !className) {
+    return;
+  }
+  let classString = element.className;
+  const nameIndex = classString.indexOf(className);
+  if (nameIndex === -1) {
+    classString += '' + className;
+  } else {
+    classString =
+      classString.substr(0, nameIndex) +
+      classString.substr(nameIndex + className.length);
+  }
+  element.className = classString;
+}
+
+export const pickerOptions = [
+  {
+    text: '今天',
+    onClick(picker) {
+      const end = new Date();
+      const start = new Date(new Date().toDateString());
+      end.setTime(start.getTime());
+      picker.$emit('pick', [start, end]);
+    },
+  },
+  {
+    text: '最近一周',
+    onClick(picker) {
+      const end = new Date(new Date().toDateString());
+      const start = new Date();
+      start.setTime(end.getTime() - 3600 * 1000 * 24 * 7);
+      picker.$emit('pick', [start, end]);
+    },
+  },
+  {
+    text: '最近一个月',
+    onClick(picker) {
+      const end = new Date(new Date().toDateString());
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      picker.$emit('pick', [start, end]);
+    },
+  },
+  {
+    text: '最近三个月',
+    onClick(picker) {
+      const end = new Date(new Date().toDateString());
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      picker.$emit('pick', [start, end]);
+    },
+  },
+];
+
+export function getTime(type) {
+  if (type === 'start') {
+    return new Date().getTime() - 3600 * 1000 * 24 * 90;
+  } else {
+    return new Date(new Date().toDateString());
+  }
+}
+
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result;
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp;
+
+    // 上次被包装函数被调用时间间隔last小于设定时间间隔wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last);
+    } else {
+      timeout = null;
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args);
+        if (!timeout) context = args = null;
+      }
+    }
+  };
+
+  return function(...args) {
+    context = this;
+    timestamp = +new Date();
+    const callNow = immediate && !timeout;
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait);
+    if (callNow) {
+      result = func.apply(context, args);
+      context = args = null;
+    }
+
+    return result;
+  };
+}
+
+export function deepClone(source) {
+  if (!source && typeof source !== 'object') {
+    throw new Error('error arguments', 'shallowClone');
+  }
+  const targetObj = source.constructor === Array ? [] : {};
+  for (const keys in source) {
+    if (source.hasOwnProperty(keys)) {
+      if (source[keys] && typeof source[keys] === 'object') {
+        targetObj[keys] = source[keys].constructor === Array ? [] : {};
+        targetObj[keys] = deepClone(source[keys]);
+      } else {
+        targetObj[keys] = source[keys];
+      }
+    }
+  }
+  return targetObj;
+}
+export function formatDate(date, fmt = 'yyyy-MM-dd hh:mm:ss') {
+  if (!date) {
+    return '无';
+  }
+  if (typeof date === 'string') {
+    date = new Date(date);
+  }
+
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(
+      RegExp.$1,
+      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
+    );
+  }
+  let o = {
+    'M+': date.getMonth() + 1,
+    'd+': date.getDate(),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+  };
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + '';
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? str : padLeftZero(str)
+      );
+    }
+  }
+  return fmt;
+}
+
+function padLeftZero(str) {
+  return ('00' + str).substr(str.length);
+}
+
+export const getFilters = obj => {
+  let filters = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const element = obj[key];
+      if (obj[key] instanceof Array) {
+        if (obj[key].length) {
+          filters[key] = element;
+        }
+      } else if (element || element === 0 || element === false) {
+        filters[key] = element;
+      }
+    }
+  }
+  return filters;
+};
+
+export const formatePhone = phone => {
+  let newPhone = phone.replace(/([0-9]{3})([0-9]{4})([0-9]{4})/, '$1****$3');
+  return newPhone;
+};
+
+export const allowLetterNumber = value => {
+  let newVal = value.replace(/[^a-zA-Z0-9]/g, '');
+  return newVal;
+};

src/utils/route.js

+export const formatRouteLink = (addRoute, path = '/') => {
+  return addRoute.map(route => {
+    if (route.childs && route.childs.length) {
+      return {
+        path: path + route.menuLink,
+        name: route.id.toString(),
+        meta: { title: route.menuName, icon: route.menuPicSmall },
+        children: formatRouteLink(route.childs, path + route.menuLink + '/'),
+      };
+    } else {
+      return {
+        path: path + route.menuLink,
+        name: route.id.toString(),
+        meta: { title: route.menuName, icon: route.menuPicSmall },
+      };
+    }
+  });
+};
+
+export const getAuthRoute = (asyncRouterMap, addRoute, path = '/') => {
+  return addRoute.map(route => {
+    if (route.childs && route.childs.length) {
+      return {
+        path: path + route.menuLink,
+        component: { render: h => <router-view /> },
+        name: route.id,
+        meta: { title: route.menuName, icon: route.menuPicSmall },
+        children: getAuthRoute(
+          asyncRouterMap,
+          route.childs,
+          path + route.menuLink + '/'
+        ),
+      };
+    } else {
+      let localcomponent = asyncRouterMap.find(
+        item => item.code === route.menuCode
+      );
+      if (localcomponent) {
+        return {
+          path: path + route.menuLink,
+          component: localcomponent.component,
+          name: route.id,
+          meta: {
+            ...localcomponent.meta,
+            title: route.menuName,
+            icon: route.menuPicSmall,
+            btns: route.listMenuButtonVo.reduce(
+              (btns, val) =>
+                val.buttonCode
+                  ? { ...btns, [val.buttonCode]: val.state === '1' }
+                  : btns,
+              {}
+            ),
+          },
+        };
+      } else {
+        return {
+          path: path + route.menuLink,
+          component: null,
+          name: route.id,
+          meta: {
+            title: route.menuName,
+            icon: route.menuPicSmall,
+          },
+        };
+      }
+    }
+  });
+};

src/utils/validate.js

+/* 合法uri*/
+export function validateURL(textval) {
+  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
+  return urlregex.test(textval);
+}
+
+/* 小写字母*/
+export function validateLowerCase(str) {
+  const reg = /^[a-z]+$/;
+  return reg.test(str);
+}
+
+/* 大写字母*/
+export function validateUpperCase(str) {
+  const reg = /^[A-Z]+$/;
+  return reg.test(str);
+}
+
+/* 大小写字母*/
+export function validatAlphabets(str) {
+  const reg = /^[A-Za-z]+$/;
+  return reg.test(str);
+}

vue.config.js

+const Path = require('path');
+
+let isLib = (() => {
+  let index = process.argv.findIndex(value => value === '--target');
+  if (index > -1) {
+    return process.argv[index + 1] && process.argv[index + 1] === 'lib';
+  } else {
+    return false;
+  }
+})();
+
+module.exports = {
+  publicPath: process.env.VUE_APP_BASE_URL,
+  outputDir: isLib ? Path.join('dist', 'lib') : 'dist',
+};