Merge pull request #298 from lanrenwo/add_online_search

新增在线用户的搜索和一键下线功能

web/src/pages/user/Online.vue

@@ -1,6 +1,59 @@
 <template>
   <div>
     <el-card>
+      <el-form :inline="true">
+        <el-form-item>
+          <el-select
+              v-model="searchCate"
+              style="width: 86px;"                      
+              @change="handleSearch">
+            <el-option
+                label="用户名"
+                value="username">
+            </el-option>
+            <el-option
+                label="登录组"
+                value="group">
+            </el-option>            
+            <el-option
+                label="MAC地址"
+                value="mac_addr">
+            </el-option>
+            <el-option
+                label="IP地址"
+                value="ip">
+            </el-option>
+            <el-option
+                label="远端地址"
+                value="remote_addr">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+              v-model="searchText"
+              placeholder="请输入搜索内容"
+              @input="handleSearch">
+          </el-input>
+        </el-form-item>        
+        <el-form-item>
+          显示休眠用户：
+            <el-switch
+                v-model="showSleeper"
+                @change="handleSearch">
+            </el-switch>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+              class="extra-small-button"
+              type="danger"
+              size="mini"
+              :loading="loadingOneOffline"
+              @click="handleOneOffline">
+            一键下线
+          </el-button>
+      </el-form>
+      
       <el-table
           ref="multipleTable"
           :data="tableData"
@@ -20,14 +73,14 @@
 
         <el-table-column
             prop="group"
-            label="登陆组">
+            label="登录组">
         </el-table-column>
 
         <el-table-column
             prop="mac_addr"
             label="MAC地址">
         </el-table-column>
-        
+
         <el-table-column
             prop="unique_mac"
             label="唯一MAC">
@@ -67,7 +120,6 @@
         </el-table-column>
 
         <el-table-column
-            prop="status"
             label="实时 上行/下行"
             width="220">
           <template slot-scope="scope">
@@ -77,7 +129,6 @@
         </el-table-column>
 
         <el-table-column
-            prop="status"
             label="总量 上行/下行"
             width="200">
           <template slot-scope="scope">
@@ -88,7 +139,7 @@
 
         <el-table-column
             prop="last_login"
-            label="登陆时间"
+            label="登录时间"
             :formatter="tableDateFormat">
         </el-table-column>
 
@@ -99,6 +150,7 @@
             <el-button
                 size="mini"
                 type="primary"
+                v-if="scope.row.remote_addr !== ''"
                 @click="handleReline(scope.row)">重连
             </el-button>
 
@@ -123,6 +175,7 @@
 
 <script>
 import axios from "axios";
+import { MessageBox } from 'element-ui';
 
 export default {
   name: "Online",
@@ -147,6 +200,10 @@ export default {
   data() {
     return {
       tableData: [],
+      searchCate: 'username',
+      searchText: '',
+      showSleeper: false,
+      loadingOneOffline: false,
     }
   },
   methods: {
@@ -185,8 +242,43 @@ export default {
     handleEdit(a, row) {
       console.log(a, row)
     },
+    handleOneOffline() {
+        if (this.tableData === null || this.tableData.length === 0) {
+            this.$message.error('错误：当前在线用户表为空，无法执行一键下线操作！');
+            return;
+        }
+        MessageBox.confirm('当前搜索条件下的所有用户将会“下线”，你确定执行吗?', '危险', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'danger'
+        }).then(() => {   
+            try {
+                this.loadingOneOffline = true;
+                this.getData();        
+                this.$message.success('操作成功');
+                this.loadingOneOffline = false;
+                // 清空当前表格
+                this.tableData = [];
+            } catch (error) {
+                this.loadingOneOffline = false;
+                this.$message.error('操作失败');
+            }
+        });        
+    },
+    handleSearch() {
+        this.getData();
+    },
     getData() {
-      axios.get('/user/online').then(resp => {
+      axios.get('/user/online', 
+        {
+          params: {            
+            search_cate: this.searchCate,
+            search_text: this.searchText,
+            show_sleeper: this.showSleeper,
+            one_offline: this.loadingOneOffline
+          }
+        }
+      ).then(resp => {
         var data = resp.data.data
         console.log(data);
         this.tableData = data.datas;
@@ -201,5 +293,23 @@ export default {
 </script>
 
 <style scoped>
-
+/deep/ .el-form .el-form-item__label,
+/deep/ .el-form .el-form-item__content,
+/deep/ .el-form .el-input,
+/deep/ .el-form .el-select,
+/deep/ .el-form .el-button,
+/deep/ .el-form .el-select-dropdown__item {
+  font-size: 11px;
+}
+.el-select-dropdown .el-select-dropdown__item {
+    font-size: 11px;
+    padding: 0 10px;
+}
+/deep/ .el-input__inner{
+    height: 30px;
+    padding: 0 10px;
+}
+.extra-small-button {
+  padding: 5px 10px;
+}
 </style>