├── src
    ├── js
    │   ├── login.js
    │   ├── router.js
    │   └── admin.js
    ├── img
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   └── 4.png
    ├── config.js
    ├── css
    │   ├── login.css
    │   └── admin.css
    ├── common.js
    ├── login.html
    ├── admin.html
    └── components
    │   ├── setting.vue
    │   ├── progress.vue
    │   ├── log.vue
    │   ├── home.vue
    │   ├── server.vue
    │   └── user.vue
├── .gitignore
├── webpack.dev.js
├── webpack.build.js
├── readme.md
├── package.json
└── webpack.config.js


/src/js/login.js:
--------------------------------------------------------------------------------
1 | require('./../css/login.css');


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | package-lock.json


--------------------------------------------------------------------------------
/src/img/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodFrm/radius-php-template/master/src/img/1.png


--------------------------------------------------------------------------------
/src/img/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodFrm/radius-php-template/master/src/img/2.png


--------------------------------------------------------------------------------
/src/img/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodFrm/radius-php-template/master/src/img/3.png


--------------------------------------------------------------------------------
/src/img/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CodFrm/radius-php-template/master/src/img/4.png


--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |     url:'http://127.0.3.1',
3 |     aapi:'/admin/api/'
4 | };
5 | 


--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
1 | const merge = require('webpack-merge');
2 | const common = require('./webpack.config.js');
3 | 
4 | module.exports = merge(common, {
5 |     devtool: 'inline-source-map'
6 | })


