commit
4b0994ec32
68 changed files with 22883 additions and 0 deletions
@ -0,0 +1,3 @@ |
|||||||
|
> 1% |
||||||
|
last 2 versions |
||||||
|
not ie <= 8 |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
.DS_Store |
||||||
|
node_modules |
||||||
|
/dist |
||||||
|
example.html |
||||||
|
favicon.ico |
||||||
|
# local env files |
||||||
|
.env.local |
||||||
|
.env.*.local |
||||||
|
|
||||||
|
# Log files |
||||||
|
npm-debug.log* |
||||||
|
yarn-debug.log* |
||||||
|
yarn-error.log* |
||||||
|
|
||||||
|
# Editor directories and files |
||||||
|
.idea |
||||||
|
.vscode |
||||||
|
*.suo |
||||||
|
*.ntvs* |
||||||
|
*.njsproj |
||||||
|
*.sln |
||||||
|
*.sw* |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
{ |
||||||
|
"tabWidth": 4, |
||||||
|
"singleQuote": true, |
||||||
|
"trailingComma": "none", |
||||||
|
"printWidth": 140 |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
MIT License |
||||||
|
|
||||||
|
Copyright (c) 2016-2019 vue-manage-system |
||||||
|
|
||||||
|
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,5 @@ |
|||||||
|
module.exports = { |
||||||
|
presets: [ |
||||||
|
'@vue/app' |
||||||
|
] |
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,35 @@ |
|||||||
|
{ |
||||||
|
"name": "vue-manage-system", |
||||||
|
"version": "4.2.0", |
||||||
|
"private": true, |
||||||
|
"scripts": { |
||||||
|
"dev": "npm run serve", |
||||||
|
"serve": "vue-cli-service serve", |
||||||
|
"build": "vue-cli-service build" |
||||||
|
}, |
||||||
|
"dependencies": { |
||||||
|
"axios": "^0.18.0", |
||||||
|
"babel-polyfill": "^6.26.0", |
||||||
|
"element-theme": "^2.0.1", |
||||||
|
"element-ui": "^2.13.0", |
||||||
|
"mavon-editor": "^2.6.17", |
||||||
|
"postcss-px2rem": "^0.3.0", |
||||||
|
"px2rem-loader": "^0.1.9", |
||||||
|
"vue": "^2.6.10", |
||||||
|
"vue-cropperjs": "^3.0.0", |
||||||
|
"vue-i18n": "^8.10.0", |
||||||
|
"vue-quill-editor": "^3.0.6", |
||||||
|
"vue-router": "^3.0.3", |
||||||
|
"vue-schart": "^2.0.0", |
||||||
|
"vuedraggable": "^2.17.0", |
||||||
|
"vuex": "^3.1.2" |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"@vue/cli-plugin-babel": "^3.9.0", |
||||||
|
"@vue/cli-service": "^3.9.0", |
||||||
|
"element-theme-chalk": "^2.13.0", |
||||||
|
"node-sass": "^4.13.0", |
||||||
|
"sass-loader": "^8.0.0", |
||||||
|
"vue-template-compiler": "^2.6.10" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
module.exports = { |
||||||
|
plugins: { |
||||||
|
autoprefixer: {} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="en"> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
||||||
|
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> |
||||||
|
<title>vue-manage-system</title> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<noscript> |
||||||
|
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||||
|
</noscript> |
||||||
|
<div id="app"></div> |
||||||
|
<!-- built files will be auto injected --> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
{ |
||||||
|
"list": [{ |
||||||
|
"id": 1, |
||||||
|
"name": "张三", |
||||||
|
"money": 123, |
||||||
|
"address": "广东省东莞市长安镇", |
||||||
|
"state": "成功", |
||||||
|
"date": "2019-11-1", |
||||||
|
"thumb": "https://lin-xin.gitee.io/images/post/wms.png" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 2, |
||||||
|
"name": "李四", |
||||||
|
"money": 456, |
||||||
|
"address": "广东省广州市白云区", |
||||||
|
"state": "成功", |
||||||
|
"date": "2019-10-11", |
||||||
|
"thumb": "https://lin-xin.gitee.io/images/post/node3.png" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 3, |
||||||
|
"name": "王五", |
||||||
|
"money": 789, |
||||||
|
"address": "湖南省长沙市", |
||||||
|
"state": "失败", |
||||||
|
"date": "2019-11-11", |
||||||
|
"thumb": "https://lin-xin.gitee.io/images/post/parcel.png" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": 4, |
||||||
|
"name": "赵六", |
||||||
|
"money": 1011, |
||||||
|
"address": "福建省厦门市鼓浪屿", |
||||||
|
"state": "成功", |
||||||
|
"date": "2019-10-20", |
||||||
|
"thumb": "https://lin-xin.gitee.io/images/post/notice.png" |
||||||
|
} |
||||||
|
], |
||||||
|
"pageTotal": 4 |
||||||
|
} |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
<template> |
||||||
|
<div id="app"> |
||||||
|
<router-view></router-view> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'App', |
||||||
|
created () { |
||||||
|
//在页面加载时读取sessionStorage里的状态信息 |
||||||
|
if (sessionStorage.getItem("store") ) { |
||||||
|
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) |
||||||
|
} |
||||||
|
|
||||||
|
//在页面刷新时将vuex里的信息保存到sessionStorage里 |
||||||
|
window.addEventListener("beforeunload",()=>{ |
||||||
|
sessionStorage.setItem("store",JSON.stringify(this.$store.state)) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
@import "./assets/css/main.css"; |
||||||
|
/* @import "./assets/css/color-dark.css"; */ |
||||||
|
/*深色主题*/ |
||||||
|
@import "./assets/css/theme-green/color-green.css"; |
||||||
|
/* 浅绿色主题 */ |
||||||
|
</style> |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
.header{ |
||||||
|
background-color: #242f42; |
||||||
|
} |
||||||
|
.login-wrap{ |
||||||
|
background: #324157; |
||||||
|
} |
||||||
|
.plugins-tips{ |
||||||
|
background: #eef1f6; |
||||||
|
} |
||||||
|
.plugins-tips a{ |
||||||
|
color: #20a0ff; |
||||||
|
} |
||||||
|
.el-upload--text em { |
||||||
|
color: #20a0ff; |
||||||
|
} |
||||||
|
.pure-button{ |
||||||
|
background: #20a0ff; |
||||||
|
} |
||||||
|
.tags-li.active { |
||||||
|
border: 1px solid #409EFF; |
||||||
|
background-color: #409EFF; |
||||||
|
} |
||||||
|
.message-title{ |
||||||
|
color: #20a0ff; |
||||||
|
} |
||||||
|
.collapse-btn:hover{ |
||||||
|
background: rgb(40,52,70); |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
|
||||||
|
[class*=" icon-"], [class^=icon-] { |
||||||
|
font-family: iconfont!important; |
||||||
|
} |
||||||
@ -0,0 +1,321 @@ |
|||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
html, |
||||||
|
body, |
||||||
|
#app, |
||||||
|
.wrapper { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
text-decoration: none |
||||||
|
} |
||||||
|
i{ |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
li { |
||||||
|
list-style-type:none; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.content-box { |
||||||
|
padding-bottom: 30px; |
||||||
|
-webkit-transition: left .3s ease-in-out; |
||||||
|
transition: left .3s ease-in-out; |
||||||
|
background: #f0f0f0; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
width: auto; |
||||||
|
height: 100%; |
||||||
|
padding: 20px; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
.content-collapse { |
||||||
|
left: 65px; |
||||||
|
} |
||||||
|
|
||||||
|
.container { |
||||||
|
padding: 30px; |
||||||
|
background: #fff; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.crumbs { |
||||||
|
margin: 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.el-table th { |
||||||
|
background-color: #f5f7fa !important; |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin: 20px 0; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.plugins-tips { |
||||||
|
padding: 20px 10px; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-button+.el-tooltip { |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-table tr:hover { |
||||||
|
background: #f6faff; |
||||||
|
} |
||||||
|
|
||||||
|
.orderTable td .el-input{ |
||||||
|
width: 60%; |
||||||
|
} |
||||||
|
|
||||||
|
.orderTable .el-select>.el-input{ |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.mgb20 { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.move-enter-active, |
||||||
|
.move-leave-active { |
||||||
|
transition: opacity .5s; |
||||||
|
} |
||||||
|
|
||||||
|
.move-enter, |
||||||
|
.move-leave { |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/*BaseForm*/ |
||||||
|
|
||||||
|
.form-box { |
||||||
|
width: 600px; |
||||||
|
} |
||||||
|
|
||||||
|
.form-box .line { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.el-time-panel__content::after, |
||||||
|
.el-time-panel__content::before { |
||||||
|
margin-top: -7px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) { |
||||||
|
padding-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
/*Upload*/ |
||||||
|
|
||||||
|
.pure-button { |
||||||
|
width: 150px; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.g-core-image-corp-container .info-aside { |
||||||
|
height: 45px; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-uploader .el-upload--text { |
||||||
|
background-color: #fff; |
||||||
|
border: 1px dashed #d9d9d9; |
||||||
|
border-radius: 6px; |
||||||
|
box-sizing: border-box; |
||||||
|
width: 360px; |
||||||
|
height: 180px; |
||||||
|
text-align: center; |
||||||
|
cursor: pointer; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-uploader .el-upload--text .el-icon-upload { |
||||||
|
font-size: 67px; |
||||||
|
color: #97a8be; |
||||||
|
margin: 40px 0 16px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-uploader .el-upload--text { |
||||||
|
color: #97a8be; |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-uploader .el-upload--text em { |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
|
||||||
|
/* .link_upload .el-upload-list{ |
||||||
|
width: 30%; |
||||||
|
} */ |
||||||
|
|
||||||
|
/*VueEditor*/ |
||||||
|
|
||||||
|
.ql-container { |
||||||
|
min-height: 400px; |
||||||
|
} |
||||||
|
|
||||||
|
.ql-snow .ql-tooltip { |
||||||
|
transform: translateX(117.5px) translateY(10px) !important; |
||||||
|
} |
||||||
|
|
||||||
|
.editor-btn { |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
/*markdown*/ |
||||||
|
|
||||||
|
.v-note-wrapper .v-note-panel { |
||||||
|
min-height: 500px; |
||||||
|
} |
||||||
|
|
||||||
|
.ms-login .el-tabs__nav-wrap::after{ |
||||||
|
background-color: #fff; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__item{ |
||||||
|
padding: 0 90px; |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__item:hover{ |
||||||
|
color: #000; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__item.is-active{ |
||||||
|
color: #333; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__active-bar{ |
||||||
|
background-color: #000; |
||||||
|
border-radius:2px; |
||||||
|
} |
||||||
|
.ms-login .el-tabs__nav-scroll{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.ms-login .el-input__inner{ |
||||||
|
height: 80px; |
||||||
|
line-height: 80px; |
||||||
|
border:1px solid rgba(220,220,220,1); |
||||||
|
border-radius:2px; |
||||||
|
} |
||||||
|
|
||||||
|
.el-row { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.mgb20 { |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
#app .el-table thead{ |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
#app .el-table th{ |
||||||
|
background-color: #9278FF!important; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
#app .el-select{ |
||||||
|
display: unset; |
||||||
|
} |
||||||
|
|
||||||
|
/*flex*/ |
||||||
|
.flex-center{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.flex-between{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
.flex-around{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-around; |
||||||
|
} |
||||||
|
.flex-start-around{ |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.flex-end-around{ |
||||||
|
display: flex; |
||||||
|
align-items: flex-end; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.flex-column{ |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.flex-start{ |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
} |
||||||
|
|
||||||
|
.hr_tag{ |
||||||
|
background-color: #9278FF; |
||||||
|
width: 3px; |
||||||
|
height: 15px; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.user_header{ |
||||||
|
padding: 20px 0; |
||||||
|
border-bottom: 1px dashed #eee; |
||||||
|
} |
||||||
|
.addhr_tag{ |
||||||
|
background-color: #666; |
||||||
|
width: 6px; |
||||||
|
height: 17px; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.per_title span{ |
||||||
|
font-size: 16px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.per_back{ |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
.per_school{ |
||||||
|
margin-left: 30px; |
||||||
|
} |
||||||
|
.per_title:hover{ |
||||||
|
cursor:pointer; |
||||||
|
} |
||||||
|
|
||||||
|
/* 溢出省略号 */ |
||||||
|
.ellipsis{ |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.userRadio .el-radio{ |
||||||
|
margin-right: 10px!important; |
||||||
|
} |
||||||
|
.userRadio .el-radio__input{ |
||||||
|
display: none!important; |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
.header{ |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
.login-wrap{ |
||||||
|
background: rgba(56, 157, 170, 0.82);; |
||||||
|
} |
||||||
|
.plugins-tips{ |
||||||
|
background: #f2f2f2; |
||||||
|
} |
||||||
|
.plugins-tips a{ |
||||||
|
color: #00d1b2; |
||||||
|
} |
||||||
|
.el-upload--text em { |
||||||
|
color: #00d1b2; |
||||||
|
} |
||||||
|
.pure-button{ |
||||||
|
background: #00d1b2; |
||||||
|
} |
||||||
|
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { |
||||||
|
background-color: #00d1b2 !important; |
||||||
|
border-color: #00d1b2 !important; |
||||||
|
} |
||||||
|
.tags-li.active { |
||||||
|
border: 1px solid #9278FF; |
||||||
|
background-color: #9278FF; |
||||||
|
} |
||||||
|
.collapse-btn:hover{ |
||||||
|
background: #00d1b2; |
||||||
|
} |
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,539 @@ |
|||||||
|
/* Logo 字体 */ |
||||||
|
@font-face { |
||||||
|
font-family: "iconfont logo"; |
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||||
|
} |
||||||
|
|
||||||
|
.logo { |
||||||
|
font-family: "iconfont logo"; |
||||||
|
font-size: 160px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
/* tabs */ |
||||||
|
.nav-tabs { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.nav-tabs .nav-more { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
height: 42px; |
||||||
|
line-height: 42px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
#tabs { |
||||||
|
border-bottom: 1px solid #eee; |
||||||
|
} |
||||||
|
|
||||||
|
#tabs li { |
||||||
|
cursor: pointer; |
||||||
|
width: 100px; |
||||||
|
height: 40px; |
||||||
|
line-height: 40px; |
||||||
|
text-align: center; |
||||||
|
font-size: 16px; |
||||||
|
border-bottom: 2px solid transparent; |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
margin-bottom: -1px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
#tabs .active { |
||||||
|
border-bottom-color: #f00; |
||||||
|
color: #222; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-container .content { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
/* 页面布局 */ |
||||||
|
.main { |
||||||
|
padding: 30px 100px; |
||||||
|
width: 960px; |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
|
||||||
|
.main .logo { |
||||||
|
color: #333; |
||||||
|
text-align: left; |
||||||
|
margin-bottom: 30px; |
||||||
|
line-height: 1; |
||||||
|
height: 110px; |
||||||
|
margin-top: -50px; |
||||||
|
overflow: hidden; |
||||||
|
*zoom: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.main .logo a { |
||||||
|
font-size: 160px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.helps { |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.helps pre { |
||||||
|
padding: 20px; |
||||||
|
margin: 10px 0; |
||||||
|
border: solid 1px #e7e1cd; |
||||||
|
background-color: #fffdef; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists { |
||||||
|
width: 100% !important; |
||||||
|
overflow: hidden; |
||||||
|
*zoom: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists li { |
||||||
|
width: 100px; |
||||||
|
margin-bottom: 10px; |
||||||
|
margin-right: 20px; |
||||||
|
text-align: center; |
||||||
|
list-style: none !important; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists li .code-name { |
||||||
|
line-height: 1.2; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists .icon { |
||||||
|
display: block; |
||||||
|
height: 100px; |
||||||
|
line-height: 100px; |
||||||
|
font-size: 42px; |
||||||
|
margin: 10px auto; |
||||||
|
color: #333; |
||||||
|
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||||
|
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||||
|
transition: font-size 0.25s linear, width 0.25s linear; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists .icon:hover { |
||||||
|
font-size: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists .svg-icon { |
||||||
|
/* 通过设置 font-size 来改变图标大小 */ |
||||||
|
width: 1em; |
||||||
|
/* 图标和文字相邻时，垂直对齐 */ |
||||||
|
vertical-align: -0.15em; |
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||||
|
fill: currentColor; |
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||||
|
normalize.css 中也包含这行 */ |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.icon_lists li .name, |
||||||
|
.icon_lists li .code-name { |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
/* markdown 样式 */ |
||||||
|
.markdown { |
||||||
|
color: #666; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 1.8; |
||||||
|
} |
||||||
|
|
||||||
|
.highlight { |
||||||
|
line-height: 1.5; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown img { |
||||||
|
vertical-align: middle; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h1 { |
||||||
|
color: #404040; |
||||||
|
font-weight: 500; |
||||||
|
line-height: 40px; |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h2, |
||||||
|
.markdown h3, |
||||||
|
.markdown h4, |
||||||
|
.markdown h5, |
||||||
|
.markdown h6 { |
||||||
|
color: #404040; |
||||||
|
margin: 1.6em 0 0.6em 0; |
||||||
|
font-weight: 500; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h1 { |
||||||
|
font-size: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h2 { |
||||||
|
font-size: 22px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h3 { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h4 { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h5 { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h6 { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown hr { |
||||||
|
height: 1px; |
||||||
|
border: 0; |
||||||
|
background: #e9e9e9; |
||||||
|
margin: 16px 0; |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown p { |
||||||
|
margin: 1em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>p, |
||||||
|
.markdown>blockquote, |
||||||
|
.markdown>.highlight, |
||||||
|
.markdown>ol, |
||||||
|
.markdown>ul { |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown ul>li { |
||||||
|
list-style: circle; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>ul li, |
||||||
|
.markdown blockquote ul>li { |
||||||
|
margin-left: 20px; |
||||||
|
padding-left: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>ul li p, |
||||||
|
.markdown>ol li p { |
||||||
|
margin: 0.6em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown ol>li { |
||||||
|
list-style: decimal; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>ol li, |
||||||
|
.markdown blockquote ol>li { |
||||||
|
margin-left: 20px; |
||||||
|
padding-left: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown code { |
||||||
|
margin: 0 3px; |
||||||
|
padding: 0 5px; |
||||||
|
background: #eee; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown strong, |
||||||
|
.markdown b { |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>table { |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0px; |
||||||
|
empty-cells: show; |
||||||
|
border: 1px solid #e9e9e9; |
||||||
|
width: 95%; |
||||||
|
margin-bottom: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>table th { |
||||||
|
white-space: nowrap; |
||||||
|
color: #333; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>table th, |
||||||
|
.markdown>table td { |
||||||
|
border: 1px solid #e9e9e9; |
||||||
|
padding: 8px 16px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>table th { |
||||||
|
background: #F7F7F7; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown blockquote { |
||||||
|
font-size: 90%; |
||||||
|
color: #999; |
||||||
|
border-left: 4px solid #e9e9e9; |
||||||
|
padding-left: 0.8em; |
||||||
|
margin: 1em 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown blockquote p { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown .anchor { |
||||||
|
opacity: 0; |
||||||
|
transition: opacity 0.3s ease; |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown .waiting { |
||||||
|
color: #ccc; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown h1:hover .anchor, |
||||||
|
.markdown h2:hover .anchor, |
||||||
|
.markdown h3:hover .anchor, |
||||||
|
.markdown h4:hover .anchor, |
||||||
|
.markdown h5:hover .anchor, |
||||||
|
.markdown h6:hover .anchor { |
||||||
|
opacity: 1; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.markdown>br, |
||||||
|
.markdown>p>br { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.hljs { |
||||||
|
display: block; |
||||||
|
background: white; |
||||||
|
padding: 0.5em; |
||||||
|
color: #333333; |
||||||
|
overflow-x: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-comment, |
||||||
|
.hljs-meta { |
||||||
|
color: #969896; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-string, |
||||||
|
.hljs-variable, |
||||||
|
.hljs-template-variable, |
||||||
|
.hljs-strong, |
||||||
|
.hljs-emphasis, |
||||||
|
.hljs-quote { |
||||||
|
color: #df5000; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-keyword, |
||||||
|
.hljs-selector-tag, |
||||||
|
.hljs-type { |
||||||
|
color: #a71d5d; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-literal, |
||||||
|
.hljs-symbol, |
||||||
|
.hljs-bullet, |
||||||
|
.hljs-attribute { |
||||||
|
color: #0086b3; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-section, |
||||||
|
.hljs-name { |
||||||
|
color: #63a35c; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-tag { |
||||||
|
color: #333333; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-title, |
||||||
|
.hljs-attr, |
||||||
|
.hljs-selector-id, |
||||||
|
.hljs-selector-class, |
||||||
|
.hljs-selector-attr, |
||||||
|
.hljs-selector-pseudo { |
||||||
|
color: #795da3; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-addition { |
||||||
|
color: #55a532; |
||||||
|
background-color: #eaffea; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-deletion { |
||||||
|
color: #bd2c00; |
||||||
|
background-color: #ffecec; |
||||||
|
} |
||||||
|
|
||||||
|
.hljs-link { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
/* 代码高亮 */ |
||||||
|
/* PrismJS 1.15.0 |
||||||
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||||
|
/** |
||||||
|
* prism.js default theme for JavaScript, CSS and HTML |
||||||
|
* Based on dabblet (http://dabblet.com) |
||||||
|
* @author Lea Verou |
||||||
|
*/ |
||||||
|
code[class*="language-"], |
||||||
|
pre[class*="language-"] { |
||||||
|
color: black; |
||||||
|
background: none; |
||||||
|
text-shadow: 0 1px white; |
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||||
|
text-align: left; |
||||||
|
white-space: pre; |
||||||
|
word-spacing: normal; |
||||||
|
word-break: normal; |
||||||
|
word-wrap: normal; |
||||||
|
line-height: 1.5; |
||||||
|
|
||||||
|
-moz-tab-size: 4; |
||||||
|
-o-tab-size: 4; |
||||||
|
tab-size: 4; |
||||||
|
|
||||||
|
-webkit-hyphens: none; |
||||||
|
-moz-hyphens: none; |
||||||
|
-ms-hyphens: none; |
||||||
|
hyphens: none; |
||||||
|
} |
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection, |
||||||
|
pre[class*="language-"] ::-moz-selection, |
||||||
|
code[class*="language-"]::-moz-selection, |
||||||
|
code[class*="language-"] ::-moz-selection { |
||||||
|
text-shadow: none; |
||||||
|
background: #b3d4fc; |
||||||
|
} |
||||||
|
|
||||||
|
pre[class*="language-"]::selection, |
||||||
|
pre[class*="language-"] ::selection, |
||||||
|
code[class*="language-"]::selection, |
||||||
|
code[class*="language-"] ::selection { |
||||||
|
text-shadow: none; |
||||||
|
background: #b3d4fc; |
||||||
|
} |
||||||
|
|
||||||
|
@media print { |
||||||
|
|
||||||
|
code[class*="language-"], |
||||||
|
pre[class*="language-"] { |
||||||
|
text-shadow: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Code blocks */ |
||||||
|
pre[class*="language-"] { |
||||||
|
padding: 1em; |
||||||
|
margin: .5em 0; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
:not(pre)>code[class*="language-"], |
||||||
|
pre[class*="language-"] { |
||||||
|
background: #f5f2f0; |
||||||
|
} |
||||||
|
|
||||||
|
/* Inline code */ |
||||||
|
:not(pre)>code[class*="language-"] { |
||||||
|
padding: .1em; |
||||||
|
border-radius: .3em; |
||||||
|
white-space: normal; |
||||||
|
} |
||||||
|
|
||||||
|
.token.comment, |
||||||
|
.token.prolog, |
||||||
|
.token.doctype, |
||||||
|
.token.cdata { |
||||||
|
color: slategray; |
||||||
|
} |
||||||
|
|
||||||
|
.token.punctuation { |
||||||
|
color: #999; |
||||||
|
} |
||||||
|
|
||||||
|
.namespace { |
||||||
|
opacity: .7; |
||||||
|
} |
||||||
|
|
||||||
|
.token.property, |
||||||
|
.token.tag, |
||||||
|
.token.boolean, |
||||||
|
.token.number, |
||||||
|
.token.constant, |
||||||
|
.token.symbol, |
||||||
|
.token.deleted { |
||||||
|
color: #905; |
||||||
|
} |
||||||
|
|
||||||
|
.token.selector, |
||||||
|
.token.attr-name, |
||||||
|
.token.string, |
||||||
|
.token.char, |
||||||
|
.token.builtin, |
||||||
|
.token.inserted { |
||||||
|
color: #690; |
||||||
|
} |
||||||
|
|
||||||
|
.token.operator, |
||||||
|
.token.entity, |
||||||
|
.token.url, |
||||||
|
.language-css .token.string, |
||||||
|
.style .token.string { |
||||||
|
color: #9a6e3a; |
||||||
|
background: hsla(0, 0%, 100%, .5); |
||||||
|
} |
||||||
|
|
||||||
|
.token.atrule, |
||||||
|
.token.attr-value, |
||||||
|
.token.keyword { |
||||||
|
color: #07a; |
||||||
|
} |
||||||
|
|
||||||
|
.token.function, |
||||||
|
.token.class-name { |
||||||
|
color: #DD4A68; |
||||||
|
} |
||||||
|
|
||||||
|
.token.regex, |
||||||
|
.token.important, |
||||||
|
.token.variable { |
||||||
|
color: #e90; |
||||||
|
} |
||||||
|
|
||||||
|
.token.important, |
||||||
|
.token.bold { |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.token.italic { |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
.token.entity { |
||||||
|
cursor: help; |
||||||
|
} |
||||||
@ -0,0 +1,216 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"/> |
||||||
|
<title>IconFont Demo</title> |
||||||
|
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||||
|
<link rel="stylesheet" href="demo.css"> |
||||||
|
<link rel="stylesheet" href="iconfont.css"> |
||||||
|
<script src="iconfont.js"></script> |
||||||
|
<!-- jQuery --> |
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||||
|
<!-- 代码高亮 --> |
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="main"> |
||||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||||
|
<div class="nav-tabs"> |
||||||
|
<ul id="tabs" class="dib-box"> |
||||||
|
<li class="dib active"><span>Unicode</span></li> |
||||||
|
<li class="dib"><span>Font class</span></li> |
||||||
|
<li class="dib"><span>Symbol</span></li> |
||||||
|
</ul> |
||||||
|
|
||||||
|
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1540265" target="_blank" class="nav-more">查看项目</a> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="tab-container"> |
||||||
|
<div class="content unicode" style="display: block;"> |
||||||
|
<ul class="icon_lists dib-box"> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">qq</div> |
||||||
|
<div class="code-name">&#xe614;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont"></span> |
||||||
|
<div class="name">微信-36</div> |
||||||
|
<div class="code-name">&#xe68a;</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="unicode-">Unicode 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||||
|
<ul> |
||||||
|
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li> |
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||||
|
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li> |
||||||
|
</ul> |
||||||
|
<blockquote> |
||||||
|
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p> |
||||||
|
</blockquote> |
||||||
|
<p>Unicode 使用步骤如下：</p> |
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||||
|
<pre><code class="language-css" |
||||||
|
>@font-face { |
||||||
|
font-family: 'iconfont'; |
||||||
|
src: url('iconfont.eot'); |
||||||
|
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||||
|
url('iconfont.woff2') format('woff2'), |
||||||
|
url('iconfont.woff') format('woff'), |
||||||
|
url('iconfont.ttf') format('truetype'), |
||||||
|
url('iconfont.svg#iconfont') format('svg'); |
||||||
|
} |
||||||
|
</code></pre> |
||||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||||
|
<pre><code class="language-css" |
||||||
|
>.iconfont { |
||||||
|
font-family: "iconfont" !important; |
||||||
|
font-size: 16px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
</code></pre> |
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||||
|
<pre> |
||||||
|
<code class="language-html" |
||||||
|
><span class="iconfont">&#x33;</span> |
||||||
|
</code></pre> |
||||||
|
<blockquote> |
||||||
|
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||||
|
</blockquote> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content font-class"> |
||||||
|
<ul class="icon_lists dib-box"> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-qq"></span> |
||||||
|
<div class="name"> |
||||||
|
qq |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-qq |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<span class="icon iconfont icon-weixin"></span> |
||||||
|
<div class="name"> |
||||||
|
微信-36 |
||||||
|
</div> |
||||||
|
<div class="code-name">.icon-weixin |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="font-class-">font-class 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||||
|
<ul> |
||||||
|
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li> |
||||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||||
|
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> |
||||||
|
</ul> |
||||||
|
<p>使用步骤如下：</p> |
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||||
|
</code></pre> |
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||||
|
</code></pre> |
||||||
|
<blockquote> |
||||||
|
<p>" |
||||||
|
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||||
|
</blockquote> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content symbol"> |
||||||
|
<ul class="icon_lists dib-box"> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-qq"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">qq</div> |
||||||
|
<div class="code-name">#icon-qq</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li class="dib"> |
||||||
|
<svg class="icon svg-icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-weixin"></use> |
||||||
|
</svg> |
||||||
|
<div class="name">微信-36</div> |
||||||
|
<div class="code-name">#icon-weixin</div> |
||||||
|
</li> |
||||||
|
|
||||||
|
</ul> |
||||||
|
<div class="article markdown"> |
||||||
|
<h2 id="symbol-">Symbol 引用</h2> |
||||||
|
<hr> |
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||||
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||||
|
<ul> |
||||||
|
<li>支持多色图标了，不再受单色限制。</li> |
||||||
|
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||||
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||||
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||||
|
</ul> |
||||||
|
<p>使用步骤如下：</p> |
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||||
|
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||||
|
</code></pre> |
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||||
|
<pre><code class="language-html"><style> |
||||||
|
.icon { |
||||||
|
width: 1em; |
||||||
|
height: 1em; |
||||||
|
vertical-align: -0.15em; |
||||||
|
fill: currentColor; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
</style> |
||||||
|
</code></pre> |
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||||
|
<use xlink:href="#icon-xxx"></use> |
||||||
|
</svg> |
||||||
|
</code></pre> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<script> |
||||||
|
$(document).ready(function () { |
||||||
|
$('.tab-container .content:first').show() |
||||||
|
|
||||||
|
$('#tabs li').click(function (e) { |
||||||
|
var tabContent = $('.tab-container .content') |
||||||
|
var index = $(this).index() |
||||||
|
|
||||||
|
if ($(this).hasClass('active')) { |
||||||
|
return |
||||||
|
} else { |
||||||
|
$('#tabs li').removeClass('active') |
||||||
|
$(this).addClass('active') |
||||||
|
|
||||||
|
tabContent.hide().eq(index).fadeIn() |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
@font-face {font-family: "iconfont"; |
||||||
|
src: url('iconfont.eot?t=1575276931647'); /* IE9 */ |
||||||
|
src: url('iconfont.eot?t=1575276931647#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||||
|
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPsAAsAAAAACDgAAAOgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEIIM8ATYCJAMMCwgABCAFhG0HNRsBB1GUCU5L9kOSpEiSIghFFRFAAAAgoD7kJrmxBQCMePh+rvfc5CUfGOX3xfGrCgRCdW0RhAJ0VTy+mkCxq6Yju6rnINbRqNl17/X22SkR8pXBIYAY2X/0g3PDEqu4NE289EHSFHl+xVyb7X8oSIn3iXunf5T4fJblNOaiPfhTF2A0gQLam7oosAALabE1jN1EeRDnCdQbFkpYnV9aS4wkYFogDskkXcQoZZVqykOtUJasTeKCQm12MnuJOM9fH79EhxGZIgfmVvbk9ZLMiV8Fv5V8iqnaRAmWbDw3tE3kWEQitpR618nDxKJcvaNN9fmlJGRjhf//h0tdfbnSP15GlASUNoJZMZnxtRMLCb6eSspw/psoUYe7eC8ZU9+qmsasRitTU3v0Xrte/erpfwP5rUOf9oiDiMg4BpSAv4FsvRSwW4vF2Ws7RTzejYbidaEwtJLG79f3jmCdPD92TW5E4mgzGQm3k/LMQUQkB7oWIciTrmkCpmoO2ScUrLjgUbAaZlWvgJWIKBqHbqwJOxYvdyNUG3yLwYpHpqY7Mvp9tqKdbBCD+KY43F6cqmJOvOUB8D5CM2iIMv4VGawWp5l9EHh45CtMszYPvOjMCAmBXitjfxxg1fzrC4a3QW1t5I3mU+MrrcEUsqy9rU6bH0XuqjXwFvDF/2b4HRVWZOjHopl5Qlu5scXmqjzd2rDP+3Pvfepay8eUR/Xlr6bycdn8dJ/hRVNxr6bpfVlfmVpafXNfeQmpDGWbkB/on+1gnfl3nY9JVLVeFjaY1Pe9UPOwsbh307q8VbmfTAwcGTwDdIHH/DX9ObDVMvWfkelVNb2r/z3LJ/yvJnkVtTftC36irGVNchXAlidbiqV+OreZ4SuyqHd1fl0ltPvWX9/VupRQqytGpsYQcrUmycReRKHBEkq1lqHegoLNDTowuiLVYd68gNDqCjLNniPX6imZ2F9R6PYHpdbQRb01Ybtng+mQmeQw7OLYC93DIOuhahE5uElQXo2SfmUXSyo4px6ZVhaGqPDIbLoA1cjGWKAdkERzLoLIqAryhctQqaSgYVSOPTxcyrkmOSJCLLtTeA9VEROrMKgLh3qBbsOATA9KTaSNOZPc86shiX5KXVgNoyNaDzFast5BlHCRLcgCrboV41pu0RogEY3jREDEUCogX3AjJUxQQFM+Sg714MJJe8Q0kkVI9cS22vD59arn2wX1wFF5ZJFHkh3vMxhE2ZBMTQg=') format('woff2'), |
||||||
|
url('iconfont.woff?t=1575276931647') format('woff'), |
||||||
|
url('iconfont.ttf?t=1575276931647') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||||
|
url('iconfont.svg?t=1575276931647#iconfont') format('svg'); /* iOS 4.1- */ |
||||||
|
} |
||||||
|
|
||||||
|
.iconfont { |
||||||
|
font-family: "iconfont" !important; |
||||||
|
font-size: 16px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-qq:before { |
||||||
|
content: "\e614"; |
||||||
|
font-size: 60px; |
||||||
|
color: #22aaf8; |
||||||
|
margin-left: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
.icon-weixin:before { |
||||||
|
content: "\e68a"; |
||||||
|
font-size: 60px; |
||||||
|
color: #10b747; |
||||||
|
margin-right: 32px; |
||||||
|
} |
||||||
|
|
||||||
Binary file not shown.
@ -0,0 +1 @@ |
|||||||
|
!function(l){var e,d='<svg><symbol id="icon-qq" viewBox="0 0 1024 1024"><path d="M512 1024C229.226667 1024 0 794.773333 0 512 0 229.226667 229.226667 0 512 0 794.773333 0 1024 229.226667 1024 512 1024 794.773333 794.773333 1024 512 1024ZM693.333333 458.666667C689.024 438.634667 682.666667 426.666667 682.666667 426.666667 682.666667 426.666667 682.944 397.333333 650.666667 330.666667 618.389333 264 522.666667 256 522.666667 256L512 256C512 256 416.277333 264 384 330.666667 351.722667 397.333333 352 426.666667 352 426.666667 352 426.666667 345.642667 438.634667 341.333333 458.666667 337.024 478.698667 341.333333 490.666667 341.333333 490.666667 341.333333 490.666667 286.656 546.421333 288 586.666667 289.344 626.912 299.221333 652.544 320 629.333333 340.778667 606.122667 341.333333 608 341.333333 608 341.333333 608 340.970667 625.333333 352 640 363.029333 654.666667 373.333333 661.333333 373.333333 661.333333 373.333333 661.333333 317.386667 689.034667 330.666667 725.333333 343.946667 761.632 384.874667 768.288 416 768 447.125333 767.712 512 746.666667 512 746.666667L522.666667 746.666667C522.666667 746.666667 587.541333 767.712 618.666667 768 649.792 768.288 690.72 761.632 704 725.333333 717.28 689.034667 661.333333 661.333333 661.333333 661.333333 661.333333 661.333333 671.637333 654.666667 682.666667 640 693.696 625.333333 693.333333 608 693.333333 608 693.333333 608 693.888 606.122667 714.666667 629.333333 735.445333 652.544 745.322667 626.912 746.666667 586.666667 748.010667 546.421333 693.333333 490.666667 693.333333 490.666667 693.333333 490.666667 697.642667 478.698667 693.333333 458.666667Z" ></path></symbol><symbol id="icon-weixin" viewBox="0 0 1024 1024"><path d="M512 1024C229.2 1024 0 794.8 0 512S229.2 0 512 0s512 229.2 512 512-229.2 512-512 512z m105.6-582.1c-91.1 0-164.9 63.6-164.9 139.3 0 81.5 73.8 145.1 164.9 148.6 25.8-3.5 50.1-8.7 73.3-18.6l45.8 27.9-9.2-46.4c32.6-26.8 54.9-65.4 54.9-111.4 0.1-75.7-73.7-139.4-164.8-139.4z m-54.9 111.4c-17.2 0-27.5-10.4-27.5-27.9 0-8.2 10.3-18.6 27.5-18.6 8.1 0 18.3 10.4 18.3 18.6 0 17.5-10.2 27.9-18.3 27.9z m109.9 0c-8 0-18.3-10.4-18.3-27.9 0-8.2 10.3-18.6 18.3-18.6 17.2 0 27.5 10.4 27.5 18.6 0 17.5-10.2 27.9-27.5 27.9z m-55-130c2.5 3.1 5.9 3.4 9.2 0-13.7-77.2-94-139.3-192.4-139.3C328.6 284 242 358.9 242 451.1c0 53 28.3 99.9 73.3 130l-18.3 65 64.1-37.1c25.5 5.2 49.4 9.5 73.3 9.3 4 0.2 6.8 0 9.2 0-3-12-5-24.4-9.2-37.1 4.2-85.6 84-154.8 183.2-157.9z m-109.9-55.7c17.2 0 27.5 10.4 27.5 18.6 0 17.5-10.3 27.9-27.5 27.9-8 0-18.3-10.4-18.3-27.9 0-8.2 10.2-18.6 18.3-18.6z m-174.1 18.5c0-8.2 10.3-18.6 18.3-18.6 17.2 0 27.5 10.4 27.5 18.6 0 17.5-10.3 27.9-27.5 27.9-8 0-18.3-10.4-18.3-27.9z" ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(o=e,i=l.document,c=!1,(d=function(){try{i.documentElement.doScroll("left")}catch(e){return void setTimeout(d,50)}n()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,n())});function n(){c||(c=!0,o())}var o,i,c,d}(function(){var e,t,n,o,i,c;(e=document.createElement("div")).innerHTML=d,d=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(o=document.body).firstChild?(i=n,(c=o.firstChild).parentNode.insertBefore(i,c)):o.appendChild(n))})}(window); |
||||||
@ -0,0 +1,23 @@ |
|||||||
|
{ |
||||||
|
"id": "1540265", |
||||||
|
"name": "education", |
||||||
|
"font_family": "iconfont", |
||||||
|
"css_prefix_text": "icon-", |
||||||
|
"description": "", |
||||||
|
"glyphs": [ |
||||||
|
{ |
||||||
|
"icon_id": "468193", |
||||||
|
"name": "qq", |
||||||
|
"font_class": "qq", |
||||||
|
"unicode": "e614", |
||||||
|
"unicode_decimal": 58900 |
||||||
|
}, |
||||||
|
{ |
||||||
|
"icon_id": "7009153", |
||||||
|
"name": "微信-36", |
||||||
|
"font_class": "weixin", |
||||||
|
"unicode": "e68a", |
||||||
|
"unicode_decimal": 59018 |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 106 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,43 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="copyright"> |
||||||
|
<p>技术支持：深圳或然科技有限公司</p> |
||||||
|
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.copyright{ |
||||||
|
padding: 20px 0; |
||||||
|
color: rgba(0, 0, 0, 0.45); |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
background-color: #333; |
||||||
|
p{ |
||||||
|
margin-bottom: 10px; |
||||||
|
color: #fff; |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
a{ |
||||||
|
color:#fff; |
||||||
|
font-size: 12px; |
||||||
|
&:hover{ |
||||||
|
opacity: .8; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
<template> |
||||||
|
<div class="header flex-between"> |
||||||
|
<div class="logo"> |
||||||
|
<img src="../../assets/img/logo.png"> |
||||||
|
</div> |
||||||
|
<div class="header-right"> |
||||||
|
<div class="header-user-con"> |
||||||
|
<!-- <span>应用市场</span> |
||||||
|
<el-divider class="ml20" direction="vertical"></el-divider> --> |
||||||
|
<div class="ml20"> |
||||||
|
<el-avatar :size="40" :src="circleUrl"></el-avatar> |
||||||
|
</div> |
||||||
|
<span class="user-avator">{{username}}</span> |
||||||
|
<el-divider class="ml20" direction="vertical"></el-divider> |
||||||
|
<el-button type="text" class="ml20" @click="loginout">退出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
collapse: false, |
||||||
|
fullscreen: false, |
||||||
|
name: 'huoran', |
||||||
|
message: 2, |
||||||
|
circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
username() { |
||||||
|
let username = localStorage.getItem('ms_username'); |
||||||
|
return username ? username : this.name; |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
loginout() { |
||||||
|
localStorage.removeItem('ms_username'); |
||||||
|
this.$router.push('/login'); |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style scoped> |
||||||
|
.header { |
||||||
|
position: relative; |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
font-size: 16px; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.header .logo { |
||||||
|
float: left; |
||||||
|
width: 170px; |
||||||
|
height: 40px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.header .logo img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.header-right { |
||||||
|
float: right; |
||||||
|
padding-right: 50px; |
||||||
|
} |
||||||
|
.header-user-con { |
||||||
|
display: flex; |
||||||
|
height: 70px; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.user-avator { |
||||||
|
cursor: pointer; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
.ml20{ |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
.user-avator img { |
||||||
|
display: block; |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
.header-right .el-button--text{ |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
.header-right .el-divider--vertical{ |
||||||
|
width: 2px; |
||||||
|
height: 15px; |
||||||
|
} |
||||||
|
.header-right .el-divider{ |
||||||
|
background-color: #333; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,51 @@ |
|||||||
|
<template> |
||||||
|
<div class="wrapper"> |
||||||
|
<v-head></v-head> |
||||||
|
<v-sidebar></v-sidebar> |
||||||
|
<div class="content-box" :class="{'content-collapse':collapse}"> |
||||||
|
<!-- <v-tags></v-tags> --> |
||||||
|
<div class="content"> |
||||||
|
<transition name="move" mode="out-in"> |
||||||
|
<keep-alive :include="tagsList"> |
||||||
|
<router-view></router-view> |
||||||
|
</keep-alive> |
||||||
|
</transition> |
||||||
|
<el-backtop target=".content"></el-backtop> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import vHead from './Header.vue'; |
||||||
|
import vSidebar from './Sidebar.vue'; |
||||||
|
import vTags from './Tags.vue'; |
||||||
|
import bus from './bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tagsList: [], |
||||||
|
collapse: false |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
vHead, |
||||||
|
vSidebar, |
||||||
|
vTags |
||||||
|
}, |
||||||
|
created() { |
||||||
|
bus.$on('collapse-content', msg => { |
||||||
|
this.collapse = msg; |
||||||
|
}); |
||||||
|
|
||||||
|
// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。 |
||||||
|
bus.$on('tags', msg => { |
||||||
|
let arr = []; |
||||||
|
for (let i = 0, len = msg.length; i < len; i++) { |
||||||
|
msg[i].name && arr.push(msg[i].name); |
||||||
|
} |
||||||
|
this.tagsList = arr; |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
@ -0,0 +1,113 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-menu |
||||||
|
class="sidebar-el-menu" |
||||||
|
:default-active="onRoutes" |
||||||
|
:collapse="collapse" |
||||||
|
background-color="#324157" |
||||||
|
text-color="#bfcbd9" |
||||||
|
active-text-color="#9278FF" |
||||||
|
unique-opened |
||||||
|
mode="horizontal" |
||||||
|
router |
||||||
|
> |
||||||
|
<template v-for="item in items"> |
||||||
|
<template v-if="item.subs"> |
||||||
|
<el-submenu :index="item.index" :key="item.index"> |
||||||
|
<template slot="title"> |
||||||
|
<i :class="item.icon"></i> |
||||||
|
<span slot="title">{{ item.title }}</span> |
||||||
|
</template> |
||||||
|
<template v-for="subItem in item.subs"> |
||||||
|
<el-submenu |
||||||
|
v-if="subItem.subs" |
||||||
|
:index="subItem.index" |
||||||
|
:key="subItem.index" |
||||||
|
> |
||||||
|
<template slot="title">{{ subItem.title }}</template> |
||||||
|
<el-menu-item |
||||||
|
v-for="(threeItem,i) in subItem.subs" |
||||||
|
:key="i" |
||||||
|
:index="threeItem.index" |
||||||
|
>{{ threeItem.title }}</el-menu-item> |
||||||
|
</el-submenu> |
||||||
|
<el-menu-item |
||||||
|
v-else |
||||||
|
:index="subItem.index" |
||||||
|
:key="subItem.index" |
||||||
|
>{{ subItem.title }}</el-menu-item> |
||||||
|
</template> |
||||||
|
</el-submenu> |
||||||
|
</template> |
||||||
|
<template v-else> |
||||||
|
<el-menu-item :index="item.index" :key="item.index"> |
||||||
|
<i :class="item.icon"></i> |
||||||
|
<span slot="title">{{ item.title }}</span> |
||||||
|
</el-menu-item> |
||||||
|
</template> |
||||||
|
</template> |
||||||
|
</el-menu> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
collapse: false, |
||||||
|
items: [ |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-home', |
||||||
|
index: 'dashboard', |
||||||
|
title: '客户管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-cascades', |
||||||
|
index: 'user', |
||||||
|
title: '用户管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-copy', |
||||||
|
index: 'order', |
||||||
|
title: '订单管理' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-emoji', |
||||||
|
index: 'configure', |
||||||
|
title: '服务配置' |
||||||
|
}, |
||||||
|
{ |
||||||
|
icon: 'el-icon-lx-emoji', |
||||||
|
index: 'curriculum', |
||||||
|
title: '课程管理' |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
onRoutes() { |
||||||
|
return this.$route.path.replace('/', ''); |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 通过 Event Bus 进行组件间通信，来折叠侧边栏 |
||||||
|
bus.$on('collapse', msg => { |
||||||
|
this.collapse = msg; |
||||||
|
bus.$emit('collapse-content', msg); |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.sidebar::-webkit-scrollbar { |
||||||
|
width: 0; |
||||||
|
} |
||||||
|
.sidebar-el-menu:not(.el-menu--collapse) { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.sidebar > ul { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,186 @@ |
|||||||
|
<template> |
||||||
|
<div class="tags" v-if="showTags"> |
||||||
|
<ul> |
||||||
|
<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index"> |
||||||
|
<router-link :to="item.path" class="tags-li-title"> |
||||||
|
{{item.title}} |
||||||
|
</router-link> |
||||||
|
<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<div class="tags-close-box"> |
||||||
|
<el-dropdown @command="handleTags"> |
||||||
|
<el-button size="mini" type="primary"> |
||||||
|
标签选项<i class="el-icon-arrow-down el-icon--right"></i> |
||||||
|
</el-button> |
||||||
|
<el-dropdown-menu size="small" slot="dropdown"> |
||||||
|
<el-dropdown-item command="other">关闭其他</el-dropdown-item> |
||||||
|
<el-dropdown-item command="all">关闭所有</el-dropdown-item> |
||||||
|
</el-dropdown-menu> |
||||||
|
</el-dropdown> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from './bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
tagsList: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
isActive(path) { |
||||||
|
return path === this.$route.fullPath; |
||||||
|
}, |
||||||
|
// 关闭单个标签 |
||||||
|
closeTags(index) { |
||||||
|
const delItem = this.tagsList.splice(index, 1)[0]; |
||||||
|
const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1]; |
||||||
|
if (item) { |
||||||
|
delItem.path === this.$route.fullPath && this.$router.push(item.path); |
||||||
|
}else{ |
||||||
|
this.$router.push('/dashboard'); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 关闭全部标签 |
||||||
|
closeAll(){ |
||||||
|
this.tagsList = []; |
||||||
|
this.$router.push('/dashboard'); |
||||||
|
}, |
||||||
|
// 关闭其他标签 |
||||||
|
closeOther(){ |
||||||
|
const curItem = this.tagsList.filter(item => { |
||||||
|
return item.path === this.$route.fullPath; |
||||||
|
}) |
||||||
|
this.tagsList = curItem; |
||||||
|
}, |
||||||
|
// 设置标签 |
||||||
|
setTags(route){ |
||||||
|
const isExist = this.tagsList.some(item => { |
||||||
|
return item.path === route.fullPath; |
||||||
|
}) |
||||||
|
if(!isExist){ |
||||||
|
if(this.tagsList.length >= 8){ |
||||||
|
this.tagsList.shift(); |
||||||
|
} |
||||||
|
this.tagsList.push({ |
||||||
|
title: route.meta.title, |
||||||
|
path: route.fullPath, |
||||||
|
name: route.matched[1].components.default.name |
||||||
|
}) |
||||||
|
} |
||||||
|
bus.$emit('tags', this.tagsList); |
||||||
|
}, |
||||||
|
handleTags(command){ |
||||||
|
command === 'other' ? this.closeOther() : this.closeAll(); |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
showTags() { |
||||||
|
return this.tagsList.length > 0; |
||||||
|
} |
||||||
|
}, |
||||||
|
watch:{ |
||||||
|
$route(newValue, oldValue){ |
||||||
|
this.setTags(newValue); |
||||||
|
} |
||||||
|
}, |
||||||
|
created(){ |
||||||
|
this.setTags(this.$route); |
||||||
|
// 监听关闭当前页面的标签页 |
||||||
|
bus.$on('close_current_tags', () => { |
||||||
|
for (let i = 0, len = this.tagsList.length; i < len; i++) { |
||||||
|
const item = this.tagsList[i]; |
||||||
|
if(item.path === this.$route.fullPath){ |
||||||
|
if(i < len - 1){ |
||||||
|
this.$router.push(this.tagsList[i+1].path); |
||||||
|
}else if(i > 0){ |
||||||
|
this.$router.push(this.tagsList[i-1].path); |
||||||
|
}else{ |
||||||
|
this.$router.push('/'); |
||||||
|
} |
||||||
|
this.tagsList.splice(i, 1); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style> |
||||||
|
.tags { |
||||||
|
position: relative; |
||||||
|
height: 30px; |
||||||
|
overflow: hidden; |
||||||
|
background: #fff; |
||||||
|
padding-right: 120px; |
||||||
|
box-shadow: 0 5px 10px #ddd; |
||||||
|
} |
||||||
|
|
||||||
|
.tags ul { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li { |
||||||
|
float: left; |
||||||
|
margin: 3px 5px 2px 3px; |
||||||
|
border-radius: 3px; |
||||||
|
font-size: 12px; |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
height: 23px; |
||||||
|
line-height: 23px; |
||||||
|
border: 1px solid #e9eaec; |
||||||
|
background: #fff; |
||||||
|
padding: 0 5px 0 12px; |
||||||
|
vertical-align: middle; |
||||||
|
color: #666; |
||||||
|
-webkit-transition: all .3s ease-in; |
||||||
|
-moz-transition: all .3s ease-in; |
||||||
|
transition: all .3s ease-in; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li:not(.active):hover { |
||||||
|
background: #f8f8f8; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li.active { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li-title { |
||||||
|
float: left; |
||||||
|
max-width: 80px; |
||||||
|
overflow: hidden; |
||||||
|
white-space: nowrap; |
||||||
|
text-overflow: ellipsis; |
||||||
|
margin-right: 5px; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-li.active .tags-li-title { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.tags-close-box { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
padding-top: 1px; |
||||||
|
text-align: center; |
||||||
|
width: 110px; |
||||||
|
height: 30px; |
||||||
|
background: #fff; |
||||||
|
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1); |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,6 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
|
||||||
|
// 使用 Event Bus
|
||||||
|
const bus = new Vue(); |
||||||
|
|
||||||
|
export default bus; |
||||||
@ -0,0 +1,80 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
|
||||||
|
// v-dialogDrag: 弹窗拖拽属性
|
||||||
|
Vue.directive('dialogDrag', { |
||||||
|
bind(el, binding, vnode, oldVnode) { |
||||||
|
const dialogHeaderEl = el.querySelector('.el-dialog__header'); |
||||||
|
const dragDom = el.querySelector('.el-dialog'); |
||||||
|
|
||||||
|
dialogHeaderEl.style.cssText += ';cursor:move;' |
||||||
|
dragDom.style.cssText += ';top:0px;' |
||||||
|
|
||||||
|
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
|
||||||
|
const sty = (() => { |
||||||
|
if (window.document.currentStyle) { |
||||||
|
return (dom, attr) => dom.currentStyle[attr]; |
||||||
|
} else { |
||||||
|
return (dom, attr) => getComputedStyle(dom, false)[attr]; |
||||||
|
} |
||||||
|
})() |
||||||
|
|
||||||
|
dialogHeaderEl.onmousedown = (e) => { |
||||||
|
// 鼠标按下，计算当前元素距离可视区的距离
|
||||||
|
const disX = e.clientX - dialogHeaderEl.offsetLeft; |
||||||
|
const disY = e.clientY - dialogHeaderEl.offsetTop; |
||||||
|
|
||||||
|
const screenWidth = document.body.clientWidth; // body当前宽度
|
||||||
|
const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
|
||||||
|
|
||||||
|
const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
|
||||||
|
const dragDomheight = dragDom.offsetHeight; // 对话框高度
|
||||||
|
|
||||||
|
const minDragDomLeft = dragDom.offsetLeft; |
||||||
|
const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; |
||||||
|
|
||||||
|
const minDragDomTop = dragDom.offsetTop; |
||||||
|
const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; |
||||||
|
|
||||||
|
|
||||||
|
// 获取到的值带px 正则匹配替换
|
||||||
|
let styL = sty(dragDom, 'left'); |
||||||
|
let styT = sty(dragDom, 'top'); |
||||||
|
|
||||||
|
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||||||
|
if (styL.includes('%')) { |
||||||
|
styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100); |
||||||
|
styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100); |
||||||
|
} else { |
||||||
|
styL = +styL.replace(/\px/g, ''); |
||||||
|
styT = +styT.replace(/\px/g, ''); |
||||||
|
}; |
||||||
|
|
||||||
|
document.onmousemove = function (e) { |
||||||
|
// 通过事件委托，计算移动的距离
|
||||||
|
let left = e.clientX - disX; |
||||||
|
let top = e.clientY - disY; |
||||||
|
|
||||||
|
// 边界处理
|
||||||
|
if (-(left) > minDragDomLeft) { |
||||||
|
left = -(minDragDomLeft); |
||||||
|
} else if (left > maxDragDomLeft) { |
||||||
|
left = maxDragDomLeft; |
||||||
|
} |
||||||
|
|
||||||
|
if (-(top) > minDragDomTop) { |
||||||
|
top = -(minDragDomTop); |
||||||
|
} else if (top > maxDragDomTop) { |
||||||
|
top = maxDragDomTop; |
||||||
|
} |
||||||
|
|
||||||
|
// 移动当前元素
|
||||||
|
dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; |
||||||
|
}; |
||||||
|
|
||||||
|
document.onmouseup = function (e) { |
||||||
|
document.onmousemove = null; |
||||||
|
document.onmouseup = null; |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
export const messages = { |
||||||
|
'zh': { |
||||||
|
i18n: { |
||||||
|
breadcrumb: '国际化产品', |
||||||
|
tips: '通过切换语言按钮，来改变当前内容的语言。', |
||||||
|
btn: '切换英文', |
||||||
|
title1: '常用用法', |
||||||
|
p1: '要是你把你的秘密告诉了风，那就别怪风把它带给树。', |
||||||
|
p2: '没有什么比信念更能支撑我们度过艰难的时光了。', |
||||||
|
p3: '只要能把自己的事做好，并让自己快乐，你就领先于大多数人了。', |
||||||
|
title2: '组件插值', |
||||||
|
info: 'Element组件需要国际化，请参考 {action}。', |
||||||
|
value: '文档' |
||||||
|
} |
||||||
|
}, |
||||||
|
'en': { |
||||||
|
i18n: { |
||||||
|
breadcrumb: 'International Products', |
||||||
|
tips: 'Click on the button to change the current language. ', |
||||||
|
btn: 'Switch Chinese', |
||||||
|
title1: 'Common usage', |
||||||
|
p1: "If you reveal your secrets to the wind you should not blame the wind for revealing them to the trees.", |
||||||
|
p2: "Nothing can help us endure dark times better than our faith. ", |
||||||
|
p3: "If you can do what you do best and be happy, you're further along in life than most people.", |
||||||
|
title2: 'Component interpolation', |
||||||
|
info: 'The default language of Element is Chinese. If you wish to use another language, please refer to the {action}.', |
||||||
|
value: 'documentation' |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
<template> |
||||||
|
<div class="error-page"> |
||||||
|
<div class="error-code">4<span>0</span>3</div> |
||||||
|
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div> |
||||||
|
<div class="error-handle"> |
||||||
|
<router-link to="/"> |
||||||
|
<el-button type="primary" size="large">返回首页</el-button> |
||||||
|
</router-link> |
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
goBack(){ |
||||||
|
this.$router.go(-1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.error-page{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #f3f3f3; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.error-code{ |
||||||
|
line-height: 1; |
||||||
|
font-size: 250px; |
||||||
|
font-weight: bolder; |
||||||
|
color: #f02d2d; |
||||||
|
} |
||||||
|
.error-code span{ |
||||||
|
color: #00a854; |
||||||
|
} |
||||||
|
.error-desc{ |
||||||
|
font-size: 30px; |
||||||
|
color: #777; |
||||||
|
} |
||||||
|
.error-handle{ |
||||||
|
margin-top: 30px; |
||||||
|
padding-bottom: 200px; |
||||||
|
} |
||||||
|
.error-btn{ |
||||||
|
margin-left: 100px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,56 @@ |
|||||||
|
<template> |
||||||
|
<div class="error-page"> |
||||||
|
<div class="error-code">4<span>0</span>4</div> |
||||||
|
<div class="error-desc">啊哦~ 你所访问的页面不存在</div> |
||||||
|
<div class="error-handle"> |
||||||
|
<router-link to="/"> |
||||||
|
<el-button type="primary" size="large">返回首页</el-button> |
||||||
|
</router-link> |
||||||
|
<el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
methods: { |
||||||
|
goBack(){ |
||||||
|
this.$router.go(-1); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.error-page{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #f3f3f3; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
.error-code{ |
||||||
|
line-height: 1; |
||||||
|
font-size: 250px; |
||||||
|
font-weight: bolder; |
||||||
|
color: #2d8cf0; |
||||||
|
} |
||||||
|
.error-code span{ |
||||||
|
color: #00a854; |
||||||
|
} |
||||||
|
.error-desc{ |
||||||
|
font-size: 30px; |
||||||
|
color: #777; |
||||||
|
} |
||||||
|
.error-handle{ |
||||||
|
margin-top: 30px; |
||||||
|
padding-bottom: 200px; |
||||||
|
} |
||||||
|
.error-btn{ |
||||||
|
margin-left: 100px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,324 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">系统服务器地址配置</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveAdd('form')">确定</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>系统信息</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="flex-end-around"> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item prop="systemName" label="系统名称"> |
||||||
|
<el-input v-model="form.systemName" placeholder="请输入系统名称"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="systemType" label="系统类型"> |
||||||
|
<el-select v-model="form.systemType" clearable placeholder="请选择系统类型"> |
||||||
|
<el-option v-for="(item,index) in systemTypeList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
|
||||||
|
<el-col :span="6" style="margin-left: 60px;"> |
||||||
|
<el-form-item prop="systemAttribution" label="系统归属"> |
||||||
|
<el-select v-model="form.systemAttribution" clearable placeholder="请选择系统归属"> |
||||||
|
<el-option v-for="(item,index) in systemList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="mgb20 flex-between"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>地址列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入系统名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="permissionData" class="table" stripe :span-method="SpanMethod" header-align="center"> |
||||||
|
<el-table-column prop="id" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="age" label="服务器名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="IP" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入端口号"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="端口" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入内网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入外网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="storeName" label="后台" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text">编辑</el-button> |
||||||
|
<el-button type="text">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="pages"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<!-- 选择IP --> |
||||||
|
<el-dialog :visible.sync="ipVisible" width="50%" center> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>客户列表</span> |
||||||
|
</div> |
||||||
|
<el-table :data="permissionData" class="table" stripe header-align="center"> |
||||||
|
<el-table-column prop="id" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="age" label="服务器名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="IP" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入端口号"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="端口" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入内网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入外网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="选择" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<i class="el-icon-success radio_icon"></i> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="ipVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="editSure('teacherForm')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data (){ |
||||||
|
return { |
||||||
|
form: { |
||||||
|
systemName: '', |
||||||
|
systemType: '', |
||||||
|
systemAttribution: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
systemName:[ |
||||||
|
{ required: true, message: '请输入系统名称', trigger: 'blur' } |
||||||
|
], |
||||||
|
systemType:[ |
||||||
|
{ required: true, message: '请选择系统类型', trigger: 'change' } |
||||||
|
], |
||||||
|
systemAttribution:[ |
||||||
|
{ required: true, message: '请选择系统归属', trigger: 'change' } |
||||||
|
] |
||||||
|
}, |
||||||
|
permissionData: [{ |
||||||
|
id: 1, |
||||||
|
age: '小额贷系统', |
||||||
|
storeName: '1个月', |
||||||
|
total: '2019.01.02 11:00', |
||||||
|
payamount: '2019.01.02 11:00', |
||||||
|
payamount: '700d12h1min', |
||||||
|
swtich: true, |
||||||
|
Intranet: '10.20.202.1', |
||||||
|
extranet: '10.20.202.1' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
age: '小额贷系统', |
||||||
|
storeName: '1个月', |
||||||
|
total: '2019.01.02 11:00', |
||||||
|
payamount: '2019.01.02 11:00', |
||||||
|
payamount: '700d12h1min', |
||||||
|
swtich: true, |
||||||
|
Intranet: '', |
||||||
|
extranet: '' |
||||||
|
}], |
||||||
|
pages: 1, |
||||||
|
ipVisible: false, |
||||||
|
educationDegreeList: [{ |
||||||
|
name: '研究生及以上', |
||||||
|
value: 1 |
||||||
|
}], |
||||||
|
systemList: [{ |
||||||
|
name: '外部产品', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '内部系统', |
||||||
|
value: 2 |
||||||
|
}], |
||||||
|
systemTypeList: [{ |
||||||
|
name: '工具', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '实训', |
||||||
|
value: 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '网站', |
||||||
|
value: 3 |
||||||
|
}], |
||||||
|
configId : this.$store.state.configId, |
||||||
|
keyword: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted(){ |
||||||
|
if(this.configId){ |
||||||
|
this.getData() |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData(){ |
||||||
|
let data = { |
||||||
|
systemId: this.configId |
||||||
|
} |
||||||
|
this.$get(this.api.queryServiceConfigDetails,data).then((res) => { |
||||||
|
this.form = { |
||||||
|
systemName: res.message[0].systemName, |
||||||
|
systemType: res.message[0].systemType, |
||||||
|
systemAttribution: res.message[0].systemAttribution, |
||||||
|
} |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}, |
||||||
|
saveAdd(){ |
||||||
|
let data = { |
||||||
|
systemId: this.configId, |
||||||
|
systemName: this.form.systemName, |
||||||
|
systemType: this.form.systemType, |
||||||
|
systemAttribution: this.form.systemAttribution, |
||||||
|
} |
||||||
|
if(this.configId){ |
||||||
|
this.$post(this.api.updateServiceConfig,data).then((res) => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.goback() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
this.$post(this.api.updateServiceConfig,data).then((res) => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.goback() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
SpanMethod({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
if (columnIndex === 6) { |
||||||
|
if(!row.Intranet){ |
||||||
|
return [1, 2]; |
||||||
|
} |
||||||
|
} |
||||||
|
// else if (columnIndex === 1) { |
||||||
|
// return [0, 0]; |
||||||
|
// } |
||||||
|
} |
||||||
|
}, |
||||||
|
chooseIp(){ |
||||||
|
this.ipVisible = true |
||||||
|
}, |
||||||
|
goback(){ |
||||||
|
this.$router.go(-1) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.border_lf{ |
||||||
|
border-left: 1px dashed #eee; |
||||||
|
padding: 0 60px; |
||||||
|
} |
||||||
|
.border_lf label{ |
||||||
|
width: 120px; |
||||||
|
} |
||||||
|
.pad_none{ |
||||||
|
padding: 0 0 0 60px; |
||||||
|
} |
||||||
|
.mar_input{ |
||||||
|
margin-right: 80px; |
||||||
|
} |
||||||
|
.marb30{ |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.tab_temp label{ |
||||||
|
width: 60px; |
||||||
|
} |
||||||
|
.mar10{ |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.radio_icon{ |
||||||
|
font-size: 26px; |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,467 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school" v-text="form.courseId != '' ? '编辑课程' : '新建课程'"></span> |
||||||
|
</div> |
||||||
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveAdd('form')">确定</el-button> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>课程信息</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<el-form :model="form" :rules="rules" ref="form" label-width="80px"> |
||||||
|
<el-col :span="6" :offset="5"> |
||||||
|
<el-form-item label="课程名称" prop="courseName"> |
||||||
|
<el-input placeholder="请输入课程名称" v-model="form.courseName" @change="changeName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="学科类别" prop="disciplineId"> |
||||||
|
<el-select v-model="form.disciplineId" clearable placeholder="请选择学科类别" |
||||||
|
@change="getProfessionalClass()" @clear="clearsubjectType()"> |
||||||
|
<el-option v-for="(item,index) in subjectList" :key="index" :label="item.disciplineName" :value="item.disciplineId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="专业" prop="professionalId"> |
||||||
|
<el-select v-model="form.professionalId" clearable placeholder="请选择专业" |
||||||
|
:disabled="form.professionalClassId ? false : true"> |
||||||
|
<el-option v-for="(item,index) in ProfessionalList" :key="index" :label="item.professionalName" :value="item.professionalId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="市场价格" prop="marketPrice"> |
||||||
|
<el-input placeholder="请输入市场价格" v-model="form.marketPrice"> |
||||||
|
<template slot="append">万元/年</template> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="6" :offset="2"> |
||||||
|
<el-form-item label="预计课时" prop="courseHours"> |
||||||
|
<el-select v-model="form.courseHours" clearable placeholder="请选择预计课时"> |
||||||
|
<el-option v-for="(item,index) in hoursList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="专业类" prop="professionalClassId"> |
||||||
|
<el-select v-model="form.professionalClassId" clearable placeholder="请选择专业类" |
||||||
|
:disabled="form.disciplineId ? false : true" @change="getProfessional()" @clear="clearProfessionalClass()"> |
||||||
|
<el-option v-for="(item,index) in ProfessionalClassList" :key="index" :label="item.professionalClassName" :value="item.professionalClassId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="课程类别" prop="courseType"> |
||||||
|
<el-select v-model="form.courseType" clearable placeholder="请选择课程类别"> |
||||||
|
<el-option v-for="(item,index) in CourseTypeList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="14" :offset="5"> |
||||||
|
<el-form-item label="课程简介" prop="courseIntroduction"> |
||||||
|
<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入课程简介" v-model="form.courseIntroduction"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="教学目标" prop="teachingGoal"> |
||||||
|
<el-input type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入教学目标" v-model="form.teachingGoal"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="mgb20 flex-between"> |
||||||
|
<div class="flex-center user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>实训配置</span> |
||||||
|
</div> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="getConfig">添加配置</el-button> |
||||||
|
</div> |
||||||
|
<!-- 实训配置 --> |
||||||
|
<div> |
||||||
|
<el-table :data="curData" class="table" stripe header-align="center" height="600"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="projectName" label="项目名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="systemName" label="应用名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="资源配置" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button @click="EditCur(scope.row)">编辑</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="展示控制" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.isShow" |
||||||
|
:active-value="0" |
||||||
|
:inactive-value="1"> |
||||||
|
</el-switch> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="添加控制" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button @click="handleDelete(scope.$index, scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<!-- 应用配置 --> |
||||||
|
<el-dialog :visible.sync="curVisible" width="50%" center> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>应用列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入系统名称" prefix-icon="el-icon-search" v-model="configSearch" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="permissionData" class="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
||||||
|
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="systemName" label="系统名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="systemAttribution" label="系统类型" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="systemType" label="系统归属" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="systemStatus" label="系统状态" align="center"> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="curVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" v-preventReClick @click="addSystem()">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data (){ |
||||||
|
return { |
||||||
|
form: { |
||||||
|
courseName: '', |
||||||
|
courseType: '', |
||||||
|
disciplineId: '', |
||||||
|
professionalClassId: '', |
||||||
|
professionalId: '', |
||||||
|
courseHours: '', |
||||||
|
marketPrice: '', |
||||||
|
courseIntroduction: '', |
||||||
|
teachingGoal: '', |
||||||
|
courseId : this.$store.state.courseId, |
||||||
|
systemId: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
courseName: [ |
||||||
|
{ required: true, message: '请输入用户姓名', trigger: 'blur' } |
||||||
|
], |
||||||
|
disciplineId: [ |
||||||
|
{ required: true, message: '请选择学科类别', trigger: 'change' } |
||||||
|
], |
||||||
|
professionalId: [ |
||||||
|
{ required: true, message: '请选择专业', trigger: 'change' } |
||||||
|
], |
||||||
|
marketPrice: [ |
||||||
|
{ required: true, message: '请输入市场价格', trigger: 'blur' }, |
||||||
|
{ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' } |
||||||
|
], |
||||||
|
courseHours: [ |
||||||
|
{ required: true, message: '请选择预计课时', trigger: 'change' } |
||||||
|
], |
||||||
|
professionalClassId: [ |
||||||
|
{ required: true, message: '请选择专业类', trigger: 'change' } |
||||||
|
], |
||||||
|
courseType: [ |
||||||
|
{ required: true, message: '请选择课程类别', trigger: 'change' } |
||||||
|
], |
||||||
|
courseIntroduction: [ |
||||||
|
{ required: true, message: '请输入课程简介', trigger: 'blur' } |
||||||
|
], |
||||||
|
teachingGoal: [ |
||||||
|
{ required: true, message: '请输入教学目标', trigger: 'blur' } |
||||||
|
] |
||||||
|
}, |
||||||
|
permissionData: [], |
||||||
|
curVisible: false, |
||||||
|
curData: [], |
||||||
|
subjectList: [], |
||||||
|
ProfessionalClassList: [], |
||||||
|
ProfessionalList: [], |
||||||
|
CourseTypeList: [{ |
||||||
|
name: '实训课程', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '理论课程', |
||||||
|
value: 2 |
||||||
|
}], |
||||||
|
hoursList: [{ |
||||||
|
name: '32课时', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '64课时', |
||||||
|
value: 2 |
||||||
|
}], |
||||||
|
configSearch: '', |
||||||
|
multipleSelection: [], |
||||||
|
NoAdd: true |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
configSearch(newVal){ |
||||||
|
this.getConfig() |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
if(this.form.courseId){ |
||||||
|
let data = { |
||||||
|
courseId: this.form.courseId |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourseDetails,data).then((res) => { |
||||||
|
this.form = { |
||||||
|
courseName: res.message[0].course.courseName, |
||||||
|
courseType: res.message[0].course.courseType, |
||||||
|
disciplineId: res.message[0].course.disciplineId, |
||||||
|
professionalClassId: res.message[0].course.professionalClassId, |
||||||
|
professionalId: res.message[0].course.professionalId, |
||||||
|
courseHours: res.message[0].course.courseHours, |
||||||
|
marketPrice: res.message[0].course.marketPrice, |
||||||
|
courseIntroduction: res.message[0].course.courseIntroduction, |
||||||
|
teachingGoal: res.message[0].course.teachingGoal, |
||||||
|
courseId : res.message[0].course.courseId, |
||||||
|
systemId: res.message[0].course.systemId |
||||||
|
} |
||||||
|
this.getProfessionalClassData() |
||||||
|
this.getProfessionalData() |
||||||
|
this.curData = res.message[0].serviceConfigList |
||||||
|
// let arr1 = this.curData |
||||||
|
// let result1 = arr1.map(e => e.systemId) |
||||||
|
// const set = new Set(result1); |
||||||
|
// let set1 = [...set].join() |
||||||
|
// this.form.systemId = this.form.systemId.concat(set1) |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
this.getSubject() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
saveAdd(form){ |
||||||
|
this.$refs[form].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
if(this.NoAdd){ |
||||||
|
if(this.curData.length != 0){ |
||||||
|
let data = { |
||||||
|
course: this.form, |
||||||
|
serviceConfigList: this.curData |
||||||
|
} |
||||||
|
if(this.form.courseId){ |
||||||
|
this.$post(this.api.updateCourse,data).then((res) => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.$router.replace('/curriculum') |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addCourse,data).then((res) => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.$router.replace('/curriculum') |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.$message.warning('请添加实训配置！'); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.$message.warning('该课程已存在'); |
||||||
|
} |
||||||
|
}else{ |
||||||
|
return false; |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 获取应用配置 |
||||||
|
getConfig(){ |
||||||
|
let data = { |
||||||
|
searchContent: this.configSearch, |
||||||
|
systemId: this.form.systemId |
||||||
|
} |
||||||
|
this.$get(this.api.queryAppConfig,data).then((res) => { |
||||||
|
this.curVisible = true |
||||||
|
res.message.map(e => { |
||||||
|
e.systemStatus = this.systemStatus(e.systemStatus) |
||||||
|
e.systemType = this.systemAttributionStatus(e.systemType) |
||||||
|
e.systemAttribution = this.systemTypeStatus(e.systemAttribution) |
||||||
|
}) |
||||||
|
this.permissionData = res.message |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 获取学科类别 |
||||||
|
getSubject(){ |
||||||
|
this.$get(this.api.queryCourseDiscipline).then(res => { |
||||||
|
this.subjectList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清空学科类别 |
||||||
|
clearsubjectType(){ |
||||||
|
this.form.professionalClassId = '', |
||||||
|
this.form.professionalId = '' |
||||||
|
}, |
||||||
|
// 获取专业类 |
||||||
|
getProfessionalClass(){ |
||||||
|
this.clearsubjectType() |
||||||
|
this.getProfessionalClassData() |
||||||
|
}, |
||||||
|
getProfessionalClassData(){ |
||||||
|
let data = { |
||||||
|
disciplineId: this.form.disciplineId |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourseProfessionalClass,data).then(res => { |
||||||
|
this.ProfessionalClassList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清空专业类 |
||||||
|
clearProfessionalClass(){ |
||||||
|
this.form.professionalId = '' |
||||||
|
}, |
||||||
|
// 获取专业 |
||||||
|
getProfessional(){ |
||||||
|
this.clearProfessionalClass() |
||||||
|
this.getProfessionalData() |
||||||
|
}, |
||||||
|
getProfessionalData(){ |
||||||
|
let data = { |
||||||
|
professionalClassId: this.form.professionalClassId |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourseProfessional,data).then(res => { |
||||||
|
this.ProfessionalList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 多选操作 |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
// 绑定实训配置 |
||||||
|
addSystem() { |
||||||
|
let arr = this.multipleSelection |
||||||
|
let result = arr.map(e => e.systemId).join() |
||||||
|
this.form.systemId = this.form.systemId.concat(`,${result}`) |
||||||
|
if (this.form.systemId.substr(0,1)==','){ |
||||||
|
this.form.systemId = this.form.systemId.substr(1); |
||||||
|
} |
||||||
|
this.curVisible = false |
||||||
|
this.getTrianConfig() |
||||||
|
}, |
||||||
|
// 查询实训配置 |
||||||
|
getTrianConfig(){ |
||||||
|
let data = { |
||||||
|
systemId: this.form.systemId |
||||||
|
} |
||||||
|
this.$get(this.api.queryTrainingConfig,data).then((res) => { |
||||||
|
var arritem = { |
||||||
|
isShow: 0 |
||||||
|
} |
||||||
|
let arryNew = [] |
||||||
|
res.message.map(item => { |
||||||
|
arryNew.push(Object.assign({}, item, arritem)) |
||||||
|
}) |
||||||
|
this.curData = arryNew |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 编辑实训配置 |
||||||
|
EditCur(row){ |
||||||
|
if(this.form.courseId){ |
||||||
|
this.$store.commit("systemData", { system_id : row.projectId}); |
||||||
|
this.$router.push('/addlink'); |
||||||
|
}else{ |
||||||
|
this.$message.warning('请先保存课程再进行编辑项目！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleDelete(index, row){ |
||||||
|
this.$confirm('此操作将删除该项目, 是否继续?', '提示', { |
||||||
|
confirmButtonText: '确定', |
||||||
|
cancelButtonText: '取消', |
||||||
|
type: 'warning' |
||||||
|
}).then(() => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.curData.splice(index, 1); |
||||||
|
let arr1 = this.curData |
||||||
|
let result1 = arr1.map(e => e.systemId) |
||||||
|
const set = new Set(result1); |
||||||
|
let set1 = [...set].join() |
||||||
|
this.form.systemId = set1 |
||||||
|
}).catch(() => { |
||||||
|
this.$message.info("已取消删除"); |
||||||
|
}); |
||||||
|
}, |
||||||
|
goback(){ |
||||||
|
this.$router.go(-1) |
||||||
|
}, |
||||||
|
// 查询课程是否存在 |
||||||
|
changeName(){ |
||||||
|
let data = { |
||||||
|
courseName: this.form.courseName |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourseNameIsExists,data).then((res) => { |
||||||
|
if(res.message.length != 0){ |
||||||
|
this.$message.warning('该课程已存在'); |
||||||
|
this.NoAdd = false |
||||||
|
}else{ |
||||||
|
this.NoAdd = true |
||||||
|
} |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.border_lf{ |
||||||
|
border-left: 1px dashed #eee; |
||||||
|
padding: 0 60px; |
||||||
|
} |
||||||
|
.border_lf label{ |
||||||
|
width: 120px; |
||||||
|
} |
||||||
|
.pad_none{ |
||||||
|
padding: 0 0 0 60px; |
||||||
|
} |
||||||
|
.mar_input{ |
||||||
|
margin-right: 80px; |
||||||
|
} |
||||||
|
.marb30{ |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.tab_temp label{ |
||||||
|
width: 60px; |
||||||
|
} |
||||||
|
.mar10{ |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.radio_icon{ |
||||||
|
font-size: 26px; |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,507 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school" v-text="customerId != '' ? '编辑客户信息' : '新增客户信息'"></span> |
||||||
|
</div> |
||||||
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveAdd('form')">确定</el-button> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>基本信息</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<el-form :model="form" :rules="rules" ref="form" label-width="80px" class="flex-start-around"> |
||||||
|
<el-col :span="6" style="margin-right: 60px;"> |
||||||
|
<el-form-item label="国家"> |
||||||
|
<el-select v-model="form.countries" clearable placeholder="请选择国家"> |
||||||
|
<el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.name"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="schoolId" label="客户名称"> |
||||||
|
<el-select v-model="form.schoolId" filterable clearable placeholder="请选择学校" |
||||||
|
@change="SchoolChange" @clear="clearSchool()"> |
||||||
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="省份"> |
||||||
|
<el-select v-model="form.provinces" placeholder="" disabled> |
||||||
|
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="adminName" label="管理员"> |
||||||
|
<el-input placeholder="请输入管理员姓名" v-model="form.adminName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="IndustryClass" label="行业类"> |
||||||
|
<el-select v-model="form.IndustryClass" clearable placeholder="请选择行业类" @change="changIndustry" @clear="clearIndustry()"> |
||||||
|
<el-option v-for="(item,index) in IndustryClassList" :key="index" :label="item.industryClassName" :value="item.industryClassId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="email" label="邮箱"> |
||||||
|
<el-input placeholder="请输入邮箱" v-model="form.email"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="6" style="margin-left: 60px;"> |
||||||
|
<el-form-item label="客户类型"> |
||||||
|
<el-select v-model="form.customerType" disabled placeholder=""> |
||||||
|
<el-option v-for="(item,index) in customerTypeList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="学校类型"> |
||||||
|
<el-select v-model="form.level" placeholder="" disabled> |
||||||
|
<el-option v-for="(item,index) in levelList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="城市"> |
||||||
|
<el-select v-model="form.city" placeholder="" disabled> |
||||||
|
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="adminPhone" label="手机号"> |
||||||
|
<el-input placeholder="请输入管理员手机号" v-model="form.adminPhone" maxlength="11"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="industry" label="行业"> |
||||||
|
<el-select v-model="form.industry" clearable placeholder="请选择行业" :disabled="form.IndustryClass ? false : true"> |
||||||
|
<el-option v-for="(item,index) in industryList" :key="index" :label="item.industryName" :value="item.industryId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="到期时间"> |
||||||
|
<el-date-picker type="date" disabled v-model="form.stopTime" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20" v-show="customerId"> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>应用权限</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-table :data="coursePermissionss" class="orderTable" stripe header-align="center"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="courseName" label="应用名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="usePeriod" label="使用期限(年)" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="marketPrice" label="市场价(万)" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="transactionPrice" label="成交价(万)" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="discount" label="折扣率(%)" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="端口地址" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button @click="configure(scope.row)">配置</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="发货" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.isDeliverGoods" |
||||||
|
:active-value="1" |
||||||
|
:inactive-value="0" |
||||||
|
disabled> |
||||||
|
</el-switch> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20" v-show="customerId"> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>合同信息</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-table :data="contractInformations" class="table" stripe header-align="center"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contractInformationName" label="合同名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contractInformationNumber" label="合同编号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contractInformationSum" label="合同金额" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="contractInformationLink" label="合同文件" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<!-- <el-table-column prop="payamount" label="操作" align="center"> |
||||||
|
<template> |
||||||
|
<el-button type="text">配置</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> --> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<!-- 选择IP --> |
||||||
|
<el-dialog :visible.sync="ipVisible" width="70%" center> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>客户列表</span> |
||||||
|
</div> |
||||||
|
<el-table :data="IPData" stripe header-align="center"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="age" label="服务器名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="IP" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入端口号"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="端口" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入内网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入外网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="选择" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<i class="el-icon-success radio_icon"></i> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="ipVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="IPSure()">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
name: 'baseform', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
customerData: [], |
||||||
|
form: { |
||||||
|
schoolId: '', |
||||||
|
customerName: '', |
||||||
|
countries: '中国', |
||||||
|
IndustryClass: '', |
||||||
|
industry: '', |
||||||
|
provinces: '', |
||||||
|
adminName: '', |
||||||
|
adminPhone: '', |
||||||
|
city: '', |
||||||
|
customerType: '', |
||||||
|
stopTime: '', |
||||||
|
email: '', |
||||||
|
level: '' |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
adminName: [ |
||||||
|
{ required: true, message: '请输入管理员姓名', trigger: 'blur' } |
||||||
|
], |
||||||
|
adminPhone: [ |
||||||
|
{ required: true, message: '请输入管理员手机号', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^1[3456789]\d{9}$/, |
||||||
|
message: '请输入正确的手机号', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
schoolId: [ |
||||||
|
{ required: true, message: '请选择客户名称', trigger: 'change' } |
||||||
|
], |
||||||
|
email: [ |
||||||
|
// { required: true, message: '请输入邮箱', trigger: 'blur' }, |
||||||
|
{ |
||||||
|
pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, |
||||||
|
message: '请输入正确的邮箱', |
||||||
|
trigger: 'blur' |
||||||
|
} |
||||||
|
], |
||||||
|
industry: [ |
||||||
|
{ required: true, message: '请选择行业', trigger: 'change' } |
||||||
|
], |
||||||
|
IndustryClass: [ |
||||||
|
{ required: true, message: '请选择行业类', trigger: 'change' } |
||||||
|
], |
||||||
|
}, |
||||||
|
customerTypeList: [{ |
||||||
|
name: '正式', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '试用', |
||||||
|
value: 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '到期', |
||||||
|
value: 3 |
||||||
|
}], |
||||||
|
countryList: [{ |
||||||
|
name:'中国' |
||||||
|
}], |
||||||
|
provinceList: this.$store.state.provinceList, |
||||||
|
cityList: [], |
||||||
|
levelList: [{ |
||||||
|
name: '本科', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '大专', |
||||||
|
value: 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '高职', |
||||||
|
value: 3 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '中专', |
||||||
|
value: 4 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '其他', |
||||||
|
value: 5 |
||||||
|
}], |
||||||
|
IndustryClassList: [], |
||||||
|
industryList: [], |
||||||
|
schoolList: [], |
||||||
|
customerId : this.$store.state.customerId, |
||||||
|
contractInformations: [], |
||||||
|
coursePermissionss: [], |
||||||
|
ipVisible: false, |
||||||
|
IPData: [{ |
||||||
|
id: 1, |
||||||
|
age: '小额贷系统', |
||||||
|
storeName: '1个月', |
||||||
|
total: '2019.01.02 11:00', |
||||||
|
payamount: '2019.01.02 11:00', |
||||||
|
payamount: '700d12h1min', |
||||||
|
swtich: true, |
||||||
|
Intranet: '10.20.202.1', |
||||||
|
extranet: '10.20.202.1' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
age: '小额贷系统', |
||||||
|
storeName: '1个月', |
||||||
|
total: '2019.01.02 11:00', |
||||||
|
payamount: '2019.01.02 11:00', |
||||||
|
payamount: '700d12h1min', |
||||||
|
swtich: true, |
||||||
|
Intranet: '', |
||||||
|
extranet: '' |
||||||
|
}], |
||||||
|
NoAdd: true |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getSchoolData() |
||||||
|
this.getIndustryClass() |
||||||
|
if(this.customerId){ |
||||||
|
let data = { |
||||||
|
customerId: this.customerId |
||||||
|
} |
||||||
|
this.$get(this.api.queryCustomerDetails,data).then((res) => { |
||||||
|
this.form = { |
||||||
|
schoolId: res.message[0].customers[0].schoolId, |
||||||
|
countries: res.message[0].customers[0].countries, |
||||||
|
IndustryClass: res.message[0].customers[0].industryClassId, |
||||||
|
industry: res.message[0].customers[0].industryId, |
||||||
|
provinces: res.message[0].customers[0].provinceId, |
||||||
|
adminName: res.message[0].customers[0].adminName, |
||||||
|
adminPhone: res.message[0].customers[0].adminPhone, |
||||||
|
city: res.message[0].customers[0].cityId, |
||||||
|
level: res.message[0].customers[0].level, |
||||||
|
customerType: res.message[0].customers[0].customerType, |
||||||
|
stopTime: res.message[0].customers[0].stopTime, |
||||||
|
email: res.message[0].customers[0].email, |
||||||
|
} |
||||||
|
this.contractInformations = res.message[0].contractInformations |
||||||
|
this.coursePermissionss = res.message[0].coursePermissionss |
||||||
|
this.getCityData() |
||||||
|
this.changIndustryData() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 获取城市 |
||||||
|
getCityData(){ |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinces |
||||||
|
} |
||||||
|
this.$get(this.api.queryCity,data).then(res => { |
||||||
|
this.cityList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除学校 |
||||||
|
clearSchool(){ |
||||||
|
this.form.provinces = '', |
||||||
|
this.form.city = '', |
||||||
|
this.form.level = '', |
||||||
|
this.form.customerName = '' |
||||||
|
}, |
||||||
|
// 获取学校/客户名称 |
||||||
|
getSchoolData(){ |
||||||
|
let data = { |
||||||
|
schoolName: '' |
||||||
|
} |
||||||
|
this.$get(this.api.querySchoolData,data).then(res => { |
||||||
|
this.schoolList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 查询客户是否存在 |
||||||
|
SchoolChange(val){ |
||||||
|
this.clearSchool() |
||||||
|
if(val){ |
||||||
|
let obj = {}; |
||||||
|
obj = this.schoolList.find((item)=>{ |
||||||
|
return item.schoolId === val; |
||||||
|
}); |
||||||
|
this.form.customerName = obj.schoolName |
||||||
|
this.form.level = obj.level |
||||||
|
this.form.provinces = obj.provinceId |
||||||
|
this.getCityData() |
||||||
|
this.form.city = obj.cityId |
||||||
|
|
||||||
|
let data = { |
||||||
|
schoolId: this.form.schoolId |
||||||
|
} |
||||||
|
this.$get(this.api.queryCustomerIsExists,data).then(res => { |
||||||
|
if(res.message.length != 0){ |
||||||
|
this.$message.warning('该客户已存在'); |
||||||
|
this.NoAdd = false |
||||||
|
}else{ |
||||||
|
this.NoAdd = true |
||||||
|
} |
||||||
|
}).catch(res => { |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取行业类 |
||||||
|
getIndustryClass(){ |
||||||
|
this.$get(this.api.queryCustomerIndustryClass).then(res => { |
||||||
|
this.IndustryClassList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除行业类 |
||||||
|
clearIndustry(){ |
||||||
|
this.form.industry = '' |
||||||
|
}, |
||||||
|
// 获取行业 |
||||||
|
changIndustry(){ |
||||||
|
this.clearIndustry() |
||||||
|
this.changIndustryData() |
||||||
|
}, |
||||||
|
changIndustryData(){ |
||||||
|
let data = { |
||||||
|
industryClassId: this.form.IndustryClass |
||||||
|
} |
||||||
|
this.$get(this.api.queryCustomerIndustry,data).then(res => { |
||||||
|
this.industryList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
saveAdd(formName){ |
||||||
|
this.$refs[formName].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
if(this.NoAdd){ |
||||||
|
let data = { |
||||||
|
customerName: this.form.customerName, |
||||||
|
schoolId: this.form.schoolId, |
||||||
|
countries: this.form.countries, |
||||||
|
industryClassId: this.form.IndustryClass, |
||||||
|
industryId: this.form.industry, |
||||||
|
provinceId: this.form.provinces, |
||||||
|
adminName: this.form.adminName, |
||||||
|
adminPhone: this.form.adminPhone, |
||||||
|
cityId: this.form.city, |
||||||
|
level: this.form.level, |
||||||
|
customerType: this.form.customerType, |
||||||
|
stopTime: this.form.stopTime, |
||||||
|
email: this.form.email, |
||||||
|
customerId: this.customerId |
||||||
|
} |
||||||
|
if(this.customerId){ |
||||||
|
this.$post(this.api.updateCustomer,data).then((res) => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.goback() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
this.$post(this.api.addCustomer,data).then((res) => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.goback() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
}else{ |
||||||
|
this.$message.warning('该客户已存在'); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
configure(){ |
||||||
|
this.ipVisible = true |
||||||
|
}, |
||||||
|
IPSure(){ |
||||||
|
this.ipVisible = false |
||||||
|
}, |
||||||
|
goback(){ |
||||||
|
this.$router.go(-1) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.addhr_tag{ |
||||||
|
background-color: #666; |
||||||
|
width: 6px; |
||||||
|
height: 17px; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.radio_icon{ |
||||||
|
font-size: 26px; |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,192 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">添加环节</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="saveAdd('form')">确定</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20 user_header"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>环节1.1</span> |
||||||
|
</div> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="addcourse()">添加环节</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<el-form :model="form" ref="form" label-width="120px" class="courseware"> |
||||||
|
<ul class="mgb20"> |
||||||
|
<li v-for="(item,index) in form.courseList" :key="index" class="flex-between"> |
||||||
|
<div style="width: 50%;"> |
||||||
|
<el-form-item label="环节名称" :prop="'courseList.' + index + '.linkName'" :rules="{required: true, message: '请输入项目课件', trigger: 'blur'}"> |
||||||
|
<el-input placeholder="请输入项目课件" v-model="item.linkName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="资源添加" :prop="'courseList.' + index + '.fileLink'" :rules="{required: true, message: '请添加文件', trigger: 'blur'}"> |
||||||
|
<el-upload |
||||||
|
class="link_upload" |
||||||
|
action="http://www.liuwanr.cn:8080/aliyun/uploadFiles" |
||||||
|
:on-remove="(file, fileList)=>{return handleRemove(file, fileList, index)}" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="(response, file, fileList)=>{return uploadSuccess(response, file, fileList, index)}" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:file-list="item.uploadList"> |
||||||
|
<el-button size="medium" type="primary" icon="el-icon-upload" class="uploadTitle">点击上传</el-button> |
||||||
|
</el-upload> |
||||||
|
</el-form-item> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button size="medium" type="primary" @click="delCourse(index)">删除课件</el-button> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data (){ |
||||||
|
return { |
||||||
|
form: { |
||||||
|
courseList: [{ |
||||||
|
projectId: this.$store.state.systemId, |
||||||
|
courseId : this.$store.state.courseId, |
||||||
|
linkName: '', |
||||||
|
fileLink: '', |
||||||
|
uploadList: [] |
||||||
|
}], |
||||||
|
}, |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData(){ |
||||||
|
let data = { |
||||||
|
projectId: this.form.courseList[0].projectId, |
||||||
|
courseId: this.form.courseList[0].courseId |
||||||
|
} |
||||||
|
this.$get(this.api.queryLinkDetails,data).then((res) => { |
||||||
|
res.message.map(e =>{ |
||||||
|
var arr = [] |
||||||
|
arr.push({ name: e.linkName, url: e.fileLink }); |
||||||
|
this.$set(e,"uploadList",arr) |
||||||
|
}) |
||||||
|
this.form.courseList = res.message |
||||||
|
}).catch((res) => {}) |
||||||
|
}, |
||||||
|
saveAdd(formName){ |
||||||
|
this.$refs[formName].validate((valid) => { |
||||||
|
if (valid) { |
||||||
|
var arr = this.form.courseList.map(v=>{ |
||||||
|
var obj = { |
||||||
|
...v |
||||||
|
} |
||||||
|
delete obj.uploadList |
||||||
|
return obj |
||||||
|
}) |
||||||
|
let data = { |
||||||
|
courseLink: arr |
||||||
|
} |
||||||
|
this.$post(this.api.addCourseLink,data).then((res) => { |
||||||
|
this.$message.success("添加成功！"); |
||||||
|
this.goback() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
addcourse(){ |
||||||
|
this.form.courseList = this.form.courseList.concat({ |
||||||
|
projectId: this.$store.state.systemId, |
||||||
|
courseId : this.$store.state.courseId, |
||||||
|
linkName: '', |
||||||
|
fileLink: '', |
||||||
|
uploadList: [] |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 上传文件 |
||||||
|
handleExceed(files, fileList) { |
||||||
|
this.$message.warning( |
||||||
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||||
|
); |
||||||
|
}, |
||||||
|
uploadSuccess(response, file, fileList, idx) { |
||||||
|
this.form.courseList[idx].uploadList.push({ name: file.name, url: response.message.fileUrl }); |
||||||
|
this.form.courseList[idx].fileLink = response.message.fileUrl |
||||||
|
}, |
||||||
|
uploadError(err, file, fileList) { |
||||||
|
this.$message({ |
||||||
|
message: "上传出错，请重试！", |
||||||
|
type: "error", |
||||||
|
center: true |
||||||
|
}); |
||||||
|
}, |
||||||
|
beforeRemove(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`); |
||||||
|
}, |
||||||
|
handleRemove(file, fileList, idx) { |
||||||
|
let uploadList = this.form.courseList[idx].uploadList; |
||||||
|
uploadList.forEach((item, index) => { |
||||||
|
if (file.name == item.name) { |
||||||
|
uploadList.splice(index, 1); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
delCourse(index){ |
||||||
|
this.$confirm('确定要删除该课件吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.form.courseList.splice(index, 1); |
||||||
|
this.$message.success('删除成功'); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
goback(){ |
||||||
|
this.$router.go(-1) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
/* .courseware ul .el-input{ |
||||||
|
width: 30%; |
||||||
|
} */ |
||||||
|
|
||||||
|
.courseware ul li{ |
||||||
|
margin-top: 20px; |
||||||
|
padding: 0 0 10px 0; |
||||||
|
border-bottom: 1px dashed #eee; |
||||||
|
} |
||||||
|
.courseware ul li:first-child{ |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.courseware ul li:last-child{ |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
.uploadTitle{ |
||||||
|
height: 40px !important; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,742 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">订单处理</span> |
||||||
|
</div> |
||||||
|
<el-button type="primary" size="small" round class="mag" v-preventReClick @click="saveOrder('form')">确定</el-button> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>基本信息</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
||||||
|
<el-col :span="6" :offset="5"> |
||||||
|
<el-form-item label="订单编号"> |
||||||
|
<el-input v-model="form.orderNumber" disabled placeholder="请输入订单编号"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="provinceId" label="省份"> |
||||||
|
<el-select v-model="form.provinceId" clearable placeholder="请选择省份" @change="getCity" @clear="clearprovince()"> |
||||||
|
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="customerId" label="客户名称"> |
||||||
|
<el-select v-model="form.customerId" clearable placeholder="请选择客户" |
||||||
|
:disabled="form.cityId ? false : true" @change="getcustomer" @clear="clearcustomer()"> |
||||||
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.customerName" :value="item.customerId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="联系人" prop="orderContact"> |
||||||
|
<el-input v-model="form.orderContact" disabled placeholder="请输入联系人姓名"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="邮箱"> |
||||||
|
<el-input v-model="form.email" disabled placeholder="请输入邮箱地址"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
|
||||||
|
<el-col :span="6" :offset="2"> |
||||||
|
<el-form-item label="订单时间"> |
||||||
|
<el-input v-model="form.orderDate" disabled placeholder="请输入订单时间"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="cityId" label="城市"> |
||||||
|
<el-select v-model="form.cityId" clearable placeholder="请选择城市" @clear="clearcity()" |
||||||
|
:disabled="form.provinceId ? false : true" @change="getSchool()"> |
||||||
|
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item prop="orderType" label="订单类型"> |
||||||
|
<el-select v-model="form.orderType" clearable placeholder="请选择订单类型"> |
||||||
|
<el-option v-for="(item,index) in orderTypeList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="电话"> |
||||||
|
<el-input v-model="form.phone" disabled placeholder="请输入电话号码" maxlength="11"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="订单金额" prop="orderAmount"> |
||||||
|
<el-input v-model="form.orderAmount" disabled placeholder="请输入订单金额"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-between mgb20 user_header"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>课程权限</span> |
||||||
|
</div> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="getConfig()">添加</el-button> |
||||||
|
</div> |
||||||
|
|
||||||
|
<el-table :data="jurisdictionData" class="orderTable" stripe header-align="center" show-summary :summary-method="getSummaries"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="courseName" label="应用名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="使用期限" align="center" width="300"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-select v-model="scope.row.usePeriod" placeholder="请选择"> |
||||||
|
<el-option v-for="(item,index) in yearList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="市场价(万)" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input v-model="scope.row.marketPrice" disabled placeholder="请输入"></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="成交价(万)" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input v-model="scope.row.transactionPrice" placeholder="请输入" |
||||||
|
type="text" oninput="value=value.replace(/[^\d.]/g,'')" @change="discountChange(scope.row)"></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="折扣率(%)" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-input v-model="scope.row.discount" disabled></el-input> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="端口地址" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button @click="configure(scope.row)">配置</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="发货" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.isDeliverGoods" |
||||||
|
:active-value="1" |
||||||
|
:inactive-value="0" |
||||||
|
@change="changeSwitch($event,scope.row,scope.$index)"> |
||||||
|
</el-switch> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="deljur(scope.$index,scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>合同信息</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<el-form ref="contractInformation" :model="contractInformation" :rules="rules" label-width="80px" class="flex-start"> |
||||||
|
<el-col :span="6" :offset="5"> |
||||||
|
<el-form-item label="合同名称"> |
||||||
|
<el-input v-model="contractInformation.contractInformationName" placeholder="请输入合同名称"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="合同金额" prop="contractInformationSum"> |
||||||
|
<el-input v-model="contractInformation.contractInformationSum" |
||||||
|
placeholder="请输入合同金额"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
|
||||||
|
<el-col :span="6" :offset="2"> |
||||||
|
<el-form-item label="合同编号"> |
||||||
|
<el-input v-model="contractInformation.contractInformationNumber" disabled placeholder="请输入合同编号"></el-input> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
<el-form-item label="上传合同"> |
||||||
|
<el-upload |
||||||
|
class="contract" |
||||||
|
:on-remove="handleRemove" |
||||||
|
:on-error="uploadError" |
||||||
|
:on-success="uploadSuccess" |
||||||
|
:before-remove="beforeRemove" |
||||||
|
:limit="1" |
||||||
|
:on-exceed="handleExceed" |
||||||
|
:action="api.uploadFiles" |
||||||
|
:file-list="uploadList" |
||||||
|
> |
||||||
|
<el-button size="medium" type="plain" class="uploadTitle">上传</el-button> |
||||||
|
</el-upload> |
||||||
|
|
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="2" class="downcol"> |
||||||
|
<el-form-item> |
||||||
|
<el-button size="medium" type="plain" class="down" @click="downLoad()">下载</el-button> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<!-- 添加应用 --> |
||||||
|
<el-dialog :visible.sync="curVisible" width="50%" center> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>课程列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-input placeholder="请输入课程名称" prefix-icon="el-icon-search" v-model="configSearch" @keyup.enter.native="onSearch" clearable></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="permissionData" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||||
|
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="courseName" label="课程名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="courseType" label="课程类型" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="配置的实训应用" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span class="ellipsis">{{scope.row.systemName}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="courseHours" label="预计课时" align="center"> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="curVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" v-preventReClick @click="addSystem()">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
|
||||||
|
<!-- 选择IP --> |
||||||
|
<el-dialog :visible.sync="ipVisible" width="70%" center> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>客户列表</span> |
||||||
|
</div> |
||||||
|
<el-table :data="IPData" stripe header-align="center"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="age" label="服务器名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="IP" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入端口号"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="端口" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入内网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入外网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="选择" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<i class="el-icon-success radio_icon"></i> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="ipVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="IPSure()">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
orderNumber: '', |
||||||
|
orderDate: '', |
||||||
|
provinceId: '', |
||||||
|
orderContact: '', |
||||||
|
email: '', |
||||||
|
customerId: '', |
||||||
|
orderType: '', |
||||||
|
cityId: '', |
||||||
|
phone: '', |
||||||
|
orderAmount: '', |
||||||
|
orderId: this.$store.state.orderId, |
||||||
|
}, |
||||||
|
contractInformation: { |
||||||
|
contractInformationName: '', |
||||||
|
contractInformationNumber: '', |
||||||
|
contractInformationSum: '', |
||||||
|
contractInformationLink: '', |
||||||
|
contractInformationId: '', |
||||||
|
orderId: '' |
||||||
|
}, |
||||||
|
uploadList: [], |
||||||
|
rules: { |
||||||
|
orderNumber: [ |
||||||
|
{ required: true, message: '请输入订单编号', trigger: 'blur' } |
||||||
|
], |
||||||
|
orderAmount: [ |
||||||
|
{ required: true, message: '请输入课程成交价计算订单金额', trigger: 'blur' } |
||||||
|
], |
||||||
|
provinceId: [ |
||||||
|
{ required: true, message: '请选择省份', trigger: 'change' } |
||||||
|
], |
||||||
|
cityId: [ |
||||||
|
{ required: true, message: '请选择城市', trigger: 'change' } |
||||||
|
], |
||||||
|
customerId: [ |
||||||
|
{ required: true, message: '请选择客户名称', trigger: 'change' } |
||||||
|
], |
||||||
|
orderType: [ |
||||||
|
{ required: true, message: '请选择订单类型', trigger: 'change' } |
||||||
|
], |
||||||
|
// phone: [ |
||||||
|
// { required: true, message: '请选择客户获取手机号', trigger: 'blur' }, |
||||||
|
// { |
||||||
|
// pattern: /^1[3456789]\d{9}$/, |
||||||
|
// message: '请输入正确的手机号', |
||||||
|
// trigger: 'blur' |
||||||
|
// } |
||||||
|
// ], |
||||||
|
// contractInformationName: [ |
||||||
|
// { required: true, message: '请输入合同名称', trigger: 'blur' } |
||||||
|
// ], |
||||||
|
contractInformationSum: [ |
||||||
|
// { required: true, message: '请输入合同金额', trigger: 'blur' }, |
||||||
|
{ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' } |
||||||
|
], |
||||||
|
transactionPrice: [ |
||||||
|
{ required: true, message: '请输入成交价', trigger: 'blur' }, |
||||||
|
{ pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' } |
||||||
|
], |
||||||
|
}, |
||||||
|
orderTypeList: [{ |
||||||
|
name: '正式', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '试用', |
||||||
|
value: 2 |
||||||
|
}], |
||||||
|
provinceList: this.$store.state.provinceList, |
||||||
|
cityList: [], |
||||||
|
schoolList: [], |
||||||
|
jurisdictionData: [], |
||||||
|
permissionData: [], |
||||||
|
curVisible: false, |
||||||
|
configSearch: '', |
||||||
|
yearList: [{ |
||||||
|
name: '1个月', |
||||||
|
value: 30 |
||||||
|
},{ |
||||||
|
name: '2个月', |
||||||
|
value: 60 |
||||||
|
},{ |
||||||
|
name: '3个月', |
||||||
|
value: 90 |
||||||
|
},{ |
||||||
|
name: '1年', |
||||||
|
value: 365 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '2年', |
||||||
|
value: 730 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '3年', |
||||||
|
value: 1095 |
||||||
|
}], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 1, |
||||||
|
ipVisible: false, |
||||||
|
IPData: [{ |
||||||
|
id: 1, |
||||||
|
age: '小额贷系统', |
||||||
|
storeName: '1个月', |
||||||
|
total: '2019.01.02 11:00', |
||||||
|
payamount: '2019.01.02 11:00', |
||||||
|
payamount: '700d12h1min', |
||||||
|
swtich: true, |
||||||
|
Intranet: '10.20.202.1', |
||||||
|
extranet: '10.20.202.1' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
age: '小额贷系统', |
||||||
|
storeName: '1个月', |
||||||
|
total: '2019.01.02 11:00', |
||||||
|
payamount: '2019.01.02 11:00', |
||||||
|
payamount: '700d12h1min', |
||||||
|
swtich: true, |
||||||
|
Intranet: '', |
||||||
|
extranet: '' |
||||||
|
}], |
||||||
|
curArr: '', |
||||||
|
test: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
if(this.form.orderId){ |
||||||
|
let data = { |
||||||
|
orderId: this.form.orderId |
||||||
|
} |
||||||
|
this.$get(this.api.queryOrderDetails,data).then((res) => { |
||||||
|
this.form = { |
||||||
|
orderNumber: res.message[0].orders[0].orderNumber, |
||||||
|
orderDate: res.message[0].orders[0].orderDate, |
||||||
|
provinceId: res.message[0].orders[0].provinceId, |
||||||
|
orderContact: res.message[0].orders[0].orderContact, |
||||||
|
email: res.message[0].orders[0].email, |
||||||
|
customerId: res.message[0].orders[0].customerId, |
||||||
|
orderType: res.message[0].orders[0].orderType, |
||||||
|
cityId: res.message[0].orders[0].cityId, |
||||||
|
phone: res.message[0].orders[0].phone, |
||||||
|
orderAmount: res.message[0].orders[0].orderAmount, |
||||||
|
orderId: res.message[0].orders[0].orderId, |
||||||
|
} |
||||||
|
this.jurisdictionData = res.message[0].coursePermissionss |
||||||
|
let arr1 = this.jurisdictionData |
||||||
|
let result1 = arr1.map(e => e.courseId).join() |
||||||
|
this.curArr = this.curArr.concat(result1) |
||||||
|
if(res.message[0].contractInformations[0].contractInformationLink){ |
||||||
|
var iconImg = []; |
||||||
|
iconImg.push({'name':'合同文件','url': res.message[0].contractInformations[0].contractInformationLink}); |
||||||
|
this.uploadList = iconImg |
||||||
|
} |
||||||
|
this.contractInformation = { |
||||||
|
contractInformationName: res.message[0].contractInformations[0].contractInformationName, |
||||||
|
contractInformationNumber: res.message[0].contractInformations[0].contractInformationNumber, |
||||||
|
contractInformationSum: res.message[0].contractInformations[0].contractInformationSum, |
||||||
|
contractInformationLink: res.message[0].contractInformations[0].contractInformationLink, |
||||||
|
contractInformationId: res.message[0].contractInformations[0].contractInformationId, |
||||||
|
orderId: res.message[0].contractInformations[0].orderId |
||||||
|
} |
||||||
|
this.getCityData() |
||||||
|
this.getSchoolData() |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 清除省份 |
||||||
|
clearprovince(){ |
||||||
|
this.form.cityId = '', |
||||||
|
this.form.customerId = '', |
||||||
|
this.form.orderContact = '' |
||||||
|
this.form.phone = '' |
||||||
|
this.form.email = '' |
||||||
|
}, |
||||||
|
// 获取城市 |
||||||
|
getCity(){ |
||||||
|
this.clearprovince() |
||||||
|
this.getCityData() |
||||||
|
}, |
||||||
|
getCityData(){ |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinceId |
||||||
|
} |
||||||
|
this.$get(this.api.queryCity,data).then(res => { |
||||||
|
this.cityList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除城市 |
||||||
|
clearcity(){ |
||||||
|
this.form.customerId = '', |
||||||
|
this.form.orderContact = '' |
||||||
|
this.form.phone = '' |
||||||
|
this.form.email = '' |
||||||
|
}, |
||||||
|
// 获取学校/客户名称 |
||||||
|
getSchool(){ |
||||||
|
this.clearcity() |
||||||
|
this.getSchoolData() |
||||||
|
}, |
||||||
|
getSchoolData(){ |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinceId, |
||||||
|
cityId: this.form.cityId |
||||||
|
} |
||||||
|
this.$get(this.api.queryOrderCustomer,data).then(res => { |
||||||
|
this.schoolList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
clearcustomer(){ |
||||||
|
this.form.orderContact = '' |
||||||
|
this.form.phone = '' |
||||||
|
this.form.email = '' |
||||||
|
}, |
||||||
|
// 获取学校/客户信息 |
||||||
|
getcustomer(){ |
||||||
|
let data = { |
||||||
|
customerId: this.form.customerId |
||||||
|
} |
||||||
|
this.$get(this.api.queryOrderCustomerContact,data).then(res => { |
||||||
|
this.form.orderContact = res.message[0].adminName |
||||||
|
this.form.phone = res.message[0].adminPhone |
||||||
|
this.form.email = res.message[0].email |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
async saveOrder() { |
||||||
|
try { |
||||||
|
await Promise.all([ |
||||||
|
this.$refs.form.validate(), |
||||||
|
this.$refs.contractInformation.validate() |
||||||
|
]); |
||||||
|
if(this.jurisdictionData.length == 0){ |
||||||
|
this.$message.error('请添加课程配置！'); |
||||||
|
}else{ |
||||||
|
function findCherries(fruit) { |
||||||
|
return fruit.transactionPrice === ''; |
||||||
|
} |
||||||
|
if(this.jurisdictionData.find(findCherries)){ |
||||||
|
this.$message.error('请先填写成交价！'); |
||||||
|
}else{ |
||||||
|
let data = { |
||||||
|
order: this.form, |
||||||
|
coursePermissionss: this.jurisdictionData, |
||||||
|
contractInformation: this.contractInformation |
||||||
|
} |
||||||
|
if(this.form.orderId){ |
||||||
|
this.$post(this.api.updateOrder,data).then((res) => { |
||||||
|
this.$message.success('编辑成功'); |
||||||
|
this.goback() |
||||||
|
}).catch((res) => {}) |
||||||
|
} else { |
||||||
|
this.$post(this.api.addOrder,data).then((res) => { |
||||||
|
this.$message.success('添加成功'); |
||||||
|
this.goback() |
||||||
|
}).catch((res) => {}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
return; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 获取应用配置 |
||||||
|
getConfig(rows){ |
||||||
|
this.multipleSelection = [] |
||||||
|
let data = { |
||||||
|
courseId: this.curArr, |
||||||
|
searchContent: this.configSearch, |
||||||
|
pageNo: this.pageNo, |
||||||
|
pageSize: this.pageSize, |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourseList,data).then(res => { |
||||||
|
res.message.rows.forEach(e => { |
||||||
|
e.courseType = this.courseTypeStatus(e.courseType) |
||||||
|
e.courseHours = this.hoursStatus(e.courseHours) |
||||||
|
}) |
||||||
|
this.permissionData = res.message.rows |
||||||
|
this.totals = res.message.total |
||||||
|
this.curVisible = true |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.getConfig() |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.courseId; |
||||||
|
}, |
||||||
|
// 多选操作 |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
// 绑定实训配置 |
||||||
|
addSystem() { |
||||||
|
this.curVisible = false |
||||||
|
let arr = this.multipleSelection |
||||||
|
let result = arr.map(e => e.courseId).join() |
||||||
|
this.curArr = this.curArr.concat(`,${result}`) |
||||||
|
if (this.curArr.substr(0,1)==','){ |
||||||
|
this.curArr = this.curArr.substr(1); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
courseId: result, |
||||||
|
} |
||||||
|
this.getPermissions(data) |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getConfig(); |
||||||
|
}, |
||||||
|
// 查询应用权限 |
||||||
|
getPermissions(val){ |
||||||
|
this.$get(this.api.queryCoursePermissions,val).then(res => { |
||||||
|
this.curVisible = false |
||||||
|
var arritem = { |
||||||
|
usePeriod: 30, |
||||||
|
transactionPrice: '', |
||||||
|
discount: '', |
||||||
|
isDeliverGoods: 0, |
||||||
|
portAddressId: 1, |
||||||
|
orderId: this.form.orderId |
||||||
|
} |
||||||
|
let arryNew = [] |
||||||
|
res.message.map(item => { |
||||||
|
arryNew.push(Object.assign({}, item, arritem)) |
||||||
|
}) |
||||||
|
this.jurisdictionData = this.jurisdictionData.concat(arryNew) |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
deljur(index,row){ |
||||||
|
this.$confirm('确定要删除该课程吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let newArr = this.curArr.split(",") |
||||||
|
this.removeByValue(newArr, row.courseId); |
||||||
|
var newStr = newArr.toString(); |
||||||
|
this.curArr = newStr |
||||||
|
this.jurisdictionData.splice(index,1); |
||||||
|
this.$message.success('删除成功'); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
discountChange(row){ |
||||||
|
let reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/ |
||||||
|
if(!(reg.test(row.transactionPrice))){ |
||||||
|
this.$message.error('请输入正确金额格式,可保留两位小数！'); |
||||||
|
row.transactionPrice = '' |
||||||
|
}else{ |
||||||
|
row.discount = this.Percentage(row.transactionPrice,row.marketPrice) |
||||||
|
} |
||||||
|
}, |
||||||
|
getSummaries(param) { |
||||||
|
const { columns, data } = param; |
||||||
|
var sums = 0; |
||||||
|
data.map(e => { |
||||||
|
sums+=Number(e.transactionPrice) |
||||||
|
}) |
||||||
|
this.form.orderAmount = sums |
||||||
|
return sums; |
||||||
|
}, |
||||||
|
changeSwitch (e,row,index) { |
||||||
|
let newData = row; |
||||||
|
newData.status = newData.status === 1 ? 1 : 0; |
||||||
|
this.jurisdictionData[index] = newData; |
||||||
|
}, |
||||||
|
// 上传文件 |
||||||
|
handleExceed(files, fileList) { |
||||||
|
this.$message.warning( |
||||||
|
`当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` |
||||||
|
); |
||||||
|
}, |
||||||
|
uploadSuccess(response, file, fileList) { |
||||||
|
this.uploadList.push({ name: file.name, url: response.message.fileUrl }); |
||||||
|
this.contractInformation.contractInformationLink = response.message.fileUrl |
||||||
|
}, |
||||||
|
uploadError(err, file, fileList) { |
||||||
|
this.$message({ |
||||||
|
message: "上传出错，请重试！", |
||||||
|
type: "error", |
||||||
|
center: true |
||||||
|
}); |
||||||
|
}, |
||||||
|
beforeRemove(file, fileList) { |
||||||
|
return this.$confirm(`确定移除 ${file.name}？`); |
||||||
|
}, |
||||||
|
handleRemove(file, fileList) { |
||||||
|
this.contractInformation.contractInformationLink = '' |
||||||
|
}, |
||||||
|
downLoad(){ |
||||||
|
let downFile = this.contractInformation.contractInformationLink.replace("http://liuwanr.oss-cn-shenzhen.aliyuncs.com/","") |
||||||
|
window.open(`${this.api.downloadFiles}?objectName=${downFile}`) |
||||||
|
}, |
||||||
|
configure(){ |
||||||
|
this.ipVisible = true |
||||||
|
}, |
||||||
|
IPSure(){ |
||||||
|
this.ipVisible = false |
||||||
|
}, |
||||||
|
goback(){ |
||||||
|
this.$router.go(-1) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
.uploadTitle{ |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
.application_input{ |
||||||
|
width: 250px; |
||||||
|
} |
||||||
|
.contract .el-upload{ |
||||||
|
width: 100%!important; |
||||||
|
} |
||||||
|
.downcol .el-form-item__content{ |
||||||
|
margin-left: 0!important; |
||||||
|
} |
||||||
|
.down{ |
||||||
|
margin-top: 60px; |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
/* 选择IP */ |
||||||
|
.tab_temp label{ |
||||||
|
width: 60px; |
||||||
|
} |
||||||
|
.mar10{ |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.radio_icon{ |
||||||
|
font-size: 26px; |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
.ellipsis{ |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,288 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form label-width="80px"> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="学科类别"> |
||||||
|
<el-select v-model="form.subjectType" clearable placeholder="请选择学科类别" @change="getProfessionalClass()" @clear="clearClass()"> |
||||||
|
<el-option v-for="(item,index) in subjectList" :key="index" :label="item.disciplineName" :value="item.disciplineId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="专业类"> |
||||||
|
<el-select v-model="form.professionalClass" clearable placeholder="请选择专业类" |
||||||
|
:disabled="form.subjectType ? false : true" @change="getProfessional()" @clear="clearProfess()"> |
||||||
|
<el-option v-for="(item,index) in ProfessionalClassList" :key="index" :label="item.professionalClassName" :value="item.professionalClassId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="专业"> |
||||||
|
<el-select v-model="form.professional" clearable placeholder="请选择专业" |
||||||
|
:disabled="form.professionalClass ? false : true" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in ProfessionalList" :key="index" :label="item.professionalName" :value="item.professionalId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="课程类型"> |
||||||
|
<el-select v-model="form.courseType" clearable placeholder="请选择课程类型" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in CourseTypeList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="4"> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入课程名称" prefix-icon="el-icon-search" v-model="form.CustomerSearch" clearable @keyup.enter.native="onSearch"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>课程列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="addcourse">新建课程</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table v-loading="loading" :data="courseData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="courseName" label="课程名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="courseType" label="课程类型" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="配置的实训应用" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span class="ellipsis">{{scope.row.systemName}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="courseHours" label="预计课时" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="上架/下架" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.isShelves" |
||||||
|
:active-value="0" |
||||||
|
:inactive-value="1" |
||||||
|
@change="changeSwitch(scope.row)"> |
||||||
|
</el-switch> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background @current-change="handleCurrentChange" :current-page="pageNo" layout="total, prev, pager, next" :total="totals"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
name: 'dashboard', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
name: localStorage.getItem('ms_username'), |
||||||
|
courseData:[], |
||||||
|
form: { |
||||||
|
courseType: '', |
||||||
|
subjectType: '', |
||||||
|
professionalClass: '', |
||||||
|
professional: '', |
||||||
|
CustomerSearch: '', |
||||||
|
}, |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 1, |
||||||
|
subjectList: [], |
||||||
|
ProfessionalClassList: [], |
||||||
|
ProfessionalList: [], |
||||||
|
multipleSelection: [], |
||||||
|
CourseTypeList: [{ |
||||||
|
name: '实训课程', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '理论课程', |
||||||
|
value: 2 |
||||||
|
}], |
||||||
|
loading: true |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getSubject() |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
courseType: this.form.courseType, |
||||||
|
disciplineId: this.form.subjectType, |
||||||
|
professionalClassId: this.form.professionalClass, |
||||||
|
professionalId: this.form.professional, |
||||||
|
searchContent: this.form.CustomerSearch, |
||||||
|
pageNo: this.pageNo, |
||||||
|
pageSize: this.pageSize, |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourse,data).then(res => { |
||||||
|
res.message.rows.forEach(e => { |
||||||
|
e.courseType = this.courseTypeStatus(e.courseType) |
||||||
|
e.courseHours = this.hoursStatus(e.courseHours) |
||||||
|
}) |
||||||
|
this.courseData = res.message.rows |
||||||
|
this.totals = res.message.total |
||||||
|
this.loading = false |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 获取学科类别 |
||||||
|
getSubject(){ |
||||||
|
this.$get(this.api.queryCourseDiscipline).then(res => { |
||||||
|
this.subjectList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除学科类别 |
||||||
|
clearClass(){ |
||||||
|
this.form.professionalClass = '', |
||||||
|
this.form.professional = '' |
||||||
|
}, |
||||||
|
// 获取专业类 |
||||||
|
getProfessionalClass(){ |
||||||
|
this.clearClass() |
||||||
|
this.getProfessionalClassData() |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getProfessionalClassData(){ |
||||||
|
let data = { |
||||||
|
disciplineId: this.form.subjectType |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourseProfessionalClass,data).then(res => { |
||||||
|
this.ProfessionalClassList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除专业类 |
||||||
|
clearProfess(){ |
||||||
|
this.form.professional = '' |
||||||
|
}, |
||||||
|
// 获取专业 |
||||||
|
getProfessional(){ |
||||||
|
this.clearProfess() |
||||||
|
this.getProfessionalData() |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getProfessionalData(){ |
||||||
|
let data = { |
||||||
|
professionalClassId: this.form.professionalClass |
||||||
|
} |
||||||
|
this.$get(this.api.queryCourseProfessional,data).then(res => { |
||||||
|
this.ProfessionalList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
addcourse(){ |
||||||
|
this.$store.commit("courseData", { course_id : ''}); |
||||||
|
this.$router.push('/addcurriculum'); |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$store.commit("courseData", { course_id : row.courseId}); |
||||||
|
this.$router.push('/addcurriculum'); |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let result = row.courseId |
||||||
|
var arr = [] |
||||||
|
arr.push(result) |
||||||
|
let data = arr |
||||||
|
this.$post(this.api.deleteCourse,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.courseId; |
||||||
|
}, |
||||||
|
// 批量删除 |
||||||
|
delAllSelection() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let arr = this.multipleSelection |
||||||
|
let result = arr.map(e => e.courseId) |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = result |
||||||
|
this.$post(this.api.deleteCourse,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择课程 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
changeSwitch (row) { |
||||||
|
let data = { |
||||||
|
courseId: row.courseId, |
||||||
|
isShelves: row.isShelves |
||||||
|
} |
||||||
|
this.$post(this.api.isShelves,data).then((res) => { |
||||||
|
this.getData(); |
||||||
|
this.$message.success("修改成功！"); |
||||||
|
}).catch((res) => { |
||||||
|
}) |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,266 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form label-width="80px"> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="国家"> |
||||||
|
<el-select v-model="form.countries" clearable placeholder="请选择国家"> |
||||||
|
<el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.name"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="省份"> |
||||||
|
<el-select v-model="form.provinces" clearable placeholder="请选择省份" @change="getCity()" @clear="clearprovince()"> |
||||||
|
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item label="城市"> |
||||||
|
<el-select v-model="form.city" clearable placeholder="请选择城市" :disabled="form.provinces ? false : true" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入客户名称/管理员姓名/电话" prefix-icon="el-icon-search" v-model="form.keyword" clearable @keyup.enter.native="onSearch"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>客户列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="addcustomer">新增客户</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="customerData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
{{scope.$index + (pageNo - 1) * pageSize + 1}} |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="schoolName" label="客户名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="countries" label="国家" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="行业" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<span class="ellipsis">{{scope.row.industryName}}</span> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="provinceName" label="省份" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="adminName" label="管理员姓名" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="adminPhone" label="管理联系电话" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<!-- <el-button type="text">查看</el-button> --> |
||||||
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
<el-button type="text" @click="permission">应用权限</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals" @current-change="handleCurrentChange" :current-page="pageNo"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
name: 'dashboard', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
name: localStorage.getItem('ms_username'), |
||||||
|
countryList: [{ |
||||||
|
name:'中国' |
||||||
|
}], |
||||||
|
customerData: [], |
||||||
|
form: { |
||||||
|
countries:'中国', |
||||||
|
provinces: '', |
||||||
|
city: '', |
||||||
|
keyword: '' |
||||||
|
}, |
||||||
|
multipleSelection: [], |
||||||
|
provinceList: [], |
||||||
|
cityList: [], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 1, |
||||||
|
ruleIds: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
|
||||||
|
}, |
||||||
|
computed: { |
||||||
|
role() { |
||||||
|
return this.name === 'admin' ? '超级管理员' : '普通用户'; |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
this.getProvince() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
countries: this.form.countries, |
||||||
|
provinceId: this.form.provinces, |
||||||
|
cityId: this.form.city, |
||||||
|
searchContent: this.form.keyword, |
||||||
|
pageNo: this.pageNo, |
||||||
|
pageSize: this.pageSize |
||||||
|
} |
||||||
|
this.$get(this.api.queryCustomer,data).then(res => { |
||||||
|
this.customerData = res.message.rows |
||||||
|
this.totals = res.message.total |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
getProvince(){ |
||||||
|
this.$get(this.api.queryProvince).then(res => { |
||||||
|
this.provinceList = res.message |
||||||
|
this.$store.commit("provinceData", { provinceList : this.provinceList}); |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除省份 |
||||||
|
clearprovince(){ |
||||||
|
this.form.city = '' |
||||||
|
}, |
||||||
|
getCity(){ |
||||||
|
this.clearprovince() |
||||||
|
this.getCityData() |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getCityData(){ |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinces |
||||||
|
} |
||||||
|
this.$get(this.api.queryCity,data).then(res => { |
||||||
|
this.cityList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
permission(){ |
||||||
|
this.$router.push('/permission') |
||||||
|
}, |
||||||
|
addcustomer(){ |
||||||
|
this.$store.commit("customerData", { customer_id : ''}); |
||||||
|
this.$router.push('/addcustomer'); |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$store.commit("customerData", { customer_id : row.customerId }); |
||||||
|
this.$router.push('/addcustomer'); |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let str = ''; |
||||||
|
str += row.customerId+','; |
||||||
|
var deleteList = str.split(',').map(Number); |
||||||
|
deleteList.pop() |
||||||
|
var arr = []; |
||||||
|
var signAgainReq = new Object(); |
||||||
|
signAgainReq.customerId = deleteList[0]; |
||||||
|
arr.push(signAgainReq); |
||||||
|
|
||||||
|
let data = { |
||||||
|
customer: arr |
||||||
|
} |
||||||
|
this.$post(this.api.deleteCustomer,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.customerId; |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delAllSelection() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
const length = this.multipleSelection.length; |
||||||
|
let str = ''; |
||||||
|
for (let i = 0; i < length; i++) { |
||||||
|
str += this.multipleSelection[i].customerId+','; |
||||||
|
} |
||||||
|
var deleteList = str.split(',').map(Number); |
||||||
|
deleteList.pop() |
||||||
|
var arr = []; |
||||||
|
for(var i = 0,len = deleteList.length; i < len; i++){ |
||||||
|
var signAgainReq = new Object(); |
||||||
|
signAgainReq.customerId = deleteList[i]; |
||||||
|
arr.push(signAgainReq); |
||||||
|
} |
||||||
|
// 批量删除 |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = { |
||||||
|
customer: arr |
||||||
|
} |
||||||
|
this.$post(this.api.deleteCustomer,data).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择客户 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,46 @@ |
|||||||
|
<template> |
||||||
|
<section class="main"> |
||||||
|
<div class="crumbs"> |
||||||
|
<el-breadcrumb separator="/"> |
||||||
|
<el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item> |
||||||
|
</el-breadcrumb> |
||||||
|
</div> |
||||||
|
<div class="container"> |
||||||
|
<span>{{$t('i18n.tips')}}</span> |
||||||
|
<el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{$t('i18n.btn')}}</el-button> |
||||||
|
<div class="list"> |
||||||
|
<h2>{{$t('i18n.title1')}}</h2> |
||||||
|
<p>{{$t('i18n.p1')}}</p> |
||||||
|
<p>{{$t('i18n.p2')}}</p> |
||||||
|
<p>{{$t('i18n.p3')}}</p> |
||||||
|
</div> |
||||||
|
<h2>{{$t('i18n.title2')}}</h2> |
||||||
|
<div> |
||||||
|
<i18n path="i18n.info" tag="p"> |
||||||
|
<a place="action" href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n">{{ $t('i18n.value') }}</a> |
||||||
|
</i18n> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data(){ |
||||||
|
return { |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.list{ |
||||||
|
padding: 30px 0; |
||||||
|
} |
||||||
|
.list p{ |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
a{ |
||||||
|
color: #409eff; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,225 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="crumbs"> |
||||||
|
<el-breadcrumb separator="/"> |
||||||
|
<el-breadcrumb-item><i class="el-icon-lx-emoji"></i> 自定义图标</el-breadcrumb-item> |
||||||
|
</el-breadcrumb> |
||||||
|
</div> |
||||||
|
<div class="container"> |
||||||
|
<h2>使用方法</h2> |
||||||
|
<p style="line-height: 50px;"> |
||||||
|
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{iconList.length}}个图标） |
||||||
|
</p> |
||||||
|
<p class="example-p"> |
||||||
|
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px;color: #ff5900"></i> |
||||||
|
<span><i class="el-icon-lx-redpacket_fill"></i></span> |
||||||
|
</p> |
||||||
|
<p class="example-p"> |
||||||
|
<i class="el-icon-lx-weibo" style="font-size: 30px;color:#fd5656"></i> |
||||||
|
<span><i class="el-icon-lx-weibo"></i></span> |
||||||
|
</p> |
||||||
|
<p class="example-p"> |
||||||
|
<i class="el-icon-lx-emojifill" style="font-size: 30px;color: #ffc300"></i> |
||||||
|
<span><i class="el-icon-lx-emojifill"></i></span> |
||||||
|
</p> |
||||||
|
<br> |
||||||
|
<h2>图标</h2> |
||||||
|
<div class="search-box"> |
||||||
|
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input> |
||||||
|
</div> |
||||||
|
<ul> |
||||||
|
<li class="icon-li" v-for="(item,index) in list" :key="index"> |
||||||
|
<div class="icon-li-content"> |
||||||
|
<i :class="`el-icon-lx-${item}`"></i> |
||||||
|
<span>{{item}}</span> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data: function(){ |
||||||
|
return { |
||||||
|
keyword: '', |
||||||
|
iconList: [ |
||||||
|
'attentionforbid', |
||||||
|
'attentionforbidfill', |
||||||
|
'attention', |
||||||
|
'attentionfill', |
||||||
|
'tag', |
||||||
|
'tagfill', |
||||||
|
'people', |
||||||
|
'peoplefill', |
||||||
|
'notice', |
||||||
|
'noticefill', |
||||||
|
'mobile', |
||||||
|
'mobilefill', |
||||||
|
'voice', |
||||||
|
'voicefill', |
||||||
|
'unlock', |
||||||
|
'lock', |
||||||
|
'home', |
||||||
|
'homefill', |
||||||
|
'delete', |
||||||
|
'deletefill', |
||||||
|
'notification', |
||||||
|
'notificationfill', |
||||||
|
'notificationforbidfill', |
||||||
|
'like', |
||||||
|
'likefill', |
||||||
|
'comment', |
||||||
|
'commentfill', |
||||||
|
'camera', |
||||||
|
'camerafill', |
||||||
|
'warn', |
||||||
|
'warnfill', |
||||||
|
'time', |
||||||
|
'timefill', |
||||||
|
'location', |
||||||
|
'locationfill', |
||||||
|
'favor', |
||||||
|
'favorfill', |
||||||
|
'skin', |
||||||
|
'skinfill', |
||||||
|
'news', |
||||||
|
'newsfill', |
||||||
|
'record', |
||||||
|
'recordfill', |
||||||
|
'emoji', |
||||||
|
'emojifill', |
||||||
|
'message', |
||||||
|
'messagefill', |
||||||
|
'goods', |
||||||
|
'goodsfill', |
||||||
|
'crown', |
||||||
|
'crownfill', |
||||||
|
'move', |
||||||
|
'add', |
||||||
|
'hot', |
||||||
|
'hotfill', |
||||||
|
'service', |
||||||
|
'servicefill', |
||||||
|
'present', |
||||||
|
'presentfill', |
||||||
|
'pic', |
||||||
|
'picfill', |
||||||
|
'rank', |
||||||
|
'rankfill', |
||||||
|
'male', |
||||||
|
'female', |
||||||
|
'down', |
||||||
|
'top', |
||||||
|
'recharge', |
||||||
|
'rechargefill', |
||||||
|
'forward', |
||||||
|
'forwardfill', |
||||||
|
'info', |
||||||
|
'infofill', |
||||||
|
'redpacket', |
||||||
|
'redpacket_fill', |
||||||
|
'roundadd', |
||||||
|
'roundaddfill', |
||||||
|
'friendadd', |
||||||
|
'friendaddfill', |
||||||
|
'cart', |
||||||
|
'cartfill', |
||||||
|
'more', |
||||||
|
'moreandroid', |
||||||
|
'back', |
||||||
|
'right', |
||||||
|
'shop', |
||||||
|
'shopfill', |
||||||
|
'question', |
||||||
|
'questionfill', |
||||||
|
'roundclose', |
||||||
|
'roundclosefill', |
||||||
|
'roundcheck', |
||||||
|
'roundcheckfill', |
||||||
|
'global', |
||||||
|
'mail', |
||||||
|
'punch', |
||||||
|
'exit', |
||||||
|
'upload', |
||||||
|
'read', |
||||||
|
'file', |
||||||
|
'link', |
||||||
|
'full', |
||||||
|
'group', |
||||||
|
'friend', |
||||||
|
'profile', |
||||||
|
'addressbook', |
||||||
|
'calendar', |
||||||
|
'text', |
||||||
|
'copy', |
||||||
|
'share', |
||||||
|
'wifi', |
||||||
|
'vipcard', |
||||||
|
'weibo', |
||||||
|
'remind', |
||||||
|
'refresh', |
||||||
|
'filter', |
||||||
|
'settings', |
||||||
|
'scan', |
||||||
|
'qrcode', |
||||||
|
'cascades', |
||||||
|
'apps', |
||||||
|
'sort', |
||||||
|
'searchlist', |
||||||
|
'search', |
||||||
|
'edit' |
||||||
|
] |
||||||
|
} |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
list(){ |
||||||
|
return this.iconList.filter((item) => { |
||||||
|
return item.indexOf(this.keyword) !== -1; |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.example-p{ |
||||||
|
height: 45px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.search-box{ |
||||||
|
text-align: center; |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.search{ |
||||||
|
width: 300px; |
||||||
|
} |
||||||
|
ul,li{ |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
.icon-li{ |
||||||
|
display: inline-block; |
||||||
|
padding: 10px; |
||||||
|
width: 120px; |
||||||
|
height: 120px; |
||||||
|
} |
||||||
|
.icon-li-content{ |
||||||
|
display: flex; |
||||||
|
height: 100%; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.icon-li-content i{ |
||||||
|
font-size: 36px; |
||||||
|
color: #606266; |
||||||
|
} |
||||||
|
.icon-li-content span{ |
||||||
|
margin-top: 10px; |
||||||
|
color: #787878; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,186 @@ |
|||||||
|
<template> |
||||||
|
<div class="login-wrap"> |
||||||
|
<div class="header"> |
||||||
|
<div class="logo"> |
||||||
|
<img src="../../assets/img/logo.png"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="ms-login"> |
||||||
|
<div class="ms-title"> |
||||||
|
<p class="title">账号登录</p> |
||||||
|
<el-form :model="param" :rules="rules" ref="login" label-width="0px" style="margin-top: 40px"> |
||||||
|
<el-form-item prop="username"> |
||||||
|
<el-input v-model="param.username" placeholder="username"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item prop="password"> |
||||||
|
<el-input |
||||||
|
type="password" |
||||||
|
placeholder="password" |
||||||
|
v-model="param.password" |
||||||
|
@keyup.enter.native="submitForm()" |
||||||
|
> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-button type="text" class="forget">忘记密码?</el-button> |
||||||
|
<div class="login-btn"> |
||||||
|
<el-button type="primary" @click="submitForm()">马上登录</el-button> |
||||||
|
</div> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<v-footer class="footer" ref="footer"></v-footer> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import vFooter from '../common/Footer' |
||||||
|
export default { |
||||||
|
data: function() { |
||||||
|
return { |
||||||
|
param: { |
||||||
|
username: 'admin', |
||||||
|
password: 'admin', |
||||||
|
}, |
||||||
|
rules: { |
||||||
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
||||||
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
||||||
|
}, |
||||||
|
activeName: 'first' |
||||||
|
}; |
||||||
|
}, |
||||||
|
components: { |
||||||
|
vFooter |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
submitForm() { |
||||||
|
this.$refs.login.validate(valid => { |
||||||
|
if (valid) { |
||||||
|
let data = { |
||||||
|
account: this.param.username, |
||||||
|
password: this.param.password, |
||||||
|
source: 0 |
||||||
|
} |
||||||
|
this.$get(this.api.logins,data).then(res => { |
||||||
|
if(res.message.retvalue.roleId == 1){ |
||||||
|
this.$message.success('登录成功'); |
||||||
|
localStorage.setItem('ms_username', this.param.username); |
||||||
|
this.$store.commit("userLoginData", { userLogin_id : res.message.retvalue.userId}); |
||||||
|
this.$router.push('/dashboard'); |
||||||
|
}else{ |
||||||
|
this.$message.error('该用户没有权限'); |
||||||
|
} |
||||||
|
}).catch(res => {}); |
||||||
|
} else { |
||||||
|
this.$message.error('请输入账号和密码'); |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleClick(tab, event) { |
||||||
|
console.log(tab, event); |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.login-wrap { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-image: url(../../assets/img/login-bg.png); |
||||||
|
background-size: 100%; |
||||||
|
} |
||||||
|
.ms-title { |
||||||
|
width: 548px; |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50px; |
||||||
|
transform: translate(-50%,0); |
||||||
|
} |
||||||
|
.ms-login { |
||||||
|
position: relative; |
||||||
|
width: 1200px; |
||||||
|
height: 82%; |
||||||
|
margin: 60px auto 20px; |
||||||
|
background-image: url(../../assets/img/login-input.png); |
||||||
|
box-shadow:0px 0px 79px 0px rgba(11,15,65,0.36); |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.title{ |
||||||
|
font-size: 16px; |
||||||
|
text-align: center; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.login-btn { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.login-btn button { |
||||||
|
width: 100%; |
||||||
|
height: 88px; |
||||||
|
margin-bottom: 50px; |
||||||
|
font-weight: bold; |
||||||
|
background:linear-gradient(90deg,rgba(94,206,253,1),rgba(91,67,231,1)); |
||||||
|
box-shadow:0px 7px 27px 0px rgba(50,129,255,0.51); |
||||||
|
border-radius:10px; |
||||||
|
} |
||||||
|
.login-tips { |
||||||
|
text-align: center; |
||||||
|
color: #999; |
||||||
|
font-weight:bold; |
||||||
|
} |
||||||
|
.forget{ |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 28px; |
||||||
|
text-align: right; |
||||||
|
color: #999; |
||||||
|
font-weight:bold; |
||||||
|
} |
||||||
|
.thirdParty{ |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 33px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 头部 */ |
||||||
|
.header{ |
||||||
|
height: 60px; |
||||||
|
background-color: #fff; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.logo{ |
||||||
|
width: 171px; |
||||||
|
height: 40px; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
img{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.header_title{ |
||||||
|
width: 33%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.header_title a{ |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.header_title a:hover{ |
||||||
|
color: blueviolet; |
||||||
|
} |
||||||
|
.nul{ |
||||||
|
width:80px; |
||||||
|
margin-right: 30px; |
||||||
|
} |
||||||
|
.footer{ |
||||||
|
/* position: absolute; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; */ |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,252 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form label-width="80px"> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="省份"> |
||||||
|
<el-select v-model="form.provinces" clearable placeholder="请选择省份" @change="getCity()" @clear="clearprovince()"> |
||||||
|
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="城市"> |
||||||
|
<el-select v-model="form.city" clearable placeholder="请选择城市" :disabled="form.provinces ? false : true" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="订单类型"> |
||||||
|
<el-select v-model="form.orderType" clearable placeholder="请选择订单类型" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in orderTypeList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="订单状态"> |
||||||
|
<el-select v-model="form.orderStatus" clearable placeholder="请选择订单状态" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in orderStatusList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="4"> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入客户名称" prefix-icon="el-icon-search" v-model="keyword" @keyup.enter.native="onSearch" clearable></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>订单列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="addOrder()">新建订单</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="orderData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="orderNumber" label="订单编号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="customerName" label="客户名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<!-- <el-table-column prop="orderName" label="订单名称" align="center"> |
||||||
|
</el-table-column> --> |
||||||
|
<el-table-column prop="orderAmount" label="订单金额" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="orderDate" label="订单日期" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="orderType" label="订单类型" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="orderStatus" label="订单状态" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="orderNature" label="订单性质" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" @current-change="handleCurrentChange" :current-page="pageNo" :total="totals"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
provinces: '', |
||||||
|
city: '', |
||||||
|
orderType: '', |
||||||
|
orderStatus: '' |
||||||
|
}, |
||||||
|
keyword: '', |
||||||
|
orderData:[], |
||||||
|
multipleSelection: [], |
||||||
|
provinceList: this.$store.state.provinceList, |
||||||
|
cityList: [], |
||||||
|
orderTypeList: [{ |
||||||
|
name: '正式', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '试用', |
||||||
|
value: 2 |
||||||
|
}], |
||||||
|
orderStatusList: [{ |
||||||
|
name: '待发货', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已完成', |
||||||
|
value: 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '已取消', |
||||||
|
value: 3 |
||||||
|
}], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 1 |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinces, |
||||||
|
cityId: this.form.city, |
||||||
|
orderType: this.form.orderType, |
||||||
|
orderStatus: this.form.orderStatus, |
||||||
|
searchContent: this.keyword, |
||||||
|
pageNo: this.pageNo, |
||||||
|
pageSize: this.pageSize |
||||||
|
} |
||||||
|
this.$get(this.api.queryOrder,data).then(res => { |
||||||
|
res.message.rows.forEach(e => { |
||||||
|
e.orderType = this.orderTypeFn(e.orderType) |
||||||
|
e.orderStatus = this.orderStatusFn(e.orderStatus) |
||||||
|
e.orderNature = this.orderNatureFn(e.orderNature) |
||||||
|
}) |
||||||
|
this.orderData = res.message.rows |
||||||
|
this.totals = res.message.total |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除省份 |
||||||
|
clearprovince(){ |
||||||
|
this.form.city = '' |
||||||
|
}, |
||||||
|
// 获取城市 |
||||||
|
getCity(){ |
||||||
|
this.clearprovince() |
||||||
|
this.getCityData() |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getCityData(){ |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinces |
||||||
|
} |
||||||
|
this.$get(this.api.queryCity,data).then(res => { |
||||||
|
this.cityList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
addOrder(){ |
||||||
|
this.$store.commit("systemData", { order_id : ''}); |
||||||
|
this.$router.push('/addorder'); |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$store.commit("systemData", { order_id : row.orderId}); |
||||||
|
this.$router.push('/addorder'); |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let result = row.orderId |
||||||
|
var arr = [] |
||||||
|
arr.push(result) |
||||||
|
let data = arr |
||||||
|
this.$post(this.api.deleteOrder,data).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.orderId; |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delAllSelection() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let arr = this.multipleSelection |
||||||
|
let result = arr.map(e => e.orderId) |
||||||
|
// 批量删除 |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let data = result |
||||||
|
this.$post(this.api.deleteOrder,data).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择订单 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,243 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="per_title" v-preventReClick @click="goback()"> |
||||||
|
<i class="el-icon-arrow-left"></i> |
||||||
|
<span class="per_back">返回</span> |
||||||
|
<span class="per_school">南京大学应用权限</span> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-center mgb20 user_header"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>代理配置</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="flex-between"> |
||||||
|
<span>内网地址配置</span> |
||||||
|
<div class="border_lf flex-column"> |
||||||
|
<p class="marb30">平台服务</p> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>IP</label> |
||||||
|
<el-input placeholder="请输入IP地址" class="mar_input"></el-input> |
||||||
|
<label>端口</label> |
||||||
|
<el-input placeholder="请输入端口号"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="border_lf pad_none flex-column"> |
||||||
|
<p class="marb30">流媒体服务</p> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>IP</label> |
||||||
|
<el-input placeholder="请输入IP地址" class="mar_input"></el-input> |
||||||
|
<label>端口</label> |
||||||
|
<el-input placeholder="请输入端口号"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
|
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="addhr_tag"></p> |
||||||
|
<span>应用列表</span> |
||||||
|
</div> |
||||||
|
<el-table :data="permissionData" class="table" stripe :span-method="SpanMethod" header-align="center"> |
||||||
|
<el-table-column prop="id" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="age" label="应用名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="storeName" label="使用期限" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="total" label="启用时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="payamount" label="结束时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="payamount" label="剩余时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="IP" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp" v-if="scope.row.Intranet != ''"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入端口号"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="端口" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp" v-if="scope.row.Intranet != ''"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入内网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入外网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-else> |
||||||
|
<el-button type="plain" @click="chooseIp">选择IP与端口</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<el-switch |
||||||
|
v-model="scope.row.swtich" |
||||||
|
active-text="开启" |
||||||
|
inactive-text="关闭" |
||||||
|
@change="changeSwitch(scope.row)"> |
||||||
|
</el-switch> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background layout="total, prev, pager, next" :total="totals"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<!-- 选择IP --> |
||||||
|
<el-dialog :visible.sync="ipVisible" width="70%" center> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>客户列表</span> |
||||||
|
</div> |
||||||
|
<el-table :data="permissionData" class="table" stripe header-align="center"> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="age" label="服务器名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="IP" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入端口号"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="端口" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<div class="tab_temp"> |
||||||
|
<div class="flex-center"> |
||||||
|
<label>内网:</label> |
||||||
|
<el-input v-model="scope.row.Intranet" placeholder="请输入内网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
<div class="flex-center mar10"> |
||||||
|
<label>外网:</label> |
||||||
|
<el-input v-model="scope.row.extranet" placeholder="请输入外网IP地址"></el-input> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="选择" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<i class="el-icon-success radio_icon"></i> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<span slot="footer" class="dialog-footer"> |
||||||
|
<el-button @click="teacherVisible = false">取 消</el-button> |
||||||
|
<el-button type="primary" @click="editSure('teacherForm')">确 定</el-button> |
||||||
|
</span> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data (){ |
||||||
|
return { |
||||||
|
permissionData: [{ |
||||||
|
id: 1, |
||||||
|
age: '小额贷系统', |
||||||
|
storeName: '1个月', |
||||||
|
total: '2019.01.02 11:00', |
||||||
|
payamount: '2019.01.02 11:00', |
||||||
|
payamount: '700d12h1min', |
||||||
|
swtich: true, |
||||||
|
Intranet: '10.20.202.1', |
||||||
|
extranet: '10.20.202.1' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
age: '小额贷系统', |
||||||
|
storeName: '1个月', |
||||||
|
total: '2019.01.02 11:00', |
||||||
|
payamount: '2019.01.02 11:00', |
||||||
|
payamount: '700d12h1min', |
||||||
|
swtich: true, |
||||||
|
Intranet: '', |
||||||
|
extranet: '' |
||||||
|
}], |
||||||
|
totals: 1, |
||||||
|
ipVisible: false |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
SpanMethod({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (rowIndex % 2 === 0) { |
||||||
|
if (columnIndex === 6) { |
||||||
|
if(!row.Intranet){ |
||||||
|
return [1, 2]; |
||||||
|
} |
||||||
|
} |
||||||
|
// else if (columnIndex === 1) { |
||||||
|
// return [0, 0]; |
||||||
|
// } |
||||||
|
} |
||||||
|
}, |
||||||
|
chooseIp(){ |
||||||
|
this.ipVisible = true |
||||||
|
}, |
||||||
|
goback(){ |
||||||
|
this.$router.go(-1) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.border_lf{ |
||||||
|
border-left: 1px dashed #eee; |
||||||
|
padding: 0 60px; |
||||||
|
} |
||||||
|
.border_lf label{ |
||||||
|
width: 120px; |
||||||
|
} |
||||||
|
.pad_none{ |
||||||
|
padding: 0 0 0 60px; |
||||||
|
} |
||||||
|
.mar_input{ |
||||||
|
margin-right: 80px; |
||||||
|
} |
||||||
|
.marb30{ |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
.tab_temp label{ |
||||||
|
width: 60px; |
||||||
|
} |
||||||
|
.mar10{ |
||||||
|
margin-top: 10px; |
||||||
|
} |
||||||
|
.radio_icon{ |
||||||
|
font-size: 26px; |
||||||
|
color: #9278FF; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,359 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<el-row :gutter="20"> |
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div> |
||||||
|
<div class="flex-center mgb20"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>筛选</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-form label-width="80px"> |
||||||
|
<el-row> |
||||||
|
<el-col :span="4"> |
||||||
|
<el-form-item label="国家"> |
||||||
|
<el-select v-model="form.countries" clearable placeholder="请选择国家"> |
||||||
|
<el-option v-for="(item,index) in countryList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="省份"> |
||||||
|
<el-select v-model="form.provinces" clearable placeholder="请选择省份" @change="getCity" @clear="clearprovince()"> |
||||||
|
<el-option v-for="(item,index) in provinceList" :key="index" :label="item.provinceName" :value="item.provinceId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="城市"> |
||||||
|
<el-select v-model="form.city" clearable placeholder="请选择城市" |
||||||
|
:disabled="form.provinces ? false : true" @clear="clearcity()" @change="getSchool"> |
||||||
|
<el-option v-for="(item,index) in cityList" :key="index" :label="item.cityName" :value="item.cityId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="学校"> |
||||||
|
<el-select v-model="form.schoolId" clearable placeholder="请选择学校" :disabled="form.city ? false : true" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in schoolList" :key="index" :label="item.schoolName" :value="item.schoolId"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="5"> |
||||||
|
<el-form-item label="角色"> |
||||||
|
<el-select v-model="form.accountRole" clearable placeholder="请选择角色" @change="getData()"> |
||||||
|
<el-option v-for="(item,index) in accountRoleList" :key="index" :label="item.name" :value="item.value"></el-option> |
||||||
|
</el-select> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
|
||||||
|
<el-row> |
||||||
|
<el-col :span="10"> |
||||||
|
<el-form-item label="创建时间" class="userRadio"> |
||||||
|
<el-radio-group v-model="form.month" @change="itemRadio"> |
||||||
|
<el-radio v-for="(item,index) in dateList" :key="index" :label="item.id" border>{{item.name}}</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="8"> |
||||||
|
<el-form-item label="自定义"> |
||||||
|
<el-date-picker v-model="form.date" align="right" unlink-panels type="daterange" |
||||||
|
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="selectTime" clearable></el-date-picker> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
<el-col :span="6"> |
||||||
|
<el-form-item> |
||||||
|
<el-input placeholder="请输入用户姓名/学校名称" prefix-icon="el-icon-search" v-model="form.keyword" clearable @keyup.enter.native="onSearch"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
|
||||||
|
<el-col :span="24"> |
||||||
|
<el-card shadow="hover" class="mgb20"> |
||||||
|
<div class="flex-between mgb20"> |
||||||
|
<div class="flex-center"> |
||||||
|
<p class="hr_tag"></p> |
||||||
|
<span>用户列表</span> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<el-button type="primary" size="small" round class="mag" @click="adduser">新增用户</el-button> |
||||||
|
<el-button type="primary" size="small" round @click="delAllSelection">批量删除</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table :data="userData" class="table" stripe header-align="center" @selection-change="handleSelectionChange" :row-key="getRowKeys"> |
||||||
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
||||||
|
<el-table-column type="index" width="100" label="序号" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<!-- <el-table-column prop="userAccount" label="用户账号" align="center"> |
||||||
|
</el-table-column> --> |
||||||
|
<el-table-column prop="userName" label="姓名" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="countries" label="国家" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="provinceName" label="省份" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="cityName" label="城市" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="schoolName" label="学校名称" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="NewaccountRole" label="账号角色" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="creationTime" label="创建时间" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column prop="logInNumber" label="登录次数" align="center"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="操作" align="center"> |
||||||
|
<template slot-scope="scope"> |
||||||
|
<!-- <el-button type="text">查看</el-button> --> |
||||||
|
<el-button type="text" @click="edit(scope.row)">编辑</el-button> |
||||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||||
|
</template> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="pagination"> |
||||||
|
<el-pagination background @current-change="currentChange" :current-page="pageNo" layout="total, prev, pager, next" :total="totals"> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</el-card> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import bus from '../common/bus'; |
||||||
|
export default { |
||||||
|
name: 'dashboard', |
||||||
|
data() { |
||||||
|
return { |
||||||
|
form: { |
||||||
|
name: '', |
||||||
|
countries: '中国', |
||||||
|
provinces: '', |
||||||
|
city: '', |
||||||
|
schoolId: '', |
||||||
|
accountRole: '', |
||||||
|
keyword: '', |
||||||
|
date:'', |
||||||
|
startTime: '', |
||||||
|
endTime: '', |
||||||
|
month: '' |
||||||
|
}, |
||||||
|
accountRoleList: [{ |
||||||
|
name: '超级管理员', |
||||||
|
value: 1 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '管理员', |
||||||
|
value: 2 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '教师', |
||||||
|
value: 3 |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '学生', |
||||||
|
value: 4 |
||||||
|
}], |
||||||
|
countryList: [{ |
||||||
|
name:'中国' |
||||||
|
}], |
||||||
|
provinceList: this.$store.state.provinceList, |
||||||
|
cityList: [], |
||||||
|
schoolList: [], |
||||||
|
userData:[], |
||||||
|
dateList: [{ |
||||||
|
id: '', |
||||||
|
name: '不限' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
name: '3个月内' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 6, |
||||||
|
name: '6个月内' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 9, |
||||||
|
name: '9个月内' |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 12, |
||||||
|
name: '1年内' |
||||||
|
}], |
||||||
|
pageNo: 1, |
||||||
|
pageSize: 10, |
||||||
|
totals: 1, |
||||||
|
multipleSelection: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getData() { |
||||||
|
let data = { |
||||||
|
countries: this.form.countries, |
||||||
|
provinceId: this.form.provinces, |
||||||
|
cityId: this.form.city, |
||||||
|
schoolId: this.form.schoolId, |
||||||
|
month: this.form.month, |
||||||
|
creationTime: this.form.startTime, |
||||||
|
endTime: this.form.endTime, |
||||||
|
roleId: this.form.accountRole, |
||||||
|
searchContent: this.form.keyword, |
||||||
|
pageNo: this.pageNo, |
||||||
|
pageSize: this.pageSize |
||||||
|
} |
||||||
|
this.$get(this.api.queryUser,data).then(res => { |
||||||
|
res.message.rows.forEach(e => { |
||||||
|
if(e.roleId.length > 1) { |
||||||
|
let NewaccountRole = [] |
||||||
|
let roleIds = e.roleId.split(',') |
||||||
|
roleIds.forEach((n,k) => { |
||||||
|
NewaccountRole.push(this.roleStatus(n)) |
||||||
|
}) |
||||||
|
e.NewaccountRole = NewaccountRole.join(',') |
||||||
|
}else{ |
||||||
|
e.NewaccountRole = this.roleStatus(e.roleId) |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
this.userData = res.message.rows |
||||||
|
this.totals = res.message.total |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除省份 |
||||||
|
clearprovince(){ |
||||||
|
this.form.city = '', |
||||||
|
this.form.schoolId = '' |
||||||
|
}, |
||||||
|
// 获取城市 |
||||||
|
getCity(){ |
||||||
|
this.clearprovince() |
||||||
|
this.getCityData() |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getCityData(){ |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinces |
||||||
|
} |
||||||
|
this.$get(this.api.queryCity,data).then(res => { |
||||||
|
this.cityList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
// 清除城市 |
||||||
|
clearcity(){ |
||||||
|
this.form.schoolId = '' |
||||||
|
}, |
||||||
|
// 获取学校/客户名称 |
||||||
|
getSchool(){ |
||||||
|
this.clearcity() |
||||||
|
this.getSchoolData() |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
getSchoolData(){ |
||||||
|
let data = { |
||||||
|
provinceId: this.form.provinces, |
||||||
|
cityId: this.form.city |
||||||
|
} |
||||||
|
this.$get(this.api.querySchool,data).then(res => { |
||||||
|
this.schoolList = res.message |
||||||
|
}).catch(res => {}); |
||||||
|
}, |
||||||
|
onSearch(){ |
||||||
|
this.pageNo = 1 |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
itemRadio(val){ |
||||||
|
this.form.month = val |
||||||
|
this.form.date = '' |
||||||
|
this.form.startTime = '' |
||||||
|
this.form.endTime = '' |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
selectTime(val){ |
||||||
|
if(val){ |
||||||
|
this.form.startTime = val[0] |
||||||
|
this.form.endTime = val[1] |
||||||
|
}else{ |
||||||
|
this.form.startTime = '' |
||||||
|
this.form.endTime = '' |
||||||
|
} |
||||||
|
this.form.month = '' |
||||||
|
this.getData() |
||||||
|
}, |
||||||
|
currentChange(val) { |
||||||
|
this.pageNo = val; |
||||||
|
this.getData(); |
||||||
|
}, |
||||||
|
permission(){ |
||||||
|
this.$router.push('/permission') |
||||||
|
}, |
||||||
|
adduser(){ |
||||||
|
this.$store.commit("userData", { user_id : ''}); |
||||||
|
this.$router.push('/adduser'); |
||||||
|
}, |
||||||
|
edit(row){ |
||||||
|
this.$store.commit("userData", { user_id : row.userId}); |
||||||
|
this.$router.push('/adduser'); |
||||||
|
}, |
||||||
|
handleDelete(row) { |
||||||
|
this.$confirm('确定要删除吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
let arr = [] |
||||||
|
arr.push(row.userId) |
||||||
|
this.$post(this.api.deleteUser,arr).then(res => { |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}) |
||||||
|
.catch(() => {}); |
||||||
|
}, |
||||||
|
getRowKeys(row) { |
||||||
|
return row.userId; |
||||||
|
}, |
||||||
|
handleSelectionChange(val) { |
||||||
|
this.multipleSelection = val; |
||||||
|
}, |
||||||
|
delAllSelection() { |
||||||
|
if(this.multipleSelection.length != ''){ |
||||||
|
let newArr = this.multipleSelection |
||||||
|
let delList = newArr.map(e => e.userId) |
||||||
|
// 批量删除 |
||||||
|
this.$confirm('确定要删除选中用户吗？', '提示', { |
||||||
|
type: 'warning' |
||||||
|
}) |
||||||
|
.then(() => { |
||||||
|
this.$post(this.api.deleteUser,delList).then(res => { |
||||||
|
this.multipleSelection = []; |
||||||
|
this.$message.success('删除成功'); |
||||||
|
this.getData() |
||||||
|
}).catch(res => {}); |
||||||
|
}).catch(() => {}); |
||||||
|
}else{ |
||||||
|
this.$message.error('请先选择客户 ！'); |
||||||
|
} |
||||||
|
}, |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.mag{ |
||||||
|
margin-right: 20px; |
||||||
|
} |
||||||
|
</style> |
||||||
|
|
||||||
@ -0,0 +1,65 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
import App from './App.vue'; |
||||||
|
import router from './router'; |
||||||
|
import ElementUI from 'element-ui'; |
||||||
|
import VueI18n from 'vue-i18n'; |
||||||
|
import { messages } from './components/common/i18n'; |
||||||
|
// import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
|
||||||
|
import './assets/css/theme-green/index.css'; // 浅绿色主题
|
||||||
|
import './assets/css/icon.css'; |
||||||
|
import './assets/icon/iconfont.css'; |
||||||
|
import './components/common/directives'; |
||||||
|
import 'babel-polyfill'; |
||||||
|
import './util/rem'; |
||||||
|
import {post,get,del,put} from './utils/http'; |
||||||
|
import api from './utils/api'; |
||||||
|
import store from './store' |
||||||
|
import { systemStatus, systemTypeStatus, systemAttributionStatus, courseTypeStatus, |
||||||
|
hoursStatus, roleStatus, orderTypeFn, orderStatusFn, orderNatureFn, Percentage, removeByValue, isIE } from './utils/core'; |
||||||
|
import preventReClick from './store/preventReClick' //防多次点击，重复提交
|
||||||
|
|
||||||
|
|
||||||
|
Vue.prototype.api = api; |
||||||
|
Vue.prototype.$get = get; |
||||||
|
Vue.prototype.$post = post; |
||||||
|
Vue.prototype.$del = del; |
||||||
|
Vue.prototype.$put = put; |
||||||
|
|
||||||
|
Vue.prototype.systemStatus = systemStatus; |
||||||
|
Vue.prototype.systemTypeStatus = systemTypeStatus; |
||||||
|
Vue.prototype.systemAttributionStatus = systemAttributionStatus; |
||||||
|
Vue.prototype.courseTypeStatus = courseTypeStatus; |
||||||
|
Vue.prototype.hoursStatus = hoursStatus; |
||||||
|
Vue.prototype.roleStatus = roleStatus; |
||||||
|
Vue.prototype.orderTypeFn = orderTypeFn; |
||||||
|
Vue.prototype.orderStatusFn = orderStatusFn; |
||||||
|
Vue.prototype.orderNatureFn = orderNatureFn; |
||||||
|
Vue.prototype.Percentage = Percentage; |
||||||
|
Vue.prototype.removeByValue = removeByValue; |
||||||
|
Vue.prototype.isIE = isIE; |
||||||
|
|
||||||
|
Vue.config.productionTip = false; |
||||||
|
Vue.use(VueI18n); |
||||||
|
Vue.use(ElementUI); |
||||||
|
const i18n = new VueI18n({ |
||||||
|
locale: 'zh', |
||||||
|
messages |
||||||
|
}); |
||||||
|
|
||||||
|
//使用钩子函数对路由进行权限跳转
|
||||||
|
router.beforeEach((to, from, next) => { |
||||||
|
document.title = `${to.meta.title} | saas平台服务端管理系统`; |
||||||
|
const role = localStorage.getItem('ms_username'); |
||||||
|
if (!role && to.path !== '/login') { |
||||||
|
next('/login'); |
||||||
|
} else { |
||||||
|
next(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
new Vue({ |
||||||
|
router, |
||||||
|
store, |
||||||
|
i18n, |
||||||
|
render: h => h(App) |
||||||
|
}).$mount('#app'); |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
import Vue from 'vue'; |
||||||
|
import Vuex from 'vuex'; |
||||||
|
Vue.use(Vuex); |
||||||
|
const store = new Vuex.Store({ |
||||||
|
state: { |
||||||
|
customerId:'', |
||||||
|
courseId:'', |
||||||
|
userId: '', |
||||||
|
roleId: '', |
||||||
|
manager:{}, |
||||||
|
provinceList: [], |
||||||
|
configId: '', |
||||||
|
systemId: '', |
||||||
|
orderId: '', |
||||||
|
userLoginId: '' |
||||||
|
}, |
||||||
|
mutations:{ |
||||||
|
userData (state, payload) { |
||||||
|
state.userId = payload.user_id |
||||||
|
}, |
||||||
|
customerData (state, payload) { |
||||||
|
state.customerId = payload.customer_id |
||||||
|
}, |
||||||
|
courseData (state, payload) { |
||||||
|
state.courseId = payload.course_id |
||||||
|
}, |
||||||
|
managerData (state, payload) { |
||||||
|
state.manager = payload.form |
||||||
|
}, |
||||||
|
provinceData (state, payload) { |
||||||
|
state.provinceList = payload.provinceList |
||||||
|
}, |
||||||
|
configData (state, payload) { |
||||||
|
state.configId = payload.config_id |
||||||
|
}, |
||||||
|
systemData (state, payload) { |
||||||
|
state.systemId = payload.system_id |
||||||
|
state.orderId = payload.order_id |
||||||
|
}, |
||||||
|
userLoginData (state, payload) { |
||||||
|
state.userLoginId = payload.userLogin_id |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
export default store; |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
import Vue from 'vue' |
||||||
|
|
||||||
|
const preventReClick = Vue.directive('preventReClick', { |
||||||
|
inserted: function (el, binding) { |
||||||
|
el.addEventListener('click', () => { |
||||||
|
if (!el.disabled) { |
||||||
|
el.disabled = true |
||||||
|
setTimeout(() => { |
||||||
|
el.disabled = false |
||||||
|
}, binding.value || 1000) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
export { preventReClick } |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
// rem等比适配配置文件
|
||||||
|
// 基准大小
|
||||||
|
const baseSize = 16 |
||||||
|
// 设置 rem 函数
|
||||||
|
function setRem () { |
||||||
|
// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
|
||||||
|
const scale = document.documentElement.clientWidth / 1920 |
||||||
|
// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
|
||||||
|
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px' |
||||||
|
} |
||||||
|
// 初始化
|
||||||
|
setRem() |
||||||
|
// 改变窗口大小时重新设置 rem
|
||||||
|
window.onresize = function () { |
||||||
|
setRem() |
||||||
|
} |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
|
||||||
|
// let host = 'http://192.168.31.117:8080'
|
||||||
|
let host = 'http://www.huorantech.cn/liuwanr' |
||||||
|
// let host = 'http://www.liuwanr.cn:8080'
|
||||||
|
|
||||||
|
export default { |
||||||
|
logins: `${host}/userInfo/adminLogins`, //登录
|
||||||
|
// addUser: `${host}/user/addUser`, //增加用户
|
||||||
|
addUser: `${host}/userInfo/addUser`, //增加用户新版
|
||||||
|
// queryUser: `${host}/user/queryUser`, //查询用户
|
||||||
|
queryUser: `${host}/userInfo/queryUserInfo`, //查询用户新版
|
||||||
|
// deleteUser: `${host}/user/deleteUser`, //删除用户
|
||||||
|
deleteUser: `${host}/userInfo/deleteUserInfo`, //删除用户新版
|
||||||
|
updateUser: `${host}/user/updateUser`, //编辑用户
|
||||||
|
// queryUserDetails: `${host}/user/queryUserDetails`, //查询用户详情
|
||||||
|
queryUserInfoDetails: `${host}/userInfo/queryUserInfoDetails`, //查询用户详情新版
|
||||||
|
queryAccountIsExist: `${host}/userInfo/queryServerAccountIsExist`, //查询账号是否存在
|
||||||
|
queryUserOR: `${host}/userInfo/queryUserOR`, //查询系统列表详情
|
||||||
|
queryWorkNumberIsExist:`${host}/userInfo/queryWorkNumberIsExist`,//查询学号、工号是否存在
|
||||||
|
queryCustomerUser: `${host}/user/queryCustomer`, //用户模块查询客户接口
|
||||||
|
queryStaffPro: `${host}/staffProfessionalArchitecture/queryAllStaffProfessionalArchitecture`, //查询一级部门
|
||||||
|
queryStaffGrade: `${host}/staffGrade/queryStaffGrade`, //查询二级部门
|
||||||
|
queryStuPro: `${host}/stuProfessionalArchitecture/queryStuProfessionalArchitecture`, //查询学生专业
|
||||||
|
queryStuGrade: `${host}/stuProfessionalArchitecture/queryStuGrade`, //查询学生年级
|
||||||
|
queryStuClass: `${host}/stuProfessionalArchitecture/queryStuClass`, //查询学生班级
|
||||||
|
userQueryCustomer: `${host}/userInfo/queryCustomer`, //查询客户列表
|
||||||
|
updateUserInfo: `${host}/userInfo/updateUserInfo`, //查询更新用户
|
||||||
|
updateUserProfiles: `${host}/userInfo/updateUserProfiles`, //更新用户个人档案
|
||||||
|
updateOR: `${host}/userInfo/updateOR`, //更新用户组织架构
|
||||||
|
deletePlatform: `${host}/userInfo/deletePlatform`, //更新用户组织架构
|
||||||
|
updateUserRoleId: `${host}/userInfo/updateUserRoleId`, //更新用户角色id接口
|
||||||
|
|
||||||
|
deleteCustomer: `${host}/customer/deleteCustomer`, //删除客户
|
||||||
|
updateCustomer: `${host}/customer/updateCustomer`, //更新客户
|
||||||
|
addCustomer: `${host}/customer/addCustomer`, //添加客户
|
||||||
|
queryCustomer: `${host}/customer/queryCustomer`, //查询客户
|
||||||
|
queryCustomerIsExists: `${host}/customer/queryCustomerIsExists`, //查询客户是否存在
|
||||||
|
queryCustomerDetails: `${host}/customer/queryCustomerDetails`, //查询客户详情
|
||||||
|
queryCustomerIndustryClass: `${host}/customer/queryCustomerIndustryClass`, //查询行业类
|
||||||
|
queryCustomerIndustry: `${host}/customer/queryCustomerIndustry`, //查询行业
|
||||||
|
queryPhone: `${host}/user/queryPhone`, //查询电话
|
||||||
|
querySchoolData: `${host}/customer/querySchool`, //根据学校名称查询学校信息
|
||||||
|
queryPlatform: `${host}/userInfo/queryPlatform`, //查询系统列表
|
||||||
|
|
||||||
|
queryOrder: `${host}/order/queryOrder`, //查询订单
|
||||||
|
queryOrderDetails: `${host}/order/queryOrderDetails`, //查询订单详情
|
||||||
|
queryOrderCustomer: `${host}/order/queryOrderCustomer`, //查询订单客户
|
||||||
|
queryOrderCustomerContact: `${host}/order/queryOrderCustomerContact`, //查询订单客户联系人
|
||||||
|
addOrder: `${host}/order/addOrder`, //添加订单
|
||||||
|
updateOrder: `${host}/order/updateOrder`, //编辑订单
|
||||||
|
deleteOrder: `${host}/order/deleteOrder`, //删除订单
|
||||||
|
bindingApplication: `${host}/order/bindingApplicationPermissions`, //绑定应用权限
|
||||||
|
queryCoursePermissions: `${host}/order/queryCoursePermissions`, //查询应用权限
|
||||||
|
queryCourseList: `${host}/order/queryCourseList`, //查询订单课程列表
|
||||||
|
isDeliverGoods: `${host}/order/isDeliverGoods`, //是否上架课程
|
||||||
|
|
||||||
|
deleteCourse: `${host}/course/deleteCourse`, //删除课程
|
||||||
|
updateCourse: `${host}/course/updateCourse`, //更新课程
|
||||||
|
addCourse: `${host}/course/addCourse`, //添加课程
|
||||||
|
queryCourse: `${host}/course/queryCourse`, //查询课程
|
||||||
|
queryCourseDetails: `${host}/course/queryCourseDetails`, //查询课程详情
|
||||||
|
isShelves: `${host}/course/isShelves`, //是否上架课程
|
||||||
|
queryCourseNameIsExists: `${host}/course/queryCourseNameIsExists`, //查询课程名称是否存在
|
||||||
|
|
||||||
|
deleteServiceConfig: `${host}/serviceConfig/deleteServiceConfig`, //删除服务配置
|
||||||
|
updateServiceConfig: `${host}/serviceConfig/updateServiceConfig`, //更新服务配置
|
||||||
|
addServiceConfig: `${host}/serviceConfig/addServiceConfig`, //添加服务配置
|
||||||
|
queryServiceConfig: `${host}/serviceConfig/queryServiceConfig`, //查询服务配置
|
||||||
|
queryServiceConfigDetails: `${host}/serviceConfig/queryServiceConfigDetails`, //查询服务配置详情
|
||||||
|
|
||||||
|
deleteSchool: `${host}/school/deleteSchool`, //删除学校
|
||||||
|
updateSchool: `${host}/school/updateSchool`, //更新学校
|
||||||
|
addSchool: `${host}/school/addSchool`, //添加学校
|
||||||
|
querySchool: `${host}/school/querySchool`, //查询学校
|
||||||
|
querySchoolDetails: `${host}/school/querySchoolDetails`, //查询学校详情
|
||||||
|
|
||||||
|
queryProvince: `${host}/province/queryProvince`, //查询省份
|
||||||
|
queryCity: `${host}/city/queryCity`, //查询城市
|
||||||
|
|
||||||
|
queryCourseDiscipline: `${host}/course/queryCourseDiscipline`, //查询课程学科
|
||||||
|
queryCourseProfessionalClass: `${host}/course/queryCourseProfessionalClass`, //查询专业类
|
||||||
|
queryCourseProfessional: `${host}/course/queryCourseProfessional`, //查询专业
|
||||||
|
queryAppConfig: `${host}/course/queryAppConfig`, //查询应用配置
|
||||||
|
queryTrainingConfig: `${host}/course/queryConfig`, //查询实训配置
|
||||||
|
deleteTrainingConfig: `${host}/course/deleteTrainingConfig`, //删除实训配置
|
||||||
|
isShow: `${host}/course/isShow`, //是否展示项目控制
|
||||||
|
queryCourseDetailsTC: `${host}/course/queryCourseDetailsTC`, //查询课程详情课程权限
|
||||||
|
|
||||||
|
queryLinkDetails: `${host}/course/queryLinkDetails`, //查询环节详情
|
||||||
|
addCourseLink: `${host}/course/addCourseLink`, //添加课程环节
|
||||||
|
updateLink: `${host}/course/updateLink`, //更新环节
|
||||||
|
|
||||||
|
uploadFiles: `${host}/aliyun/uploadFiles`, //上传文件
|
||||||
|
downloadFiles: `${host}/aliyun/downloadFiles`, //下载文件
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,178 @@ |
|||||||
|
const pad2 = str => ('0' + str).substr(-2) |
||||||
|
|
||||||
|
function fMoney (s, n) { |
||||||
|
n = n > 0 && n <= 20 ? n : 2 |
||||||
|
s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + '' |
||||||
|
let l = s.split('.')[0].split('').reverse() |
||||||
|
let r = s.split('.')[1] |
||||||
|
let t = '' |
||||||
|
for(let i = 0; i < l.length; i ++ ) { |
||||||
|
t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? ',' : '') |
||||||
|
} |
||||||
|
return t.split('').reverse().join('') + '.' + r |
||||||
|
} |
||||||
|
|
||||||
|
function toDateTime (date, time) { |
||||||
|
if (!date) return '' |
||||||
|
date = date.toString() |
||||||
|
time = time ? time.toString() : '' |
||||||
|
let str = `${date.substr(0, 4)}-${date.substr(4, 2)}-${date.substr(6, 2)}` |
||||||
|
if (date.length == 14) { |
||||||
|
str += ` ${date.substr(8, 2)}:${date.substr(10, 2)}:${date.substr(12, 2)}` |
||||||
|
} else if (date.length == 6) { |
||||||
|
str = `${date.substr(0, 2)}:${date.substr(2, 2)}:${date.substr(4, 2)}` |
||||||
|
} else if (time) { |
||||||
|
str += ` ${time.substr(0, 2)}:${time.substr(2, 2)}:${time.substr(4, 2)}` |
||||||
|
} |
||||||
|
return str |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function Percentage(num, total) {
|
||||||
|
if (num == 0 || total == 0){ |
||||||
|
return 0; |
||||||
|
} |
||||||
|
return (Math.round(num / total * 10000) / 100.00);// 小数点后两位百分比
|
||||||
|
} |
||||||
|
|
||||||
|
function fMoney2 (m) { |
||||||
|
return parseFloat(m).toFixed(2) |
||||||
|
} |
||||||
|
|
||||||
|
function systemStatus (sts) { |
||||||
|
const status = { |
||||||
|
'1': '运行中', |
||||||
|
'2': '故障中' |
||||||
|
} |
||||||
|
return status[sts] || '未知状态' |
||||||
|
} |
||||||
|
|
||||||
|
function systemTypeStatus (sts) { |
||||||
|
const status = { |
||||||
|
'1': '工具', |
||||||
|
'2': '实训', |
||||||
|
'3': '网站' |
||||||
|
} |
||||||
|
return status[sts] || '未知状态' |
||||||
|
} |
||||||
|
|
||||||
|
function systemAttributionStatus (sts) { |
||||||
|
const status = { |
||||||
|
'1': '外部产品', |
||||||
|
'2': '内部系统' |
||||||
|
} |
||||||
|
return status[sts] || '未知状态' |
||||||
|
} |
||||||
|
|
||||||
|
function courseTypeStatus (sts) { |
||||||
|
const status = { |
||||||
|
'1': '实训课程', |
||||||
|
'2': '理论课程' |
||||||
|
} |
||||||
|
return status[sts] || '未知状态' |
||||||
|
} |
||||||
|
|
||||||
|
function hoursStatus (sts) { |
||||||
|
const status = { |
||||||
|
'1': '32课时', |
||||||
|
'2': '64课时' |
||||||
|
} |
||||||
|
return status[sts] || '未知状态' |
||||||
|
} |
||||||
|
|
||||||
|
function roleStatus (sts) { |
||||||
|
const status = { |
||||||
|
'1': '超级管理员', |
||||||
|
'2': '管理员', |
||||||
|
'3': '教师', |
||||||
|
'4': '学生' |
||||||
|
} |
||||||
|
return status[sts] || '未知状态' |
||||||
|
} |
||||||
|
|
||||||
|
function orderTypeFn (sts) { |
||||||
|
const status = { |
||||||
|
'1': '正式', |
||||||
|
'2': '试用' |
||||||
|
} |
||||||
|
return status[sts] || '未知状态' |
||||||
|
} |
||||||
|
|
||||||
|
function orderStatusFn (sts) { |
||||||
|
const status = { |
||||||
|
'1': '待发货', |
||||||
|
'2': '已完成', |
||||||
|
'3': '已取消' |
||||||
|
} |
||||||
|
return status[sts] || '未知状态' |
||||||
|
} |
||||||
|
|
||||||
|
function orderNatureFn (sts) { |
||||||
|
const status = { |
||||||
|
'1': '初签', |
||||||
|
'2': '续签' |
||||||
|
} |
||||||
|
return status[sts] || '未知状态' |
||||||
|
} |
||||||
|
|
||||||
|
// 获取出生日期
|
||||||
|
function getBirth(idCard) { |
||||||
|
var birthday = ""; |
||||||
|
if(idCard != null && idCard != ""){ |
||||||
|
if(idCard.length == 15){ |
||||||
|
birthday = "19"+idCard.slice(6,12); |
||||||
|
} else if(idCard.length == 18){ |
||||||
|
birthday = idCard.slice(6,14); |
||||||
|
}
|
||||||
|
birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-"); |
||||||
|
//通过正则表达式来指定输出格式为:1990-01-01
|
||||||
|
}
|
||||||
|
return birthday; |
||||||
|
} |
||||||
|
|
||||||
|
// 获取性别
|
||||||
|
function getSex(idCard) { |
||||||
|
var sexStr = ''; |
||||||
|
if (parseInt(idCard.slice(-2, -1)) % 2 == 1) { |
||||||
|
sexStr = 'man'; |
||||||
|
} |
||||||
|
else { |
||||||
|
sexStr = 'woman'; |
||||||
|
} |
||||||
|
return sexStr; |
||||||
|
} |
||||||
|
|
||||||
|
function removeByValue(arr, val) { |
||||||
|
for(var i=0; i<arr.length; i++) { |
||||||
|
if(arr[i] == val) { |
||||||
|
arr.splice(i, 1); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 是否IE
|
||||||
|
function isIE() { |
||||||
|
if (!!window.ActiveXObject || "ActiveXObject" in window) return true |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
export { |
||||||
|
fMoney, |
||||||
|
toDateTime, |
||||||
|
Percentage, |
||||||
|
fMoney2, |
||||||
|
systemStatus, |
||||||
|
systemTypeStatus, |
||||||
|
systemAttributionStatus, |
||||||
|
courseTypeStatus, |
||||||
|
hoursStatus, |
||||||
|
roleStatus, |
||||||
|
orderTypeFn, |
||||||
|
orderStatusFn, |
||||||
|
orderNatureFn, |
||||||
|
getBirth, |
||||||
|
getSex, |
||||||
|
removeByValue, |
||||||
|
isIE |
||||||
|
} |
||||||
@ -0,0 +1,358 @@ |
|||||||
|
import axios from 'axios'; |
||||||
|
import QS from 'qs'; |
||||||
|
// import store from '../store/index'
|
||||||
|
import { Message } from 'element-ui' |
||||||
|
import router from '../router/index' |
||||||
|
|
||||||
|
// 环境的切换
|
||||||
|
// if (process.env.NODE_ENV == 'development') {
|
||||||
|
// axios.defaults.baseURL = '/api';
|
||||||
|
// } else if (process.env.NODE_ENV == 'debug') {
|
||||||
|
// axios.defaults.baseURL = '';
|
||||||
|
// } else if (process.env.NODE_ENV == 'production') {
|
||||||
|
// axios.defaults.baseURL = 'http://api.123dailu.com/';
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 请求超时时间
|
||||||
|
axios.defaults.timeout = 30000; |
||||||
|
|
||||||
|
// post请求头
|
||||||
|
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; |
||||||
|
|
||||||
|
// 请求拦截器
|
||||||
|
// axios.interceptors.request.use(config => {
|
||||||
|
// if (sessionStorage.getItem('token')) {
|
||||||
|
// // 存在将token写入 request header
|
||||||
|
// config.headers.Authorization = `${sessionStorage.getItem('token')}`;
|
||||||
|
// }
|
||||||
|
// return config;
|
||||||
|
// }, err => {
|
||||||
|
// Message.error({
|
||||||
|
// message: '退出登陆',
|
||||||
|
// onClose: function () {
|
||||||
|
// router.push({name: 'login'});
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// return Promise.reject(err);
|
||||||
|
// })
|
||||||
|
|
||||||
|
// 响应拦截器
|
||||||
|
// axios.interceptors.response.use(
|
||||||
|
// response => {
|
||||||
|
// consol.log(response.status)
|
||||||
|
// if (response.status === 200) {
|
||||||
|
// return Promise.resolve(response);
|
||||||
|
// } else {
|
||||||
|
// return Promise.reject(response);
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// // 服务器状态码不是200的情况
|
||||||
|
// error => {
|
||||||
|
// if (error.response.status) {
|
||||||
|
// switch (error.response.status) {
|
||||||
|
// // 401: 未登录
|
||||||
|
// // 未登录则跳转登录页面，并携带当前页面的路径
|
||||||
|
// // 在登录成功后返回当前页面，这一步需要在登录页操作。
|
||||||
|
// case 500:
|
||||||
|
// router.replace({
|
||||||
|
// path: '/login',
|
||||||
|
// // query: { redirect: router.currentRoute.fullPath }
|
||||||
|
// });
|
||||||
|
// break;
|
||||||
|
// // 403 token过期
|
||||||
|
// // 登录过期对用户进行提示
|
||||||
|
// // 清除本地token和清空vuex中token对象
|
||||||
|
// // 跳转登录页面
|
||||||
|
// case 403:
|
||||||
|
// // Toast({
|
||||||
|
// // message: '登录过期，请重新登录',
|
||||||
|
// // duration: 1000,
|
||||||
|
// // forbidClick: true
|
||||||
|
// // });
|
||||||
|
// // 清除token
|
||||||
|
// sessionStorage.removeItem('token');
|
||||||
|
// store.commit('loginSuccess', null);
|
||||||
|
// // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
|
||||||
|
// setTimeout(() => {
|
||||||
|
// router.replace({
|
||||||
|
// path: '/login',
|
||||||
|
// query: {
|
||||||
|
// redirect: router.currentRoute.fullPath
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }, 1000);
|
||||||
|
// break;
|
||||||
|
// // 404请求不存在
|
||||||
|
// case 404:
|
||||||
|
// router.replace({
|
||||||
|
// path: '/404',
|
||||||
|
// });
|
||||||
|
// break;
|
||||||
|
// // 其他错误，直接抛出错误提示
|
||||||
|
// default:
|
||||||
|
// router.replace({
|
||||||
|
// path: '/500',
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// return Promise.reject(error.response);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// );
|
||||||
|
|
||||||
|
/** |
||||||
|
* get方法，对应get请求 |
||||||
|
*/ |
||||||
|
export function get(url, params){ |
||||||
|
return new Promise((resolve, reject) =>{ |
||||||
|
axios.get(url, { |
||||||
|
params: params |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
if (res.data.status) { |
||||||
|
switch (res.data.status) { |
||||||
|
case 200: |
||||||
|
resolve(res.data); |
||||||
|
break; |
||||||
|
case 10000: |
||||||
|
resolve(res.data); |
||||||
|
break; |
||||||
|
case 500: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 300: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 404: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 403: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 401: |
||||||
|
Message.error("token失效,请重新登录"); |
||||||
|
sessionStorage.removeItem('token'); |
||||||
|
router.replace('/login') |
||||||
|
break; |
||||||
|
case 405: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 406: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
reject(err.data) |
||||||
|
this.$message({ |
||||||
|
showClose: true, |
||||||
|
message: '请求失败，请刷新页面重新进行请求', |
||||||
|
type: 'error' |
||||||
|
}); |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
/** |
||||||
|
* post方法，对应post请求 |
||||||
|
*/ |
||||||
|
export function post(url, params) { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
axios.post(url,params) |
||||||
|
.then(res => { |
||||||
|
if (res.data.status) { |
||||||
|
switch (res.data.status) { |
||||||
|
case 200: |
||||||
|
resolve(res.data); |
||||||
|
break; |
||||||
|
case 500: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 300: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 404: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 403: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 401: |
||||||
|
Message.error("token失效,请重新登录"); |
||||||
|
sessionStorage.removeItem('token'); |
||||||
|
router.replace('/login') |
||||||
|
break; |
||||||
|
case 405: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 406: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
reject(err.data) |
||||||
|
this.$message({ |
||||||
|
showClose: true, |
||||||
|
message: '请求失败，请刷新页面重新进行请求', |
||||||
|
type: 'error' |
||||||
|
}); |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* delete方法，对应delete请求 |
||||||
|
*/ |
||||||
|
export function del(url, params){ |
||||||
|
return new Promise((resolve, reject) =>{ |
||||||
|
axios.delete(url, { |
||||||
|
params: params |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
if (res.data.status) { |
||||||
|
switch (res.data.status) { |
||||||
|
case 200: |
||||||
|
resolve(res.data); |
||||||
|
break; |
||||||
|
// case 300:
|
||||||
|
// this.$message.error(
|
||||||
|
// res.data.errmessage
|
||||||
|
// );
|
||||||
|
// break;
|
||||||
|
case 500: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 404: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
router.replace({ |
||||||
|
path: '/404', |
||||||
|
}); |
||||||
|
break; |
||||||
|
case 403: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 401: |
||||||
|
Message.error("token失效,请重新登录"); |
||||||
|
sessionStorage.removeItem('token'); |
||||||
|
router.replace('/login') |
||||||
|
break; |
||||||
|
case 405: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 406: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
reject(err.data) |
||||||
|
this.$message({ |
||||||
|
showClose: true, |
||||||
|
message: '请求失败，请刷新页面重新进行请求', |
||||||
|
type: 'error' |
||||||
|
}); |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* put修改 |
||||||
|
* @param {} url
|
||||||
|
* @param {*} params
|
||||||
|
*/ |
||||||
|
export function put(url, params){ |
||||||
|
return new Promise((resolve, reject) =>{ |
||||||
|
axios.put(url, params) |
||||||
|
.then(res => { |
||||||
|
if (res.data.status) { |
||||||
|
switch (res.data.status) { |
||||||
|
case 200: |
||||||
|
resolve(res.data); |
||||||
|
break; |
||||||
|
case 300: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 500: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 404: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 403: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 401: |
||||||
|
Message.error("token失效,请重新登录"); |
||||||
|
sessionStorage.removeItem('token'); |
||||||
|
router.replace('/login') |
||||||
|
break; |
||||||
|
case 405: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
case 406: |
||||||
|
this.$message.error( |
||||||
|
res.data.errmessage |
||||||
|
); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
reject(err.data) |
||||||
|
this.$message({ |
||||||
|
showClose: true, |
||||||
|
message: '请求失败，请刷新页面重新进行请求', |
||||||
|
type: 'error' |
||||||
|
}); |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
Loading…
Reference in new issue