在线用户

src/api/monitor/online.ts

@@ -0,0 +1,31 @@
+import { http } from '@/utils/http/axios';
+
+/**
+ * @description: 列表
+ */
+export function getOnlineList(params?) {
+  return http.request({
+    url: '/online/list',
+    method: 'GET',
+    params,
+  });
+}
+/**
+ * @description: 强退
+ */
+export function onlineOut(id) {
+  return http.request({
+    url: '/online/logout/'+id,
+    method: 'DELETE',
+  });
+}
+/**
+ * @description: 批量删除
+ */
+export function dataSourceBatchDelete(data:any) {
+    return http.request({
+      url: '/data/source/batchDelete',
+      method: 'DELETE',
+      data
+    });
+  }

src/components/pagination/index.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="pagination">
+        <el-pagination
+            v-bind="props"
+            :pager-count="5"
+            v-model:currentPage="pager.page"
+            v-model:pageSize="pager.size"
+            :layout="layout"
+            :total="pager.count"
+            :hide-on-single-page="false"
+            @size-change="sizeChange"
+            @current-change="pageChange"
+        ></el-pagination>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {computed} from "vue";
+
+interface Props {
+    modelValue?: Record<string, any>
+    layout?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+    modelValue: () => ({}),
+    layout: 'total, prev,sizes, pager, next, jumper'
+})
+
+const emit = defineEmits<{
+    (event: 'change'): void
+    (event: 'update:modelValue', value: any): void
+}>()
+
+const pager = computed({
+    get() {
+        return props.modelValue
+    },
+    set(value) {
+        emit('update:modelValue', value)
+    }
+})
+const sizeChange = () => {
+    pager.value.page = 1
+    emit('change')
+}
+const pageChange = () => {
+    emit('change')
+}
+</script>

src/plugins/customComponents.ts

@@ -1,5 +1,6 @@
 import { PageWrapper, PageFooter } from '@/components/Page';
 import NumberInput from '@/components/numberInput/index.vue';
+import pagination from '@/components/pagination/index.vue';
 import icon from '@/components/icon/index.vue';
 import { BasicTable } from '@/components/Table';
 import { BasicForm } from '@/components/Form/index';
@@ -11,6 +12,7 @@ export function setupCustomComponents(app) {
   app.component('PageWrapper', PageWrapper);
   app.component('PageFooter', PageFooter);
   app.component('NumberInput',NumberInput)
+  app.component('pagination',pagination)
   app.component('icon',icon)
   app.component('BasicTable',BasicTable)
   app.component('BasicForm',BasicForm)

src/views/content/link/edit.vue

@@ -28,7 +28,7 @@
       :rules="{ required: true, message: '请选择类型', trigger: 'change' }">
           <el-select
               v-model="formData.type"
-              placeholder="请选择邮件类型"
+              placeholder="请选择类型"
           >
             <el-option label="友情链接" :value="1"></el-option>
             <el-option label="合作伙伴" :value="2"></el-option>
@@ -92,9 +92,9 @@ const formRef = shallowRef<FormInstance>();
 const formData = reactive({
   id: "",
   name: "",
-  type: 1,
+  type: "",
   url: "",
-  form: 1,
+  form: "",
   image: "",
   status:1,
   sort: 0

src/views/monitor/online/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <PageWrapper>
+    <el-card :bordered="false" class="pt-3 mb-3 proCard">
+      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset"></BasicForm>
+    </el-card>
+    <el-card :bordered="false" class="proCard">
+      <el-table empty-text="暂无数据" border
+      :height="fwbHeight"
+        :data="onlineTableData.slice((pager.page - 1) * pager.size, pager.page * pager.size)" row-key="detailId">
+        <el-table-column type="index"width="80" align="center" label="序号"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" label="会话编号" prop="tokenId"min-width="100"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" label="登录名称" prop="username"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" label="部门名称" prop="deptName"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" label="IP地址" prop="ipAddr"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" label="登录地点" prop="loginLocation"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" label="浏览器" prop="browser"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" label="操作系统" prop="os"></el-table-column>
+        <el-table-column show-overflow-tooltip align="center" label="登录时间" prop="loginTime"></el-table-column>
+        <el-table-column align="center" label="操作" width="100" fixed="right">
+          <template #default="{ row, $index }">
+            <el-button @click="handleDelete(row)" type="danger">强退</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination style="justify-content: flex-end" class="mt-10 flex" v-model="pager" />
+    </el-card>
+  </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from 'vue';
+import { ColProps } from 'element-plus';
+import { schemas } from './querySchemas';
+import { useForm } from '@/components/Form/index';
+import { getOnlineList, onlineOut } from '@/api/monitor/online';
+import { message, confirm } from "@/utils/auth";
+const onlineTableData = ref([])
+const formParams = reactive({
+  ipAddr: '',
+  username: ''
+});
+const pager = ref({
+  page: 1,
+  size: 10,
+  count: onlineTableData.value.length
+});
+const fwbHeight = document.body.clientHeight - 370
+const loadTable = async () => {
+  onlineTableData.value = await getOnlineList({ ...formParams });
+  pager.value.count = onlineTableData.value.length;
+}
+const [register, { }] = useForm({
+  labelWidth: 80,
+  layout: 'horizontal',
+  colProps: { span: 6 } as ColProps,
+  submitOnReset: true,
+  schemas
+});
+function handleSubmit(values: Recordable) {
+  handleReset()
+  for (const key in values) {
+    formParams[key] = values[key]
+  }
+  loadTable();
+}
+
+function handleReset() {
+  for (const key in formParams) {
+    formParams[key] = '';
+  }
+  pager.value.page = 1;
+}
+
+async function handleDelete(row) {
+  await confirm('确定要强退？');
+  await onlineOut(row.tokenId)
+  message("强退成功");
+  loadTable()
+}
+onMounted(() => {
+  loadTable()
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/monitor/online/querySchemas.ts

@@ -0,0 +1,19 @@
+import { FormSchema } from '@/components/Form/index';
+export const schemas: FormSchema[] = [
+  {
+    field: 'ipAddr',
+    component: 'Input',
+    label: '登录IP',
+    componentProps: {
+      placeholder: '请输入登录IP',
+    },
+  },
+  {
+    field: 'username',
+    component: 'Input',
+    label: '登录账号',
+    componentProps: {
+      placeholder: '请输入登录账号',
+    },
+  },
+];