--------------------------------------------------------------------------------
/webpack.build.js:
--------------------------------------------------------------------------------
1 | const merge = require('webpack-merge');
2 | const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
3 | const common = require('./webpack.config.js');
4 | 
5 | module.exports = merge(common, {
6 |     plugins: [
7 |         new UglifyJSPlugin()
8 |     ]
9 | })


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | ## php-radius使用的模板
 2 | > 使用vue做的单页面应用,自适应PC和手机,使用前后端分离架构和restful api
 3 | 
 4 | php-radius项目地址:[php-radius](https://github.com/CodFrm/php-radius)
 5 | 
 6 | ![pc_1](src/img/1.png)
 7 | 
 8 | ![phone_1](src/img/2.png)
 9 | 
10 | ![pc_2](src/img/3.png)
11 | 
12 | ![phone_2](src/img/4.png)
13 | 


--------------------------------------------------------------------------------
/src/js/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import home from './../components/home.vue'
 4 | import user from './../components/user.vue'
 5 | import log from './../components/log.vue'
 6 | import server from './../components/server.vue'
 7 | import setting from './../components/setting.vue'
 8 | Vue.use(Router);
 9 | 
10 | export default new Router({
11 |     routes: [{
12 |         path: '/',
13 |         name: 'home',
14 |         component: home
15 |     },
16 |     {
17 |         path: '/user',
18 |         name: 'user',
19 |         component: user
20 |     }, {
21 |         path: '/server',
22 |         name: 'server',
23 |         component: server
24 |     }, {
25 |         path: '/log',
26 |         name: 'log',
27 |         component: log
28 |     }, {
29 |         path: '/setting',
30 |         name: 'setting',
31 |         component: setting
32 |     },
33 |     { path: '*', redirect: '/' }
34 |     ]
35 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "php-radius-admin",
 3 |   "version": "1.0.0",
 4 |   "description": "php-radius的后台管理页面",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "webpack --mode production --config webpack.build.js",
 9 |     "dev": "webpack --watch --mode development --config webpack.dev.js"
10 |   },
11 |   "author": "CodFrm",
12 |   "license": "MIT",
13 |   "devDependencies": {
14 |     "css-loader": "^0.28.11",
15 |     "extract-text-webpack-plugin": "^4.0.0-beta.0",
16 |     "file-loader": "^1.1.11",
17 |     "html-webpack-plugin": "^3.2.0",
18 |     "style-loader": "^0.21.0",
19 |     "url-loader": "^1.0.1",
20 |     "vue-loader": "^15.2.4",
21 |     "vue-template-compiler": "^2.5.16",
22 |     "webpack": "^4.12.1",
23 |     "webpack-cli": "^3.0.8",
24 |     "webpack-merge": "^4.1.3"
25 |   },
26 |   "dependencies": {
27 |     "less": "^3.8.1",
28 |     "less-loader": "^4.1.0",
29 |     "vue": "^2.5.16",
30 |     "vue-datepicker-local": "^1.0.14",
31 |     "vue-easytable": "^1.7.1",
32 |     "vue-router": "^3.0.1",
33 |     "vue2-slot-calendar": "^2.1.4"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/css/login.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     margin: 0;
 3 |     background: #343842;
 4 | }
 5 | 
 6 | .logo {
 7 |     color: #fff;
 8 |     font-size: 20px;
 9 |     margin: 4px;
10 |     font-weight: bold;
11 |     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
12 | }
13 | 
14 | .middle-login {
15 |     position: absolute;
16 |     left: 50%;
17 |     top: 50%;
18 |     transform: translate(-50%, -50%);
19 | }
20 | 
21 | .top-title {
22 |     text-align: center;
23 |     display: block;
24 |     font-size: 24px;
25 |     margin-bottom: 16px;
26 | }
27 | 
28 | .form-post {
29 |     width: 300px;
30 |     padding: 20px 20px 8px 20px;
31 |     background: #fff;
32 |     border-radius: 8px;
33 | }
34 | 
35 | .form-post label {
36 |     display: block;
37 |     margin-bottom: 4px;
38 | }
39 | 
40 | .form-post label,
41 | .form-post .input {
42 |     width: 100%;
43 | }
44 | 
45 | .input {
46 |     outline: none;
47 |     padding: 2px 4px;
48 |     height: 40px;
49 |     line-height: 32px;
50 |     border: 1px solid #d0d0d0;
51 |     box-shadow: 0px 0px 2px #d0d0d0;
52 |     box-sizing: border-box;
53 |     font-size: 14px;
54 |     border-radius: 4px;
55 | }
56 | 
57 | .input:focus {
58 |     box-shadow: 0px 0px 2px #00b5ff;
59 | }
60 | 
61 | .input-group:not(:first-of-type) {
62 |     margin-top: 16px;
63 | }
64 | 
65 | .btn-submit {
66 |     border: 0;
67 |     width: 100%;
68 |     font-size: 18px;
69 |     color: #fff;
70 |     background: #00b6ff;
71 |     opacity: .8;
72 |     cursor: pointer;
73 | }
74 | 
75 | .btn-submit:hover{
76 |     opacity: 1;
77 | }
78 | 
79 | 
80 | .link{
81 |     text-decoration: none;
82 |     color: #00b5ff;
83 |     font-size: 12px;
84 | }


--------------------------------------------------------------------------------
/src/common.js:
--------------------------------------------------------------------------------
 1 | export function formatDate(timestamp) {
 2 |     var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
 3 |     var Y = date.getFullYear() + '-';
 4 |     var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
 5 |     var D = date.getDate() + ' ';
 6 |     var h = date.getHours() + ':';
 7 |     var m = date.getMinutes() + ':';
 8 |     var s = date.getSeconds();
 9 |     return Y + M + D + h + m + s;
10 | }
11 | export function formatTime(s) {
12 |     var ret = '', tmp = parseInt(s / 60), y = s % 60;
13 |     if (tmp < 1) {
14 |         ret = s + "秒";
15 |     } else {
16 |         ret = y + "秒";
17 |         y = tmp % 60;
18 |         tmp = parseInt(tmp / 60);
19 |         if (tmp < 1) {
20 |             ret = y + "分 " + ret;
21 |         } else {
22 |             ret = tmp + "时 " + y + "分 " + ret;
23 |         }
24 |     }
25 | 
26 |     return ret;
27 | }
28 | export function formatByte(byte) {
29 |     var mb = parseInt(byte / (1048576)), tmp = mb / 1024;
30 |     var ret = '';
31 |     if (tmp < 1) {
32 |         ret = mb + "MB";
33 |     } else {
34 |         ret = parseInt(tmp) + "GB " + (mb % 1024) + "MB";
35 |     }
36 |     return ret;
37 | }
38 | export function get(url) {
39 |     return fetch(url, {
40 |         credentials: "include"
41 |     });
42 | }
43 | 
44 | export function req_json(url, method, data) {
45 |     var opts = {
46 |         method: method,
47 |         body: data,
48 |         credentials: "include",
49 |         headers: {
50 |             'Accept': 'application/json',
51 |             'Content-Type': 'application/json'
52 |         },
53 |     };
54 |     return fetch(url, opts);
55 | }


--------------------------------------------------------------------------------
/src/login.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>PHPRadius</title>
 9 |     <link rel="stylesheet" href="http://at.alicdn.com/t/font_722334_eytpkh8il2.css">
10 |     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
11 | </head>
12 | 
13 | <body>
14 |     <div class="logo">PHP-Radius</div>
15 |     <div class="middle-login">
16 |         <div class="form-post">
17 |             <span class="top-title">用户登录</span>
18 |             <div class="input-group">
19 |                 <input class="input" id="user" type="text" name="username" placeholder="请输入你的账号或者邮箱">
20 |             </div>
21 |             <div class="input-group">
22 |                 <input class="input" id="passwd" type="password" name="username" placeholder="请输入你的密码">
23 |             </div>
24 |             <div class="input-group">
25 |                 <button id="login" class="btn-submit input">登录</button>
26 |             </div>
27 |             <div class="input-group">
28 |                 <button class="btn-submit input" style="background: #545654;">注册</button>
29 |             </div>
30 |             <div class="input-group" style="text-align: right;margin: 4px;">
31 |                 <a href="#" class="link">忘记密码?</a>
32 |             </div>
33 | 
34 |         </div>
35 |     </div>
36 |     <div class="pop-wid prompt" style="color:red;opacity: 1;z-index: 10;">
37 |         <i class="iconfont icon-prompt"></i><span style="margin-left:6px;">233333333333333333333333</span>
38 |     </div>
39 | </body>
40 | <script>
41 |     $(function() {
42 |         $('#login').click(function() {
43 |             var pop = new popWind();
44 |             pop.prompt('登录失败', 'prompt', 'red');
45 |         });
46 |     })
47 | </script>
48 | 
49 | </html>


--------------------------------------------------------------------------------
/src/admin.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |     <title>PHPRadius</title>
 9 |     <link rel="stylesheet" href="//at.alicdn.com/t/font_722334_8h8vyja0k1l.css">
10 |     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
11 | </head>
12 | 
13 | <body>
14 |     <div class="header">
15 |         <div class="mobile-menu iconfont icon-caidan"></div>
16 |         <div class="logo">
17 |             <a href="#" class="logo-text">PHPRadius</a>
18 |         </div>
19 |         <div class="top-user">
20 |             <div class="nav-user">farmer
21 |                 <i class="iconfont icon-down"></i>
22 |             </div>
23 |         </div>
24 |     </div>
25 |     <div id="app">
26 |         <div class="nav-left">
27 |             <router-link to="/" active-class="active" class="nav-item" exact>
28 |                 <div class="nav-ic"><i class="iconfont icon-home"></i> 首页</div>
29 |             </router-link>
30 |             <router-link to="/user" active-class="active" class="nav-item">
31 |                 <div class="nav-ic"><i class="iconfont icon-user"></i> 用户管理</div>
32 |             </router-link>
33 |             <router-link to="/server" active-class="active" class="nav-item">
34 |                 <div class="nav-ic"><i class="iconfont icon-server"></i> 服务器管理</div>
35 |             </router-link>
36 |             <router-link to="/log" active-class="active" class="nav-item">
37 |                 <div class="nav-ic"><i class="iconfont icon-log"></i> 日志管理</div>
38 |             </router-link>
39 |             <router-link to="/setting" active-class="active" class="nav-item">
40 |                 <div class="nav-ic"><i class="iconfont icon-shezhi"></i> 设置</div>
41 |             </router-link>
42 |         </div>
43 |         <router-view></router-view>
44 |     </div>
45 |     <div class="footer"></div>
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var htmlWebpackPlugin = require('html-webpack-plugin');
 2 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 3 | var VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | 
 5 | module.exports = {
 6 |     entry: {
 7 |         admin: __dirname + '/src/js/admin.js',
 8 |         login: __dirname + '/src/js/login.js'
 9 |     },
10 |     output: {
11 |         path: __dirname + '/dist/js',
12 |         filename: '[name].js'
13 |     },
14 |     module: {
15 |         rules: [{
16 |                 test: /\.css$/,
17 |                 use: ["style-loader", "css-loader"]
18 |             },
19 |             {
20 |                 test: /\.vue$/,
21 |                 use: [{
22 |                     loader: 'vue-loader',
23 |                     options: {
24 |                         extractCSS: true
25 |                     }
26 |                 }]
27 |             }, {
28 |                 test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
29 |                 use: [{
30 |                     loader: 'url-loader',
31 |                     options: {
32 |                         limit: 5000,
33 |                         name: 'font/[name]-[hash:8].[ext]'
34 |                     }
35 |                 }]
36 | 
37 |             }, {
38 |                 test: /\.less$/,
39 |                 use: ["style-loader", "css-loader", "less-loader"]
40 |             }
41 |         ]
42 |     },
43 |     resolve: {
44 |         alias: {
45 |             vue: 'vue/dist/vue.common.js',
46 |             'vue-router': 'vue-router/dist/vue-router.common.js'
47 |         }
48 |     },
49 |     plugins: [
50 |         new htmlWebpackPlugin({
51 |             filename: __dirname + '/dist/admin.html',
52 |             template: __dirname + '/src/admin.html',
53 |             inject: 'body',
54 |             title: '后台管理页面',
55 |             minify: {
56 |                 removeComments: true,
57 |                 collapseWhitespace: true
58 |             },
59 |             chunks: ['admin', 'vendors', 'manifest']
60 |         }),
61 |         new htmlWebpackPlugin({
62 |             filename: __dirname + '/dist/login.html',
63 |             template: __dirname + '/src/login.html',
64 |             inject: 'body',
65 |             title: '登录页面',
66 |             minify: {
67 |                 removeComments: true,
68 |                 collapseWhitespace: true
69 |             },
70 |             chunksSortMode: 'dependency',
71 |             chunks: ['admin', 'login', 'vendors', 'manifest']
72 |         }),
73 |         new VueLoaderPlugin()
74 |     ]
75 | }


--------------------------------------------------------------------------------
/src/components/setting.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="content">
 3 |         <div class="nav-bar">
 4 |            <router-link to="/" class="nav-item" exact>
 5 |                <i class="iconfont icon-home"></i> 首页
 6 |             </router-link>/
 7 |             <router-link to="/setting" class="nav-item" exact>
 8 |                系统设置
 9 |             </router-link>
10 |         </div>
11 |         <div class="card" style="width: 100%;min-height: 200px;">
12 |             <div class="card-content" style="width: 100%;height: 100%;min-height: 200px;">
13 |                 <div class="card-header">
14 |                     系统设置
15 |                 </div>
16 |                 <div class="card-text">
17 |                     <div class="box-content form">
18 |                         <div class="ipt-group">
19 |                            <label class="tag">同时在线:</label><input class="ipt-text" type="number" placeholder="允许同时在线的个数" name="online_num" v-model.number="config.online_num">
20 |                         </div>
21 |                         <div class="ipt-group">
22 |                            <label class="tag">注册间隔:</label><input class="ipt-text" type="number" placeholder="注册间隔长度(秒)" name="reg_interval" v-model.number="config.reg_interval">
23 |                         </div>
24 |                         <div class="ipt-group" style="text-align: right;margin-top:20px;">
25 |                             <button class="btn" style="background:#f23b3b;color:#fff;height:30px;width:80px;font-size:14px;" @click="submit">修改</button>
26 |                         </div>
27 |                     </div>
28 |                 </div>
29 |             </div>
30 |         </div>
31 |     </div>
32 | </template>
33 | 
34 | <script>
35 | import Vue from "vue";
36 | import config from "./../config";
37 | import { formatDate, get, req_json } from "./../common";
38 | 
39 | export default {
40 |   name: "setting",
41 |   data() {
42 |     return {
43 |       config: {
44 |         online_num: 1,
45 |         reg_interval: 3600
46 |       }
47 |     };
48 |   },
49 |   created() {
50 |     this.getConfig();
51 |   },
52 |   methods: {
53 |     getConfig() {
54 |       var vue = this;
55 |       get(config.url + config.aapi + "setting")
56 |         .then(function(response) {
57 |           return response.json();
58 |         })
59 |         .then(function(json) {
60 |           vue.config = json["config"];
61 |         });
62 |     },
63 |     submit() {
64 |       req_json(
65 |         config.url + config.aapi + "setting",
66 |         "put",
67 |         JSON.stringify(this.config)
68 |       ).then(function(response) {
69 |         alert("修改成功");
70 |       });
71 |     }
72 |   }
73 | };
74 | </script>


--------------------------------------------------------------------------------
/src/components/progress.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="circle_container">
  3 |  
  4 |         <div :style="circleSize" :class="wrapClasses">
  5 |             <svg viewBox="0 0 100 100">
  6 |                 <path :d="pathString" :stroke="trailColor" :stroke-width="5" :fill-opacity="0"/>
  7 |                 <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="6" fill-opacity="0" :style="pathStyle"/>
  8 |             </svg>
  9 |             <div :class="innerClasses">
 10 |                 <slot><h3 class="">{{ percent }}%</h3></slot>
 11 |             </div>
 12 |         </div>
 13 |  
 14 |     </div>
 15 | </template>
 16 |  
 17 | <script>
 18 | const prefixCls = "ivu-chart-circle";
 19 | function oneOf(value, validList) {
 20 |   for (let i = 0; i < validList.length; i++) {
 21 |     if (value === validList[i]) {
 22 |       return true;
 23 |     }
 24 |   }
 25 |   return false;
 26 | }
 27 | export default {
 28 |   props: {
 29 |     percent: {
 30 |       type: Number,
 31 |       default: 0
 32 |     },
 33 |     size: {
 34 |       type: Number,
 35 |       default: 120
 36 |     },
 37 |     strokeColor: {
 38 |       type: String,
 39 |       default: "#40a7f1"
 40 |     },
 41 |     strokeLinecap: {
 42 |       validator(value) {
 43 |         return oneOf(value, ["square", "round"]);
 44 |       },
 45 |       default: "round"
 46 |     },
 47 |     trailColor: {
 48 |       type: String,
 49 |       default: "#efefef"
 50 |     }
 51 |   },
 52 |   data() {
 53 |     return {
 54 |       percent_internal: 0
 55 |     };
 56 |   },
 57 |   computed: {
 58 |     circleSize() {
 59 |       return {
 60 |         width: `${this.size}px`,
 61 |         height: `${this.size}px`
 62 |       };
 63 |     },
 64 |     radius() {
 65 |       return 50 - 6 / 2;
 66 |     },
 67 |     pathString() {
 68 |       return `M 50,50 m 0,-${this.radius}
 69 |             a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
 70 |             a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
 71 |     },
 72 |     len() {
 73 |       return Math.PI * 2 * this.radius;
 74 |     },
 75 |     pathStyle() {
 76 |       return {
 77 |         "stroke-dasharray": `${this.len}px ${this.len}px`,
 78 |         "stroke-dashoffset": `${(100 - this.percent_internal) /
 79 |           100 *
 80 |           this.len}px`,
 81 |         transition: "stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"
 82 |       };
 83 |     },
 84 |     wrapClasses() {
 85 |       return `${prefixCls}`;
 86 |     },
 87 |     innerClasses() {
 88 |       return `${prefixCls}-inner`;
 89 |     }
 90 |   },
 91 |   created() {
 92 |     setInterval(() => {
 93 |       this.percent_internal = this.percent;
 94 |     }, 200);
 95 |   },
 96 |   methods: {}
 97 | };
 98 | </script>
 99 |  
100 | <style scoped lang="less">
101 | .clearfix {
102 |   zoom: 1;
103 | }
104 | .clearfix:after {
105 |   content: "";
106 |   display: block;
107 |   height: 0;
108 |   visibility: hidden;
109 |   clear: both;
110 | }
111 | .circle_container {
112 |   width: 100%;
113 |   position: relative;
114 | }
115 | .ivu-chart-circle-inner {
116 |   width: 100%;
117 |   text-align: center;
118 |   position: absolute;
119 |   left: 0;
120 |   top: 50%;
121 |   -webkit-transform: translateY(-50%);
122 |   transform: translateY(-50%);
123 |   line-height: 1;
124 | }
125 | .ivu-chart-circle {
126 |   display: inline-block;
127 |   position: relative;
128 |   cursor: pointer;
129 | }
130 | </style>


--------------------------------------------------------------------------------
/src/js/admin.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import router from './router'
 3 | import 'vue-easytable/libs/themes-base/index.css'
 4 | import {
 5 |     VTable,
 6 |     VPagination
 7 | } from 'vue-easytable'
 8 | import config from "./../config";
 9 | Vue.component(VTable.name, VTable)
10 | Vue.component(VPagination.name, VPagination)
11 | require('./../css/admin.css');
12 | 
13 | var vue = new Vue({
14 |     router,
15 |     data() {
16 |         return {
17 |             group: [],
18 |             ws: null
19 |         };
20 |     },
21 |     created() {
22 |         fetch(config.url + config.aapi + 'usergroup', {
23 |                 credentials: "include"
24 |             }).then(function(response) {
25 |                 return response.json();
26 |             })
27 |             .then(function(json) {
28 |                 vue.group = json["rows"];
29 |             });
30 |     },
31 | }).$mount('#app');
32 | 
33 | $(function() {
34 |     $('.nav-left>.nav-item>.nav-ic').click(function() {
35 |         //改变箭头指向
36 |         if ($(this).parent().children('.sub-nav').css('display') == 'block') {
37 |             $(this).children('.arrow').removeClass('icon-down');
38 |             $(this).children('.arrow').addClass('icon-up');
39 |         } else {
40 |             $(this).children('.arrow').addClass('icon-down');
41 |             $(this).children('.arrow').removeClass('icon-up');
42 |         }
43 |         $(this).parent().children('.sub-nav').slideToggle().end();
44 |     });
45 |     $('.mobile-menu').click(function() {
46 |         $('.nav-left').slideToggle().end();
47 |     });
48 |     $(document).on('click', function(e) {
49 |         if (!($(document).width() < 720 && $('.nav-left').css('display') == 'block')) {
50 |             return;
51 |         }
52 |         var e = e || window.event;
53 |         var elem = e.target || e.srcElement;
54 |         while (elem) {
55 |             if (elem.className && elem.className.indexOf('mobile-menu') >= 0) {
56 |                 return;
57 |             }
58 |             elem = elem.parentNode;
59 |         }
60 |         $('.nav-left').slideToggle().end();
61 |     });
62 | })
63 | 
64 | window.popWind = function popWind() {
65 |     this.prompt = function(content, icon, color) {
66 |         color = color || '#000';
67 |         var pop = $('<div class="pop-wid prompt" style="color:' + color + '"></div>');
68 |         pop.html('<i class="iconfont icon-' + icon + '"></i><span style="margin-left:6px;">' + content + '</span>');
69 |         $('body').append(pop);
70 |         setTimeout(function() {
71 |             pop.css('z-index', -1);
72 |             pop.css('opacity', 0);
73 |             setTimeout(function() {
74 |                 pop.remove();
75 |             }, 500);
76 |         }, 3000);
77 |         setTimeout(function() {
78 |             pop.css('z-index', 1000);
79 |             pop.css('opacity', 1);
80 |         }, 200);
81 |     }
82 |     return this;
83 | }
84 | 
85 | window.show_box = function(id) {
86 |     document.getElementById(id).style.opacity = "1";
87 |     document.getElementById(id).style.height = "auto";
88 |     document.getElementById(id).style.zIndex = "100";
89 |     document.getElementById(id).style.pointerEvents = "all";
90 | };
91 | 
92 | window.close_box = function(id) {
93 |     document.getElementById(id).style.opacity = "0";
94 |     setTimeout(function() {
95 |         document.getElementById(id).style.height = "0px";
96 |         document.getElementById(id).style.zIndex = "-1";
97 |         document.getElementById(id).style.pointerEvents = "none";
98 |     }, 500);
99 | };


--------------------------------------------------------------------------------
/src/components/log.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="content">
  3 |         <div class="nav-bar">
  4 |            <router-link to="/" class="nav-item" exact>
  5 |                <i class="iconfont icon-home"></i> 首页
  6 |             </router-link>/
  7 |             <router-link to="/log" class="nav-item" exact>
  8 |                日志记录
  9 |             </router-link>
 10 |         </div>
 11 |         <div class="card" style="width: 100%;min-height: 200px;">
 12 |             <div class="card-content" style="width: 100%;height: 100%;min-height: 200px;">
 13 |                 <div class="card-header">
 14 |                     日志记录
 15 |                 </div>
 16 |                 <div class="card-text">
 17 |                     <div class="tools-bar">
 18 |                       <input type="text" class="ipt-text" placeholder="搜索记录" v-model="keyword">
 19 |                       <button class="btn" style="background: #00a5d8;color: #fff;" @click="fetchData">搜索</button>
 20 |                     </div>
 21 |                     <div id="user-table">
 22 |                         <v-table is-horizontal-resize style="width:100%" 
 23 |                         :columns="columns" :table-data="tableData" row-hover-color="#eee"
 24 |                         row-click-color="#edf7ff">
 25 |                         </v-table>
 26 |                     </div>
 27 |                     <div class="pagination">
 28 |                         <v-pagination :total="total" :page-size="20" :page-index="pageIndex" @page-change="pageChange"></v-pagination>
 29 |                     </div>
 30 |                 </div>
 31 |             </div>
 32 |         </div>
 33 |     </div>
 34 | </template>
 35 | <style>
 36 | .pagination {
 37 |   width: 100%;
 38 |   text-align: right;
 39 | }
 40 | .datepicker__buttons .datepicker__button-cancel {
 41 |   display: none;
 42 | }
 43 | </style>
 44 | <script>
 45 | import Vue from "vue";
 46 | import config from "./../config";
 47 | import { formatDate, formatTime, formatByte, get, req_json } from "./../common";
 48 | 
 49 | export default {
 50 |   name: "log",
 51 |   data() {
 52 |     return {
 53 |       keyword: "",
 54 |       pageIndex: 1,
 55 |       total: 0,
 56 |       tableData: [],
 57 |       columns: [
 58 |         {
 59 |           field: "account_id",
 60 |           title: "记录id",
 61 |           width: 40,
 62 |           titleAlign: "center",
 63 |           columnAlign: "center",
 64 |           isResize: true
 65 |         },
 66 |         {
 67 |           field: "user",
 68 |           title: "用户名",
 69 |           width: 80,
 70 |           titleAlign: "center",
 71 |           columnAlign: "center",
 72 |           isResize: true
 73 |         },
 74 |         {
 75 |           field: "server",
 76 |           title: "服务器名称",
 77 |           width: 120,
 78 |           titleAlign: "center",
 79 |           columnAlign: "center",
 80 |           isResize: true
 81 |         },
 82 |         {
 83 |           field: "time",
 84 |           title: "连接时间",
 85 |           width: 120,
 86 |           titleAlign: "center",
 87 |           columnAlign: "center",
 88 |           isResize: true,
 89 |           formatter: function(rowData) {
 90 |             return formatDate(rowData["time"]);
 91 |           }
 92 |         },
 93 |         {
 94 |           field: "connect_time",
 95 |           title: "连接时长",
 96 |           width: 120,
 97 |           titleAlign: "center",
 98 |           columnAlign: "center",
 99 |           isResize: true,
100 |           formatter: function(rowData) {
101 |             if (rowData["end_time"] <= 0) {
102 |               return '<span style="color:red">在线</span>';
103 |             }
104 |             return formatTime(rowData["end_time"] - rowData["time"]);
105 |           }
106 |         },
107 |         {
108 |           field: "octets",
109 |           title: "流量",
110 |           width: 120,
111 |           titleAlign: "center",
112 |           columnAlign: "center",
113 |           isResize: true,
114 |           formatter: function(rowData) {
115 |             return formatByte(
116 |               parseInt(rowData["input_octets"]) + parseInt(rowData["output_octets"])
117 |             );
118 |           }
119 |         }
120 |       ]
121 |     };
122 |   },
123 |   created() {
124 |     this.fetchData();
125 |   },
126 |   methods: {
127 |     fetchData() {
128 |       var vue = this;
129 |       fetch(
130 |         config.url +
131 |           config.aapi +
132 |           "account?page=" +
133 |           this.pageIndex +
134 |           "&keyword=" +
135 |           this.keyword,
136 |         {
137 |           credentials: "include"
138 |         }
139 |       )
140 |         .then(function(response) {
141 |           return response.json();
142 |         })
143 |         .then(function(json) {
144 |           vue.tableData = json["rows"];
145 |           vue.total = json["total"];
146 |         });
147 |     },
148 |     pageChange: function(pageIndex) {
149 |       this.pageIndex = pageIndex;
150 |       this.fetchData();
151 |     }
152 |   }
153 | };
154 | </script>
155 | 


--------------------------------------------------------------------------------
/src/components/home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="content">
  3 |         <div class="nav-bar">
  4 |             <router-link to="/" class="nav-item" exact>
  5 |                <i class="iconfont icon-home"></i> 首页
  6 |             </router-link>
  7 |         </div>
  8 |         <div class="card" style="width: 100%;">
  9 |             <div class="card-content">
 10 |                 <div class="card-header card-big">
 11 |                     后台信息
 12 |                 </div>
 13 |                 <div class="card-text" style="padding:10px;">
 14 |                     <div class="min-card">
 15 |                         <div class="card-title">用户</div>
 16 |                         <div class="card-content">
 17 |                             <h4 class="bigp">{{ server_msg.user }} 人</h4>
 18 |                             <div class="card-action">
 19 |                                 <router-link to="/user" class="nav-item" exact>
 20 |                                   管理
 21 |                                 </router-link>
 22 |                             </div>
 23 |                         </div>
 24 |                     </div>
 25 |                     <div class="min-card">
 26 |                         <div class="card-title">服务器</div>
 27 |                         <div class="card-content">
 28 |                             <h4 class="bigp">{{ server_msg.server }} 台</h4>
 29 |                             <div class="card-action">
 30 |                                 <router-link to="/server" class="nav-item" exact>
 31 |                                   管理
 32 |                                 </router-link>
 33 |                             </div>
 34 |                         </div>
 35 |                     </div>
 36 |                 </div>
 37 |             </div>
 38 |         </div>
 39 |         <div class="card" style="width: 100%;">
 40 |             <div class="card-content">
 41 |                 <div class="card-header card-big">
 42 |                     服务器信息
 43 |                     <select id="server-msg" class="ipt-text card-select" @change="server_change" v-model="now_server_ip">
 44 |                         <option v-for="(serv,index) in server" :key="index" :value="serv.ip">{{ serv.name }}</option>
 45 |                     </select>
 46 |                 </div>
 47 |                 <div class="card-text" style="padding:10px;">
 48 |                     <div class="system-msg-box">
 49 |                         <span class="msg">系统负载</span>
 50 |                         <circle-progress class="inline" :percent='parseFloat(sys_msg.load[0])'></circle-progress>
 51 |                         <span class="msg">{{ runStatus() }}</span>
 52 |                     </div>
 53 |                     <div class="system-msg-box">
 54 |                         <span class="msg">CPU使用率</span>
 55 |                         <circle-progress class="inline" :percent='sys_msg.cpu.use'></circle-progress>
 56 |                         <span class="msg">{{ sys_msg.cpu.num }}核</span>
 57 |                     </div>
 58 |                     <div class="system-msg-box">
 59 |                         <span class="msg">内存使用</span>
 60 |                         <circle-progress class="inline" :percent='Math.round(sys_msg.mem.use/sys_msg.mem.total*100)'></circle-progress>
 61 |                         <span class="msg">{{ kb2big(sys_msg.mem.use) }}/{{ kb2big(sys_msg.mem.total) }}</span>
 62 |                     </div>
 63 |                     <div class="system-msg-box">
 64 |                         <span class="msg">磁盘空间</span>
 65 |                         <circle-progress class="inline" :percent='Math.round(sys_msg.disk.use/sys_msg.disk.total*100)'></circle-progress>
 66 |                         <span class="msg">{{ kb2big(sys_msg.disk.use/1024) }}/{{ kb2big(sys_msg.disk.total/1024) }}</span>
 67 |                     </div>
 68 |                 </div>
 69 |             </div>
 70 |         </div>
 71 |     </div>
 72 | </template>
 73 | 
 74 | <script>
 75 | import circleProgress from "./progress.vue";
 76 | import config from "./../config";
 77 | import { formatDate, get, req_json } from "./../common";
 78 | 
 79 | export default {
 80 |   name: "app",
 81 |   components: {
 82 |     "circle-progress": circleProgress
 83 |   },
 84 |   data() {
 85 |     return {
 86 |       websocket: null,
 87 |       now_server_ip: "",
 88 |       server: {},
 89 |       sys_msg: {
 90 |         load: 0,
 91 |         cpu: {
 92 |           use: 0
 93 |         },
 94 |         mem: {
 95 |           total: 1,
 96 |           use: 0
 97 |         },
 98 |         disk: {
 99 |           total: 1,
100 |           use: 0
101 |         }
102 |       },
103 |       server_msg: {
104 |         user: 0,
105 |         server: 0
106 |       }
107 |     };
108 |   },
109 |   created() {
110 |     this.now_server_ip = localStorage["record"];
111 |     if (this.$parent.ws == null) {
112 |       this.$parent.ws = new WebSocket(
113 |         "ws://" + this.now_server_ip + ":5135/?key=xiajibada"
114 |       );
115 |     }
116 |     this.websocket = this.$parent.ws;
117 |     var ws = this.websocket;
118 |     var vue = this;
119 |     this.websocket.onmessage = function(evt) {
120 |       var json = JSON.parse(evt.data);
121 |       vue.sys_msg = json;
122 |     };
123 |     get(config.url + config.aapi + "server?simple=0")
124 |       .then(function(res) {
125 |         return res.json();
126 |       })
127 |       .then(function(json) {
128 |         vue.server = json.rows;
129 |         if (vue.now_server_ip == undefined) {
130 |           vue.now_server_ip = vue.server[0].ip;
131 |           setTimeout(function() {
132 |             vue.server_change({
133 |               target: document.getElementById("server-msg")
134 |             });
135 |           }, 200);
136 |         }
137 |       });
138 |     get(config.url + config.aapi + "sysmsg")
139 |       .then(function(res) {
140 |         return res.json();
141 |       })
142 |       .then(function(json) {
143 |         vue.server_msg = json;
144 |       });
145 |   },
146 |   methods: {
147 |     server_change(event) {
148 |       this.$parent.ws.close();
149 |       console.log(event.target.value);
150 |       this.sys_msg = {
151 |         load: 0,
152 |         cpu: {
153 |           use: 0
154 |         },
155 |         mem: {
156 |           total: 1,
157 |           use: 0
158 |         },
159 |         disk: {
160 |           total: 1,
161 |           use: 0
162 |         }
163 |       };
164 |       this.websocket = new WebSocket(
165 |         "ws://" + event.target.value + ":5135/?key=xiajibada"
166 |       );
167 |       var vue = this;
168 |       this.websocket.onmessage = function(evt) {
169 |         var json = JSON.parse(evt.data);
170 |         vue.sys_msg = json;
171 |       };
172 |       this.$parent.ws = this.websocket;
173 |       this.now_server_ip = event.target.value;
174 |       localStorage["record"] = event.target.value;
175 |     },
176 |     runStatus() {
177 |       var load = this.sys_msg.load[0],
178 |         num = this.sys_msg.cpu.num;
179 |       if (load < num) {
180 |         return "运行流畅";
181 |       } else if (load < num * 2) {
182 |         return "<span style='color:#f5945a'>系统繁忙</span>";
183 |       }
184 |       return "-";
185 |     },
186 |     kb2big(kb) {
187 |       var ret = kb / 1024;
188 |       if (ret > 1024) {
189 |         ret = Math.round(ret / 1024 * 100) / 100 + "GB";
190 |       } else {
191 |         ret = Math.round(ret) + "MB";
192 |       }
193 |       return ret;
194 |     }
195 |   }
196 | };
197 | </script>


--------------------------------------------------------------------------------
/src/components/server.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="content">
  3 |         <div class="nav-bar">
  4 |            <router-link to="/" class="nav-item" exact>
  5 |                <i class="iconfont icon-home"></i> 首页
  6 |             </router-link>/
  7 |             <router-link to="/server" class="nav-item" exact>
  8 |                服务器管理
  9 |             </router-link>
 10 |         </div>
 11 |         <div class="card" style="width: 100%;min-height: 200px;">
 12 |             <div class="card-content" style="width: 100%;height: 100%;min-height: 200px;">
 13 |                 <div class="card-header">
 14 |                     服务器管理
 15 |                 </div>
 16 |                 <div class="card-text">
 17 |                     <div class="tools-bar">
 18 |                       <button class="btn" style="background: #78c336;color: #fff;" onclick="show_box('pop-wind')" @click="showMsg(-1)">添加服务器</button>
 19 |                     </div>
 20 |                     <div id="user-table">
 21 |                         <v-table is-horizontal-resize style="width:100%" 
 22 |                         :columns="columns" :table-data="tableData" row-hover-color="#eee" 
 23 |                         @on-custom-comp="customCompFunc"
 24 |                         row-click-color="#edf7ff">
 25 |                         </v-table>
 26 |                     </div>
 27 |                     <div class="pagination">
 28 |                         <v-pagination :total="total" :page-size="20" :page-index="pageIndex" @page-change="pageChange"></v-pagination>
 29 |                     </div>
 30 |                 </div>
 31 |             </div>
 32 |         </div>
 33 | 
 34 |         <div id="pop-wind" class="pop-box box">
 35 |     <div class="box-header">
 36 |         服务器信息
 37 |         <button class="btn pop-close" onclick="close_box('pop-wind')">X</button>
 38 |     </div>
 39 |     <div class="box-content">
 40 |         <div class="box spk-box">
 41 |             <span>服务器名:<input class="ipt-text" name="sname" v-model="server.name" placeholder="请输入服务器名称" /></span><br>
 42 |             <span>IP:<input class="ipt-text" name="ip" v-model="server.ip" placeholder="请输入服务器ip" /></span><br>
 43 |             <span>连接配置:</span><textarea cols="30" rows="10" class="ipt-text" style="resize:none" v-model="server.config"></textarea>
 44 |             <span>秘钥:<input class="ipt-text" name="secret" v-model="server.secret" placeholder="请输入验证秘钥" /></span><br>
 45 |         </div>
 46 |         <div class="box spk-box" style="text-align: right;">
 47 |             <button class="btn" style="background: #00a5e0;color: #fff;width:60px;" @click="editServer">{{ action }}</button>
 48 |         </div>
 49 |     </div>
 50 |     <div class="box-footer">
 51 |         <span class="spk">{{ action }}</span>
 52 |         <button class="pop-close btn" onclick="close_box('pop-wind')">关闭</button>
 53 |     </div>
 54 | </div>
 55 |     </div>
 56 | </template>
 57 | <style>
 58 | .pagination {
 59 |   width: 100%;
 60 |   text-align: right;
 61 | }
 62 | .datepicker__buttons .datepicker__button-cancel {
 63 |   display: none;
 64 | }
 65 | </style>
 66 | <script>
 67 | import Vue from "vue";
 68 | import config from "./../config";
 69 | import { formatDate, get, req_json } from "./../common";
 70 | Vue.component("server-action-btn-group", {
 71 |   template:
 72 |     '<div><button class="btn" onclick="show_box(\'pop-wind\')" @click="edit" style="background:#00a5e0;color:#fff;">编辑</button> ' +
 73 |     '<button class="btn" @click="ban" style="background:#2ba535;color:#fff;">{{ button_ban }}</button> ' +
 74 |     '<button class="btn" @click="del" style="background:red;color:#fff;">删除</button></div>',
 75 |   props: {
 76 |     rowData: {
 77 |       type: Object
 78 |     },
 79 |     field: {
 80 |       type: String
 81 |     },
 82 |     index: {
 83 |       type: Number
 84 |     }
 85 |   },
 86 |   data() {
 87 |     return { button_ban: "开启" };
 88 |   },
 89 |   created() {
 90 |     if (this.rowData["status"] == 0) {
 91 |       this.button_ban = "关闭";
 92 |     }
 93 |   },
 94 |   methods: {
 95 |     edit() {
 96 |       let params = {
 97 |         type: "editServer",
 98 |         uid: this.rowData["uid"],
 99 |         row: this.rowData
100 |       };
101 |       this.$emit("on-custom-comp", params);
102 |     },
103 |     ban() {
104 |       let params = {
105 |         type: "banServer",
106 |         server_id: this.rowData["server_id"],
107 |         row: this.rowData,
108 |         index: this.index
109 |       };
110 |       this.$emit("on-custom-comp", params);
111 |       if (this.rowData["status"] == 0) {
112 |         this.button_ban = "开启";
113 |       } else {
114 |         this.button_ban = "关闭";
115 |       }
116 |     },
117 |     del() {
118 |       let params = {
119 |         type: "delServer",
120 |         server_id: this.rowData["server_id"],
121 |         row: this.rowData,
122 |         index: this.index
123 |       };
124 |       this.$emit("on-custom-comp", params);
125 |     }
126 |   }
127 | });
128 | 
129 | import VueDatepickerLocal from "vue-datepicker-local";
130 | 
131 | export default {
132 |   components: {
133 |     VueDatepickerLocal
134 |   },
135 |   name: "server",
136 |   data() {
137 |     return {
138 |       server: {
139 |         server_id: -1,
140 |         name: "",
141 |         ip: "",
142 |         config: "",
143 |         secret: ""
144 |       },
145 |       action: "添加",
146 |       pageIndex: 1,
147 |       total: 0,
148 |       tableData: [],
149 |       columns: [
150 |         {
151 |           field: "server_id",
152 |           title: "服务器id",
153 |           width: 40,
154 |           titleAlign: "center",
155 |           columnAlign: "center",
156 |           isResize: true
157 |         },
158 |         {
159 |           field: "name",
160 |           title: "服务器名",
161 |           width: 80,
162 |           titleAlign: "center",
163 |           columnAlign: "center",
164 |           isResize: true
165 |         },
166 |         {
167 |           field: "ip",
168 |           title: "服务器ip",
169 |           width: 120,
170 |           titleAlign: "center",
171 |           columnAlign: "center",
172 |           isResize: true
173 |         },
174 |         {
175 |           field: "secret",
176 |           title: "服务器秘钥",
177 |           width: 120,
178 |           titleAlign: "center",
179 |           columnAlign: "center",
180 |           isResize: true
181 |         },
182 |         {
183 |           field: "status",
184 |           title: "服务器状态",
185 |           width: 120,
186 |           titleAlign: "center",
187 |           columnAlign: "center",
188 |           isResize: true,
189 |           formatter: function(rowData) {
190 |             if (rowData["status"] == 0) {
191 |               return "运行中";
192 |             } else {
193 |               return "<span style='color:red'>关闭状态</span>";
194 |             }
195 |           }
196 |         },
197 |         {
198 |           field: "action",
199 |           title: "操作",
200 |           width: 120,
201 |           titleAlign: "center",
202 |           columnAlign: "center",
203 |           isResize: true,
204 |           componentName: "server-action-btn-group"
205 |         }
206 |       ]
207 |     };
208 |   },
209 |   created() {
210 |     this.fetchData();
211 |   },
212 |   methods: {
213 |     pageChange: function(pageIndex) {
214 |       this.pageIndex = pageIndex;
215 |       this.fetchData();
216 |     },
217 |     editServer() {
218 |       var vue = this;
219 |       var method = "post";
220 |       if (this.server.server_id != -1) {
221 |         method = "put";
222 |       }
223 |       var data = this.server;
224 |       req_json(
225 |         config.url + config.aapi + "server",
226 |         method,
227 |         JSON.stringify(data)
228 |       )
229 |         .then(function(res) {
230 |           return res.json();
231 |         })
232 |         .then(function(json) {
233 |           alert(json.msg);
234 |           if (json.code == 0) {
235 |             vue.pageChange(vue.pageIndex);
236 |             close_box("pop-wind");
237 |           }
238 |         });
239 |     },
240 |     showMsg(server_id, row) {
241 |       if (server_id == -1) {
242 |         this.server.server_id = -1;
243 |         this.server.name = "";
244 |         this.server.ip = "";
245 |         this.server.config = "";
246 |         this.server.secret = "";
247 |         this.action = "添加";
248 |       } else {
249 |         this.server.server_id = row.server_id;
250 |         this.server.name = row.name;
251 |         this.server.ip = row.ip;
252 |         this.server.config = row.config;
253 |         this.server.secret = row.secret;
254 |         this.action = "修改";
255 |       }
256 |     },
257 |     fetchData() {
258 |       var vue = this;
259 |       fetch(config.url + config.aapi + "server?page=" + this.pageIndex, {
260 |         credentials: "include"
261 |       })
262 |         .then(function(response) {
263 |           return response.json();
264 |         })
265 |         .then(function(json) {
266 |           vue.tableData = json["rows"];
267 |           vue.total = json["total"];
268 |         });
269 |     },
270 |     banServer(server_id, row, index) {
271 |       var vue = this;
272 |       var status = row["status"] == 0 ? 1 : 0;
273 |       req_json(
274 |         config.url + config.aapi + "server?type=1",
275 |         "delete",
276 |         JSON.stringify({
277 |           server_id: server_id,
278 |           status: status
279 |         })
280 |       )
281 |         .then(function(res) {
282 |           return res.json();
283 |         })
284 |         .then(function(json) {
285 |           if (json.code == 0) {
286 |             vue.tableData[index].status = status;
287 |           } else {
288 |             alert(json.msg);
289 |           }
290 |         });
291 |     },
292 |     delServer(server_id) {
293 |       var vue = this;
294 |       req_json(
295 |         config.url + config.aapi + "server?type=2",
296 |         "delete",
297 |         JSON.stringify({
298 |           server_id: server_id
299 |         })
300 |       )
301 |         .then(function(res) {
302 |           return res.json();
303 |         })
304 |         .then(function(json) {
305 |           if (json.code == 0) {
306 |             vue.pageChange(vue.pageIndex);
307 |           } else {
308 |             alert(json.msg);
309 |           }
310 |         });
311 |     },
312 |     customCompFunc(params) {
313 |       if (params.type == "editServer") {
314 |         this.showMsg(params.server_id, params.row);
315 |       } else if (params.type == "banServer") {
316 |         this.banServer(params.server_id, params.row, params.index);
317 |       } else if (params.type == "delServer") {
318 |         this.delServer(params.server_id, params.row, params.index);
319 |       }
320 |     }
321 |   }
322 | };
323 | </script>
324 | 


--------------------------------------------------------------------------------
/src/css/admin.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     background: #f4f4fb;
  3 |     margin: 0;
  4 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  5 |     overflow: hidden;
  6 | }
  7 | 
  8 | .header {
  9 |     position: absolute;
 10 |     top: 0;
 11 |     padding: 0 8px;
 12 |     height: 50px;
 13 |     line-height: 50px;
 14 |     background: #fff;
 15 |     left: 0;
 16 |     right: 0;
 17 | }
 18 | 
 19 | .mobile-menu {
 20 |     display: none;
 21 | }
 22 | 
 23 | .nav-left {
 24 |     position: absolute;
 25 |     left: 0;
 26 |     width: 200px;
 27 |     top: 50px;
 28 |     bottom: 0;
 29 |     background: #343842;
 30 | }
 31 | 
 32 | .content {
 33 |     font-size: 0;
 34 |     position: absolute;
 35 |     left: 200px;
 36 |     top: 50px;
 37 |     bottom: 0;
 38 |     right: 0;
 39 |     padding: 10px;
 40 |     overflow: auto;
 41 | }
 42 | 
 43 | .header>div {
 44 |     float: left;
 45 | }
 46 | 
 47 | .logo {
 48 |     height: 100%;
 49 | }
 50 | 
 51 | .logo .logo-text {
 52 |     color: #000;
 53 |     display: inline-block;
 54 |     height: 100%;
 55 |     font-size: 20px;
 56 |     font-weight: bold;
 57 |     text-decoration: none;
 58 |     margin-left: 16px;
 59 | }
 60 | 
 61 | .top-user {
 62 |     font-size: 14px;
 63 |     margin-left: 20px;
 64 | }
 65 | 
 66 | .top-user .nav-user {
 67 |     color: #1396ff;
 68 |     cursor: pointer;
 69 | }
 70 | 
 71 | .nav-user .icon-down {
 72 |     margin-left: 2px;
 73 |     font-size: 12px;
 74 | }
 75 | 
 76 | .nav-left {
 77 |     font-size: 0;
 78 |     padding-top: 14px;
 79 | }
 80 | 
 81 | .nav-left .nav-item {
 82 |     font-size: 14px;
 83 |     color: #fff;
 84 |     line-height: 45px;
 85 |     cursor: pointer;
 86 |     width: 100%;
 87 |     box-sizing: border-box;
 88 |     display: inline-block;
 89 | }
 90 | 
 91 | .active>.nav-ic {
 92 |     background: #ff7267;
 93 | }
 94 | 
 95 | .nav-item.br {
 96 |     height: 0;
 97 |     width: calc(100% - 20px);
 98 |     border-top: 1px solid #5d5d5d;
 99 |     margin-left: 20px;
100 | }
101 | 
102 | .nav-item>.nav-ic {
103 |     padding-left: 20px;
104 | }
105 | 
106 | .nav-item .nav-item {
107 |     padding-left: 20px;
108 | }
109 | 
110 | .nav-left .nav-item>.nav-ic:hover {
111 |     transition: .4s;
112 |     background: #545965;
113 | }
114 | 
115 | .nav-left .nav-item.active>.nav-ic:hover {
116 |     background: #ff7267;
117 | }
118 | 
119 | .nav-item .icon-down,
120 | .nav-item .icon-up {
121 |     margin-right: 18px;
122 |     float: right;
123 | }
124 | 
125 | .test-wh {
126 |     width: 400px;
127 |     height: 200px;
128 | }
129 | 
130 | .card {
131 |     font-size: 14px;
132 |     display: inline-block;
133 |     box-sizing: border-box;
134 | }
135 | 
136 | .card:not(:first-child) {
137 |     margin-top: 10px;
138 | }
139 | 
140 | .card-content {
141 |     background: #fff;
142 |     width: 100%;
143 |     height: 100%;
144 | }
145 | 
146 | .card .card-header {
147 |     overflow: hidden;
148 |     line-height: 27px;
149 |     padding: 8px 6px;
150 |     font-size: 16px;
151 |     height: auto;
152 |     color: #666;
153 |     border-bottom: 1px solid #eee;
154 | }
155 | 
156 | .card .card-text {
157 |     padding: 4px 8px;
158 | }
159 | 
160 | .card.card-half {
161 |     width: 50%;
162 | }
163 | 
164 | .nav-bar {
165 |     font-size: 12px;
166 |     background: #fff;
167 |     width: 100%;
168 |     margin-bottom: 10px;
169 |     padding: 4px 6px;
170 | }
171 | 
172 | a.nav-item {
173 |     text-decoration: none;
174 | }
175 | 
176 | .nav-bar>.nav-item {
177 |     color: #484848;
178 | }
179 | 
180 | .nav-item>.sub-nav {
181 |     display: none;
182 | }
183 | 
184 | .nav-item.active>.sub-nav {
185 |     display: block;
186 | }
187 | 
188 | #user-table {
189 |     position: relative;
190 |     padding: 8px 0;
191 | }
192 | 
193 | #pop-wind {
194 |     width: 500px;
195 | }
196 | 
197 | .system-msg-box {
198 |     display: inline-block;
199 |     height: 140px;
200 | }
201 | 
202 | .system-msg-box:not(:first-child) {
203 |     margin-left: 80px;
204 | }
205 | 
206 | .system-msg-box .msg {
207 |     display: block;
208 |     text-align: center;
209 | }
210 | 
211 | .system-msg-box .msg:first-child {
212 |     margin-bottom: 8px;
213 | }
214 | 
215 | .system-msg-box .msg:last-child {
216 |     margin-top: 8px;
217 | }
218 | 
219 | @media screen and (max-width: 720px) {
220 |     .system-msg-box:not(:first-child) {
221 |         margin-left: 0;
222 |     }
223 |     .system-msg-box:nth-child(odd) {
224 |         margin-left: 20px;
225 |     }
226 |     .system-msg-box:nth-child(even) {
227 |         float: right;
228 |         margin-right: 20px;
229 |     }
230 |     .card.card-half {
231 |         width: 100%;
232 |     }
233 |     .header {
234 |         background: #545965;
235 |         color: #fff;
236 |     }
237 |     .logo>.logo-text {
238 |         color: #fff;
239 |     }
240 |     .top-user {
241 |         position: absolute;
242 |         right: 10px;
243 |     }
244 |     .nav-bar {
245 |         display: none;
246 |     }
247 |     .top-user .nav-user {
248 |         color: #fff;
249 |     }
250 |     .mobile-menu {
251 |         display: block;
252 |     }
253 |     .nav-left {
254 |         background: #545965;
255 |         display: none;
256 |         bottom: auto;
257 |         z-index: 10;
258 |         padding-top: 0;
259 |     }
260 |     .content {
261 |         left: 0;
262 |         right: 0;
263 |         padding: 0;
264 |     }
265 |     #pop-wind {
266 |         width: 300px;
267 |     }
268 |     .datepicker {
269 |         width: 120px;
270 |     }
271 |     .form>.ipt-group>.tag,
272 |     .form>.ipt-group>.ipt-text {
273 |         width: 100%;
274 |         max-width: 100%;
275 |     }
276 |     .box-content.form>.ipt-group {
277 |         width: 90%;
278 |     }
279 |     .min-card {
280 |         width: 100%;
281 |         margin-bottom: 4px;
282 |     }
283 |     .min-card .card-content {
284 |         width: calc(100% - 60px) !important;
285 |     }
286 | }
287 | 
288 | .pop-wid {
289 |     padding: 2px 8px;
290 |     position: absolute;
291 |     left: 50%;
292 |     top: 50%;
293 |     transform: translate(-50%, -50%);
294 |     background: #fff;
295 |     border: 1px solid #cecece;
296 |     border-radius: 4px;
297 |     transition: .4s;
298 |     opacity: 0;
299 |     display: block;
300 |     z-index: -1;
301 | }
302 | 
303 | .pop-wid.prompt {
304 |     height: 30px;
305 |     min-width: 150px;
306 |     line-height: 30px;
307 |     text-align: center;
308 |     cursor: default;
309 | }
310 | 
311 | .tools-bar {
312 |     margin-top: 8px;
313 |     text-align: right;
314 | }
315 | 
316 | .pop-box {
317 |     transition: opacity .5s;
318 |     opacity: 0;
319 |     position: fixed;
320 |     left: 50%;
321 |     top: 50%;
322 |     transform: translate(-50%, -50%);
323 |     border-radius: 2px;
324 |     box-shadow: 0px 0px 4px #484848;
325 |     z-index: -1;
326 |     pointer-events: none;
327 | }
328 | 
329 | .pop-box>div {
330 |     padding: 6px;
331 | }
332 | 
333 | .pop-box>.box-header,
334 | .box-footer {
335 |     line-height: 30px;
336 |     padding: 10px 6px;
337 |     background: #f3f3f3;
338 |     font-size: 15px;
339 |     font-weight: 400;
340 |     font-family: Arial, Helvetica, sans-serif;
341 | }
342 | 
343 | .pop-box>.box-header {
344 |     border-bottom: 1px solid #eee;
345 | }
346 | 
347 | .pop-box>.box-footer {
348 |     border-top: 1px solid #eee;
349 | }
350 | 
351 | #pop {
352 |     position: fixed;
353 |     left: 0;
354 |     top: 0;
355 |     bottom: 0;
356 |     right: 0;
357 |     z-index: 10;
358 |     background: #8e8e8eab;
359 | }
360 | 
361 | .btn.pop-close {
362 |     background: #00000000;
363 |     float: right;
364 |     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
365 |     font-weight: 100;
366 |     font-size: 14px;
367 | }
368 | 
369 | .btn.pop-close:hover {
370 |     color: #ff0000;
371 | }
372 | 
373 | .spk-box.box {
374 |     padding: 10px;
375 |     border: 1px solid #eaeaea;
376 |     border-left: 4px solid #eaeaea;
377 | }
378 | 
379 | .pop-box .spk-box {
380 |     font-size: 14px;
381 | }
382 | 
383 | .btn {
384 |     border-radius: 2px;
385 |     display: inline-block;
386 |     min-width: 60px;
387 |     font-size: 12px;
388 |     border: 0;
389 |     padding: 5px;
390 |     cursor: pointer;
391 |     outline: none;
392 |     font-weight: bold;
393 |     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
394 |     box-sizing: border-box;
395 |     text-decoration: none !important;
396 | }
397 | 
398 | .btn.btn-min {
399 |     min-width: auto;
400 | }
401 | 
402 | .box-content {
403 |     padding: 8px !important;
404 |     background: #fff;
405 | }
406 | 
407 | .box-content .ipt-group {
408 |     width: 400px;
409 | }
410 | 
411 | .form .ipt-group {
412 |     margin: 0 5%;
413 |     margin-bottom: 6px;
414 |     width: 40%;
415 | }
416 | 
417 | .form .tag {
418 |     min-width: 100px;
419 |     display: inline-block;
420 |     width: 25%;
421 |     font-size: 16px;
422 |     padding-right: 6px;
423 | }
424 | 
425 | .form>.ipt-group>.tag {
426 |     margin-bottom: 6px;
427 | }
428 | 
429 | .min-card {
430 |     display: inline-block;
431 |     height: 100px;
432 |     box-sizing: unset;
433 |     cursor: pointer;
434 |     transition: .25s;
435 | }
436 | 
437 | .min-card:hover {
438 |     box-shadow: 0px 0px 2px 0px #0094ffc9;
439 | }
440 | 
441 | .min-card .card-content,
442 | .min-card .card-title {
443 |     padding: 6px;
444 |     height: 100px;
445 |     display: inline-block;
446 |     text-align: center;
447 | }
448 | 
449 | .card .card-select {
450 |     width: 180px;
451 |     float: right;
452 |     line-height: 20px
453 | }
454 | 
455 | .min-card .card-title {
456 |     width: 60px;
457 |     float: left;
458 |     background: #40a7f1;
459 |     font-size: 16px;
460 |     line-height: 92px;
461 |     color: #fff;
462 | }
463 | 
464 | .min-card .card-action {
465 |     line-height: 30px;
466 | }
467 | 
468 | .card-action a {
469 |     text-decoration: none;
470 |     color: #40a7f1;
471 | }
472 | 
473 | .bigp {
474 |     font-size: 30px;
475 |     color: #666;
476 |     margin: 0;
477 | }
478 | 
479 | .min-card .card-content {
480 |     border: 1px solid #eee;
481 |     border-left: 0;
482 |     width: auto;
483 |     line-height: 60px;
484 |     min-width: 200px;
485 | }
486 | 
487 | .form .ipt-text {
488 |     width: 75%;
489 |     display: inline-block;
490 |     font-size: 14px;
491 |     height: 30px;
492 | }
493 | 
494 | .box-content>p {
495 |     font-size: 14px;
496 | }
497 | 
498 | .ipt-text {
499 |     width: 100%;
500 |     padding: 4px 6px;
501 |     box-sizing: border-box;
502 |     border: 1px solid #D4D4D4;
503 |     outline: none;
504 | }
505 | 
506 | .ipt-select.ipt-text {
507 |     width: 30%;
508 | }
509 | 
510 | .ipt-text:hover,
511 | .ipt-text:focus {
512 |     border: 1px solid #00a5e0;
513 | }
514 | 
515 | div.group {
516 |     margin-top: 4px;
517 |     line-height: 34px;
518 | }
519 | 
520 | div.group .ipt-select.ipt-text {
521 |     height: 34px;
522 | }
523 | 
524 | .tools-bar .ipt-text {
525 |     width: 120px;
526 |     line-height: 18px;
527 | }
528 | 
529 | .card-text .inline {
530 |     width: auto;
531 |     display: inline-block;
532 | }


--------------------------------------------------------------------------------
/src/components/user.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="content">
  3 |         <div class="nav-bar">
  4 |            <router-link to="/" class="nav-item" exact>
  5 |                <i class="iconfont icon-home"></i> 首页
  6 |             </router-link>/
  7 |             <router-link to="/user" class="nav-item" exact>
  8 |                用户管理
  9 |             </router-link>
 10 |         </div>
 11 |         <div class="card" style="width: 100%;min-height: 200px;">
 12 |             <div class="card-content" style="width: 100%;height: 100%;min-height: 200px;">
 13 |                 <div class="card-header">
 14 |                     用户管理
 15 |                 </div>
 16 |                 <div class="card-text">
 17 |                     <div class="tools-bar">
 18 |                       <button class="btn" style="background: #78c336;color: #fff;float:left;" onclick="show_box('pop-wind')" @click="editUser(-1)">添加用户</button>
 19 |                       <input type="text" class="ipt-text" placeholder="搜索用户" v-model="keyword">
 20 |                       <button class="btn" style="background: #00a5d8;color: #fff;" @click="fetchData">搜索</button>
 21 |                     </div>
 22 |                     <div id="user-table">
 23 |                         <v-table is-horizontal-resize style="width:100%" 
 24 |                         :columns="columns" :table-data="tableData" row-hover-color="#eee" 
 25 |                         @on-custom-comp="customCompFunc"
 26 |                         row-click-color="#edf7ff">
 27 |                         </v-table>
 28 |                     </div>
 29 |                     <div class="pagination">
 30 |                         <v-pagination :total="total" :page-size="20" :page-index="pageIndex" @page-change="pageChange"></v-pagination>
 31 |                     </div>
 32 |                 </div>
 33 |             </div>
 34 |         </div>
 35 | 
 36 |         <div id="pop-wind" class="pop-box box">
 37 |     <div class="box-header">
 38 |         用户信息
 39 |         <button class="btn pop-close" onclick="close_box('pop-wind')">X</button>
 40 |     </div>
 41 |     <div class="box-content">
 42 |         <div class="box spk-box">
 43 |             <span>用户基本信息:</span><br>
 44 |             <span>用户名:<input class="ipt-text" id="user" name="name" v-model="user.name" placeholder="请输入用户名" /></span><br>
 45 |             <span>密码:<input class="ipt-text" id="pwd" v-model="user.pwd" placeholder="请输入密码" /></span><br>
 46 |             <span>邮箱:<input class="ipt-text" id="email" v-model="user.email" placeholder="请输入邮箱" /></span><br>
 47 |         </div>
 48 |         <div class="box spk-box">
 49 |             <span>用户组:</span><br>
 50 |             <template  v-for="(group,index) in user.group" >
 51 |               <div class="group" :key="index">
 52 |               <select class="ipt-text ipt-select group" @change="groupChange(index)" v-show="group.before=group.group_id || true" v-model="group.group_id">
 53 |                 <option value="0">
 54 |                   未选择
 55 |                 </option>
 56 |                 <template v-for="(userGroup,s_index) in $parent.group" v-if="userGroup.group_id == group.group_id">
 57 |                 <option :value="userGroup.group_id" selected :key="s_index">
 58 |                   {{ userGroup.name }}
 59 |                 </option>
 60 |                 </template>
 61 |                 <template v-else>
 62 |                   <option :value="userGroup.group_id">
 63 |                   {{ userGroup.name }}
 64 |                   </option>
 65 |                 </template>
 66 |                 <option value="-1">
 67 |                   删除
 68 |                 </option>
 69 |               </select>
 70 |               <template v-if="group.expire==-1">
 71 |                 <vue-datepicker-local format="YYYY-MM-DD HH:mm:ss" @confirm="groupChange(index)" showButtons v-if="group.expire_=new Date((new Date().getTime())+2592000*1000)" v-model="group.expire_">
 72 | 
 73 |                 </vue-datepicker-local>
 74 |                 <input :id="'forever'+index" type="checkbox" @change="expireChange($event,index)" checked v-show="group.forever=true" />
 75 |               </template>
 76 |               <template v-else>
 77 |                 <vue-datepicker-local format="YYYY-MM-DD HH:mm:ss" @confirm="groupChange(index)" showButtons v-show="group.expire_=isExpire(group.expire,index)" v-model="group.expire_">
 78 |            
 79 |                 </vue-datepicker-local>
 80 |                 <input :id="'forever'+index" type="checkbox" @change="expireChange($event,index)" v-show="!(group.forever=false)" />
 81 |               </template>
 82 |               <label :for="'forever'+index">永久</label>
 83 | 
 84 |               </div>
 85 |             </template>
 86 |             <button class="btn btn-min" @click="addUserGroup" style="padding: 4px 8px;background:#00a5e0;color:#fff;margin-top:4px;" >+</button>
 87 |         </div>
 88 |         <div class="box spk-box" style="text-align: right;">
 89 |             <button class="btn" @click="addUser" style="background: #00a5e0;color: #fff;width:60px;">{{ action }}</button>
 90 |         </div>
 91 |     </div>
 92 |     <div class="box-footer">
 93 |         <span class="spk">{{ action }}</span>
 94 |         <button class="pop-close btn" onclick="close_box('pop-wind')">关闭</button>
 95 |     </div>
 96 | </div>
 97 |     </div>
 98 | </template>
 99 | <style>
100 | .pagination {
101 |   width: 100%;
102 |   text-align: right;
103 | }
104 | .datepicker__buttons .datepicker__button-cancel {
105 |   display: none;
106 | }
107 | </style>
108 | <script>
109 | import Vue from "vue";
110 | import config from "./../config";
111 | import { formatDate, get, req_json } from "./../common";
112 | Vue.component("user-action-btn-group", {
113 |   template:
114 |     '<div><button class="btn" onclick="show_box(\'pop-wind\')" @click="edit" style="background:#00a5e0;color:#fff;">编辑</button> ' +
115 |     '<button class="btn" @click="del" style="background:red;color:#fff;">{{ ban }}</button></div>',
116 |   props: {
117 |     rowData: {
118 |       type: Object
119 |     },
120 |     field: {
121 |       type: String
122 |     },
123 |     index: {
124 |       type: Number
125 |     }
126 |   },
127 |   data() {
128 |     return { ban: "解禁" };
129 |   },
130 |   created() {
131 |     if (this.rowData["status"] == 0) {
132 |       this.ban = "禁封";
133 |     }
134 |   },
135 |   methods: {
136 |     edit() {
137 |       let params = {
138 |         type: "editUser",
139 |         uid: this.rowData["uid"],
140 |         row: this.rowData
141 |       };
142 |       this.$emit("on-custom-comp", params);
143 |     },
144 |     del() {
145 |       let params = {
146 |         type: "delUser",
147 |         uid: this.rowData["uid"],
148 |         row: this.rowData,
149 |         index: this.index
150 |       };
151 |       this.$emit("on-custom-comp", params);
152 |       if (this.rowData["status"] == 0) {
153 |         this.ban = "解禁";
154 |       } else {
155 |         this.ban = "禁封";
156 |       }
157 |     }
158 |   }
159 | });
160 | 
161 | import VueDatepickerLocal from "vue-datepicker-local";
162 | 
163 | export default {
164 |   components: {
165 |     VueDatepickerLocal
166 |   },
167 |   name: "user",
168 |   data() {
169 |     return {
170 |       keyword: "",
171 |       user: {
172 |         uid: 0,
173 |         name: "",
174 |         pwd: "",
175 |         email: "",
176 |         group: []
177 |       },
178 |       action: "添加用户",
179 |       pageIndex: 1,
180 |       total: 0,
181 |       tableData: [],
182 |       columns: [
183 |         {
184 |           field: "uid",
185 |           title: "uid",
186 |           width: 40,
187 |           titleAlign: "center",
188 |           columnAlign: "center",
189 |           isResize: true
190 |         },
191 |         {
192 |           field: "user",
193 |           title: "用户名",
194 |           width: 80,
195 |           titleAlign: "center",
196 |           columnAlign: "center",
197 |           isResize: true
198 |         },
199 |         {
200 |           field: "email",
201 |           title: "邮箱",
202 |           width: 120,
203 |           titleAlign: "center",
204 |           columnAlign: "center",
205 |           isResize: true
206 |         },
207 |         {
208 |           field: "reg_time",
209 |           title: "注册时间",
210 |           width: 120,
211 |           titleAlign: "center",
212 |           columnAlign: "center",
213 |           isResize: true,
214 |           formatter: function(rowData) {
215 |             return formatDate(rowData["reg_time"]);
216 |           }
217 |         },
218 |         {
219 |           field: "last_login_time",
220 |           title: "最后一次登录时间",
221 |           width: 120,
222 |           titleAlign: "center",
223 |           columnAlign: "center",
224 |           isResize: true,
225 |           formatter: function(rowData) {
226 |             return formatDate(rowData["last_login_time"]);
227 |           }
228 |         },
229 |         {
230 |           field: "status",
231 |           title: "用户状态",
232 |           width: 120,
233 |           titleAlign: "center",
234 |           columnAlign: "center",
235 |           isResize: true,
236 |           formatter: function(rowData) {
237 |             if (rowData["status"] == 0) {
238 |               return "正常用户";
239 |             } else {
240 |               return "<span style='color:red'>用户禁封</span>";
241 |             }
242 |           }
243 |         },
244 |         {
245 |           field: "action",
246 |           title: "操作",
247 |           width: 120,
248 |           titleAlign: "center",
249 |           columnAlign: "center",
250 |           isResize: true,
251 |           componentName: "user-action-btn-group"
252 |         }
253 |       ]
254 |     };
255 |   },
256 |   created() {
257 |     this.fetchData();
258 |   },
259 |   methods: {
260 |     addUser() {
261 |       var vue = this;
262 |       var method = "put";
263 |       var user = {
264 |         user: this.user.name,
265 |         passwd: this.user.pwd,
266 |         email: this.user.email
267 |       };
268 |       if (this.user.uid == -1) {
269 |         method = "post";
270 |         user.group = [];
271 |         for (var i = 0; i < this.user.group.length; i++) {
272 |           var expire = 0;
273 |           if (this.user.group[i].forever) {
274 |             expire = -1;
275 |           } else {
276 |             expire = Date.parse(this.user.group[i].expire_) / 1000;
277 |           }
278 |           user.group.push({
279 |             group_id: this.user.group[i].group_id,
280 |             expire: expire
281 |           });
282 |         }
283 |       } else {
284 |         user.uid = this.user.uid;
285 |       }
286 |       req_json(config.url + config.aapi + "user", method, JSON.stringify(user))
287 |         .then(function(res) {
288 |           return res.json();
289 |         })
290 |         .then(function(json) {
291 |           alert(json.msg);
292 |           if (json.code == 0) {
293 |             vue.pageChange(vue.pageIndex);
294 |             close_box("pop-wind");
295 |           }
296 |         });
297 |     },
298 |     isExpire(time, index) {
299 |       var now = new Date().valueOf() / 1000;
300 |       this.user.group[index].forever = false;
301 |       if (time == -1) {
302 |         //无限期的
303 |         this.user.group[index].forever = true;
304 |         return new Date(new Date().getTime() + 2592000 * 1000);
305 |       } else if (now > time) {
306 |         //过期的
307 |         return new Date(new Date().getTime() + 2592000 * 1000);
308 |       }
309 |       //有期限的
310 |       return new Date(time * 1000);
311 |     },
312 |     expireChange(event, index) {
313 |       this.user.group[index].forever = $(event.target).is(":checked");
314 |       this.groupChange(index);
315 |     },
316 |     fetchData() {
317 |       var vue = this;
318 |       fetch(
319 |         config.url +
320 |           config.aapi +
321 |           "user?page=" +
322 |           this.pageIndex +
323 |           "&keyword=" +
324 |           this.keyword,
325 |         {
326 |           credentials: "include"
327 |         }
328 |       )
329 |         .then(function(response) {
330 |           return response.json();
331 |         })
332 |         .then(function(json) {
333 |           vue.tableData = json["rows"];
334 |           vue.total = json["total"];
335 |         });
336 |     },
337 |     pageChange: function(pageIndex) {
338 |       this.pageIndex = pageIndex;
339 |       this.fetchData();
340 |     },
341 |     editUser(uid, row) {
342 |       var vue = this;
343 |       if (row == undefined) {
344 |         vue.user.uid = -1;
345 |         vue.user.name = "";
346 |         vue.user.email = "";
347 |         this.action = "添加";
348 |       } else {
349 |         vue.user.uid = row["uid"];
350 |         vue.user.name = row["user"];
351 |         vue.user.email = row["email"];
352 |         this.action = "修改";
353 |       }
354 |       vue.user.pwd = "";
355 |       vue.user.group = [];
356 |       if (uid != -1) {
357 |         //编辑用户,获取用户群组
358 |         get(config.url + config.aapi + "usergroup?uid=" + uid)
359 |           .then(function(response) {
360 |             return response.json();
361 |           })
362 |           .then(function(json) {
363 |             vue.user.group = json["rows"];
364 |           });
365 |       }
366 |     },
367 |     groupChange(index) {
368 |       var vue = this;
369 |       var gid = this.user.group[index].group_id;
370 |       var expire = this.user.group[index].forever
371 |         ? -1
372 |         : Date.parse(this.user.group[index].expire_) / 1000;
373 |       var method = "post";
374 |       var before = this.user.group[index].before;
375 |       for (var i = 0; i < this.user.group.length; i++) {
376 |         if (gid == this.user.group[i].group_id && i != index) {
377 |           //重复了
378 |           if (before === true) {
379 |             before = 0;
380 |           }
381 |           this.user.group[index].group_id = before;
382 |           alert("已经存在这个用户组了");
383 |           return;
384 |         }
385 |       }
386 |       if (gid == -1) {
387 |         gid = this.user.group[index].before;
388 |         method = "delete";
389 |         this.user.group.splice(index, 1);
390 |       } else if (this.user.uid == -1) {
391 |         return;
392 |       } else {
393 |         this.user.group[index].before = gid;
394 |       }
395 | 
396 |       req_json(
397 |         config.url + config.aapi + "usergroup",
398 |         method,
399 |         JSON.stringify({
400 |           uid: this.user.uid,
401 |           gid: gid,
402 |           expire: expire,
403 |           before: before
404 |         })
405 |       )
406 |         .then(function(response) {
407 |           return response.json();
408 |         })
409 |         .then(function(json) {
410 |           if (method != "delete" && json.code == -1) {
411 |             vue.user.group[index].group_id = before;
412 |             vue.user.group[index].before = before;
413 |             alert(json.msg);
414 |           }
415 |         });
416 |     },
417 |     addUserGroup: function() {
418 |       this.user.group.push({
419 |         expire: 0,
420 |         group_id: 0,
421 |         uid: this.user.uid,
422 |         before: 0
423 |       });
424 |     },
425 |     delUser(uid, row, index) {
426 |       var vue = this;
427 |       var status = row["status"] == 0 ? 1 : 0;
428 |       req_json(
429 |         config.url + config.aapi + "user",
430 |         "delete",
431 |         JSON.stringify({
432 |           uid: uid,
433 |           status: status
434 |         })
435 |       )
436 |         .then(function(res) {
437 |           return res.json();
438 |         })
439 |         .then(function(json) {
440 |           if (json.code == 0) {
441 |             vue.tableData[index].status = status;
442 |           } else {
443 |             alert(json.msg);
444 |           }
445 |         });
446 |     },
447 |     customCompFunc(params) {
448 |       if (params.type == "editUser") {
449 |         this.editUser(params.uid, params.row);
450 |       }
451 |       if (params.type == "delUser") {
452 |         this.delUser(params.uid, params.row, params.index);
453 |       }
454 |     }
455 |   }
456 | };
457 | </script>
458 | 


--------------------------------------------------------------------------------