在线管理完成

packages/extra/AppOnlineManager/AppOnlineManager.vue

@@ -4,16 +4,19 @@
       <ai-title slot="title" :title="menuName" isShowBottomBorder/>
       <template #content>
         <ai-search-bar>
+          <template #left>
+            <el-button type="primary" @click="getTableData">刷新数据</el-button>
+          </template>
           <template #right>
-            <el-input placeholder="姓名/手机号" size="small" clearable v-model="search.name" @change="page.current=1,getTableData()"/>
+            <el-input placeholder="姓名/部门" size="small" clearable v-model="search.name" @change="page.current=1,getTableData()"/>
           </template>
         </ai-search-bar>
         <el-row type="flex" class="fill">
-          <div flex v-for="item in tableData" :key="item.id" class="itemCard mar-b8 mar-r8">
+          <div flex v-for="item in userList" :key="item.id" class="itemCard mar-b8 mar-r8" @click="handleLogoutTarget(item)">
             <el-avatar :src="item.avatar"/>
             <div class="fill mar-l8 mar-r8">
               <h4 v-text="item.name"/>
-              <div class="dept" v-text="item.dept"/>
+              <div class="dept" v-text="item.departName"/>
             </div>
             <i class="el-icon-switch-button"/>
           </div>
@@ -36,19 +39,36 @@ export default {
   },
   data() {
     return {
-      tableData: [{
+      tableData: [],
-        id: 1,
-        name: "艾贤凌阿啊",
-        dept: "研发部",
-        avatar: "http://wework.qpic.cn/wwhead/duc2TvpEgSQO4BpE0WZSZ8ReqnNFtOlpHOHmcRvBiaPO5BUEyszdnocog5MKktUUFq3iaVrsXFhKI/0"
-      }],
       search: {name: ""},
-      page: {current: 1, size: 10, total: 0}
+    }
+  },
+  computed: {
+    userList: v => {
+      const reg = new RegExp(`${v.search.name}`, 'g')
+      return v.tableData.filter(e => !v.search.name || reg.test(e.name) || reg.test(e.departName))
     }
   },
   methods: {
     getTableData() {
-
+      this.instance.post("/admin/user/getOnlineSysUser").then(res => {
+        if (res?.data) {
+          this.tableData = res.data
+        }
+      })
+    },
+    handleLogoutTarget(item) {
+      this.$confirm(`是否要登出${item.name}?`).then(() => {
+        const {tokenValue, userKey} = item
+        this.instance.post("/admin/user/kickUserByToken", null, {
+          params: {tokenValue, userKey}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("登出成功!")
+            this.getTableData()
+          }
+        })
+      }).catch(() => 0)
     }
   },
   created() {
@@ -74,16 +94,19 @@ export default {
       font-weight: bold;
       font-size: 20px;
       cursor: pointer;
-      color: rgba(#f46,.6);
+      color: rgba(#f46, .6);
-      &:hover{
+
+      &:hover {
         color: #f46;
       }
     }
-    h4{
+
+    h4 {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
     .dept {
       color: #999;
       font-size: 12px;