inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <a-card :bordered="false">
3     <s-table
4       ref="table"
5       :pagination="false"
6       :loading="loading"
7       :columns="columns"
8       :data="loadData"
9       :rowKey="(record) => record.sessionId"
10       :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
11     >
12       <span slot="lastLoginAddress" slot-scope="text">
13         <ellipsis :length="20" tooltip>{{ text }}</ellipsis>
14       </span>
15       <span slot="lastLoginBrowser" slot-scope="text">
16         <ellipsis :length="20" tooltip>{{ text }}</ellipsis>
17       </span>
18       <span slot="action" slot-scope="text, record">
19         <a-popconfirm v-if="hasPerm('sysOnlineUser:forceExist')" placement="topRight" title="是否强制下线该用户?" @confirm="() => forceExist(record)">
20           <a>强制下线</a>
21         </a-popconfirm>
22       </span>
23     </s-table>
24   </a-card>
25 </template>
26 <script>
27   import { STable, Ellipsis } from '@/components'
28   import { sysOnlineUserForceExist, sysOnlineUserList } from '@/api/modular/system/onlineUserManage'
29   export default {
30     components: {
31       STable,
32       Ellipsis
33     },
34     data () {
35       return {
36         // 查询参数
37         queryParam: {},
38         // 表头
39         columns: [
40           {
41             title: '账号',
42             dataIndex: 'account'
43           },
44           {
45             title: '昵称',
46             dataIndex: 'nickName'
47           },
48           {
49             title: '最后登录IP',
50             dataIndex: 'lastLoginIp'
51           },
52           {
53             title: '最后登录时间',
54             dataIndex: 'lastLoginTime'
55           },
56           {
57             title: '最后登录地址',
58             dataIndex: 'lastLoginAddress',
59             scopedSlots: { customRender: 'lastLoginAddress' }
60           },
61           {
62             title: '最后登录浏览器',
63             dataIndex: 'lastLoginBrowser',
64             scopedSlots: { customRender: 'lastLoginBrowser' }
65           },
66           {
67             title: '最后登录所用系统',
68             dataIndex: 'lastLoginOs'
69           }
70         ],
71         loading: true,
72         loadData: parameter => {
73           return sysOnlineUserList(Object.assign(parameter, this.queryParam)).then((res) => {
74             if (this.hasPerm('sysOnlineUser:list')) {
75               return res.data
76             } else {
77               return new Promise((resolve, reject) => {
78                 return resolve()
79               })
80             }
81           })
82         },
83         selectedRowKeys: [],
84         selectedRows: []
85       }
86     },
87     // 进页面加载
88     created () {
89       if (this.hasPerm('sysOnlineUser:forceExist')) {
90         this.columns.push({
91           title: '操作',
92           width: '150px',
93           dataIndex: 'action',
94           scopedSlots: { customRender: 'action' }
95         })
96       }
97     },
98     methods: {
99       forceExist (record) {
100         sysOnlineUserForceExist(record).then((res) => {
101           if (res.success) {
102             this.$message.success('强制下线成功')
103             // 重新加载表格
104             this.$refs.table.refresh()
105           } else {
106             this.$message.error('强制下线失败:' + res.message)
107           }
108         })
109       },
110       onSelectChange (selectedRowKeys, selectedRows) {
111         this.selectedRowKeys = selectedRowKeys
112         this.selectedRows = selectedRows
113       }
114     }
115   }
116 </script>
117 <style lang="less">
118   .table-operator {
119     margin-bottom: 18px;
120   }
121   button {
122     margin-right: 8px;
123   }
124 </style>