commit
64c6e4c2e1
@ -0,0 +1,9 @@
|
||||
VUE_APP_PUBLIC_PATH=/
|
||||
VUE_APP_NAME=Admin
|
||||
VUE_APP_ROUTES_KEY=admin.routes
|
||||
VUE_APP_PERMISSIONS_KEY=admin.permissions
|
||||
VUE_APP_ROLES_KEY=admin.roles
|
||||
VUE_APP_USER_KEY=admin.user
|
||||
VUE_APP_SETTING_KEY=admin.setting
|
||||
VUE_APP_TBAS_KEY=admin.tabs
|
||||
VUE_APP_TBAS_TITLES_KEY=admin.tabs.titles
|
||||
@ -0,0 +1,6 @@
|
||||
VUE_ENV = development
|
||||
|
||||
VUE_APP_PUBLIC_PATH = '/admin'
|
||||
|
||||
# VUE_APP_API_BASE_URL=https://mock.localhost.com
|
||||
VUE_APP_API_URL=https://card.h888.fun/adminapi/v1
|
||||
@ -0,0 +1,5 @@
|
||||
VUE_ENV = production
|
||||
|
||||
VUE_APP_PUBLIC_PATH = '/admin'
|
||||
|
||||
VUE_APP_API_URL=https://utel.vip/adminapi/v1
|
||||
@ -0,0 +1,6 @@
|
||||
VUE_ENV = production
|
||||
|
||||
VUE_APP_PUBLIC_PATH = '/admin'
|
||||
|
||||
VUE_APP_API_URL=https://card.h888.fun/adminapi/v1
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
VUE_ENV = stage
|
||||
|
||||
VUE_APP_PUBLIC_PATH = '/admin'
|
||||
|
||||
VUE_APP_API_URL=https://utel.zltest.com.tw/adminapi/v1
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
admindb/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
/test/unit/coverage/
|
||||
/test/e2e/reports/
|
||||
selenium-debug.log
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
package-lock.json
|
||||
.env.production.local
|
||||
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018 iczer
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
@ -0,0 +1,13 @@
|
||||
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
|
||||
|
||||
const plugins = []
|
||||
if (IS_PROD) {
|
||||
plugins.push('transform-remove-console')
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
],
|
||||
plugins
|
||||
}
|
||||
@ -0,0 +1,90 @@
|
||||
{
|
||||
"name": "vue-antd-admin",
|
||||
"version": "0.7.4",
|
||||
"homepage": "https://iczer.github.io/vue-antd-admin",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"build:dev": "vue-cli-service build --mode development",
|
||||
"build:sta": "vue-cli-service build --mode stage",
|
||||
"build:slash": "vue-cli-service build --mode slash",
|
||||
"lint": "vue-cli-service lint",
|
||||
"predeploy": "yarn build",
|
||||
"deploy": "gh-pages -d dist -b pages -r https://gitee.com/iczer/vue-antd-admin.git",
|
||||
"docs:dev": "vuepress dev docs",
|
||||
"docs:build": "vuepress build docs",
|
||||
"docs:deploy": "vuepress build docs && gh-pages -d docs/.vuepress/dist -b master -r https://gitee.com/iczer/vue-antd-admin-docs.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/data-set": "^0.11.4",
|
||||
"animate.css": "^4.1.0",
|
||||
"ant-design-vue": "1.7.2",
|
||||
"axios": "^0.19.2",
|
||||
"ckeditor4-vue": "^2.0.0",
|
||||
"clipboard": "^2.0.6",
|
||||
"core-js": "^3.6.5",
|
||||
"date-fns": "^2.14.0",
|
||||
"echarts": "^4.9.0",
|
||||
"enquire.js": "^2.1.6",
|
||||
"highlight.js": "^10.2.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"postcss-loader": "^4.3.0",
|
||||
"qrcodejs2": "^0.0.2",
|
||||
"raw-loader": "^4.0.2",
|
||||
"viser-vue": "^2.4.8",
|
||||
"vue": "^2.6.11",
|
||||
"vue-clipboard2": "^0.3.3",
|
||||
"vue-echarts": "^4.0.3",
|
||||
"vue-element-resize-event": "^0.1.0",
|
||||
"vue-i18n": "^8.18.2",
|
||||
"vue-print-nb": "^1.7.5",
|
||||
"vue-router": "^3.3.4",
|
||||
"vuedraggable": "^2.23.2",
|
||||
"vuex": "^3.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design/colors": "^4.0.1",
|
||||
"@vue/cli-plugin-babel": "^4.4.0",
|
||||
"@vue/cli-plugin-eslint": "^4.4.0",
|
||||
"@vue/cli-service": "^4.4.0",
|
||||
"@vuepress/plugin-back-to-top": "^1.5.2",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-plugin-transform-remove-console": "^6.9.4",
|
||||
"babel-polyfill": "^6.26.0",
|
||||
"compression-webpack-plugin": "^2.0.0",
|
||||
"deepmerge": "^4.2.2",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"gh-pages": "^3.1.0",
|
||||
"less-loader": "^6.1.1",
|
||||
"style-resources-loader": "^1.3.2",
|
||||
"vue-cli-plugin-style-resources-loader": "^0.1.4",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vuepress": "^1.5.2",
|
||||
"webpack-theme-color-replacer": "1.3.18",
|
||||
"whatwg-fetch": "^3.0.0"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 10"
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,222 @@
|
||||
@charset "utf-8";
|
||||
body,
|
||||
div,
|
||||
dl,
|
||||
footer,
|
||||
html,
|
||||
img,
|
||||
menu,
|
||||
p,
|
||||
span {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
body {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
background-color: #fffff6 !important;
|
||||
padding-bottom: 49px;
|
||||
}
|
||||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
@-webkit-keyframes pop-hide {
|
||||
0% {
|
||||
-webkit-transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
2% {
|
||||
-webkit-transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
6% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
90% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes pop {
|
||||
0% {
|
||||
-webkit-transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slideup {
|
||||
0% {
|
||||
-webkit-transform: translateY(100%);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translateY(-10%);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
.text-icon {
|
||||
font-family: base_icon;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-style: normal;
|
||||
}
|
||||
.my-account {
|
||||
color: #333;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
}
|
||||
.account-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.account-bg img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.my-account > img {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.my-account .user-info {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 70px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1.9em;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
.my-account .uname {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin-top: 0.1em;
|
||||
margin-bottom: 0.2em;
|
||||
text-shadow: 0.07em 0.07em #333;
|
||||
}
|
||||
.my-account .umoney {
|
||||
color: #fff;
|
||||
margin-bottom: 0.06em;
|
||||
text-shadow: 0.05em 0.05em #333;
|
||||
}
|
||||
.my-account .avatar_box {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
z-index: 1;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #ffd44a;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.my-account .avater {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.phone {
|
||||
width: 105px;
|
||||
float: left;
|
||||
z-index: 100;
|
||||
}
|
||||
.set {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
z-index: 100;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
background-color: #fdaf00;
|
||||
text-align: center;
|
||||
margin-top: -7px;
|
||||
padding: 2px 2px;
|
||||
}
|
||||
.set a {
|
||||
color: #fff !important;
|
||||
}
|
||||
.dl01 {
|
||||
padding: 0 10px 10px;
|
||||
background-color: #fff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.titleImg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 10px;
|
||||
margin-top: 15px;
|
||||
float: left;
|
||||
}
|
||||
.dl02 {
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dl02 a .menu {
|
||||
border-bottom: 1px solid #ffe9b7;
|
||||
background: url(../images/right.png) no-repeat right center;
|
||||
background-size: 10px;
|
||||
}
|
||||
.dl02 a .menu div {
|
||||
padding-top: 16px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
.dl02 a .menu div.left {
|
||||
float: left;
|
||||
width: 40%;
|
||||
}
|
||||
.dl02 a .menu div.right {
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 45%;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 484 B |
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW" class="beauty-scroll">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= process.env.VUE_APP_NAME %></title>
|
||||
<!-- require cdn assets css -->
|
||||
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
|
||||
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="popContainer" class="beauty-scroll" style="height: 100vh; overflow-y: scroll">
|
||||
<div id="app"></div>
|
||||
</div>
|
||||
<!-- require cdn assets js -->
|
||||
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
|
||||
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
|
||||
<% } %>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<a-config-provider :locale="locale" :get-popup-container="popContainer">
|
||||
<router-view/>
|
||||
</a-config-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {enquireScreen} from './utils/util'
|
||||
import {mapState, mapMutations} from 'vuex'
|
||||
import themeUtil from '@/utils/themeUtil';
|
||||
import {getI18nKey} from '@/utils/routerUtil'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
locale: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.setHtmlTitle()
|
||||
this.setLanguage(this.lang)
|
||||
enquireScreen(isMobile => this.setDevice(isMobile))
|
||||
},
|
||||
mounted() {
|
||||
this.setWeekModeTheme(this.weekMode)
|
||||
},
|
||||
watch: {
|
||||
weekMode(val) {
|
||||
this.setWeekModeTheme(val)
|
||||
},
|
||||
lang(val) {
|
||||
this.setLanguage(val)
|
||||
this.setHtmlTitle()
|
||||
},
|
||||
$route() {
|
||||
this.setHtmlTitle()
|
||||
},
|
||||
'theme.mode': function(val) {
|
||||
let closeMessage = this.$message.loading(`您選擇了主題模式 ${val}, 正在切換...`)
|
||||
themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage)
|
||||
},
|
||||
'theme.color': function(val) {
|
||||
let closeMessage = this.$message.loading(`您選擇了主題色 ${val}, 正在切換...`)
|
||||
themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage)
|
||||
},
|
||||
'layout': function() {
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('setting', ['layout', 'theme', 'weekMode', 'lang'])
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('setting', ['setDevice']),
|
||||
setWeekModeTheme(weekMode) {
|
||||
if (weekMode) {
|
||||
document.body.classList.add('week-mode')
|
||||
} else {
|
||||
document.body.classList.remove('week-mode')
|
||||
}
|
||||
},
|
||||
setLanguage(lang) {
|
||||
this.$i18n.locale = lang
|
||||
switch (lang) {
|
||||
case 'TW':
|
||||
this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
|
||||
break
|
||||
case 'CN':
|
||||
this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
|
||||
break
|
||||
case 'US':
|
||||
default:
|
||||
this.locale = require('ant-design-vue/es/locale-provider/en_US').default
|
||||
break
|
||||
}
|
||||
},
|
||||
setHtmlTitle() {
|
||||
const route = this.$route
|
||||
const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path)
|
||||
document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key)
|
||||
},
|
||||
popContainer() {
|
||||
return document.getElementById("popContainer")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
#id{
|
||||
}
|
||||
|
||||
.edit-btn{
|
||||
color: #239DFA;
|
||||
}
|
||||
|
||||
.delete-btn{
|
||||
color: #F95838;
|
||||
}
|
||||
|
||||
.ant-drawer-header{
|
||||
background-color: #87e8de !important;
|
||||
.ant-drawer-title{
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.ant-drawer-content-wrapper {
|
||||
width: 60% !important;
|
||||
}
|
||||
@media only screen and (max-width: @screen-md) {
|
||||
.ant-drawer-content-wrapper {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,349 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,222 @@
|
||||
@charset "utf-8";
|
||||
body,
|
||||
div,
|
||||
dl,
|
||||
footer,
|
||||
html,
|
||||
img,
|
||||
menu,
|
||||
p,
|
||||
span {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
body {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
-webkit-user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
background-color: #fffff6 !important;
|
||||
padding-bottom: 49px;
|
||||
}
|
||||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
@-webkit-keyframes pop-hide {
|
||||
0% {
|
||||
-webkit-transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
2% {
|
||||
-webkit-transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
6% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
90% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes pop {
|
||||
0% {
|
||||
-webkit-transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: scale(1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slideup {
|
||||
0% {
|
||||
-webkit-transform: translateY(100%);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translateY(-10%);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.rel {
|
||||
position: relative;
|
||||
}
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
.text-icon {
|
||||
font-family: base_icon;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-style: normal;
|
||||
}
|
||||
.my-account {
|
||||
color: #333;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 6rem;
|
||||
}
|
||||
.account-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.account-bg img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.my-account > img {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
.my-account .user-info {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 70px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 1.9em;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
.my-account .uname {
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
margin-top: 0.1em;
|
||||
margin-bottom: 0.2em;
|
||||
text-shadow: 0.07em 0.07em #333;
|
||||
}
|
||||
.my-account .umoney {
|
||||
color: #fff;
|
||||
margin-bottom: 0.06em;
|
||||
text-shadow: 0.05em 0.05em #333;
|
||||
}
|
||||
.my-account .avatar_box {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
left: 1em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
z-index: 1;
|
||||
border-radius: 100%;
|
||||
border: 2px solid #ffd44a;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.my-account .avater {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.phone {
|
||||
width: 105px;
|
||||
float: left;
|
||||
z-index: 100;
|
||||
}
|
||||
.set {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
z-index: 100;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
background-color: #fdaf00;
|
||||
text-align: center;
|
||||
margin-top: -7px;
|
||||
padding: 2px 2px;
|
||||
}
|
||||
.set a {
|
||||
color: #fff !important;
|
||||
}
|
||||
.dl01 {
|
||||
padding: 0 10px 10px;
|
||||
background-color: #fff;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.titleImg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin-right: 10px;
|
||||
margin-top: 15px;
|
||||
float: left;
|
||||
}
|
||||
.dl02 {
|
||||
padding: 0 10px;
|
||||
background-color: #fff;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dl02 a .menu {
|
||||
border-bottom: 1px solid #ffe9b7;
|
||||
background: url(../images/right.png) no-repeat right center;
|
||||
background-size: 10px;
|
||||
}
|
||||
.dl02 a .menu div {
|
||||
padding-top: 16px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
.dl02 a .menu div.left {
|
||||
float: left;
|
||||
width: 40%;
|
||||
}
|
||||
.dl02 a .menu div.right {
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 45%;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
After Width: | Height: | Size: 596 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,25 @@
|
||||
import {loadRoutes, loadGuards, setAppOptions} from '@/utils/routerUtil'
|
||||
import {loadInterceptors} from '@/utils/request'
|
||||
import guards from '@/router/guards'
|
||||
import interceptors from '@/utils/axios-interceptors'
|
||||
|
||||
/**
|
||||
* 啟動引導方法
|
||||
* 應用啟動時需要執行的操作放在這裡
|
||||
* @param router 應用的路由例項
|
||||
* @param store 應用的 vuex.store 例項
|
||||
* @param i18n 應用的 vue-i18n 例項
|
||||
* @param i18n 應用的 message 例項
|
||||
*/
|
||||
function bootstrap({router, store, i18n, message}) {
|
||||
// 設定應用配置
|
||||
setAppOptions({router, store, i18n})
|
||||
// 載入 axios 攔截器
|
||||
loadInterceptors(interceptors, {router, store, i18n, message})
|
||||
// 載入路由
|
||||
loadRoutes()
|
||||
// 載入路由守衛
|
||||
loadGuards(guards, {router, store, i18n, message})
|
||||
}
|
||||
|
||||
export default bootstrap
|
||||
@ -0,0 +1,172 @@
|
||||
import {isDef, isRegExp, remove} from '@/utils/util'
|
||||
|
||||
const patternTypes = [String, RegExp, Array]
|
||||
|
||||
function matches (pattern, name) {
|
||||
if (Array.isArray(pattern)) {
|
||||
if (pattern.indexOf(name) > -1) {
|
||||
return true
|
||||
} else {
|
||||
for (let item of pattern) {
|
||||
if (isRegExp(item) && item.test(name)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
} else if (typeof pattern === 'string') {
|
||||
return pattern.split(',').indexOf(name) > -1
|
||||
} else if (isRegExp(pattern)) {
|
||||
return pattern.test(name)
|
||||
}
|
||||
/* istanbul ignore next */
|
||||
return false
|
||||
}
|
||||
|
||||
function getComponentName (opts) {
|
||||
return opts && (opts.Ctor.options.name || opts.tag)
|
||||
}
|
||||
|
||||
function getComponentKey (vnode) {
|
||||
const {componentOptions, key} = vnode
|
||||
return key == null
|
||||
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
|
||||
: key + componentOptions.Ctor.cid
|
||||
}
|
||||
|
||||
function getFirstComponentChild (children) {
|
||||
if (Array.isArray(children)) {
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const c = children[i]
|
||||
if (isDef(c) && (isDef(c.componentOptions) || c.isAsyncPlaceholder)) {
|
||||
return c
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function pruneCache (keepAliveInstance, filter) {
|
||||
const { cache, keys, _vnode } = keepAliveInstance
|
||||
for (const key in cache) {
|
||||
const cachedNode = cache[key]
|
||||
if (cachedNode) {
|
||||
const name = getComponentName(cachedNode.componentOptions)
|
||||
const componentKey = getComponentKey(cachedNode)
|
||||
if (name && !filter(name, componentKey)) {
|
||||
pruneCacheEntry(cache, key, keys, _vnode)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function pruneCacheEntry2(cache, key, keys) {
|
||||
const cached = cache[key]
|
||||
if (cached) {
|
||||
cached.componentInstance.$destroy()
|
||||
}
|
||||
cache[key] = null
|
||||
remove(keys, key)
|
||||
}
|
||||
|
||||
function pruneCacheEntry (cache, key, keys, current) {
|
||||
const cached = cache[key]
|
||||
if (cached && (!current || cached.tag !== current.tag)) {
|
||||
cached.componentInstance.$destroy()
|
||||
}
|
||||
cache[key] = null
|
||||
remove(keys, key)
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'AKeepAlive',
|
||||
abstract: true,
|
||||
model: {
|
||||
prop: 'clearCaches',
|
||||
event: 'clear',
|
||||
},
|
||||
props: {
|
||||
include: patternTypes,
|
||||
exclude: patternTypes,
|
||||
excludeKeys: patternTypes,
|
||||
max: [String, Number],
|
||||
clearCaches: Array
|
||||
},
|
||||
watch: {
|
||||
clearCaches: function(val) {
|
||||
if (val && val.length > 0) {
|
||||
const {cache, keys} = this
|
||||
val.forEach(key => {
|
||||
pruneCacheEntry2(cache, key, keys)
|
||||
})
|
||||
this.$emit('clear', [])
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.cache = Object.create(null)
|
||||
this.keys = []
|
||||
},
|
||||
|
||||
destroyed () {
|
||||
for (const key in this.cache) {
|
||||
pruneCacheEntry(this.cache, key, this.keys)
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.$watch('include', val => {
|
||||
pruneCache(this, (name) => matches(val, name))
|
||||
})
|
||||
this.$watch('exclude', val => {
|
||||
pruneCache(this, (name) => !matches(val, name))
|
||||
})
|
||||
this.$watch('excludeKeys', val => {
|
||||
pruneCache(this, (name, key) => !matches(val, key))
|
||||
})
|
||||
},
|
||||
|
||||
render () {
|
||||
const slot = this.$slots.default
|
||||
const vnode = getFirstComponentChild(slot)
|
||||
const componentOptions = vnode && vnode.componentOptions
|
||||
if (componentOptions) {
|
||||
// check pattern
|
||||
const name = getComponentName(componentOptions)
|
||||
const componentKey = getComponentKey(vnode)
|
||||
const { include, exclude, excludeKeys } = this
|
||||
if (
|
||||
// not included
|
||||
(include && (!name || !matches(include, name))) ||
|
||||
// excluded
|
||||
(exclude && name && matches(exclude, name)) ||
|
||||
(excludeKeys && componentKey && matches(excludeKeys, componentKey))
|
||||
) {
|
||||
return vnode
|
||||
}
|
||||
|
||||
const { cache, keys } = this
|
||||
const key = vnode.key == null
|
||||
// same constructor may get registered as different local components
|
||||
// so cid alone is not enough (#3269)
|
||||
? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
|
||||
: vnode.key + componentOptions.Ctor.cid
|
||||
if (cache[key]) {
|
||||
vnode.componentInstance = cache[key].componentInstance
|
||||
// make current key freshest
|
||||
remove(keys, key)
|
||||
keys.push(key)
|
||||
} else {
|
||||
cache[key] = vnode
|
||||
keys.push(key)
|
||||
// prune oldest entry
|
||||
if (this.max && keys.length > parseInt(this.max)) {
|
||||
pruneCacheEntry(cache, keys[0], keys, this._vnode)
|
||||
}
|
||||
}
|
||||
|
||||
vnode.data.keepAlive = true
|
||||
}
|
||||
return vnode || (slot && slot[0])
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<a-card :loading="loading" :body-style="{padding: '20px 24px 8px'}" :bordered="false">
|
||||
<div class="chart-card-header">
|
||||
<div class="meta">
|
||||
<span class="chart-card-title">{{title}}</span>
|
||||
<span class="chart-card-action">
|
||||
<slot name="action"></slot>
|
||||
</span>
|
||||
</div>
|
||||
<div class="total"><span>{{total}}</span></div>
|
||||
</div>
|
||||
<div class="chart-card-content">
|
||||
<div class="content-fix">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-card-footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ChartCard',
|
||||
props: ['title', 'total', 'loading']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chart-card-header{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
.chart-card-header .meta{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
color: @text-color-second;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.chart-card-action{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.total {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 0;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
.chart-card-footer{
|
||||
border-top: 1px solid @border-color-base;
|
||||
padding-top: 9px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.chart-card-content{
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
height: 46px;
|
||||
width: 100%;
|
||||
}
|
||||
.chart-card-content .content-fix{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="bar">
|
||||
<h4>{{title}}</h4>
|
||||
<div class="chart">
|
||||
<v-chart :force-fit="true" height="312" :data="data" :padding="[24, 0, 0, 0]">
|
||||
<v-tooltip />
|
||||
<v-axis />
|
||||
<v-bar position="x*y"/>
|
||||
</v-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const data = []
|
||||
for (let i = 0; i < 12; i += 1) {
|
||||
data.push({
|
||||
x: `${i + 1}月`,
|
||||
y: Math.floor(Math.random() * 1000) + 200
|
||||
})
|
||||
}
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y
|
||||
})
|
||||
]
|
||||
|
||||
const scale = [{
|
||||
dataKey: 'x',
|
||||
min: 2
|
||||
}, {
|
||||
dataKey: 'y',
|
||||
title: '时间',
|
||||
min: 1,
|
||||
max: 22
|
||||
}]
|
||||
export default {
|
||||
name: 'Bar',
|
||||
props: ['title'],
|
||||
data () {
|
||||
return {
|
||||
data,
|
||||
scale,
|
||||
tooltip
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.bar{
|
||||
position: relative;
|
||||
.chart{
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="mini-chart">
|
||||
<div class="chart-content" :style="{height: 46}">
|
||||
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
|
||||
<v-tooltip />
|
||||
<v-smooth-area position="x*y" />
|
||||
</v-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {format} from 'date-fns'
|
||||
|
||||
const data = []
|
||||
const beginDay = new Date().getTime()
|
||||
|
||||
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
|
||||
for (let i = 0; i < fakeY.length; i += 1) {
|
||||
data.push({
|
||||
x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
|
||||
y: fakeY[i]
|
||||
})
|
||||
}
|
||||
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y
|
||||
})
|
||||
]
|
||||
|
||||
const scale = [{
|
||||
dataKey: 'x',
|
||||
min: 2
|
||||
}, {
|
||||
dataKey: 'y',
|
||||
title: '时间',
|
||||
min: 1,
|
||||
max: 22
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: 'MiniArea',
|
||||
data () {
|
||||
return {
|
||||
data,
|
||||
scale,
|
||||
tooltip,
|
||||
height: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mini-chart {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
.mini-chart .chart-content{
|
||||
position: absolute;
|
||||
bottom: -28px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="mini-chart">
|
||||
<div class="chart-content" :style="{height: 46}">
|
||||
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
|
||||
<v-tooltip />
|
||||
<v-bar position="x*y" />
|
||||
</v-chart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {format} from 'date-fns'
|
||||
|
||||
const data = []
|
||||
const beginDay = new Date().getTime()
|
||||
|
||||
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5]
|
||||
for (let i = 0; i < fakeY.length; i += 1) {
|
||||
data.push({
|
||||
x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
|
||||
y: fakeY[i]
|
||||
})
|
||||
}
|
||||
|
||||
const tooltip = [
|
||||
'x*y',
|
||||
(x, y) => ({
|
||||
name: x,
|
||||
value: y
|
||||
})
|
||||
]
|
||||
|
||||
const scale = [{
|
||||
dataKey: 'x',
|
||||
min: 2
|
||||
}, {
|
||||
dataKey: 'y',
|
||||
title: '时间',
|
||||
min: 1,
|
||||
max: 22
|
||||
}]
|
||||
|
||||
export default {
|
||||
name: 'MiniBar',
|
||||
data () {
|
||||
return {
|
||||
data,
|
||||
scale,
|
||||
tooltip,
|
||||
height: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "index.less";
|
||||
</style>
|
||||
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="mini-progress">
|
||||
<a-tooltip :title="'目标值：' + target + '%'">
|
||||
<div class="target" :style="{left: target + '%'}">
|
||||
<span :style="{backgroundColor: color}" />
|
||||
<span :style="{backgroundColor: color}" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<div class="wrap">
|
||||
<div class="progress" :style="{backgroundColor: color, width: percent + '%', height: height}" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MiniProgress',
|
||||
props: ['target', 'color', 'percent', 'height']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mini-progress {
|
||||
padding: 5px 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.wrap {
|
||||
background-color: @layout-bg-color;
|
||||
position: relative;
|
||||
}
|
||||
.progress {
|
||||
transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
|
||||
border-radius: 1px 0 0 1px;
|
||||
background-color: #13C2C2;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.target {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
span {
|
||||
border-radius: 100px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
width: 2px;
|
||||
}
|
||||
span:last-child {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
|
||||
<v-tooltip />
|
||||
<v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
|
||||
<v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
|
||||
<v-legend dataKey="user" marker="circle" :offset="30" />
|
||||
<v-coord type="polar" radius="0.8" />
|
||||
<v-line position="item*score" color="user" :size="2" />
|
||||
<v-point position="item*score" color="user" :size="4" shape="circle" />
|
||||
</v-chart>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const DataSet = require('@antv/data-set')
|
||||
|
||||
const sourceData = [
|
||||
{item: '引用', a: 70, b: 30, c: 40},
|
||||
{item: '口碑', a: 60, b: 70, c: 40},
|
||||
{item: '产量', a: 50, b: 60, c: 40},
|
||||
{item: '贡献', a: 40, b: 50, c: 40},
|
||||
{item: '热度', a: 60, b: 70, c: 40},
|
||||
{item: '引用', a: 70, b: 50, c: 40}
|
||||
]
|
||||
|
||||
const dv = new DataSet.View().source(sourceData)
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: ['a', 'b', 'c'],
|
||||
key: 'user',
|
||||
value: 'score'
|
||||
})
|
||||
|
||||
const scale = [{
|
||||
dataKey: 'score',
|
||||
min: 0,
|
||||
max: 80
|
||||
}]
|
||||
|
||||
const data = dv.rows
|
||||
|
||||
const axis1Opts = {
|
||||
dataKey: 'item',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
},
|
||||
hideFirstLine: false
|
||||
}
|
||||
}
|
||||
const axis2Opts = {
|
||||
dataKey: 'score',
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
type: 'polygon',
|
||||
lineStyle: {
|
||||
lineDash: null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Radar',
|
||||
data () {
|
||||
return {
|
||||
sourceData,
|
||||
data,
|
||||
axis1Opts,
|
||||
axis2Opts,
|
||||
scale
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="rank">
|
||||
<h4 class="title">{{title}}</h4>
|
||||
<ul class="list">
|
||||
<li :key="index" v-for="(item, index) in list">
|
||||
<span :class="index < 3 ? 'active' : null">{{index + 1}}</span>
|
||||
<span >{{item.name}}</span>
|
||||
<span >{{item.total}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RankingList',
|
||||
props: ['title', 'list']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.rank{
|
||||
padding: 0 32px 32px 72px;
|
||||
.title{
|
||||
}
|
||||
.list{
|
||||
margin: 25px 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
li {
|
||||
margin-top: 16px;
|
||||
span {
|
||||
color: @text-color-second;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
}
|
||||
span:first-child {
|
||||
background-color: @layout-bg-color;
|
||||
border-radius: 20px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-right: 24px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
span.active {
|
||||
background-color: #314659 !important;
|
||||
color: @text-color-inverse !important;
|
||||
}
|
||||
span:last-child {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="chart-trend">
|
||||
{{term}}
|
||||
<span>{{rate}}%</span>
|
||||
<span :class="['chart-trend-icon', trend]" style=""><a-icon :type="'caret-' + trend" /></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Trend',
|
||||
props: {
|
||||
term: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
target: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
isIncrease: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
percent: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
scale: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 2
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
trend: this.isIncrease ? 'up' : 'down',
|
||||
rate: this.percent
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.trend = this.caulateTrend()
|
||||
this.rate = this.caulateRate()
|
||||
},
|
||||
methods: {
|
||||
caulateRate () {
|
||||
return (this.percent === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percent).toFixed(this.scale)
|
||||
},
|
||||
caulateTrend () {
|
||||
let isIncrease = this.isIncrease === null ? this.value >= this.target : this.isIncrease
|
||||
return isIncrease ? 'up' : 'down'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.chart-trend{
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
.chart-trend-icon{
|
||||
font-size: 12px;
|
||||
&.up{
|
||||
color: @red-6;
|
||||
}
|
||||
&.down{
|
||||
color: @green-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,9 @@
|
||||
.mini-chart{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.chart-content{
|
||||
position: absolute;
|
||||
bottom: -28px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="theme-color" :style="{backgroundColor: color}" @click="toggle">
|
||||
<a-icon v-if="sChecked" type="check" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const Group = {
|
||||
name: 'ColorCheckboxGroup',
|
||||
props: {
|
||||
defaultValues: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => []
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
values: [],
|
||||
options: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
colors () {
|
||||
let colors = []
|
||||
this.options.forEach(item => {
|
||||
if (item.sChecked) {
|
||||
colors.push(item.color)
|
||||
}
|
||||
})
|
||||
return colors
|
||||
}
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
groupContext: this
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
values(value) {
|
||||
this.$emit('change', value, this.colors)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange (option) {
|
||||
if (!option.checked) {
|
||||
if (this.values.indexOf(option.value) > -1) {
|
||||
this.values = this.values.filter(item => item != option.value)
|
||||
}
|
||||
} else {
|
||||
if (!this.multiple) {
|
||||
this.values = [option.value]
|
||||
this.options.forEach(item => {
|
||||
if (item.value != option.value) {
|
||||
item.sChecked = false
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.values.push(option.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
const clear = h('div', {attrs: {style: 'clear: both'}})
|
||||
return h(
|
||||
'div',
|
||||
{},
|
||||
[this.$slots.default, clear]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'ColorCheckbox',
|
||||
Group: Group,
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
required: true
|
||||
},
|
||||
checked: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
sChecked: this.initChecked()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
inject: ['groupContext'],
|
||||
watch: {
|
||||
'sChecked': function () {
|
||||
const value = {
|
||||
value: this.value,
|
||||
color: this.color,
|
||||
checked: this.sChecked
|
||||
}
|
||||
this.$emit('change', value)
|
||||
const groupContext = this.groupContext
|
||||
if (groupContext) {
|
||||
groupContext.handleChange(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
const groupContext = this.groupContext
|
||||
if (groupContext) {
|
||||
groupContext.options.push(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
if (this.groupContext.multiple || !this.sChecked) {
|
||||
this.sChecked = !this.sChecked
|
||||
}
|
||||
},
|
||||
initChecked() {
|
||||
let groupContext = this.groupContext
|
||||
if (!groupContext) {
|
||||
return this.checked
|
||||
}else if (groupContext.multiple) {
|
||||
return groupContext.defaultValues.indexOf(this.value) > -1
|
||||
} else {
|
||||
return groupContext.defaultValues[0] == this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.theme-color{
|
||||
float: left;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
color: @base-bg-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,7 @@
|
||||
import ColorCheckbox from '@/components/checkbox/ColorCheckbox'
|
||||
import ImgCheckbox from '@/components/checkbox/ImgCheckbox'
|
||||
|
||||
export {
|
||||
ColorCheckbox,
|
||||
ImgCheckbox
|
||||
}
|
||||
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="exception-page">
|
||||
<div class="img">
|
||||
<img :src="config[type].img" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<h1>{{config[type].title}}</h1>
|
||||
<div class="desc">{{config[type].desc}}</div>
|
||||
<div class="action">
|
||||
<a-button type="primary" @click="backHome">返回首页</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Config from './typeConfig'
|
||||
|
||||
export default {
|
||||
name: 'ExceptionPage',
|
||||
props: ['type', 'homeRoute'],
|
||||
data () {
|
||||
return {
|
||||
config: Config
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
backHome() {
|
||||
if (this.homeRoute) {
|
||||
this.$router.push(this.homeRoute)
|
||||
}
|
||||
this.$emit('backHome', this.type)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.exception-page{
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: @base-bg-color;
|
||||
.img{
|
||||
padding-right: 52px;
|
||||
zoom: 1;
|
||||
img{
|
||||
max-width: 430px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
h1{
|
||||
color: #434e59;
|
||||
font-size: 72px;
|
||||
font-weight: 600;
|
||||
line-height: 72px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.desc{
|
||||
color: @text-color-second;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,19 @@
|
||||
const config = {
|
||||
403: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
|
||||
title: '403',
|
||||
desc: '抱歉，你無權訪問該頁面'
|
||||
},
|
||||
404: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
|
||||
title: '404',
|
||||
desc: '抱歉，你訪問的頁面不存在或仍在開發中'
|
||||
},
|
||||
500: {
|
||||
img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
|
||||
title: '500',
|
||||
desc: '抱歉，伺服器出錯了'
|
||||
}
|
||||
}
|
||||
|
||||
export default config
|
||||
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<a-input
|
||||
:addon-after="addonAfter"
|
||||
:addon-before="addonBefore"
|
||||
:default-value="defaultValue"
|
||||
:disabled="disabled"
|
||||
:id="id"
|
||||
:max-length="maxLength"
|
||||
:prefix="prefix"
|
||||
:size="size"
|
||||
:suffix="suffix || lenSuffix"
|
||||
:type="type"
|
||||
:allow-clear="allowClear"
|
||||
v-model="sValue"
|
||||
:value="value"
|
||||
@change="onChange"
|
||||
@input="onInput"
|
||||
@pressEnter="onPressEnter"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<template :slot="slot" v-for="slot in Object.keys($slots)">
|
||||
<slot :name="slot"></slot>
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'IInput',
|
||||
model: {
|
||||
prop: 'value',
|
||||
event: 'change.value'
|
||||
},
|
||||
props: ['addonAfter', 'addonBefore', 'defaultValue', 'disabled', 'id', 'maxLength', 'prefix', 'size', 'suffix', 'type', 'value', 'allowClear'],
|
||||
data() {
|
||||
return {
|
||||
sValue: this.value || this.defaultValue || ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.sValue = val
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lenSuffix() {
|
||||
return this.maxLength && `${(this.sValue + '').length}/${this.maxLength}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.$emit('change', e)
|
||||
this.$emit('change.value', e.target.value)
|
||||
},
|
||||
onInput(e) {
|
||||
this.$emit('input', e)
|
||||
},
|
||||
onPressEnter(e) {
|
||||
this.$emit('pressEnter', e)
|
||||
},
|
||||
onKeydown(e) {
|
||||
this.$emit('keydown', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<a-menu
|
||||
v-show="visible"
|
||||
class="contextmenu"
|
||||
:style="style"
|
||||
:selectedKeys="selectedKeys"
|
||||
@click="handleClick"
|
||||
>
|
||||
<a-menu-item :key="item.key" v-for="item in itemList">
|
||||
<a-icon v-if="item.icon" :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Contextmenu',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
itemList: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
left: 0,
|
||||
top: 0,
|
||||
target: null,
|
||||
meta: null,
|
||||
selectedKeys: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style () {
|
||||
return {
|
||||
left: this.left + 'px',
|
||||
top: this.top + 'px'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
window.addEventListener('click', this.closeMenu)
|
||||
window.addEventListener('contextmenu', this.setPosition)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('click', this.closeMenu)
|
||||
window.removeEventListener('contextmenu', this.setPosition)
|
||||
},
|
||||
methods: {
|
||||
closeMenu () {
|
||||
this.$emit('update:visible', false)
|
||||
},
|
||||
setPosition (e) {
|
||||
this.left = e.clientX
|
||||
this.top = e.clientY
|
||||
this.target = e.target
|
||||
this.meta = e.meta
|
||||
},
|
||||
handleClick ({ key }) {
|
||||
this.$emit('select', key, this.target, this.meta)
|
||||
this.closeMenu()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.contextmenu{
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
border-radius: 4px;
|
||||
box-shadow: -4px 4px 16px 1px @shadow-color !important;
|
||||
}
|
||||
.ant-menu-item {
|
||||
margin: 0 !important // 菜单项之间的缝隙会影响点击
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<a-layout-sider :theme="sideTheme" :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']" width="200px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
|
||||
<div :class="['logo', theme]">
|
||||
<router-link to="/dashboard/workplace">
|
||||
<img src="@/assets/images/logo.png">
|
||||
<h1>{{systemName}}</h1>
|
||||
</router-link>
|
||||
</div>
|
||||
<i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
|
||||
</a-layout-sider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import IMenu from './menu'
|
||||
import {mapState} from 'vuex'
|
||||
export default {
|
||||
name: 'SideMenu',
|
||||
components: {IMenu},
|
||||
props: {
|
||||
collapsible: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
collapsed: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
menuData: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'dark'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sideTheme() {
|
||||
return this.theme == 'light' ? this.theme : 'dark'
|
||||
},
|
||||
...mapState('setting', ['isMobile', 'systemName'])
|
||||
},
|
||||
methods: {
|
||||
onSelect (obj) {
|
||||
this.$emit('menuSelect', obj)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "index";
|
||||
</style>
|
||||
@ -0,0 +1,38 @@
|
||||
.shadow{
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
|
||||
}
|
||||
.side-menu{
|
||||
min-height: 100vh;
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
.logo{
|
||||
height: 64px;
|
||||
position: relative;
|
||||
line-height: 64px;
|
||||
padding-left: 24px;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
overflow: hidden;
|
||||
background-color: @layout-trigger-background;
|
||||
&.light{
|
||||
background-color: #fff;
|
||||
h1{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
h1{
|
||||
color: @menu-dark-highlight-color;
|
||||
font-size: 20px;
|
||||
margin: 0 0 0 12px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img{
|
||||
width: 32px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu{
|
||||
padding: 16px 0;
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div :class="['page-header', layout, pageWidth]">
|
||||
<div class="page-header-wide">
|
||||
<div class="breadcrumb">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item :key="index" v-for="(item, index) in breadcrumb">
|
||||
<span>{{item}}</span>
|
||||
</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
export default {
|
||||
name: 'PageHeader',
|
||||
props: {
|
||||
title: {
|
||||
type: [String, Boolean],
|
||||
required: false
|
||||
},
|
||||
breadcrumb: {
|
||||
type: Array,
|
||||
required: false
|
||||
},
|
||||
logo: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState('setting', ['layout', 'showPageTitle', 'pageWidth'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "index";
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
.page-header{
|
||||
background: @base-bg-color;
|
||||
padding: 16px 24px;
|
||||
&.head.fixed{
|
||||
margin: auto;
|
||||
max-width: 1400px;
|
||||
}
|
||||
.page-header-wide{
|
||||
.breadcrumb{
|
||||
margin: 0px 5px;
|
||||
}
|
||||
.detail{
|
||||
display: flex;
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.avatar {
|
||||
margin:0 24px 0 0;
|
||||
}
|
||||
.main{
|
||||
width: 100%;
|
||||
.title{
|
||||
font-size: 20px;
|
||||
color: @title-color;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
color: @text-color-second;
|
||||
}
|
||||
.extra{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="result">
|
||||
<div >
|
||||
<a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'" />
|
||||
</div>
|
||||
<div class="title" v-if="title">{{title}}</div>
|
||||
<div class="desc" v-if="description">{{description}}</div>
|
||||
<div class="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="action">
|
||||
<slot name="action"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Result',
|
||||
props: ['isSuccess', 'title', 'description']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.result{
|
||||
text-align: center;
|
||||
width: 72%;
|
||||
margin: 0 auto;
|
||||
.icon{
|
||||
font-size: 72px;
|
||||
line-height: 72px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.success {
|
||||
color: @success-color;
|
||||
}
|
||||
.error {
|
||||
color: @error-color;
|
||||
}
|
||||
.title{
|
||||
font-size: 24px;
|
||||
color: @title-color;
|
||||
font-weight: 500;
|
||||
line-height: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.desc{
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: @text-color-second;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.content{
|
||||
background-color: @background-color-light;
|
||||
padding: 24px 40px;
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
}
|
||||
.action{
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="setting-item">
|
||||
<h3 v-if="title" class="title">{{title}}</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'SettingItem',
|
||||
props: ['title']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.setting-item{
|
||||
margin-bottom: 24px;
|
||||
.title{
|
||||
font-size: 14px;
|
||||
color: @title-color;
|
||||
line-height: 22px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
module.exports = {
|
||||
messages: {
|
||||
CN: {
|
||||
theme: {
|
||||
title: '整体风格设置',
|
||||
light: '亮色菜单风格',
|
||||
dark: '暗色菜单风格',
|
||||
night: '深夜模式',
|
||||
color: '主题色'
|
||||
},
|
||||
navigate: {
|
||||
title: '导航设置',
|
||||
side: '侧边导航',
|
||||
head: '顶部导航',
|
||||
mix: '混合导航',
|
||||
content: {
|
||||
title: '内容区域宽度',
|
||||
fluid: '流式',
|
||||
fixed: '定宽'
|
||||
},
|
||||
fixedHeader: '固定Header',
|
||||
fixedSideBar: '固定侧边栏',
|
||||
},
|
||||
other: {
|
||||
title: '其他设置',
|
||||
weekMode: '色弱模式',
|
||||
multiPages: '多页签模式',
|
||||
hideSetting: '隐藏设置抽屉'
|
||||
},
|
||||
animate: {
|
||||
title: '页面切换动画',
|
||||
disable: '禁用动画',
|
||||
effect: '动画效果',
|
||||
direction: '动画方向'
|
||||
},
|
||||
alert: '拷贝配置后，直接覆盖文件 src/config/config.js 中的全部内容，然后重启即可。（注意：仅会拷贝与默认配置不同的项）',
|
||||
copy: '拷贝配置',
|
||||
save: '保存配置',
|
||||
reset: '重置配置',
|
||||
},
|
||||
TW: {
|
||||
theme: {
|
||||
title: '整體風格設置',
|
||||
light: '亮色菜單風格',
|
||||
dark: '暗色菜單風格',
|
||||
night: '深夜模式',
|
||||
color: '主題色'
|
||||
},
|
||||
navigate: {
|
||||
title: '導航設置',
|
||||
side: '側邊導航',
|
||||
head: '頂部導航',
|
||||
content: {
|
||||
title: '內容區域寬度',
|
||||
fluid: '流式',
|
||||
fixed: '定寬'
|
||||
},
|
||||
fixedHeader: '固定Header',
|
||||
fixedSideBar: '固定側邊欄',
|
||||
},
|
||||
other: {
|
||||
title: '其他設置',
|
||||
weekMode: '色弱模式',
|
||||
multiPages: '多頁簽模式',
|
||||
hideSetting: '隱藏設置抽屜'
|
||||
},
|
||||
animate: {
|
||||
title: '頁面切換動畫',
|
||||
disable: '禁用動畫',
|
||||
effect: '動畫效果',
|
||||
direction: '動畫方向'
|
||||
},
|
||||
alert: '拷貝配置后，直接覆蓋文件 src/config/config.js 中的全部內容，然後重啟即可。（注意：僅會拷貝與默認配置不同的項）',
|
||||
copy: '拷貝配置',
|
||||
save: '保存配置',
|
||||
reset: '重置配置',
|
||||
},
|
||||
US: {
|
||||
theme: {
|
||||
title: 'Page Style Setting',
|
||||
light: 'Light Style',
|
||||
dark: 'Dark Style',
|
||||
night: 'Night Style',
|
||||
color: 'Theme Color'
|
||||
},
|
||||
navigate: {
|
||||
title: 'Navigation Mode',
|
||||
side: 'Side Menu Layout',
|
||||
head: 'Top Menu Layout',
|
||||
mix: 'Mix Menu Layout',
|
||||
content: {
|
||||
title: 'Content Width',
|
||||
fluid: 'Fluid',
|
||||
fixed: 'Fixed'
|
||||
},
|
||||
fixedHeader: 'Fixed Header',
|
||||
fixedSideBar: 'Fixed SideBar',
|
||||
},
|
||||
other: {
|
||||
title: 'Other Setting',
|
||||
weekMode: 'Week Mode',
|
||||
multiPages: 'Multi Pages',
|
||||
hideSetting: 'Hide Setting Drawer'
|
||||
},
|
||||
animate: {
|
||||
title: 'Page Toggle Animation',
|
||||
disable: 'Disable',
|
||||
effect: 'Effect',
|
||||
direction: 'Direction'
|
||||
},
|
||||
alert: 'After copying the configuration code, directly cover all contents in the file src/config/config.js, then restart the server. (Note: only items that are different from the default configuration will be copied)',
|
||||
copy: 'Copy Setting',
|
||||
save: 'Save',
|
||||
reset: 'Reset',
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="standard-table">
|
||||
<div class="alert">
|
||||
<a-alert type="info" :show-icon="true" v-if="selectedRows">
|
||||
<div class="message" slot="message">
|
||||
已選擇 <a>{{selectedRows.length}}</a> 項 <a class="clear" @click="onClear">清空</a>
|
||||
<template v-for="(item, index) in needTotalList" >
|
||||
<div v-if="item.needTotal" :key="index">
|
||||
{{item.title}}總計
|
||||
<a>{{item.customRender ? item.customRender(item.total) : item.total}}</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</a-alert>
|
||||
</div>
|
||||
<a-table
|
||||
:bordered="bordered"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:rowKey="rowKey"
|
||||
:pagination="pagination"
|
||||
:expandedRowKeys="expandedRowKeys"
|
||||
:expandedRowRender="expandedRowRender"
|
||||
@change="onChange"
|
||||
:rowSelection="selectedRows ? {selectedRowKeys: selectedRowKeys, onChange: updateSelect} : undefined"
|
||||
:scroll="scroll"
|
||||
>
|
||||
<template slot-scope="text, record, index" :slot="slot" v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender') ">
|
||||
<slot :name="slot" v-bind="{text, record, index}"></slot>
|
||||
</template>
|
||||
<template :slot="slot" v-for="slot in Object.keys($slots)">
|
||||
<slot :name="slot"></slot>
|
||||
</template>
|
||||
<template slot-scope="record, index, indent, expanded" :slot="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''">
|
||||
<slot v-bind="{record, index, indent, expanded}" :name="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''"></slot>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'StandardTable',
|
||||
props: {
|
||||
// bordered: Boolean,
|
||||
loading: [Boolean, Object],
|
||||
columns: Array,
|
||||
dataSource: Array,
|
||||
rowKey: {
|
||||
type: [String, Function],
|
||||
default: 'key'
|
||||
},
|
||||
scroll: Object,
|
||||
pagination: [Boolean, Object],
|
||||
selectedRows: Array,
|
||||
expandedRowKeys: Array,
|
||||
expandedRowRender: Function
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
bordered: true,
|
||||
needTotalList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateSelect (selectedRowKeys, selectedRows) {
|
||||
this.$emit('update:selectedRows', selectedRows)
|
||||
this.$emit('selectedRowChange', selectedRowKeys, selectedRows)
|
||||
},
|
||||
initTotalList (columns) {
|
||||
const totalList = columns.filter(item => item.needTotal)
|
||||
.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: 0
|
||||
}
|
||||
})
|
||||
return totalList
|
||||
},
|
||||
onClear() {
|
||||
this.updateSelect([], [])
|
||||
this.$emit('clear')
|
||||
},
|
||||
onChange(pagination, filters, sorter, {currentDataSource}) {
|
||||
this.$emit('change', pagination, filters, sorter, {currentDataSource})
|
||||
},
|
||||
onShowSizeChange(current, size){
|
||||
this.$emit('showSizeChange', current, size)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.needTotalList = this.initTotalList(this.columns)
|
||||
},
|
||||
watch: {
|
||||
selectedRows (selectedRows) {
|
||||
this.needTotalList = this.needTotalList.map(item => {
|
||||
return {
|
||||
...item,
|
||||
total: selectedRows.reduce((sum, val) => {
|
||||
let v
|
||||
try{
|
||||
v = val[item.dataIndex] ? val[item.dataIndex] : eval(`val.${item.dataIndex}`);
|
||||
}catch(_){
|
||||
v = val[item.dataIndex];
|
||||
}
|
||||
v = !isNaN(parseFloat(v)) ? parseFloat(v) : 0;
|
||||
return sum + v
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectedRowKeys() {
|
||||
return this.selectedRows.map(record => {
|
||||
return (typeof this.rowKey === 'function') ? this.rowKey(record) : record[this.rowKey]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.standard-table{
|
||||
.alert{
|
||||
margin-bottom: 16px;
|
||||
.message{
|
||||
a{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.clear{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="action-columns" ref="root">
|
||||
<a-popover v-model="visible" placement="bottomRight" trigger="click" :get-popup-container="() => $refs.root">
|
||||
<div slot="title">
|
||||
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" class="check-all" />列展示
|
||||
<a-button @click="resetColumns" style="float: right" type="link" size="small">重置</a-button>
|
||||
</div>
|
||||
<a-list style="width: 100%" size="small" :key="i" v-for="(col, i) in columns" slot="content">
|
||||
<a-list-item>
|
||||
<a-checkbox v-model="col.visible" @change="e => onCheckChange(e, col)"/>
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<template slot="actions">
|
||||
<a-tooltip title="固定在列头" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
|
||||
<a-icon :class="['left', {active: col.fixed === 'left'}]" @click="fixColumn('left', col)" type="vertical-align-top" />
|
||||
</a-tooltip>
|
||||
<a-tooltip title="固定在列尾" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
|
||||
<a-icon :class="['right', {active: col.fixed === 'right'}]" @click="fixColumn('right', col)" type="vertical-align-bottom" />
|
||||
</a-tooltip>
|
||||
<a-tooltip title="添加搜索" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
|
||||
<a-icon :class="{active: col.searchAble}" @click="setSearch(col)" type="search" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
<a-icon class="action" type="setting" />
|
||||
</a-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cloneDeep from 'lodash.clonedeep'
|
||||
|
||||
export default {
|
||||
name: 'ActionColumns',
|
||||
props: ['columns', 'visibleColumns'],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
indeterminate: false,
|
||||
checkAll: true,
|
||||
checkedCounts: this.columns.length,
|
||||
backColumns: cloneDeep(this.columns)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkedCounts(val) {
|
||||
this.checkAll = val === this.columns.length
|
||||
this.indeterminate = val > 0 && val < this.columns.length
|
||||
},
|
||||
columns(newVal, oldVal) {
|
||||
if (newVal != oldVal) {
|
||||
this.checkedCounts = newVal.length
|
||||
this.formatColumns(newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.formatColumns(this.columns)
|
||||
},
|
||||
methods: {
|
||||
onCheckChange(e, col) {
|
||||
if (!col.visible) {
|
||||
this.checkedCounts -= 1
|
||||
} else {
|
||||
this.checkedCounts += 1
|
||||
}
|
||||
},
|
||||
fixColumn(fixed, col) {
|
||||
if (fixed !== col.fixed) {
|
||||
this.$set(col, 'fixed', fixed)
|
||||
} else {
|
||||
this.$set(col, 'fixed', undefined)
|
||||
}
|
||||
},
|
||||
setSearch(col) {
|
||||
this.$set(col, 'searchAble', !col.searchAble)
|
||||
if (!col.searchAble && col.search) {
|
||||
this.resetSearch(col)
|
||||
}
|
||||
},
|
||||
resetSearch(col) {
|
||||
// col.search.value = col.dataType === 'boolean' ? false : undefined
|
||||
col.search.value = undefined
|
||||
col.search.backup = undefined
|
||||
},
|
||||
resetColumns() {
|
||||
const {columns, backColumns} = this
|
||||
let counts = columns.length
|
||||
backColumns.forEach((back, index) => {
|
||||
const column = columns[index]
|
||||
column.visible = back.visible === undefined || back.visible
|
||||
if (!column.visible) {
|
||||
counts -= 1
|
||||
}
|
||||
if (back.fixed !== undefined) {
|
||||
column.fixed = back.fixed
|
||||
} else {
|
||||
this.$set(column, 'fixed', undefined)
|
||||
}
|
||||
this.$set(column, 'searchAble', back.searchAble)
|
||||
// column.searchAble = back.searchAble
|
||||
this.resetSearch(column)
|
||||
})
|
||||
this.checkedCounts = counts
|
||||
this.visible = false
|
||||
this.$emit('reset', this.getConditions(columns))
|
||||
},
|
||||
onCheckAllChange(e) {
|
||||
if (e.target.checked) {
|
||||
this.checkedCounts = this.columns.length
|
||||
this.columns.forEach(col => col.visible = true)
|
||||
} else {
|
||||
this.checkedCounts = 0
|
||||
this.columns.forEach(col => col.visible = false)
|
||||
}
|
||||
},
|
||||
getConditions(columns) {
|
||||
const conditions = {}
|
||||
columns.filter(item => item.search.value !== undefined && item.search.value !== '' && item.search.value !== null)
|
||||
.forEach(col => {
|
||||
conditions[col.dataIndex] = col.search.value
|
||||
})
|
||||
return conditions
|
||||
},
|
||||
formatColumns(columns) {
|
||||
for (let col of columns) {
|
||||
if (col.visible === undefined) {
|
||||
this.$set(col, 'visible', true)
|
||||
}
|
||||
if (!col.visible) {
|
||||
this.checkedCounts -= 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.action-columns{
|
||||
display: inline-block;
|
||||
.check-all{
|
||||
margin-right: 8px;
|
||||
}
|
||||
.left,.right{
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.active{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="action-size" ref="root">
|
||||
<a-tooltip title="密度">
|
||||
<a-dropdown placement="bottomCenter" :trigger="['click']" :get-popup-container="() => $refs.root">
|
||||
<a-icon class="action" type="column-height" />
|
||||
<a-menu :selected-keys="[value]" slot="overlay" @click="onClick">
|
||||
<a-menu-item key="default">
|
||||
默认
|
||||
</a-menu-item>
|
||||
<a-menu-item key="middle">
|
||||
中等
|
||||
</a-menu-item>
|
||||
<a-menu-item key="small">
|
||||
紧密
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ActionSize',
|
||||
props: ['value'],
|
||||
inject: ['table'],
|
||||
data() {
|
||||
return {
|
||||
selectedKeys: ['middle']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick({key}) {
|
||||
this.$emit('input', key)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.action-size{
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div ref="table" :id="id" class="advanced-table">
|
||||
<a-spin :spinning="loading">
|
||||
<div :class="['header-bar', size]">
|
||||
<div class="title">
|
||||
<template v-if="title">{{title}}</template>
|
||||
<slot v-else-if="$slots.title" name="title"></slot>
|
||||
<template v-else>高级表格</template>
|
||||
</div>
|
||||
<div class="search">
|
||||
<search-area :format-conditions="formatConditions" @change="onSearchChange" :columns="columns" >
|
||||
<template :slot="slot" v-for="slot in slots">
|
||||
<slot :name="slot"></slot>
|
||||
</template>
|
||||
</search-area>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<a-tooltip title="刷新">
|
||||
<a-icon @click="refresh" class="action" :type="loading ? 'loading' : 'reload'" />
|
||||
</a-tooltip>
|
||||
<action-size v-model="sSize" class="action" />
|
||||
<a-tooltip title="列配置">
|
||||
<action-columns :columns="columns" @reset="onColumnsReset" class="action">
|
||||
<template :slot="slot" v-for="slot in slots">
|
||||
<slot :name="slot"></slot>
|
||||
</template>
|
||||
</action-columns>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="全屏">
|
||||
<a-icon @click="toggleScreen" class="action" :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'" />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<a-table
|
||||
v-bind="{...$props, columns: visibleColumns, title: undefined, loading: false}"
|
||||
:size="sSize"
|
||||
@expandedRowsChange="onExpandedRowsChange"
|
||||
@change="onChange"
|
||||
@expand="onExpand"
|
||||
>
|
||||
<template slot-scope="text, record, index" :slot="slot" v-for="slot in scopedSlots ">
|
||||
<slot :name="slot" v-bind="{text, record, index}"></slot>
|
||||
</template>
|
||||
<template :slot="slot" v-for="slot in slots">
|
||||
<slot :name="slot"></slot>
|
||||
</template>
|
||||
<template slot-scope="record, index, indent, expanded" :slot="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''">
|
||||
<slot v-bind="{record, index, indent, expanded}" :name="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''"></slot>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-spin>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActionSize from '@/components/table/advance/ActionSize'
|
||||
import ActionColumns from '@/components/table/advance/ActionColumns'
|
||||
import SearchArea from '@/components/table/advance/SearchArea'
|
||||
export default {
|
||||
name: 'AdvanceTable',
|
||||
components: {SearchArea, ActionColumns, ActionSize},
|
||||
props: {
|
||||
tableLayout: String,
|
||||
bordered: Boolean,
|
||||
childrenColumnName: {type: String, default: 'children'},
|
||||
columns: Array,
|
||||
components: Object,
|
||||
dataSource: Array,
|
||||
defaultExpandAllRows: Array[String],
|
||||
expandedRowKeys: Array[String],
|
||||
expandedRowRender: Function,
|
||||
expandIcon: Function,
|
||||
expandRowByClick: Boolean,
|
||||
expandIconColumnIndex: Number,
|
||||
footer: Function,
|
||||
indentSize: Number,
|
||||
loading: Boolean,
|
||||
locale: Object,
|
||||
pagination: [Object, Boolean],
|
||||
rowClassName: Function,
|
||||
rowKey: [String, Function],
|
||||
rowSelection: Object,
|
||||
scroll: Object,
|
||||
showHeader: {type: Boolean, default: true},
|
||||
size: String,
|
||||
title: String,
|
||||
customHeaderRow: Function,
|
||||
customRow: Function,
|
||||
getPopupContainer: Function,
|
||||
transformCellText: Function,
|
||||
formatConditions: Boolean
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
table: this
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: `${new Date().getTime()}-${Math.floor(Math.random() * 10)}`,
|
||||
sSize: this.size || 'default',
|
||||
fullScreen: false,
|
||||
conditions: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
slots() {
|
||||
return Object.keys(this.$slots).filter(slot => slot !== 'title')
|
||||
},
|
||||
scopedSlots() {
|
||||
return Object.keys(this.$scopedSlots).filter(slot => slot !== 'expandedRowRender' && slot !== 'title')
|
||||
},
|
||||
visibleColumns(){
|
||||
return this.columns.filter(col => col.visible)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.addListener()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.removeListener()
|
||||
},
|
||||
methods: {
|
||||
refresh() {
|
||||
this.$emit('refresh', this.conditions)
|
||||
},
|
||||
onSearchChange(conditions, searchOptions) {
|
||||
this.conditions = conditions
|
||||
this.$emit('search', conditions, searchOptions)
|
||||
},
|
||||
toggleScreen() {
|
||||
if (this.fullScreen) {
|
||||
this.outFullScreen()
|
||||
} else {
|
||||
this.inFullScreen()
|
||||
}
|
||||
},
|
||||
inFullScreen() {
|
||||
const el = this.$refs.table
|
||||
el.classList.add('beauty-scroll')
|
||||
if (el.requestFullscreen) {
|
||||
el.requestFullscreen()
|
||||
return true
|
||||
} else if (el.webkitRequestFullScreen) {
|
||||
el.webkitRequestFullScreen()
|
||||
return true
|
||||
} else if (el.mozRequestFullScreen) {
|
||||
el.mozRequestFullScreen()
|
||||
return true
|
||||
} else if (el.msRequestFullscreen) {
|
||||
el.msRequestFullscreen()
|
||||
return true
|
||||
}
|
||||
this.$message.warn('对不起，您的浏览器不支持全屏模式')
|
||||
el.classList.remove('beauty-scroll')
|
||||
return false
|
||||
},
|
||||
outFullScreen() {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
this.$refs.table.classList.remove('beauty-scroll')
|
||||
},
|
||||
onColumnsReset(conditions) {
|
||||
this.$emit('reset', conditions)
|
||||
},
|
||||
onExpandedRowsChange(expandedRows) {
|
||||
this.$emit('expandedRowsChange', expandedRows)
|
||||
},
|
||||
onChange(pagination, filters, sorter, options) {
|
||||
this.$emit('change', pagination, filters, sorter, options)
|
||||
},
|
||||
onExpand(expanded, record) {
|
||||
this.$emit('expand', expanded, record)
|
||||
},
|
||||
addListener() {
|
||||
document.addEventListener('fullscreenchange', this.fullScreenListener)
|
||||
document.addEventListener('webkitfullscreenchange', this.fullScreenListener)
|
||||
document.addEventListener('mozfullscreenchange', this.fullScreenListener)
|
||||
document.addEventListener('msfullscreenchange', this.fullScreenListener)
|
||||
},
|
||||
removeListener() {
|
||||
document.removeEventListener('fullscreenchange', this.fullScreenListener)
|
||||
document.removeEventListener('webkitfullscreenchange', this.fullScreenListener)
|
||||
document.removeEventListener('mozfullscreenchange', this.fullScreenListener)
|
||||
document.removeEventListener('msfullscreenchange', this.fullScreenListener)
|
||||
},
|
||||
fullScreenListener(e) {
|
||||
if (e.target.id === this.id) {
|
||||
this.fullScreen = !this.fullScreen
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.advanced-table{
|
||||
overflow-y: auto;
|
||||
background-color: @component-background;
|
||||
.header-bar{
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
&.middle{
|
||||
padding: 12px 16px;
|
||||
}
|
||||
&.small{
|
||||
padding: 8px 12px;
|
||||
border: 1px solid @border-color;
|
||||
border-bottom: 0;
|
||||
.title{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
transition: all 0.3s;
|
||||
font-size: 18px;
|
||||
color: @title-color;
|
||||
font-weight: 700;
|
||||
}
|
||||
.search{
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
margin: 0 24px;
|
||||
}
|
||||
.actions{
|
||||
text-align: right;
|
||||
font-size: 17px;
|
||||
color: @text-color;
|
||||
.action{
|
||||
margin: 0 8px;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<div class="search-area" ref="root">
|
||||
<div class="select-root" ref="selectRoot"></div>
|
||||
<div class="search-item" :key="index" v-for="(col, index) in searchCols">
|
||||
<div v-if="col.dataType === 'boolean'" :class="['title', {active: col.search.value !== undefined}]">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small"
|
||||
:checked-children="(col.search.switchOptions && col.search.switchOptions.checkedText) || '是'"
|
||||
:un-checked-children="(col.search.switchOptions && col.search.switchOptions.uncheckedText) || '否'"
|
||||
/>
|
||||
<a-icon v-if="col.search.value !== undefined" class="close" @click="e => onCloseClick(e, col)" type="close-circle" theme="filled" />
|
||||
</div>
|
||||
<div v-else-if="col.dataType === 'time'" :class="['title', {active: col.search.value}]">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<a-time-picker :format="col.search.format" v-model="col.search.value" placeholder="选择时间" @change="(time, timeStr) => onCalendarChange(time, timeStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="time-picker" size="small" :get-popup-container="() => $refs.root"/>
|
||||
</div>
|
||||
<div v-else-if="col.dataType === 'date'" :class="['title', {active: col.search.value}]">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<a-date-picker :format="col.search.format" v-model="col.search.value" @change="onDateChange(col)" class="date-picker" size="small" :getCalendarContainer="() => $refs.root"/>
|
||||
</div>
|
||||
<div v-else-if="col.dataType === 'datetime'" class="title datetime active">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<a-date-picker :format="col.search.format" v-model="col.search.value" @change="(date, dateStr) => onCalendarChange(date, dateStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="datetime-picker" size="small" show-time :getCalendarContainer="() => $refs.root"/>
|
||||
</div>
|
||||
<div v-else-if="col.dataType === 'select'" :class="['title', {active: col.search.value !== undefined}]">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<a-select :allowClear="true" :options="col.search.selectOptions" v-model="col.search.value" placeholder="请选择..." @change="onSelectChange(col)" class="select" slot="content" size="small" :get-popup-container="() => $refs.selectRoot">
|
||||
</a-select>
|
||||
</div>
|
||||
<div v-else :class="['title', {active: col.search.value}]">
|
||||
<a-popover @visibleChange="onVisibleChange(col, index)" v-model="col.search.visible" placement="bottom" :trigger="['click']" :get-popup-container="() => $refs.root">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<div class="value " v-if="col.search.value">: {{col.search.format && typeof col.search.format === 'function' ? col.search.format(col.search.value) : col.search.value}}</div>
|
||||
<a-icon v-if="!col.search.value" class="icon-down" type="down"/>
|
||||
<div class="operations" slot="content">
|
||||
<a-button @click="onCancel(col)" class="btn" size="small" type="link">取消</a-button>
|
||||
<a-button @click="onConfirm(col)" class="btn" size="small" type="primary">确认</a-button>
|
||||
</div>
|
||||
<div class="search-overlay" slot="title">
|
||||
<a-input :id="`${searchIdPrefix}${index}`" :allow-clear="true" @keyup.esc="onCancel(col)" @keyup.enter="onConfirm(col)" v-model="col.search.value" size="small" />
|
||||
</div>
|
||||
</a-popover>
|
||||
<a-icon v-if="col.search.value" @click="e => onCloseClick(e, col)" class="close" type="close-circle" theme="filled"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fastEqual from 'fast-deep-equal'
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'SearchArea',
|
||||
props: ['columns', 'formatConditions'],
|
||||
inject: ['table'],
|
||||
created() {
|
||||
this.formatColumns(this.columns)
|
||||
},
|
||||
watch: {
|
||||
columns(newVal, oldVal) {
|
||||
if (newVal != oldVal) {
|
||||
this.formatColumns(newVal)
|
||||
}
|
||||
},
|
||||
searchCols(newVal, oldVal) {
|
||||
if (newVal.length != oldVal.length) {
|
||||
const newConditions = this.getConditions(newVal)
|
||||
const newSearchOptions = this.getSearchOptions(newVal)
|
||||
if (!fastEqual(newConditions, this.conditions)) {
|
||||
this.conditions = newConditions
|
||||
this.searchOptions = newSearchOptions
|
||||
this.$emit('change', this.conditions, this.searchOptions)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
conditions: {},
|
||||
searchOptions: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
searchCols() {
|
||||
return this.columns.filter(item => item.searchAble)
|
||||
},
|
||||
searchIdPrefix() {
|
||||
return this.table.id + '-ipt-'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCloseClick(e, col) {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
col.search.value = undefined
|
||||
const {backup, value} = col.search
|
||||
if (backup !== value) {
|
||||
this.backupAndEmitChange(col)
|
||||
}
|
||||
},
|
||||
onCancel(col) {
|
||||
col.search.value = col.search.backup
|
||||
col.search.visible = false
|
||||
},
|
||||
onConfirm(col) {
|
||||
const {backup, value} = col.search
|
||||
col.search.visible = false
|
||||
if (backup !== value) {
|
||||
this.backupAndEmitChange(col)
|
||||
}
|
||||
},
|
||||
onSwitchChange(col) {
|
||||
const {backup, value} = col.search
|
||||
if (backup !== value) {
|
||||
this.backupAndEmitChange(col)
|
||||
}
|
||||
},
|
||||
onSelectChange(col) {
|
||||
this.backupAndEmitChange(col)
|
||||
},
|
||||
onCalendarOpenChange(open, col) {
|
||||
col.search.visible = open
|
||||
const {momentEqual, backupAndEmitChange} = this
|
||||
const {value, backup, format} = col.search
|
||||
if (!open && !momentEqual(value, backup, format)) {
|
||||
backupAndEmitChange(col, moment(value))
|
||||
}
|
||||
},
|
||||
onCalendarChange(date, dateStr, col) {
|
||||
const {momentEqual, backupAndEmitChange} = this
|
||||
const {value, backup, format} = col.search
|
||||
if (!col.search.visible && !momentEqual(value, backup, format)) {
|
||||
backupAndEmitChange(col, moment(value))
|
||||
}
|
||||
},
|
||||
onDateChange(col) {
|
||||
const {momentEqual, backupAndEmitChange} = this
|
||||
const {value, backup, format} = col.search
|
||||
if (!momentEqual(value, backup, format)) {
|
||||
backupAndEmitChange(col, moment(value))
|
||||
}
|
||||
},
|
||||
getFormat(col) {
|
||||
if (col.search && col.search.format) {
|
||||
return col.search.format
|
||||
}
|
||||
const dataType = col.dataType
|
||||
switch(dataType) {
|
||||
case 'time': return 'HH:mm:ss'
|
||||
case 'date': return 'YYYY-MM-DD'
|
||||
case 'datetime': return 'YYYY-MM-DD HH:mm:ss'
|
||||
default: return undefined
|
||||
}
|
||||
},
|
||||
backupAndEmitChange(col, backValue = col.search.value) {
|
||||
const {getConditions, getSearchOptions} = this
|
||||
col.search.backup = backValue
|
||||
this.conditions = getConditions(this.searchCols)
|
||||
this.searchOptions = getSearchOptions(this.searchCols)
|
||||
this.$emit('change', this.conditions, this.searchOptions)
|
||||
},
|
||||
getConditions(columns) {
|
||||
const conditions = {}
|
||||
columns.filter(item => item.search.value !== undefined && item.search.value !== '' && item.search.value !== null)
|
||||
.forEach(col => {
|
||||
const {value, format} = col.search
|
||||
if (this.formatConditions && format) {
|
||||
if (typeof format === 'function') {
|
||||
conditions[col.dataIndex] = format(col.search.value)
|
||||
} else if (typeof format === 'string' && value.constructor.name === 'Moment') {
|
||||
conditions[col.dataIndex] = value.format(format)
|
||||
} else {
|
||||
conditions[col.dataIndex] = value
|
||||
}
|
||||
} else {
|
||||
conditions[col.dataIndex] = value
|
||||
}
|
||||
})
|
||||
return conditions
|
||||
},
|
||||
getSearchOptions(columns) {
|
||||
return columns.filter(item => item.search.value !== undefined && item.search.value !== '' && item.search.value !== null)
|
||||
.map(({dataIndex, search}) => ({field: dataIndex, value: search.value, format: search.format}))
|
||||
},
|
||||
onVisibleChange(col, index) {
|
||||
if (!col.search.visible) {
|
||||
col.search.value = col.search.backup
|
||||
} else {
|
||||
let input = document.getElementById(`${this.searchIdPrefix}${index}`)
|
||||
if (input) {
|
||||
setTimeout(() => {input.focus()}, 0)
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
input = document.getElementById(`${this.searchIdPrefix}${index}`)
|
||||
input.focus()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
momentEqual(target, source, format) {
|
||||
if (target === source) {
|
||||
return true
|
||||
} else if (target && source && target.format(format) === source.format(format)) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
formatColumns(columns) {
|
||||
columns.forEach(item => {
|
||||
this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.search-area{
|
||||
.select-root{
|
||||
text-align: left;
|
||||
}
|
||||
margin: -4px 0;
|
||||
.search-item{
|
||||
margin: 4px 4px;
|
||||
display: inline-block;
|
||||
.title{
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
.close{
|
||||
color: @text-color-second;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
:hover{
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
.switch{
|
||||
margin-left: 4px;
|
||||
}
|
||||
.time-picker{
|
||||
margin-left: 4px;
|
||||
width: 96px;
|
||||
}
|
||||
.date-picker{
|
||||
margin-left: 4px;
|
||||
width: 120px;
|
||||
}
|
||||
.datetime-picker{
|
||||
margin-left: 4px;
|
||||
width: 195px;
|
||||
}
|
||||
.value{
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
flex:1;
|
||||
vertical-align: middle;
|
||||
max-width: 144px;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.active{
|
||||
background-color: @layout-bg-color;
|
||||
}
|
||||
}
|
||||
.icon-down{
|
||||
vertical-align: middle;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.search-overlay{
|
||||
padding: 8px 0px;
|
||||
text-align: center;
|
||||
}
|
||||
.select{
|
||||
margin-left: 4px;
|
||||
max-width: 144px;
|
||||
min-width: 96px;
|
||||
text-align: left;
|
||||
}
|
||||
.operations{
|
||||
display: flex;
|
||||
margin: -6px 0;
|
||||
justify-content: space-between;
|
||||
.btn{
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,2 @@
|
||||
import AdvanceTable from './AdvanceTable'
|
||||
export default AdvanceTable
|
||||
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="task-group">
|
||||
<div class="task-head">
|
||||
<h3 class="title"><span v-if="count">{{count}}</span>{{title}}</h3>
|
||||
<div class="actions" style="float: right">
|
||||
<a-icon class="add" type="plus" draggable="true"/>
|
||||
<a-icon class="more" style="margin-left: 8px" type="ellipsis" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-content">
|
||||
<draggable :options="dragOptions">
|
||||
<slot></slot>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Draggable from 'vuedraggable'
|
||||
|
||||
const dragOptions = {
|
||||
sort: true,
|
||||
scroll: true,
|
||||
scrollSpeed: 2,
|
||||
animation: 150,
|
||||
ghostClass: 'dragable-ghost',
|
||||
chosenClass: 'dragable-chose',
|
||||
dragClass: 'dragable-drag'
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'TaskGroup',
|
||||
components: {Draggable},
|
||||
props: ['title', 'group'],
|
||||
data () {
|
||||
return {
|
||||
dragOptions: {...dragOptions, group: this.group}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
count () {
|
||||
return this.$slots.default.length
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.task-group{
|
||||
width: 33.33%;
|
||||
padding: 8px 8px;
|
||||
background-color: @background-color-light;
|
||||
border-radius: 6px;
|
||||
border: 1px solid @shadow-color;
|
||||
.task-head{
|
||||
margin-bottom: 8px;
|
||||
.title{
|
||||
display: inline-block;
|
||||
span{
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
margin: 0 8px;
|
||||
font-size: 12px;
|
||||
padding: 2px 6px;
|
||||
background-color: @base-bg-color;
|
||||
}
|
||||
}
|
||||
.actions{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
i{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<a-card class="task-item" type="inner">
|
||||
{{content}}
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TaskItem',
|
||||
props: ['content']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.task-item{
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 1px 1px @shadow-color;
|
||||
border-radius: 6px;
|
||||
& :hover{
|
||||
cursor: move;
|
||||
box-shadow: 0 1px 2px @shadow-color;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div
|
||||
:class="['step-item', link ? 'linkable' : null]"
|
||||
@click="go"
|
||||
>
|
||||
<span :style="titleStyle">{{title}}</span>
|
||||
<a-icon v-if="icon" :style="iconStyle" :type="icon" />
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const Group = {
|
||||
name: 'AStepItemGroup',
|
||||
props: {
|
||||
align: {
|
||||
type: String,
|
||||
default: 'center',
|
||||
validator(value) {
|
||||
return ['left', 'center', 'right'].indexOf(value) != -1
|
||||
}
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
return h(
|
||||
'div',
|
||||
{attrs: {style: `text-align: ${this.align}; margin-top: 8px`}},
|
||||
[h('div', {attrs: {style: 'text-align: left; display: inline-block;'}}, [this.$slots.default])]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'AStepItem',
|
||||
Group: Group,
|
||||
props: ['title', 'icon', 'link', 'titleStyle', 'iconStyle'],
|
||||
methods: {
|
||||
go () {
|
||||
const link = this.link
|
||||
if (link) {
|
||||
this.$router.push(link)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step-item{
|
||||
cursor: pointer;
|
||||
}
|
||||
:global{
|
||||
.ant-steps-item-process{
|
||||
.linkable{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="avatar-list">
|
||||
<slot>
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AAvatar from 'ant-design-vue/es/avatar/Avatar'
|
||||
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
|
||||
const Item = {
|
||||
name: 'AvatarListItem',
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'small'
|
||||
},
|
||||
src: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
tips: {
|
||||
type: String,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderAvatar (h, size, src) {
|
||||
return h(AAvatar, {props: {size: size, src: src}}, [])
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
const avatar = this.renderAvatar(h, this.$props.size, this.$props.src)
|
||||
return h(
|
||||
'li',
|
||||
{class: 'avatar-item'},
|
||||
[this.$props.tips ? h(ATooltip, {props: {title: this.$props.tips}}, [avatar]) : avatar]
|
||||
)
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'AvatarList',
|
||||
Item: Item
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.avatar-list {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-size: 0;
|
||||
.avatar-item {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-left: -8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
:global {
|
||||
.ant-avatar {
|
||||
border: 1px solid #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div :class="['detail-list', size === 'small' ? 'small' : 'large', layout === 'vertical' ? 'vertical': 'horizontal']">
|
||||
<div v-if="title" class="title">{{title}}</div>
|
||||
<a-row>
|
||||
<slot></slot>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ACol from 'ant-design-vue/es/grid/Col'
|
||||
const Item = {
|
||||
name: 'DetailListItem',
|
||||
props: {
|
||||
term: {
|
||||
type: String,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
inject: {
|
||||
col: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderTerm (h, term) {
|
||||
return term ? h(
|
||||
'div',
|
||||
{
|
||||
attrs: {
|
||||
class: 'term'
|
||||
}
|
||||
},
|
||||
[term]
|
||||
) : null
|
||||
},
|
||||
renderContent (h, content) {
|
||||
return h(
|
||||
'div',
|
||||
{
|
||||
attrs: {
|
||||
class: 'content'
|
||||
}
|
||||
},
|
||||
[content]
|
||||
)
|
||||
}
|
||||
},
|
||||
render (h) {
|
||||
const term = this.renderTerm(h, this.$props.term)
|
||||
const content = this.renderContent(h, this.$slots.default)
|
||||
return h(
|
||||
ACol,
|
||||
{
|
||||
props: responsive[this.col]
|
||||
},
|
||||
[term, content]
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const responsive = {
|
||||
1: { xs: 24 },
|
||||
2: { xs: 24, sm: 12 },
|
||||
3: { xs: 24, sm: 12, md: 8 },
|
||||
4: { xs: 24, sm: 12, md: 6 }
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'DetailList',
|
||||
Item: Item,
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
col: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 3
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'large'
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'horizontal'
|
||||
}
|
||||
},
|
||||
provide () {
|
||||
return {
|
||||
col: this.col > 4 ? 4 : this.col
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.detail-list{
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: @title-color;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.term {
|
||||
// Line-height is 22px IE dom height will calculate error
|
||||
line-height: 20px;
|
||||
padding-bottom: 16px;
|
||||
margin-right: 8px;
|
||||
color: @title-color;
|
||||
white-space: nowrap;
|
||||
display: table-cell;
|
||||
&:after {
|
||||
content: ':';
|
||||
margin: 0 8px 0 2px;
|
||||
position: relative;
|
||||
top: -0.5px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
line-height: 22px;
|
||||
width: 100%;
|
||||
padding-bottom: 16px;
|
||||
color: @text-color;
|
||||
display: table-cell;
|
||||
}
|
||||
&.small{
|
||||
.title{
|
||||
font-size: 14px;
|
||||
color: @text-color;
|
||||
font-weight: normal;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.term,.content{
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
&.large{
|
||||
.term,.content{
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
&.vertical{
|
||||
.term {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.term,.content{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div >
|
||||
<div :class="['mask', visible ? 'open' : 'close']" @click="close"></div>
|
||||
<div :class="['drawer', placement, visible ? 'open' : 'close']">
|
||||
<div ref="drawer" class="content beauty-scroll">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-if="showHandler" :class="['handler-container', placement, visible ? 'open' : 'close']" ref="handler" @click="toggle">
|
||||
<slot v-if="$slots.handler" name="handler"></slot>
|
||||
<div v-else class="handler">
|
||||
<a-icon :type="visible ? 'close' : 'bars'" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Drawer',
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
model: {
|
||||
prop: 'visible',
|
||||
event: 'change'
|
||||
},
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
placement: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'left'
|
||||
},
|
||||
showHandler: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open () {
|
||||
this.$emit('change', true)
|
||||
},
|
||||
close () {
|
||||
this.$emit('change', false)
|
||||
},
|
||||
toggle () {
|
||||
this.$emit('change', !this.visible)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mask{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
background-color: @shadow-color;
|
||||
transition: all 0.5s;
|
||||
z-index: 100;
|
||||
&.open{
|
||||
display: inline-block;
|
||||
}
|
||||
&.close{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.drawer{
|
||||
position: fixed;
|
||||
transition: all 0.5s;
|
||||
height: 100vh;
|
||||
z-index: 100;
|
||||
&.left{
|
||||
left: 0px;
|
||||
&.open{
|
||||
.content{
|
||||
box-shadow: 2px 0 8px @shadow-color;
|
||||
}
|
||||
}
|
||||
&.close{
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
right: 0px;
|
||||
.content{
|
||||
float: right;
|
||||
}
|
||||
&.open{
|
||||
.content{
|
||||
box-shadow: -2px 0 8px @shadow-color;
|
||||
}
|
||||
}
|
||||
&.close{
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
display: inline-block;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.handler-container{
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
top: 200px;
|
||||
z-index: 100;
|
||||
.handler {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-color: @base-bg-color;
|
||||
font-size: 26px;
|
||||
box-shadow: 0 2px 8px @shadow-color;
|
||||
line-height: 40px;
|
||||
}
|
||||
&.left{
|
||||
right: -40px;
|
||||
.handler{
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
}
|
||||
&.right{
|
||||
left: -40px;
|
||||
.handler{
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<div style="float: left">
|
||||
<slot name="extra"></slot>
|
||||
</div>
|
||||
<div style="float: right">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FooterToolBar'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.toolbar{
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 -1px 2px @shadow-color;
|
||||
background: @base-bg-color;
|
||||
border-top: 1px solid @border-color-split;
|
||||
padding: 12px 24px;
|
||||
z-index: 9;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div class="head-info">
|
||||
<span>{{title}}</span>
|
||||
<p>{{content}}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeadInfo',
|
||||
props: ['title', 'content', 'bordered']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.head-info{
|
||||
text-align: center;
|
||||
padding: 0 24px;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
span{
|
||||
color: @text-color-second;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
p{
|
||||
color: @text-color;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<a-checkable-tag @change="$emit('click')" class="tag-default" v-model="checked">
|
||||
<slot></slot>
|
||||
</a-checkable-tag>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TagSelectOption',
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'default'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
checked: false,
|
||||
isTagSelectOption: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tag-default{
|
||||
font-size: 14px;
|
||||
padding: 0 8px;
|
||||
height: auto;
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<transition
|
||||
v-if="!disabled"
|
||||
:enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`"
|
||||
:leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`"
|
||||
>
|
||||
<slot></slot>
|
||||
</transition>
|
||||
<div v-else><slot></slot></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {preset as animates} from '@/config/default/animate.config'
|
||||
|
||||
export default {
|
||||
name: 'PageToggleTransition',
|
||||
props: {
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
animate: {
|
||||
type: String,
|
||||
validator(value) {
|
||||
return animates.findIndex(item => item.name == value) != -1
|
||||
},
|
||||
default: 'bounce'
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
validator(value) {
|
||||
return ['x', 'y', 'left', 'right', 'up', 'down', 'downLeft', 'upRight', 'downRight', 'upLeft', 'downBig',
|
||||
'upBig', 'downLeft', 'downRight', 'topRight', 'bottomLeft', 'topLeft', 'bottomRight', 'default'].indexOf(value) > -1
|
||||
}
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
enterAnimate() {
|
||||
return this.activeClass(false)
|
||||
},
|
||||
leaveAnimate() {
|
||||
return this.activeClass(true)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
activeClass(isLeave) {
|
||||
let animate = animates.find(item => this.animate == item.name)
|
||||
if (animate == undefined) {
|
||||
return ''
|
||||
}
|
||||
let direction = ''
|
||||
if (this.direction == undefined) {
|
||||
direction = animate.directions[0]
|
||||
} else {
|
||||
direction = animate.directions.find(item => item == this.direction)
|
||||
}
|
||||
direction = (direction == undefined || direction === 'default') ? '' : direction
|
||||
if (direction != '') {
|
||||
direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction
|
||||
direction = direction[0].toUpperCase() + direction.substring(1)
|
||||
}
|
||||
let t = isLeave ? 'Out' : 'In'
|
||||
return animate.name + t + direction
|
||||
},
|
||||
reversePosition(direction, directions) {
|
||||
if(direction.length == 0 || direction == 'x' || direction == 'y') {
|
||||
return direction
|
||||
}
|
||||
let index = directions.indexOf(direction)
|
||||
index = (index % 2 == 1) ? index - 1 : index + 1
|
||||
return directions[index]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.page-toggle-enter-active{
|
||||
position: absolute !important;
|
||||
animation-duration: 0.8s !important;
|
||||
width: calc(100%) !important;
|
||||
}
|
||||
.page-toggle-leave-active{
|
||||
position: absolute !important;
|
||||
animation-duration: 0.8s !important;
|
||||
width: calc(100%) !important;
|
||||
}
|
||||
.page-toggle-enter{
|
||||
}
|
||||
.page-toggle-leave-to{
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
// admin 配置
|
||||
const ADMIN = {
|
||||
palettes: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
|
||||
animates: require('./animate.config').preset,
|
||||
theme: {
|
||||
mode: {
|
||||
DARK: 'dark',
|
||||
LIGHT: 'light',
|
||||
NIGHT: 'night'
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
SIDE: 'side',
|
||||
HEAD: 'head'
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ADMIN
|
||||
@ -0,0 +1,21 @@
|
||||
const direct_s = ['left', 'right']
|
||||
const direct_1 = ['left', 'right', 'down', 'up']
|
||||
const direct_1_b = ['downBig', 'upBig', 'leftBig', 'rightBig']
|
||||
const direct_2 = ['topLeft', 'bottomRight', 'topRight', 'bottomLeft']
|
||||
const direct_3 = ['downLeft', 'upRight', 'downRight', 'upLeft']
|
||||
|
||||
// animate.css 配置
|
||||
const ANIMATE = {
|
||||
preset: [ //预设动画配置
|
||||
{name: 'back', alias: '渐近', directions: direct_1},
|
||||
{name: 'bounce', alias: '弹跳', directions: direct_1.concat('default')},
|
||||
{name: 'fade', alias: '淡化', directions: direct_1.concat(direct_1_b).concat(direct_2).concat('default')},
|
||||
{name: 'flip', alias: '翻转', directions: ['x', 'y']},
|
||||
{name: 'lightSpeed', alias: '光速', directions: direct_s},
|
||||
{name: 'rotate', alias: '旋转', directions: direct_3.concat('default')},
|
||||
{name: 'roll', alias: '翻滚', directions: ['default']},
|
||||
{name: 'zoom', alias: '缩放', directions: direct_1.concat('default')},
|
||||
{name: 'slide', alias: '滑动', directions: direct_1},
|
||||
]
|
||||
}
|
||||
module.exports = ANIMATE
|
||||
@ -0,0 +1,84 @@
|
||||
// antd 配置
|
||||
const ANTD = {
|
||||
primary: {
|
||||
color: '#1890ff',
|
||||
warning: '#faad14',
|
||||
success: '#52c41a',
|
||||
error: '#f5222d',
|
||||
light: {
|
||||
menuColors: ['#000c17', '#001529', '#002140']
|
||||
},
|
||||
dark: {
|
||||
menuColors: ['#000c17', '#001529', '#002140']
|
||||
},
|
||||
night: {
|
||||
menuColors: ['#151515', '#1f1f1f', '#1e1e1e'],
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
dark: {
|
||||
'layout-body-background': '#f0f2f5',
|
||||
'body-background': '#fff',
|
||||
'component-background': '#fff',
|
||||
'heading-color': 'rgba(0, 0, 0, 0.85)',
|
||||
'text-color': 'rgba(0, 0, 0, 0.65)',
|
||||
'text-color-inverse': '#fff',
|
||||
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
|
||||
'shadow-color': 'rgba(0, 0, 0, 0.15)',
|
||||
'border-color-split': '#f0f0f0',
|
||||
'background-color-light': '#fafafa',
|
||||
'background-color-base': '#f5f5f5',
|
||||
'table-selected-row-bg': '#fafafa',
|
||||
'table-expanded-row-bg': '#fbfbfb',
|
||||
'checkbox-check-color': '#fff',
|
||||
'disabled-color': 'rgba(0, 0, 0, 0.25)',
|
||||
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
|
||||
'menu-dark-highlight-color': '#fefefe',
|
||||
'menu-dark-arrow-color': '#fefefe',
|
||||
'btn-primary-color': '#fff',
|
||||
},
|
||||
light: {
|
||||
'layout-body-background': '#f0f2f5',
|
||||
'body-background': '#fff',
|
||||
'component-background': '#fff',
|
||||
'heading-color': 'rgba(0, 0, 0, 0.85)',
|
||||
'text-color': 'rgba(0, 0, 0, 0.65)',
|
||||
'text-color-inverse': '#fff',
|
||||
'text-color-secondary': 'rgba(0, 0, 0, 0.45)',
|
||||
'shadow-color': 'rgba(0, 0, 0, 0.15)',
|
||||
'border-color-split': '#f0f0f0',
|
||||
'background-color-light': '#fafafa',
|
||||
'background-color-base': '#f5f5f5',
|
||||
'table-selected-row-bg': '#fafafa',
|
||||
'table-expanded-row-bg': '#fbfbfb',
|
||||
'checkbox-check-color': '#fff',
|
||||
'disabled-color': 'rgba(0, 0, 0, 0.25)',
|
||||
'menu-dark-color': 'rgba(1, 1, 1, 0.65)',
|
||||
'menu-dark-highlight-color': '#fefefe',
|
||||
'menu-dark-arrow-color': '#fefefe',
|
||||
'btn-primary-color': '#fff',
|
||||
},
|
||||
night: {
|
||||
'layout-body-background': '#000',
|
||||
'body-background': '#141414',
|
||||
'component-background': '#141414',
|
||||
'heading-color': 'rgba(255, 255, 255, 0.85)',
|
||||
'text-color': 'rgba(255, 255, 255, 0.85)',
|
||||
'text-color-inverse': '#141414',
|
||||
'text-color-secondary': 'rgba(255, 255, 255, 0.45)',
|
||||
'shadow-color': 'rgba(255, 255, 255, 0.15)',
|
||||
'border-color-split': '#303030',
|
||||
'background-color-light': '#ffffff0a',
|
||||
'background-color-base': '#2a2a2a',
|
||||
'table-selected-row-bg': '#ffffff0a',
|
||||
'table-expanded-row-bg': '#ffffff0b',
|
||||
'checkbox-check-color': '#141414',
|
||||
'disabled-color': 'rgba(255, 255, 255, 0.25)',
|
||||
'menu-dark-color': 'rgba(254, 254, 254, 0.65)',
|
||||
'menu-dark-highlight-color': '#fefefe',
|
||||
'menu-dark-arrow-color': '#fefefe',
|
||||
'btn-primary-color': '#141414',
|
||||
}
|
||||
}
|
||||
}
|
||||
module.exports = ANTD
|
||||
@ -0,0 +1,6 @@
|
||||
const ANTD = require('./antd.config')
|
||||
const ADMIN = require('./admin.config')
|
||||
const ANIMATE = require('./animate.config')
|
||||
const setting = require('./setting.config')
|
||||
|
||||
module.exports = {ANTD, ADMIN, ANIMATE, setting}
|
||||
@ -0,0 +1,6 @@
|
||||
const deepMerge = require('deepmerge')
|
||||
const _config = require('./config')
|
||||
const {setting} = require('./default')
|
||||
const config = deepMerge(setting, _config)
|
||||
|
||||
module.exports = config
|
||||
@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<a-layout :class="['admin-layout', 'beauty-scroll']">
|
||||
|
||||
<drawer v-if="isMobile" v-model="drawerOpen">
|
||||
<side-menu :theme="theme.mode" :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
|
||||
</drawer>
|
||||
<side-menu :class="[fixedSideBar ? 'fixed-side' : '']" :theme="theme.mode" v-else-if="layout === 'side' || layout === 'mix'" :menuData="sideMenuData" :collapsed="collapsed" :collapsible="true" />
|
||||
|
||||
<div v-if="fixedSideBar && !isMobile" :style="`width: ${sideMenuWidth}; min-width: ${sideMenuWidth};max-width: ${sideMenuWidth};`" class="virtual-side"></div>
|
||||
|
||||
<drawer v-if="!hideSetting" v-model="showSetting" placement="right">
|
||||
<div class="setting" slot="handler">
|
||||
<a-icon :type="showSetting ? 'close' : 'setting'"/>
|
||||
</div>
|
||||
<setting />
|
||||
</drawer>
|
||||
|
||||
<a-layout class="admin-layout-main beauty-scroll">
|
||||
<admin-header :class="[{'fixed-tabs': fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" :style="headerStyle" :menuData="headMenuData" :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
|
||||
|
||||
<a-layout-header :class="['virtual-header', {'fixed-tabs' : fixedTabs, 'fixed-header': fixedHeader, 'multi-page': multiPage}]" v-show="fixedHeader"></a-layout-header>
|
||||
|
||||
<a-layout-content class="admin-layout-content" :style="`min-height: ${minHeight}px;`">
|
||||
<div style="position: relative">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</a-layout-content>
|
||||
|
||||
<a-layout-footer style="padding: 0px">
|
||||
<page-footer :link-list="footerLinks" :copyright="copyright" />
|
||||
</a-layout-footer>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AdminHeader from './header/AdminHeader'
|
||||
import PageFooter from './footer/PageFooter'
|
||||
import Drawer from '../components/tool/Drawer'
|
||||
import SideMenu from '../components/menu/SideMenu'
|
||||
import Setting from '../components/setting/Setting'
|
||||
import {mapState, mapMutations, mapGetters} from 'vuex'
|
||||
|
||||
// const minHeight = window.innerHeight - 64 - 122
|
||||
|
||||
export default {
|
||||
name: 'AdminLayout',
|
||||
components: {Setting, SideMenu, Drawer, PageFooter, AdminHeader},
|
||||
data () {
|
||||
return {
|
||||
minHeight: window.innerHeight - 64 - 122,
|
||||
collapsed: false,
|
||||
showSetting: false,
|
||||
drawerOpen: false
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
adminLayout: this
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(val) {
|
||||
this.setActivated(val)
|
||||
},
|
||||
layout() {
|
||||
this.setActivated(this.$route)
|
||||
},
|
||||
isMobile(val) {
|
||||
if(!val) {
|
||||
this.drawerOpen = false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar',
|
||||
'fixedTabs', 'hideSetting', 'multiPage']),
|
||||
...mapGetters('setting', ['firstMenu', 'subMenu', 'menuData']),
|
||||
sideMenuWidth() {
|
||||
return this.collapsed ? '80px' : '200px'
|
||||
},
|
||||
headerStyle() {
|
||||
let width = (this.fixedHeader && this.layout !== 'head' && !this.isMobile) ? `calc(100% - ${this.sideMenuWidth})` : '100%'
|
||||
let position = this.fixedHeader ? 'fixed' : 'static'
|
||||
return `width: ${width}; position: ${position};`
|
||||
},
|
||||
headMenuData() {
|
||||
const {layout, menuData, firstMenu} = this
|
||||
return layout === 'mix' ? firstMenu : menuData
|
||||
},
|
||||
sideMenuData() {
|
||||
const {layout, menuData, subMenu} = this
|
||||
return layout === 'mix' ? subMenu : menuData
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('setting', ['correctPageMinHeight', 'setActivatedFirst']),
|
||||
toggleCollapse () {
|
||||
this.collapsed = !this.collapsed
|
||||
},
|
||||
onMenuSelect () {
|
||||
this.toggleCollapse()
|
||||
},
|
||||
setActivated(route) {
|
||||
if (this.layout === 'mix') {
|
||||
let matched = route.matched
|
||||
matched = matched.slice(0, matched.length - 1)
|
||||
const {firstMenu} = this
|
||||
for (let menu of firstMenu) {
|
||||
if (matched.findIndex(item => item.path === menu.fullPath) !== -1) {
|
||||
this.setActivatedFirst(menu.fullPath)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.correctPageMinHeight(this.minHeight - 24)
|
||||
this.setActivated(this.$route)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.correctPageMinHeight(-this.minHeight + 24)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.admin-layout{
|
||||
.side-menu{
|
||||
&.fixed-side{
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.virtual-side{
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.virtual-header{
|
||||
transition: all 0.2s;
|
||||
opacity: 0;
|
||||
&.fixed-tabs.multi-page:not(.fixed-header){
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.admin-layout-main{
|
||||
.admin-header{
|
||||
top: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
&.fixed-tabs.multi-page:not(.fixed-header){
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.admin-layout-content{
|
||||
padding: 24px 5px 0;
|
||||
/*overflow-x: hidden;*/
|
||||
/*min-height: calc(100vh - 64px - 122px);*/
|
||||
}
|
||||
.setting{
|
||||
background-color: @primary-color;
|
||||
color: @base-bg-color;
|
||||
border-radius: 5px 0 0 5px;
|
||||
line-height: 40px;
|
||||
font-size: 22px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
box-shadow: -2px 0 8px @shadow-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
|
||||
<router-view />
|
||||
</page-toggle-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageToggleTransition from '../components/transition/PageToggleTransition';
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'BlankView',
|
||||
components: {PageToggleTransition},
|
||||
computed: {
|
||||
...mapState('setting', ['multiPage', 'animate'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<div class="content"><slot></slot></div>
|
||||
<page-footer :link-list="footerLinks" :copyright="copyright"></page-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageFooter from '@/layouts/footer/PageFooter'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'CommonLayout',
|
||||
components: {PageFooter},
|
||||
computed: {
|
||||
...mapState('setting', ['footerLinks', 'copyright'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.common-layout{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background-color: @layout-body-background;
|
||||
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: center;
|
||||
background-position-y: 110px;
|
||||
background-size: 100%;
|
||||
.content{
|
||||
padding: 32px 0;
|
||||
flex: 1;
|
||||
@media (min-width: 768px){
|
||||
|
||||
padding: 112px 0 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div class="page-layout">
|
||||
<page-header ref="pageHeader" :style="`margin-top: ${multiPage ? 0 : -24}px`" :breadcrumb="breadcrumb" :title="pageTitle" :logo="logo" :avatar="avatar">
|
||||
<slot name="action" slot="action"></slot>
|
||||
<slot slot="content" name="headerContent"></slot>
|
||||
<div slot="content" v-if="!this.$slots.headerContent && desc">
|
||||
<p>{{desc}}</p>
|
||||
<div v-if="this.linkList" class="link">
|
||||
<template v-for="(link, index) in linkList">
|
||||
<a :key="index" :href="link.href"><a-icon :type="link.icon" />{{link.title}}</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<slot v-if="this.$slots.extra" slot="extra" name="extra"></slot>
|
||||
</page-header>
|
||||
<div ref="page" :class="['page-content', layout, pageWidth]" >
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageHeader from '@/components/page/header/PageHeader'
|
||||
import {mapState, mapMutations} from 'vuex'
|
||||
import {getI18nKey} from '@/utils/routerUtil'
|
||||
|
||||
export default {
|
||||
name: 'PageLayout',
|
||||
components: {PageHeader},
|
||||
props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
|
||||
data () {
|
||||
return {
|
||||
page: {},
|
||||
pageHeaderHeight: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.page = this.$route.meta.page
|
||||
}
|
||||
},
|
||||
updated() {
|
||||
if (!this._inactive) {
|
||||
this.updatePageHeight()
|
||||
}
|
||||
},
|
||||
activated() {
|
||||
this.updatePageHeight()
|
||||
},
|
||||
deactivated() {
|
||||
this.updatePageHeight(0)
|
||||
},
|
||||
mounted() {
|
||||
this.updatePageHeight()
|
||||
},
|
||||
created() {
|
||||
this.page = this.$route.meta.page
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.updatePageHeight(0)
|
||||
},
|
||||
computed: {
|
||||
...mapState('setting', ['layout', 'multiPage', 'pageMinHeight', 'pageWidth', 'customTitles']),
|
||||
pageTitle() {
|
||||
let pageTitle = this.page && this.page.title
|
||||
return this.customTitle || (pageTitle && this.$t(pageTitle)) || this.title || this.routeName
|
||||
},
|
||||
routeName() {
|
||||
const route = this.$route
|
||||
return this.$t(getI18nKey(route.matched[route.matched.length - 1].path))
|
||||
},
|
||||
breadcrumb() {
|
||||
let page = this.page
|
||||
let breadcrumb = page && page.breadcrumb
|
||||
if (breadcrumb) {
|
||||
let i18nBreadcrumb = []
|
||||
breadcrumb.forEach(item => {
|
||||
i18nBreadcrumb.push(this.$t(item))
|
||||
})
|
||||
return i18nBreadcrumb
|
||||
} else {
|
||||
return this.getRouteBreadcrumb()
|
||||
}
|
||||
},
|
||||
marginCorrect() {
|
||||
return this.multiPage ? 24 : 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('setting', ['correctPageMinHeight']),
|
||||
getRouteBreadcrumb() {
|
||||
let routes = this.$route.matched
|
||||
const path = this.$route.path
|
||||
let breadcrumb = []
|
||||
routes.filter(item => path.includes(item.path))
|
||||
.forEach(route => {
|
||||
const path = route.path.length === 0 ? '/home' : route.path
|
||||
breadcrumb.push(this.$t(getI18nKey(path)))
|
||||
})
|
||||
let pageTitle = this.page && this.page.title
|
||||
if (this.customTitle || pageTitle) {
|
||||
breadcrumb[breadcrumb.length - 1] = this.customTitle || pageTitle
|
||||
}
|
||||
return breadcrumb
|
||||
},
|
||||
/**
|
||||
* 用于计算页面内容最小高度
|
||||
* @param newHeight
|
||||
*/
|
||||
updatePageHeight(newHeight = this.$refs.pageHeader.$el.offsetHeight + this.marginCorrect) {
|
||||
this.correctPageMinHeight(this.pageHeaderHeight - newHeight)
|
||||
this.pageHeaderHeight = newHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.page-header{
|
||||
margin: 0 -24px 0;
|
||||
}
|
||||
.link{
|
||||
/*margin-top: 16px;*/
|
||||
line-height: 24px;
|
||||
a{
|
||||
font-size: 14px;
|
||||
margin-right: 32px;
|
||||
i{
|
||||
font-size: 22px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-content{
|
||||
position: relative;
|
||||
padding: 5px 0 0;
|
||||
&.side{
|
||||
}
|
||||
&.head.fixed{
|
||||
margin: 0 auto;
|
||||
max-width: 1400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<page-layout :desc="desc" :linkList="linkList">
|
||||
<div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
|
||||
<img :src="extraImage"/>
|
||||
</div>
|
||||
<page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
|
||||
<router-view ref="page" />
|
||||
</page-toggle-transition>
|
||||
</page-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PageLayout from './PageLayout'
|
||||
import PageToggleTransition from '../components/transition/PageToggleTransition';
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'PageView',
|
||||
components: {PageToggleTransition, PageLayout},
|
||||
data () {
|
||||
return {
|
||||
page: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('setting', ['isMobile', 'multiPage', 'animate']),
|
||||
desc() {
|
||||
return this.page.desc
|
||||
},
|
||||
linkList() {
|
||||
return this.page.linkList
|
||||
},
|
||||
extraImage() {
|
||||
return this.page.extraImage
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.page = this.$refs.page
|
||||
},
|
||||
updated () {
|
||||
this.page = this.$refs.page
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.extraImg{
|
||||
margin-top: -60px;
|
||||
text-align: center;
|
||||
width: 195px;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div class="links">
|
||||
<a target="_blank" :key="index" :href="item.link ? item.link : 'javascript: void(0)'" v-for="(item, index) in linkList">
|
||||
<a-icon v-if="item.icon" :type="item.icon"/>{{item.name}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
Copyright<a-icon type="copyright" />{{copyright}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PageFooter',
|
||||
props: ['copyright', 'linkList']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.footer{
|
||||
padding: 48px 16px 24px;
|
||||
/*margin: 48px 0 24px;*/
|
||||
text-align: center;
|
||||
.copyright{
|
||||
color: @text-color-second;
|
||||
font-size: 14px;
|
||||
i {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
.links{
|
||||
margin-bottom: 8px;
|
||||
a:not(:last-child) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
a{
|
||||
color: @text-color-second;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<a-layout-header :class="[headerTheme, 'admin-header']">
|
||||
<div :class="['admin-header-wide', layout, pageWidth]">
|
||||
<router-link v-if="isMobile || layout === 'head'" to="/" :class="['logo', isMobile ? null : 'pc', headerTheme]">
|
||||
<img width="32" src="@/assets/images/logo.png" />
|
||||
<h1 v-if="!isMobile">{{systemName}}</h1>
|
||||
</router-link>
|
||||
<!-- <a-divider v-if="isMobile" type="vertical" /> -->
|
||||
<a-icon v-if="layout !== 'head' && !isMobile" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapse"/>
|
||||
<div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
|
||||
<i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :options="menuData" @select="onSelect"/>
|
||||
</div>
|
||||
<div :class="['admin-header-right', headerTheme]">
|
||||
<header-avatar class="header-item"/>
|
||||
<!-- <a-dropdown class="lang header-item">
|
||||
<div>
|
||||
<a-icon type="global"/> {{langAlias}}
|
||||
</div>
|
||||
<a-menu @click="val => setLang(val.key)" :selected-keys="[lang]" slot="overlay">
|
||||
<a-menu-item v-for=" lang in langList" :key="lang.key">{{lang.key.toLowerCase() + ' ' + lang.name}}</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown> -->
|
||||
</div>
|
||||
</div>
|
||||
</a-layout-header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import HeaderNotice from './HeaderNotice'
|
||||
import HeaderAvatar from './HeaderAvatar'
|
||||
import IMenu from '@/components/menu/menu'
|
||||
import {mapState, mapMutations} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'AdminHeader',
|
||||
components: {IMenu, HeaderAvatar},
|
||||
props: ['collapsed', 'menuData'],
|
||||
data() {
|
||||
return {
|
||||
langList: [
|
||||
{key: 'TW', name: '繁體中文', alias: '繁體'},
|
||||
{key: 'CN', name: '简体中文', alias: '简体'},
|
||||
{key: 'US', name: 'English', alias: 'EN'}
|
||||
],
|
||||
searchActive: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'lang', 'pageWidth']),
|
||||
headerTheme () {
|
||||
if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
|
||||
return 'light'
|
||||
}
|
||||
return this.theme.mode
|
||||
},
|
||||
langAlias() {
|
||||
let lang = this.langList.find(item => item.key == this.lang)
|
||||
return lang.alias
|
||||
},
|
||||
menuWidth() {
|
||||
const {layout, searchActive} = this
|
||||
const headWidth = layout === 'head' ? '100% - 188px' : '100%'
|
||||
const extraWidth = searchActive ? '600px' : '400px'
|
||||
return `calc(${headWidth} - ${extraWidth})`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse () {
|
||||
this.$emit('toggleCollapse')
|
||||
},
|
||||
onSelect (obj) {
|
||||
this.$emit('menuSelect', obj)
|
||||
},
|
||||
...mapMutations('setting', ['setLang'])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "index";
|
||||
</style>
|
||||
@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<a-dropdown>
|
||||
<div class="header-avatar" style="cursor: pointer">
|
||||
<!-- <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar"/> -->
|
||||
<span class="name">{{user.name}}</span>
|
||||
</div>
|
||||
<a-menu :class="['avatar-menu']" slot="overlay">
|
||||
<!-- <a-menu-item>
|
||||
<a-icon type="user" />
|
||||
<span>個人中心</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a-icon type="setting" />
|
||||
<span>設定</span>
|
||||
</a-menu-item> -->
|
||||
<!-- <a-menu-divider /> -->
|
||||
<a-menu-item @click="logout">
|
||||
<a-icon style="margin-right: 8px;" type="poweroff" />
|
||||
<span>登出</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex'
|
||||
import {logout} from '@/services/admin'
|
||||
|
||||
export default {
|
||||
name: 'HeaderAvatar',
|
||||
computed: {
|
||||
...mapGetters('account', ['user']),
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
logout()
|
||||
this.$router.push('/login')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.header-avatar{
|
||||
display: inline-flex;
|
||||
.avatar, .name{
|
||||
align-self: center;
|
||||
}
|
||||
.avatar{
|
||||
margin-right: 8px;
|
||||
}
|
||||
.name{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.avatar-menu{
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<a-dropdown :trigger="['click']" v-model="show">
|
||||
<div slot="overlay">
|
||||
<a-spin :spinning="loading">
|
||||
<a-tabs class="dropdown-tabs" :tabBarStyle="{textAlign: 'center'}" :style="{width: '297px'}">
|
||||
<a-tab-pane tab="通知" key="1">
|
||||
<a-list class="tab-pane">
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="你收到了 14 份新周报" description="一年前">
|
||||
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
|
||||
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
<a-list-item>
|
||||
<a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
|
||||
<a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="消息" key="2">
|
||||
<a-list class="tab-pane"></a-list>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane tab="待办" key="3">
|
||||
<a-list class="tab-pane"></a-list>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</a-spin>
|
||||
</div>
|
||||
<span @click="fetchNotice" class="header-notice">
|
||||
<a-badge class="notice-badge" count="12">
|
||||
<a-icon :class="['header-notice-icon']" type="bell" />
|
||||
</a-badge>
|
||||
</span>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderNotice',
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
show: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
fetchNotice () {
|
||||
if (this.loading) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
this.loadding = true
|
||||
setTimeout(() => {
|
||||
this.loadding = false
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.header-notice{
|
||||
display: inline-block;
|
||||
transition: all 0.3s;
|
||||
span {
|
||||
vertical-align: initial;
|
||||
}
|
||||
.notice-badge{
|
||||
color: inherit;
|
||||
.header-notice-icon{
|
||||
font-size: 16px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-tabs{
|
||||
background-color: @base-bg-color;
|
||||
box-shadow: 0 2px 8px @shadow-color;
|
||||
border-radius: 4px;
|
||||
.tab-pane{
|
||||
padding: 0 24px 12px;
|
||||
min-height: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div class="header-search">
|
||||
<a-icon type="search" class="search-icon" @click="enterSearchMode"/>
|
||||
<a-auto-complete
|
||||
ref="input"
|
||||
:getPopupContainer="e => {return e.parentNode || document.body}"
|
||||
:dataSource="dataSource"
|
||||
:class="['search-input', searchMode ? 'enter' : 'leave']"
|
||||
placeholder="站内搜索"
|
||||
@blur="leaveSearchMode"
|
||||
>
|
||||
</a-auto-complete>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderSearch',
|
||||
data () {
|
||||
return {
|
||||
dataSource: ['选项一', '选项二'],
|
||||
searchMode: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
enterSearchMode () {
|
||||
this.searchMode = true
|
||||
this.$emit('active', true)
|
||||
setTimeout(() => this.$refs.input.focus(), 300)
|
||||
},
|
||||
leaveSearchMode () {
|
||||
this.searchMode = false
|
||||
setTimeout(() => this.$emit('active', false), 300)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.header-search{
|
||||
.search-icon{
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-input{
|
||||
border: 0;
|
||||
border-bottom: 1px solid @border-color-split;
|
||||
transition: width 0.3s ease-in-out;
|
||||
input{
|
||||
border: 0;
|
||||
box-shadow: 0 0 0 0;
|
||||
}
|
||||
&.leave{
|
||||
width: 0px;
|
||||
input{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.enter{
|
||||
width: 200px;
|
||||
input:focus{
|
||||
box-shadow: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,92 @@
|
||||
.admin-header{
|
||||
padding: 0;
|
||||
z-index: 2;
|
||||
box-shadow: @shadow-down;
|
||||
position: relative;
|
||||
background: @base-bg-color;
|
||||
.head-menu{
|
||||
height: 64px;
|
||||
line-height: 64px;
|
||||
vertical-align: middle;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.dark{
|
||||
background: @header-bg-color-dark;
|
||||
color: white;
|
||||
}
|
||||
&.night{
|
||||
.head-menu{
|
||||
background: @base-bg-color;
|
||||
}
|
||||
}
|
||||
.admin-header-wide{
|
||||
padding-left: 24px;
|
||||
&.head.fixed{
|
||||
max-width: 1400px;
|
||||
margin: auto;
|
||||
padding-left: 0;
|
||||
}
|
||||
&.side{
|
||||
padding-right: 12px;
|
||||
}
|
||||
.logo {
|
||||
height: 64px;
|
||||
line-height: 58px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
padding: 0 12px 0 24px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
color: inherit;
|
||||
&.pc{
|
||||
padding: 0 12px 0 0;
|
||||
}
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
h1{
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.trigger {
|
||||
font-size: 20px;
|
||||
line-height: 64px;
|
||||
padding: 0 0px;
|
||||
cursor: pointer;
|
||||
transition: color .3s;
|
||||
&:hover{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
.admin-header-menu{
|
||||
display: inline-block;
|
||||
}
|
||||
.admin-header-right{
|
||||
float: right;
|
||||
display: flex;
|
||||
color: inherit;
|
||||
.header-item{
|
||||
color: inherit;
|
||||
padding: 0 12px;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
a{
|
||||
color: inherit;
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
each(@theme-list, {
|
||||
&.@{value} .header-item{
|
||||
&:hover{
|
||||
@class: ~'hover-bg-color-@{value}';
|
||||
background-color: @@class;
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div :class="['tabs-head', layout, pageWidth]">
|
||||
<a-tabs
|
||||
type="editable-card"
|
||||
:class="['tabs-container', layout, pageWidth, {'affixed' : affixed, 'fixed-header' : fixedHeader, 'collapsed' : adminLayout.collapsed}]"
|
||||
:active-key="active"
|
||||
:hide-add="true"
|
||||
>
|
||||
<a-tooltip placement="left" :title="lockTitle" slot="tabBarExtraContent">
|
||||
<a-icon
|
||||
theme="filled"
|
||||
@click="onLockClick"
|
||||
class="header-lock"
|
||||
:type="fixedTabs ? 'lock' : 'unlock'"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tab-pane v-for="page in pageList" :key="page.path">
|
||||
<div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.path, e)">
|
||||
<a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.path !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
|
||||
<div class="title" @click="onTabClick(page.path)" >{{pageName(page)}}</div>
|
||||
<a-icon v-if="!page.unclose" @click="onClose(page.path)" class="icon-close" type="close"/>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div v-if="affixed" class="virtual-tabs"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapMutations} from 'vuex'
|
||||
import {getI18nKey} from '@/utils/routerUtil'
|
||||
|
||||
export default {
|
||||
name: 'TabsHead',
|
||||
i18n: {
|
||||
messages: {
|
||||
TW: {
|
||||
lock: '點擊鎖定頁簽頭',
|
||||
unlock: '點擊解除鎖定',
|
||||
},
|
||||
CN: {
|
||||
lock: '点击锁定页签头',
|
||||
unlock: '点击解除锁定',
|
||||
},
|
||||
US: {
|
||||
lock: 'click to lock the tabs head',
|
||||
unlock: 'click to unlock',
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
pageList: Array,
|
||||
active: String,
|
||||
fixed: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
affixed: false,
|
||||
}
|
||||
},
|
||||
inject:['adminLayout'],
|
||||
created() {
|
||||
this.affixed = this.fixedTabs
|
||||
},
|
||||
computed: {
|
||||
...mapState('setting', ['layout', 'pageWidth', 'fixedHeader', 'fixedTabs', 'customTitles']),
|
||||
lockTitle() {
|
||||
return this.$t(this.fixedTabs ? 'unlock' : 'lock')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('setting', ['setFixedTabs']),
|
||||
onLockClick() {
|
||||
this.setFixedTabs(!this.fixedTabs)
|
||||
if (this.fixedTabs) {
|
||||
setTimeout(() => {
|
||||
this.affixed = true
|
||||
}, 200)
|
||||
} else {
|
||||
this.affixed = false
|
||||
}
|
||||
},
|
||||
onTabClick(key) {
|
||||
if (this.active !== key) {
|
||||
this.$emit('change', key)
|
||||
}
|
||||
},
|
||||
onClose(key) {
|
||||
this.$emit('close', key)
|
||||
},
|
||||
onRefresh(page) {
|
||||
this.$emit('refresh', page.path, page)
|
||||
},
|
||||
onContextmenu(pageKey, e) {
|
||||
this.$emit('contextmenu', pageKey, e)
|
||||
},
|
||||
pageName(page) {
|
||||
const pagePath = page.fullPath.split('?')[0]
|
||||
const custom = this.customTitles.find(item => item.path === pagePath)
|
||||
return (custom && custom.title) || page.title || this.$t(getI18nKey(page.keyPath))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tab{
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
user-select: none;
|
||||
transition: all 0.2s;
|
||||
.title{
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
.icon-close{
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
margin-right: -4px !important;
|
||||
color: @text-color-second;
|
||||
&:hover{
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
.icon-sync{
|
||||
margin-left: -4px;
|
||||
color: @primary-4;
|
||||
transition: all 0.3s ease-in-out;
|
||||
&:hover{
|
||||
color: @primary-color;
|
||||
}
|
||||
font-size: 14px;
|
||||
&.hide{
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs-head{
|
||||
margin: 0 auto;
|
||||
&.head.fixed{
|
||||
width: 1400px;
|
||||
}
|
||||
}
|
||||
.tabs-container{
|
||||
margin: -16px auto 8px;
|
||||
transition: top,left 0.2s;
|
||||
.header-lock{
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
color: @primary-3;
|
||||
&:hover{
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
&.affixed{
|
||||
margin: 0 auto;
|
||||
top: 0px;
|
||||
padding: 8px 24px 0;
|
||||
position: fixed;
|
||||
height: 48px;
|
||||
z-index: 1;
|
||||
background-color: @layout-body-background;
|
||||
&.side,&.mix{
|
||||
right: 0;
|
||||
left: 200px;
|
||||
&.collapsed{
|
||||
left: 80px;
|
||||
}
|
||||
}
|
||||
&.head{
|
||||
width: inherit;
|
||||
padding: 8px 0 0;
|
||||
&.fluid{
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 8px 24px 0;
|
||||
}
|
||||
}
|
||||
&.fixed-header{
|
||||
top: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.virtual-tabs{
|
||||
height: 48px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,25 @@
|
||||
module.exports = {
|
||||
messages: {
|
||||
TW: {
|
||||
closeLeft: '關閉左側',
|
||||
closeRight: '關閉右側',
|
||||
closeOthers: '關閉其它',
|
||||
refresh: '刷新頁面',
|
||||
warn: '這是最後一頁，不能再關閉了',
|
||||
},
|
||||
CN: {
|
||||
closeLeft: '关闭左侧',
|
||||
closeRight: '关闭右侧',
|
||||
closeOthers: '关闭其它',
|
||||
refresh: '刷新页面',
|
||||
warn: '这是最后一页，不能再关闭了',
|
||||
},
|
||||
US: {
|
||||
closeLeft: 'close left',
|
||||
closeRight: 'close right',
|
||||
closeOthers: 'close others',
|
||||
refresh: 'refresh the page',
|
||||
warn: 'This is the last page, you can\'t close it',
|
||||
},
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
import TabsView from './TabsView'
|
||||
export default TabsView
|
||||
@ -0,0 +1,37 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import {initRouter} from './router'
|
||||
import './theme/index.less'
|
||||
import Antd from 'ant-design-vue'
|
||||
import Viser from 'viser-vue'
|
||||
// import '@/mock'
|
||||
import store from './store'
|
||||
import 'animate.css/source/animate.css'
|
||||
import Plugins from '@/plugins'
|
||||
import {initI18n} from '@/utils/i18n'
|
||||
import bootstrap from '@/bootstrap'
|
||||
import 'moment/locale/zh-tw'
|
||||
import CKEditor from 'ckeditor4-vue';
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
|
||||
const router = initRouter(store.state.setting.asyncRoutes)
|
||||
const i18n = initI18n('TW', 'CN', 'US')
|
||||
|
||||
import * as ElResize from 'vue-element-resize-event'
|
||||
Vue.use(ElResize)
|
||||
|
||||
Vue.use(Antd)
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(Viser)
|
||||
Vue.use(Plugins)
|
||||
Vue.use(CKEditor)
|
||||
Vue.use(VueClipboard)
|
||||
|
||||
bootstrap({router, store, i18n, message: Vue.prototype.$message})
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
render: h => h(App),
|
||||
}).$mount('#app')
|
||||
@ -0,0 +1,32 @@
|
||||
const avatars = [
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png',
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png'
|
||||
]
|
||||
|
||||
const positions = [
|
||||
{
|
||||
CN: 'Java工程师 | 蚂蚁金服-计算服务事业群-微信平台部',
|
||||
TW: 'Java工程師 | 螞蟻金服-計算服務事業群-微信平台部',
|
||||
US: 'Java engineer | Ant financial - Computing services business group - WeChat platform division'
|
||||
},{
|
||||
CN: '前端工程师 | 蚂蚁金服-计算服务事业群-VUE平台',
|
||||
TW: '前端工程師 | 螞蟻金服-計算服務事業群-VUE平台',
|
||||
US: 'Front-end engineer | Ant Financial - Computing services business group - VUE platform'
|
||||
},{
|
||||
CN: '前端工程师 | 蚂蚁金服-计算服务事业群-REACT平台',
|
||||
TW: '前端工程師 | 螞蟻金服-計算服務事業群-REACT平台',
|
||||
US: 'Front-end engineer | Ant Financial - Computing services business group - REACT platform'
|
||||
},{
|
||||
CN: '产品分析师 | 蚂蚁金服-计算服务事业群-IOS平台部',
|
||||
TW: '產品分析師 | 螞蟻金服-計算服務事業群-IOS平台部',
|
||||
US: 'Product analyst | Ant Financial - Computing services business group - IOS platform division'
|
||||
}
|
||||
]
|
||||
|
||||
const admins = ['ICZER', 'JACK', 'LUIS', 'DAVID']
|
||||
|
||||
export {positions, avatars, admins}
|
||||
@ -0,0 +1,46 @@
|
||||
import Mock from 'mockjs'
|
||||
import {positions, avatars, admins} from '../common'
|
||||
|
||||
const Random = Mock.Random
|
||||
|
||||
const timeList = [
|
||||
{
|
||||
CN: '早上好',
|
||||
TW: '早晨啊',
|
||||
US: 'Good morning',
|
||||
},{
|
||||
CN: '上午好',
|
||||
TW: '上午好',
|
||||
US: 'Good morning',
|
||||
},{
|
||||
CN: '中午好',
|
||||
TW: '中午好',
|
||||
US: 'Good afternoon',
|
||||
},{
|
||||
CN: '下午好',
|
||||
TW: '下午好',
|
||||
US: 'Good afternoon',
|
||||
},{
|
||||
CN: '晚上好',
|
||||
TW: '晚上好',
|
||||
US: 'Good evening',
|
||||
}
|
||||
]
|
||||
|
||||
Random.extend({
|
||||
admin () {
|
||||
return this.pick(admins)
|
||||
},
|
||||
timeFix () {
|
||||
const time = new Date()
|
||||
const hour = time.getHours()
|
||||
return hour < 9
|
||||
? timeList[0] : (hour <= 11 ? timeList[1] : (hour <= 13 ? timeList[2] : (hour <= 20 ? timeList[3] : timeList[4])))
|
||||
},
|
||||
avatar () {
|
||||
return this.pick(avatars)
|
||||
},
|
||||
position () {
|
||||
return this.pick(positions)
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,8 @@
|
||||
import Mock from 'mockjs'
|
||||
import '@/mock/user/login'
|
||||
import '@/mock/user/routes'
|
||||
|
||||
// 设置全局延时
|
||||
Mock.setup({
|
||||
timeout: '300-600'
|
||||
})
|
||||
@ -0,0 +1,45 @@
|
||||
import Mock from 'mockjs'
|
||||
|
||||
Mock.mock(`${process.env.VUE_APP_API_BASE_URL}/auth/getRoute`, 'get', () => {
|
||||
console.log('mock routes')
|
||||
let result = {}
|
||||
result.code = 0
|
||||
result.data = [{
|
||||
router: 'root',
|
||||
children: ['demo',
|
||||
{
|
||||
router: 'parent1',
|
||||
children: [{
|
||||
router: 'demo',
|
||||
name: 'demo1',
|
||||
authority: {
|
||||
permission: 'demo',
|
||||
role: 'admin'
|
||||
}
|
||||
}],
|
||||
},
|
||||
{
|
||||
router: 'parent2',
|
||||
children: [{
|
||||
router: 'demo',
|
||||
name: 'demo2'
|
||||
}],
|
||||
},
|
||||
{
|
||||
router: 'exception',
|
||||
children: ['exp404', 'exp403', 'exp500'],
|
||||
},
|
||||
{
|
||||
router: 'demo',
|
||||
icon: 'file-ppt',
|
||||
path: 'auth/demo',
|
||||
name: '验权页面',
|
||||
authority: {
|
||||
permission: 'form',
|
||||
role: 'manager'
|
||||
}
|
||||
}
|
||||
]
|
||||
}]
|
||||
return result
|
||||
})
|
||||
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<a-card>
|
||||
<div>
|
||||
<a-space class="operator">
|
||||
</a-space>
|
||||
<standard-table
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
@clear="onClear"
|
||||
@change="onChange"
|
||||
@selectedRowChange="onSelectChange"
|
||||
@showSizeChange="onShowSizeChange"
|
||||
:scroll="{x: 600}"
|
||||
>
|
||||
<div slot="description" slot-scope="{text}">
|
||||
{{text}}
|
||||
</div>
|
||||
|
||||
<div slot="action" slot-scope="{text, record}">
|
||||
<a style="margin-right: 8px">
|
||||
<a-icon type="edit"/>編輯
|
||||
</a>
|
||||
<a @click="deleteRecord(record.key)">
|
||||
<a-icon type="delete" />刪除
|
||||
</a>
|
||||
|
||||
<router-link :to="`/list/query/detail/${record.key}`" >
|
||||
<a-icon type="delete" />詳情
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<template slot="statusTitle">
|
||||
<a-icon @click.native="onStatusTitleClick" type="info-circle" />
|
||||
</template>
|
||||
|
||||
</standard-table>
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StandardTable from '@/components/table/StandardTable'
|
||||
|
||||
import { getAdminLogs } from '@/services/admin'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '編號',
|
||||
width: 50,
|
||||
// dataIndex: 'id'
|
||||
customRender: (text, record, index) => `${index + 1}`
|
||||
},
|
||||
{
|
||||
title: '操作者',
|
||||
dataIndex: 'admin_name'
|
||||
},
|
||||
{
|
||||
title: '操作日期',
|
||||
dataIndex: 'time'
|
||||
},
|
||||
{
|
||||
title: 'IP位址',
|
||||
dataIndex: 'ip',
|
||||
},
|
||||
{
|
||||
title: '操作紀錄',
|
||||
dataIndex: 'content',
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'AdminLog',
|
||||
components: {StandardTable},
|
||||
data () {
|
||||
return {
|
||||
advanced: true,
|
||||
columns: columns,
|
||||
pagination: {
|
||||
size: 'small',
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: total => `共 ${total} 筆資料`
|
||||
},
|
||||
dataSource: []
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.genTable()
|
||||
},
|
||||
methods: {
|
||||
async genTable(){
|
||||
try{
|
||||
const {data : res} = await getAdminLogs({
|
||||
current: this.pagination.current,
|
||||
size: this.pagination.pageSize,
|
||||
search: this.search
|
||||
})
|
||||
this.pagination.total = res.total
|
||||
this.dataSource = res.data
|
||||
}catch (e){
|
||||
this.dataSource = []
|
||||
}
|
||||
},
|
||||
deleteRecord(key) {
|
||||
this.dataSource = this.dataSource.filter(item => item.key !== key)
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
remove () {
|
||||
},
|
||||
onClear() {
|
||||
this.$message.info('您清空了勾選的所有行')
|
||||
},
|
||||
onStatusTitleClick() {
|
||||
this.$message.info('你點選了狀態列表頭')
|
||||
},
|
||||
onChange() {
|
||||
this.$message.info('表格狀態改變了')
|
||||
},
|
||||
onSelectChange() {
|
||||
this.$message.info('選中行改變了')
|
||||
},
|
||||
addNew () {
|
||||
this.dataSource.unshift({
|
||||
key: this.dataSource.length,
|
||||
no: 'NO ' + this.dataSource.length,
|
||||
description: '這是一段描述',
|
||||
callNo: Math.floor(Math.random() * 1000),
|
||||
status: Math.floor(Math.random() * 10) % 4,
|
||||
updatedAt: '2018-07-26'
|
||||
})
|
||||
},
|
||||
handleMenuClick (e) {
|
||||
if (e.key === 'delete') {
|
||||
this.remove()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search{
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
.fold{
|
||||
width: calc(100% - 216px);
|
||||
display: inline-block
|
||||
}
|
||||
.operator{
|
||||
// margin-bottom: 18px;
|
||||
}
|
||||
@media screen and (max-width: 900px) {
|
||||
.fold {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-card>
|
||||
<div>
|
||||
<a-space class="operator">
|
||||
<a-button @click="handleAddDraw" type="primary" size="small">新增</a-button>
|
||||
</a-space>
|
||||
<standard-table
|
||||
:columns="columns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="false"
|
||||
@clear="onClear"
|
||||
@change="onChange"
|
||||
@selectedRowChange="onSelectChange"
|
||||
:scroll="{x: 600}"
|
||||
>
|
||||
|
||||
<div slot="action" slot-scope="{text, record}">
|
||||
<a class="edit-btn" @click="handleEditDraw(record.id)" style="margin-right: 8px">
|
||||
<a-icon type="edit"/>編輯
|
||||
</a>
|
||||
<a class="delete-btn" @click="deleteRole(record.id)">
|
||||
<a-icon type="delete" />刪除
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</standard-table>
|
||||
</div>
|
||||
</a-card>
|
||||
<add-form
|
||||
:visible="showAddDraw"
|
||||
@close="onAddDrawClose"
|
||||
@submit="onAddSubmit"
|
||||
>
|
||||
</add-form>
|
||||
<edit-form
|
||||
:editid="editId"
|
||||
:visible="showEditDraw"
|
||||
@close="onEditDrawClose"
|
||||
@submit="onEditSubmit"
|
||||
>
|
||||
</edit-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StandardTable from '@/components/table/StandardTable'
|
||||
import AddForm from './components/AddForm.vue'
|
||||
import EditForm from './components/EditForm.vue'
|
||||
|
||||
import {getRoles, deleteRole} from '@/services/role'
|
||||
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '#',
|
||||
width: 50,
|
||||
customRender: (text, record, index) => `${index + 1}`
|
||||
},
|
||||
{
|
||||
title: '角色名稱',
|
||||
width: 200,
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: '角色描述',
|
||||
dataIndex: 'desc',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 180,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
name: 'RoleList',
|
||||
i18n: require('./i18n'),
|
||||
components: {StandardTable, AddForm, EditForm},
|
||||
data () {
|
||||
return {
|
||||
advanced: true,
|
||||
editId: 0,
|
||||
columns: columns,
|
||||
showAddDraw: false,
|
||||
showEditDraw: false,
|
||||
dataSource: [],
|
||||
}
|
||||
},
|
||||
async mounted(){
|
||||
this.genTable()
|
||||
},
|
||||
authorize: {
|
||||
// deleteRecord: 'delete'
|
||||
},
|
||||
methods: {
|
||||
async genTable(){
|
||||
try{
|
||||
const res = await getRoles()
|
||||
this.dataSource = res.data.data
|
||||
|
||||
}catch (e){
|
||||
this.dataSource = []
|
||||
}
|
||||
},
|
||||
deleteRole(id) {
|
||||
console.log(id)
|
||||
this.$confirm({
|
||||
title: '確認刪除?',
|
||||
content: '確定刪除此筆資料',
|
||||
okText: '確定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: async () => {
|
||||
let res = await deleteRole({id:id})
|
||||
if(res.code === 200){
|
||||
this.genTable()
|
||||
this.$message.success('刪除成功')
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
return false
|
||||
},
|
||||
});
|
||||
},
|
||||
toggleAdvanced () {
|
||||
this.advanced = !this.advanced
|
||||
},
|
||||
remove () {
|
||||
},
|
||||
onClear() {
|
||||
this.$message.info('您清空了勾選的所有行')
|
||||
},
|
||||
onStatusTitleClick() {
|
||||
this.$message.info('你點選了狀態列表頭')
|
||||
},
|
||||
onChange() {
|
||||
this.$message.info('表格狀態改變了')
|
||||
},
|
||||
onSelectChange() {
|
||||
this.$message.info('選中行改變了')
|
||||
},
|
||||
//新增
|
||||
handleAddDraw () {
|
||||
this.showAddDraw = true
|
||||
},
|
||||
onAddDrawClose() {
|
||||
this.showAddDraw = false
|
||||
},
|
||||
onAddSubmit () {
|
||||
this.genTable()
|
||||
this.showAddDraw = false
|
||||
this.$message.success('新增成功')
|
||||
},
|
||||
//編輯
|
||||
handleEditDraw(id) {
|
||||
this.editId = id
|
||||
this.showEditDraw = true
|
||||
},
|
||||
onEditDrawClose() {
|
||||
this.editId=0
|
||||
this.showEditDraw = false
|
||||
},
|
||||
onEditSubmit () {
|
||||
this.editId=0
|
||||
this.genTable()
|
||||
this.showEditDraw = false
|
||||
this.$message.success('編輯成功')
|
||||
},
|
||||
handleMenuClick (e) {
|
||||
if (e.key === 'delete') {
|
||||
this.remove()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.search{
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
.fold{
|
||||
width: calc(100% - 216px);
|
||||
display: inline-block
|
||||
}
|
||||
.operator{
|
||||
// margin-bottom: 18px;
|
||||
}
|
||||
@media screen and (max-width: 900px) {
|
||||
.fold {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-drawer
|
||||
title="新增角色"
|
||||
:destroyOnClose="true"
|
||||
:visible="visible"
|
||||
:body-style="{ paddingBottom: '80px' }"
|
||||
@close="onClose"
|
||||
>
|
||||
<a-form-model
|
||||
ref="ruleForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-model-item label="角色名稱" ref="name" prop="name">
|
||||
<a-input
|
||||
v-model="form.name"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.name.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item label="角色描述">
|
||||
<a-input v-model="form.desc" type="textarea" />
|
||||
</a-form-model-item>
|
||||
<!-- <a-form-model-item label="角色權限">
|
||||
<a-tree
|
||||
v-model="form.permission"
|
||||
checkable
|
||||
:tree-data="treeData"
|
||||
defaultExpandAll
|
||||
@select="onSelect"
|
||||
@check="onCheck"
|
||||
>
|
||||
<span slot="title0010" style="color: #1890ff">sss</span>
|
||||
</a-tree>
|
||||
</a-form-model-item> -->
|
||||
|
||||
</a-form-model>
|
||||
<div
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
borderTop: '1px solid #e9e9e9',
|
||||
padding: '10px 16px',
|
||||
background: '#fff',
|
||||
textAlign: 'right',
|
||||
zIndex: 1,
|
||||
}"
|
||||
>
|
||||
<a-button :style="{ marginRight: '8px' }" @click="onClose">
|
||||
關閉
|
||||
</a-button>
|
||||
<a-button type="primary" @click="onSubmit">
|
||||
送出
|
||||
</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {addRole} from '@/services/role'
|
||||
// import {getTree} from '@/services/right'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'AddForm',
|
||||
data(){
|
||||
return {
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 16 },
|
||||
treeData: [],
|
||||
form: {
|
||||
name:'',
|
||||
desc:'',
|
||||
permission: [],
|
||||
status: true,
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '請輸入角色名稱', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
visible: Boolean
|
||||
},
|
||||
async created(){
|
||||
// let res = await getTree()
|
||||
// console.log(res.data)
|
||||
// this.treeData = res.data
|
||||
},
|
||||
methods:{
|
||||
onClose(){
|
||||
this.$refs.ruleForm.resetFields();
|
||||
this.$emit('close',true)
|
||||
},
|
||||
onSubmit(){
|
||||
console.log(this.form)
|
||||
this.$refs.ruleForm.validate(async valid => {
|
||||
if (valid) {
|
||||
let res = await addRole(this.form)
|
||||
if(res.code===200){
|
||||
this.$refs.ruleForm.resetFields();
|
||||
this.$emit('submit',true)
|
||||
}else{
|
||||
this.$message.error('新增失敗')
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
onSelect(selectedKeys, info) {
|
||||
console.log('selected', selectedKeys, info);
|
||||
},
|
||||
onCheck(checkedKeys, info) {
|
||||
console.log('onCheck', checkedKeys, info);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-drawer-header{
|
||||
background-color: #87e8de !important;
|
||||
.ant-drawer-title{
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
.ant-drawer-content-wrapper{
|
||||
width: 50% !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,158 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-drawer
|
||||
title="編輯角色"
|
||||
:destroyOnClose="true"
|
||||
:visible="visible"
|
||||
:body-style="{ paddingBottom: '80px' }"
|
||||
@close="onClose"
|
||||
>
|
||||
<a-spin :spinning="spinning">
|
||||
<div class="spin-content">
|
||||
<a-form-model
|
||||
ref="ruleForm"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
>
|
||||
<a-form-model-item label="角色名稱" ref="name" prop="name">
|
||||
<a-input
|
||||
v-model="form.name"
|
||||
@blur="
|
||||
() => {
|
||||
$refs.name.onFieldBlur();
|
||||
}
|
||||
"
|
||||
/>
|
||||
</a-form-model-item>
|
||||
|
||||
<a-form-model-item label="角色描述">
|
||||
<a-input v-model="form.desc" type="textarea" />
|
||||
</a-form-model-item>
|
||||
<!-- <a-form-model-item label="角色權限">
|
||||
<a-tree
|
||||
v-model="form.permission"
|
||||
checkable
|
||||
:tree-data="treeData"
|
||||
defaultExpandAll
|
||||
@select="onSelect"
|
||||
@check="onCheck"
|
||||
>
|
||||
<span slot="title0010" style="color: #1890ff">sss</span>
|
||||
</a-tree>
|
||||
</a-form-model-item> -->
|
||||
|
||||
</a-form-model>
|
||||
</div>
|
||||
</a-spin>
|
||||
<div
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
width: '100%',
|
||||
borderTop: '1px solid #e9e9e9',
|
||||
padding: '10px 16px',
|
||||
background: '#fff',
|
||||
textAlign: 'right',
|
||||
zIndex: 1,
|
||||
}"
|
||||
>
|
||||
<a-button :style="{ marginRight: '8px' }" @click="onClose">
|
||||
關閉
|
||||
</a-button>
|
||||
<a-button type="primary" @click="onSubmit">
|
||||
送出
|
||||
</a-button>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getRoleById, updateRole} from '@/services/role'
|
||||
// import {getTree} from '@/services/right'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'EditForm',
|
||||
data(){
|
||||
return {
|
||||
spinning: false,
|
||||
labelCol: { span: 8 },
|
||||
wrapperCol: { span: 16 },
|
||||
treeData: [],
|
||||
form: {},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '請輸入角色名稱', trigger: 'blur' },
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
visible: Boolean,
|
||||
editid: Number,
|
||||
},
|
||||
async created(){
|
||||
// let res = await getTree()
|
||||
// console.log(res.data)
|
||||
// this.treeData = res.data
|
||||
},
|
||||
watch: {
|
||||
editid: async function (val) {
|
||||
if(val){
|
||||
this.spinning=true
|
||||
let res=await getRoleById({id: val})
|
||||
this.form = res.data
|
||||
this.spinning=false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onClose(){
|
||||
this.form={}
|
||||
this.$refs.ruleForm.resetFields();
|
||||
this.$emit('close',true)
|
||||
},
|
||||
onSubmit(){
|
||||
console.log(this.form)
|
||||
this.$refs.ruleForm.validate(async valid => {
|
||||
if (valid || 1===2) {
|
||||
let res = await updateRole(this.form)
|
||||
if(res.code===200){
|
||||
this.$refs.ruleForm.resetFields();
|
||||
this.$emit('submit',true)
|
||||
}else{
|
||||
this.$message.error('編輯失敗')
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
onSelect(selectedKeys, info) {
|
||||
console.log('selected', selectedKeys, info);
|
||||
},
|
||||
onCheck(checkedKeys, info) {
|
||||
// console.log(checkedKeys.concat(info.halfCheckedKeys))
|
||||
// this.form.permission=checkedKeys.concat(info.halfCheckedKeys)
|
||||
console.log('onCheck', checkedKeys, info);
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ant-drawer-header{
|
||||
background-color: #87e8de !important;
|
||||
.ant-drawer-title{
|
||||
color: #FFF !important;
|
||||
}
|
||||
}
|
||||
.ant-drawer-content-wrapper{
|
||||
width: 50% !important;
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue