diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..ea6e20f --- /dev/null +++ b/.editorconfig @@ -0,0 +1,14 @@ +# http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +insert_final_newline = false +trim_trailing_whitespace = false diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..de583d0 --- /dev/null +++ b/.env.development @@ -0,0 +1,5 @@ +# just a flag +ENV = 'development' + +# base api +VUE_APP_BASE_API = '/dev-api' diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..7cef03d --- /dev/null +++ b/.env.production @@ -0,0 +1,7 @@ +# just a flag +ENV = 'production' + +# base api +VUE_APP_BASE_API = '/prod-api' +# VUE_APP_BASE_API = 'http://139.219.4.195:8002' + diff --git a/.env.staging b/.env.staging new file mode 100644 index 0000000..a8793a0 --- /dev/null +++ b/.env.staging @@ -0,0 +1,8 @@ +NODE_ENV = production + +# just a flag +ENV = 'staging' + +# base api +VUE_APP_BASE_API = '/stage-api' + diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..e6529fc --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +build/*.js +src/assets +public +dist diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c977505 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,198 @@ +module.exports = { + root: true, + parserOptions: { + parser: 'babel-eslint', + sourceType: 'module' + }, + env: { + browser: true, + node: true, + es6: true, + }, + extends: ['plugin:vue/recommended', 'eslint:recommended'], + + // add your custom rules here + //it is base on https://github.com/vuejs/eslint-config-vue + rules: { + "vue/max-attributes-per-line": [2, { + "singleline": 10, + "multiline": { + "max": 1, + "allowFirstLine": false + } + }], + "vue/singleline-html-element-content-newline": "off", + "vue/multiline-html-element-content-newline":"off", + "vue/name-property-casing": ["error", "PascalCase"], + "vue/no-v-html": "off", + 'accessor-pairs': 2, + 'arrow-spacing': [2, { + 'before': true, + 'after': true + }], + 'block-spacing': [2, 'always'], + 'brace-style': [2, '1tbs', { + 'allowSingleLine': true + }], + 'camelcase': [0, { + 'properties': 'always' + }], + 'comma-dangle': [2, 'never'], + 'comma-spacing': [2, { + 'before': false, + 'after': true + }], + 'comma-style': [2, 'last'], + 'constructor-super': 2, + 'curly': [2, 'multi-line'], + 'dot-location': [2, 'property'], + 'eol-last': 2, + 'eqeqeq': ["error", "always", {"null": "ignore"}], + 'generator-star-spacing': [2, { + 'before': true, + 'after': true + }], + 'handle-callback-err': [2, '^(err|error)$'], + 'indent': [2, 2, { + 'SwitchCase': 1 + }], + 'jsx-quotes': [2, 'prefer-single'], + 'key-spacing': [2, { + 'beforeColon': false, + 'afterColon': true + }], + 'keyword-spacing': [2, { + 'before': true, + 'after': true + }], + 'new-cap': [2, { + 'newIsCap': true, + 'capIsNew': false + }], + 'new-parens': 2, + 'no-array-constructor': 2, + 'no-caller': 2, + 'no-console': 'off', + 'no-class-assign': 2, + 'no-cond-assign': 2, + 'no-const-assign': 2, + 'no-control-regex': 0, + 'no-delete-var': 2, + 'no-dupe-args': 2, + 'no-dupe-class-members': 2, + 'no-dupe-keys': 2, + 'no-duplicate-case': 2, + 'no-empty-character-class': 2, + 'no-empty-pattern': 2, + 'no-eval': 2, + 'no-ex-assign': 2, + 'no-extend-native': 2, + 'no-extra-bind': 2, + 'no-extra-boolean-cast': 2, + 'no-extra-parens': [2, 'functions'], + 'no-fallthrough': 2, + 'no-floating-decimal': 2, + 'no-func-assign': 2, + 'no-implied-eval': 2, + 'no-inner-declarations': [2, 'functions'], + 'no-invalid-regexp': 2, + 'no-irregular-whitespace': 2, + 'no-iterator': 2, + 'no-label-var': 2, + 'no-labels': [2, { + 'allowLoop': false, + 'allowSwitch': false + }], + 'no-lone-blocks': 2, + 'no-mixed-spaces-and-tabs': 2, + 'no-multi-spaces': 2, + 'no-multi-str': 2, + 'no-multiple-empty-lines': [2, { + 'max': 1 + }], + 'no-native-reassign': 2, + 'no-negated-in-lhs': 2, + 'no-new-object': 2, + 'no-new-require': 2, + 'no-new-symbol': 2, + 'no-new-wrappers': 2, + 'no-obj-calls': 2, + 'no-octal': 2, + 'no-octal-escape': 2, + 'no-path-concat': 2, + 'no-proto': 2, + 'no-redeclare': 2, + 'no-regex-spaces': 2, + 'no-return-assign': [2, 'except-parens'], + 'no-self-assign': 2, + 'no-self-compare': 2, + 'no-sequences': 2, + 'no-shadow-restricted-names': 2, + 'no-spaced-func': 2, + 'no-sparse-arrays': 2, + 'no-this-before-super': 2, + 'no-throw-literal': 2, + 'no-trailing-spaces': 2, + 'no-undef': 2, + 'no-undef-init': 2, + 'no-unexpected-multiline': 2, + 'no-unmodified-loop-condition': 2, + 'no-unneeded-ternary': [2, { + 'defaultAssignment': false + }], + 'no-unreachable': 2, + 'no-unsafe-finally': 2, + 'no-unused-vars': [2, { + 'vars': 'all', + 'args': 'none' + }], + 'no-useless-call': 2, + 'no-useless-computed-key': 2, + 'no-useless-constructor': 2, + 'no-useless-escape': 0, + 'no-whitespace-before-property': 2, + 'no-with': 2, + 'one-var': [2, { + 'initialized': 'never' + }], + 'operator-linebreak': [2, 'after', { + 'overrides': { + '?': 'before', + ':': 'before' + } + }], + 'padded-blocks': [2, 'never'], + 'quotes': [2, 'single', { + 'avoidEscape': true, + 'allowTemplateLiterals': true + }], + 'semi': [2, 'never'], + 'semi-spacing': [2, { + 'before': false, + 'after': true + }], + 'space-before-blocks': [2, 'always'], + 'space-before-function-paren': [2, 'never'], + 'space-in-parens': [2, 'never'], + 'space-infix-ops': 2, + 'space-unary-ops': [2, { + 'words': true, + 'nonwords': false + }], + 'spaced-comment': [2, 'always', { + 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] + }], + 'template-curly-spacing': [2, 'never'], + 'use-isnan': 2, + 'valid-typeof': 2, + 'wrap-iife': [2, 'any'], + 'yield-star-spacing': [2, 'both'], + 'yoda': [2, 'never'], + 'prefer-const': 2, + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, + 'object-curly-spacing': [2, 'always', { + objectsInObjects: false + }], + 'array-bracket-spacing': [2, 'never'] + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b488630 --- /dev/null +++ b/.gitignore @@ -0,0 +1,16 @@ +.DS_Store +node_modules/ +dist/ +npm-debug.log* +yarn-debug.log* +yarn-error.log* +package-lock.json +tests/**/coverage/ + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln \ No newline at end of file diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..f4be7a0 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,5 @@ +language: node_js +node_js: 10 +script: npm run test +notifications: + email: false diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..6151575 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017-present PanJiaChen + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..fb82b27 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,14 @@ +module.exports = { + presets: [ + // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app + '@vue/cli-plugin-babel/preset' + ], + 'env': { + 'development': { + // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require(). + // This plugin can significantly increase the speed of hot updates, when you have a large number of pages. + // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html + 'plugins': ['dynamic-import-node'] + } + } +} diff --git a/build/index.js b/build/index.js new file mode 100644 index 0000000..0c57de2 --- /dev/null +++ b/build/index.js @@ -0,0 +1,35 @@ +const { run } = require('runjs') +const chalk = require('chalk') +const config = require('../vue.config.js') +const rawArgv = process.argv.slice(2) +const args = rawArgv.join(' ') + +if (process.env.npm_config_preview || rawArgv.includes('--preview')) { + const report = rawArgv.includes('--report') + + run(`vue-cli-service build ${args}`) + + const port = 9526 + const publicPath = config.publicPath + + var connect = require('connect') + var serveStatic = require('serve-static') + const app = connect() + + app.use( + publicPath, + serveStatic('./dist', { + index: ['index.html', '/'] + }) + ) + + app.listen(port, function () { + console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`)) + if (report) { + console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`)) + } + + }) +} else { + run(`vue-cli-service build ${args}`) +} diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 0000000..143cdc8 --- /dev/null +++ b/jest.config.js @@ -0,0 +1,24 @@ +module.exports = { + moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], + transform: { + '^.+\\.vue$': 'vue-jest', + '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': + 'jest-transform-stub', + '^.+\\.jsx?$': 'babel-jest' + }, + moduleNameMapper: { + '^@/(.*)$': '/src/$1' + }, + snapshotSerializers: ['jest-serializer-vue'], + testMatch: [ + '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' + ], + collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'], + coverageDirectory: '/tests/unit/coverage', + // 'collectCoverage': true, + 'coverageReporters': [ + 'lcov', + 'text-summary' + ], + testURL: 'http://localhost/' +} diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..ed079e2 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "paths": { + "@/*": ["src/*"] + } + }, + "exclude": ["node_modules", "dist"] +} diff --git a/mock/index.js b/mock/index.js new file mode 100644 index 0000000..c514c13 --- /dev/null +++ b/mock/index.js @@ -0,0 +1,57 @@ +const Mock = require('mockjs') +const { param2Obj } = require('./utils') + +const user = require('./user') +const table = require('./table') + +const mocks = [ + ...user, + ...table +] + +// for front mock +// please use it cautiously, it will redefine XMLHttpRequest, +// which will cause many of your third-party libraries to be invalidated(like progress event). +function mockXHR() { + // mock patch + // https://github.com/nuysoft/Mock/issues/300 + Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send + Mock.XHR.prototype.send = function() { + if (this.custom.xhr) { + this.custom.xhr.withCredentials = this.withCredentials || false + + if (this.responseType) { + this.custom.xhr.responseType = this.responseType + } + } + this.proxy_send(...arguments) + } + + function XHR2ExpressReqWrap(respond) { + return function(options) { + let result = null + if (respond instanceof Function) { + const { body, type, url } = options + // https://expressjs.com/en/4x/api.html#req + result = respond({ + method: type, + body: JSON.parse(body), + query: param2Obj(url) + }) + } else { + result = respond + } + return Mock.mock(result) + } + } + + for (const i of mocks) { + Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response)) + } +} + +module.exports = { + mocks, + mockXHR +} + diff --git a/mock/mock-server.js b/mock/mock-server.js new file mode 100644 index 0000000..6d800e0 --- /dev/null +++ b/mock/mock-server.js @@ -0,0 +1,86 @@ +const chokidar = require('chokidar') +const bodyParser = require('body-parser') +const chalk = require('chalk') +const path = require('path') +const Mock = require('mockjs') + +const mockDir = path.join(process.cwd(), 'mock') + +function registerRoutes(app) { + let mockLastIndex + const { mocks } = require('./index.js') + const mocksForServer = mocks.map(route => { + return responseFake(route.url, route.type, route.response) + }) + for (const mock of mocksForServer) { + // app[mock.type](mock.url, mock.response) //注释 + + app[mock.type](mock.url, bodyParser.json(), bodyParser.urlencoded({ //添加 + extended: true + }), mock.response) + + mockLastIndex = app._router.stack.length + } + const mockRoutesLength = Object.keys(mocksForServer).length + return { + mockRoutesLength: mockRoutesLength, + mockStartIndex: mockLastIndex - mockRoutesLength + } +} + +function unregisterRoutes() { + Object.keys(require.cache).forEach(i => { + if (i.includes(mockDir)) { + delete require.cache[require.resolve(i)] + } + }) +} + +// for mock server +const responseFake = (url, type, respond) => { + return { + url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`), + type: type || 'get', + response(req, res) { + console.log('request invoke:' + req.path) + res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond)) + } + } +} + +module.exports = app => { + // parse app.body + // https://expressjs.com/en/4x/api.html#req.body + // app.use(bodyParser.json()) + // app.use(bodyParser.urlencoded({ + // extended: true + // })) + + const mockRoutes = registerRoutes(app) + var mockRoutesLength = mockRoutes.mockRoutesLength + var mockStartIndex = mockRoutes.mockStartIndex + + // watch files, hot reload mock server + chokidar.watch(mockDir, { + ignored: /mock-server/, + ignoreInitial: true + }).on('all', (event, path) => { + if (event === 'change' || event === 'add') { + try { + // remove mock routes stack + app._router.stack.splice(mockStartIndex, mockRoutesLength) + + // clear routes cache + unregisterRoutes() + + const mockRoutes = registerRoutes(app) + mockRoutesLength = mockRoutes.mockRoutesLength + mockStartIndex = mockRoutes.mockStartIndex + + console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`)) + } catch (error) { + console.log(chalk.redBright(error)) + } + } + }) +} diff --git a/mock/table.js b/mock/table.js new file mode 100644 index 0000000..bd0e013 --- /dev/null +++ b/mock/table.js @@ -0,0 +1,29 @@ +const Mock = require('mockjs') + +const data = Mock.mock({ + 'items|30': [{ + id: '@id', + title: '@sentence(10, 20)', + 'status|1': ['published', 'draft', 'deleted'], + author: 'name', + display_time: '@datetime', + pageviews: '@integer(300, 5000)' + }] +}) + +module.exports = [ + { + url: '/vue-admin-template/table/list', + type: 'get', + response: config => { + const items = data.items + return { + code: 20000, + data: { + total: items.length, + items: items + } + } + } + } +] diff --git a/mock/user.js b/mock/user.js new file mode 100644 index 0000000..7555338 --- /dev/null +++ b/mock/user.js @@ -0,0 +1,84 @@ + +const tokens = { + admin: { + token: 'admin-token' + }, + editor: { + token: 'editor-token' + } +} + +const users = { + 'admin-token': { + roles: ['admin'], + introduction: 'I am a super administrator', + avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', + name: 'Super Admin' + }, + 'editor-token': { + roles: ['editor'], + introduction: 'I am an editor', + avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', + name: 'Normal Editor' + } +} + +module.exports = [ + // user login + { + url: '/vue-admin-template/user/login', + type: 'post', + response: config => { + const { username } = config.body + const token = tokens[username] + + // mock error + if (!token) { + return { + code: 60204, + message: 'Account and password are incorrect.' + } + } + + return { + code: 20000, + data: token + } + } + }, + + // get user info + { + url: '/vue-admin-template/user/info\.*', + type: 'get', + response: config => { + const { token } = config.query + const info = users[token] + + // mock error + if (!info) { + return { + code: 50008, + message: 'Login failed, unable to get user details.' + } + } + + return { + code: 20000, + data: info + } + } + }, + + // user logout + { + url: '/vue-admin-template/user/logout', + type: 'post', + response: _ => { + return { + code: 20000, + data: 'success' + } + } + } +] diff --git a/mock/utils.js b/mock/utils.js new file mode 100644 index 0000000..95cc27d --- /dev/null +++ b/mock/utils.js @@ -0,0 +1,25 @@ +/** + * @param {string} url + * @returns {Object} + */ +function param2Obj(url) { + const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') + if (!search) { + return {} + } + const obj = {} + const searchArr = search.split('&') + searchArr.forEach(v => { + const index = v.indexOf('=') + if (index !== -1) { + const name = v.substring(0, index) + const val = v.substring(index + 1, v.length) + obj[name] = val + } + }) + return obj +} + +module.exports = { + param2Obj +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..a726c29 --- /dev/null +++ b/package.json @@ -0,0 +1,68 @@ +{ + "name": "vue-admin-template", + "version": "4.4.0", + "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint", + "author": "Pan ", + "scripts": { + "dev": "vue-cli-service serve", + "build:prod": "vue-cli-service build", + "build:stage": "vue-cli-service build --mode staging", + "preview": "node build/index.js --preview", + "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", + "lint": "eslint --ext .js,.vue src", + "test:unit": "jest --clearCache && vue-cli-service test:unit", + "test:ci": "npm run lint && npm run test:unit" + }, + "dependencies": { + "axios": "0.18.1", + "core-js": "3.6.5", + "echarts": "^5.4.2", + "echarts-gl": "^2.0.9", + "el-tree-transfer": "^2.4.7", + "element-china-area-data": "^5.0.2", + "element-ui": "^2.15.7", + "js-cookie": "2.2.0", + "normalize.css": "7.0.0", + "nprogress": "0.2.0", + "path-to-regexp": "2.4.0", + "screenfull": "^4.2.1", + "v-fit-columns": "^0.2.0", + "vue": "2.6.10", + "vue-router": "3.0.6", + "vuex": "3.1.0" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "4.4.4", + "@vue/cli-plugin-eslint": "4.4.4", + "@vue/cli-plugin-unit-jest": "4.4.4", + "@vue/cli-service": "4.4.4", + "@vue/test-utils": "1.0.0-beta.29", + "autoprefixer": "9.5.1", + "babel-eslint": "10.1.0", + "babel-jest": "23.6.0", + "babel-plugin-dynamic-import-node": "2.3.3", + "chalk": "2.4.2", + "connect": "3.6.6", + "eslint": "6.7.2", + "eslint-plugin-vue": "6.2.2", + "html-webpack-plugin": "3.2.0", + "mockjs": "1.0.1-beta3", + "runjs": "4.3.2", + "sass": "1.26.8", + "sass-loader": "8.0.2", + "script-ext-html-webpack-plugin": "2.1.3", + "serve-static": "1.13.2", + "svg-sprite-loader": "4.1.3", + "svgo": "1.2.2", + "vue-template-compiler": "2.6.10" + }, + "browserslist": [ + "> 1%", + "last 2 versions" + ], + "engines": { + "node": ">=8.9", + "npm": ">= 3.0.0" + }, + "license": "MIT" +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..10473ef --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,8 @@ +// https://github.com/michael-ciniawsky/postcss-load-config + +module.exports = { + 'plugins': { + // to edit target browsers: use "browserslist" field in package.json + 'autoprefixer': {} + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..0dee37b Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..fa2be91 --- /dev/null +++ b/public/index.html @@ -0,0 +1,17 @@ + + + + + + + + <%= webpackConfig.name %> + + + +
+ + + diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..fd811d8 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/api/acl/permission.js b/src/api/acl/permission.js new file mode 100644 index 0000000..78cb8c7 --- /dev/null +++ b/src/api/acl/permission.js @@ -0,0 +1,13 @@ +import request from '@/utils/request' + + +export const getPermissionList = () => request({ url: `/WRD-admin/sys/menu/list`, method: 'get' }); +// 新增菜单 +export const reqAddPermission = (menu) => request({ url: `/WRD-admin/sys/menu`, method: 'post', data: menu }); +// 修改菜单 +export const reqUpdatePermission = (menu) => request({ url: `/WRD-admin/sys/menu`, method: 'put', data: menu }); +// 删除菜单 +export const reqDeletePermission = (id) => request({ + url: `/WRD-admin/sys/menu/${id}`, method: 'delete' +}) + diff --git a/src/api/acl/role.js b/src/api/acl/role.js new file mode 100644 index 0000000..a02e473 --- /dev/null +++ b/src/api/acl/role.js @@ -0,0 +1,12 @@ +import request from '@/utils/request' + + +export const reqGetRoleList = () => request({ url: `/WRD-admin/sys/role/list`, method: 'get' }); +// 新增角色 +export const reqAddRole = (role) => request({ url: `/WRD-admin/sys/role`, method: 'post', data: role }); +// 修改角色 +export const reqUpdateRole = (role) => request({ url: `/WRD-admin/sys/role`, method: 'put', data: role }); +// 删除角色 +export const reqDeleteRole = (ids) => request({ + url: `/WRD-admin/sys/role`, method: 'delete', data: ids +}); \ No newline at end of file diff --git a/src/api/acl/user.js b/src/api/acl/user.js new file mode 100644 index 0000000..ad39d2a --- /dev/null +++ b/src/api/acl/user.js @@ -0,0 +1,22 @@ +import request from '@/utils/request' + +// 查询用户 +export const reqGetUserList = (queryInfo) => request({ url: `/WRD-admin/sys/user/pageAllUser`, method: 'get', params: queryInfo }) +// 查询用户+技能 +export const reqGetUserPageWithSkills = (queryInfo) => request({ url: `/WRD-admin/sys/user/pageWithSkills`, method: 'get', params: queryInfo }) +// 新增用户 +export const reqAddUser = (user) => request({ url: `/WRD-admin/sys/user`, method: 'post', data: user }) +// 修改用户 +export const reqUpdateUser = (user) => request({ url: `/WRD-admin/sys/user`, method: 'put', data: user }) +// 删除用户 +export const reqDeleteUser = (ids) => request({ + url: `/WRD-admin/sys/user`, method: 'delete', data: ids +}) + +// 修改密码 +export const updatePassword = (dataForm) => request({ + url: '/WRD-admin/sys/user/password', + method: 'put', + data: dataForm +}) + diff --git a/src/api/index.js b/src/api/index.js new file mode 100644 index 0000000..52b5474 --- /dev/null +++ b/src/api/index.js @@ -0,0 +1,15 @@ +import * as select from './select' +import * as user from './acl/user' +import * as role from './acl/role' +import * as permission from './acl/permission' +import * as skilltype from './skill/type' +import * as skilldata from './skill/data' + +export default { + select: select, + user: user, + role: role, + permission: permission, + skilltype: skilltype, + skilldata: skilldata +} diff --git a/src/api/select.js b/src/api/select.js new file mode 100644 index 0000000..96583ab --- /dev/null +++ b/src/api/select.js @@ -0,0 +1,56 @@ +import request from '@/utils/request' + +// 获取部门列表 +export const reqGetDepartments = () => request({ url: `/WRD-admin/sys/dept/list`, method: 'get' }) + +// 获取所有部门 +export const reqGetAllDepartments = () => request({ url: `/WRD-admin/sys/dept/listAll`, method: 'get' }) + +// 获取区域及城市 +export const reqGetRegionAndCity = () => request({ url: `/WRD-admin/sys/user/ReignAndCity`, method: 'get' }) + +// 不带部门 +// export const reqSelectEngiStatus = (year, month, page, limit) => request({ url: `/WRD-admin/sys/workorder/page`, method: 'get', params: { year, month, page, limit } }); + +// 带部门 +// export const reqSelectEngiStatusByDept = (year, month, deptId, page, limit) => request({ url: `/WRD-admin/sys/workorder/pageSelect`, method: 'get', params: { year, month, deptId, page, limit }}) +export const reqSelectEngiStatusByDept = (year, month, deptId, page, limit, gids) => request({ url: `/WRD-admin/sys/workorder/pageSelectV2`, method: 'get', params: { year, month, deptId, page, limit, gids }}) + +// 工程师状态查询 +export const reqSelectEngiStatusByMap = (year, month, page, limit) => request({ url: `/WRD-admin/sys/workorder/pageSelect`, method: 'get', params: { year, month, page, limit }}) + +// 工程师状态添加 +export const reqAddEngiStatus = (statusFormToSend) => request({ url: `/WRD-admin/sys/workorder`, method: 'post', data: statusFormToSend }) +// export const reqAddEngiStatus = (gid, statusId, startTime, endTime, remark) => request({ url: `/WRD-admin/sys/workorder`, method: 'post', data: { gid, statusId, startTime, endTime, remark } }); + +// 工程师工作记录删除 +export const reqDelEngiWorkOrder = (ids) => request({ url: `/WRD-admin/sys/workorder`, method: 'delete', data: ids }) + +// 工程师状态修改 +export const reqEditEngiStatus = (statusFormToSend) => request({ url: `/WRD-admin/sys/workorder`, method: 'put', data: statusFormToSend }) + +// 状态id查询 +// export const reqGetStatusInfo = () => request({url:``, method:'get'}); + +// 全部用户查询 +// export const reqSelectAllUser = (page, limit) => request({ url: `/WRD-admin/sys/user/pageAllUser`, method: 'get', params: { page, limit } }); + +// 全部工程师查询 +export const reqSelectAllEngis = (page, limit) => request({ url: `/WRD-admin/sys/user/page`, method: 'get', params: { page, limit }}) + +// 根据部门查工程师 +export const reqSelectEngisByDept = (page, limit, deptId) => request({ url: `/WRD-admin/sys/user/page`, method: 'get', params: { page, limit, deptId }}) + +// 查询全部项目名称 +export const reqSelectProjectTitle = (projectName) => request({ url: `/WRD-admin/sys/projects/list`, method: 'get', params: { projectName }}) + +// 查询全部成本中心号 +export const reqSelectCostCenter = (costCenter) => request({ url: `/WRD-admin/sys/workorder/listCostCenter`, method: 'get', params: { costCenter }}) + +// 查询全部成本中心号 +export const reqSelectAllCostCenter = () => request({ url: `/WRD-admin/sys/cost/get`, method: 'get' }) + +// 查询各部门工作效率 +export const getDeptEfficiency = (startDate, endDate) => request({ url: `/WRD-admin/sys/workorder/productivity`, method: 'get', params: { startDate, endDate }}) +// 查询各部门工作效率 +export const getDC6WeekAverage = (dates) => request({ url: `/WRD-admin/sys/workorder/productivityAvgOfDC`, method: 'post', data: dates }) diff --git a/src/api/skill/data.js b/src/api/skill/data.js new file mode 100644 index 0000000..f9cf480 --- /dev/null +++ b/src/api/skill/data.js @@ -0,0 +1,18 @@ +import request from '@/utils/request' + +// 带部门查询技能 +export const reqGetSkillList = (limit, page, skilltypeId) => request({ url: `/WRD-admin/sys/skills/page`, method: 'get', params: { limit, page, skilltypeId }}) + +// 查询技能 +// export const reqGetSkillList = () => request({ url: `/WRD-admin/sys/skills/page`, method: 'get' }); + +// 新增技能 +export const reqAddSkill = (skill) => request({ url: `/WRD-admin/sys/skills`, method: 'post', data: skill }) +// 修改技能 +export const reqUpdateSkill = (skill) => request({ url: `/WRD-admin/sys/skills`, method: 'put', data: skill }) + +// 删除技能 +export const reqDeleteSkill = (ids) => request({ url: `/WRD-admin/sys/skills`, method: 'delete', data: ids }) + +// 给用户绑定技能列表 +export const reqUserBindSkills = (skill) => request({ url: `/WRD-admin/sys/skills/userBindSkills`, method: 'post', data: skill }) diff --git a/src/api/skill/type.js b/src/api/skill/type.js new file mode 100644 index 0000000..080a93f --- /dev/null +++ b/src/api/skill/type.js @@ -0,0 +1,16 @@ +import request from '@/utils/request' + +// 查询技能种类 +export const reqGetSkillTypeList = () => request({ url: `/WRD-admin/sys/skilltype/list`, method: 'get' }) +// 查询技能列表 +export const reqGetSkillTypeWithLabels = () => request({ url: `/WRD-admin/sys/skilltype/typewithlabels`, method: 'get' }) +// 根据userid获取技能种类以及技能列表 +export const reqGetSkillByUser = (userId) => request({ url: `/WRD-admin/sys/skilltype/getSkillsByUserId/${userId}`, method: 'get' }) +// 新增技能种类 +export const reqAddSkillType = (skillType) => request({ url: `/WRD-admin/sys/skilltype`, method: 'post', data: skillType }) +// 修改技能种类 +export const reqUpdateSkillType = (skillType) => request({ url: `/WRD-admin/sys/skilltype`, method: 'put', data: skillType }) +// 删除技能种类 +export const reqDeleteSkillType = (ids) => request({ + url: `/WRD-admin/sys/skilltype`, method: 'delete', data: ids +}) diff --git a/src/api/table.js b/src/api/table.js new file mode 100644 index 0000000..2752f52 --- /dev/null +++ b/src/api/table.js @@ -0,0 +1,9 @@ +import request from '@/utils/request' + +export function getList(params) { + return request({ + url: '/vue-admin-template/table/list', + method: 'get', + params + }) +} diff --git a/src/api/user.js b/src/api/user.js new file mode 100644 index 0000000..130f396 --- /dev/null +++ b/src/api/user.js @@ -0,0 +1,43 @@ +import request from '@/utils/request' + +export function login(data) { + return request({ + // url: '/WRD-admin/loginWithoutcaptcha', + url: '/WRD-admin/login', + method: 'post', + data + }) +} + +// ONEID登录功能（通过code获取对应的用户token） +export function getOneIdToken(param) { + return request({ + // 本地测试接口 + // url: '/WRD-admin/oneIDLocalLogin', + // 线上正式接口 + url: '/WRD-admin/oneIDLogin', + method: 'get', + params: { param } + }) +} + +export function getInfo() { + return request({ + url: '/WRD-admin/sys/user/info', + method: 'get' + }) +} + +export function getUserPermission() { + return request({ + url: '/WRD-admin/sys/menu/permissions', + method: 'get' + }) +} + +export function logout() { + return request({ + url: '/WRD-admin/logout', + method: 'post' + }) +} diff --git a/src/assets/404_images/404.png b/src/assets/404_images/404.png new file mode 100644 index 0000000..3d8e230 Binary files /dev/null and b/src/assets/404_images/404.png differ diff --git a/src/assets/404_images/404_cloud.png b/src/assets/404_images/404_cloud.png new file mode 100644 index 0000000..c6281d0 Binary files /dev/null and b/src/assets/404_images/404_cloud.png differ diff --git a/src/assets/FirstPage.png b/src/assets/FirstPage.png new file mode 100644 index 0000000..b35853a Binary files /dev/null and b/src/assets/FirstPage.png differ diff --git a/src/assets/Siemens-logo.png b/src/assets/Siemens-logo.png new file mode 100644 index 0000000..10a188c Binary files /dev/null and b/src/assets/Siemens-logo.png differ diff --git a/src/assets/dashboard-background.png b/src/assets/dashboard-background.png new file mode 100644 index 0000000..cd2fc67 Binary files /dev/null and b/src/assets/dashboard-background.png differ diff --git a/src/assets/nav_images/1.png b/src/assets/nav_images/1.png new file mode 100644 index 0000000..58b46a5 Binary files /dev/null and b/src/assets/nav_images/1.png differ diff --git a/src/assets/nav_images/2.jpg b/src/assets/nav_images/2.jpg new file mode 100644 index 0000000..e16d1bc Binary files /dev/null and b/src/assets/nav_images/2.jpg differ diff --git a/src/assets/nav_images/3.jpg b/src/assets/nav_images/3.jpg new file mode 100644 index 0000000..cb31738 Binary files /dev/null and b/src/assets/nav_images/3.jpg differ diff --git a/src/assets/nav_images/test.png b/src/assets/nav_images/test.png new file mode 100644 index 0000000..f4f4e5e Binary files /dev/null and b/src/assets/nav_images/test.png differ diff --git a/src/assets/siemens/APIWorldProductConcept_original.jpg b/src/assets/siemens/APIWorldProductConcept_original.jpg new file mode 100644 index 0000000..a80aa43 Binary files /dev/null and b/src/assets/siemens/APIWorldProductConcept_original.jpg differ diff --git a/src/assets/siemens/GettyImages-1039159346_original.jpg b/src/assets/siemens/GettyImages-1039159346_original.jpg new file mode 100644 index 0000000..d740cd8 Binary files /dev/null and b/src/assets/siemens/GettyImages-1039159346_original.jpg differ diff --git a/src/assets/siemens/GettyImages-1059868276_original.jpg b/src/assets/siemens/GettyImages-1059868276_original.jpg new file mode 100644 index 0000000..91cf0e9 Binary files /dev/null and b/src/assets/siemens/GettyImages-1059868276_original.jpg differ diff --git a/src/assets/siemens/GettyImages-1337590442-retouch221215-cmyk_original.jpg b/src/assets/siemens/GettyImages-1337590442-retouch221215-cmyk_original.jpg new file mode 100644 index 0000000..95b295b Binary files /dev/null and b/src/assets/siemens/GettyImages-1337590442-retouch221215-cmyk_original.jpg differ diff --git a/src/assets/siemens/SIE-Brand-Campaign-LP-Cases-DA-AI-2_original.jpg b/src/assets/siemens/SIE-Brand-Campaign-LP-Cases-DA-AI-2_original.jpg new file mode 100644 index 0000000..4e1b860 Binary files /dev/null and b/src/assets/siemens/SIE-Brand-Campaign-LP-Cases-DA-AI-2_original.jpg differ diff --git a/src/assets/siemens/SIEM-XCEL-20768-4c_original.tif b/src/assets/siemens/SIEM-XCEL-20768-4c_original.tif new file mode 100644 index 0000000..ceccc0a Binary files /dev/null and b/src/assets/siemens/SIEM-XCEL-20768-4c_original.tif differ diff --git a/src/assets/siemens/Siemens-Logo.jpg b/src/assets/siemens/Siemens-Logo.jpg new file mode 100644 index 0000000..1e88d44 Binary files /dev/null and b/src/assets/siemens/Siemens-Logo.jpg differ diff --git a/src/assets/siemens/Siemens-logo.png b/src/assets/siemens/Siemens-logo.png new file mode 100644 index 0000000..10a188c Binary files /dev/null and b/src/assets/siemens/Siemens-logo.png differ diff --git a/src/assets/siemens/dashboard.jpg b/src/assets/siemens/dashboard.jpg new file mode 100644 index 0000000..69eaa56 Binary files /dev/null and b/src/assets/siemens/dashboard.jpg differ diff --git a/src/assets/siemens/hannovermessen2024_original.jpeg b/src/assets/siemens/hannovermessen2024_original.jpeg new file mode 100644 index 0000000..b0f26de Binary files /dev/null and b/src/assets/siemens/hannovermessen2024_original.jpeg differ diff --git a/src/assets/siemens/shutterstock-1936499776_medium.jpeg b/src/assets/siemens/shutterstock-1936499776_medium.jpeg new file mode 100644 index 0000000..a7e82fb Binary files /dev/null and b/src/assets/siemens/shutterstock-1936499776_medium.jpeg differ diff --git a/src/assets/siemens/shutterstock-349161821-bearb-ret-cmyk_original.tif b/src/assets/siemens/shutterstock-349161821-bearb-ret-cmyk_original.tif new file mode 100644 index 0000000..07db48e Binary files /dev/null and b/src/assets/siemens/shutterstock-349161821-bearb-ret-cmyk_original.tif differ diff --git a/src/assets/siemens/skill.jpeg b/src/assets/siemens/skill.jpeg new file mode 100644 index 0000000..d334836 Binary files /dev/null and b/src/assets/siemens/skill.jpeg differ diff --git a/src/assets/siemens/task.jpg b/src/assets/siemens/task.jpg new file mode 100644 index 0000000..26626a4 Binary files /dev/null and b/src/assets/siemens/task.jpg differ diff --git a/src/assets/siemens/user.jpeg b/src/assets/siemens/user.jpeg new file mode 100644 index 0000000..2b931a7 Binary files /dev/null and b/src/assets/siemens/user.jpeg differ diff --git a/src/assets/siemens_logo/demo.css b/src/assets/siemens_logo/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/siemens_logo/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/src/assets/siemens_logo/demo_index.html b/src/assets/siemens_logo/demo_index.html new file mode 100644 index 0000000..dc56085 --- /dev/null +++ b/src/assets/siemens_logo/demo_index.html @@ -0,0 +1,234 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    siemens-copy
    +
    &#xe61f;
    +
    • + +
  • + +
    siemens
    +
    &#xe61e;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1657537679726') format('woff2'),
