!104 add 新增在线登录设备管理 * update 在线登录设备管理删除权限 * add 新增在线登录设备管理

AprilWind

2024-04-19 8c6cf5bc434f1f236b9a12c45c05636a3903f8c7

!104 add 新增在线登录设备管理
* update 在线登录设备管理删除权限
* add 新增在线登录设备管理

 src/api/monitor/online/index.ts

@@ -18,3 +18,19 @@
    method: 'delete'
  });
}

// èŽ·å–当前用户登录在线设备
export function getOnline() {
  return request({
    url: '/monitor/online',
    method: 'get'
  });
}

// åˆ é™¤å½“前在线设备
export function delOnline(tokenId: string) {
  return request({
    url: '/monitor/online/' + tokenId,
    method: 'post'
  });
}

 src/views/system/user/profile/index.vue

@@ -58,6 +58,9 @@
            <el-tab-pane label="第三方应用" name="thirdParty">
              <thirdParty :auths="state.auths" />
            </el-tab-pane>
            <el-tab-pane label="在线设备" name="onlinDevice">
              <onlinDevice :devices="state.devices" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
@@ -70,8 +73,10 @@
import UserInfo from './userInfo.vue';
import ResetPwd from './resetPwd.vue';
import ThirdParty from './thirdParty.vue';
import OnlinDevice from './onlineDevice.vue';
import { getAuthList } from '@/api/system/social/auth';
import { getUserProfile } from '@/api/system/user';
import { getOnline } from '@/api/monitor/online';
import { UserVO } from '@/api/system/user/types';

const activeTab = ref('userinfo');
@@ -80,12 +85,14 @@
  roleGroup: string;
  postGroup: string;
  auths: any;
  devices: any;
}
const state = ref<State>({
  user: {},
  roleGroup: '',
  postGroup: '',
  auths: []
  auths: [],
  devices: []
});

const userForm = ref({});
@@ -102,9 +109,14 @@
  const res = await getAuthList();
  state.value.auths = res.data;
};
const getOnlines = async () => {
  const res = await getOnline();
  state.value.devices = res.rows;
};

onMounted(() => {
  getUser();
  getAuths();
  getOnlines();
});
</script>

 src/views/system/user/profile/onlineDevice.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,59 @@
<template>
  <div>
    <el-table :data="devices" style="width: 100%; height: 100%; font-size: 10px">
      <el-table-column label="设备类型" align="center">
        <template #default="scope">
          <dict-tag :options="sys_device_type" :value="scope.row.deviceType" />
        </template>
      </el-table-column>
      <el-table-column label="主机" align="center" prop="ipaddr" :show-overflow-tooltip="true" />
      <el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
      <el-table-column label="操作系统" align="center" prop="os" :show-overflow-tooltip="true" />
      <el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
      <el-table-column label="登录时间" align="center" prop="loginTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.loginTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="删除" placement="top">
            <el-button link type="primary" icon="Delete" @click="handldDelOnline(scope.row)">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script name="Online" lang="ts" setup>
import { delOnline } from '@/api/monitor/online';
import { propTypes } from '@/utils/propTypes';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_device_type } = toRefs<any>(proxy?.useDict('sys_device_type'));

const props = defineProps({
  devices: propTypes.any.isRequired
});
const devices = computed(() => props.devices);

/** åˆ é™¤æŒ‰é’®æ“ä½œ */
const handldDelOnline = (row: any) => {
  ElMessageBox.confirm('删除设备后，在该设备登录需要重新进行验证')
    .then(() => {
      return delOnline(row.tokenId);
    })
    .then((res: any) => {
      if (res.code === 200) {
        proxy?.$modal.msgSuccess('删除成功');
        proxy?.$tab.refreshPage();
      } else {
        proxy?.$modal.msgError(res.msg);
      }
    })
    .catch(() => {});
};

</script>