Commit b89c8760ebe7a1b06e10aba88ed6313a56fae245
1 parent
f71be911
项目初始化
Showing
95 changed files
with
5482 additions
and
0 deletions
.editorconfig
0 → 100644
.env.development
0 → 100644
.env.production
0 → 100644
.env.staging
0 → 100644
.eslintignore
0 → 100644
.eslintrc.js
0 → 100644
| 1 | +module.exports = { | ||
| 2 | + root: true, | ||
| 3 | + parserOptions: { | ||
| 4 | + parser: 'babel-eslint', | ||
| 5 | + sourceType: 'module' | ||
| 6 | + }, | ||
| 7 | + env: { | ||
| 8 | + browser: true, | ||
| 9 | + node: true, | ||
| 10 | + es6: true, | ||
| 11 | + }, | ||
| 12 | + extends: ['plugin:vue/recommended', 'eslint:recommended'], | ||
| 13 | + | ||
| 14 | + // add your custom rules here | ||
| 15 | + //it is base on https://github.com/vuejs/eslint-config-vue | ||
| 16 | + rules: { | ||
| 17 | + "vue/max-attributes-per-line": [2, { | ||
| 18 | + "singleline": 10, | ||
| 19 | + "multiline": { | ||
| 20 | + "max": 1, | ||
| 21 | + "allowFirstLine": false | ||
| 22 | + } | ||
| 23 | + }], | ||
| 24 | + "vue/singleline-html-element-content-newline": "off", | ||
| 25 | + "vue/multiline-html-element-content-newline":"off", | ||
| 26 | + "vue/name-property-casing": ["error", "PascalCase"], | ||
| 27 | + "vue/no-v-html": "off", | ||
| 28 | + 'accessor-pairs': 2, | ||
| 29 | + 'arrow-spacing': [2, { | ||
| 30 | + 'before': true, | ||
| 31 | + 'after': true | ||
| 32 | + }], | ||
| 33 | + 'block-spacing': [2, 'always'], | ||
| 34 | + 'brace-style': [2, '1tbs', { | ||
| 35 | + 'allowSingleLine': true | ||
| 36 | + }], | ||
| 37 | + 'camelcase': [0, { | ||
| 38 | + 'properties': 'always' | ||
| 39 | + }], | ||
| 40 | + 'comma-dangle': [2, 'never'], | ||
| 41 | + 'comma-spacing': [2, { | ||
| 42 | + 'before': false, | ||
| 43 | + 'after': true | ||
| 44 | + }], | ||
| 45 | + 'comma-style': [2, 'last'], | ||
| 46 | + 'constructor-super': 2, | ||
| 47 | + 'curly': [2, 'multi-line'], | ||
| 48 | + 'dot-location': [2, 'property'], | ||
| 49 | + 'eol-last': 2, | ||
| 50 | + 'eqeqeq': ["error", "always", {"null": "ignore"}], | ||
| 51 | + 'generator-star-spacing': [2, { | ||
| 52 | + 'before': true, | ||
| 53 | + 'after': true | ||
| 54 | + }], | ||
| 55 | + 'handle-callback-err': [2, '^(err|error)$'], | ||
| 56 | + 'indent': [2, 2, { | ||
| 57 | + 'SwitchCase': 1 | ||
| 58 | + }], | ||
| 59 | + 'jsx-quotes': [2, 'prefer-single'], | ||
| 60 | + 'key-spacing': [2, { | ||
| 61 | + 'beforeColon': false, | ||
| 62 | + 'afterColon': true | ||
| 63 | + }], | ||
| 64 | + 'keyword-spacing': [2, { | ||
| 65 | + 'before': true, | ||
| 66 | + 'after': true | ||
| 67 | + }], | ||
| 68 | + 'new-cap': [2, { | ||
| 69 | + 'newIsCap': true, | ||
| 70 | + 'capIsNew': false | ||
| 71 | + }], | ||
| 72 | + 'new-parens': 2, | ||
| 73 | + 'no-array-constructor': 2, | ||
| 74 | + 'no-caller': 2, | ||
| 75 | + 'no-console': 'off', | ||
| 76 | + 'no-class-assign': 2, | ||
| 77 | + 'no-cond-assign': 2, | ||
| 78 | + 'no-const-assign': 2, | ||
| 79 | + 'no-control-regex': 0, | ||
| 80 | + 'no-delete-var': 2, | ||
| 81 | + 'no-dupe-args': 2, | ||
| 82 | + 'no-dupe-class-members': 2, | ||
| 83 | + 'no-dupe-keys': 2, | ||
| 84 | + 'no-duplicate-case': 2, | ||
| 85 | + 'no-empty-character-class': 2, | ||
| 86 | + 'no-empty-pattern': 2, | ||
| 87 | + 'no-eval': 2, | ||
| 88 | + 'no-ex-assign': 2, | ||
| 89 | + 'no-extend-native': 2, | ||
| 90 | + 'no-extra-bind': 2, | ||
| 91 | + 'no-extra-boolean-cast': 2, | ||
| 92 | + 'no-extra-parens': [2, 'functions'], | ||
| 93 | + 'no-fallthrough': 2, | ||
| 94 | + 'no-floating-decimal': 2, | ||
| 95 | + 'no-func-assign': 2, | ||
| 96 | + 'no-implied-eval': 2, | ||
| 97 | + 'no-inner-declarations': [2, 'functions'], | ||
| 98 | + 'no-invalid-regexp': 2, | ||
| 99 | + 'no-irregular-whitespace': 2, | ||
| 100 | + 'no-iterator': 2, | ||
| 101 | + 'no-label-var': 2, | ||
| 102 | + 'no-labels': [2, { | ||
| 103 | + 'allowLoop': false, | ||
| 104 | + 'allowSwitch': false | ||
| 105 | + }], | ||
| 106 | + 'no-lone-blocks': 2, | ||
| 107 | + 'no-mixed-spaces-and-tabs': 2, | ||
| 108 | + 'no-multi-spaces': 2, | ||
| 109 | + 'no-multi-str': 2, | ||
| 110 | + 'no-multiple-empty-lines': [2, { | ||
| 111 | + 'max': 1 | ||
| 112 | + }], | ||
| 113 | + 'no-native-reassign': 2, | ||
| 114 | + 'no-negated-in-lhs': 2, | ||
| 115 | + 'no-new-object': 2, | ||
| 116 | + 'no-new-require': 2, | ||
| 117 | + 'no-new-symbol': 2, | ||
| 118 | + 'no-new-wrappers': 2, | ||
| 119 | + 'no-obj-calls': 2, | ||
| 120 | + 'no-octal': 2, | ||
| 121 | + 'no-octal-escape': 2, | ||
| 122 | + 'no-path-concat': 2, | ||
| 123 | + 'no-proto': 2, | ||
| 124 | + 'no-redeclare': 2, | ||
| 125 | + 'no-regex-spaces': 2, | ||
| 126 | + 'no-return-assign': [2, 'except-parens'], | ||
| 127 | + 'no-self-assign': 2, | ||
| 128 | + 'no-self-compare': 2, | ||
| 129 | + 'no-sequences': 2, | ||
| 130 | + 'no-shadow-restricted-names': 2, | ||
| 131 | + 'no-spaced-func': 2, | ||
| 132 | + 'no-sparse-arrays': 2, | ||
| 133 | + 'no-this-before-super': 2, | ||
| 134 | + 'no-throw-literal': 2, | ||
| 135 | + 'no-trailing-spaces': 2, | ||
| 136 | + 'no-undef': 2, | ||
| 137 | + 'no-undef-init': 2, | ||
| 138 | + 'no-unexpected-multiline': 2, | ||
| 139 | + 'no-unmodified-loop-condition': 2, | ||
| 140 | + 'no-unneeded-ternary': [2, { | ||
| 141 | + 'defaultAssignment': false | ||
| 142 | + }], | ||
| 143 | + 'no-unreachable': 2, | ||
| 144 | + 'no-unsafe-finally': 2, | ||
| 145 | + 'no-unused-vars': [2, { | ||
| 146 | + 'vars': 'all', | ||
| 147 | + 'args': 'none' | ||
| 148 | + }], | ||
| 149 | + 'no-useless-call': 2, | ||
| 150 | + 'no-useless-computed-key': 2, | ||
| 151 | + 'no-useless-constructor': 2, | ||
| 152 | + 'no-useless-escape': 0, | ||
| 153 | + 'no-whitespace-before-property': 2, | ||
| 154 | + 'no-with': 2, | ||
| 155 | + 'one-var': [2, { | ||
| 156 | + 'initialized': 'never' | ||
| 157 | + }], | ||
| 158 | + 'operator-linebreak': [2, 'after', { | ||
| 159 | + 'overrides': { | ||
| 160 | + '?': 'before', | ||
| 161 | + ':': 'before' | ||
| 162 | + } | ||
| 163 | + }], | ||
| 164 | + 'padded-blocks': [2, 'never'], | ||
| 165 | + 'quotes': [2, 'single', { | ||
| 166 | + 'avoidEscape': true, | ||
| 167 | + 'allowTemplateLiterals': true | ||
| 168 | + }], | ||
| 169 | + 'semi': [2, 'never'], | ||
| 170 | + 'semi-spacing': [2, { | ||
| 171 | + 'before': false, | ||
| 172 | + 'after': true | ||
| 173 | + }], | ||
| 174 | + 'space-before-blocks': [2, 'always'], | ||
| 175 | + 'space-before-function-paren': [2, 'never'], | ||
| 176 | + 'space-in-parens': [2, 'never'], | ||
| 177 | + 'space-infix-ops': 2, | ||
| 178 | + 'space-unary-ops': [2, { | ||
| 179 | + 'words': true, | ||
| 180 | + 'nonwords': false | ||
| 181 | + }], | ||
| 182 | + 'spaced-comment': [2, 'always', { | ||
| 183 | + 'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ','] | ||
| 184 | + }], | ||
| 185 | + 'template-curly-spacing': [2, 'never'], | ||
| 186 | + 'use-isnan': 2, | ||
| 187 | + 'valid-typeof': 2, | ||
| 188 | + 'wrap-iife': [2, 'any'], | ||
| 189 | + 'yield-star-spacing': [2, 'both'], | ||
| 190 | + 'yoda': [2, 'never'], | ||
| 191 | + 'prefer-const': 2, | ||
| 192 | + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, | ||
| 193 | + 'object-curly-spacing': [2, 'always', { | ||
| 194 | + objectsInObjects: false | ||
| 195 | + }], | ||
| 196 | + 'array-bracket-spacing': [2, 'never'] | ||
| 197 | + } | ||
| 198 | +} |
.travis.yml
0 → 100644
LICENSE
0 → 100644
| 1 | +MIT License | ||
| 2 | + | ||
| 3 | +Copyright (c) 2017-present PanJiaChen | ||
| 4 | + | ||
| 5 | +Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| 6 | +of this software and associated documentation files (the "Software"), to deal | ||
| 7 | +in the Software without restriction, including without limitation the rights | ||
| 8 | +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| 9 | +copies of the Software, and to permit persons to whom the Software is | ||
| 10 | +furnished to do so, subject to the following conditions: | ||
| 11 | + | ||
| 12 | +The above copyright notice and this permission notice shall be included in all | ||
| 13 | +copies or substantial portions of the Software. | ||
| 14 | + | ||
| 15 | +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| 16 | +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| 17 | +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| 18 | +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| 19 | +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| 20 | +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| 21 | +SOFTWARE. |
README-zh.md
0 → 100644
| 1 | +# vue-admin-template | ||
| 2 | + | ||
| 3 | +> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 | ||
| 4 | + | ||
| 5 | +[线上地址](http://panjiachen.github.io/vue-admin-template) | ||
| 6 | + | ||
| 7 | +[国内访问](https://panjiachen.gitee.io/vue-admin-template) | ||
| 8 | + | ||
| 9 | +目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。 | ||
| 10 | + | ||
| 11 | +<p align="center"> | ||
| 12 | + <b>SPONSORED BY</b> | ||
| 13 | +</p> | ||
| 14 | +<p align="center"> | ||
| 15 | + <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank"> | ||
| 16 | + <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip"> | ||
| 17 | + </a> | ||
| 18 | +</p> | ||
| 19 | + | ||
| 20 | +## Extra | ||
| 21 | + | ||
| 22 | +如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control) | ||
| 23 | + | ||
| 24 | +## 相关项目 | ||
| 25 | + | ||
| 26 | +- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) | ||
| 27 | + | ||
| 28 | +- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) | ||
| 29 | + | ||
| 30 | +- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) | ||
| 31 | + | ||
| 32 | +- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) | ||
| 33 | + | ||
| 34 | +写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目: | ||
| 35 | + | ||
| 36 | +- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) | ||
| 37 | +- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) | ||
| 38 | +- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) | ||
| 39 | +- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) | ||
| 40 | +- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) | ||
| 41 | + | ||
| 42 | +## Build Setup | ||
| 43 | + | ||
| 44 | +```bash | ||
| 45 | +# 克隆项目 | ||
| 46 | +git clone https://github.com/PanJiaChen/vue-admin-template.git | ||
| 47 | + | ||
| 48 | +# 进入项目目录 | ||
| 49 | +cd vue-admin-template | ||
| 50 | + | ||
| 51 | +# 安装依赖 | ||
| 52 | +npm install | ||
| 53 | + | ||
| 54 | +# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 | ||
| 55 | +npm install --registry=https://registry.npm.taobao.org | ||
| 56 | + | ||
| 57 | +# 启动服务 | ||
| 58 | +npm run dev | ||
| 59 | +``` | ||
| 60 | + | ||
| 61 | +浏览器访问 [http://localhost:9528](http://localhost:9528) | ||
| 62 | + | ||
| 63 | +## 发布 | ||
| 64 | + | ||
| 65 | +```bash | ||
| 66 | +# 构建测试环境 | ||
| 67 | +npm run build:stage | ||
| 68 | + | ||
| 69 | +# 构建生产环境 | ||
| 70 | +npm run build:prod | ||
| 71 | +``` | ||
| 72 | + | ||
| 73 | +## 其它 | ||
| 74 | + | ||
| 75 | +```bash | ||
| 76 | +# 预览发布环境效果 | ||
| 77 | +npm run preview | ||
| 78 | + | ||
| 79 | +# 预览发布环境效果 + 静态资源分析 | ||
| 80 | +npm run preview -- --report | ||
| 81 | + | ||
| 82 | +# 代码格式检查 | ||
| 83 | +npm run lint | ||
| 84 | + | ||
| 85 | +# 代码格式检查并自动修复 | ||
| 86 | +npm run lint -- --fix | ||
| 87 | +``` | ||
| 88 | + | ||
| 89 | +更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/) | ||
| 90 | + | ||
| 91 | +## 购买贴纸 | ||
| 92 | + | ||
| 93 | +你也可以通过 购买[官方授权的贴纸](https://smallsticker.com/product/vue-element-admin) 的方式来支持 vue-element-admin - 每售出一张贴纸，我们将获得 2 元的捐赠。 | ||
| 94 | + | ||
| 95 | +## Demo | ||
| 96 | + | ||
| 97 | + | ||
| 98 | + | ||
| 99 | +## Browsers support | ||
| 100 | + | ||
| 101 | +Modern browsers and Internet Explorer 10+. | ||
| 102 | + | ||
| 103 | +| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | | ||
| 104 | +| --------- | --------- | --------- | --------- | | ||
| 105 | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions | ||
| 106 | + | ||
| 107 | +## License | ||
| 108 | + | ||
| 109 | +[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license. | ||
| 110 | + | ||
| 111 | +Copyright (c) 2017-present PanJiaChen |
README.md
0 → 100644
| 1 | +# vue-admin-template | ||
| 2 | + | ||
| 3 | +English | [简体中文](./README-zh.md) | ||
| 4 | + | ||
| 5 | +> A minimal vue admin template with Element UI & axios & iconfont & permission control & lint | ||
| 6 | + | ||
| 7 | +**Live demo:** http://panjiachen.github.io/vue-admin-template | ||
| 8 | + | ||
| 9 | + | ||
| 10 | +**The current version is `v4.0+` build on `vue-cli`. If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0), it does not rely on `vue-cli`** | ||
| 11 | + | ||
| 12 | +<p align="center"> | ||
| 13 | + <b>SPONSORED BY</b> | ||
| 14 | +</p> | ||
| 15 | +<p align="center"> | ||
| 16 | + <a href="https://finclip.com?from=vue_element" title="FinClip" target="_blank"> | ||
| 17 | + <img height="200px" src="https://gitee.com/panjiachen/gitee-cdn/raw/master/vue%E8%B5%9E%E5%8A%A9.png" title="FinClip"> | ||
| 18 | + </a> | ||
| 19 | +</p> | ||
| 20 | + | ||
| 21 | +## Build Setup | ||
| 22 | + | ||
| 23 | +```bash | ||
| 24 | +# clone the project | ||
| 25 | +git clone https://github.com/PanJiaChen/vue-admin-template.git | ||
| 26 | + | ||
| 27 | +# enter the project directory | ||
| 28 | +cd vue-admin-template | ||
| 29 | + | ||
| 30 | +# install dependency | ||
| 31 | +npm install | ||
| 32 | + | ||
| 33 | +# develop | ||
| 34 | +npm run dev | ||
| 35 | +``` | ||
| 36 | + | ||
| 37 | +This will automatically open http://localhost:9528 | ||
| 38 | + | ||
| 39 | +## Build | ||
| 40 | + | ||
| 41 | +```bash | ||
| 42 | +# build for test environment | ||
| 43 | +npm run build:stage | ||
| 44 | + | ||
| 45 | +# build for production environment | ||
| 46 | +npm run build:prod | ||
| 47 | +``` | ||
| 48 | + | ||
| 49 | +## Advanced | ||
| 50 | + | ||
| 51 | +```bash | ||
| 52 | +# preview the release environment effect | ||
| 53 | +npm run preview | ||
| 54 | + | ||
| 55 | +# preview the release environment effect + static resource analysis | ||
| 56 | +npm run preview -- --report | ||
| 57 | + | ||
| 58 | +# code format check | ||
| 59 | +npm run lint | ||
| 60 | + | ||
| 61 | +# code format check and auto fix | ||
| 62 | +npm run lint -- --fix | ||
| 63 | +``` | ||
| 64 | + | ||
| 65 | +Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html) for more information | ||
| 66 | + | ||
| 67 | +## Demo | ||
| 68 | + | ||
| 69 | + | ||
| 70 | + | ||
| 71 | +## Extra | ||
| 72 | + | ||
| 73 | +If you want router permission && generate menu by user roles , you can use this branch [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control) | ||
| 74 | + | ||
| 75 | +For `typescript` version, you can use [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour)) | ||
| 76 | + | ||
| 77 | +## Related Project | ||
| 78 | + | ||
| 79 | +- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) | ||
| 80 | + | ||
| 81 | +- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) | ||
| 82 | + | ||
| 83 | +- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) | ||
| 84 | + | ||
| 85 | +- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312) | ||
| 86 | + | ||
| 87 | +## Browsers support | ||
| 88 | + | ||
| 89 | +Modern browsers and Internet Explorer 10+. | ||
| 90 | + | ||
| 91 | +| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | | ||
| 92 | +| --------- | --------- | --------- | --------- | | ||
| 93 | +| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions | ||
| 94 | + | ||
| 95 | +## License | ||
| 96 | + | ||
| 97 | +[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license. | ||
| 98 | + | ||
| 99 | +Copyright (c) 2017-present PanJiaChen |
babel.config.js
0 → 100644
| 1 | +module.exports = { | ||
| 2 | + presets: [ | ||
| 3 | + // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app | ||
| 4 | + '@vue/cli-plugin-babel/preset' | ||
| 5 | + ], | ||
| 6 | + 'env': { | ||
| 7 | + 'development': { | ||
| 8 | + // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require(). | ||
| 9 | + // This plugin can significantly increase the speed of hot updates, when you have a large number of pages. | ||
| 10 | + // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html | ||
| 11 | + 'plugins': ['dynamic-import-node'] | ||
| 12 | + } | ||
| 13 | + } | ||
| 14 | +} |
build/index.js
0 → 100644
| 1 | +const { run } = require('runjs') | ||
| 2 | +const chalk = require('chalk') | ||
| 3 | +const config = require('../vue.config.js') | ||
| 4 | +const rawArgv = process.argv.slice(2) | ||
| 5 | +const args = rawArgv.join(' ') | ||
| 6 | + | ||
| 7 | +if (process.env.npm_config_preview || rawArgv.includes('--preview')) { | ||
| 8 | + const report = rawArgv.includes('--report') | ||
| 9 | + | ||
| 10 | + run(`vue-cli-service build ${args}`) | ||
| 11 | + | ||
| 12 | + const port = 9526 | ||
| 13 | + const publicPath = config.publicPath | ||
| 14 | + | ||
| 15 | + var connect = require('connect') | ||
| 16 | + var serveStatic = require('serve-static') | ||
| 17 | + const app = connect() | ||
| 18 | + | ||
| 19 | + app.use( | ||
| 20 | + publicPath, | ||
| 21 | + serveStatic('./dist', { | ||
| 22 | + index: ['index.html', '/'] | ||
| 23 | + }) | ||
| 24 | + ) | ||
| 25 | + | ||
| 26 | + app.listen(port, function () { | ||
| 27 | + console.log(chalk.green(`> Preview at http://localhost:${port}${publicPath}`)) | ||
| 28 | + if (report) { | ||
| 29 | + console.log(chalk.green(`> Report at http://localhost:${port}${publicPath}report.html`)) | ||
| 30 | + } | ||
| 31 | + | ||
| 32 | + }) | ||
| 33 | +} else { | ||
| 34 | + run(`vue-cli-service build ${args}`) | ||
| 35 | +} |
dist (2).zip
0 → 100644
No preview for this file type
jest.config.js
0 → 100644
| 1 | +module.exports = { | ||
| 2 | + moduleFileExtensions: ['js', 'jsx', 'json', 'vue'], | ||
| 3 | + transform: { | ||
| 4 | + '^.+\\.vue$': 'vue-jest', | ||
| 5 | + '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': | ||
| 6 | + 'jest-transform-stub', | ||
| 7 | + '^.+\\.jsx?$': 'babel-jest' | ||
| 8 | + }, | ||
| 9 | + moduleNameMapper: { | ||
| 10 | + '^@/(.*)$': '<rootDir>/src/$1' | ||
| 11 | + }, | ||
| 12 | + snapshotSerializers: ['jest-serializer-vue'], | ||
| 13 | + testMatch: [ | ||
| 14 | + '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)' | ||
| 15 | + ], | ||
| 16 | + collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'], | ||
| 17 | + coverageDirectory: '<rootDir>/tests/unit/coverage', | ||
| 18 | + // 'collectCoverage': true, | ||
| 19 | + 'coverageReporters': [ | ||
| 20 | + 'lcov', | ||
| 21 | + 'text-summary' | ||
| 22 | + ], | ||
| 23 | + testURL: 'http://localhost/' | ||
| 24 | +} |
jsconfig.json
0 → 100644
mock/index.js
0 → 100644
| 1 | +const Mock = require('mockjs') | ||
| 2 | +const { param2Obj } = require('./utils') | ||
| 3 | + | ||
| 4 | +const user = require('./user') | ||
| 5 | +const table = require('./table') | ||
| 6 | + | ||
| 7 | +const mocks = [ | ||
| 8 | + ...user, | ||
| 9 | + ...table | ||
| 10 | +] | ||
| 11 | + | ||
| 12 | +// for front mock | ||
| 13 | +// please use it cautiously, it will redefine XMLHttpRequest, | ||
| 14 | +// which will cause many of your third-party libraries to be invalidated(like progress event). | ||
| 15 | +function mockXHR() { | ||
| 16 | + // mock patch | ||
| 17 | + // https://github.com/nuysoft/Mock/issues/300 | ||
| 18 | + Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send | ||
| 19 | + Mock.XHR.prototype.send = function() { | ||
| 20 | + if (this.custom.xhr) { | ||
| 21 | + this.custom.xhr.withCredentials = this.withCredentials || false | ||
| 22 | + | ||
| 23 | + if (this.responseType) { | ||
| 24 | + this.custom.xhr.responseType = this.responseType | ||
| 25 | + } | ||
| 26 | + } | ||
| 27 | + this.proxy_send(...arguments) | ||
| 28 | + } | ||
| 29 | + | ||
| 30 | + function XHR2ExpressReqWrap(respond) { | ||
| 31 | + return function(options) { | ||
| 32 | + let result = null | ||
| 33 | + if (respond instanceof Function) { | ||
| 34 | + const { body, type, url } = options | ||
| 35 | + // https://expressjs.com/en/4x/api.html#req | ||
| 36 | + result = respond({ | ||
| 37 | + method: type, | ||
| 38 | + body: JSON.parse(body), | ||
| 39 | + query: param2Obj(url) | ||
| 40 | + }) | ||
| 41 | + } else { | ||
| 42 | + result = respond | ||
| 43 | + } | ||
| 44 | + return Mock.mock(result) | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + | ||
| 48 | + for (const i of mocks) { | ||
| 49 | + Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response)) | ||
| 50 | + } | ||
| 51 | +} | ||
| 52 | + | ||
| 53 | +module.exports = { | ||
| 54 | + mocks, | ||
| 55 | + mockXHR | ||
| 56 | +} | ||
| 57 | + |
mock/mock-server.js
0 → 100644
| 1 | +const chokidar = require('chokidar') | ||
| 2 | +const bodyParser = require('body-parser') | ||
| 3 | +const chalk = require('chalk') | ||
| 4 | +const path = require('path') | ||
| 5 | +const Mock = require('mockjs') | ||
| 6 | + | ||
| 7 | +const mockDir = path.join(process.cwd(), 'mock') | ||
| 8 | + | ||
| 9 | +function registerRoutes(app) { | ||
| 10 | + let mockLastIndex | ||
| 11 | + const { mocks } = require('./index.js') | ||
| 12 | + const mocksForServer = mocks.map(route => { | ||
| 13 | + return responseFake(route.url, route.type, route.response) | ||
| 14 | + }) | ||
| 15 | + for (const mock of mocksForServer) { | ||
| 16 | + app[mock.type](mock.url, mock.response) | ||
| 17 | + mockLastIndex = app._router.stack.length | ||
| 18 | + } | ||
| 19 | + const mockRoutesLength = Object.keys(mocksForServer).length | ||
| 20 | + return { | ||
| 21 | + mockRoutesLength: mockRoutesLength, | ||
| 22 | + mockStartIndex: mockLastIndex - mockRoutesLength | ||
| 23 | + } | ||
| 24 | +} | ||
| 25 | + | ||
| 26 | +function unregisterRoutes() { | ||
| 27 | + Object.keys(require.cache).forEach(i => { | ||
| 28 | + if (i.includes(mockDir)) { | ||
| 29 | + delete require.cache[require.resolve(i)] | ||
| 30 | + } | ||
| 31 | + }) | ||
| 32 | +} | ||
| 33 | + | ||
| 34 | +// for mock server | ||
| 35 | +const responseFake = (url, type, respond) => { | ||
| 36 | + return { | ||
| 37 | + url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`), | ||
| 38 | + type: type || 'get', | ||
| 39 | + response(req, res) { | ||
| 40 | + console.log('request invoke:' + req.path) | ||
| 41 | + res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond)) | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +module.exports = app => { | ||
| 47 | + // parse app.body | ||
| 48 | + // https://expressjs.com/en/4x/api.html#req.body | ||
| 49 | + app.use(bodyParser.json()) | ||
| 50 | + app.use(bodyParser.urlencoded({ | ||
| 51 | + extended: true | ||
| 52 | + })) | ||
| 53 | + | ||
| 54 | + const mockRoutes = registerRoutes(app) | ||
| 55 | + var mockRoutesLength = mockRoutes.mockRoutesLength | ||
| 56 | + var mockStartIndex = mockRoutes.mockStartIndex | ||
| 57 | + | ||
| 58 | + // watch files, hot reload mock server | ||
| 59 | + chokidar.watch(mockDir, { | ||
| 60 | + ignored: /mock-server/, | ||
| 61 | + ignoreInitial: true | ||
| 62 | + }).on('all', (event, path) => { | ||
| 63 | + if (event === 'change' || event === 'add') { | ||
| 64 | + try { | ||
| 65 | + // remove mock routes stack | ||
| 66 | + app._router.stack.splice(mockStartIndex, mockRoutesLength) | ||
| 67 | + | ||
| 68 | + // clear routes cache | ||
| 69 | + unregisterRoutes() | ||
| 70 | + | ||
| 71 | + const mockRoutes = registerRoutes(app) | ||
| 72 | + mockRoutesLength = mockRoutes.mockRoutesLength | ||
| 73 | + mockStartIndex = mockRoutes.mockStartIndex | ||
| 74 | + | ||
| 75 | + console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`)) | ||
| 76 | + } catch (error) { | ||
| 77 | + console.log(chalk.redBright(error)) | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | + }) | ||
| 81 | +} |
mock/table.js
0 → 100644
| 1 | +const Mock = require('mockjs') | ||
| 2 | + | ||
| 3 | +const data = Mock.mock({ | ||
| 4 | + 'items|30': [{ | ||
| 5 | + id: '@id', | ||
| 6 | + title: '@sentence(10, 20)', | ||
| 7 | + 'status|1': ['published', 'draft', 'deleted'], | ||
| 8 | + author: 'name', | ||
| 9 | + display_time: '@datetime', | ||
| 10 | + pageviews: '@integer(300, 5000)' | ||
| 11 | + }] | ||
| 12 | +}) | ||
| 13 | + | ||
| 14 | +module.exports = [ | ||
| 15 | + { | ||
| 16 | + url: '/vue-admin-template/table/list', | ||
| 17 | + type: 'get', | ||
| 18 | + response: config => { | ||
| 19 | + const items = data.items | ||
| 20 | + return { | ||
| 21 | + code: 20000, | ||
| 22 | + data: { | ||
| 23 | + total: items.length, | ||
| 24 | + items: items | ||
| 25 | + } | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | + } | ||
| 29 | +] |
mock/user.js
0 → 100644
| 1 | + | ||
| 2 | +const tokens = { | ||
| 3 | + admin: { | ||
| 4 | + token: 'admin-token' | ||
| 5 | + }, | ||
| 6 | + editor: { | ||
| 7 | + token: 'editor-token' | ||
| 8 | + } | ||
| 9 | +} | ||
| 10 | + | ||
| 11 | +const users = { | ||
| 12 | + 'admin-token': { | ||
| 13 | + roles: ['admin'], | ||
| 14 | + introduction: 'I am a super administrator', | ||
| 15 | + avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', | ||
| 16 | + name: 'Super Admin' | ||
| 17 | + }, | ||
| 18 | + 'editor-token': { | ||
| 19 | + roles: ['editor'], | ||
| 20 | + introduction: 'I am an editor', | ||
| 21 | + avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', | ||
| 22 | + name: 'Normal Editor' | ||
| 23 | + } | ||
| 24 | +} | ||
| 25 | + | ||
| 26 | +module.exports = [ | ||
| 27 | + // user login | ||
| 28 | + { | ||
| 29 | + url: '/vue-admin-template/user/login', | ||
| 30 | + type: 'post', | ||
| 31 | + response: config => { | ||
| 32 | + const { username } = config.body | ||
| 33 | + const token = tokens[username] | ||
| 34 | + | ||
| 35 | + // mock error | ||
| 36 | + if (!token) { | ||
| 37 | + return { | ||
| 38 | + code: 60204, | ||
| 39 | + message: 'Account and password are incorrect.' | ||
| 40 | + } | ||
| 41 | + } | ||
| 42 | + | ||
| 43 | + return { | ||
| 44 | + code: 20000, | ||
| 45 | + data: token | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | + }, | ||
| 49 | + | ||
| 50 | + // get user info | ||
| 51 | + { | ||
| 52 | + url: '/vue-admin-template/user/info\.*', | ||
| 53 | + type: 'get', | ||
| 54 | + response: config => { | ||
| 55 | + const { token } = config.query | ||
| 56 | + const info = users[token] | ||
| 57 | + | ||
| 58 | + // mock error | ||
| 59 | + if (!info) { | ||
| 60 | + return { | ||
| 61 | + code: 50008, | ||
| 62 | + message: 'Login failed, unable to get user details.' | ||
| 63 | + } | ||
| 64 | + } | ||
| 65 | + | ||
| 66 | + return { | ||
| 67 | + code: 20000, | ||
| 68 | + data: info | ||
| 69 | + } | ||
| 70 | + } | ||
| 71 | + }, | ||
| 72 | + | ||
| 73 | + // user logout | ||
| 74 | + { | ||
| 75 | + url: '/vue-admin-template/user/logout', | ||
| 76 | + type: 'post', | ||
| 77 | + response: _ => { | ||
| 78 | + return { | ||
| 79 | + code: 20000, | ||
| 80 | + data: 'success' | ||
| 81 | + } | ||
| 82 | + } | ||
| 83 | + } | ||
| 84 | +] |
mock/utils.js
0 → 100644
| 1 | +/** | ||
| 2 | + * @param {string} url | ||
| 3 | + * @returns {Object} | ||
| 4 | + */ | ||
| 5 | +function param2Obj(url) { | ||
| 6 | + const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') | ||
| 7 | + if (!search) { | ||
| 8 | + return {} | ||
| 9 | + } | ||
| 10 | + const obj = {} | ||
| 11 | + const searchArr = search.split('&') | ||
| 12 | + searchArr.forEach(v => { | ||
| 13 | + const index = v.indexOf('=') | ||
| 14 | + if (index !== -1) { | ||
| 15 | + const name = v.substring(0, index) | ||
| 16 | + const val = v.substring(index + 1, v.length) | ||
| 17 | + obj[name] = val | ||
| 18 | + } | ||
| 19 | + }) | ||
| 20 | + return obj | ||
| 21 | +} | ||
| 22 | + | ||
| 23 | +module.exports = { | ||
| 24 | + param2Obj | ||
| 25 | +} |
package.json
0 → 100644
| 1 | +{ | ||
| 2 | + "name": "vue-admin-template", | ||
| 3 | + "version": "4.4.0", | ||
| 4 | + "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint", | ||
| 5 | + "author": "Pan <panfree23@gmail.com>", | ||
| 6 | + "scripts": { | ||
| 7 | + "dev": "vue-cli-service serve", | ||
| 8 | + "build:prod": "vue-cli-service build", | ||
| 9 | + "build:stage": "vue-cli-service build --mode staging", | ||
| 10 | + "preview": "node build/index.js --preview", | ||
| 11 | + "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", | ||
| 12 | + "lint": "eslint --ext .js,.vue src", | ||
| 13 | + "test:unit": "jest --clearCache && vue-cli-service test:unit", | ||
| 14 | + "test:ci": "npm run lint && npm run test:unit" | ||
| 15 | + }, | ||
| 16 | + "dependencies": { | ||
| 17 | + "axios": "0.18.1", | ||
| 18 | + "core-js": "3.6.5", | ||
| 19 | + "element-plus": "^1.2.0-beta.5", | ||
| 20 | + "element-ui": "2.13.2", | ||
| 21 | + "js-cookie": "2.2.0", | ||
| 22 | + "normalize.css": "7.0.0", | ||
| 23 | + "nprogress": "0.2.0", | ||
| 24 | + "path-to-regexp": "2.4.0", | ||
| 25 | + "vue": "2.6.10", | ||
| 26 | + "vue-router": "3.0.6", | ||
| 27 | + "vuedraggable": "^2.24.3", | ||
| 28 | + "vuex": "3.1.0" | ||
| 29 | + }, | ||
| 30 | + "devDependencies": { | ||
| 31 | + "@vue/cli-plugin-babel": "4.4.4", | ||
| 32 | + "@vue/cli-plugin-eslint": "4.4.4", | ||
| 33 | + "@vue/cli-plugin-unit-jest": "4.4.4", | ||
| 34 | + "@vue/cli-service": "4.4.4", | ||
| 35 | + "@vue/test-utils": "1.0.0-beta.29", | ||
| 36 | + "autoprefixer": "9.5.1", | ||
| 37 | + "babel-eslint": "10.1.0", | ||
| 38 | + "babel-jest": "23.6.0", | ||
| 39 | + "babel-plugin-dynamic-import-node": "2.3.3", | ||
| 40 | + "chalk": "2.4.2", | ||
| 41 | + "connect": "3.6.6", | ||
| 42 | + "eslint": "6.7.2", | ||
| 43 | + "eslint-plugin-vue": "6.2.2", | ||
| 44 | + "html-webpack-plugin": "3.2.0", | ||
| 45 | + "mockjs": "1.0.1-beta3", | ||
| 46 | + "runjs": "4.3.2", | ||
| 47 | + "sass": "1.26.8", | ||
| 48 | + "sass-loader": "8.0.2", | ||
| 49 | + "script-ext-html-webpack-plugin": "2.1.3", | ||
| 50 | + "serve-static": "1.13.2", | ||
| 51 | + "svg-sprite-loader": "4.1.3", | ||
| 52 | + "svgo": "1.2.2", | ||
| 53 | + "vue-template-compiler": "2.6.10" | ||
| 54 | + }, | ||
| 55 | + "browserslist": [ | ||
| 56 | + "> 1%", | ||
| 57 | + "last 2 versions" | ||
| 58 | + ], | ||
| 59 | + "engines": { | ||
| 60 | + "node": ">=8.9", | ||
| 61 | + "npm": ">= 3.0.0" | ||
| 62 | + }, | ||
| 63 | + "license": "MIT" | ||
| 64 | +} |
postcss.config.js
0 → 100644
public/favicon.ico
0 → 100644
No preview for this file type
public/index.html
0 → 100644
| 1 | +<!DOCTYPE html> | ||
| 2 | +<html> | ||
| 3 | + <head> | ||
| 4 | + <meta charset="utf-8"> | ||
| 5 | + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> | ||
| 7 | + <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | ||
| 8 | + <title><%= webpackConfig.name %></title> | ||
| 9 | + </head> | ||
| 10 | + <body> | ||
| 11 | + <noscript> | ||
| 12 | + <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> | ||
| 13 | + </noscript> | ||
| 14 | + <div id="app"></div> | ||
| 15 | + <!-- built files will be auto injected --> | ||
| 16 | + </body> | ||
| 17 | +</html> |
src/App.vue
0 → 100644
src/api/QuestionBank.js
0 → 100644
| 1 | +import request from '@/utils/request' | ||
| 2 | + | ||
| 3 | +export function getQuestionList(params) { | ||
| 4 | + return request({ | ||
| 5 | + url: `/QuestionBank/SelectQuestionBankList?pageIndex=${params.pageIndex}&pageSize=${params.pageSize}&sort=${params.sort}&sortOrder=${params.sortOrder}`, | ||
| 6 | + method: 'post', | ||
| 7 | + data: params | ||
| 8 | + }) | ||
| 9 | +} | ||
| 10 | +//维护题目，包含添加和修改 | ||
| 11 | +export function EditQuestion(params) { | ||
| 12 | + return request({ | ||
| 13 | + url: `/QuestionBank/EditQuestionBankEvent`, | ||
| 14 | + method: 'post', | ||
| 15 | + data: params | ||
| 16 | + }) | ||
| 17 | +} | ||
| 18 | + | ||
| 19 | +export function getQuestionClassList(params) { | ||
| 20 | + return request({ | ||
| 21 | + url: `/QuestionClass/List?pageIndex=1&pageSize=1000`, | ||
| 22 | + method: 'get', | ||
| 23 | + }) | ||
| 24 | +} | ||
| 25 | + | ||
| 26 | +export function CreateQuestionClass(params) { | ||
| 27 | + return request({ | ||
| 28 | + url: `/QuestionClass/Create`, | ||
| 29 | + method: 'post', | ||
| 30 | + data:params | ||
| 31 | + }) | ||
| 32 | +} | ||
| 33 | + | ||
| 34 | +//删除题目,标记删除 | ||
| 35 | +export function DelQuestionBankEvent(id) { | ||
| 36 | + return request({ | ||
| 37 | + url: `/QuestionBank/DelQuestionBankEvent/${id}`, | ||
| 38 | + method: 'post', | ||
| 39 | + }) | ||
| 40 | +} | ||
| 41 | +//读取题目信息 | ||
| 42 | +export function GetQuestionBankById(id) { | ||
| 43 | + return request({ | ||
| 44 | + url: `/QuestionBank/Get/${id}`, | ||
| 45 | + method: 'get', | ||
| 46 | + }) | ||
| 47 | +} | ||
| 0 | \ No newline at end of file | 48 | \ No newline at end of file |
src/api/TestPaper.js
0 → 100644
| 1 | +import request from '@/utils/request' | ||
| 2 | +//编辑试卷 | ||
| 3 | +export function EditTestPaper(params) { | ||
| 4 | + return request({ | ||
| 5 | + url: `/TestPaper/AddTestPaper`, | ||
| 6 | + method: 'post', | ||
| 7 | + data: params | ||
| 8 | + }) | ||
| 9 | +} | ||
| 10 | + | ||
| 11 | +export function getTestPaperList(params) { | ||
| 12 | + return request({ | ||
| 13 | + url: `/TestPaper/List?pageIndex=${params.pageIndex}&pageSize=${params.pageSize}&sort=${params.sort}&sortOrder=${params.sortOrder}`, | ||
| 14 | + method: 'get', | ||
| 15 | + data: params | ||
| 16 | + }) | ||
| 17 | +} | ||
| 18 | +export function getTestPaperClassList(params) { | ||
| 19 | + return request({ | ||
| 20 | + url: `/TestPaperClass/List?pageIndex=${params.pageIndex}&pageSize=${params.pageSize}`, | ||
| 21 | + method: 'get', | ||
| 22 | + data: params | ||
| 23 | + }) | ||
| 24 | +} | ||
| 25 | +//获取分类信息 | ||
| 26 | +export function GetTestPaperClassById(id) { | ||
| 27 | + return request({ | ||
| 28 | + url: `/TestPaperClass/Get/${id}`, | ||
| 29 | + method: 'get', | ||
| 30 | + }) | ||
| 31 | +} | ||
| 32 | +export function UpdateTestPaperClass(params) { | ||
| 33 | + return request({ | ||
| 34 | + url: `/TestPaperClass/Update`, | ||
| 35 | + method: 'post', | ||
| 36 | + data: params | ||
| 37 | + }) | ||
| 38 | +} | ||
| 39 | +export function DeleteTestPaperClass(ids) { | ||
| 40 | + return request({ | ||
| 41 | + url: `/TestPaperClass/Delete?ids=${ids}`, | ||
| 42 | + method: 'post', | ||
| 43 | + }) | ||
| 44 | +} | ||
| 45 | +export function CreateTestPaperClass(params) { | ||
| 46 | + return request({ | ||
| 47 | + url: `/TestPaperClass/Create`, | ||
| 48 | + method: 'post', | ||
| 49 | + data: params | ||
| 50 | + }) | ||
| 51 | +} | ||
| 52 | +export function GetToplevel() { | ||
| 53 | + return request({ | ||
| 54 | + url: `/TestPaperClass/GetToplevel`, | ||
| 55 | + method: 'get', | ||
| 56 | + }) | ||
| 57 | +} |
src/api/index.js
0 → 100644
| 1 | +import request from '@/utils/request' | ||
| 2 | + | ||
| 3 | +//读取题目总和 | ||
| 4 | +export function GetQuestionTotal(params) { | ||
| 5 | + return request({ | ||
| 6 | + url: `/QuestionBank/GetQuestionTotal`, | ||
| 7 | + method: 'get', | ||
| 8 | + }) | ||
| 9 | +} | ||
| 10 | + | ||
| 11 | +//读取试卷总和 | ||
| 12 | +export function GetTestPaperTotal(params) { | ||
| 13 | + return request({ | ||
| 14 | + url: `/TestPaper/GetTestPaperTotal`, | ||
| 15 | + method: 'get', | ||
| 16 | + }) | ||
| 17 | +} | ||
| 0 | \ No newline at end of file | 18 | \ No newline at end of file |
src/api/user.js
0 → 100644
| 1 | +import request from '@/utils/request' | ||
| 2 | + | ||
| 3 | +export function login(data) { | ||
| 4 | + return request({ | ||
| 5 | + url: `/Account/SystemLogin?username=${data.username}&password=${data.password}`, | ||
| 6 | + method: 'post', | ||
| 7 | + data | ||
| 8 | + }) | ||
| 9 | +} | ||
| 10 | + | ||
| 11 | +export function getInfo(token) { | ||
| 12 | + return request({ | ||
| 13 | + url: `/users/userInfo`, | ||
| 14 | + method: 'get', | ||
| 15 | + params: { | ||
| 16 | + token | ||
| 17 | + } | ||
| 18 | + }) | ||
| 19 | +} | ||
| 20 | + | ||
| 21 | + | ||
| 22 | +export function ImportUserByExcel(token) { | ||
| 23 | + return request({ | ||
| 24 | + url: `/Account/ImportUser`, | ||
| 25 | + method: 'post' | ||
| 26 | + }) | ||
| 27 | +} | ||
| 28 | + | ||
| 29 | +export function logout() { | ||
| 30 | + return request({ | ||
| 31 | + url: '/vue-admin-template/user/logout', | ||
| 32 | + method: 'post' | ||
| 33 | + }) | ||
| 34 | +} |
src/assets/404_images/404.png
0 → 100644
95.8 KB
src/assets/404_images/404_cloud.png
0 → 100644
4.65 KB
src/components/Breadcrumb/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <el-breadcrumb class="app-breadcrumb" separator="/"> | ||
| 3 | + <transition-group name="breadcrumb"> | ||
| 4 | + <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"> | ||
| 5 | + <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span> | ||
| 6 | + <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> | ||
| 7 | + </el-breadcrumb-item> | ||
| 8 | + </transition-group> | ||
| 9 | + </el-breadcrumb> | ||
| 10 | +</template> | ||
| 11 | + | ||
| 12 | +<script> | ||
| 13 | +import pathToRegexp from 'path-to-regexp' | ||
| 14 | + | ||
| 15 | +export default { | ||
| 16 | + data() { | ||
| 17 | + return { | ||
| 18 | + levelList: null | ||
| 19 | + } | ||
| 20 | + }, | ||
| 21 | + watch: { | ||
| 22 | + $route() { | ||
| 23 | + this.getBreadcrumb() | ||
| 24 | + } | ||
| 25 | + }, | ||
| 26 | + created() { | ||
| 27 | + this.getBreadcrumb() | ||
| 28 | + }, | ||
| 29 | + methods: { | ||
| 30 | + getBreadcrumb() { | ||
| 31 | + // only show routes with meta.title | ||
| 32 | + let matched = this.$route.matched.filter(item => item.meta && item.meta.title) | ||
| 33 | + const first = matched[0] | ||
| 34 | + | ||
| 35 | + if (!this.isDashboard(first)) { | ||
| 36 | + matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) | ||
| 37 | + } | ||
| 38 | + | ||
| 39 | + this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) | ||
| 40 | + }, | ||
| 41 | + isDashboard(route) { | ||
| 42 | + const name = route && route.name | ||
| 43 | + if (!name) { | ||
| 44 | + return false | ||
| 45 | + } | ||
| 46 | + return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() | ||
| 47 | + }, | ||
| 48 | + pathCompile(path) { | ||
| 49 | + // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 | ||
| 50 | + const { params } = this.$route | ||
| 51 | + var toPath = pathToRegexp.compile(path) | ||
| 52 | + return toPath(params) | ||
| 53 | + }, | ||
| 54 | + handleLink(item) { | ||
| 55 | + const { redirect, path } = item | ||
| 56 | + if (redirect) { | ||
| 57 | + this.$router.push(redirect) | ||
| 58 | + return | ||
| 59 | + } | ||
| 60 | + this.$router.push(this.pathCompile(path)) | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | +} | ||
| 64 | +</script> | ||
| 65 | + | ||
| 66 | +<style lang="scss" scoped> | ||
| 67 | +.app-breadcrumb.el-breadcrumb { | ||
| 68 | + display: inline-block; | ||
| 69 | + font-size: 14px; | ||
| 70 | + line-height: 50px; | ||
| 71 | + margin-left: 8px; | ||
| 72 | + | ||
| 73 | + .no-redirect { | ||
| 74 | + color: #97a8be; | ||
| 75 | + cursor: text; | ||
| 76 | + } | ||
| 77 | +} | ||
| 78 | +</style> |
src/components/Hamburger/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div style="padding: 0 15px;" @click="toggleClick"> | ||
| 3 | + <svg | ||
| 4 | + :class="{'is-active':isActive}" | ||
| 5 | + class="hamburger" | ||
| 6 | + viewBox="0 0 1024 1024" | ||
| 7 | + xmlns="http://www.w3.org/2000/svg" | ||
| 8 | + width="64" | ||
| 9 | + height="64" | ||
| 10 | + > | ||
| 11 | + <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" /> | ||
| 12 | + </svg> | ||
| 13 | + </div> | ||
| 14 | +</template> | ||
| 15 | + | ||
| 16 | +<script> | ||
| 17 | +export default { | ||
| 18 | + name: 'Hamburger', | ||
| 19 | + props: { | ||
| 20 | + isActive: { | ||
| 21 | + type: Boolean, | ||
| 22 | + default: false | ||
| 23 | + } | ||
| 24 | + }, | ||
| 25 | + methods: { | ||
| 26 | + toggleClick() { | ||
| 27 | + this.$emit('toggleClick') | ||
| 28 | + } | ||
| 29 | + } | ||
| 30 | +} | ||
| 31 | +</script> | ||
| 32 | + | ||
| 33 | +<style scoped> | ||
| 34 | +.hamburger { | ||
| 35 | + display: inline-block; | ||
| 36 | + vertical-align: middle; | ||
| 37 | + width: 20px; | ||
| 38 | + height: 20px; | ||
| 39 | +} | ||
| 40 | + | ||
| 41 | +.hamburger.is-active { | ||
| 42 | + transform: rotate(180deg); | ||
| 43 | +} | ||
| 44 | +</style> |
src/components/SvgIcon/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" /> | ||
| 3 | + <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners"> | ||
| 4 | + <use :xlink:href="iconName" /> | ||
| 5 | + </svg> | ||
| 6 | +</template> | ||
| 7 | + | ||
| 8 | +<script> | ||
| 9 | +// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage | ||
| 10 | +import { isExternal } from '@/utils/validate' | ||
| 11 | + | ||
| 12 | +export default { | ||
| 13 | + name: 'SvgIcon', | ||
| 14 | + props: { | ||
| 15 | + iconClass: { | ||
| 16 | + type: String, | ||
| 17 | + required: true | ||
| 18 | + }, | ||
| 19 | + className: { | ||
| 20 | + type: String, | ||
| 21 | + default: '' | ||
| 22 | + } | ||
| 23 | + }, | ||
| 24 | + computed: { | ||
| 25 | + isExternal() { | ||
| 26 | + return isExternal(this.iconClass) | ||
| 27 | + }, | ||
| 28 | + iconName() { | ||
| 29 | + return `#icon-${this.iconClass}` | ||
| 30 | + }, | ||
| 31 | + svgClass() { | ||
| 32 | + if (this.className) { | ||
| 33 | + return 'svg-icon ' + this.className | ||
| 34 | + } else { | ||
| 35 | + return 'svg-icon' | ||
| 36 | + } | ||
| 37 | + }, | ||
| 38 | + styleExternalIcon() { | ||
| 39 | + return { | ||
| 40 | + mask: `url(${this.iconClass}) no-repeat 50% 50%`, | ||
| 41 | + '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%` | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + } | ||
| 45 | +} | ||
| 46 | +</script> | ||
| 47 | + | ||
| 48 | +<style scoped> | ||
| 49 | +.svg-icon { | ||
| 50 | + width: 1em; | ||
| 51 | + height: 1em; | ||
| 52 | + vertical-align: -0.15em; | ||
| 53 | + fill: currentColor; | ||
| 54 | + overflow: hidden; | ||
| 55 | +} | ||
| 56 | + | ||
| 57 | +.svg-external-icon { | ||
| 58 | + background-color: currentColor; | ||
| 59 | + mask-size: cover!important; | ||
| 60 | + display: inline-block; | ||
| 61 | +} | ||
| 62 | +</style> |
src/icons/index.js
0 → 100644
| 1 | +import Vue from 'vue' | ||
| 2 | +import SvgIcon from '@/components/SvgIcon'// svg component | ||
| 3 | + | ||
| 4 | +// register globally | ||
| 5 | +Vue.component('svg-icon', SvgIcon) | ||
| 6 | + | ||
| 7 | +const req = require.context('./svg', false, /\.svg$/) | ||
| 8 | +const requireAll = requireContext => requireContext.keys().map(requireContext) | ||
| 9 | +requireAll(req) |
src/icons/svg/dashboard.svg
0 → 100644
| 1 | +<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/example.svg
0 → 100644
| 1 | +<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/eye-open.svg
0 → 100644
| 1 | +<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/eye.svg
0 → 100644
| 1 | +<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/form.svg
0 → 100644
| 1 | +<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/link.svg
0 → 100644
| 1 | +<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/nested.svg
0 → 100644
| 1 | +<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/password.svg
0 → 100644
| 1 | +<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/table.svg
0 → 100644
| 1 | +<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/tree.svg
0 → 100644
| 1 | +<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svg/user.svg
0 → 100644
| 1 | +<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg> | ||
| 0 | \ No newline at end of file | 2 | \ No newline at end of file |
src/icons/svgo.yml
0 → 100644
src/layout/components/AppMain.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <section class="app-main"> | ||
| 3 | + <transition name="fade-transform" mode="out-in"> | ||
| 4 | + <router-view :key="key" /> | ||
| 5 | + </transition> | ||
| 6 | + </section> | ||
| 7 | +</template> | ||
| 8 | + | ||
| 9 | +<script> | ||
| 10 | +export default { | ||
| 11 | + name: 'AppMain', | ||
| 12 | + computed: { | ||
| 13 | + key() { | ||
| 14 | + return this.$route.path | ||
| 15 | + } | ||
| 16 | + } | ||
| 17 | +} | ||
| 18 | +</script> | ||
| 19 | + | ||
| 20 | +<style scoped> | ||
| 21 | +.app-main { | ||
| 22 | + /*50 = navbar */ | ||
| 23 | + min-height: calc(100vh - 50px); | ||
| 24 | + width: 100%; | ||
| 25 | + position: relative; | ||
| 26 | + overflow: hidden; | ||
| 27 | +} | ||
| 28 | +.fixed-header+.app-main { | ||
| 29 | + padding-top: 50px; | ||
| 30 | +} | ||
| 31 | +</style> | ||
| 32 | + | ||
| 33 | +<style lang="scss"> | ||
| 34 | +// fix css style bug in open el-dialog | ||
| 35 | +.el-popup-parent--hidden { | ||
| 36 | + .fixed-header { | ||
| 37 | + padding-right: 15px; | ||
| 38 | + } | ||
| 39 | +} | ||
| 40 | +</style> |
src/layout/components/Navbar.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="navbar"> | ||
| 3 | + <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> | ||
| 4 | + | ||
| 5 | + <breadcrumb class="breadcrumb-container" /> | ||
| 6 | + | ||
| 7 | + <div class="right-menu"> | ||
| 8 | + <el-dropdown class="avatar-container" trigger="click"> | ||
| 9 | + <div class="avatar-wrapper"> | ||
| 10 | + <span>您好</span> | ||
| 11 | + <i class="el-icon-caret-bottom" style="margin-top: -7px;" /> | ||
| 12 | + </div> | ||
| 13 | + <el-dropdown-menu slot="dropdown" class="user-dropdown"> | ||
| 14 | + <el-dropdown-item divided @click.native="logout"> | ||
| 15 | + <span style="display:block;">退出</span> | ||
| 16 | + </el-dropdown-item> | ||
| 17 | + </el-dropdown-menu> | ||
| 18 | + </el-dropdown> | ||
| 19 | + </div> | ||
| 20 | + </div> | ||
| 21 | +</template> | ||
| 22 | + | ||
| 23 | +<script> | ||
| 24 | +import { mapGetters } from 'vuex' | ||
| 25 | +import Breadcrumb from '@/components/Breadcrumb' | ||
| 26 | +import Hamburger from '@/components/Hamburger' | ||
| 27 | + | ||
| 28 | +export default { | ||
| 29 | + components: { | ||
| 30 | + Breadcrumb, | ||
| 31 | + Hamburger | ||
| 32 | + }, | ||
| 33 | + computed: { | ||
| 34 | + ...mapGetters([ | ||
| 35 | + 'sidebar', | ||
| 36 | + 'avatar' | ||
| 37 | + ]) | ||
| 38 | + }, | ||
| 39 | + methods: { | ||
| 40 | + toggleSideBar() { | ||
| 41 | + this.$store.dispatch('app/toggleSideBar') | ||
| 42 | + }, | ||
| 43 | + async logout() { | ||
| 44 | + await this.$store.dispatch('user/logout') | ||
| 45 | + this.$router.push(`/login?redirect=${this.$route.fullPath}`) | ||
| 46 | + } | ||
| 47 | + } | ||
| 48 | +} | ||
| 49 | +</script> | ||
| 50 | + | ||
| 51 | +<style lang="scss" scoped> | ||
| 52 | +.navbar { | ||
| 53 | + height: 50px; | ||
| 54 | + overflow: hidden; | ||
| 55 | + position: relative; | ||
| 56 | + background: #fff; | ||
| 57 | + box-shadow: 0 1px 4px rgba(0,21,41,.08); | ||
| 58 | + | ||
| 59 | + .hamburger-container { | ||
| 60 | + line-height: 46px; | ||
| 61 | + height: 100%; | ||
| 62 | + float: left; | ||
| 63 | + cursor: pointer; | ||
| 64 | + transition: background .3s; | ||
| 65 | + -webkit-tap-highlight-color:transparent; | ||
| 66 | + | ||
| 67 | + &:hover { | ||
| 68 | + background: rgba(0, 0, 0, .025) | ||
| 69 | + } | ||
| 70 | + } | ||
| 71 | + | ||
| 72 | + .breadcrumb-container { | ||
| 73 | + float: left; | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + .right-menu { | ||
| 77 | + float: right; | ||
| 78 | + height: 100%; | ||
| 79 | + line-height: 50px; | ||
| 80 | + | ||
| 81 | + &:focus { | ||
| 82 | + outline: none; | ||
| 83 | + } | ||
| 84 | + | ||
| 85 | + .right-menu-item { | ||
| 86 | + display: inline-block; | ||
| 87 | + padding: 0 8px; | ||
| 88 | + height: 100%; | ||
| 89 | + font-size: 18px; | ||
| 90 | + color: #5a5e66; | ||
| 91 | + vertical-align: text-bottom; | ||
| 92 | + | ||
| 93 | + &.hover-effect { | ||
| 94 | + cursor: pointer; | ||
| 95 | + transition: background .3s; | ||
| 96 | + | ||
| 97 | + &:hover { | ||
| 98 | + background: rgba(0, 0, 0, .025) | ||
| 99 | + } | ||
| 100 | + } | ||
| 101 | + } | ||
| 102 | + | ||
| 103 | + .avatar-container { | ||
| 104 | + margin-right: 30px; | ||
| 105 | + | ||
| 106 | + .avatar-wrapper { | ||
| 107 | + margin-top: 5px; | ||
| 108 | + position: relative; | ||
| 109 | + | ||
| 110 | + .user-avatar { | ||
| 111 | + cursor: pointer; | ||
| 112 | + width: 40px; | ||
| 113 | + height: 40px; | ||
| 114 | + border-radius: 10px; | ||
| 115 | + } | ||
| 116 | + | ||
| 117 | + .el-icon-caret-bottom { | ||
| 118 | + cursor: pointer; | ||
| 119 | + position: absolute; | ||
| 120 | + right: -20px; | ||
| 121 | + top: 25px; | ||
| 122 | + font-size: 12px; | ||
| 123 | + } | ||
| 124 | + } | ||
| 125 | + } | ||
| 126 | + } | ||
| 127 | +} | ||
| 128 | +</style> |
src/layout/components/Sidebar/FixiOSBug.js
0 → 100644
| 1 | +export default { | ||
| 2 | + computed: { | ||
| 3 | + device() { | ||
| 4 | + return this.$store.state.app.device | ||
| 5 | + } | ||
| 6 | + }, | ||
| 7 | + mounted() { | ||
| 8 | + // In order to fix the click on menu on the ios device will trigger the mouseleave bug | ||
| 9 | + // https://github.com/PanJiaChen/vue-element-admin/issues/1135 | ||
| 10 | + this.fixBugIniOS() | ||
| 11 | + }, | ||
| 12 | + methods: { | ||
| 13 | + fixBugIniOS() { | ||
| 14 | + const $subMenu = this.$refs.subMenu | ||
| 15 | + if ($subMenu) { | ||
| 16 | + const handleMouseleave = $subMenu.handleMouseleave | ||
| 17 | + $subMenu.handleMouseleave = (e) => { | ||
| 18 | + if (this.device === 'mobile') { | ||
| 19 | + return | ||
| 20 | + } | ||
| 21 | + handleMouseleave(e) | ||
| 22 | + } | ||
| 23 | + } | ||
| 24 | + } | ||
| 25 | + } | ||
| 26 | +} |
src/layout/components/Sidebar/Item.vue
0 → 100644
| 1 | +<script> | ||
| 2 | +export default { | ||
| 3 | + name: 'MenuItem', | ||
| 4 | + functional: true, | ||
| 5 | + props: { | ||
| 6 | + icon: { | ||
| 7 | + type: String, | ||
| 8 | + default: '' | ||
| 9 | + }, | ||
| 10 | + title: { | ||
| 11 | + type: String, | ||
| 12 | + default: '' | ||
| 13 | + } | ||
| 14 | + }, | ||
| 15 | + render(h, context) { | ||
| 16 | + const { icon, title } = context.props | ||
| 17 | + const vnodes = [] | ||
| 18 | + | ||
| 19 | + if (icon) { | ||
| 20 | + if (icon.includes('el-icon')) { | ||
| 21 | + vnodes.push(<i class={[icon, 'sub-el-icon']} />) | ||
| 22 | + } else { | ||
| 23 | + vnodes.push(<svg-icon icon-class={icon}/>) | ||
| 24 | + } | ||
| 25 | + } | ||
| 26 | + | ||
| 27 | + if (title) { | ||
| 28 | + vnodes.push(<span slot='title'>{(title)}</span>) | ||
| 29 | + } | ||
| 30 | + return vnodes | ||
| 31 | + } | ||
| 32 | +} | ||
| 33 | +</script> | ||
| 34 | + | ||
| 35 | +<style scoped> | ||
| 36 | +.sub-el-icon { | ||
| 37 | + color: currentColor; | ||
| 38 | + width: 1em; | ||
| 39 | + height: 1em; | ||
| 40 | +} | ||
| 41 | +</style> |
src/layout/components/Sidebar/Link.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <component :is="type" v-bind="linkProps(to)"> | ||
| 3 | + <slot /> | ||
| 4 | + </component> | ||
| 5 | +</template> | ||
| 6 | + | ||
| 7 | +<script> | ||
| 8 | +import { isExternal } from '@/utils/validate' | ||
| 9 | + | ||
| 10 | +export default { | ||
| 11 | + props: { | ||
| 12 | + to: { | ||
| 13 | + type: String, | ||
| 14 | + required: true | ||
| 15 | + } | ||
| 16 | + }, | ||
| 17 | + computed: { | ||
| 18 | + isExternal() { | ||
| 19 | + return isExternal(this.to) | ||
| 20 | + }, | ||
| 21 | + type() { | ||
| 22 | + if (this.isExternal) { | ||
| 23 | + return 'a' | ||
| 24 | + } | ||
| 25 | + return 'router-link' | ||
| 26 | + } | ||
| 27 | + }, | ||
| 28 | + methods: { | ||
| 29 | + linkProps(to) { | ||
| 30 | + if (this.isExternal) { | ||
| 31 | + return { | ||
| 32 | + href: to, | ||
| 33 | + target: '_blank', | ||
| 34 | + rel: 'noopener' | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | + return { | ||
| 38 | + to: to | ||
| 39 | + } | ||
| 40 | + } | ||
| 41 | + } | ||
| 42 | +} | ||
| 43 | +</script> |
src/layout/components/Sidebar/Logo.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="sidebar-logo-container" :class="{'collapse':collapse}"> | ||
| 3 | + <transition name="sidebarLogoFade"> | ||
| 4 | + <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> | ||
| 5 | + <img v-if="logo" :src="logo" class="sidebar-logo"> | ||
| 6 | + <h1 v-else class="sidebar-title">{{ title }} </h1> | ||
| 7 | + </router-link> | ||
| 8 | + <router-link v-else key="expand" class="sidebar-logo-link" to="/"> | ||
| 9 | + <img v-if="logo" :src="logo" class="sidebar-logo"> | ||
| 10 | + <h1 class="sidebar-title">{{ title }} </h1> | ||
| 11 | + </router-link> | ||
| 12 | + </transition> | ||
| 13 | + </div> | ||
| 14 | +</template> | ||
| 15 | + | ||
| 16 | +<script> | ||
| 17 | +export default { | ||
| 18 | + name: 'SidebarLogo', | ||
| 19 | + props: { | ||
| 20 | + collapse: { | ||
| 21 | + type: Boolean, | ||
| 22 | + required: true | ||
| 23 | + } | ||
| 24 | + }, | ||
| 25 | + data() { | ||
| 26 | + return { | ||
| 27 | + title: 'Vue Admin Template', | ||
| 28 | + logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png' | ||
| 29 | + } | ||
| 30 | + } | ||
| 31 | +} | ||
| 32 | +</script> | ||
| 33 | + | ||
| 34 | +<style lang="scss" scoped> | ||
| 35 | +.sidebarLogoFade-enter-active { | ||
| 36 | + transition: opacity 1.5s; | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +.sidebarLogoFade-enter, | ||
| 40 | +.sidebarLogoFade-leave-to { | ||
| 41 | + opacity: 0; | ||
| 42 | +} | ||
| 43 | + | ||
| 44 | +.sidebar-logo-container { | ||
| 45 | + position: relative; | ||
| 46 | + width: 100%; | ||
| 47 | + height: 50px; | ||
| 48 | + line-height: 50px; | ||
| 49 | + background: #2b2f3a; | ||
| 50 | + text-align: center; | ||
| 51 | + overflow: hidden; | ||
| 52 | + | ||
| 53 | + & .sidebar-logo-link { | ||
| 54 | + height: 100%; | ||
| 55 | + width: 100%; | ||
| 56 | + | ||
| 57 | + & .sidebar-logo { | ||
| 58 | + width: 32px; | ||
| 59 | + height: 32px; | ||
| 60 | + vertical-align: middle; | ||
| 61 | + margin-right: 12px; | ||
| 62 | + } | ||
| 63 | + | ||
| 64 | + & .sidebar-title { | ||
| 65 | + display: inline-block; | ||
| 66 | + margin: 0; | ||
| 67 | + color: #fff; | ||
| 68 | + font-weight: 600; | ||
| 69 | + line-height: 50px; | ||
| 70 | + font-size: 14px; | ||
| 71 | + font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; | ||
| 72 | + vertical-align: middle; | ||
| 73 | + } | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + &.collapse { | ||
| 77 | + .sidebar-logo { | ||
| 78 | + margin-right: 0px; | ||
| 79 | + } | ||
| 80 | + } | ||
| 81 | +} | ||
| 82 | +</style> |
src/layout/components/Sidebar/SidebarItem.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div v-if="!item.hidden"> | ||
| 3 | + <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"> | ||
| 4 | + <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"> | ||
| 5 | + <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> | ||
| 6 | + <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> | ||
| 7 | + </el-menu-item> | ||
| 8 | + </app-link> | ||
| 9 | + </template> | ||
| 10 | + | ||
| 11 | + <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body> | ||
| 12 | + <template slot="title"> | ||
| 13 | + <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" /> | ||
| 14 | + </template> | ||
| 15 | + <sidebar-item | ||
| 16 | + v-for="child in item.children" | ||
| 17 | + :key="child.path" | ||
| 18 | + :is-nest="true" | ||
| 19 | + :item="child" | ||
| 20 | + :base-path="resolvePath(child.path)" | ||
| 21 | + class="nest-menu" | ||
| 22 | + /> | ||
| 23 | + </el-submenu> | ||
| 24 | + </div> | ||
| 25 | +</template> | ||
| 26 | + | ||
| 27 | +<script> | ||
| 28 | +import path from 'path' | ||
| 29 | +import { isExternal } from '@/utils/validate' | ||
| 30 | +import Item from './Item' | ||
| 31 | +import AppLink from './Link' | ||
| 32 | +import FixiOSBug from './FixiOSBug' | ||
| 33 | + | ||
| 34 | +export default { | ||
| 35 | + name: 'SidebarItem', | ||
| 36 | + components: { Item, AppLink }, | ||
| 37 | + mixins: [FixiOSBug], | ||
| 38 | + props: { | ||
| 39 | + // route object | ||
| 40 | + item: { | ||
| 41 | + type: Object, | ||
| 42 | + required: true | ||
| 43 | + }, | ||
| 44 | + isNest: { | ||
| 45 | + type: Boolean, | ||
| 46 | + default: false | ||
| 47 | + }, | ||
| 48 | + basePath: { | ||
| 49 | + type: String, | ||
| 50 | + default: '' | ||
| 51 | + } | ||
| 52 | + }, | ||
| 53 | + data() { | ||
| 54 | + // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237 | ||
| 55 | + // TODO: refactor with render function | ||
| 56 | + this.onlyOneChild = null | ||
| 57 | + return {} | ||
| 58 | + }, | ||
| 59 | + methods: { | ||
| 60 | + hasOneShowingChild(children = [], parent) { | ||
| 61 | + const showingChildren = children.filter(item => { | ||
| 62 | + if (item.hidden) { | ||
| 63 | + return false | ||
| 64 | + } else { | ||
| 65 | + // Temp set(will be used if only has one showing child) | ||
| 66 | + this.onlyOneChild = item | ||
| 67 | + return true | ||
| 68 | + } | ||
| 69 | + }) | ||
| 70 | + | ||
| 71 | + // When there is only one child router, the child router is displayed by default | ||
| 72 | + if (showingChildren.length === 1) { | ||
| 73 | + return true | ||
| 74 | + } | ||
| 75 | + | ||
| 76 | + // Show parent if there are no child router to display | ||
| 77 | + if (showingChildren.length === 0) { | ||
| 78 | + this.onlyOneChild = { ... parent, path: '', noShowingChildren: true } | ||
| 79 | + return true | ||
| 80 | + } | ||
| 81 | + | ||
| 82 | + return false | ||
| 83 | + }, | ||
| 84 | + resolvePath(routePath) { | ||
| 85 | + if (isExternal(routePath)) { | ||
| 86 | + return routePath | ||
| 87 | + } | ||
| 88 | + if (isExternal(this.basePath)) { | ||
| 89 | + return this.basePath | ||
| 90 | + } | ||
| 91 | + return path.resolve(this.basePath, routePath) | ||
| 92 | + } | ||
| 93 | + } | ||
| 94 | +} | ||
| 95 | +</script> |
src/layout/components/Sidebar/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div :class="{'has-logo':showLogo}"> | ||
| 3 | + <logo v-if="showLogo" :collapse="isCollapse" /> | ||
| 4 | + <el-scrollbar wrap-class="scrollbar-wrapper"> | ||
| 5 | + <el-menu | ||
| 6 | + :default-active="activeMenu" | ||
| 7 | + :collapse="isCollapse" | ||
| 8 | + :background-color="variables.menuBg" | ||
| 9 | + :text-color="variables.menuText" | ||
| 10 | + :unique-opened="false" | ||
| 11 | + :active-text-color="variables.menuActiveText" | ||
| 12 | + :collapse-transition="false" | ||
| 13 | + mode="vertical" | ||
| 14 | + > | ||
| 15 | + <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" /> | ||
| 16 | + </el-menu> | ||
| 17 | + </el-scrollbar> | ||
| 18 | + </div> | ||
| 19 | +</template> | ||
| 20 | + | ||
| 21 | +<script> | ||
| 22 | +import { mapGetters } from 'vuex' | ||
| 23 | +import Logo from './Logo' | ||
| 24 | +import SidebarItem from './SidebarItem' | ||
| 25 | +import variables from '@/styles/variables.scss' | ||
| 26 | + | ||
| 27 | +export default { | ||
| 28 | + components: { SidebarItem, Logo }, | ||
| 29 | + computed: { | ||
| 30 | + ...mapGetters([ | ||
| 31 | + 'sidebar' | ||
| 32 | + ]), | ||
| 33 | + routes() { | ||
| 34 | + return this.$router.options.routes | ||
| 35 | + }, | ||
| 36 | + activeMenu() { | ||
| 37 | + const route = this.$route | ||
| 38 | + const { meta, path } = route | ||
| 39 | + // if set path, the sidebar will highlight the path you set | ||
| 40 | + if (meta.activeMenu) { | ||
| 41 | + return meta.activeMenu | ||
| 42 | + } | ||
| 43 | + return path | ||
| 44 | + }, | ||
| 45 | + showLogo() { | ||
| 46 | + return this.$store.state.settings.sidebarLogo | ||
| 47 | + }, | ||
| 48 | + variables() { | ||
| 49 | + return variables | ||
| 50 | + }, | ||
| 51 | + isCollapse() { | ||
| 52 | + return !this.sidebar.opened | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | +} | ||
| 56 | +</script> |
src/layout/components/index.js
0 → 100644
src/layout/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div :class="classObj" class="app-wrapper"> | ||
| 3 | + <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> | ||
| 4 | + <sidebar class="sidebar-container" /> | ||
| 5 | + <div class="main-container"> | ||
| 6 | + <div :class="{'fixed-header':fixedHeader}"> | ||
| 7 | + <navbar /> | ||
| 8 | + </div> | ||
| 9 | + <app-main /> | ||
| 10 | + </div> | ||
| 11 | + </div> | ||
| 12 | +</template> | ||
| 13 | + | ||
| 14 | +<script> | ||
| 15 | +import { Navbar, Sidebar, AppMain } from './components' | ||
| 16 | +import ResizeMixin from './mixin/ResizeHandler' | ||
| 17 | + | ||
| 18 | +export default { | ||
| 19 | + name: 'Layout', | ||
| 20 | + components: { | ||
| 21 | + Navbar, | ||
| 22 | + Sidebar, | ||
| 23 | + AppMain | ||
| 24 | + }, | ||
| 25 | + mixins: [ResizeMixin], | ||
| 26 | + computed: { | ||
| 27 | + sidebar() { | ||
| 28 | + return this.$store.state.app.sidebar | ||
| 29 | + }, | ||
| 30 | + device() { | ||
| 31 | + return this.$store.state.app.device | ||
| 32 | + }, | ||
| 33 | + fixedHeader() { | ||
| 34 | + return this.$store.state.settings.fixedHeader | ||
| 35 | + }, | ||
| 36 | + classObj() { | ||
| 37 | + return { | ||
| 38 | + hideSidebar: !this.sidebar.opened, | ||
| 39 | + openSidebar: this.sidebar.opened, | ||
| 40 | + withoutAnimation: this.sidebar.withoutAnimation, | ||
| 41 | + mobile: this.device === 'mobile' | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + }, | ||
| 45 | + methods: { | ||
| 46 | + handleClickOutside() { | ||
| 47 | + this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) | ||
| 48 | + } | ||
| 49 | + } | ||
| 50 | +} | ||
| 51 | +</script> | ||
| 52 | + | ||
| 53 | +<style lang="scss" scoped> | ||
| 54 | + @import "~@/styles/mixin.scss"; | ||
| 55 | + @import "~@/styles/variables.scss"; | ||
| 56 | + | ||
| 57 | + .app-wrapper { | ||
| 58 | + @include clearfix; | ||
| 59 | + position: relative; | ||
| 60 | + height: 100%; | ||
| 61 | + width: 100%; | ||
| 62 | + &.mobile.openSidebar{ | ||
| 63 | + position: fixed; | ||
| 64 | + top: 0; | ||
| 65 | + } | ||
| 66 | + } | ||
| 67 | + .drawer-bg { | ||
| 68 | + background: #000; | ||
| 69 | + opacity: 0.3; | ||
| 70 | + width: 100%; | ||
| 71 | + top: 0; | ||
| 72 | + height: 100%; | ||
| 73 | + position: absolute; | ||
| 74 | + z-index: 999; | ||
| 75 | + } | ||
| 76 | + | ||
| 77 | + .fixed-header { | ||
| 78 | + position: fixed; | ||
| 79 | + top: 0; | ||
| 80 | + right: 0; | ||
| 81 | + z-index: 9; | ||
| 82 | + width: calc(100% - #{$sideBarWidth}); | ||
| 83 | + transition: width 0.28s; | ||
| 84 | + } | ||
| 85 | + | ||
| 86 | + .hideSidebar .fixed-header { | ||
| 87 | + width: calc(100% - 54px) | ||
| 88 | + } | ||
| 89 | + | ||
| 90 | + .mobile .fixed-header { | ||
| 91 | + width: 100%; | ||
| 92 | + } | ||
| 93 | +</style> |
src/layout/mixin/ResizeHandler.js
0 → 100644
| 1 | +import store from '@/store' | ||
| 2 | + | ||
| 3 | +const { body } = document | ||
| 4 | +const WIDTH = 992 // refer to Bootstrap's responsive design | ||
| 5 | + | ||
| 6 | +export default { | ||
| 7 | + watch: { | ||
| 8 | + $route(route) { | ||
| 9 | + if (this.device === 'mobile' && this.sidebar.opened) { | ||
| 10 | + store.dispatch('app/closeSideBar', { withoutAnimation: false }) | ||
| 11 | + } | ||
| 12 | + } | ||
| 13 | + }, | ||
| 14 | + beforeMount() { | ||
| 15 | + window.addEventListener('resize', this.$_resizeHandler) | ||
| 16 | + }, | ||
| 17 | + beforeDestroy() { | ||
| 18 | + window.removeEventListener('resize', this.$_resizeHandler) | ||
| 19 | + }, | ||
| 20 | + mounted() { | ||
| 21 | + const isMobile = this.$_isMobile() | ||
| 22 | + if (isMobile) { | ||
| 23 | + store.dispatch('app/toggleDevice', 'mobile') | ||
| 24 | + store.dispatch('app/closeSideBar', { withoutAnimation: true }) | ||
| 25 | + } | ||
| 26 | + }, | ||
| 27 | + methods: { | ||
| 28 | + // use $_ for mixins properties | ||
| 29 | + // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential | ||
| 30 | + $_isMobile() { | ||
| 31 | + const rect = body.getBoundingClientRect() | ||
| 32 | + return rect.width - 1 < WIDTH | ||
| 33 | + }, | ||
| 34 | + $_resizeHandler() { | ||
| 35 | + if (!document.hidden) { | ||
| 36 | + const isMobile = this.$_isMobile() | ||
| 37 | + store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop') | ||
| 38 | + | ||
| 39 | + if (isMobile) { | ||
| 40 | + store.dispatch('app/closeSideBar', { withoutAnimation: true }) | ||
| 41 | + } | ||
| 42 | + } | ||
| 43 | + } | ||
| 44 | + } | ||
| 45 | +} |
src/main.js
0 → 100644
| 1 | +import Vue from 'vue' | ||
| 2 | + | ||
| 3 | +import 'normalize.css/normalize.css' // A modern alternative to CSS resets | ||
| 4 | + | ||
| 5 | +import ElementUI from 'element-ui' | ||
| 6 | +import 'element-ui/lib/theme-chalk/index.css' | ||
| 7 | +import locale from 'element-ui/lib/locale/lang/en' // lang i18n | ||
| 8 | + | ||
| 9 | +import '@/styles/index.scss' // global css | ||
| 10 | + | ||
| 11 | +import App from './App' | ||
| 12 | +import store from './store' | ||
| 13 | +import router from './router' | ||
| 14 | + | ||
| 15 | +import '@/icons' // icon | ||
| 16 | +import '@/permission' // permission control | ||
| 17 | + | ||
| 18 | +/** | ||
| 19 | + * If you don't want to use mock-server | ||
| 20 | + * you want to use MockJs for mock api | ||
| 21 | + * you can execute: mockXHR() | ||
| 22 | + * | ||
| 23 | + * Currently MockJs will be used in the production environment, | ||
| 24 | + * please remove it before going online ! ! ! | ||
| 25 | + */ | ||
| 26 | +if (process.env.NODE_ENV === 'production') { | ||
| 27 | + const { mockXHR } = require('../mock') | ||
| 28 | + mockXHR() | ||
| 29 | +} | ||
| 30 | + | ||
| 31 | +// set ElementUI lang to EN | ||
| 32 | +//Vue.use(ElementUI, { locale }) | ||
| 33 | +// 如果想要中文版 element-ui，按如下方式声明 | ||
| 34 | +Vue.use(ElementUI) | ||
| 35 | + | ||
| 36 | +Vue.config.productionTip = false | ||
| 37 | + | ||
| 38 | +new Vue({ | ||
| 39 | + el: '#app', | ||
| 40 | + router, | ||
| 41 | + store, | ||
| 42 | + render: h => h(App) | ||
| 43 | +}) |
src/permission.js
0 → 100644
| 1 | +import router from './router' | ||
| 2 | +import store from './store' | ||
| 3 | +import { Message } from 'element-ui' | ||
| 4 | +import NProgress from 'nprogress' // progress bar | ||
| 5 | +import 'nprogress/nprogress.css' // progress bar style | ||
| 6 | +import { getToken } from '@/utils/auth' // get token from cookie | ||
| 7 | +import getPageTitle from '@/utils/get-page-title' | ||
| 8 | + | ||
| 9 | +NProgress.configure({ showSpinner: false }) // NProgress Configuration | ||
| 10 | + | ||
| 11 | +const whiteList = ['/login'] // no redirect whitelist | ||
| 12 | + | ||
| 13 | +router.beforeEach(async(to, from, next) => { | ||
| 14 | + // start progress bar | ||
| 15 | + NProgress.start() | ||
| 16 | + | ||
| 17 | + // set page title | ||
| 18 | + document.title = getPageTitle(to.meta.title) | ||
| 19 | + | ||
| 20 | + // determine whether the user has logged in | ||
| 21 | + const hasToken = getToken() | ||
| 22 | + | ||
| 23 | + if (hasToken) { | ||
| 24 | + if (to.path === '/login') { | ||
| 25 | + // if is logged in, redirect to the home page | ||
| 26 | + next({ path: '/' }) | ||
| 27 | + NProgress.done() | ||
| 28 | + } else { | ||
| 29 | + const hasGetUserInfo = store.getters.name | ||
| 30 | + if (hasGetUserInfo) { | ||
| 31 | + next() | ||
| 32 | + } else { | ||
| 33 | + try { | ||
| 34 | + // get user info | ||
| 35 | + await store.dispatch('user/getInfo') | ||
| 36 | + | ||
| 37 | + next() | ||
| 38 | + } catch (error) { | ||
| 39 | + // remove token and go to login page to re-login | ||
| 40 | + await store.dispatch('user/resetToken') | ||
| 41 | + Message.error(error || 'Has Error') | ||
| 42 | + next(`/login?redirect=${to.path}`) | ||
| 43 | + NProgress.done() | ||
| 44 | + } | ||
| 45 | + } | ||
| 46 | + } | ||
| 47 | + } else { | ||
| 48 | + /* has no token*/ | ||
| 49 | + | ||
| 50 | + if (whiteList.indexOf(to.path) !== -1) { | ||
| 51 | + // in the free login whitelist, go directly | ||
| 52 | + next() | ||
| 53 | + } else { | ||
| 54 | + // other pages that do not have permission to access are redirected to the login page. | ||
| 55 | + next(`/login?redirect=${to.path}`) | ||
| 56 | + NProgress.done() | ||
| 57 | + } | ||
| 58 | + } | ||
| 59 | +}) | ||
| 60 | + | ||
| 61 | +router.afterEach(() => { | ||
| 62 | + // finish progress bar | ||
| 63 | + NProgress.done() | ||
| 64 | +}) |
src/router/index.js
0 → 100644
| 1 | +import Vue from 'vue' | ||
| 2 | +import Router from 'vue-router' | ||
| 3 | + | ||
| 4 | +Vue.use(Router) | ||
| 5 | + | ||
| 6 | +/* Layout */ | ||
| 7 | +import Layout from '@/layout' | ||
| 8 | + | ||
| 9 | +/** | ||
| 10 | + * Note: sub-menu only appear when route children.length >= 1 | ||
| 11 | + * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html | ||
| 12 | + * | ||
| 13 | + * hidden: true if set true, item will not show in the sidebar(default is false) | ||
| 14 | + * alwaysShow: true if set true, will always show the root menu | ||
| 15 | + * if not set alwaysShow, when item has more than one children route, | ||
| 16 | + * it will becomes nested mode, otherwise not show the root menu | ||
| 17 | + * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb | ||
| 18 | + * name:'router-name' the name is used by <keep-alive> (must set!!!) | ||
| 19 | + * meta : { | ||
| 20 | + roles: ['admin','editor'] control the page roles (you can set multiple roles) | ||
| 21 | + title: 'title' the name show in sidebar and breadcrumb (recommend set) | ||
| 22 | + icon: 'svg-name'/'el-icon-x' the icon show in the sidebar | ||
| 23 | + breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) | ||
| 24 | + activeMenu: '/example/list' if set path, the sidebar will highlight the path you set | ||
| 25 | + } | ||
| 26 | + */ | ||
| 27 | + | ||
| 28 | +/** | ||
| 29 | + * constantRoutes | ||
| 30 | + * a base page that does not have permission requirements | ||
| 31 | + * all roles can be accessed | ||
| 32 | + */ | ||
| 33 | +export const constantRoutes = [{ | ||
| 34 | + path: '/login', | ||
| 35 | + component: () => import('@/views/login/index'), | ||
| 36 | + hidden: true | ||
| 37 | + }, | ||
| 38 | + | ||
| 39 | + { | ||
| 40 | + path: '/404', | ||
| 41 | + component: () => import('@/views/404'), | ||
| 42 | + hidden: true | ||
| 43 | + }, | ||
| 44 | + | ||
| 45 | + { | ||
| 46 | + path: '/', | ||
| 47 | + component: Layout, | ||
| 48 | + redirect: '/dashboard', | ||
| 49 | + children: [{ | ||
| 50 | + path: 'dashboard', | ||
| 51 | + name: '首页', | ||
| 52 | + component: () => import('@/views/dashboard/index'), | ||
| 53 | + meta: { | ||
| 54 | + title: '首页', | ||
| 55 | + icon: 'dashboard' | ||
| 56 | + } | ||
| 57 | + }] | ||
| 58 | + }, | ||
| 59 | + | ||
| 60 | + { | ||
| 61 | + path: '/example', | ||
| 62 | + component: Layout, | ||
| 63 | + redirect: '/example/table', | ||
| 64 | + name: 'Example', | ||
| 65 | + meta: { | ||
| 66 | + title: '题库管理', | ||
| 67 | + icon: 'el-icon-s-help' | ||
| 68 | + }, | ||
| 69 | + children: [{ | ||
| 70 | + path: 'QuestionBank', | ||
| 71 | + name: 'Table', | ||
| 72 | + component: () => import('@/views/QuestionBank/index'), | ||
| 73 | + meta: { | ||
| 74 | + title: '题库', | ||
| 75 | + icon: 'table' | ||
| 76 | + } | ||
| 77 | + }] | ||
| 78 | + }, | ||
| 79 | + { | ||
| 80 | + path: '/views', | ||
| 81 | + component: Layout, | ||
| 82 | + redirect: '/views/TestPaper', | ||
| 83 | + name: 'TestPaper', | ||
| 84 | + meta: { | ||
| 85 | + title: '试卷管理', | ||
| 86 | + icon: 'el-icon-s-help' | ||
| 87 | + }, | ||
| 88 | + children: [ | ||
| 89 | + { | ||
| 90 | + path: 'TestPaperClass', | ||
| 91 | + name: 'Table', | ||
| 92 | + component: () => import('@/views/TestPaper/TestPaperClass'), | ||
| 93 | + meta: { | ||
| 94 | + title: '分类管理', | ||
| 95 | + icon: 'table' | ||
| 96 | + } | ||
| 97 | + },{ | ||
| 98 | + path: 'TestPaperList', | ||
| 99 | + name: 'Table', | ||
| 100 | + component: () => import('@/views/TestPaper/TestPaperList'), | ||
| 101 | + meta: { | ||
| 102 | + title: '试卷列表', | ||
| 103 | + icon: 'table' | ||
| 104 | + } | ||
| 105 | + }, { | ||
| 106 | + path: 'ManualTestPaper', | ||
| 107 | + name: 'Table', | ||
| 108 | + component: () => import('@/views/TestPaper/ManualTestPaper'), | ||
| 109 | + meta: { | ||
| 110 | + title: '组卷', | ||
| 111 | + icon: 'table' | ||
| 112 | + } | ||
| 113 | + }] | ||
| 114 | + }, | ||
| 115 | + { | ||
| 116 | + path: '/', | ||
| 117 | + component: Layout, | ||
| 118 | + redirect: '/', | ||
| 119 | + name: 'user', | ||
| 120 | + meta: { | ||
| 121 | + title: '用户管理', | ||
| 122 | + icon: 'el-icon-s-help' | ||
| 123 | + }, | ||
| 124 | + children: [{ | ||
| 125 | + path: 'user', | ||
| 126 | + name: 'User', | ||
| 127 | + component: () => import('@/views/user/userlist'), | ||
| 128 | + meta: { | ||
| 129 | + title: '用户列表', | ||
| 130 | + icon: 'table' | ||
| 131 | + } | ||
| 132 | + }] | ||
| 133 | + }, | ||
| 134 | + // 404 page must be placed at the end !!! | ||
| 135 | + { | ||
| 136 | + path: '*', | ||
| 137 | + redirect: '/404', | ||
| 138 | + hidden: true | ||
| 139 | + } | ||
| 140 | +] | ||
| 141 | + | ||
| 142 | +const createRouter = () => new Router({ | ||
| 143 | + // mode: 'history', // require service support | ||
| 144 | + scrollBehavior: () => ({ | ||
| 145 | + y: 0 | ||
| 146 | + }), | ||
| 147 | + routes: constantRoutes | ||
| 148 | +}) | ||
| 149 | + | ||
| 150 | +const router = createRouter() | ||
| 151 | + | ||
| 152 | +// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 | ||
| 153 | +export function resetRouter() { | ||
| 154 | + const newRouter = createRouter() | ||
| 155 | + router.matcher = newRouter.matcher // reset router | ||
| 156 | +} | ||
| 157 | + | ||
| 158 | +export default router |
src/settings.js
0 → 100644
| 1 | +module.exports = { | ||
| 2 | + | ||
| 3 | + title: '安第斯答题系统后台', | ||
| 4 | + | ||
| 5 | + /** | ||
| 6 | + * @type {boolean} true | false | ||
| 7 | + * @description Whether fix the header | ||
| 8 | + */ | ||
| 9 | + fixedHeader: false, | ||
| 10 | + | ||
| 11 | + /** | ||
| 12 | + * @type {boolean} true | false | ||
| 13 | + * @description Whether show the logo in sidebar | ||
| 14 | + */ | ||
| 15 | + sidebarLogo: false | ||
| 16 | +} |
src/store/getters.js
0 → 100644
src/store/index.js
0 → 100644
| 1 | +import Vue from 'vue' | ||
| 2 | +import Vuex from 'vuex' | ||
| 3 | +import getters from './getters' | ||
| 4 | +import app from './modules/app' | ||
| 5 | +import settings from './modules/settings' | ||
| 6 | +import user from './modules/user' | ||
| 7 | + | ||
| 8 | +Vue.use(Vuex) | ||
| 9 | + | ||
| 10 | +const store = new Vuex.Store({ | ||
| 11 | + modules: { | ||
| 12 | + app, | ||
| 13 | + settings, | ||
| 14 | + user | ||
| 15 | + }, | ||
| 16 | + getters | ||
| 17 | +}) | ||
| 18 | + | ||
| 19 | +export default store |
src/store/modules/app.js
0 → 100644
| 1 | +import Cookies from 'js-cookie' | ||
| 2 | + | ||
| 3 | +const state = { | ||
| 4 | + sidebar: { | ||
| 5 | + opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, | ||
| 6 | + withoutAnimation: false | ||
| 7 | + }, | ||
| 8 | + device: 'desktop' | ||
| 9 | +} | ||
| 10 | + | ||
| 11 | +const mutations = { | ||
| 12 | + TOGGLE_SIDEBAR: state => { | ||
| 13 | + state.sidebar.opened = !state.sidebar.opened | ||
| 14 | + state.sidebar.withoutAnimation = false | ||
| 15 | + if (state.sidebar.opened) { | ||
| 16 | + Cookies.set('sidebarStatus', 1) | ||
| 17 | + } else { | ||
| 18 | + Cookies.set('sidebarStatus', 0) | ||
| 19 | + } | ||
| 20 | + }, | ||
| 21 | + CLOSE_SIDEBAR: (state, withoutAnimation) => { | ||
| 22 | + Cookies.set('sidebarStatus', 0) | ||
| 23 | + state.sidebar.opened = false | ||
| 24 | + state.sidebar.withoutAnimation = withoutAnimation | ||
| 25 | + }, | ||
| 26 | + TOGGLE_DEVICE: (state, device) => { | ||
| 27 | + state.device = device | ||
| 28 | + } | ||
| 29 | +} | ||
| 30 | + | ||
| 31 | +const actions = { | ||
| 32 | + toggleSideBar({ commit }) { | ||
| 33 | + commit('TOGGLE_SIDEBAR') | ||
| 34 | + }, | ||
| 35 | + closeSideBar({ commit }, { withoutAnimation }) { | ||
| 36 | + commit('CLOSE_SIDEBAR', withoutAnimation) | ||
| 37 | + }, | ||
| 38 | + toggleDevice({ commit }, device) { | ||
| 39 | + commit('TOGGLE_DEVICE', device) | ||
| 40 | + } | ||
| 41 | +} | ||
| 42 | + | ||
| 43 | +export default { | ||
| 44 | + namespaced: true, | ||
| 45 | + state, | ||
| 46 | + mutations, | ||
| 47 | + actions | ||
| 48 | +} |
src/store/modules/settings.js
0 → 100644
| 1 | +import defaultSettings from '@/settings' | ||
| 2 | + | ||
| 3 | +const { showSettings, fixedHeader, sidebarLogo } = defaultSettings | ||
| 4 | + | ||
| 5 | +const state = { | ||
| 6 | + showSettings: showSettings, | ||
| 7 | + fixedHeader: fixedHeader, | ||
| 8 | + sidebarLogo: sidebarLogo | ||
| 9 | +} | ||
| 10 | + | ||
| 11 | +const mutations = { | ||
| 12 | + CHANGE_SETTING: (state, { key, value }) => { | ||
| 13 | + // eslint-disable-next-line no-prototype-builtins | ||
| 14 | + if (state.hasOwnProperty(key)) { | ||
| 15 | + state[key] = value | ||
| 16 | + } | ||
| 17 | + } | ||
| 18 | +} | ||
| 19 | + | ||
| 20 | +const actions = { | ||
| 21 | + changeSetting({ commit }, data) { | ||
| 22 | + commit('CHANGE_SETTING', data) | ||
| 23 | + } | ||
| 24 | +} | ||
| 25 | + | ||
| 26 | +export default { | ||
| 27 | + namespaced: true, | ||
| 28 | + state, | ||
| 29 | + mutations, | ||
| 30 | + actions | ||
| 31 | +} | ||
| 32 | + |
src/store/modules/user.js
0 → 100644
| 1 | +import { login, logout, getInfo } from '@/api/user' | ||
| 2 | +import { getToken, setToken, removeToken } from '@/utils/auth' | ||
| 3 | +import { resetRouter } from '@/router' | ||
| 4 | + | ||
| 5 | +const getDefaultState = () => { | ||
| 6 | + return { | ||
| 7 | + token: getToken(), | ||
| 8 | + name: '', | ||
| 9 | + avatar: '' | ||
| 10 | + } | ||
| 11 | +} | ||
| 12 | + | ||
| 13 | +const state = getDefaultState() | ||
| 14 | + | ||
| 15 | +const mutations = { | ||
| 16 | + RESET_STATE: (state) => { | ||
| 17 | + Object.assign(state, getDefaultState()) | ||
| 18 | + }, | ||
| 19 | + SET_TOKEN: (state, token) => { | ||
| 20 | + state.token = token | ||
| 21 | + }, | ||
| 22 | + SET_NAME: (state, name) => { | ||
| 23 | + state.name = name | ||
| 24 | + }, | ||
| 25 | + SET_AVATAR: (state, avatar) => { | ||
| 26 | + state.avatar = avatar | ||
| 27 | + } | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +const actions = { | ||
| 31 | + // user login | ||
| 32 | + login({ commit }, userInfo) { | ||
| 33 | + const { username, password } = userInfo | ||
| 34 | + return new Promise((resolve, reject) => { | ||
| 35 | + login({ username: username.trim(), password: password }).then(response => { | ||
| 36 | + const { data } = response | ||
| 37 | + commit('SET_TOKEN', data.token) | ||
| 38 | + setToken(data.token) | ||
| 39 | + resolve() | ||
| 40 | + }).catch(error => { | ||
| 41 | + reject(error) | ||
| 42 | + }) | ||
| 43 | + }) | ||
| 44 | + }, | ||
| 45 | + | ||
| 46 | + // get user info | ||
| 47 | + getInfo({ commit, state }) { | ||
| 48 | + return new Promise((resolve, reject) => { | ||
| 49 | + getInfo().then(response => { | ||
| 50 | + const { data } = response.data | ||
| 51 | + if (!data) { | ||
| 52 | + return reject('Verification failed, please Login again.') | ||
| 53 | + } | ||
| 54 | + const { DisplayName, avatar } = data | ||
| 55 | + commit('SET_NAME', DisplayName) | ||
| 56 | + commit('SET_AVATAR', avatar) | ||
| 57 | + resolve(data) | ||
| 58 | + }).catch(error => { | ||
| 59 | + reject(error) | ||
| 60 | + }) | ||
| 61 | + }) | ||
| 62 | + }, | ||
| 63 | + | ||
| 64 | + // user logout | ||
| 65 | + logout({ commit, state }) { | ||
| 66 | + return new Promise((resolve, reject) => { | ||
| 67 | + logout(state.token).then(() => { | ||
| 68 | + removeToken() // must remove token first | ||
| 69 | + resetRouter() | ||
| 70 | + commit('RESET_STATE') | ||
| 71 | + resolve() | ||
| 72 | + }).catch(error => { | ||
| 73 | + reject(error) | ||
| 74 | + }) | ||
| 75 | + }) | ||
| 76 | + }, | ||
| 77 | + | ||
| 78 | + // remove token | ||
| 79 | + resetToken({ commit }) { | ||
| 80 | + return new Promise(resolve => { | ||
| 81 | + removeToken() // must remove token first | ||
| 82 | + commit('RESET_STATE') | ||
| 83 | + resolve() | ||
| 84 | + }) | ||
| 85 | + } | ||
| 86 | +} | ||
| 87 | + | ||
| 88 | +export default { | ||
| 89 | + namespaced: true, | ||
| 90 | + state, | ||
| 91 | + mutations, | ||
| 92 | + actions | ||
| 93 | +} | ||
| 94 | + |
src/styles/element-ui.scss
0 → 100644
| 1 | +// cover some element-ui styles | ||
| 2 | + | ||
| 3 | +.el-breadcrumb__inner, | ||
| 4 | +.el-breadcrumb__inner a { | ||
| 5 | + font-weight: 400 !important; | ||
| 6 | +} | ||
| 7 | + | ||
| 8 | +.el-upload { | ||
| 9 | + input[type="file"] { | ||
| 10 | + display: none !important; | ||
| 11 | + } | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +.el-upload__input { | ||
| 15 | + display: none; | ||
| 16 | +} | ||
| 17 | + | ||
| 18 | + | ||
| 19 | +// to fixed https://github.com/ElemeFE/element/issues/2461 | ||
| 20 | +.el-dialog { | ||
| 21 | + transform: none; | ||
| 22 | + left: 0; | ||
| 23 | + position: relative; | ||
| 24 | + margin: 0 auto; | ||
| 25 | +} | ||
| 26 | + | ||
| 27 | +// refine element ui upload | ||
| 28 | +.upload-container { | ||
| 29 | + .el-upload { | ||
| 30 | + width: 100%; | ||
| 31 | + | ||
| 32 | + .el-upload-dragger { | ||
| 33 | + width: 100%; | ||
| 34 | + height: 200px; | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +// dropdown | ||
| 40 | +.el-dropdown-menu { | ||
| 41 | + a { | ||
| 42 | + display: block | ||
| 43 | + } | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +// to fix el-date-picker css style | ||
| 47 | +.el-range-separator { | ||
| 48 | + box-sizing: content-box; | ||
| 49 | +} |
src/styles/index.scss
0 → 100644
| 1 | +@import './variables.scss'; | ||
| 2 | +@import './mixin.scss'; | ||
| 3 | +@import './transition.scss'; | ||
| 4 | +@import './element-ui.scss'; | ||
| 5 | +@import './sidebar.scss'; | ||
| 6 | + | ||
| 7 | +body { | ||
| 8 | + height: 100%; | ||
| 9 | + -moz-osx-font-smoothing: grayscale; | ||
| 10 | + -webkit-font-smoothing: antialiased; | ||
| 11 | + text-rendering: optimizeLegibility; | ||
| 12 | + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; | ||
| 13 | +} | ||
| 14 | + | ||
| 15 | +label { | ||
| 16 | + font-weight: 700; | ||
| 17 | +} | ||
| 18 | + | ||
| 19 | +html { | ||
| 20 | + height: 100%; | ||
| 21 | + box-sizing: border-box; | ||
| 22 | +} | ||
| 23 | + | ||
| 24 | +#app { | ||
| 25 | + height: 100%; | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +*, | ||
| 29 | +*:before, | ||
| 30 | +*:after { | ||
| 31 | + box-sizing: inherit; | ||
| 32 | +} | ||
| 33 | + | ||
| 34 | +a:focus, | ||
| 35 | +a:active { | ||
| 36 | + outline: none; | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +a, | ||
| 40 | +a:focus, | ||
| 41 | +a:hover { | ||
| 42 | + cursor: pointer; | ||
| 43 | + color: inherit; | ||
| 44 | + text-decoration: none; | ||
| 45 | +} | ||
| 46 | + | ||
| 47 | +div:focus { | ||
| 48 | + outline: none; | ||
| 49 | +} | ||
| 50 | + | ||
| 51 | +.clearfix { | ||
| 52 | + &:after { | ||
| 53 | + visibility: hidden; | ||
| 54 | + display: block; | ||
| 55 | + font-size: 0; | ||
| 56 | + content: " "; | ||
| 57 | + clear: both; | ||
| 58 | + height: 0; | ||
| 59 | + } | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +// main-container global css | ||
| 63 | +.app-container { | ||
| 64 | + padding: 20px; | ||
| 65 | +} |
src/styles/mixin.scss
0 → 100644
| 1 | +@mixin clearfix { | ||
| 2 | + &:after { | ||
| 3 | + content: ""; | ||
| 4 | + display: table; | ||
| 5 | + clear: both; | ||
| 6 | + } | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +@mixin scrollBar { | ||
| 10 | + &::-webkit-scrollbar-track-piece { | ||
| 11 | + background: #d3dce6; | ||
| 12 | + } | ||
| 13 | + | ||
| 14 | + &::-webkit-scrollbar { | ||
| 15 | + width: 6px; | ||
| 16 | + } | ||
| 17 | + | ||
| 18 | + &::-webkit-scrollbar-thumb { | ||
| 19 | + background: #99a9bf; | ||
| 20 | + border-radius: 20px; | ||
| 21 | + } | ||
| 22 | +} | ||
| 23 | + | ||
| 24 | +@mixin relative { | ||
| 25 | + position: relative; | ||
| 26 | + width: 100%; | ||
| 27 | + height: 100%; | ||
| 28 | +} |
src/styles/sidebar.scss
0 → 100644
| 1 | +#app { | ||
| 2 | + | ||
| 3 | + .main-container { | ||
| 4 | + min-height: 100%; | ||
| 5 | + transition: margin-left .28s; | ||
| 6 | + margin-left: $sideBarWidth; | ||
| 7 | + position: relative; | ||
| 8 | + } | ||
| 9 | + | ||
| 10 | + .sidebar-container { | ||
| 11 | + transition: width 0.28s; | ||
| 12 | + width: $sideBarWidth !important; | ||
| 13 | + background-color: $menuBg; | ||
| 14 | + height: 100%; | ||
| 15 | + position: fixed; | ||
| 16 | + font-size: 0px; | ||
| 17 | + top: 0; | ||
| 18 | + bottom: 0; | ||
| 19 | + left: 0; | ||
| 20 | + z-index: 1001; | ||
| 21 | + overflow: hidden; | ||
| 22 | + | ||
| 23 | + // reset element-ui css | ||
| 24 | + .horizontal-collapse-transition { | ||
| 25 | + transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; | ||
| 26 | + } | ||
| 27 | + | ||
| 28 | + .scrollbar-wrapper { | ||
| 29 | + overflow-x: hidden !important; | ||
| 30 | + } | ||
| 31 | + | ||
| 32 | + .el-scrollbar__bar.is-vertical { | ||
| 33 | + right: 0px; | ||
| 34 | + } | ||
| 35 | + | ||
| 36 | + .el-scrollbar { | ||
| 37 | + height: 100%; | ||
| 38 | + } | ||
| 39 | + | ||
| 40 | + &.has-logo { | ||
| 41 | + .el-scrollbar { | ||
| 42 | + height: calc(100% - 50px); | ||
| 43 | + } | ||
| 44 | + } | ||
| 45 | + | ||
| 46 | + .is-horizontal { | ||
| 47 | + display: none; | ||
| 48 | + } | ||
| 49 | + | ||
| 50 | + a { | ||
| 51 | + display: inline-block; | ||
| 52 | + width: 100%; | ||
| 53 | + overflow: hidden; | ||
| 54 | + } | ||
| 55 | + | ||
| 56 | + .svg-icon { | ||
| 57 | + margin-right: 16px; | ||
| 58 | + } | ||
| 59 | + | ||
| 60 | + .sub-el-icon { | ||
| 61 | + margin-right: 12px; | ||
| 62 | + margin-left: -2px; | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + .el-menu { | ||
| 66 | + border: none; | ||
| 67 | + height: 100%; | ||
| 68 | + width: 100% !important; | ||
| 69 | + } | ||
| 70 | + | ||
| 71 | + // menu hover | ||
| 72 | + .submenu-title-noDropdown, | ||
| 73 | + .el-submenu__title { | ||
| 74 | + &:hover { | ||
| 75 | + background-color: $menuHover !important; | ||
| 76 | + } | ||
| 77 | + } | ||
| 78 | + | ||
| 79 | + .is-active>.el-submenu__title { | ||
| 80 | + color: $subMenuActiveText !important; | ||
| 81 | + } | ||
| 82 | + | ||
| 83 | + & .nest-menu .el-submenu>.el-submenu__title, | ||
| 84 | + & .el-submenu .el-menu-item { | ||
| 85 | + min-width: $sideBarWidth !important; | ||
| 86 | + background-color: $subMenuBg !important; | ||
| 87 | + | ||
| 88 | + &:hover { | ||
| 89 | + background-color: $subMenuHover !important; | ||
| 90 | + } | ||
| 91 | + } | ||
| 92 | + } | ||
| 93 | + | ||
| 94 | + .hideSidebar { | ||
| 95 | + .sidebar-container { | ||
| 96 | + width: 54px !important; | ||
| 97 | + } | ||
| 98 | + | ||
| 99 | + .main-container { | ||
| 100 | + margin-left: 54px; | ||
| 101 | + } | ||
| 102 | + | ||
| 103 | + .submenu-title-noDropdown { | ||
| 104 | + padding: 0 !important; | ||
| 105 | + position: relative; | ||
| 106 | + | ||
| 107 | + .el-tooltip { | ||
| 108 | + padding: 0 !important; | ||
| 109 | + | ||
| 110 | + .svg-icon { | ||
| 111 | + margin-left: 20px; | ||
| 112 | + } | ||
| 113 | + | ||
| 114 | + .sub-el-icon { | ||
| 115 | + margin-left: 19px; | ||
| 116 | + } | ||
| 117 | + } | ||
| 118 | + } | ||
| 119 | + | ||
| 120 | + .el-submenu { | ||
| 121 | + overflow: hidden; | ||
| 122 | + | ||
| 123 | + &>.el-submenu__title { | ||
| 124 | + padding: 0 !important; | ||
| 125 | + | ||
| 126 | + .svg-icon { | ||
| 127 | + margin-left: 20px; | ||
| 128 | + } | ||
| 129 | + | ||
| 130 | + .sub-el-icon { | ||
| 131 | + margin-left: 19px; | ||
| 132 | + } | ||
| 133 | + | ||
| 134 | + .el-submenu__icon-arrow { | ||
| 135 | + display: none; | ||
| 136 | + } | ||
| 137 | + } | ||
| 138 | + } | ||
| 139 | + | ||
| 140 | + .el-menu--collapse { | ||
| 141 | + .el-submenu { | ||
| 142 | + &>.el-submenu__title { | ||
| 143 | + &>span { | ||
| 144 | + height: 0; | ||
| 145 | + width: 0; | ||
| 146 | + overflow: hidden; | ||
| 147 | + visibility: hidden; | ||
| 148 | + display: inline-block; | ||
| 149 | + } | ||
| 150 | + } | ||
| 151 | + } | ||
| 152 | + } | ||
| 153 | + } | ||
| 154 | + | ||
| 155 | + .el-menu--collapse .el-menu .el-submenu { | ||
| 156 | + min-width: $sideBarWidth !important; | ||
| 157 | + } | ||
| 158 | + | ||
| 159 | + // mobile responsive | ||
| 160 | + .mobile { | ||
| 161 | + .main-container { | ||
| 162 | + margin-left: 0px; | ||
| 163 | + } | ||
| 164 | + | ||
| 165 | + .sidebar-container { | ||
| 166 | + transition: transform .28s; | ||
| 167 | + width: $sideBarWidth !important; | ||
| 168 | + } | ||
| 169 | + | ||
| 170 | + &.hideSidebar { | ||
| 171 | + .sidebar-container { | ||
| 172 | + pointer-events: none; | ||
| 173 | + transition-duration: 0.3s; | ||
| 174 | + transform: translate3d(-$sideBarWidth, 0, 0); | ||
| 175 | + } | ||
| 176 | + } | ||
| 177 | + } | ||
| 178 | + | ||
| 179 | + .withoutAnimation { | ||
| 180 | + | ||
| 181 | + .main-container, | ||
| 182 | + .sidebar-container { | ||
| 183 | + transition: none; | ||
| 184 | + } | ||
| 185 | + } | ||
| 186 | +} | ||
| 187 | + | ||
| 188 | +// when menu collapsed | ||
| 189 | +.el-menu--vertical { | ||
| 190 | + &>.el-menu { | ||
| 191 | + .svg-icon { | ||
| 192 | + margin-right: 16px; | ||
| 193 | + } | ||
| 194 | + .sub-el-icon { | ||
| 195 | + margin-right: 12px; | ||
| 196 | + margin-left: -2px; | ||
| 197 | + } | ||
| 198 | + } | ||
| 199 | + | ||
| 200 | + .nest-menu .el-submenu>.el-submenu__title, | ||
| 201 | + .el-menu-item { | ||
| 202 | + &:hover { | ||
| 203 | + // you can use $subMenuHover | ||
| 204 | + background-color: $menuHover !important; | ||
| 205 | + } | ||
| 206 | + } | ||
| 207 | + | ||
| 208 | + // the scroll bar appears when the subMenu is too long | ||
| 209 | + >.el-menu--popup { | ||
| 210 | + max-height: 100vh; | ||
| 211 | + overflow-y: auto; | ||
| 212 | + | ||
| 213 | + &::-webkit-scrollbar-track-piece { | ||
| 214 | + background: #d3dce6; | ||
| 215 | + } | ||
| 216 | + | ||
| 217 | + &::-webkit-scrollbar { | ||
| 218 | + width: 6px; | ||
| 219 | + } | ||
| 220 | + | ||
| 221 | + &::-webkit-scrollbar-thumb { | ||
| 222 | + background: #99a9bf; | ||
| 223 | + border-radius: 20px; | ||
| 224 | + } | ||
| 225 | + } | ||
| 226 | +} |
src/styles/transition.scss
0 → 100644
| 1 | +// global transition css | ||
| 2 | + | ||
| 3 | +/* fade */ | ||
| 4 | +.fade-enter-active, | ||
| 5 | +.fade-leave-active { | ||
| 6 | + transition: opacity 0.28s; | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +.fade-enter, | ||
| 10 | +.fade-leave-active { | ||
| 11 | + opacity: 0; | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +/* fade-transform */ | ||
| 15 | +.fade-transform-leave-active, | ||
| 16 | +.fade-transform-enter-active { | ||
| 17 | + transition: all .5s; | ||
| 18 | +} | ||
| 19 | + | ||
| 20 | +.fade-transform-enter { | ||
| 21 | + opacity: 0; | ||
| 22 | + transform: translateX(-30px); | ||
| 23 | +} | ||
| 24 | + | ||
| 25 | +.fade-transform-leave-to { | ||
| 26 | + opacity: 0; | ||
| 27 | + transform: translateX(30px); | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +/* breadcrumb transition */ | ||
| 31 | +.breadcrumb-enter-active, | ||
| 32 | +.breadcrumb-leave-active { | ||
| 33 | + transition: all .5s; | ||
| 34 | +} | ||
| 35 | + | ||
| 36 | +.breadcrumb-enter, | ||
| 37 | +.breadcrumb-leave-active { | ||
| 38 | + opacity: 0; | ||
| 39 | + transform: translateX(20px); | ||
| 40 | +} | ||
| 41 | + | ||
| 42 | +.breadcrumb-move { | ||
| 43 | + transition: all .5s; | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +.breadcrumb-leave-active { | ||
| 47 | + position: absolute; | ||
| 48 | +} |
src/styles/variables.scss
0 → 100644
| 1 | +// sidebar | ||
| 2 | +$menuText:#bfcbd9; | ||
| 3 | +$menuActiveText:#409EFF; | ||
| 4 | +$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 | ||
| 5 | + | ||
| 6 | +$menuBg:#304156; | ||
| 7 | +$menuHover:#263445; | ||
| 8 | + | ||
| 9 | +$subMenuBg:#1f2d3d; | ||
| 10 | +$subMenuHover:#001528; | ||
| 11 | + | ||
| 12 | +$sideBarWidth: 210px; | ||
| 13 | + | ||
| 14 | +// the :export directive is the magic sauce for webpack | ||
| 15 | +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass | ||
| 16 | +:export { | ||
| 17 | + menuText: $menuText; | ||
| 18 | + menuActiveText: $menuActiveText; | ||
| 19 | + subMenuActiveText: $subMenuActiveText; | ||
| 20 | + menuBg: $menuBg; | ||
| 21 | + menuHover: $menuHover; | ||
| 22 | + subMenuBg: $subMenuBg; | ||
| 23 | + subMenuHover: $subMenuHover; | ||
| 24 | + sideBarWidth: $sideBarWidth; | ||
| 25 | +} |
src/utils/auth.js
0 → 100644
| 1 | +import Cookies from 'js-cookie' | ||
| 2 | + | ||
| 3 | +const TokenKey = 'vue_admin_template_token' | ||
| 4 | + | ||
| 5 | +export function getToken() { | ||
| 6 | + return Cookies.get(TokenKey) | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +export function setToken(token) { | ||
| 10 | + return Cookies.set(TokenKey, token) | ||
| 11 | +} | ||
| 12 | + | ||
| 13 | +export function removeToken() { | ||
| 14 | + return Cookies.remove(TokenKey) | ||
| 15 | +} |
src/utils/get-page-title.js
0 → 100644
src/utils/index.js
0 → 100644
| 1 | +/** | ||
| 2 | + * Created by PanJiaChen on 16/11/18. | ||
| 3 | + */ | ||
| 4 | + | ||
| 5 | +/** | ||
| 6 | + * Parse the time to string | ||
| 7 | + * @param {(Object|string|number)} time | ||
| 8 | + * @param {string} cFormat | ||
| 9 | + * @returns {string | null} | ||
| 10 | + */ | ||
| 11 | +export function parseTime(time, cFormat) { | ||
| 12 | + if (arguments.length === 0 || !time) { | ||
| 13 | + return null | ||
| 14 | + } | ||
| 15 | + const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' | ||
| 16 | + let date | ||
| 17 | + if (typeof time === 'object') { | ||
| 18 | + date = time | ||
| 19 | + } else { | ||
| 20 | + if ((typeof time === 'string')) { | ||
| 21 | + if ((/^[0-9]+$/.test(time))) { | ||
| 22 | + // support "1548221490638" | ||
| 23 | + time = parseInt(time) | ||
| 24 | + } else { | ||
| 25 | + // support safari | ||
| 26 | + // https://stackoverflow.com/questions/4310953/invalid-date-in-safari | ||
| 27 | + time = time.replace(new RegExp(/-/gm), '/') | ||
| 28 | + } | ||
| 29 | + } | ||
| 30 | + | ||
| 31 | + if ((typeof time === 'number') && (time.toString().length === 10)) { | ||
| 32 | + time = time * 1000 | ||
| 33 | + } | ||
| 34 | + date = new Date(time) | ||
| 35 | + } | ||
| 36 | + const formatObj = { | ||
| 37 | + y: date.getFullYear(), | ||
| 38 | + m: date.getMonth() + 1, | ||
| 39 | + d: date.getDate(), | ||
| 40 | + h: date.getHours(), | ||
| 41 | + i: date.getMinutes(), | ||
| 42 | + s: date.getSeconds(), | ||
| 43 | + a: date.getDay() | ||
| 44 | + } | ||
| 45 | + const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { | ||
| 46 | + const value = formatObj[key] | ||
| 47 | + // Note: getDay() returns 0 on Sunday | ||
| 48 | + if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] } | ||
| 49 | + return value.toString().padStart(2, '0') | ||
| 50 | + }) | ||
| 51 | + return time_str | ||
| 52 | +} | ||
| 53 | + | ||
| 54 | +/** | ||
| 55 | + * @param {number} time | ||
| 56 | + * @param {string} option | ||
| 57 | + * @returns {string} | ||
| 58 | + */ | ||
| 59 | +export function formatTime(time, option) { | ||
| 60 | + if (('' + time).length === 10) { | ||
| 61 | + time = parseInt(time) * 1000 | ||
| 62 | + } else { | ||
| 63 | + time = +time | ||
| 64 | + } | ||
| 65 | + const d = new Date(time) | ||
| 66 | + const now = Date.now() | ||
| 67 | + | ||
| 68 | + const diff = (now - d) / 1000 | ||
| 69 | + | ||
| 70 | + if (diff < 30) { | ||
| 71 | + return '刚刚' | ||
| 72 | + } else if (diff < 3600) { | ||
| 73 | + // less 1 hour | ||
| 74 | + return Math.ceil(diff / 60) + '分钟前' | ||
| 75 | + } else if (diff < 3600 * 24) { | ||
| 76 | + return Math.ceil(diff / 3600) + '小时前' | ||
| 77 | + } else if (diff < 3600 * 24 * 2) { | ||
| 78 | + return '1天前' | ||
| 79 | + } | ||
| 80 | + if (option) { | ||
| 81 | + return parseTime(time, option) | ||
| 82 | + } else { | ||
| 83 | + return ( | ||
| 84 | + d.getMonth() + | ||
| 85 | + 1 + | ||
| 86 | + '月' + | ||
| 87 | + d.getDate() + | ||
| 88 | + '日' + | ||
| 89 | + d.getHours() + | ||
| 90 | + '时' + | ||
| 91 | + d.getMinutes() + | ||
| 92 | + '分' | ||
| 93 | + ) | ||
| 94 | + } | ||
| 95 | +} | ||
| 96 | + | ||
| 97 | +/** | ||
| 98 | + * @param {string} url | ||
| 99 | + * @returns {Object} | ||
| 100 | + */ | ||
| 101 | +export function param2Obj(url) { | ||
| 102 | + const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ') | ||
| 103 | + if (!search) { | ||
| 104 | + return {} | ||
| 105 | + } | ||
| 106 | + const obj = {} | ||
| 107 | + const searchArr = search.split('&') | ||
| 108 | + searchArr.forEach(v => { | ||
| 109 | + const index = v.indexOf('=') | ||
| 110 | + if (index !== -1) { | ||
| 111 | + const name = v.substring(0, index) | ||
| 112 | + const val = v.substring(index + 1, v.length) | ||
| 113 | + obj[name] = val | ||
| 114 | + } | ||
| 115 | + }) | ||
| 116 | + return obj | ||
| 117 | +} |
src/utils/request.js
0 → 100644
| 1 | +import axios from 'axios' | ||
| 2 | +import { | ||
| 3 | + MessageBox, | ||
| 4 | + Message | ||
| 5 | +} from 'element-ui' | ||
| 6 | +import store from '@/store' | ||
| 7 | +import { | ||
| 8 | + getToken | ||
| 9 | +} from '@/utils/auth' | ||
| 10 | + | ||
| 11 | +// create an axios instance | ||
| 12 | +const service = axios.create({ | ||
| 13 | + baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url | ||
| 14 | + // withCredentials: true, // send cookies when cross-domain requests | ||
| 15 | + timeout: 5000 // request timeout | ||
| 16 | +}) | ||
| 17 | + | ||
| 18 | +// request interceptor | ||
| 19 | +service.interceptors.request.use( | ||
| 20 | + config => { | ||
| 21 | + // do something before request is sent | ||
| 22 | + | ||
| 23 | + if (store.getters.token) { | ||
| 24 | + // let each request carry token | ||
| 25 | + // ['X-Token'] is a custom headers key | ||
| 26 | + // please modify it according to the actual situation | ||
| 27 | + config.headers['Authorization'] = getToken() | ||
| 28 | + } | ||
| 29 | + return config | ||
| 30 | + }, | ||
| 31 | + error => { | ||
| 32 | + // do something with request error | ||
| 33 | + console.log(error) // for debug | ||
| 34 | + return Promise.reject(error) | ||
| 35 | + } | ||
| 36 | +) | ||
| 37 | + | ||
| 38 | +// response interceptor | ||
| 39 | +service.interceptors.response.use( | ||
| 40 | + /** | ||
| 41 | + * If you want to get http information such as headers or status | ||
| 42 | + * Please return response => response | ||
| 43 | + */ | ||
| 44 | + | ||
| 45 | + /** | ||
| 46 | + * Determine the request status by custom code | ||
| 47 | + * Here is just an example | ||
| 48 | + * You can also judge the status by HTTP Status Code | ||
| 49 | + */ | ||
| 50 | + response => { | ||
| 51 | + const res = response.data | ||
| 52 | + // if the custom code is not 20000, it is judged as an error. | ||
| 53 | + if (res.code < 0) { | ||
| 54 | + Message({ | ||
| 55 | + message: res.message || 'Error', | ||
| 56 | + type: 'error', | ||
| 57 | + duration: 2 * 1000 | ||
| 58 | + }); | ||
| 59 | + return; | ||
| 60 | + } | ||
| 61 | + return res | ||
| 62 | + }, | ||
| 63 | + error => { | ||
| 64 | + console.log('err' + error) // for debug | ||
| 65 | + Message({ | ||
| 66 | + message: error.message, | ||
| 67 | + type: 'error', | ||
| 68 | + duration: 5 * 1000 | ||
| 69 | + }) | ||
| 70 | + return Promise.reject(error) | ||
| 71 | + } | ||
| 72 | +) | ||
| 73 | + | ||
| 74 | +export default service |
src/utils/validate.js
0 → 100644
| 1 | +/** | ||
| 2 | + * Created by PanJiaChen on 16/11/18. | ||
| 3 | + */ | ||
| 4 | + | ||
| 5 | +/** | ||
| 6 | + * @param {string} path | ||
| 7 | + * @returns {Boolean} | ||
| 8 | + */ | ||
| 9 | +export function isExternal(path) { | ||
| 10 | + return /^(https?:|mailto:|tel:)/.test(path) | ||
| 11 | +} | ||
| 12 | + | ||
| 13 | +/** | ||
| 14 | + * @param {string} str | ||
| 15 | + * @returns {Boolean} | ||
| 16 | + */ | ||
| 17 | +export function validUsername(str) { | ||
| 18 | + const valid_map = ['admin', 'editor'] | ||
| 19 | + return valid_map.indexOf(str.trim()) >= 0 | ||
| 20 | +} |
src/views/404.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="wscn-http404-container"> | ||
| 3 | + <div class="wscn-http404"> | ||
| 4 | + <div class="pic-404"> | ||
| 5 | + <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404"> | ||
| 6 | + <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404"> | ||
| 7 | + <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404"> | ||
| 8 | + <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404"> | ||
| 9 | + </div> | ||
| 10 | + <div class="bullshit"> | ||
| 11 | + <div class="bullshit__oops">OOPS!</div> | ||
| 12 | + <div class="bullshit__info">All rights reserved | ||
| 13 | + <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a> | ||
| 14 | + </div> | ||
| 15 | + <div class="bullshit__headline">{{ message }}</div> | ||
| 16 | + <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div> | ||
| 17 | + <a href="" class="bullshit__return-home">Back to home</a> | ||
| 18 | + </div> | ||
| 19 | + </div> | ||
| 20 | + </div> | ||
| 21 | +</template> | ||
| 22 | + | ||
| 23 | +<script> | ||
| 24 | + | ||
| 25 | +export default { | ||
| 26 | + name: 'Page404', | ||
| 27 | + computed: { | ||
| 28 | + message() { | ||
| 29 | + return 'The webmaster said that you can not enter this page...' | ||
| 30 | + } | ||
| 31 | + } | ||
| 32 | +} | ||
| 33 | +</script> | ||
| 34 | + | ||
| 35 | +<style lang="scss" scoped> | ||
| 36 | +.wscn-http404-container{ | ||
| 37 | + transform: translate(-50%,-50%); | ||
| 38 | + position: absolute; | ||
| 39 | + top: 40%; | ||
| 40 | + left: 50%; | ||
| 41 | +} | ||
| 42 | +.wscn-http404 { | ||
| 43 | + position: relative; | ||
| 44 | + width: 1200px; | ||
| 45 | + padding: 0 50px; | ||
| 46 | + overflow: hidden; | ||
| 47 | + .pic-404 { | ||
| 48 | + position: relative; | ||
| 49 | + float: left; | ||
| 50 | + width: 600px; | ||
| 51 | + overflow: hidden; | ||
| 52 | + &__parent { | ||
| 53 | + width: 100%; | ||
| 54 | + } | ||
| 55 | + &__child { | ||
| 56 | + position: absolute; | ||
| 57 | + &.left { | ||
| 58 | + width: 80px; | ||
| 59 | + top: 17px; | ||
| 60 | + left: 220px; | ||
| 61 | + opacity: 0; | ||
| 62 | + animation-name: cloudLeft; | ||
| 63 | + animation-duration: 2s; | ||
| 64 | + animation-timing-function: linear; | ||
| 65 | + animation-fill-mode: forwards; | ||
| 66 | + animation-delay: 1s; | ||
| 67 | + } | ||
| 68 | + &.mid { | ||
| 69 | + width: 46px; | ||
| 70 | + top: 10px; | ||
| 71 | + left: 420px; | ||
| 72 | + opacity: 0; | ||
| 73 | + animation-name: cloudMid; | ||
| 74 | + animation-duration: 2s; | ||
| 75 | + animation-timing-function: linear; | ||
| 76 | + animation-fill-mode: forwards; | ||
| 77 | + animation-delay: 1.2s; | ||
| 78 | + } | ||
| 79 | + &.right { | ||
| 80 | + width: 62px; | ||
| 81 | + top: 100px; | ||
| 82 | + left: 500px; | ||
| 83 | + opacity: 0; | ||
| 84 | + animation-name: cloudRight; | ||
| 85 | + animation-duration: 2s; | ||
| 86 | + animation-timing-function: linear; | ||
| 87 | + animation-fill-mode: forwards; | ||
| 88 | + animation-delay: 1s; | ||
| 89 | + } | ||
| 90 | + @keyframes cloudLeft { | ||
| 91 | + 0% { | ||
| 92 | + top: 17px; | ||
| 93 | + left: 220px; | ||
| 94 | + opacity: 0; | ||
| 95 | + } | ||
| 96 | + 20% { | ||
| 97 | + top: 33px; | ||
| 98 | + left: 188px; | ||
| 99 | + opacity: 1; | ||
| 100 | + } | ||
| 101 | + 80% { | ||
| 102 | + top: 81px; | ||
| 103 | + left: 92px; | ||
| 104 | + opacity: 1; | ||
| 105 | + } | ||
| 106 | + 100% { | ||
| 107 | + top: 97px; | ||
| 108 | + left: 60px; | ||
| 109 | + opacity: 0; | ||
| 110 | + } | ||
| 111 | + } | ||
| 112 | + @keyframes cloudMid { | ||
| 113 | + 0% { | ||
| 114 | + top: 10px; | ||
| 115 | + left: 420px; | ||
| 116 | + opacity: 0; | ||
| 117 | + } | ||
| 118 | + 20% { | ||
| 119 | + top: 40px; | ||
| 120 | + left: 360px; | ||
| 121 | + opacity: 1; | ||
| 122 | + } | ||
| 123 | + 70% { | ||
| 124 | + top: 130px; | ||
| 125 | + left: 180px; | ||
| 126 | + opacity: 1; | ||
| 127 | + } | ||
| 128 | + 100% { | ||
| 129 | + top: 160px; | ||
| 130 | + left: 120px; | ||
| 131 | + opacity: 0; | ||
| 132 | + } | ||
| 133 | + } | ||
| 134 | + @keyframes cloudRight { | ||
| 135 | + 0% { | ||
| 136 | + top: 100px; | ||
| 137 | + left: 500px; | ||
| 138 | + opacity: 0; | ||
| 139 | + } | ||
| 140 | + 20% { | ||
| 141 | + top: 120px; | ||
| 142 | + left: 460px; | ||
| 143 | + opacity: 1; | ||
| 144 | + } | ||
| 145 | + 80% { | ||
| 146 | + top: 180px; | ||
| 147 | + left: 340px; | ||
| 148 | + opacity: 1; | ||
| 149 | + } | ||
| 150 | + 100% { | ||
| 151 | + top: 200px; | ||
| 152 | + left: 300px; | ||
| 153 | + opacity: 0; | ||
| 154 | + } | ||
| 155 | + } | ||
| 156 | + } | ||
| 157 | + } | ||
| 158 | + .bullshit { | ||
| 159 | + position: relative; | ||
| 160 | + float: left; | ||
| 161 | + width: 300px; | ||
| 162 | + padding: 30px 0; | ||
| 163 | + overflow: hidden; | ||
| 164 | + &__oops { | ||
| 165 | + font-size: 32px; | ||
| 166 | + font-weight: bold; | ||
| 167 | + line-height: 40px; | ||
| 168 | + color: #1482f0; | ||
| 169 | + opacity: 0; | ||
| 170 | + margin-bottom: 20px; | ||
| 171 | + animation-name: slideUp; | ||
| 172 | + animation-duration: 0.5s; | ||
| 173 | + animation-fill-mode: forwards; | ||
| 174 | + } | ||
| 175 | + &__headline { | ||
| 176 | + font-size: 20px; | ||
| 177 | + line-height: 24px; | ||
| 178 | + color: #222; | ||
| 179 | + font-weight: bold; | ||
| 180 | + opacity: 0; | ||
| 181 | + margin-bottom: 10px; | ||
| 182 | + animation-name: slideUp; | ||
| 183 | + animation-duration: 0.5s; | ||
| 184 | + animation-delay: 0.1s; | ||
| 185 | + animation-fill-mode: forwards; | ||
| 186 | + } | ||
| 187 | + &__info { | ||
| 188 | + font-size: 13px; | ||
| 189 | + line-height: 21px; | ||
| 190 | + color: grey; | ||
| 191 | + opacity: 0; | ||
| 192 | + margin-bottom: 30px; | ||
| 193 | + animation-name: slideUp; | ||
| 194 | + animation-duration: 0.5s; | ||
| 195 | + animation-delay: 0.2s; | ||
| 196 | + animation-fill-mode: forwards; | ||
| 197 | + } | ||
| 198 | + &__return-home { | ||
| 199 | + display: block; | ||
| 200 | + float: left; | ||
| 201 | + width: 110px; | ||
| 202 | + height: 36px; | ||
| 203 | + background: #1482f0; | ||
| 204 | + border-radius: 100px; | ||
| 205 | + text-align: center; | ||
| 206 | + color: #ffffff; | ||
| 207 | + opacity: 0; | ||
| 208 | + font-size: 14px; | ||
| 209 | + line-height: 36px; | ||
| 210 | + cursor: pointer; | ||
| 211 | + animation-name: slideUp; | ||
| 212 | + animation-duration: 0.5s; | ||
| 213 | + animation-delay: 0.3s; | ||
| 214 | + animation-fill-mode: forwards; | ||
| 215 | + } | ||
| 216 | + @keyframes slideUp { | ||
| 217 | + 0% { | ||
| 218 | + transform: translateY(60px); | ||
| 219 | + opacity: 0; | ||
| 220 | + } | ||
| 221 | + 100% { | ||
| 222 | + transform: translateY(0); | ||
| 223 | + opacity: 1; | ||
| 224 | + } | ||
| 225 | + } | ||
| 226 | + } | ||
| 227 | +} | ||
| 228 | +</style> |
src/views/QuestionBank/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="app-container"> | ||
| 3 | + | ||
| 4 | + <el-row id="elRow"> | ||
| 5 | + <el-col :span="4" :style="{'height':TreeColHeight+'px'}"> | ||
| 6 | + <div style="margin-right: 10px;height: 100%;"> | ||
| 7 | + <div class="TreeHeader"> | ||
| 8 | + <label style="font-size: 18px;">题目分类</label> | ||
| 9 | + </div> | ||
| 10 | + <div :style="{'height':TableColHeight+'px'}" class="areadiv" | ||
| 11 | + style="margin:10px 0 0 0;padding: 5px 0 0 0;"> | ||
| 12 | + <el-tree :data="treeData" :props="treeData" @node-click="handleNodeClick" class="eltree" | ||
| 13 | + :expand-on-click-node=false> | ||
| 14 | + <span class="custom-tree-node" slot-scope="{ node, data }"> | ||
| 15 | + <span>{{ node.label }}</span> | ||
| 16 | + <span style=""> | ||
| 17 | + <el-button type="text" size="mini" @click="showClassDialog(node)"> | ||
| 18 | + 添加下级 | ||
| 19 | + </el-button> | ||
| 20 | + <el-button type="text" size="mini" @click="() => remove(node, data)"> | ||
| 21 | + 删除本级 | ||
| 22 | + </el-button> | ||
| 23 | + </span> | ||
| 24 | + </span> | ||
| 25 | + </el-tree> | ||
| 26 | + </div> | ||
| 27 | + </div> | ||
| 28 | + </el-col> | ||
| 29 | + <el-col :span="20"> | ||
| 30 | + <div class="grid-content bg-purple-light"> | ||
| 31 | + <div class="seetingsDiv" style=""> | ||
| 32 | + <el-button type="primary" @click="dialogsubjectlVisible=true">添加题目 | ||
| 33 | + </el-button> | ||
| 34 | + </div> | ||
| 35 | + <div class="areadiv" :style="{'height':TableColHeight+'px'}"> | ||
| 36 | + <el-table :data="QuestList" id="QuestionTable" border | ||
| 37 | + style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;" | ||
| 38 | + :header-cell-class-name="headerStyle" :stripe=true> | ||
| 39 | + <el-table-column prop="date" label="ID" width="50"> | ||
| 40 | + <template slot-scope="scope"> | ||
| 41 | + <span>{{ scope.row.id }}</span> | ||
| 42 | + </template> | ||
| 43 | + </el-table-column> | ||
| 44 | + <el-table-column prop="date" label="题目类型" width="100"> | ||
| 45 | + <template slot-scope="scope"> | ||
| 46 | + <span style="padding-left: 10px;">{{ scope.row.subjectName }}</span> | ||
| 47 | + </template> | ||
| 48 | + </el-table-column> | ||
| 49 | + <el-table-column prop="QuestionClassName" label="分类" width="100"> | ||
| 50 | + <template slot-scope="scope"> | ||
| 51 | + <span style="padding-left: 10px;">{{ scope.row.QuestionClassName }}</span> | ||
| 52 | + </template> | ||
| 53 | + </el-table-column> | ||
| 54 | + <el-table-column prop="name" label="分数" width="80"> | ||
| 55 | + <template slot-scope="scope"> | ||
| 56 | + <span style="padding-left: 10px;">{{ scope.row.fraction }}</span> | ||
| 57 | + </template> | ||
| 58 | + </el-table-column> | ||
| 59 | + <el-table-column prop="name" label="单项分数" width="80"> | ||
| 60 | + <template slot-scope="scope"> | ||
| 61 | + <span style="padding-left: 10px;">{{ scope.row.singleFraction }}</span> | ||
| 62 | + </template> | ||
| 63 | + </el-table-column> | ||
| 64 | + <el-table-column prop="name" label="正确答案" width="80"> | ||
| 65 | + <template slot-scope="scope"> | ||
| 66 | + <span style="padding-left: 10px;">{{ scope.row.answer }}</span> | ||
| 67 | + </template> | ||
| 68 | + </el-table-column> | ||
| 69 | + <el-table-column prop="name" label="题目" :show-overflow-tooltip=true> | ||
| 70 | + <template slot-scope="scope"> | ||
| 71 | + <span style="padding-left: 10px;">{{ scope.row.subject }}</span> | ||
| 72 | + </template> | ||
| 73 | + </el-table-column> | ||
| 74 | + <el-table-column prop="name" label="解析" :show-overflow-tooltip=true> | ||
| 75 | + <template slot-scope="scope"> | ||
| 76 | + <span style="padding-left: 10px;">{{ scope.row.analysis }}</span> | ||
| 77 | + </template> | ||
| 78 | + </el-table-column> | ||
| 79 | + <el-table-column fixed="right" label="操作" width="150"> | ||
| 80 | + <template slot-scope="scope"> | ||
| 81 | + <el-dropdown @command="(e)=>{handleCommand(e,scope.row.id)}" | ||
| 82 | + style="padding-left: 10px;"> | ||
| 83 | + <span class="el-dropdown-link"> | ||
| 84 | + 操作<i class="el-icon-arrow-down el-icon--right"></i> | ||
| 85 | + </span> | ||
| 86 | + <template #dropdown> | ||
| 87 | + <el-dropdown-menu> | ||
| 88 | + <el-dropdown-item command="update">编辑</el-dropdown-item> | ||
| 89 | + <!-- <el-dropdown-item command="b">锁定</el-dropdown-item> --> | ||
| 90 | + <el-dropdown-item command="del">删除</el-dropdown-item> | ||
| 91 | + </el-dropdown-menu> | ||
| 92 | + </template> | ||
| 93 | + </el-dropdown> | ||
| 94 | + </template> | ||
| 95 | + </el-table-column> | ||
| 96 | + </el-table> | ||
| 97 | + <el-pagination background @current-change="currentchange" | ||
| 98 | + style="position:static;bottom: 3px;text-align: center;margin-top: 5px;" | ||
| 99 | + :page-size="this.parameter.pageSize" layout="total,prev, pager, next" :total="Count"> | ||
| 100 | + </el-pagination> | ||
| 101 | + <div style="clear: both;"></div> | ||
| 102 | + </div> | ||
| 103 | + </div> | ||
| 104 | + </el-col> | ||
| 105 | + </el-row> | ||
| 106 | + <el-dialog title="分类维护" :visible.sync="dialogClassIVIsible" @close="closeClassDialog" width="400px" | ||
| 107 | + :close-on-click-modal="false"> | ||
| 108 | + <el-form ref="QuestionClassInfo" :model="QuestionClassInfo" label-width="70px"> | ||
| 109 | + <el-form-item label="分类名称"> | ||
| 110 | + <el-input v-model="QuestionClassInfo.ClassificationName" placeholder="请输入分类名称"></el-input> | ||
| 111 | + </el-form-item> | ||
| 112 | + </el-form> | ||
| 113 | + <el-button @click="CreateQuestionClassHealder" style="margin: 10px 0 0 0 ;float:right" type="primary">确定 | ||
| 114 | + </el-button> | ||
| 115 | + <div style="clear: both;"></div> | ||
| 116 | + </el-dialog> | ||
| 117 | + <el-dialog title="编辑题目" :visible.sync="dialogsubjectlVisible" @close='closeDialog' width="800px" | ||
| 118 | + :close-on-click-modal="false"> | ||
| 119 | + <el-form ref="Dataform" :model="Dataform" label-width="60px"> | ||
| 120 | + <el-form-item label="题目"> | ||
| 121 | + <el-input v-model="Dataform.subject" placeholder="请输入题目名称"></el-input> | ||
| 122 | + </el-form-item> | ||
| 123 | + <el-form-item label="分类" style="padding-top: 5px;"> | ||
| 124 | + <el-cascader v-model="Dataform.QuestionClassId" style="width:400px" :props="{emitPath:false}" | ||
| 125 | + :clearable=true :options="QuestionClass"> | ||
| 126 | + </el-cascader> | ||
| 127 | + </el-form-item> | ||
| 128 | + <el-form-item label="题型" style="padding-top: 5px;"> | ||
| 129 | + <el-select v-model="Dataform.subjectType" value-key="Dataform.subjectType" | ||
| 130 | + @change="changeQuestionType" placeholder="请选择题型"> | ||
| 131 | + <el-option label="单选题" :value="1"></el-option> | ||
| 132 | + <el-option label="多选题" :value="2"></el-option> | ||
| 133 | + <el-option label="主观题" :value="3"></el-option> | ||
| 134 | + </el-select> | ||
| 135 | + </el-form-item> | ||
| 136 | + <el-form-item label="选项" v-show="OptionVisible"> | ||
| 137 | + <el-table :data="subjectContent" :show-header="false"> | ||
| 138 | + <el-table-column> | ||
| 139 | + <template slot-scope="scope"> | ||
| 140 | + <el-input placeholder="请输入答案" v-model="scope.row.optionContent" class="optionInput"> | ||
| 141 | + <template slot="prepend">{{scope.row.option}}</template> | ||
| 142 | + </el-input> | ||
| 143 | + <i class="el-icon-circle-plus el-icon" @click="Addlist"></i> | ||
| 144 | + <i class="el-icon-remove el-icon" @click="RemoveList(scope)" v-if="scope.$index!=0"></i> | ||
| 145 | + </template> | ||
| 146 | + </el-table-column> | ||
| 147 | + </el-table> | ||
| 148 | + </el-form-item> | ||
| 149 | + <el-form-item label="答案" v-show="OptionVisible" class="subjectContentClass"> | ||
| 150 | + <el-radio-group v-for="(item,i) in subjectContent" v-model="Dataform.answer" v-if="GroupVisible"> | ||
| 151 | + <el-radio :label="item.option">{{item.option}}</el-radio> | ||
| 152 | + </el-radio-group> | ||
| 153 | + <el-checkbox-group v-for="(item,i) in subjectContent" v-model="Dataform.answer" | ||
| 154 | + v-if="!GroupVisible"> | ||
| 155 | + <el-checkbox style="float: left;" :label="item.option">{{item.option}}</el-checkbox> | ||
| 156 | + </el-checkbox-group> | ||
| 157 | + </el-form-item> | ||
| 158 | + <el-form-item label="分数" v-show="OptionVisible"> | ||
| 159 | + <el-input-number :step="1" style="float: left;" :min="0" v-model="Dataform.fraction"> | ||
| 160 | + </el-input-number> | ||
| 161 | + <div style="float: left;margin-left: 20px;" v-if="!GroupVisible"> | ||
| 162 | + <lable style="font-weight: bold;">单项分数：</lable> | ||
| 163 | + <el-input-number :step="0.5" :max="Dataform.fraction/2" :min="0" | ||
| 164 | + v-model="Dataform.singleFraction"> | ||
| 165 | + </el-input-number> | ||
| 166 | + </div> | ||
| 167 | + </el-form-item> | ||
| 168 | + <el-form-item label="解析" style="margin-top: 10px;"> | ||
| 169 | + <el-input v-model="Dataform.analysis" :rows="10" type="textarea" placeholder="请输入答案解析" /> | ||
| 170 | + </el-form-item> | ||
| 171 | + </el-form> | ||
| 172 | + <el-button @click="EditQuestionHeadler" style="margin: 10px 0 0 0;float:right" type="primary">确定 | ||
| 173 | + </el-button> | ||
| 174 | + <div style="clear: both;"></div> | ||
| 175 | + </el-dialog> | ||
| 176 | + </div> | ||
| 177 | +</template> | ||
| 178 | + | ||
| 179 | +<script lang="ts"> | ||
| 180 | + import { | ||
| 181 | + getQuestionList, | ||
| 182 | + EditQuestion, | ||
| 183 | + getQuestionClassList, | ||
| 184 | + DelQuestionBankEvent, | ||
| 185 | + GetQuestionBankById, | ||
| 186 | + CreateQuestionClass | ||
| 187 | + } from '@/api/QuestionBank' | ||
| 188 | + import { | ||
| 189 | + parseTime | ||
| 190 | + } from '@/utils/index.js' | ||
| 191 | + export default { | ||
| 192 | + filters: {}, | ||
| 193 | + data() { | ||
| 194 | + return { | ||
| 195 | + parameter: { | ||
| 196 | + pageIndex: 1, | ||
| 197 | + pageSize: 12, | ||
| 198 | + sort: "id", | ||
| 199 | + sortOrder: 1, | ||
| 200 | + keyword: "", | ||
| 201 | + QuestionClassId: 0, | ||
| 202 | + status: 1 | ||
| 203 | + }, | ||
| 204 | + Count: 0, | ||
| 205 | + QuestList: [], | ||
| 206 | + dialogsubjectlVisible: false, | ||
| 207 | + dialogClassIVIsible: false, | ||
| 208 | + OptionVisible: true, | ||
| 209 | + GroupVisible: true, | ||
| 210 | + Dataform: { | ||
| 211 | + subject: "", | ||
| 212 | + subjectType: 1, | ||
| 213 | + subjectContent: "", | ||
| 214 | + QuestionClassId: 0, | ||
| 215 | + answer: [], | ||
| 216 | + analysis: "", | ||
| 217 | + fraction: 0, | ||
| 218 | + singleFraction: 0, | ||
| 219 | + addTime: "2021-11-12", | ||
| 220 | + state: 1 | ||
| 221 | + }, | ||
| 222 | + subjectContent: [{ | ||
| 223 | + option: "A", | ||
| 224 | + optionContent: "" | ||
| 225 | + }], | ||
| 226 | + QuestionClass: [], | ||
| 227 | + QuestionClassInfo: { | ||
| 228 | + ParentId: 0, | ||
| 229 | + ClassificationName: "", | ||
| 230 | + Addtime: "" | ||
| 231 | + }, | ||
| 232 | + TreeColHeight: 0, | ||
| 233 | + TableColHeight: 0, | ||
| 234 | + treeData: [{ | ||
| 235 | + value: 0, | ||
| 236 | + label: "全部" | ||
| 237 | + }], | ||
| 238 | + CreatClassId: 0 | ||
| 239 | + } | ||
| 240 | + }, | ||
| 241 | + created() { | ||
| 242 | + | ||
| 243 | + }, | ||
| 244 | + mounted() { | ||
| 245 | + let ContentAreaHight = window.innerHeight - document.getElementById("elRow").offsetTop - 70; | ||
| 246 | + this.TableColHeight = ContentAreaHight - document.getElementById("QuestionTable").offsetTop; | ||
| 247 | + let lineNumber = this.TableColHeight - 50 - 20; //减去表头来计算 | ||
| 248 | + this.TreeColHeight = ContentAreaHight; | ||
| 249 | + lineNumber = Math.floor(lineNumber / 49) | ||
| 250 | + this.parameter.pageSize = lineNumber; | ||
| 251 | + this.GetList(); | ||
| 252 | + this.getQuestionClassListHeadler(); | ||
| 253 | + }, | ||
| 254 | + methods: { | ||
| 255 | + //表格右边的操作按钮 | ||
| 256 | + handleCommand(value, val) { | ||
| 257 | + if (value == "update") { | ||
| 258 | + this.GetQuestionBankByIdHeadler(val); | ||
| 259 | + } | ||
| 260 | + if (value == "del") { | ||
| 261 | + this.DelQuestionBankEventHeadler(val); | ||
| 262 | + } | ||
| 263 | + }, | ||
| 264 | + //添加分类 | ||
| 265 | + CreateQuestionClassHealder() { | ||
| 266 | + this.QuestionClassInfo.Addtime = parseTime(new Date(), ""); | ||
| 267 | + CreateQuestionClass(this.QuestionClassInfo).then(res => { | ||
| 268 | + alert(res.code) | ||
| 269 | + }) | ||
| 270 | + }, | ||
| 271 | + //获取选择的题目详细信息 | ||
| 272 | + GetQuestionBankByIdHeadler(id) { | ||
| 273 | + GetQuestionBankById(id).then(res => { | ||
| 274 | + this.changeQuestionType(res.data.data.subjectType); //这里先初始化编辑显示内容 | ||
| 275 | + this.Dataform = res.data.data; //内容赋值 | ||
| 276 | + this.subjectContent = JSON.parse(res.data.data.subjectContent); //赋值选项 | ||
| 277 | + if (res.data.data.subjectType == 1) { | ||
| 278 | + this.Dataform.answer = res.data.data.answer.split(',')[0]; //赋值答案 | ||
| 279 | + } else { | ||
| 280 | + this.Dataform.answer = res.data.data.answer.split(','); //赋值答案 | ||
| 281 | + } | ||
| 282 | + this.dialogsubjectlVisible = true; | ||
| 283 | + | ||
| 284 | + }); | ||
| 285 | + }, | ||
| 286 | + showClassDialog(node) { | ||
| 287 | + this.dialogClassIVIsible = true; | ||
| 288 | + console.log(node); | ||
| 289 | + this.QuestionClassInfo.ParentId = node.data.value; | ||
| 290 | + alert(this.QuestionClassInfo.ParentId); | ||
| 291 | + }, | ||
| 292 | + //关闭弹框的事件 | ||
| 293 | + closeDialog() { | ||
| 294 | + //初始化数据 | ||
| 295 | + this.Dataform = this.$options.data().Dataform; | ||
| 296 | + this.subjectContent = this.$options.data().subjectContent; | ||
| 297 | + //所有文本框恢复到初始化状态 | ||
| 298 | + this.Dataform.answer = []; | ||
| 299 | + this.OptionVisible = true; | ||
| 300 | + this.GroupVisible = true; | ||
| 301 | + }, | ||
| 302 | + //选择题目类型来判断是否显示部分表单 | ||
| 303 | + changeQuestionType(val) { | ||
| 304 | + if (val == 3) { | ||
| 305 | + this.OptionVisible = false; | ||
| 306 | + } | ||
| 307 | + if (val == 2) { | ||
| 308 | + this.OptionVisible = true; | ||
| 309 | + this.Dataform.answer = []; | ||
| 310 | + this.GroupVisible = false; | ||
| 311 | + } | ||
| 312 | + if (val == 1) { | ||
| 313 | + this.Dataform.answer = []; | ||
| 314 | + this.OptionVisible = true; | ||
| 315 | + this.GroupVisible = true; | ||
| 316 | + } | ||
| 317 | + }, | ||
| 318 | + headerStyle({ | ||
| 319 | + row, | ||
| 320 | + column, | ||
| 321 | + rowIndex, | ||
| 322 | + columnIndex | ||
| 323 | + }) { | ||
| 324 | + return 'tableStyle' | ||
| 325 | + }, | ||
| 326 | + Addlist() { | ||
| 327 | + if (this.subjectContent.length < 4) { | ||
| 328 | + var alphabet = String.fromCharCode(64 + parseInt(this.subjectContent.length + 1)); | ||
| 329 | + this.subjectContent.push({ | ||
| 330 | + "option": alphabet, | ||
| 331 | + "title": "" | ||
| 332 | + }); | ||
| 333 | + } else { | ||
| 334 | + this.$confirm('系统暂时只支持4个答案！', '消息') | ||
| 335 | + } | ||
| 336 | + }, | ||
| 337 | + RemoveList(val) { | ||
| 338 | + this.subjectContent.splice(val.$index, 1); | ||
| 339 | + this.subjectContent.forEach((item, index) => { | ||
| 340 | + item.option = String.fromCharCode(64 + parseInt(index + 1)); | ||
| 341 | + }) | ||
| 342 | + }, | ||
| 343 | + handleNodeClick(val) { | ||
| 344 | + this.parameter.QuestionClassId = val.value; | ||
| 345 | + this.parameter.pageIndex = 1; | ||
| 346 | + this.GetList(); | ||
| 347 | + }, | ||
| 348 | + DelQuestionBankEventHeadler(id) { | ||
| 349 | + this.$confirm('确定删除该试题？', '消息', { | ||
| 350 | + confirmButtonText: '确认', | ||
| 351 | + cancelButtonText: '取消', | ||
| 352 | + callback: (action) => { | ||
| 353 | + if (action == "confirm") { | ||
| 354 | + DelQuestionBankEvent(id).then(res => { | ||
| 355 | + if (res.data.code == 200) { | ||
| 356 | + this.$confirm(res.data.message, '消息') | ||
| 357 | + this.GetList(); | ||
| 358 | + } | ||
| 359 | + }); | ||
| 360 | + } | ||
| 361 | + }, | ||
| 362 | + }) | ||
| 363 | + }, | ||
| 364 | + EditQuestionHeadler() { | ||
| 365 | + let reg = new RegExp('"', 'g'); | ||
| 366 | + //this.Dataform.subjectContent = JSON.stringify(this.subjectContent).replace(reg, "\""); | ||
| 367 | + this.Dataform.subjectContent = this.subjectContent; | ||
| 368 | + if (typeof(this.Dataform.answer) != 'string') //判断是否为字符串 | ||
| 369 | + this.Dataform.answer = this.Dataform.answer.join(',') | ||
| 370 | + var _this = this; | ||
| 371 | + EditQuestion(this.Dataform).then(res => { | ||
| 372 | + if (res.data.code == 200) { | ||
| 373 | + _this.GetList(); | ||
| 374 | + this.$message(res.data.message); | ||
| 375 | + setTimeout(function() { | ||
| 376 | + _this.dialogsubjectlVisible = false; | ||
| 377 | + }, 10) | ||
| 378 | + } | ||
| 379 | + }); | ||
| 380 | + }, | ||
| 381 | + GetList() { | ||
| 382 | + let _this = this; | ||
| 383 | + getQuestionList(_this.parameter).then(res => { | ||
| 384 | + _this.QuestList = res.data.data.rows; | ||
| 385 | + _this.Count = res.data.data.total; | ||
| 386 | + _this.$forceUpdate(); | ||
| 387 | + }); | ||
| 388 | + }, | ||
| 389 | + currentchange(page) { | ||
| 390 | + this.parameter.pageIndex = page; | ||
| 391 | + this.GetList(); | ||
| 392 | + }, | ||
| 393 | + getQuestionClassListHeadler() { | ||
| 394 | + let _this = this; | ||
| 395 | + getQuestionClassList().then(res => { | ||
| 396 | + var gettree = function(titem) { | ||
| 397 | + titem.children = [] | ||
| 398 | + let childrenList = res.data.data.filter(u => u.ParentId == titem.value); | ||
| 399 | + if (childrenList.length == 0) | ||
| 400 | + titem.children = undefined; | ||
| 401 | + res.data.data.filter(u => u.ParentId == titem.value).forEach((item, i) => { | ||
| 402 | + var model = { | ||
| 403 | + value: item.id, | ||
| 404 | + label: item.ClassificationName | ||
| 405 | + }; | ||
| 406 | + gettree(model); | ||
| 407 | + titem.children.push(model); | ||
| 408 | + }) | ||
| 409 | + } | ||
| 410 | + res.data.data.filter(u => u.ParentId == 0).forEach((item, i) => { | ||
| 411 | + var model = { | ||
| 412 | + value: item.id, | ||
| 413 | + label: item.ClassificationName | ||
| 414 | + }; | ||
| 415 | + gettree(model); | ||
| 416 | + _this.QuestionClass.push(model); | ||
| 417 | + _this.treeData.push(model) | ||
| 418 | + }) | ||
| 419 | + }); | ||
| 420 | + } | ||
| 421 | + } | ||
| 422 | + } | ||
| 423 | +</script> | ||
| 424 | +<style scoped="scoped"> | ||
| 425 | + /deep/.cell { | ||
| 426 | + padding-left: 0px; | ||
| 427 | + } | ||
| 428 | + /deep/.el-form-item { | ||
| 429 | + margin-bottom: 5px; | ||
| 430 | + } | ||
| 431 | + /deep/.el-radio { | ||
| 432 | + margin-right: 10px; | ||
| 433 | + } | ||
| 434 | + /deep/.el-radio__input.is-checked .el-radio__inner { | ||
| 435 | + border-color: #409EFF; | ||
| 436 | + background-color: #409EFF; | ||
| 437 | + } | ||
| 438 | + /deep/.el-radio__input.is-checked+.el-radio__label { | ||
| 439 | + color: #409EFF; | ||
| 440 | + font-weight: bold; | ||
| 441 | + } | ||
| 442 | + /deep/.tableStyle { | ||
| 443 | + background-color: #304156 !important; | ||
| 444 | + color: #fff; | ||
| 445 | + font-weight: 400; | ||
| 446 | + } | ||
| 447 | + .QuestDiv { | ||
| 448 | + width: 24%; | ||
| 449 | + float: left; | ||
| 450 | + min-height: 50px; | ||
| 451 | + border: 1px solid #CDCDCD; | ||
| 452 | + margin-right: 10px; | ||
| 453 | + box-shadow: 0 0 10px #808080; | ||
| 454 | + border-radius: 8px; | ||
| 455 | + min-height: 100px; | ||
| 456 | + background-color: #FFF; | ||
| 457 | + opacity: 0.8; | ||
| 458 | + margin-bottom: 10px; | ||
| 459 | + height: 313px; | ||
| 460 | + } | ||
| 461 | + .clear { | ||
| 462 | + clear: both; | ||
| 463 | + margin-bottom: 10px; | ||
| 464 | + } | ||
| 465 | + .font-color { | ||
| 466 | + background-color: #AE1E15 !important; | ||
| 467 | + color: #FFF; | ||
| 468 | + box-shadow: 0 0 5px #AE1E15; | ||
| 469 | + } | ||
| 470 | + /deep/.el-input-group__prepend { | ||
| 471 | + font-weight: bold; | ||
| 472 | + width: 30px; | ||
| 473 | + text-align: center; | ||
| 474 | + background: #409EFF; | ||
| 475 | + color: #FFF; | ||
| 476 | + } | ||
| 477 | + .optionInput { | ||
| 478 | + float: left; | ||
| 479 | + width: 620px !important; | ||
| 480 | + } | ||
| 481 | + .el-icon { | ||
| 482 | + font-size: 20px; | ||
| 483 | + line-height: 40px; | ||
| 484 | + margin: 0 5px; | ||
| 485 | + cursor: pointer; | ||
| 486 | + color: #409EFF !important; | ||
| 487 | + } | ||
| 488 | + >>>.subjectContentClass .el-checkbox__label { | ||
| 489 | + padding-right: 10px !important; | ||
| 490 | + } | ||
| 491 | + .seetingsDiv { | ||
| 492 | + width: 100%; | ||
| 493 | + height: 60px; | ||
| 494 | + background: #efefef; | ||
| 495 | + line-height: 60px; | ||
| 496 | + border-radius: 5px; | ||
| 497 | + box-shadow: 0 0 5px #cdcdcd; | ||
| 498 | + } | ||
| 499 | + .seetingsDiv button { | ||
| 500 | + background-color: #304156; | ||
| 501 | + border: 0px; | ||
| 502 | + margin-left: 10px; | ||
| 503 | + box-shadow: 0 0 5px #cdcdcd; | ||
| 504 | + float: right; | ||
| 505 | + margin-top: 12px; | ||
| 506 | + margin-right: 10px; | ||
| 507 | + } | ||
| 508 | + .areadiv { | ||
| 509 | + background-color: #efefef; | ||
| 510 | + border-radius: 5px; | ||
| 511 | + box-shadow: 0 0 5px #efefef; | ||
| 512 | + } | ||
| 513 | + .TreeHeader { | ||
| 514 | + background-color: #304156; | ||
| 515 | + height: 60px; | ||
| 516 | + border-radius: 5px; | ||
| 517 | + box-shadow: 0 0 10px #efefef; | ||
| 518 | + line-height: 60px; | ||
| 519 | + color: #FFF; | ||
| 520 | + padding-left: 10px; | ||
| 521 | + } | ||
| 522 | + .classbtn { | ||
| 523 | + float: right; | ||
| 524 | + margin: 11px 10px 0 0; | ||
| 525 | + height: 35px; | ||
| 526 | + line-height: 12px; | ||
| 527 | + } | ||
| 528 | + .eltree { | ||
| 529 | + background-color: #efefef; | ||
| 530 | + } | ||
| 531 | + /deep/.el-tree-node__content { | ||
| 532 | + min-height: 40px; | ||
| 533 | + } | ||
| 534 | + .custom-tree-node { | ||
| 535 | + flex: 1; | ||
| 536 | + display: flex; | ||
| 537 | + align-items: center; | ||
| 538 | + justify-content: space-between; | ||
| 539 | + font-size: 14px; | ||
| 540 | + padding-right: 8px; | ||
| 541 | + } | ||
| 542 | +</style> |
src/views/TestPaper/ManualTestPaper.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="app-container"> | ||
| 3 | + <el-row :gutter="20"> | ||
| 4 | + <el-col :span="6" :style="{'height':contentHeight+'px'}"> | ||
| 5 | + <div class="grid-content bg-purple"> | ||
| 6 | + <div style="width: 100%;height: 80px;background: red;"> | ||
| 7 | + </div> | ||
| 8 | + <draggable :options="{animation:380,filter:'.unmover'}" group="itxst" v-model="arr1" @end="end1" | ||
| 9 | + @add="RemoveHere" :move="onMove" class="infinite-list" :style="{'height':contentHeight-80+'px'}" | ||
| 10 | + infinite-scroll-disabled="disabled" v-infinite-scroll="load" style="overflow:auto"> | ||
| 11 | + <li v-for="i in arr1" class="infinite-list-item">{{ i.subject }}</li> | ||
| 12 | + <p v-if="loading" style="text-align: center;color: #cdcdcd;" class="unmover">加载中...</p> | ||
| 13 | + <p v-if="noMore" style="text-align: center;color: #cdcdcd;" class="unmover">没有更多了</p> | ||
| 14 | + </li> | ||
| 15 | + </draggable> | ||
| 16 | + | ||
| 17 | + </div> | ||
| 18 | + </el-col> | ||
| 19 | + <el-col :span="10" :style="{'height':contentHeight+'px'}"> | ||
| 20 | + <div class="grid-content bg-purple"> | ||
| 21 | + <div class="areahead"> | ||
| 22 | + <span v-show="!edit" style="font-weight: bold;">{{ TestPaper.TestPaperTitle }}</span> | ||
| 23 | + <el-input v-show="edit" style="width: 400px;" v-model="TestPaper.TestPaperTitle"></el-input> | ||
| 24 | + <i :class="{'el-icon-edit': !edit, 'el-icon-check': edit}" @click="edit = !edit" | ||
| 25 | + style="margin-left: 5px;cursor: pointer;"></i> | ||
| 26 | + </div> | ||
| 27 | + <draggable :options="{animation:380}" group="itxst" v-model="arr2" class="infinite-list" @end="end2" | ||
| 28 | + @add="ComeHere" :style="{'height':contentHeight-60+'px'}" | ||
| 29 | + style="overflow:auto;padding-top: 10px;"> | ||
| 30 | + <li v-for="i in arr2" class="infinite-list-item"> | ||
| 31 | + <label>[{{i.subjectName}}]{{ i.subject }}</label> | ||
| 32 | + <div v-for="item in JSON.parse(i.subjectContent)"> | ||
| 33 | + <p class="option-p">{{item.option}}:{{item.optionContent}}</p> | ||
| 34 | + </div> | ||
| 35 | + </li> | ||
| 36 | + </li> | ||
| 37 | + </draggable> | ||
| 38 | + </div> | ||
| 39 | + </el-col> | ||
| 40 | + <el-col :span="8" :style="{'height':contentHeight+'px'}"> | ||
| 41 | + <div class="grid-content bg-purple"> | ||
| 42 | + <div class="areahead">组卷基本信息</div> | ||
| 43 | + <el-form ref="form" class="testPaper-manager" :rules="rules" :model="TestPaper" label-width="100px"> | ||
| 44 | + <el-form-item label="试卷名称:" class="el-form-item-custom"> | ||
| 45 | + {{TestPaper.TestPaperTitle}} | ||
| 46 | + </el-form-item> | ||
| 47 | + <el-form-item label="题目数量:" class="el-form-item-custom"> | ||
| 48 | + {{arr2.length}} | ||
| 49 | + </el-form-item> | ||
| 50 | + <el-form-item label="题型数量:" class="el-form-item-custom"> | ||
| 51 | + <span style="margin-right: 10px;">单选题：{{TestPaper.SingleNumber}}</span> | ||
| 52 | + <span style="margin-right: 10px;">多选题：{{TestPaper.MultipleNumber}}</span> | ||
| 53 | + <span style="margin-right: 10px;">主观题：{{TestPaper.SubjectiveNumber}}</span> | ||
| 54 | + </el-form-item> | ||
| 55 | + <el-form-item label="题目总分:" class="el-form-item-custom"> | ||
| 56 | + {{TestPaper.TotalScore}} | ||
| 57 | + </el-form-item> | ||
| 58 | + <el-form-item label="分类" class="el-form-item-custom"> | ||
| 59 | + <el-cascader class="testpaper-input" v-model="TestPaper.QuestionClassId" | ||
| 60 | + style="width:400px;margin-bottom: 20px;" :props="{emitPath:false}" :clearable=true | ||
| 61 | + :options="QuestionClass"> | ||
| 62 | + </el-cascader> | ||
| 63 | + </el-form-item> | ||
| 64 | + <el-form-item label="试卷原价:" prop="OriginalPrice" v-show="false"> | ||
| 65 | + <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')" | ||
| 66 | + v-model="TestPaper.OriginalPrice" :precision="0"> | ||
| 67 | + <template slot="append">元</template> | ||
| 68 | + </el-input> | ||
| 69 | + </el-form-item> | ||
| 70 | + <el-form-item label="试卷价格:" prop="PresentPrice"> | ||
| 71 | + <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')" | ||
| 72 | + v-model="TestPaper.PresentPrice"> | ||
| 73 | + <template slot="append">元</template> | ||
| 74 | + </el-input> | ||
| 75 | + </el-form-item> | ||
| 76 | + <el-form-item label="会员价:" prop="MembershipPrice" v-show="false"> | ||
| 77 | + <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')" | ||
| 78 | + v-model="TestPaper.MembershipPrice"> | ||
| 79 | + <template slot="append">元</template> | ||
| 80 | + </el-input> | ||
| 81 | + </el-form-item> | ||
| 82 | + <el-form-item label="试卷简介:"> | ||
| 83 | + <el-input class="testpaper-input" :rows="10" type="textarea" v-model="TestPaper.Describe"> | ||
| 84 | + </el-input> | ||
| 85 | + </el-form-item> | ||
| 86 | + <el-button type="primary" style="float: right;" @click="SubmitTestPaper">保存 | ||
| 87 | + </el-button> | ||
| 88 | + </el-form> | ||
| 89 | + </div> | ||
| 90 | + </el-col> | ||
| 91 | + </el-row> | ||
| 92 | + </div> | ||
| 93 | +</template> | ||
| 94 | + | ||
| 95 | +<script> | ||
| 96 | + import draggable from 'vuedraggable' | ||
| 97 | + import { | ||
| 98 | + getQuestionClassList, | ||
| 99 | + getQuestionList, | ||
| 100 | + } from '@/api/QuestionBank' | ||
| 101 | + import { | ||
| 102 | + EditTestPaper, | ||
| 103 | + GetToplevel | ||
| 104 | + } from '@/api/TestPaper' | ||
| 105 | + export default { | ||
| 106 | + //注册draggable组件 | ||
| 107 | + components: { | ||
| 108 | + draggable, | ||
| 109 | + }, | ||
| 110 | + data() { | ||
| 111 | + return { | ||
| 112 | + parameter: { | ||
| 113 | + pageIndex: 0, | ||
| 114 | + pageSize: 12, | ||
| 115 | + sort: "id", | ||
| 116 | + sortOrder: 1, | ||
| 117 | + keyword: "", | ||
| 118 | + QuestionClassId: 0, | ||
| 119 | + status: 1 | ||
| 120 | + }, | ||
| 121 | + contentHeight: 0, | ||
| 122 | + count: 0, | ||
| 123 | + edit: false, | ||
| 124 | + arr1: [], | ||
| 125 | + arr2: [], | ||
| 126 | + moveId: -1, | ||
| 127 | + TestPaper: { | ||
| 128 | + TestPaperTitle: "未命名试卷标题", | ||
| 129 | + TestPaperClassId: 0, | ||
| 130 | + TotalScore: 0, | ||
| 131 | + Describe: "", | ||
| 132 | + SingleNumber: 0, | ||
| 133 | + MultipleNumber: 0, | ||
| 134 | + SubjectiveNumber: 0, | ||
| 135 | + OriginalPrice: "0", | ||
| 136 | + PresentPrice: "0", | ||
| 137 | + MembershipPrice: "0", | ||
| 138 | + QuestionBankIds: [] | ||
| 139 | + }, | ||
| 140 | + loading: false, | ||
| 141 | + rules: { | ||
| 142 | + OriginalPrice: [{ | ||
| 143 | + required: true, | ||
| 144 | + message: '不能为空' | ||
| 145 | + }], | ||
| 146 | + PresentPrice: [{ | ||
| 147 | + required: true, | ||
| 148 | + message: '不能为空' | ||
| 149 | + }], | ||
| 150 | + MembershipPrice: [{ | ||
| 151 | + required: true, | ||
| 152 | + message: '不能为空' | ||
| 153 | + }] | ||
| 154 | + }, | ||
| 155 | + QuestionClass: [], | ||
| 156 | + treeData: [{ | ||
| 157 | + value:0, | ||
| 158 | + label:"全部" | ||
| 159 | + }] | ||
| 160 | + } | ||
| 161 | + }, | ||
| 162 | + computed: { | ||
| 163 | + noMore() { | ||
| 164 | + return this.arr1.length >= this.count | ||
| 165 | + }, | ||
| 166 | + disabled() { | ||
| 167 | + return this.loading || this.noMore | ||
| 168 | + } | ||
| 169 | + }, | ||
| 170 | + created() { | ||
| 171 | + | ||
| 172 | + }, | ||
| 173 | + mounted() { | ||
| 174 | + //计算页面内容区域的高度 | ||
| 175 | + this.contentHeight = window.innerHeight - 90; | ||
| 176 | + this.getQuestionClassListHeadler(); | ||
| 177 | + //this.GetList(); | ||
| 178 | + }, | ||
| 179 | + methods: { | ||
| 180 | + SubmitTestPaper() { | ||
| 181 | + if (this.arr2.length > 0) { | ||
| 182 | + EditTestPaper(this.TestPaper).then(res => { | ||
| 183 | + if(res.data.code==200){ | ||
| 184 | + this.$confirm('组卷成功！', '消息') | ||
| 185 | + }else{ | ||
| 186 | + this.$confirm('组卷失败！', '消息') | ||
| 187 | + } | ||
| 188 | + }); | ||
| 189 | + } else { | ||
| 190 | + this.$confirm('试题未有题目！', '消息') | ||
| 191 | + } | ||
| 192 | + }, | ||
| 193 | + load() { | ||
| 194 | + this.loading = true | ||
| 195 | + this.parameter.pageIndex += 1; | ||
| 196 | + this.GetList(); | ||
| 197 | + this.loading = false; | ||
| 198 | + }, | ||
| 199 | + GetList() { | ||
| 200 | + getQuestionList(this.parameter).then(res => { | ||
| 201 | + res.data.data.rows.forEach((item, i) => { | ||
| 202 | + this.arr1.push(item) | ||
| 203 | + }) | ||
| 204 | + this.count = res.data.data.total; | ||
| 205 | + this.$forceUpdate(); | ||
| 206 | + }); | ||
| 207 | + }, | ||
| 208 | + end1(e, ) { | ||
| 209 | + var that = this; | ||
| 210 | + if (that.arr1.length < 10) { | ||
| 211 | + this.load(); | ||
| 212 | + } | ||
| 213 | + | ||
| 214 | + var items = this.arr2.filter(function(m) { | ||
| 215 | + return m.id == that.moveId | ||
| 216 | + }) | ||
| 217 | + | ||
| 218 | + //如果左边 | ||
| 219 | + if (items.length < 2) return; | ||
| 220 | + this.arr2.splice(e.newDraggableIndex, 1) | ||
| 221 | + | ||
| 222 | + // SingleNumber:0, | ||
| 223 | + // MultipleNumber:0, | ||
| 224 | + // SubjectiveNumber:0, | ||
| 225 | + }, | ||
| 226 | + //从右边移除到左边 | ||
| 227 | + RemoveHere(e) { | ||
| 228 | + if (e.item._underlying_vm_.subjectType == 1) { | ||
| 229 | + this.TestPaper.SingleNumber -= 1; | ||
| 230 | + } | ||
| 231 | + if (e.item._underlying_vm_.subjectType == 2) { | ||
| 232 | + this.TestPaper.MultipleNumber -= 1; | ||
| 233 | + } | ||
| 234 | + if (e.item._underlying_vm_.subjectType == 3) { | ||
| 235 | + this.TestPaper.SubjectiveNumber -= 1; | ||
| 236 | + } | ||
| 237 | + this.TestPaper.TotalScore -= e.item._underlying_vm_.fraction; | ||
| 238 | + this.TestPaper.QuestionBankIds = this.arr2.map(u => u.id); | ||
| 239 | + }, | ||
| 240 | + //从左边添加到右边 | ||
| 241 | + ComeHere(e) { | ||
| 242 | + if (e.item._underlying_vm_.subjectType == 1) { | ||
| 243 | + this.TestPaper.SingleNumber += 1; | ||
| 244 | + } | ||
| 245 | + if (e.item._underlying_vm_.subjectType == 2) { | ||
| 246 | + this.TestPaper.MultipleNumber += 1; | ||
| 247 | + } | ||
| 248 | + if (e.item._underlying_vm_.subjectType == 3) { | ||
| 249 | + this.TestPaper.SubjectiveNumber += 1; | ||
| 250 | + } | ||
| 251 | + this.TestPaper.TotalScore += e.item._underlying_vm_.fraction; | ||
| 252 | + | ||
| 253 | + this.TestPaper.QuestionBankIds = this.arr2.map(u => u.id); | ||
| 254 | + }, | ||
| 255 | + //右边往左边拖动时的事件 | ||
| 256 | + end2(e) { | ||
| 257 | + var that = this; | ||
| 258 | + var items = this.arr1.filter(function(m) { | ||
| 259 | + return m.id == that.moveId | ||
| 260 | + }) | ||
| 261 | + //如果左边 | ||
| 262 | + if (items.length < 2) return; | ||
| 263 | + this.arr1.splice(e.newDraggableIndex, 1) | ||
| 264 | + }, | ||
| 265 | + //move回调方法 | ||
| 266 | + onMove(e, originalEvent) { | ||
| 267 | + //this.moveId = e.relatedContext.element.id; | ||
| 268 | + return true; | ||
| 269 | + }, | ||
| 270 | + getQuestionClassListHeadler() { | ||
| 271 | + let _this = this; | ||
| 272 | + GetToplevel().then(res => { | ||
| 273 | + var gettree = function(titem) { | ||
| 274 | + titem.children = [] | ||
| 275 | + let childrenList = res.data.data.filter(u => u.ParentId == titem.value); | ||
| 276 | + if (childrenList.length == 0) | ||
| 277 | + titem.children = undefined; | ||
| 278 | + res.data.data.filter(u => u.ParentId == titem.value).forEach((item, i) => { | ||
| 279 | + var model = { | ||
| 280 | + value: item.id, | ||
| 281 | + label: item.ClassTitle | ||
| 282 | + }; | ||
| 283 | + gettree(model); | ||
| 284 | + titem.children.push(model); | ||
| 285 | + }) | ||
| 286 | + } | ||
| 287 | + res.data.data.filter(u => u.ParentId == 0).forEach((item, i) => { | ||
| 288 | + var model = { | ||
| 289 | + value: item.id, | ||
| 290 | + label: item.ClassTitle | ||
| 291 | + }; | ||
| 292 | + gettree(model); | ||
| 293 | + _this.QuestionClass.push(model); | ||
| 294 | + _this.treeData.push(model) | ||
| 295 | + }) | ||
| 296 | + }); | ||
| 297 | + } | ||
| 298 | + | ||
| 299 | + } | ||
| 300 | + } | ||
| 301 | +</script> | ||
| 302 | + | ||
| 303 | +<style lang="scss" scoped> | ||
| 304 | + .el-row { | ||
| 305 | + /* margin-bottom: 20px; */ | ||
| 306 | + &:last-child { | ||
| 307 | + margin-bottom: 0; | ||
| 308 | + } | ||
| 309 | + } | ||
| 310 | + .el-col { | ||
| 311 | + border-radius: 4px; | ||
| 312 | + } | ||
| 313 | + .bg-purple-dark { | ||
| 314 | + background: #99a9bf; | ||
| 315 | + } | ||
| 316 | + .bg-purple { | ||
| 317 | + background: #efefef; | ||
| 318 | + } | ||
| 319 | + .bg-purple-light { | ||
| 320 | + background: #e5e9f2; | ||
| 321 | + } | ||
| 322 | + .grid-content { | ||
| 323 | + border-radius: 4px; | ||
| 324 | + min-height: 36px; | ||
| 325 | + height: 100%; | ||
| 326 | + } | ||
| 327 | + .row-bg { | ||
| 328 | + padding: 10px 0; | ||
| 329 | + background-color: #f9fafc; | ||
| 330 | + } | ||
| 331 | + .infinite-list { | ||
| 332 | + list-style: none; | ||
| 333 | + margin: 0px; | ||
| 334 | + padding: 0px; | ||
| 335 | + &::-webkit-scrollbar { | ||
| 336 | + width: 6px; | ||
| 337 | + } | ||
| 338 | + //滚动条小方块 | ||
| 339 | + &::-webkit-scrollbar-thumb { | ||
| 340 | + border-radius: 10px; | ||
| 341 | + background: #304156; | ||
| 342 | + } | ||
| 343 | + //滚动条轨道 | ||
| 344 | + &::-webkit-scrollbar-track { | ||
| 345 | + // border-radius: 10px; | ||
| 346 | + height: 100px; | ||
| 347 | + background: #cdcdcd; | ||
| 348 | + } | ||
| 349 | + .infinite-list-item { | ||
| 350 | + padding: 10px; | ||
| 351 | + min-height: 60px; | ||
| 352 | + width: 95%; | ||
| 353 | + margin: auto; | ||
| 354 | + background-color: #FFF; | ||
| 355 | + margin-bottom: 10px; | ||
| 356 | + border-radius: 5px; | ||
| 357 | + box-shadow: 0 0 5px #cdcdcd; | ||
| 358 | + &:first-child { | ||
| 359 | + margin-top: 10px; | ||
| 360 | + } | ||
| 361 | + } | ||
| 362 | + } | ||
| 363 | + .option-p { | ||
| 364 | + line-height: 15px; | ||
| 365 | + } | ||
| 366 | + .areahead { | ||
| 367 | + text-align: center; | ||
| 368 | + height: 60px; | ||
| 369 | + line-height: 60px; | ||
| 370 | + border-bottom: 1px solid #cdcdcd; | ||
| 371 | + } | ||
| 372 | + .testPaper-manager{ | ||
| 373 | + margin: 10px 20px 10px 10px; | ||
| 374 | + } | ||
| 375 | + .testPaper-manager .el-form-item { | ||
| 376 | + margin-bottom: 20px; | ||
| 377 | + } | ||
| 378 | + .el-form-item-custom { | ||
| 379 | + margin-bottom: 0px !important; | ||
| 380 | + } | ||
| 381 | + .testpaper-input { | ||
| 382 | + //max-width: 400px; | ||
| 383 | + } | ||
| 384 | +</style> |
src/views/TestPaper/TestPaperClass.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="app-container"> | ||
| 3 | + <div class="seetingsDiv" style=""> | ||
| 4 | + <el-button type="primary" @click="dialogClassIVIsible=true">添加分类 | ||
| 5 | + </el-button> | ||
| 6 | + </div> | ||
| 7 | + <el-table :data="testpaperlist" id="QuestionTable" border | ||
| 8 | + style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;" :stripe=true> | ||
| 9 | + <el-table-column prop="date" label="ID" width="50"> | ||
| 10 | + <template slot-scope="scope"> | ||
| 11 | + <span>{{ scope.row.id }}</span> | ||
| 12 | + </template> | ||
| 13 | + </el-table-column> | ||
| 14 | + <el-table-column prop="date" label="分类名称"> | ||
| 15 | + <template slot-scope="scope"> | ||
| 16 | + <span>{{ scope.row.ClassTitle }}</span> | ||
| 17 | + </template> | ||
| 18 | + </el-table-column> | ||
| 19 | + <el-table-column fixed="right" label="操作" width="150"> | ||
| 20 | + <template slot-scope="scope"> | ||
| 21 | + <el-dropdown @command="(e)=>{handleCommand(e,scope.row.id)}"> | ||
| 22 | + <span class="el-dropdown-link"> | ||
| 23 | + 操作<i class="el-icon-arrow-down el-icon--right"></i> | ||
| 24 | + </span> | ||
| 25 | + <template #dropdown> | ||
| 26 | + <el-dropdown-menu> | ||
| 27 | + <el-dropdown-item command="update">编辑</el-dropdown-item> | ||
| 28 | + <!-- <el-dropdown-item command="b">锁定</el-dropdown-item> --> | ||
| 29 | + <el-dropdown-item command="del">删除</el-dropdown-item> | ||
| 30 | + </el-dropdown-menu> | ||
| 31 | + </template> | ||
| 32 | + </el-dropdown> | ||
| 33 | + </template> | ||
| 34 | + </el-table-column> | ||
| 35 | + </el-table> | ||
| 36 | + <el-pagination background @current-change="currentchange" | ||
| 37 | + style="position:static;bottom: 3px;text-align: center;margin-top: 5px;" :page-size="this.parameter.pageSize" | ||
| 38 | + layout="total,prev, pager, next" :total="Count"> | ||
| 39 | + </el-pagination> | ||
| 40 | + <el-dialog title="分类维护" :visible.sync="dialogClassIVIsible" @close="closeClassDialog" width="400px" | ||
| 41 | + :close-on-click-modal="false"> | ||
| 42 | + <el-form ref="TestPaperClassInfo" :model="TestPaperClassInfo" label-width="70px"> | ||
| 43 | + <el-form-item label="分类名称"> | ||
| 44 | + <el-input v-model="TestPaperClassInfo.ClassTitle" placeholder="请输入分类名称"></el-input> | ||
| 45 | + </el-form-item> | ||
| 46 | + </el-form> | ||
| 47 | + <el-button @click="CreateTestPaperClassHealder" style="margin: 10px 0 0 0 ;float:right" type="primary">确定 | ||
| 48 | + </el-button> | ||
| 49 | + <div style="clear: both;"></div> | ||
| 50 | + </el-dialog> | ||
| 51 | + </div> | ||
| 52 | +</template> | ||
| 53 | + | ||
| 54 | +<script> | ||
| 55 | + import { | ||
| 56 | + getTestPaperClassList, | ||
| 57 | + GetTestPaperClassById, | ||
| 58 | + UpdateTestPaperClass, | ||
| 59 | + DeleteTestPaperClass, | ||
| 60 | + CreateTestPaperClass | ||
| 61 | + } from '@/api/TestPaper' | ||
| 62 | + import { | ||
| 63 | + parseTime | ||
| 64 | + } from '@/utils/index.js' | ||
| 65 | + export default { | ||
| 66 | + data() { | ||
| 67 | + return { | ||
| 68 | + parameter: { | ||
| 69 | + pageIndex: 1, | ||
| 70 | + pageSize: 12, | ||
| 71 | + sort: "id", | ||
| 72 | + sortOrder: 1, | ||
| 73 | + keyword: "" | ||
| 74 | + }, | ||
| 75 | + Count: 0, | ||
| 76 | + testpaperlist: [], | ||
| 77 | + dialogClassIVIsible: false, | ||
| 78 | + TestPaperClassInfo: { | ||
| 79 | + id: 0, | ||
| 80 | + ParentId: 0, | ||
| 81 | + ClassTitle: "", | ||
| 82 | + Addtime: "", | ||
| 83 | + UpdateTime: "", | ||
| 84 | + State: 1 | ||
| 85 | + }, | ||
| 86 | + } | ||
| 87 | + }, | ||
| 88 | + computed: { | ||
| 89 | + | ||
| 90 | + }, | ||
| 91 | + created() { | ||
| 92 | + | ||
| 93 | + }, | ||
| 94 | + mounted() { | ||
| 95 | + let ContentAreaHight = window.innerHeight - document.getElementById("QuestionTable").offsetTop; | ||
| 96 | + let lineNumber = ContentAreaHight - 50 - 40; | ||
| 97 | + this.parameter.pageSize = Math.floor(lineNumber / 49) | ||
| 98 | + this.getTestPaperClassListHeadler(); | ||
| 99 | + }, | ||
| 100 | + methods: { | ||
| 101 | + CreateTestPaperClassHealder() { | ||
| 102 | + if (this.TestPaperClassInfo.id == 0) { | ||
| 103 | + this.TestPaperClassInfo.Addtime = parseTime(new Date(), ""); | ||
| 104 | + this.TestPaperClassInfo.Addtime = parseTime(new Date(), ""); | ||
| 105 | + CreateTestPaperClass(this.TestPaperClassInfo).then(res => { | ||
| 106 | + this.$confirm(res.data.message, '消息') | ||
| 107 | + this.TestPaperClassInfo = {}; | ||
| 108 | + this.getTestPaperClassListHeadler(); | ||
| 109 | + }) | ||
| 110 | + } else { | ||
| 111 | + UpdateTestPaperClass(this.TestPaperClassInfo).then(res => { | ||
| 112 | + this.$confirm(res.data.message, '消息') | ||
| 113 | + this.getTestPaperClassListHeadler(); | ||
| 114 | + }); | ||
| 115 | + } | ||
| 116 | + }, | ||
| 117 | + getTestPaperClassListHeadler() { | ||
| 118 | + getTestPaperClassList(this.parameter).then(res => { | ||
| 119 | + this.testpaperlist = res.data.data; | ||
| 120 | + this.Count = res.data.totalCount; | ||
| 121 | + }); | ||
| 122 | + }, | ||
| 123 | + closeClassDialog() { | ||
| 124 | + this.getTestPaperClassListHeadler(); | ||
| 125 | + }, | ||
| 126 | + currentchange(page) { | ||
| 127 | + this.parameter.pageIndex = page; | ||
| 128 | + this.getTestPaperClassListHeadler(); | ||
| 129 | + }, | ||
| 130 | + //表格右边的操作按钮 | ||
| 131 | + handleCommand(value, val) { | ||
| 132 | + let that = this; | ||
| 133 | + if (value == "update") { | ||
| 134 | + // alert("编辑操作"+val) | ||
| 135 | + this.dialogClassIVIsible = true; | ||
| 136 | + GetTestPaperClassById(val).then(res => { | ||
| 137 | + that.TestPaperClassInfo = res.data.data; | ||
| 138 | + }); | ||
| 139 | + } | ||
| 140 | + if (value == "del") { | ||
| 141 | + this.$confirm('确定删除该分类？', '消息', { | ||
| 142 | + confirmButtonText: '确认', | ||
| 143 | + cancelButtonText: '取消', | ||
| 144 | + callback: (action) => { | ||
| 145 | + if (action == "confirm") { | ||
| 146 | + DeleteTestPaperClass(val).then(res => { | ||
| 147 | + if (res.data.code == 200) { | ||
| 148 | + this.$confirm(res.data.message, '消息') | ||
| 149 | + this.getTestPaperClassListHeadler(); | ||
| 150 | + } | ||
| 151 | + }); | ||
| 152 | + } | ||
| 153 | + }, | ||
| 154 | + }) | ||
| 155 | + | ||
| 156 | + } | ||
| 157 | + }, | ||
| 158 | + } | ||
| 159 | + } | ||
| 160 | +</script> | ||
| 161 | + | ||
| 162 | +<style> | ||
| 163 | + .seetingsDiv { | ||
| 164 | + width: 100%; | ||
| 165 | + height: 60px; | ||
| 166 | + background: #efefef; | ||
| 167 | + line-height: 60px; | ||
| 168 | + border-radius: 5px; | ||
| 169 | + box-shadow: 0 0 5px #cdcdcd; | ||
| 170 | + } | ||
| 171 | + .seetingsDiv button { | ||
| 172 | + background-color: #304156; | ||
| 173 | + border: 0px; | ||
| 174 | + margin-left: 10px; | ||
| 175 | + box-shadow: 0 0 5px #cdcdcd; | ||
| 176 | + float: right; | ||
| 177 | + margin-top: 12px; | ||
| 178 | + margin-right: 10px; | ||
| 179 | + } | ||
| 180 | +</style> |
src/views/TestPaper/TestPaperList.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="app-container"> | ||
| 3 | + <div class="seetingsDiv" style=""> | ||
| 4 | + <el-button type="primary" @click="dialogAddTestPaperVIsible=true">添加试卷 | ||
| 5 | + </el-button> | ||
| 6 | + </div> | ||
| 7 | + <el-table :data="testpaperlist" id="QuestionTable" border | ||
| 8 | + style="width: 100%;border-radius: 5px;box-shadow: 0 0 10px #efefef;margin-top: 10px;" | ||
| 9 | + :header-cell-class-name="headerStyle" :stripe=true> | ||
| 10 | + <el-table-column prop="date" label="ID" width="50"> | ||
| 11 | + <template slot-scope="scope"> | ||
| 12 | + <span>{{ scope.row.id }}</span> | ||
| 13 | + </template> | ||
| 14 | + </el-table-column> | ||
| 15 | + <el-table-column prop="date" label="试卷标题" width="250"> | ||
| 16 | + <template slot-scope="scope"> | ||
| 17 | + <span>{{ scope.row.TestPaperTitle }}</span> | ||
| 18 | + </template> | ||
| 19 | + </el-table-column> | ||
| 20 | + <el-table-column prop="date" label="试卷总分" width="80"> | ||
| 21 | + <template slot-scope="scope"> | ||
| 22 | + <span>{{ scope.row.TotalScore }}</span> | ||
| 23 | + </template> | ||
| 24 | + </el-table-column> | ||
| 25 | + <el-table-column prop="date" label="单选题数量" width="100"> | ||
| 26 | + <template slot-scope="scope"> | ||
| 27 | + <span>{{ scope.row.SingleNumber }}</span> | ||
| 28 | + </template> | ||
| 29 | + </el-table-column> | ||
| 30 | + <el-table-column prop="date" label="多选题数量" width="100"> | ||
| 31 | + <template slot-scope="scope"> | ||
| 32 | + <span>{{ scope.row.MultipleNumber }}</span> | ||
| 33 | + </template> | ||
| 34 | + </el-table-column> | ||
| 35 | + <el-table-column prop="date" label="主观题数量" width="100"> | ||
| 36 | + <template slot-scope="scope"> | ||
| 37 | + <span>{{ scope.row.SubjectiveNumber }}</span> | ||
| 38 | + </template> | ||
| 39 | + </el-table-column> | ||
| 40 | + <el-table-column prop="TestPaperClassId" label="分类" width="100"> | ||
| 41 | + <template slot-scope="scope"> | ||
| 42 | + <span>{{ scope.row.TestPaperClassId }}</span> | ||
| 43 | + </template> | ||
| 44 | + </el-table-column> | ||
| 45 | + <el-table-column prop="name" label="原价" width="80" v-show="false"> | ||
| 46 | + <template slot-scope="scope"> | ||
| 47 | + <span>{{ scope.row.OriginalPrice/100 }}</span> | ||
| 48 | + </template> | ||
| 49 | + </el-table-column> | ||
| 50 | + <el-table-column prop="name" label="现价" width="80"> | ||
| 51 | + <template slot-scope="scope"> | ||
| 52 | + <span>{{ scope.row.PresentPrice/100 }}</span> | ||
| 53 | + </template> | ||
| 54 | + </el-table-column> | ||
| 55 | + <el-table-column prop="name" label="会员价" width="80" v-show="false"> | ||
| 56 | + <template slot-scope="scope"> | ||
| 57 | + <span>{{ scope.row.MembershipPrice/100 }}</span> | ||
| 58 | + </template> | ||
| 59 | + </el-table-column> | ||
| 60 | + <el-table-column prop="name" label="试卷说明" :show-overflow-tooltip=true> | ||
| 61 | + <template slot-scope="scope"> | ||
| 62 | + <span>{{ scope.row.Describe }}</span> | ||
| 63 | + </template> | ||
| 64 | + </el-table-column> | ||
| 65 | + <el-table-column fixed="right" label="操作" width="150"> | ||
| 66 | + <template slot-scope="scope"> | ||
| 67 | + <el-dropdown @command="(e)=>{handleCommand(e,scope.row.id)}"> | ||
| 68 | + <span class="el-dropdown-link"> | ||
| 69 | + 操作<i class="el-icon-arrow-down el-icon--right"></i> | ||
| 70 | + </span> | ||
| 71 | + <template #dropdown> | ||
| 72 | + <el-dropdown-menu> | ||
| 73 | + <el-dropdown-item command="addquestion">题目维护</el-dropdown-item> | ||
| 74 | + <el-dropdown-item command="update">编辑</el-dropdown-item> | ||
| 75 | + <!-- <el-dropdown-item command="b">锁定</el-dropdown-item> --> | ||
| 76 | + <el-dropdown-item command="del">删除</el-dropdown-item> | ||
| 77 | + </el-dropdown-menu> | ||
| 78 | + </template> | ||
| 79 | + </el-dropdown> | ||
| 80 | + </template> | ||
| 81 | + </el-table-column> | ||
| 82 | + </el-table> | ||
| 83 | + <el-pagination background @current-change="currentchange" | ||
| 84 | + style="position:static;bottom: 3px;text-align: center;margin-top: 5px;" :page-size="this.parameter.pageSize" | ||
| 85 | + layout="total,prev, pager, next" :total="Count"> | ||
| 86 | + </el-pagination> | ||
| 87 | + <el-dialog title="添加试卷基本信息" :visible.sync="dialogAddTestPaperVIsible" @close="closeClassDialog" width="600px" | ||
| 88 | + :close-on-click-modal="false"> | ||
| 89 | + <div class="grid-content bg-purple"> | ||
| 90 | + <el-form ref="form" class="testPaper-manager" :rules="rules" :model="TestPaper" label-width="100px"> | ||
| 91 | + <el-form-item label="试卷名称:" class="el-form-item-custom"> | ||
| 92 | + <el-input v-model="TestPaper.TestPaperTitle" placeholder="请输入试卷标题"></el-input> | ||
| 93 | + </el-form-item> | ||
| 94 | + <el-form-item label="分类" class="el-form-item-custom"> | ||
| 95 | + <el-cascader class="testpaper-input" v-model="TestPaper.QuestionClassId" style="width:400px;" | ||
| 96 | + :props="{emitPath:false}" :clearable=true :options="QuestionClass"> | ||
| 97 | + </el-cascader> | ||
| 98 | + </el-form-item> | ||
| 99 | + <el-form-item label="板块分类" class="el-form-item-custom"> | ||
| 100 | + <el-select v-model="TestPaper.PlateClass" placeholder="请选择板块分类"> | ||
| 101 | + <el-option label="章节练习" value="1"></el-option> | ||
| 102 | + <el-option label="历年真题" value="2"></el-option> | ||
| 103 | + <el-option label="模拟试卷" value="3"></el-option> | ||
| 104 | + </el-select> | ||
| 105 | + </el-form-item> | ||
| 106 | + <el-form-item label="试卷原价:" prop="OriginalPrice" v-show="false"> | ||
| 107 | + <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')" | ||
| 108 | + v-model="TestPaper.OriginalPrice" :precision="0"> | ||
| 109 | + <template slot="append">元</template> | ||
| 110 | + </el-input> | ||
| 111 | + </el-form-item> | ||
| 112 | + <el-form-item label="试卷价格:" prop="PresentPrice"> | ||
| 113 | + <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')" | ||
| 114 | + v-model="TestPaper.PresentPrice"> | ||
| 115 | + <template slot="append">元</template> | ||
| 116 | + </el-input> | ||
| 117 | + </el-form-item> | ||
| 118 | + <el-form-item label="会员价:" prop="MembershipPrice" v-show="false"> | ||
| 119 | + <el-input class="testpaper-input" oninput="value=value.replace(/[^0-9.]/g,'')" | ||
| 120 | + v-model="TestPaper.MembershipPrice"> | ||
| 121 | + <template slot="append">元</template> | ||
| 122 | + </el-input> | ||
| 123 | + </el-form-item> | ||
| 124 | + <el-form-item label="试卷简介:"> | ||
| 125 | + <el-input class="testpaper-input" :rows="10" type="textarea" v-model="TestPaper.Describe"> | ||
| 126 | + </el-input> | ||
| 127 | + </el-form-item> | ||
| 128 | + <el-button type="primary" style="float: right;" @click="SubmitTestPaper">保存 | ||
| 129 | + </el-button> | ||
| 130 | + <div style="clear: both;"></div> | ||
| 131 | + </el-form> | ||
| 132 | + </div> | ||
| 133 | + </el-dialog> | ||
| 134 | + <el-dialog> | ||
| 135 | + | ||
| 136 | + </el-dialog> | ||
| 137 | + </div> | ||
| 138 | +</template> | ||
| 139 | + | ||
| 140 | +<script> | ||
| 141 | + import { | ||
| 142 | + getTestPaperList, | ||
| 143 | + GetToplevel, | ||
| 144 | + EditTestPaper | ||
| 145 | + } from '@/api/TestPaper' | ||
| 146 | + export default { | ||
| 147 | + | ||
| 148 | + data() { | ||
| 149 | + return { | ||
| 150 | + parameter: { | ||
| 151 | + pageIndex: 1, | ||
| 152 | + pageSize: 12, | ||
| 153 | + sort: "id", | ||
| 154 | + sortOrder: 1, | ||
| 155 | + keyword: "", | ||
| 156 | + QuestionClassId: 0, | ||
| 157 | + status: 1 | ||
| 158 | + }, | ||
| 159 | + Count: 0, | ||
| 160 | + testpaperlist: [], | ||
| 161 | + dialogAddTestPaperVIsible: false, | ||
| 162 | + dialogQuestionVlsible:false, | ||
| 163 | + QuestionClass: [], | ||
| 164 | + TestPaper: { | ||
| 165 | + TestPaperTitle: "", | ||
| 166 | + PlateClass: "", | ||
| 167 | + TestPaperClassId: 0, | ||
| 168 | + TotalScore: 0, | ||
| 169 | + Describe: "", | ||
| 170 | + SingleNumber: 0, | ||
| 171 | + MultipleNumber: 0, | ||
| 172 | + SubjectiveNumber: 0, | ||
| 173 | + OriginalPrice: "0", | ||
| 174 | + PresentPrice: "0", | ||
| 175 | + MembershipPrice: "0", | ||
| 176 | + QuestionBankIds: [] | ||
| 177 | + }, | ||
| 178 | + treeData: [{ | ||
| 179 | + value: 0, | ||
| 180 | + label: "全部" | ||
| 181 | + }], | ||
| 182 | + } | ||
| 183 | + }, | ||
| 184 | + computed: { | ||
| 185 | + | ||
| 186 | + }, | ||
| 187 | + created() { | ||
| 188 | + | ||
| 189 | + }, | ||
| 190 | + mounted() { | ||
| 191 | + let ContentAreaHight = window.innerHeight - document.getElementById("QuestionTable").offsetTop; | ||
| 192 | + let lineNumber = ContentAreaHight - 50 - 40; | ||
| 193 | + this.parameter.pageSize = Math.floor(lineNumber / 49) | ||
| 194 | + this.getTestPaperListHeadler(); | ||
| 195 | + this.getQuestionClassListHeadler(); | ||
| 196 | + }, | ||
| 197 | + methods: { | ||
| 198 | + //添加试卷基本信息 | ||
| 199 | + SubmitTestPaper() { | ||
| 200 | + EditTestPaper(this.TestPaper).then(res => { | ||
| 201 | + if (res.data.code == 200) { | ||
| 202 | + this.$confirm('添加试卷基本信息成功！', '消息'); | ||
| 203 | + this.getTestPaperListHeadler(); | ||
| 204 | + } else { | ||
| 205 | + this.$confirm('添加试卷基本信息失败！', '消息') | ||
| 206 | + } | ||
| 207 | + }); | ||
| 208 | + }, | ||
| 209 | + getTestPaperListHeadler() { | ||
| 210 | + getTestPaperList(this.parameter).then(res => { | ||
| 211 | + this.testpaperlist = res.data.data; | ||
| 212 | + this.Count = res.data.totalCount; | ||
| 213 | + }); | ||
| 214 | + }, | ||
| 215 | + currentchange(page) { | ||
| 216 | + this.parameter.pageIndex = page; | ||
| 217 | + this.getTestPaperListHeadler(); | ||
| 218 | + }, | ||
| 219 | + getQuestionClassListHeadler() { | ||
| 220 | + let _this = this; | ||
| 221 | + GetToplevel().then(res => { | ||
| 222 | + var gettree = function(titem) { | ||
| 223 | + titem.children = [] | ||
| 224 | + let childrenList = res.data.data.filter(u => u.ParentId == titem.value); | ||
| 225 | + if (childrenList.length == 0) | ||
| 226 | + titem.children = undefined; | ||
| 227 | + res.data.data.filter(u => u.ParentId == titem.value).forEach((item, i) => { | ||
| 228 | + var model = { | ||
| 229 | + value: item.id, | ||
| 230 | + label: item.ClassTitle | ||
| 231 | + }; | ||
| 232 | + gettree(model); | ||
| 233 | + titem.children.push(model); | ||
| 234 | + }) | ||
| 235 | + } | ||
| 236 | + res.data.data.filter(u => u.ParentId == 0).forEach((item, i) => { | ||
| 237 | + var model = { | ||
| 238 | + value: item.id, | ||
| 239 | + label: item.ClassTitle | ||
| 240 | + }; | ||
| 241 | + gettree(model); | ||
| 242 | + _this.QuestionClass.push(model); | ||
| 243 | + _this.treeData.push(model) | ||
| 244 | + }) | ||
| 245 | + }); | ||
| 246 | + } | ||
| 247 | + } | ||
| 248 | + } | ||
| 249 | +</script> | ||
| 250 | + | ||
| 251 | +<style> | ||
| 252 | + .seetingsDiv { | ||
| 253 | + width: 100%; | ||
| 254 | + height: 60px; | ||
| 255 | + background: #efefef; | ||
| 256 | + line-height: 60px; | ||
| 257 | + border-radius: 5px; | ||
| 258 | + box-shadow: 0 0 5px #cdcdcd; | ||
| 259 | + } | ||
| 260 | + .seetingsDiv button { | ||
| 261 | + background-color: #304156; | ||
| 262 | + border: 0px; | ||
| 263 | + margin-left: 10px; | ||
| 264 | + box-shadow: 0 0 5px #cdcdcd; | ||
| 265 | + float: right; | ||
| 266 | + margin-top: 12px; | ||
| 267 | + margin-right: 10px; | ||
| 268 | + } | ||
| 269 | +</style> |
src/views/dashboard/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="dashboard-container"> | ||
| 3 | + <div class="dashboard-text" | ||
| 4 | + style="background-color: #334056;border-radius: 5px;color: #FFF;font-size: 16px;padding: 5px 5px 5px 15px;"> | ||
| 5 | + <div style="font-size: 20px;">欢迎使用安第斯答题软件</div> | ||
| 6 | + </div> | ||
| 7 | + <el-row :gutter="20"> | ||
| 8 | + <el-col :span="6"> | ||
| 9 | + <div class="grid-content bg-purple"> | ||
| 10 | + <label class="grid-content-number">0</label> | ||
| 11 | + <div>今日收益</div> | ||
| 12 | + </div> | ||
| 13 | + </el-col> | ||
| 14 | + <el-col :span="6"> | ||
| 15 | + <div class="grid-content bg-purple"> | ||
| 16 | + <label class="grid-content-number">{{total.questiontotal}}</label> | ||
| 17 | + <div>题目数量</div> | ||
| 18 | + </div> | ||
| 19 | + </el-col> | ||
| 20 | + <el-col :span="6"> | ||
| 21 | + <div class="grid-content bg-purple"> | ||
| 22 | + <label class="grid-content-number">{{total.testpapertotal}}</label> | ||
| 23 | + <div>试卷数量</div> | ||
| 24 | + </div> | ||
| 25 | + </el-col> | ||
| 26 | + <el-col :span="6"> | ||
| 27 | + <div class="grid-content bg-purple"> | ||
| 28 | + <label class="grid-content-number">0</label> | ||
| 29 | + <div>总人数</div> | ||
| 30 | + </div> | ||
| 31 | + </el-col> | ||
| 32 | + </el-row> | ||
| 33 | + </div> | ||
| 34 | +</template> | ||
| 35 | + | ||
| 36 | +<script> | ||
| 37 | + import { | ||
| 38 | + GetQuestionTotal, | ||
| 39 | + GetTestPaperTotal | ||
| 40 | + } from '@/api/index' | ||
| 41 | + import { | ||
| 42 | + mapGetters | ||
| 43 | + } from 'vuex' | ||
| 44 | + | ||
| 45 | + export default { | ||
| 46 | + name: '安第斯考试系统', | ||
| 47 | + data() { | ||
| 48 | + return { | ||
| 49 | + total: { | ||
| 50 | + questiontotal: 0, | ||
| 51 | + testpapertotal:0 | ||
| 52 | + } | ||
| 53 | + } | ||
| 54 | + }, | ||
| 55 | + computed: { | ||
| 56 | + ...mapGetters([ | ||
| 57 | + 'name' | ||
| 58 | + ]) | ||
| 59 | + }, | ||
| 60 | + created() { | ||
| 61 | + | ||
| 62 | + }, | ||
| 63 | + mounted() { | ||
| 64 | + this.GetTotalHeadler(); | ||
| 65 | + }, | ||
| 66 | + methods: { | ||
| 67 | + GetTotalHeadler() { | ||
| 68 | + GetQuestionTotal().then(res => { | ||
| 69 | + this.total.questiontotal = res.data.data; | ||
| 70 | + }); | ||
| 71 | + GetTestPaperTotal().then(res=>{ | ||
| 72 | + this.total.testpapertotal = res.data.data; | ||
| 73 | + }); | ||
| 74 | + } | ||
| 75 | + } | ||
| 76 | + } | ||
| 77 | +</script> | ||
| 78 | + | ||
| 79 | +<style lang="scss" scoped> | ||
| 80 | + .dashboard { | ||
| 81 | + &-container { | ||
| 82 | + margin: 30px; | ||
| 83 | + } | ||
| 84 | + &-text { | ||
| 85 | + font-size: 30px; | ||
| 86 | + line-height: 46px; | ||
| 87 | + } | ||
| 88 | + } | ||
| 89 | + .el-row { | ||
| 90 | + margin-bottom: 20px; | ||
| 91 | + margin-top: 20px; | ||
| 92 | + &:last-child { | ||
| 93 | + margin-bottom: 0; | ||
| 94 | + } | ||
| 95 | + } | ||
| 96 | + .el-col { | ||
| 97 | + border-radius: 5px; | ||
| 98 | + } | ||
| 99 | + .bg-purple-dark { | ||
| 100 | + background: #99a9bf; | ||
| 101 | + } | ||
| 102 | + .bg-purple { | ||
| 103 | + background: #d3dce6; | ||
| 104 | + box-shadow: 0 0 10px #cdcdcd; | ||
| 105 | + } | ||
| 106 | + .bg-purple-light { | ||
| 107 | + background: #e5e9f2; | ||
| 108 | + } | ||
| 109 | + .grid-content { | ||
| 110 | + border-radius: 5px; | ||
| 111 | + min-height: 36px; | ||
| 112 | + text-align: center; | ||
| 113 | + padding-top: 20px; | ||
| 114 | + padding-bottom: 20px; | ||
| 115 | + .grid-content-number { | ||
| 116 | + font-size: 40px; | ||
| 117 | + color: red; | ||
| 118 | + } | ||
| 119 | + div { | ||
| 120 | + font-size: 20px; | ||
| 121 | + margin-top: 10px; | ||
| 122 | + } | ||
| 123 | + } | ||
| 124 | + .row-bg { | ||
| 125 | + padding: 10px 0; | ||
| 126 | + background-color: #f9fafc; | ||
| 127 | + } | ||
| 128 | +</style> |
src/views/login/index.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="login-container"> | ||
| 3 | + <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" | ||
| 4 | + label-position="left"> | ||
| 5 | + | ||
| 6 | + <div class="title-container"> | ||
| 7 | + <h3 class="title">安第斯考试系统后台</h3> | ||
| 8 | + </div> | ||
| 9 | + | ||
| 10 | + <el-form-item prop="username"> | ||
| 11 | + <span class="svg-container"> | ||
| 12 | + <svg-icon icon-class="user" /> | ||
| 13 | + </span> | ||
| 14 | + <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" | ||
| 15 | + tabindex="1" auto-complete="on" /> | ||
| 16 | + </el-form-item> | ||
| 17 | + | ||
| 18 | + <el-form-item prop="password"> | ||
| 19 | + <span class="svg-container"> | ||
| 20 | + <svg-icon icon-class="password" /> | ||
| 21 | + </span> | ||
| 22 | + <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" | ||
| 23 | + placeholder="Password" name="password" tabindex="2" auto-complete="on" | ||
| 24 | + @keyup.enter.native="handleLogin" /> | ||
| 25 | + <span class="show-pwd" @click="showPwd"> | ||
| 26 | + <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> | ||
| 27 | + </span> | ||
| 28 | + </el-form-item> | ||
| 29 | + | ||
| 30 | + <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" | ||
| 31 | + @click.native.prevent="handleLogin">Login</el-button> | ||
| 32 | + <div style="text-align: center;color: #FFF;">技术支持：成都安第斯信息技术有限公司</div> | ||
| 33 | + | ||
| 34 | + <!-- <div class="tips"> | ||
| 35 | + <span style="margin-right:20px;">username: admin</span> | ||
| 36 | + <span> password: any</span> | ||
| 37 | + </div> --> | ||
| 38 | + | ||
| 39 | + </el-form> | ||
| 40 | + </div> | ||
| 41 | +</template> | ||
| 42 | + | ||
| 43 | +<script> | ||
| 44 | + import { | ||
| 45 | + validUsername | ||
| 46 | + } from '@/utils/validate' | ||
| 47 | + | ||
| 48 | + export default { | ||
| 49 | + name: 'Login', | ||
| 50 | + data() { | ||
| 51 | + const validateUsername = (rule, value, callback) => { | ||
| 52 | + if (!validUsername(value)) { | ||
| 53 | + callback(new Error('Please enter the correct user name')) | ||
| 54 | + } else { | ||
| 55 | + callback() | ||
| 56 | + } | ||
| 57 | + } | ||
| 58 | + const validatePassword = (rule, value, callback) => { | ||
| 59 | + if (value.length < 6) { | ||
| 60 | + callback(new Error('The password can not be less than 6 digits')) | ||
| 61 | + } else { | ||
| 62 | + callback() | ||
| 63 | + } | ||
| 64 | + } | ||
| 65 | + return { | ||
| 66 | + loginForm: { | ||
| 67 | + username: 'admin', | ||
| 68 | + password: '123456' | ||
| 69 | + }, | ||
| 70 | + loginRules: { | ||
| 71 | + username: [{ | ||
| 72 | + required: true, | ||
| 73 | + trigger: 'blur', | ||
| 74 | + validator: validateUsername | ||
| 75 | + }], | ||
| 76 | + password: [{ | ||
| 77 | + required: true, | ||
| 78 | + trigger: 'blur', | ||
| 79 | + validator: validatePassword | ||
| 80 | + }] | ||
| 81 | + }, | ||
| 82 | + loading: false, | ||
| 83 | + passwordType: 'password', | ||
| 84 | + redirect: undefined | ||
| 85 | + } | ||
| 86 | + }, | ||
| 87 | + watch: { | ||
| 88 | + $route: { | ||
| 89 | + handler: function(route) { | ||
| 90 | + this.redirect = route.query && route.query.redirect | ||
| 91 | + }, | ||
| 92 | + immediate: true | ||
| 93 | + } | ||
| 94 | + }, | ||
| 95 | + methods: { | ||
| 96 | + showPwd() { | ||
| 97 | + if (this.passwordType === 'password') { | ||
| 98 | + this.passwordType = '' | ||
| 99 | + } else { | ||
| 100 | + this.passwordType = 'password' | ||
| 101 | + } | ||
| 102 | + this.$nextTick(() => { | ||
| 103 | + this.$refs.password.focus() | ||
| 104 | + }) | ||
| 105 | + }, | ||
| 106 | + handleLogin() { | ||
| 107 | + this.$refs.loginForm.validate(valid => { | ||
| 108 | + | ||
| 109 | + if (valid) { | ||
| 110 | + this.loading = true | ||
| 111 | + this.$store.dispatch('user/login', this.loginForm).then(() => { | ||
| 112 | + this.$router.push({ | ||
| 113 | + path: this.redirect || '/' | ||
| 114 | + }) | ||
| 115 | + this.loading = false | ||
| 116 | + }).catch((ret) => { | ||
| 117 | + console.log(); | ||
| 118 | + this.loading = false | ||
| 119 | + }) | ||
| 120 | + } else { | ||
| 121 | + console.log('error submit!!') | ||
| 122 | + return false | ||
| 123 | + } | ||
| 124 | + }) | ||
| 125 | + } | ||
| 126 | + } | ||
| 127 | + } | ||
| 128 | +</script> | ||
| 129 | + | ||
| 130 | +<style lang="scss"> | ||
| 131 | + /* 修复input 背景不协调 和光标变色 */ | ||
| 132 | + /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ | ||
| 133 | + $bg:#283443; | ||
| 134 | + $light_gray:#fff; | ||
| 135 | + $cursor: #fff; | ||
| 136 | + @supports (-webkit-mask: none) and (not (cater-color: $cursor)) { | ||
| 137 | + .login-container .el-input input { | ||
| 138 | + color: $cursor; | ||
| 139 | + } | ||
| 140 | + } | ||
| 141 | + /* reset element-ui css */ | ||
| 142 | + .login-container { | ||
| 143 | + .el-input { | ||
| 144 | + display: inline-block; | ||
| 145 | + height: 47px; | ||
| 146 | + width: 85%; | ||
| 147 | + input { | ||
| 148 | + background: transparent; | ||
| 149 | + border: 0px; | ||
| 150 | + -webkit-appearance: none; | ||
| 151 | + border-radius: 0px; | ||
| 152 | + padding: 12px 5px 12px 15px; | ||
| 153 | + color: $light_gray; | ||
| 154 | + height: 47px; | ||
| 155 | + caret-color: $cursor; | ||
| 156 | + &:-webkit-autofill { | ||
| 157 | + box-shadow: 0 0 0px 1000px $bg inset !important; | ||
| 158 | + -webkit-text-fill-color: $cursor !important; | ||
| 159 | + } | ||
| 160 | + } | ||
| 161 | + } | ||
| 162 | + .el-form-item { | ||
| 163 | + border: 1px solid rgba(255, 255, 255, 0.1); | ||
| 164 | + background: rgba(0, 0, 0, 0.1); | ||
| 165 | + border-radius: 5px; | ||
| 166 | + color: #454545; | ||
| 167 | + } | ||
| 168 | + } | ||
| 169 | +</style> | ||
| 170 | + | ||
| 171 | +<style lang="scss" scoped> | ||
| 172 | + $bg:#2d3a4b; | ||
| 173 | + $dark_gray:#889aa4; | ||
| 174 | + $light_gray:#eee; | ||
| 175 | + .login-container { | ||
| 176 | + min-height: 100%; | ||
| 177 | + width: 100%; | ||
| 178 | + background-color: $bg; | ||
| 179 | + overflow: hidden; | ||
| 180 | + .login-form { | ||
| 181 | + position: relative; | ||
| 182 | + width: 520px; | ||
| 183 | + max-width: 100%; | ||
| 184 | + padding: 160px 35px 0; | ||
| 185 | + margin: 0 auto; | ||
| 186 | + overflow: hidden; | ||
| 187 | + } | ||
| 188 | + .tips { | ||
| 189 | + font-size: 14px; | ||
| 190 | + color: #fff; | ||
| 191 | + margin-bottom: 10px; | ||
| 192 | + span { | ||
| 193 | + &:first-of-type { | ||
| 194 | + margin-right: 16px; | ||
| 195 | + } | ||
| 196 | + } | ||
| 197 | + } | ||
| 198 | + .svg-container { | ||
| 199 | + padding: 6px 5px 6px 15px; | ||
| 200 | + color: $dark_gray; | ||
| 201 | + vertical-align: middle; | ||
| 202 | + width: 30px; | ||
| 203 | + display: inline-block; | ||
| 204 | + } | ||
| 205 | + .title-container { | ||
| 206 | + position: relative; | ||
| 207 | + .title { | ||
| 208 | + font-size: 26px; | ||
| 209 | + color: $light_gray; | ||
| 210 | + margin: 0px auto 40px auto; | ||
| 211 | + text-align: center; | ||
| 212 | + font-weight: bold; | ||
| 213 | + } | ||
| 214 | + } | ||
| 215 | + .show-pwd { | ||
| 216 | + position: absolute; | ||
| 217 | + right: 10px; | ||
| 218 | + top: 7px; | ||
| 219 | + font-size: 16px; | ||
| 220 | + color: $dark_gray; | ||
| 221 | + cursor: pointer; | ||
| 222 | + user-select: none; | ||
| 223 | + } | ||
| 224 | + } | ||
| 225 | +</style> |
src/views/user/userlist.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="app-container"> | ||
| 3 | + <el-upload | ||
| 4 | + class="upload-demo" | ||
| 5 | + action="/api/Account/ImportUser" | ||
| 6 | + :on-preview="handlePreview" | ||
| 7 | + :on-remove="handleRemove" | ||
| 8 | + :before-remove="beforeRemove" | ||
| 9 | + multiple | ||
| 10 | + :limit="3" | ||
| 11 | + :on-exceed="handleExceed" | ||
| 12 | + :file-list="fileList"> | ||
| 13 | + <el-button size="small" type="primary">导入用户</el-button> | ||
| 14 | + </el-upload> | ||
| 15 | + </div> | ||
| 16 | +</template> | ||
| 17 | + | ||
| 18 | +<script> | ||
| 19 | + import { | ||
| 20 | + ImportUserByExcel | ||
| 21 | + } from '@/api/user' | ||
| 22 | + export default { | ||
| 23 | + methods:{ | ||
| 24 | + ImportUser(){ | ||
| 25 | + | ||
| 26 | + } | ||
| 27 | + } | ||
| 28 | + } | ||
| 29 | +</script> | ||
| 30 | + | ||
| 31 | +<style> | ||
| 32 | +</style> |
tests/unit/.eslintrc.js
0 → 100644
tests/unit/components/Breadcrumb.spec.js
0 → 100644
| 1 | +import { mount, createLocalVue } from '@vue/test-utils' | ||
| 2 | +import VueRouter from 'vue-router' | ||
| 3 | +import ElementUI from 'element-ui' | ||
| 4 | +import Breadcrumb from '@/components/Breadcrumb/index.vue' | ||
| 5 | + | ||
| 6 | +const localVue = createLocalVue() | ||
| 7 | +localVue.use(VueRouter) | ||
| 8 | +localVue.use(ElementUI) | ||
| 9 | + | ||
| 10 | +const routes = [ | ||
| 11 | + { | ||
| 12 | + path: '/', | ||
| 13 | + name: 'home', | ||
| 14 | + children: [{ | ||
| 15 | + path: 'dashboard', | ||
| 16 | + name: 'dashboard' | ||
| 17 | + }] | ||
| 18 | + }, | ||
| 19 | + { | ||
| 20 | + path: '/menu', | ||
| 21 | + name: 'menu', | ||
| 22 | + children: [{ | ||
| 23 | + path: 'menu1', | ||
| 24 | + name: 'menu1', | ||
| 25 | + meta: { title: 'menu1' }, | ||
| 26 | + children: [{ | ||
| 27 | + path: 'menu1-1', | ||
| 28 | + name: 'menu1-1', | ||
| 29 | + meta: { title: 'menu1-1' } | ||
| 30 | + }, | ||
| 31 | + { | ||
| 32 | + path: 'menu1-2', | ||
| 33 | + name: 'menu1-2', | ||
| 34 | + redirect: 'noredirect', | ||
| 35 | + meta: { title: 'menu1-2' }, | ||
| 36 | + children: [{ | ||
| 37 | + path: 'menu1-2-1', | ||
| 38 | + name: 'menu1-2-1', | ||
| 39 | + meta: { title: 'menu1-2-1' } | ||
| 40 | + }, | ||
| 41 | + { | ||
| 42 | + path: 'menu1-2-2', | ||
| 43 | + name: 'menu1-2-2' | ||
| 44 | + }] | ||
| 45 | + }] | ||
| 46 | + }] | ||
| 47 | + }] | ||
| 48 | + | ||
| 49 | +const router = new VueRouter({ | ||
| 50 | + routes | ||
| 51 | +}) | ||
| 52 | + | ||
| 53 | +describe('Breadcrumb.vue', () => { | ||
| 54 | + const wrapper = mount(Breadcrumb, { | ||
| 55 | + localVue, | ||
| 56 | + router | ||
| 57 | + }) | ||
| 58 | + it('dashboard', () => { | ||
| 59 | + router.push('/dashboard') | ||
| 60 | + const len = wrapper.findAll('.el-breadcrumb__inner').length | ||
| 61 | + expect(len).toBe(1) | ||
| 62 | + }) | ||
| 63 | + it('normal route', () => { | ||
| 64 | + router.push('/menu/menu1') | ||
| 65 | + const len = wrapper.findAll('.el-breadcrumb__inner').length | ||
| 66 | + expect(len).toBe(2) | ||
| 67 | + }) | ||
| 68 | + it('nested route', () => { | ||
| 69 | + router.push('/menu/menu1/menu1-2/menu1-2-1') | ||
| 70 | + const len = wrapper.findAll('.el-breadcrumb__inner').length | ||
| 71 | + expect(len).toBe(4) | ||
| 72 | + }) | ||
| 73 | + it('no meta.title', () => { | ||
| 74 | + router.push('/menu/menu1/menu1-2/menu1-2-2') | ||
| 75 | + const len = wrapper.findAll('.el-breadcrumb__inner').length | ||
| 76 | + expect(len).toBe(3) | ||
| 77 | + }) | ||
| 78 | + // it('click link', () => { | ||
| 79 | + // router.push('/menu/menu1/menu1-2/menu1-2-2') | ||
| 80 | + // const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner') | ||
| 81 | + // const second = breadcrumbArray.at(1) | ||
| 82 | + // console.log(breadcrumbArray) | ||
| 83 | + // const href = second.find('a').attributes().href | ||
| 84 | + // expect(href).toBe('#/menu/menu1') | ||
| 85 | + // }) | ||
| 86 | + // it('noRedirect', () => { | ||
| 87 | + // router.push('/menu/menu1/menu1-2/menu1-2-1') | ||
| 88 | + // const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner') | ||
| 89 | + // const redirectBreadcrumb = breadcrumbArray.at(2) | ||
| 90 | + // expect(redirectBreadcrumb.contains('a')).toBe(false) | ||
| 91 | + // }) | ||
| 92 | + it('last breadcrumb', () => { | ||
| 93 | + router.push('/menu/menu1/menu1-2/menu1-2-1') | ||
| 94 | + const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner') | ||
| 95 | + const redirectBreadcrumb = breadcrumbArray.at(3) | ||
| 96 | + expect(redirectBreadcrumb.contains('a')).toBe(false) | ||
| 97 | + }) | ||
| 98 | +}) |
tests/unit/components/Hamburger.spec.js
0 → 100644
| 1 | +import { shallowMount } from '@vue/test-utils' | ||
| 2 | +import Hamburger from '@/components/Hamburger/index.vue' | ||
| 3 | +describe('Hamburger.vue', () => { | ||
| 4 | + it('toggle click', () => { | ||
| 5 | + const wrapper = shallowMount(Hamburger) | ||
| 6 | + const mockFn = jest.fn() | ||
| 7 | + wrapper.vm.$on('toggleClick', mockFn) | ||
| 8 | + wrapper.find('.hamburger').trigger('click') | ||
| 9 | + expect(mockFn).toBeCalled() | ||
| 10 | + }) | ||
| 11 | + it('prop isActive', () => { | ||
| 12 | + const wrapper = shallowMount(Hamburger) | ||
| 13 | + wrapper.setProps({ isActive: true }) | ||
| 14 | + expect(wrapper.contains('.is-active')).toBe(true) | ||
| 15 | + wrapper.setProps({ isActive: false }) | ||
| 16 | + expect(wrapper.contains('.is-active')).toBe(false) | ||
| 17 | + }) | ||
| 18 | +}) |
tests/unit/components/SvgIcon.spec.js
0 → 100644
| 1 | +import { shallowMount } from '@vue/test-utils' | ||
| 2 | +import SvgIcon from '@/components/SvgIcon/index.vue' | ||
| 3 | +describe('SvgIcon.vue', () => { | ||
| 4 | + it('iconClass', () => { | ||
| 5 | + const wrapper = shallowMount(SvgIcon, { | ||
| 6 | + propsData: { | ||
| 7 | + iconClass: 'test' | ||
| 8 | + } | ||
| 9 | + }) | ||
| 10 | + expect(wrapper.find('use').attributes().href).toBe('#icon-test') | ||
| 11 | + }) | ||
| 12 | + it('className', () => { | ||
| 13 | + const wrapper = shallowMount(SvgIcon, { | ||
| 14 | + propsData: { | ||
| 15 | + iconClass: 'test' | ||
| 16 | + } | ||
| 17 | + }) | ||
| 18 | + expect(wrapper.classes().length).toBe(1) | ||
| 19 | + wrapper.setProps({ className: 'test' }) | ||
| 20 | + expect(wrapper.classes().includes('test')).toBe(true) | ||
| 21 | + }) | ||
| 22 | +}) |
tests/unit/utils/formatTime.spec.js
0 → 100644
| 1 | +import { formatTime } from '@/utils/index.js' | ||
| 2 | + | ||
| 3 | +describe('Utils:formatTime', () => { | ||
| 4 | + const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01" | ||
| 5 | + const retrofit = 5 * 1000 | ||
| 6 | + | ||
| 7 | + it('ten digits timestamp', () => { | ||
| 8 | + expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分') | ||
| 9 | + }) | ||
| 10 | + it('test now', () => { | ||
| 11 | + expect(formatTime(+new Date() - 1)).toBe('刚刚') | ||
| 12 | + }) | ||
| 13 | + it('less two minute', () => { | ||
| 14 | + expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前') | ||
| 15 | + }) | ||
| 16 | + it('less two hour', () => { | ||
| 17 | + expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前') | ||
| 18 | + }) | ||
| 19 | + it('less one day', () => { | ||
| 20 | + expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前') | ||
| 21 | + }) | ||
| 22 | + it('more than one day', () => { | ||
| 23 | + expect(formatTime(d)).toBe('7月13日17时54分') | ||
| 24 | + }) | ||
| 25 | + it('format', () => { | ||
| 26 | + expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54') | ||
| 27 | + expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13') | ||
| 28 | + expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54') | ||
| 29 | + }) | ||
| 30 | +}) |
tests/unit/utils/param2Obj.spec.js
0 → 100644
| 1 | +import { param2Obj } from '@/utils/index.js' | ||
| 2 | +describe('Utils:param2Obj', () => { | ||
| 3 | + const url = 'https://github.com/PanJiaChen/vue-element-admin?name=bill&age=29&sex=1&field=dGVzdA==&key=%E6%B5%8B%E8%AF%95' | ||
| 4 | + | ||
| 5 | + it('param2Obj test', () => { | ||
| 6 | + expect(param2Obj(url)).toEqual({ | ||
| 7 | + name: 'bill', | ||
| 8 | + age: '29', | ||
| 9 | + sex: '1', | ||
| 10 | + field: window.btoa('test'), | ||
| 11 | + key: '测试' | ||
| 12 | + }) | ||
| 13 | + }) | ||
| 14 | +}) |
tests/unit/utils/parseTime.spec.js
0 → 100644
| 1 | +import { parseTime } from '@/utils/index.js' | ||
| 2 | + | ||
| 3 | +describe('Utils:parseTime', () => { | ||
| 4 | + const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01" | ||
| 5 | + it('timestamp', () => { | ||
| 6 | + expect(parseTime(d)).toBe('2018-07-13 17:54:01') | ||
| 7 | + }) | ||
| 8 | + it('timestamp string', () => { | ||
| 9 | + expect(parseTime((d + ''))).toBe('2018-07-13 17:54:01') | ||
| 10 | + }) | ||
| 11 | + it('ten digits timestamp', () => { | ||
| 12 | + expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01') | ||
| 13 | + }) | ||
| 14 | + it('new Date', () => { | ||
| 15 | + expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01') | ||
| 16 | + }) | ||
| 17 | + it('format', () => { | ||
| 18 | + expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54') | ||
| 19 | + expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13') | ||
| 20 | + expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54') | ||
| 21 | + }) | ||
| 22 | + it('get the day of the week', () => { | ||
| 23 | + expect(parseTime(d, '{a}')).toBe('五') // 星期五 | ||
| 24 | + }) | ||
| 25 | + it('get the day of the week', () => { | ||
| 26 | + expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日 | ||
| 27 | + }) | ||
| 28 | + it('empty argument', () => { | ||
| 29 | + expect(parseTime()).toBeNull() | ||
| 30 | + }) | ||
| 31 | + | ||
| 32 | + it('null', () => { | ||
| 33 | + expect(parseTime(null)).toBeNull() | ||
| 34 | + }) | ||
| 35 | +}) |
tests/unit/utils/validate.spec.js
0 → 100644
| 1 | +import { validUsername, isExternal } from '@/utils/validate.js' | ||
| 2 | + | ||
| 3 | +describe('Utils:validate', () => { | ||
| 4 | + it('validUsername', () => { | ||
| 5 | + expect(validUsername('admin')).toBe(true) | ||
| 6 | + expect(validUsername('editor')).toBe(true) | ||
| 7 | + expect(validUsername('xxxx')).toBe(false) | ||
| 8 | + }) | ||
| 9 | + it('isExternal', () => { | ||
| 10 | + expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true) | ||
| 11 | + expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true) | ||
| 12 | + expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false) | ||
| 13 | + expect(isExternal('/dashboard')).toBe(false) | ||
| 14 | + expect(isExternal('./dashboard')).toBe(false) | ||
| 15 | + expect(isExternal('dashboard')).toBe(false) | ||
| 16 | + }) | ||
| 17 | +}) |
vue.config.js
0 → 100644
| 1 | +'use strict' | ||
| 2 | +const path = require('path') | ||
| 3 | +const defaultSettings = require('./src/settings.js') | ||
| 4 | + | ||
| 5 | +function resolve(dir) { | ||
| 6 | + return path.join(__dirname, dir) | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +const name = defaultSettings.title || '答题后台' // page title | ||
| 10 | + | ||
| 11 | +// If your port is set to 80, | ||
| 12 | +// use administrator privileges to execute the command line. | ||
| 13 | +// For example, Mac: sudo npm run | ||
| 14 | +// You can change the port by the following methods: | ||
| 15 | +// port = 9528 npm run dev OR npm run dev --port = 9528 | ||
| 16 | +const port = process.env.port || process.env.npm_config_port || 9528 // dev port | ||
| 17 | + | ||
| 18 | +// All configuration item explanations can be find in https://cli.vuejs.org/config/ | ||
| 19 | +module.exports = { | ||
| 20 | + /** | ||
| 21 | + * You will need to set publicPath if you plan to deploy your site under a sub path, | ||
| 22 | + * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/, | ||
| 23 | + * then publicPath should be set to "/bar/". | ||
| 24 | + * In most cases please use '/' !!! | ||
| 25 | + * Detail: https://cli.vuejs.org/config/#publicpath | ||
| 26 | + */ | ||
| 27 | + publicPath: '/', | ||
| 28 | + outputDir: 'dist', | ||
| 29 | + assetsDir: 'static', | ||
| 30 | + lintOnSave: process.env.NODE_ENV === 'development', | ||
| 31 | + productionSourceMap: false, | ||
| 32 | + devServer: { | ||
| 33 | + port: port, | ||
| 34 | + open: true, | ||
| 35 | + overlay: { | ||
| 36 | + warnings: false, | ||
| 37 | + errors: true | ||
| 38 | + }, | ||
| 39 | + proxy: { | ||
| 40 | + '/development': { | ||
| 41 | + target: `https://app.cehuimi.com/`, //后台服务地址 | ||
| 42 | + changeOrigin: true, | ||
| 43 | + pathRewrite: { | ||
| 44 | + '^/development': '' | ||
| 45 | + } | ||
| 46 | + }, | ||
| 47 | + '/api': { | ||
| 48 | + target: `https://app.cehuimi.com/`, //后台服务地址 | ||
| 49 | + changeOrigin: true, | ||
| 50 | + pathRewrite: {} | ||
| 51 | + } | ||
| 52 | + }, | ||
| 53 | + }, | ||
| 54 | + configureWebpack: { | ||
| 55 | + // provide the app's title in webpack's name field, so that | ||
| 56 | + // it can be accessed in index.html to inject the correct title. | ||
| 57 | + name: name, | ||
| 58 | + resolve: { | ||
| 59 | + alias: { | ||
| 60 | + '@': resolve('src') | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | + }, | ||
| 64 | + chainWebpack(config) { | ||
| 65 | + // it can improve the speed of the first screen, it is recommended to turn on preload | ||
| 66 | + config.plugin('preload').tap(() => [{ | ||
| 67 | + rel: 'preload', | ||
| 68 | + // to ignore runtime.js | ||
| 69 | + // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171 | ||
| 70 | + fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/], | ||
| 71 | + include: 'initial' | ||
| 72 | + }]) | ||
| 73 | + | ||
| 74 | + // when there are many pages, it will cause too many meaningless requests | ||
| 75 | + config.plugins.delete('prefetch') | ||
| 76 | + | ||
| 77 | + // set svg-sprite-loader | ||
| 78 | + config.module | ||
| 79 | + .rule('svg') | ||
| 80 | + .exclude.add(resolve('src/icons')) | ||
| 81 | + .end() | ||
| 82 | + config.module | ||
| 83 | + .rule('icons') | ||
| 84 | + .test(/\.svg$/) | ||
| 85 | + .include.add(resolve('src/icons')) | ||
| 86 | + .end() | ||
| 87 | + .use('svg-sprite-loader') | ||
| 88 | + .loader('svg-sprite-loader') | ||
| 89 | + .options({ | ||
| 90 | + symbolId: 'icon-[name]' | ||
| 91 | + }) | ||
| 92 | + .end() | ||
| 93 | + | ||
| 94 | + config | ||
| 95 | + .when(process.env.NODE_ENV !== 'development', | ||
| 96 | + config => { | ||
| 97 | + config | ||
| 98 | + .plugin('ScriptExtHtmlWebpackPlugin') | ||
| 99 | + .after('html') | ||
| 100 | + .use('script-ext-html-webpack-plugin', [{ | ||
| 101 | + // `runtime` must same as runtimeChunk name. default is `runtime` | ||
| 102 | + inline: /runtime\..*\.js$/ | ||
| 103 | + }]) | ||
| 104 | + .end() | ||
| 105 | + config | ||
| 106 | + .optimization.splitChunks({ | ||
| 107 | + chunks: 'all', | ||
| 108 | + cacheGroups: { | ||
| 109 | + libs: { | ||
| 110 | + name: 'chunk-libs', | ||
| 111 | + test: /[\\/]node_modules[\\/]/, | ||
| 112 | + priority: 10, | ||
| 113 | + chunks: 'initial' // only package third parties that are initially dependent | ||
| 114 | + }, | ||
| 115 | + elementUI: { | ||
| 116 | + name: 'chunk-elementUI', // split elementUI into a single package | ||
| 117 | + priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app | ||
| 118 | + test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm | ||
| 119 | + }, | ||
| 120 | + commons: { | ||
| 121 | + name: 'chunk-commons', | ||
| 122 | + test: resolve('src/components'), // can customize your rules | ||
| 123 | + minChunks: 3, // minimum common number | ||
| 124 | + priority: 5, | ||
| 125 | + reuseExistingChunk: true | ||
| 126 | + } | ||
| 127 | + } | ||
| 128 | + }) | ||
| 129 | + // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk | ||
| 130 | + config.optimization.runtimeChunk('single') | ||
| 131 | + } | ||
| 132 | + ) | ||
| 133 | + } | ||
| 134 | +} |