+       url('iconfont.woff?t=1657537679726') format('woff'),
+       url('iconfont.ttf?t=1657537679726') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + siemens-copy +
    +
    .icon-siemens-copy +
    +
    • + +
  • + +
    + siemens +
    +
    .icon-siemens +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    siemens-copy
    +
    #icon-siemens-copy
    +
    • + +
  • + +
    siemens
    +
    #icon-siemens
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/assets/siemens_logo/iconfont.css b/src/assets/siemens_logo/iconfont.css new file mode 100644 index 0000000..6609621 --- /dev/null +++ b/src/assets/siemens_logo/iconfont.css @@ -0,0 +1,23 @@ +@font-face { + font-family: "iconfont"; /* Project id 3514722 */ + src: url('iconfont.woff2?t=1657537679726') format('woff2'), + url('iconfont.woff?t=1657537679726') format('woff'), + url('iconfont.ttf?t=1657537679726') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-siemens-copy:before { + content: "\e61f"; +} + +.icon-siemens:before { + content: "\e61e"; +} + diff --git a/src/assets/siemens_logo/iconfont.js b/src/assets/siemens_logo/iconfont.js new file mode 100644 index 0000000..ff1daf3 --- /dev/null +++ b/src/assets/siemens_logo/iconfont.js @@ -0,0 +1 @@ +!function(a){var t,h,v,l,e,c='',f=(f=document.getElementsByTagName("script"))[f.length-1].getAttribute("data-injectcss"),i=function(a,t){t.parentNode.insertBefore(a,t)};if(f&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function n(){e||(e=!0,v())}function d(){try{l.documentElement.doScroll("left")}catch(a){return void setTimeout(d,50)}n()}t=function(){var a,t=document.createElement("div");t.innerHTML=c,c=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(a=document.body).firstChild?i(t,a.firstChild):a.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),t()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(v=t,l=a.document,e=!1,d(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,n())})}(window); \ No newline at end of file diff --git a/src/assets/siemens_logo/iconfont.json b/src/assets/siemens_logo/iconfont.json new file mode 100644 index 0000000..9cdfa75 --- /dev/null +++ b/src/assets/siemens_logo/iconfont.json @@ -0,0 +1,23 @@ +{ + "id": "3514722", + "name": "test", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "30504009", + "name": "siemens-copy", + "font_class": "siemens-copy", + "unicode": "e61f", + "unicode_decimal": 58911 + }, + { + "icon_id": "9848151", + "name": "siemens", + "font_class": "siemens", + "unicode": "e61e", + "unicode_decimal": 58910 + } + ] +} diff --git a/src/assets/siemens_logo/iconfont.ttf b/src/assets/siemens_logo/iconfont.ttf new file mode 100644 index 0000000..58652e9 Binary files /dev/null and b/src/assets/siemens_logo/iconfont.ttf differ diff --git a/src/assets/siemens_logo/iconfont.woff b/src/assets/siemens_logo/iconfont.woff new file mode 100644 index 0000000..8e0b435 Binary files /dev/null and b/src/assets/siemens_logo/iconfont.woff differ diff --git a/src/assets/siemens_logo/iconfont.woff2 b/src/assets/siemens_logo/iconfont.woff2 new file mode 100644 index 0000000..bcc1af5 Binary files /dev/null and b/src/assets/siemens_logo/iconfont.woff2 differ diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue new file mode 100644 index 0000000..a3d5a12 --- /dev/null +++ b/src/components/Breadcrumb/index.vue @@ -0,0 +1,82 @@ + + + + + diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue new file mode 100644 index 0000000..b140eff --- /dev/null +++ b/src/components/Hamburger/index.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue new file mode 100644 index 0000000..b07ded2 --- /dev/null +++ b/src/components/SvgIcon/index.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/src/icons/index.js b/src/icons/index.js new file mode 100644 index 0000000..2c6b309 --- /dev/null +++ b/src/icons/index.js @@ -0,0 +1,9 @@ +import Vue from 'vue' +import SvgIcon from '@/components/SvgIcon'// svg component + +// register globally +Vue.component('svg-icon', SvgIcon) + +const req = require.context('./svg', false, /\.svg$/) +const requireAll = requireContext => requireContext.keys().map(requireContext) +requireAll(req) diff --git a/src/icons/svg/dashboard.svg b/src/icons/svg/dashboard.svg new file mode 100644 index 0000000..5317d37 --- /dev/null +++ b/src/icons/svg/dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/example.svg b/src/icons/svg/example.svg new file mode 100644 index 0000000..46f42b5 --- /dev/null +++ b/src/icons/svg/example.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/eye-open.svg b/src/icons/svg/eye-open.svg new file mode 100644 index 0000000..88dcc98 --- /dev/null +++ b/src/icons/svg/eye-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/eye.svg b/src/icons/svg/eye.svg new file mode 100644 index 0000000..16ed2d8 --- /dev/null +++ b/src/icons/svg/eye.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/form.svg b/src/icons/svg/form.svg new file mode 100644 index 0000000..dcbaa18 --- /dev/null +++ b/src/icons/svg/form.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/link.svg b/src/icons/svg/link.svg new file mode 100644 index 0000000..48197ba --- /dev/null +++ b/src/icons/svg/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/nested.svg b/src/icons/svg/nested.svg new file mode 100644 index 0000000..06713a8 --- /dev/null +++ b/src/icons/svg/nested.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/password.svg b/src/icons/svg/password.svg new file mode 100644 index 0000000..e291d85 --- /dev/null +++ b/src/icons/svg/password.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/table.svg b/src/icons/svg/table.svg new file mode 100644 index 0000000..0e3dc9d --- /dev/null +++ b/src/icons/svg/table.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/tree.svg b/src/icons/svg/tree.svg new file mode 100644 index 0000000..dd4b7dd --- /dev/null +++ b/src/icons/svg/tree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/user.svg b/src/icons/svg/user.svg new file mode 100644 index 0000000..0ba0716 --- /dev/null +++ b/src/icons/svg/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svgo.yml b/src/icons/svgo.yml new file mode 100644 index 0000000..d11906a --- /dev/null +++ b/src/icons/svgo.yml @@ -0,0 +1,22 @@ +# replace default config + +# multipass: true +# full: true + +plugins: + + # - name + # + # or: + # - name: false + # - name: true + # + # or: + # - name: + # param1: 1 + # param2: 2 + +- removeAttrs: + attrs: + - 'fill' + - 'fill-rule' diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue new file mode 100644 index 0000000..42e3608 --- /dev/null +++ b/src/layout/components/AppMain.vue @@ -0,0 +1,40 @@ + + + + + + + diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue new file mode 100644 index 0000000..2152dd3 --- /dev/null +++ b/src/layout/components/Navbar.vue @@ -0,0 +1,200 @@ + + + + + diff --git a/src/layout/components/Sidebar/FixiOSBug.js b/src/layout/components/Sidebar/FixiOSBug.js new file mode 100644 index 0000000..bc14856 --- /dev/null +++ b/src/layout/components/Sidebar/FixiOSBug.js @@ -0,0 +1,26 @@ +export default { + computed: { + device() { + return this.$store.state.app.device + } + }, + mounted() { + // In order to fix the click on menu on the ios device will trigger the mouseleave bug + // https://github.com/PanJiaChen/vue-element-admin/issues/1135 + this.fixBugIniOS() + }, + methods: { + fixBugIniOS() { + const $subMenu = this.$refs.subMenu + if ($subMenu) { + const handleMouseleave = $subMenu.handleMouseleave + $subMenu.handleMouseleave = (e) => { + if (this.device === 'mobile') { + return + } + handleMouseleave(e) + } + } + } + } +} diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue new file mode 100644 index 0000000..aa1f5da --- /dev/null +++ b/src/layout/components/Sidebar/Item.vue @@ -0,0 +1,41 @@ + + + diff --git a/src/layout/components/Sidebar/Link.vue b/src/layout/components/Sidebar/Link.vue new file mode 100644 index 0000000..530b3d5 --- /dev/null +++ b/src/layout/components/Sidebar/Link.vue @@ -0,0 +1,43 @@ + + + diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue new file mode 100644 index 0000000..97ed2ad --- /dev/null +++ b/src/layout/components/Sidebar/Logo.vue @@ -0,0 +1,116 @@ + + + + + diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue new file mode 100644 index 0000000..0f5b28d --- /dev/null +++ b/src/layout/components/Sidebar/SidebarItem.vue @@ -0,0 +1,116 @@ + + + diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue new file mode 100644 index 0000000..b4f8995 --- /dev/null +++ b/src/layout/components/Sidebar/index.vue @@ -0,0 +1,59 @@ + + + diff --git a/src/layout/components/index.js b/src/layout/components/index.js new file mode 100644 index 0000000..97ee3cd --- /dev/null +++ b/src/layout/components/index.js @@ -0,0 +1,3 @@ +export { default as Navbar } from './Navbar' +export { default as Sidebar } from './Sidebar' +export { default as AppMain } from './AppMain' diff --git a/src/layout/index.vue b/src/layout/index.vue new file mode 100644 index 0000000..db22a7b --- /dev/null +++ b/src/layout/index.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/layout/mixin/ResizeHandler.js b/src/layout/mixin/ResizeHandler.js new file mode 100644 index 0000000..e8d0df8 --- /dev/null +++ b/src/layout/mixin/ResizeHandler.js @@ -0,0 +1,45 @@ +import store from '@/store' + +const { body } = document +const WIDTH = 992 // refer to Bootstrap's responsive design + +export default { + watch: { + $route(route) { + if (this.device === 'mobile' && this.sidebar.opened) { + store.dispatch('app/closeSideBar', { withoutAnimation: false }) + } + } + }, + beforeMount() { + window.addEventListener('resize', this.$_resizeHandler) + }, + beforeDestroy() { + window.removeEventListener('resize', this.$_resizeHandler) + }, + mounted() { + const isMobile = this.$_isMobile() + if (isMobile) { + store.dispatch('app/toggleDevice', 'mobile') + store.dispatch('app/closeSideBar', { withoutAnimation: true }) + } + }, + methods: { + // use $_ for mixins properties + // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential + $_isMobile() { + const rect = body.getBoundingClientRect() + return rect.width - 1 < WIDTH + }, + $_resizeHandler() { + if (!document.hidden) { + const isMobile = this.$_isMobile() + store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop') + + if (isMobile) { + store.dispatch('app/closeSideBar', { withoutAnimation: true }) + } + } + } + } +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..4d8b9c0 --- /dev/null +++ b/src/main.js @@ -0,0 +1,51 @@ +import Vue from 'vue' + +import 'normalize.css/normalize.css' // A modern alternative to CSS resets + +import ElementUI from 'element-ui' +import 'element-ui/lib/theme-chalk/index.css' +import locale from 'element-ui/lib/locale/lang/en' // lang i18n + +import '@/styles/index.scss' // global css + +import App from './App' +import store from './store' +import router from './router' + +import Plugin from 'v-fit-columns' +Vue.use(Plugin) + +import '@/icons' // icon +import '@/permission' // permission control + +import { Message } from 'element-ui' +// Vue.use(Message); +// Vue.use(ElementUI) +/** + * If you don't want to use mock-server + * you want to use MockJs for mock api + * you can execute: mockXHR() + * + * Currently MockJs will be used in the production environment, + * please remove it before going online ! ! ! + */ +if (process.env.NODE_ENV === 'production') { + const { mockXHR } = require('../mock') + mockXHR() +} + +// set ElementUI lang to EN +Vue.use(ElementUI, { locale }) +// Vue.use(ElementUI) + +Vue.config.productionTip = false + +import API from '@/api' +Vue.prototype.$API = API + +new Vue({ + el: '#app', + router, + store, + render: h => h(App) +}) diff --git a/src/permission.js b/src/permission.js new file mode 100644 index 0000000..6edb396 --- /dev/null +++ b/src/permission.js @@ -0,0 +1,87 @@ +import router, { constantRoutes } from './router' +import store from './store' +import { Message } from 'element-ui' +import NProgress from 'nprogress' // progress bar +import 'nprogress/nprogress.css' // progress bar style +import { getToken } from '@/utils/auth' // get token from cookie +import getPageTitle from '@/utils/get-page-title' + +NProgress.configure({ showSpinner: false }) // NProgress Configuration + +const whiteList = ['/login', '/callback'] // no redirect whitelist + +router.beforeEach(async(to, from, next) => { + // start progress bar + NProgress.start() + + // set page title + document.title = getPageTitle(to.meta.title) + + // determine whether the user has logged in + const hasToken = getToken() + + // 检查当前环境 + const isDevelopment = process.env.NODE_ENV === 'development' + const isProduction = process.env.NODE_ENV === 'production' + + // 根据环境启用或禁用某些代码 + // 开发环境不启用ONEID + if (isDevelopment) { + console.log('开发环境，启用某些代码') + // 启用某些代码 + } else if (isProduction) { + console.log('生产环境，禁用某些代码') + // 禁用某些代码 + } + + if (hasToken) { + if (to.path === '/login' || to.path === '/callback') { + // if is logged in, redirect to the home page + next({ path: '/nav' }) + NProgress.done() + } else { + const hasGetUserInfo = store.getters.name + if (hasGetUserInfo) { + next() + } else { + try { + // get user info + await store.dispatch('user/getInfo') + await store.dispatch('user/getUserPermission') + next({ ...to, replace: true }) + } catch (error) { + // remove token and go to login page to re-login + await store.dispatch('user/resetToken') + Message.error(error || 'Has Error') + if (isDevelopment) { + next(`/login?redirect=${to.path}`) + NProgress.done() + } else { + window.location.href = '' + } + } + } + } + } else { + /* has no token*/ + if (whiteList.indexOf(to.path) !== -1) { + // in the free login whitelist, go directly + next() + } else { + // other pages that do not have permission to access are redirected to the login page. + if (isDevelopment) { + next(`/login?redirect=${to.path}`) + } else { + window.location.href = 'https://api.oneid.siemens.com.cn/api/bff/v1.2/developer/ciam/oauth/authorize?client_id=1b867769c8cb221fb7fdb0f8beba6138TwXkI4mX8um&response_type=code&redirect_uri=http://csdc.siemens.com.cn:8001/callback&scope=openid%20phone' + // window.location.href = 'https://api.oneid.siemens.com.cn/api/bff/v1.2/developer/ciam/oauth/authorize?client_id=1b867769c8cb221fb7fdb0f8beba6138TwXkI4mX8um&response_type=code&redirect_uri=http://localhost:9528/callback&scope=openid%20phone' + } + NProgress.done() + } + } +}) + +router.afterEach(() => { + // finish progress bar + NProgress.done() +}) + diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..282c887 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,199 @@ +import Vue from 'vue' +import Router from 'vue-router' + +Vue.use(Router) + +/* Layout */ +import Layout from '@/layout' + +export const constantRoutes = [ + { + path: '/login', + name: 'Login', + component: () => import('@/views/login/index'), + title: '登录', + hidden: true + }, + { + path: '/callback', + name: 'Callback', + component: () => import('@/views/callback/index'), + title: '回调', + hidden: true + }, + { + path: '/404', + name: '404', + component: () => import('@/views/404'), + title: '错误页面', + hidden: true + }, + { + path: '/', + component: Layout, + name: 'Dashboard', + redirect: '/dashboard', + tag: '工时统计', + backgroundImage: require('@/assets/siemens/dashboard.jpg'), + description: '页面显示DC各个团队的本周及未来几周的工作负荷曲线', + children: [{ + path: 'dashboard', + name: 'Dashboard', + component: () => import('@/views/dashboard'), + meta: { title: '统计', icon: 'dashboard' } + }] + }, + { + path: '/user', + component: Layout, + name: 'PersonalPassword', + redirect: '/user/personalPassword', + tag: '个人信息', + children: [{ + path: 'personalPassword', + name: 'PersonalPassword', + component: () => import('@/views/personalPassword'), + meta: { title: '个人信息', icon: 'dashboard' }, + hidden: true + }] + }, + { + path: '/nav', + name: 'Nav', + tag: '导航页面', + component: () => import('@/views/nav/nav2.vue'), + hidden: true + } + // { + // path: '/history', + // component: Layout, + // name: 'History', + // redirect: '/history/orderHist', + // tag: '预约历史查询', + // backgroundImage: require('@/assets/siemens/task.jpg'), + // description: '查看已预约历史', + // children: [{ + // path: 'orderHist', + // name: 'OrderHist', + // component: () => import('@/views/orderHist'), + // meta: { title: '预约单查询', icon: 'el-icon-s-custom' } + // }] + // } +] + +export const asyncRoutes = [ + { + path: '/enginner', + component: Layout, + name: 'Record', + redirect: '/enginner/record', + tag: '工程师派工', + backgroundImage: require('@/assets/siemens/task.jpg'), + description: 'BD、工程师及主管可以在此登记本周的工作和未来的工作计划，同时还可以根据技能标签查找对应的工程师资源', + children: [{ + path: 'record', + name: 'Record', + component: () => import('@/views/record'), + meta: { title: '工程师派工', icon: 'el-icon-s-custom' } + }] + }, + { + path: '/skill', + name: 'Skill', + component: Layout, + redirect: '/skill/match', + meta: { + title: '工程师技能', + icon: 'el-icon-reading' + }, + tag: '技能匹配', + backgroundImage: require('@/assets/siemens/skill.jpeg'), + description: '工程师及主管可以在此进行维护工程师的能力标签', + children: [ + { + path: 'type', + name: 'SkillType', + component: () => import('@/views/skill/datatype'), + meta: { + title: '技能种类管理', + icon: 'el-icon-tickets' + } + }, + { + path: 'manage', + name: 'Management', + component: () => import('@/views/skill/datamanage'), + meta: { + title: '技能库管理', + icon: 'el-icon-document' + } + }, + { + path: 'match', + name: 'Matching', + component: () => import('@/views/skill/datamatch'), + meta: { + title: '技能匹配', + icon: 'el-icon-document-add' + } + } + ] + }, + { + path: '/acl', + name: 'Acl', + component: Layout, + redirect: '/acl/user', + tag: '用户管理', + backgroundImage: require('@/assets/siemens/user.jpeg'), + description: '工程师主管和管理员可以在此维护用户基本信息', + meta: { + title: '用户管理', + icon: 'el-icon-lock' + }, + children: [ + { + name: 'User', + path: 'user', + component: () => import('@/views/acl/user'), + meta: { + title: '用户' + } + }, + { + name: 'Role', + path: 'role', + component: () => import('@/views/acl/role'), + meta: { + title: '角色' + } + }, + { + name: 'Permission', + path: 'permission', + component: () => import('@/views/acl/permission'), + meta: { + title: '权限' + } + } + ] + } +] + +export const anyRoutes = { path: '*', redirect: '/404', hidden: true } + +const createRouter = () => new Router({ + mode: 'history', + scrollBehavior: () => ({ y: 0 }), + routes: constantRoutes +}) + +const router = createRouter() + +// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 +export function resetRouter() { + const newRouter = createRouter() + router.matcher = newRouter.matcher // reset router +} + +export default router diff --git a/src/settings.js b/src/settings.js new file mode 100644 index 0000000..8dabdb2 --- /dev/null +++ b/src/settings.js @@ -0,0 +1,16 @@ +module.exports = { + + title: 'Engineer Status Transparency', + + /** + * @type {boolean} true | false + * @description Whether fix the header + */ + fixedHeader: true, + + /** + * @type {boolean} true | false + * @description Whether show the logo in sidebar + */ + sidebarLogo: true +} diff --git a/src/store/getters.js b/src/store/getters.js new file mode 100644 index 0000000..27aaac2 --- /dev/null +++ b/src/store/getters.js @@ -0,0 +1,20 @@ +const getters = { + sidebar: state => state.app.sidebar, + device: state => state.app.device, + token: state => state.user.token, + avatar: state => state.user.avatar, + name: state => state.user.name, + permissions: state => state.user.permissions, + gid: state => state.user.gid, + employeeNo: state => state.user.employeeNo, + createTime: state => state.user.createTime, + deptName: state => state.user.deptName, + deptId: state => state.user.deptId, + roleId: state => state.user.roleId, + phone: state => state.user.phone, + email: state => state.user.email, + rankpo: state => state.user.rankpo, + workPlace: state => state.user.workPlace, + +} +export default getters diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..6be466a --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,19 @@ +import Vue from 'vue' +import Vuex from 'vuex' +import getters from './getters' +import app from './modules/app' +import settings from './modules/settings' +import user from './modules/user' + +Vue.use(Vuex) + +const store = new Vuex.Store({ + modules: { + app, + settings, + user + }, + getters +}) + +export default store diff --git a/src/store/modules/app.js b/src/store/modules/app.js new file mode 100644 index 0000000..7ea7e33 --- /dev/null +++ b/src/store/modules/app.js @@ -0,0 +1,48 @@ +import Cookies from 'js-cookie' + +const state = { + sidebar: { + opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, + withoutAnimation: false + }, + device: 'desktop' +} + +const mutations = { + TOGGLE_SIDEBAR: state => { + state.sidebar.opened = !state.sidebar.opened + state.sidebar.withoutAnimation = false + if (state.sidebar.opened) { + Cookies.set('sidebarStatus', 1) + } else { + Cookies.set('sidebarStatus', 0) + } + }, + CLOSE_SIDEBAR: (state, withoutAnimation) => { + Cookies.set('sidebarStatus', 0) + state.sidebar.opened = false + state.sidebar.withoutAnimation = withoutAnimation + }, + TOGGLE_DEVICE: (state, device) => { + state.device = device + } +} + +const actions = { + toggleSideBar({ commit }) { + commit('TOGGLE_SIDEBAR') + }, + closeSideBar({ commit }, { withoutAnimation }) { + commit('CLOSE_SIDEBAR', withoutAnimation) + }, + toggleDevice({ commit }, device) { + commit('TOGGLE_DEVICE', device) + } +} + +export default { + namespaced: true, + state, + mutations, + actions +} diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js new file mode 100644 index 0000000..b3f33f8 --- /dev/null +++ b/src/store/modules/settings.js @@ -0,0 +1,32 @@ +import defaultSettings from '@/settings' + +const { showSettings, fixedHeader, sidebarLogo } = defaultSettings + +const state = { + showSettings: showSettings, + fixedHeader: fixedHeader, + sidebarLogo: sidebarLogo +} + +const mutations = { + CHANGE_SETTING: (state, { key, value }) => { + // eslint-disable-next-line no-prototype-builtins + if (state.hasOwnProperty(key)) { + state[key] = value + } + } +} + +const actions = { + changeSetting({ commit }, data) { + commit('CHANGE_SETTING', data) + } +} + +export default { + namespaced: true, + state, + mutations, + actions +} + diff --git a/src/store/modules/user.js b/src/store/modules/user.js new file mode 100644 index 0000000..5f8eda8 --- /dev/null +++ b/src/store/modules/user.js @@ -0,0 +1,173 @@ +import { login, logout, getInfo, getUserPermission } from '@/api/user' +import { getToken, setToken, removeToken } from '@/utils/auth' +import { anyRoutes, resetRouter, asyncRoutes, constantRoutes } from '@/router' +import router from '@/router' +import cloneDeep from 'lodash/cloneDeep' + +const getDefaultState = () => { + return { + token: getToken(), + // 用户基本信息 + name: '', + avatar: '', + realName: '', + employeeNo: 0, + createTime: '', + deptName: '', + deptId: 0, + roleId: 0, + gid: '', + phone: '', + email: '', + rankpo: '', + workPlace: '', + permissions: [], + + resultAsyncRoutes: [], + resultAllRoutes: [] + } +} + +const state = getDefaultState() + +const mutations = { + RESET_STATE: (state) => { + Object.assign(state, getDefaultState()) + }, + SET_TOKEN: (state, token) => { + state.token = token + }, + SET_USERINFO: (state, userInfo) => { + state.name = userInfo.realName + state.employeeNo = userInfo.employeeNo + state.createTime = userInfo.createTime + state.deptName = userInfo.deptName + state.deptId = userInfo.deptId + state.roleId = userInfo.roleIdOnly + state.gid = userInfo.gid + state.phone = userInfo.phone + state.email = userInfo.email + state.rankpo = userInfo.rankpo + state.workPlace = userInfo.workPlace + }, + // 存储用户的菜单+按钮权限信息 + SET_PERMISSIONS: (state, permissions) => { + state.permissions = permissions + }, + // 计算用户拥有的异步路由 + SET_RESULTASYNCROUTES: (state, asyncRoutes) => { + state.resultAsyncRoutes = asyncRoutes + state.resultAllRoutes = constantRoutes.concat(state.resultAsyncRoutes) //, anyRoutes) + router.addRoutes(state.resultAllRoutes) + } +} + +const computedAsyncRoutes = (asyncRoutes, routes) => { + return asyncRoutes.filter(item => { + if (routes.indexOf(item.name) !== -1) { + if (item.children && item.children.length) { + item.children = computedAsyncRoutes(item.children, routes) + } + return true + } + }) +} + +const actions = { + // user login + login({ commit }, loginForm) { + const { gid, password, captcha, uuid } = loginForm + return new Promise((resolve, reject) => { + login({ gid: gid.trim(), password: password, captcha: captcha, uuid: uuid }).then(response => { + const { data } = response + commit('SET_TOKEN', data.token) + setToken(data.token) + resolve() + }).catch(error => { + reject(error) + }) + }) + }, + + // get user info + getInfo({ commit, state }) { + return new Promise((resolve, reject) => { + getInfo().then(response => { + const { data: userInfo } = response + + if (!userInfo) { + return reject('Verification failed, please Login again.') + } + // const { realName: name, avatar } = data + + // commit('SET_NAME', name) + // commit('SET_AVATAR', avatar) + // console.log(userInfo) + commit('SET_USERINFO', userInfo) + resolve(userInfo) + }).catch(error => { + reject(error) + }) + }) + }, + // get user permission + getUserPermission({ commit, state }) { + return new Promise((resolve, reject) => { + getUserPermission().then(response => { + const { data: permissions } = response + + if (!permissions) { + return reject('Verification failed, please Login again.') + } + console.log(permissions) + commit('SET_PERMISSIONS', permissions) + commit('SET_RESULTASYNCROUTES', computedAsyncRoutes(cloneDeep(asyncRoutes), permissions)) + resolve(permissions) + }).catch(error => { + reject(error) + }) + }) + }, + + // user logout + logout({ commit, state }) { + return new Promise((resolve, reject) => { + logout(state.token).then(() => { + removeToken() // must remove token first + resetRouter() + commit('RESET_STATE') + resolve() + }).catch(error => { + reject(error) + }) + }) + }, + + // set token + commitToken({ commit }, token) { + return new Promise(resolve => { + commit('SET_TOKEN', token) + setToken(token) + const data = getToken() + console.log(data) + resolve() + }) + }, + + // remove token + resetToken({ commit }) { + return new Promise(resolve => { + removeToken() // must remove token first + commit('RESET_STATE') + resolve() + }) + } +} + +export default { + namespaced: true, + state, + mutations, + actions +} + diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss new file mode 100644 index 0000000..0062411 --- /dev/null +++ b/src/styles/element-ui.scss @@ -0,0 +1,49 @@ +// cover some element-ui styles + +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + font-weight: 400 !important; +} + +.el-upload { + input[type="file"] { + display: none !important; + } +} + +.el-upload__input { + display: none; +} + + +// to fixed https://github.com/ElemeFE/element/issues/2461 +.el-dialog { + transform: none; + left: 0; + position: relative; + margin: 0 auto; +} + +// refine element ui upload +.upload-container { + .el-upload { + width: 100%; + + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} + +// dropdown +.el-dropdown-menu { + a { + display: block + } +} + +// to fix el-date-picker css style +.el-range-separator { + box-sizing: content-box; +} diff --git a/src/styles/index.scss b/src/styles/index.scss new file mode 100644 index 0000000..3b4da51 --- /dev/null +++ b/src/styles/index.scss @@ -0,0 +1,65 @@ +@import './variables.scss'; +@import './mixin.scss'; +@import './transition.scss'; +@import './element-ui.scss'; +@import './sidebar.scss'; + +body { + height: 100%; + -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; +} + +label { + font-weight: 700; +} + +html { + height: 100%; + box-sizing: border-box; +} + +#app { + height: 100%; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +a:focus, +a:active { + outline: none; +} + +a, +a:focus, +a:hover { + cursor: pointer; + color: inherit; + text-decoration: none; +} + +div:focus { + outline: none; +} + +.clearfix { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +} + +// main-container global css +.app-container { + padding: 20px; +} diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss new file mode 100644 index 0000000..36b74bb --- /dev/null +++ b/src/styles/mixin.scss @@ -0,0 +1,28 @@ +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +@mixin scrollBar { + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } +} + +@mixin relative { + position: relative; + width: 100%; + height: 100%; +} diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss new file mode 100644 index 0000000..10fdf18 --- /dev/null +++ b/src/styles/sidebar.scss @@ -0,0 +1,251 @@ +#app { + + .main-container { + min-height: 100%; + transition: margin-left .28s; + margin-left: $sideBarWidth; + position: relative; + } + + .sidebar-container { + transition: width 0.28s; + width: $sideBarWidth !important; + // background-color: $menuBg; + background: linear-gradient(#00032b 0%, #009092 100%); + height: 100%; + position: fixed; + font-size: 0px; + top: 0; + bottom: 0; + left: 0; + z-index: 1001; + overflow: hidden; + + // reset element-ui css + .horizontal-collapse-transition { + transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + } + + .scrollbar-wrapper { + overflow-x: hidden !important; + } + + .el-scrollbar__bar.is-vertical { + right: 0px; + } + + .el-scrollbar { + height: 100%; + } + + &.has-logo { + .el-scrollbar { + height: calc(100% - 50px); + } + } + + .is-horizontal { + display: none; + } + + a { + display: inline-block; + width: 100%; + overflow: hidden; + } + + .svg-icon { + margin-right: 16px; + } + + .sub-el-icon { + margin-right: 12px; + margin-left: -2px; + } + + .el-menu { + border: none; + height: 100%; + width: 100% !important; + } + + // menu hover + .submenu-title-noDropdown, + .el-submenu__title { + &:hover { + background-color: $menuHover !important; + } + } + + .is-active>.el-submenu__title { + color: $subMenuActiveText !important; + + // // 竖线 after test + // &:after { + // border-right: 3px solid #00b6b2; + // } + + } + + & .nest-menu .el-submenu>.el-submenu__title, + & .el-submenu .el-menu-item { + min-width: $sideBarWidth !important; + // background-color: $subMenuBg !important; + + + + &:hover { + background-color: $subMenuHover !important; + } + } + + // 选中menu-item的bgc + .el-menu-item.is-active { + background: linear-gradient(90deg, rgba(0, 153, 153, .5), #099 41%, rgba(0, 153, 153, 0)); + + &:after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + border-right: 5px solid #00b6b2; + } + } + } + + .hideSidebar { + .sidebar-container { + width: 54px !important; + } + + .main-container { + margin-left: 54px; + } + + .submenu-title-noDropdown { + padding: 0 !important; + position: relative; + + .el-tooltip { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + + .sub-el-icon { + margin-left: 19px; + } + } + } + + .el-submenu { + overflow: hidden; + + &>.el-submenu__title { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + + .sub-el-icon { + margin-left: 19px; + } + + .el-submenu__icon-arrow { + display: none; + } + } + } + + .el-menu--collapse { + .el-submenu { + &>.el-submenu__title { + &>span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + } + } + } + + .el-menu--collapse .el-menu .el-submenu { + min-width: $sideBarWidth !important; + } + + // mobile responsive + .mobile { + .main-container { + margin-left: 0px; + } + + .sidebar-container { + transition: transform .28s; + width: $sideBarWidth !important; + } + + &.hideSidebar { + .sidebar-container { + pointer-events: none; + transition-duration: 0.3s; + transform: translate3d(-$sideBarWidth, 0, 0); + } + } + } + + .withoutAnimation { + + .main-container, + .sidebar-container { + transition: none; + } + } +} + +// when menu collapsed +.el-menu--vertical { + &>.el-menu { + .svg-icon { + margin-right: 16px; + } + + .sub-el-icon { + margin-right: 12px; + margin-left: -2px; + } + } + + .nest-menu .el-submenu>.el-submenu__title, + .el-menu-item { + background-color: #1f2d3d !important; + &:hover { + // you can use $subMenuHover + background-color: $menuHover !important; + } + } + + // the scroll bar appears when the subMenu is too long + >.el-menu--popup { + max-height: 100vh; + overflow-y: auto; + + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } + } +} \ No newline at end of file diff --git a/src/styles/transition.scss b/src/styles/transition.scss new file mode 100644 index 0000000..4cb27cc --- /dev/null +++ b/src/styles/transition.scss @@ -0,0 +1,48 @@ +// global transition css + +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} + +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all .5s; +} + +.fade-transform-enter { + opacity: 0; + transform: translateX(-30px); +} + +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/* breadcrumb transition */ +.breadcrumb-enter-active, +.breadcrumb-leave-active { + transition: all .5s; +} + +.breadcrumb-enter, +.breadcrumb-leave-active { + opacity: 0; + transform: translateX(20px); +} + +.breadcrumb-move { + transition: all .5s; +} + +.breadcrumb-leave-active { + position: absolute; +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000..87d1051 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,29 @@ +// sidebar +// $menuText:#bfcbd9; +// $menuActiveText:#409EFF; +// $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 +$menuText:#00e6dc; +$menuActiveText:#f4f4f5; +$subMenuActiveText:#00e6dc; //https://github.com/ElemeFE/element/issues/12951 + +// $menuBg:#304156; +$menuBg:transparent; +$menuHover:#263445; + +$subMenuBg:#1f2d3d; +$subMenuHover:#001528; + +$sideBarWidth: 210px; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + menuText: $menuText; + menuActiveText: $menuActiveText; + subMenuActiveText: $subMenuActiveText; + menuBg: $menuBg; + menuHover: $menuHover; + subMenuBg: $subMenuBg; + subMenuHover: $subMenuHover; + sideBarWidth: $sideBarWidth; +} diff --git a/src/utils/auth.js b/src/utils/auth.js new file mode 100644 index 0000000..059af18 --- /dev/null +++ b/src/utils/auth.js @@ -0,0 +1,15 @@ +import Cookies from 'js-cookie' + +const TokenKey = 'vue_admin_template_token' + +export function getToken() { + return Cookies.get(TokenKey) +} + +export function setToken(token) { + return Cookies.set(TokenKey, token) +} + +export function removeToken() { + return Cookies.remove(TokenKey) +} diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js new file mode 100644 index 0000000..a6de99d --- /dev/null +++ b/src/utils/get-page-title.js @@ -0,0 +1,10 @@ +import defaultSettings from '@/settings' + +const title = defaultSettings.title || 'Vue Admin Template' + +export default function getPageTitle(pageTitle) { + if (pageTitle) { + return `${pageTitle} - ${title}` + } + return `${title}` +} diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..f28cc6f --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,127 @@ +/** + * Created by PanJiaChen on 16/11/18. + */ + +/** + * Parse the time to string + * @param {(Object|string|number)} time + * @param {string} cFormat + * @returns {string | null} + */ +export function parseTime(time, cFormat) { + if (arguments.length === 0 || !time) { + return null + } + const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' + let date + if (typeof time === 'object') { + date = time + } else { + if ((typeof time === 'string')) { + if ((/^[0-9]+$/.test(time))) { + // support "1548221490638" + time = parseInt(time) + } else { + // support safari + // https://stackoverflow.com/questions/4310953/invalid-date-in-safari + time = time.replace(new RegExp(/-/gm), '/') + } + } + + if ((typeof time === 'number') && (time.toString().length === 10)) { + time = 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(/{([ymdhisa])+}/g, (result, key) => { + const value = formatObj[key] + // Note: getDay() returns 0 on Sunday + if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } + return value.toString().padStart(2, '0') + }) + return time_str +} + +/** + * @param {number} time + * @param {string} option + * @returns {string} + */ +export function formatTime(time, option) { + if (('' + time).length === 10) { + time = parseInt(time) * 1000 + } else { + time = +time + } + 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() + + '分' + ) + } +} + +/** + * @param {string} url + * @returns {Object} + */ +export function param2Obj(url) { + const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') + if (!search) { + return {} + } + const obj = {} + const searchArr = search.split('&') + searchArr.forEach(v => { + const index = v.indexOf('=') + if (index !== -1) { + const name = v.substring(0, index) + const val = v.substring(index + 1, v.length) + obj[name] = val + } + }) + return obj +} + + +/** + * 获取uuid + */ + export function getUUID () { + return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => { + return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16) + }) +} diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000..24c8ff6 --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,67 @@ +import axios from 'axios' +import { MessageBox, Message } from 'element-ui' +import store from '@/store' +import { getToken } from '@/utils/auth' + +// create an axios instance +const service = axios.create({ + baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url + // withCredentials: true, // send cookies when cross-domain requests + timeout: 30000// 5000 // request timeout +}) + +// request interceptor +service.interceptors.request.use( + config => { + // do something before request is sent + if (store.getters.token) { + // let each request carry token + // ['X-Token'] is a custom headers key + // please modify it according to the actual situation + config.headers['token'] = getToken() + } + return config + }, + error => { + // do something with request error + console.log(error) // for debug + return Promise.reject(error) + } +) + +// response interceptor +service.interceptors.response.use( + /** + * If you want to get http information such as headers or status + * Please return response => response + */ + + /** + * Determine the request status by custom code + * Here is just an example + * You can also judge the status by HTTP Status Code + */ + response => { + // 对响应数据做点什么 + return response.data + }, error => { + // 对响应错误做点什么 + if (error.response) { + // 请求成功发出且服务器也响应了状态码，但状态代码超出了2xx的范围 + console.error('Error', error.response.data) + console.error('Status', error.response.status) + console.error('Headers', error.response.headers) + } else if (error.request) { + // 请求已经成功发起，但没有收到响应 + // `error.request` 在浏览器中是 XMLHttpRequest 的实例， + // 而在node.js中是 http.ClientRequest 的实例 + console.error('Error', error.request) + } else { + // 发送请求时出了点问题 + console.error('Error', error.message) + } + return Promise.reject(error) + } +) + +export default service diff --git a/src/utils/validate.js b/src/utils/validate.js new file mode 100644 index 0000000..8d962ad --- /dev/null +++ b/src/utils/validate.js @@ -0,0 +1,20 @@ +/** + * Created by PanJiaChen on 16/11/18. + */ + +/** + * @param {string} path + * @returns {Boolean} + */ +export function isExternal(path) { + return /^(https?:|mailto:|tel:)/.test(path) +} + +/** + * @param {string} str + * @returns {Boolean} + */ +export function validUsername(str) { + const valid_map = ['admin', 'editor'] + return valid_map.indexOf(str.trim()) >= 0 +} diff --git a/src/views/404.vue b/src/views/404.vue new file mode 100644 index 0000000..1791f55 --- /dev/null +++ b/src/views/404.vue @@ -0,0 +1,228 @@ + + + + + diff --git a/src/views/acl/permission/index.vue b/src/views/acl/permission/index.vue new file mode 100644 index 0000000..c6e4804 --- /dev/null +++ b/src/views/acl/permission/index.vue @@ -0,0 +1,288 @@ + + + + + \ No newline at end of file diff --git a/src/views/acl/role/index.vue b/src/views/acl/role/index.vue new file mode 100644 index 0000000..484b458 --- /dev/null +++ b/src/views/acl/role/index.vue @@ -0,0 +1,296 @@ + + + + + \ No newline at end of file diff --git a/src/views/acl/user/index.vue b/src/views/acl/user/index.vue new file mode 100644 index 0000000..0f9a753 --- /dev/null +++ b/src/views/acl/user/index.vue @@ -0,0 +1,380 @@ + + + + + diff --git a/src/views/callback/index.vue b/src/views/callback/index.vue new file mode 100644 index 0000000..f58a962 --- /dev/null +++ b/src/views/callback/index.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue new file mode 100644 index 0000000..3baa1af --- /dev/null +++ b/src/views/dashboard/index.vue @@ -0,0 +1,644 @@ + + + + + diff --git a/src/views/form/index.vue b/src/views/form/index.vue new file mode 100644 index 0000000..f4d66d3 --- /dev/null +++ b/src/views/form/index.vue @@ -0,0 +1,85 @@ + + + + + + diff --git a/src/views/login/index.vue b/src/views/login/index.vue new file mode 100644 index 0000000..e73f0df --- /dev/null +++ b/src/views/login/index.vue @@ -0,0 +1,331 @@ + + + + + + + diff --git a/src/views/nav/index.vue b/src/views/nav/index.vue new file mode 100644 index 0000000..76025dd --- /dev/null +++ b/src/views/nav/index.vue @@ -0,0 +1,364 @@ + + + + + diff --git a/src/views/nav/nav2.vue b/src/views/nav/nav2.vue new file mode 100644 index 0000000..ce07b1f --- /dev/null +++ b/src/views/nav/nav2.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/src/views/nested/menu1/index.vue b/src/views/nested/menu1/index.vue new file mode 100644 index 0000000..30cb670 --- /dev/null +++ b/src/views/nested/menu1/index.vue @@ -0,0 +1,7 @@ + diff --git a/src/views/nested/menu1/menu1-1/index.vue b/src/views/nested/menu1/menu1-1/index.vue new file mode 100644 index 0000000..27e173a --- /dev/null +++ b/src/views/nested/menu1/menu1-1/index.vue @@ -0,0 +1,7 @@ + diff --git a/src/views/nested/menu1/menu1-2/index.vue b/src/views/nested/menu1/menu1-2/index.vue new file mode 100644 index 0000000..0c86276 --- /dev/null +++ b/src/views/nested/menu1/menu1-2/index.vue @@ -0,0 +1,7 @@ + diff --git a/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue new file mode 100644 index 0000000..f87d88f --- /dev/null +++ b/src/views/nested/menu1/menu1-2/menu1-2-1/index.vue @@ -0,0 +1,5 @@ + diff --git a/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue new file mode 100644 index 0000000..d88789f --- /dev/null +++ b/src/views/nested/menu1/menu1-2/menu1-2-2/index.vue @@ -0,0 +1,5 @@ + diff --git a/src/views/nested/menu1/menu1-3/index.vue b/src/views/nested/menu1/menu1-3/index.vue new file mode 100644 index 0000000..f7cd073 --- /dev/null +++ b/src/views/nested/menu1/menu1-3/index.vue @@ -0,0 +1,5 @@ + diff --git a/src/views/nested/menu2/index.vue b/src/views/nested/menu2/index.vue new file mode 100644 index 0000000..19dd48f --- /dev/null +++ b/src/views/nested/menu2/index.vue @@ -0,0 +1,5 @@ + diff --git a/src/views/orderHist/index.vue b/src/views/orderHist/index.vue new file mode 100644 index 0000000..69c0126 --- /dev/null +++ b/src/views/orderHist/index.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/views/personalPassword/index.vue b/src/views/personalPassword/index.vue new file mode 100644 index 0000000..4052d09 --- /dev/null +++ b/src/views/personalPassword/index.vue @@ -0,0 +1,143 @@ + + + + + diff --git a/src/views/record/index.vue b/src/views/record/index.vue new file mode 100644 index 0000000..b983474 --- /dev/null +++ b/src/views/record/index.vue @@ -0,0 +1,2411 @@ + + + + + + + + diff --git a/src/views/skill/datamanage/index.vue b/src/views/skill/datamanage/index.vue new file mode 100644 index 0000000..ac36e80 --- /dev/null +++ b/src/views/skill/datamanage/index.vue @@ -0,0 +1,333 @@ + + + + + diff --git a/src/views/skill/datamanage/newFile.js b/src/views/skill/datamanage/newFile.js new file mode 100644 index 0000000..3e631da --- /dev/null +++ b/src/views/skill/datamanage/newFile.js @@ -0,0 +1,184 @@ +/* __placeholder__ */ +export default (await import('vue')).default.extend({ +name: "SkillList", +data() { +return { +page: 1, +limit: 15, +total: 0, +loadingOfSaveSkillButton: false, +dialogSkillVisible: false, +loadingOfGetSkillList: false, +skillType: null, +skillTypeList: [], +skill: {}, +skills: [], +selectedSkills: [], + +skillRules: { +name: [{ required: true, message: "技能名称不能为空" }], +code: [{ required: true, message: "技能编码不能为空" }], +description: [{}], +skilltypeId: [{ required: true, message: "请选择技能类型", trigger: ["blur", "change"] }], +}, +}; +}, +mounted() { +this.getSkillTypeList(); +this.selectTableData(); +}, +methods: { +selectTableData() { +// this.departmentId = this.deptId; +// if(this.departmentId == 15 || this.departmentId > 16){ //Manager/BD/SSS +// this.departmentId = ''; +// } +this.getTableDataBySkillType(); +}, + +// 获取技能类型列表 +async getSkillTypeList() { +let result = await this.$API.skilltype.reqGetSkillTypeList(); +if (result.code == 0) { +this.skillTypeList = result.data; +} +}, + +// 重置技能类型选项 +resetSkillTypeSearch() { +this.skillType = null; +this.getTableDataBySkillType(); +}, + +//获取用户技能信息 +async getTableDataBySkillType(pager = 1) { +this.loadingOfGetSkillList = true; +this.page = pager; + +const { page, limit, skillType } = this; +let skilltypeId = skillType; +let result = await this.$API.skilldata.reqGetSkillList(limit, page, skilltypeId); +if (result.code == 0) { +this.total = result.data.total; +this.skills = result.data.list; +this.loadingOfGetSkillList = false; +} +}, + +// 添加技能 +showAddSkillDialog() { +this.dialogSkillVisible = true; +this.$nextTick(() => { +this.$refs.skillForm.clearValidate(); +}); +}, +// 增改用户表单 保存按钮回调 +async saveButtonOfAddEditDialog() { +this.$refs.skillForm.validate(async (success) => { +if (success) { +this.loadingOfSaveSkillButton = true; +console.log(this.skill); +let resOfAddOrUpdateSkill = await this.$API.skilldata[this.skill.id ? "reqUpdateSkill" : "reqAddSkill"](this.skill); +if (resOfAddOrUpdateSkill.code == 0) { +this.$message({ +type: "success", +message: `${this.skill.id ? "修改" : "添加"}技能成功!`, +}); +} +this.getTableDataBySkillType(this.skill.id ? this.page : 1); +this.skill = {}; +this.dialogSkillVisible = false; +this.loadingOfSaveSkillButton = false; +} +}); +}, + +// 显示修改技能种类表单 +updateSkill(row) { +this.dialogSkillVisible = true; +this.$nextTick(() => { +this.$refs.skillForm.clearValidate(); +}); +this.skill = { ...row }; +this.$refs.skillForm.clearValidate(); +}, + +// 删除单个角色 +deleteSkill(row) { +this.$confirm("您确定要删除此角色?", "提示", { +confirmButtonText: "确定", +cancelButtonText: "取消", +type: "warning", +}) +.then(async () => { +let ids = [row.id]; +let resOfDelSkill = await this.$API.skilldata.reqDeleteSkill(ids); +// console.log(resOfDelWordRecord); +if (resOfDelSkill.code == 0) { +this.$message({ +type: "success", +message: "角色删除成功!", +}); +this.getTableDataBySkillType(this.skills.length > 1 ? this.page : this.page - 1); +} +}) +.catch(() => { +this.$message({ +type: "info", +message: "已取消删除技能", +}); +}); +}, + +/* +当表格复选框选项发生变化的时候触发 +*/ +handleSelectionChange(selection) { +this.selectedSkills = selection; +}, + +// 分页页码改变时 +handleCurrentChange(pager) { +this.page = pager; +this.getTableDataBySkillType(this.page); +}, +handleSizeChange(limit) { +this.limit = limit; +this.getTableDataBySkillType(); +}, + +// 批量删除角色 +deleteSkillsInBatches() { +this.$confirm("此操作将永久删除已选中的技能, 是否继续?", "提示", { +confirmButtonText: "确定", +cancelButtonText: "取消", +type: "warning", +}) +.then(async () => { +const ids = this.selectedSkills.map((skill) => skill.id); +let resOfRemoveSkillsInBatches = await this.$API.skilldata.reqDeleteSkill(ids); +// console.log(resOfRemoveRolesInBatches); +if (resOfRemoveSkillsInBatches.code == 0) { +this.$message({ +type: "success", +message: "批量删除成功!", +}); +this.getTableDataBySkillType(); +} +}) +.catch(() => { +this.$message({ +type: "info", +message: "已取消批量删除！", +}); +console.log("选择了取消"); +}); +}, + +// 增改角色表单的取消回调 +cancelButtonOfAddOrUpdateDialog() { +this.skill = {}; +this.dialogSkillVisible = false; +}, +}, +}); diff --git a/src/views/skill/datamatch/index.vue b/src/views/skill/datamatch/index.vue new file mode 100644 index 0000000..4938ec0 --- /dev/null +++ b/src/views/skill/datamatch/index.vue @@ -0,0 +1,761 @@ + + + + + + + diff --git a/src/views/skill/datatype/index.vue b/src/views/skill/datatype/index.vue new file mode 100644 index 0000000..e4ae750 --- /dev/null +++ b/src/views/skill/datatype/index.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/views/table/index.vue b/src/views/table/index.vue new file mode 100644 index 0000000..a1ed847 --- /dev/null +++ b/src/views/table/index.vue @@ -0,0 +1,79 @@ + + + diff --git a/src/views/tree/index.vue b/src/views/tree/index.vue new file mode 100644 index 0000000..89c6b01 --- /dev/null +++ b/src/views/tree/index.vue @@ -0,0 +1,78 @@ + + + + diff --git a/tests/unit/.eslintrc.js b/tests/unit/.eslintrc.js new file mode 100644 index 0000000..958d51b --- /dev/null +++ b/tests/unit/.eslintrc.js @@ -0,0 +1,5 @@ +module.exports = { + env: { + jest: true + } +} diff --git a/tests/unit/components/Breadcrumb.spec.js b/tests/unit/components/Breadcrumb.spec.js new file mode 100644 index 0000000..1d94c8f --- /dev/null +++ b/tests/unit/components/Breadcrumb.spec.js @@ -0,0 +1,98 @@ +import { mount, createLocalVue } from '@vue/test-utils' +import VueRouter from 'vue-router' +import ElementUI from 'element-ui' +import Breadcrumb from '@/components/Breadcrumb/index.vue' + +const localVue = createLocalVue() +localVue.use(VueRouter) +localVue.use(ElementUI) + +const routes = [ + { + path: '/', + name: 'home', + children: [{ + path: 'dashboard', + name: 'dashboard' + }] + }, + { + path: '/menu', + name: 'menu', + children: [{ + path: 'menu1', + name: 'menu1', + meta: { title: 'menu1' }, + children: [{ + path: 'menu1-1', + name: 'menu1-1', + meta: { title: 'menu1-1' } + }, + { + path: 'menu1-2', + name: 'menu1-2', + redirect: 'noredirect', + meta: { title: 'menu1-2' }, + children: [{ + path: 'menu1-2-1', + name: 'menu1-2-1', + meta: { title: 'menu1-2-1' } + }, + { + path: 'menu1-2-2', + name: 'menu1-2-2' + }] + }] + }] + }] + +const router = new VueRouter({ + routes +}) + +describe('Breadcrumb.vue', () => { + const wrapper = mount(Breadcrumb, { + localVue, + router + }) + it('dashboard', () => { + router.push('/dashboard') + const len = wrapper.findAll('.el-breadcrumb__inner').length + expect(len).toBe(1) + }) + it('normal route', () => { + router.push('/menu/menu1') + const len = wrapper.findAll('.el-breadcrumb__inner').length + expect(len).toBe(2) + }) + it('nested route', () => { + router.push('/menu/menu1/menu1-2/menu1-2-1') + const len = wrapper.findAll('.el-breadcrumb__inner').length + expect(len).toBe(4) + }) + it('no meta.title', () => { + router.push('/menu/menu1/menu1-2/menu1-2-2') + const len = wrapper.findAll('.el-breadcrumb__inner').length + expect(len).toBe(3) + }) + // it('click link', () => { + // router.push('/menu/menu1/menu1-2/menu1-2-2') + // const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner') + // const second = breadcrumbArray.at(1) + // console.log(breadcrumbArray) + // const href = second.find('a').attributes().href + // expect(href).toBe('#/menu/menu1') + // }) + // it('noRedirect', () => { + // router.push('/menu/menu1/menu1-2/menu1-2-1') + // const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner') + // const redirectBreadcrumb = breadcrumbArray.at(2) + // expect(redirectBreadcrumb.contains('a')).toBe(false) + // }) + it('last breadcrumb', () => { + router.push('/menu/menu1/menu1-2/menu1-2-1') + const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner') + const redirectBreadcrumb = breadcrumbArray.at(3) + expect(redirectBreadcrumb.contains('a')).toBe(false) + }) +}) diff --git a/tests/unit/components/Hamburger.spec.js b/tests/unit/components/Hamburger.spec.js new file mode 100644 index 0000000..01ea303 --- /dev/null +++ b/tests/unit/components/Hamburger.spec.js @@ -0,0 +1,18 @@ +import { shallowMount } from '@vue/test-utils' +import Hamburger from '@/components/Hamburger/index.vue' +describe('Hamburger.vue', () => { + it('toggle click', () => { + const wrapper = shallowMount(Hamburger) + const mockFn = jest.fn() + wrapper.vm.$on('toggleClick', mockFn) + wrapper.find('.hamburger').trigger('click') + expect(mockFn).toBeCalled() + }) + it('prop isActive', () => { + const wrapper = shallowMount(Hamburger) + wrapper.setProps({ isActive: true }) + expect(wrapper.contains('.is-active')).toBe(true) + wrapper.setProps({ isActive: false }) + expect(wrapper.contains('.is-active')).toBe(false) + }) +}) diff --git a/tests/unit/components/SvgIcon.spec.js b/tests/unit/components/SvgIcon.spec.js new file mode 100644 index 0000000..31467a9 --- /dev/null +++ b/tests/unit/components/SvgIcon.spec.js @@ -0,0 +1,22 @@ +import { shallowMount } from '@vue/test-utils' +import SvgIcon from '@/components/SvgIcon/index.vue' +describe('SvgIcon.vue', () => { + it('iconClass', () => { + const wrapper = shallowMount(SvgIcon, { + propsData: { + iconClass: 'test' + } + }) + expect(wrapper.find('use').attributes().href).toBe('#icon-test') + }) + it('className', () => { + const wrapper = shallowMount(SvgIcon, { + propsData: { + iconClass: 'test' + } + }) + expect(wrapper.classes().length).toBe(1) + wrapper.setProps({ className: 'test' }) + expect(wrapper.classes().includes('test')).toBe(true) + }) +}) diff --git a/tests/unit/utils/formatTime.spec.js b/tests/unit/utils/formatTime.spec.js new file mode 100644 index 0000000..24e165b --- /dev/null +++ b/tests/unit/utils/formatTime.spec.js @@ -0,0 +1,30 @@ +import { formatTime } from '@/utils/index.js' + +describe('Utils:formatTime', () => { + const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01" + const retrofit = 5 * 1000 + + it('ten digits timestamp', () => { + expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分') + }) + it('test now', () => { + expect(formatTime(+new Date() - 1)).toBe('刚刚') + }) + it('less two minute', () => { + expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前') + }) + it('less two hour', () => { + expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前') + }) + it('less one day', () => { + expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前') + }) + it('more than one day', () => { + expect(formatTime(d)).toBe('7月13日17时54分') + }) + it('format', () => { + expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54') + expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13') + expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54') + }) +}) diff --git a/tests/unit/utils/param2Obj.spec.js b/tests/unit/utils/param2Obj.spec.js new file mode 100644 index 0000000..e106ed8 --- /dev/null +++ b/tests/unit/utils/param2Obj.spec.js @@ -0,0 +1,14 @@ +import { param2Obj } from '@/utils/index.js' +describe('Utils:param2Obj', () => { + const url = 'https://github.com/PanJiaChen/vue-element-admin?name=bill&age=29&sex=1&field=dGVzdA==&key=%E6%B5%8B%E8%AF%95' + + it('param2Obj test', () => { + expect(param2Obj(url)).toEqual({ + name: 'bill', + age: '29', + sex: '1', + field: window.btoa('test'), + key: '测试' + }) + }) +}) diff --git a/tests/unit/utils/parseTime.spec.js b/tests/unit/utils/parseTime.spec.js new file mode 100644 index 0000000..56045af --- /dev/null +++ b/tests/unit/utils/parseTime.spec.js @@ -0,0 +1,35 @@ +import { parseTime } from '@/utils/index.js' + +describe('Utils:parseTime', () => { + const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01" + it('timestamp', () => { + expect(parseTime(d)).toBe('2018-07-13 17:54:01') + }) + it('timestamp string', () => { + expect(parseTime((d + ''))).toBe('2018-07-13 17:54:01') + }) + it('ten digits timestamp', () => { + expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01') + }) + it('new Date', () => { + expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01') + }) + it('format', () => { + expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54') + expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13') + expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54') + }) + it('get the day of the week', () => { + expect(parseTime(d, '{a}')).toBe('五') // 星期五 + }) + it('get the day of the week', () => { + expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日 + }) + it('empty argument', () => { + expect(parseTime()).toBeNull() + }) + + it('null', () => { + expect(parseTime(null)).toBeNull() + }) +}) diff --git a/tests/unit/utils/validate.spec.js b/tests/unit/utils/validate.spec.js new file mode 100644 index 0000000..f774905 --- /dev/null +++ b/tests/unit/utils/validate.spec.js @@ -0,0 +1,17 @@ +import { validUsername, isExternal } from '@/utils/validate.js' + +describe('Utils:validate', () => { + it('validUsername', () => { + expect(validUsername('admin')).toBe(true) + expect(validUsername('editor')).toBe(true) + expect(validUsername('xxxx')).toBe(false) + }) + it('isExternal', () => { + expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true) + expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true) + expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false) + expect(isExternal('/dashboard')).toBe(false) + expect(isExternal('./dashboard')).toBe(false) + expect(isExternal('dashboard')).toBe(false) + }) +}) diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..34c7fb4 --- /dev/null +++ b/vue.config.js @@ -0,0 +1,144 @@ +'use strict' +const path = require('path') +const defaultSettings = require('./src/settings.js') + +function resolve(dir) { + return path.join(__dirname, dir) +} + +const name = defaultSettings.title || 'vue Admin Template' // page title + +// If your port is set to 80, +// use administrator privileges to execute the command line. +// For example, Mac: sudo npm run +// You can change the port by the following methods: +// port = 9528 npm run dev OR npm run dev --port = 9528 +const port = process.env.port || process.env.npm_config_port || 9528 // dev port + +// All configuration item explanations can be find in https://cli.vuejs.org/config/ +module.exports = { + /** + * You will need to set publicPath if you plan to deploy your site under a sub path, + * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/, + * then publicPath should be set to "/bar/". + * In most cases please use '/' !!! + * Detail: https://cli.vuejs.org/config/#publicpath + */ + publicPath: '/', + outputDir: 'dist', + assetsDir: 'static', + lintOnSave: process.env.NODE_ENV === 'development', + productionSourceMap: false, + devServer: { + port: port, + open: true, + overlay: { + warnings: false, + errors: true + }, + proxy: { + [process.env.VUE_APP_BASE_API]: { + target: 'http://139.219.4.195:8003', + // 测试地址 + // target: 'http://192.168.1.169:8003', + pathRewrite: { + ['^' + process.env.VUE_APP_BASE_API]: '' + } + } + } + }, + configureWebpack: { + // provide the app's title in webpack's name field, so that + // it can be accessed in index.html to inject the correct title. + name: name, + resolve: { + alias: { + '@': resolve('src') + } + } + }, + chainWebpack(config) { + // it can improve the speed of the first screen, it is recommended to turn on preload + config.plugin('preload').tap(() => [ + { + rel: 'preload', + // to ignore runtime.js + // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171 + fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], + include: 'initial' + } + ]) + + // when there are many pages, it will cause too many meaningless requests + config.plugins.delete('prefetch') + + // set svg-sprite-loader + config.module + .rule('svg') + .exclude.add(resolve('src/icons')) + .end() + config.module + .rule('icons') + .test(/\.svg$/) + .include.add(resolve('src/icons')) + .end() + .use('svg-sprite-loader') + .loader('svg-sprite-loader') + .options({ + symbolId: 'icon-[name]' + }) + .end() + + config + .when(process.env.NODE_ENV !== 'development', + config => { + config + .plugin('ScriptExtHtmlWebpackPlugin') + .after('html') + .use('script-ext-html-webpack-plugin', [{ + // `runtime` must same as runtimeChunk name. default is `runtime` + inline: /runtime\..*\.js$/ + }]) + .end() + config + .optimization.splitChunks({ + chunks: 'all', + cacheGroups: { + libs: { + name: 'chunk-libs', + test: /[\\/]node_modules[\\/]/, + priority: 10, + chunks: 'initial' // only package third parties that are initially dependent + }, + elementUI: { + name: 'chunk-elementUI', // split elementUI into a single package + priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app + test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm + }, + commons: { + name: 'chunk-commons', + test: resolve('src/components'), // can customize your rules + minChunks: 3, // minimum common number + priority: 5, + reuseExistingChunk: true + } + } + }) + // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk + config.optimization.runtimeChunk('single') + } + ) + + config.module + .rule('screenfull') + .test(/\.js$/) + .include.add(path.resolve(__dirname, 'node_modules/screenfull')) + .end() + .use('babel') + .loader('babel-loader') + .options({ + presets: ['@babel/preset-env'] + }) + .end() + } +}