|
@@ -1,5 +1,18 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div>
|
|
|
|
|
|
|
+ <div class="m-4">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <XTTitle title="登录日志" :go-back="true" :right-data="titleData" @click="handleImport" />
|
|
|
|
|
+ <div class="flex items-center justify-between my-4">
|
|
|
|
|
+ <XTTab
|
|
|
|
|
+ type="opLog"
|
|
|
|
|
+ :width="120"
|
|
|
|
|
+ :selected="tabSelected"
|
|
|
|
|
+ :data="typeOptions"
|
|
|
|
|
+ @item-click="callTab"
|
|
|
|
|
+ />
|
|
|
|
|
+ <XTForm :form-data="formData" @change="callForm" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
<BasicTable @register="registerTable">
|
|
<BasicTable @register="registerTable">
|
|
|
<template #bodyCell="{ column, record }">
|
|
<template #bodyCell="{ column, record }">
|
|
|
<template v-if="column.key === 'type'">
|
|
<template v-if="column.key === 'type'">
|
|
@@ -44,63 +57,62 @@
|
|
|
/>
|
|
/>
|
|
|
</template>
|
|
</template>
|
|
|
</template>
|
|
</template>
|
|
|
- <template #toolbar>
|
|
|
|
|
- <!-- <Button
|
|
|
|
|
- v-auth="['sys:log:add']"
|
|
|
|
|
- type="primary"
|
|
|
|
|
- @click="handleCreate"
|
|
|
|
|
- preIcon="icon-plus|iconfont"
|
|
|
|
|
- >
|
|
|
|
|
- 新增
|
|
|
|
|
- </Button> -->
|
|
|
|
|
- <Button
|
|
|
|
|
- v-auth="['sys:log:remove']"
|
|
|
|
|
- type="primary"
|
|
|
|
|
- danger
|
|
|
|
|
- @click="handleDelete(null)"
|
|
|
|
|
- preIcon="icon-delete|iconfont"
|
|
|
|
|
- >
|
|
|
|
|
- 批量删除
|
|
|
|
|
- </Button>
|
|
|
|
|
- </template>
|
|
|
|
|
</BasicTable>
|
|
</BasicTable>
|
|
|
<FormDrawer @register="registerDrawer" @success="handleSuccess" />
|
|
<FormDrawer @register="registerDrawer" @success="handleSuccess" />
|
|
|
<ViewDrawer @register="registerDrawerView" @success="handleSuccess" />
|
|
<ViewDrawer @register="registerDrawerView" @success="handleSuccess" />
|
|
|
|
|
+ <importView @register="registerModal" />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
|
import { onBeforeMount, ref } from 'vue';
|
|
import { onBeforeMount, ref } from 'vue';
|
|
|
import { Tag } from 'ant-design-vue';
|
|
import { Tag } from 'ant-design-vue';
|
|
|
- import { Button } from '/@/components/Button';
|
|
|
|
|
-
|
|
|
|
|
- import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
|
|
|
|
-
|
|
|
|
|
- // import { useModal } from '/@/components/Modal';
|
|
|
|
|
|
|
+ import { BasicTable, useTable, TableAction } from '/@/components/TableCard';
|
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
import FormDrawer from './formDrawer.vue';
|
|
import FormDrawer from './formDrawer.vue';
|
|
|
import ViewDrawer from './viewDrawer.vue';
|
|
import ViewDrawer from './viewDrawer.vue';
|
|
|
- import { columns, searchFormSchema } from './data';
|
|
|
|
|
|
|
+ import importView from './importModal/importView.vue';
|
|
|
|
|
+ import { columns } from './data';
|
|
|
|
|
|
|
|
- import { LogQueryPage, LogRemove } from '/@/api/monitor/LogApi';
|
|
|
|
|
|
|
+ import { LogQueryPage, LogRemove, LogLoginExport } from '/@/api/monitor/LogApi';
|
|
|
import { listDictModel } from '/@/api/common';
|
|
import { listDictModel } from '/@/api/common';
|
|
|
import { formatDictColor, formatDictValue } from '/@/utils'; //
|
|
import { formatDictColor, formatDictValue } from '/@/utils'; //
|
|
|
import { useDrawer } from '/@/components/Drawer';
|
|
import { useDrawer } from '/@/components/Drawer';
|
|
|
|
|
|
|
|
- import { useAppStore } from '/@/store/modules/app';
|
|
|
|
|
|
|
+ import { XTTitle } from '/@/components/XTTitle/index';
|
|
|
|
|
+ import { XTTab } from '/@/components/XTTab/index';
|
|
|
|
|
+ import { XTForm } from '/@/components/XTForm/index';
|
|
|
|
|
+ import { useModal } from '/@/components/Modal';
|
|
|
|
|
|
|
|
|
|
+ // 标题组件右侧按钮
|
|
|
|
|
+ const titleData = [
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 'import',
|
|
|
|
|
+ icon: 'icon-xt-import_default',
|
|
|
|
|
+ },
|
|
|
|
|
+ ];
|
|
|
|
|
+ // formdata
|
|
|
|
|
+ const formData = [
|
|
|
|
|
+ {
|
|
|
|
|
+ name: 'opName',
|
|
|
|
|
+ componentType: 'Input',
|
|
|
|
|
+ placeholder: '请输入操作名称',
|
|
|
|
|
+ width: 200,
|
|
|
|
|
+ prefix: 'icon-xt-search',
|
|
|
|
|
+ },
|
|
|
|
|
+ ];
|
|
|
const typeOptions = ref();
|
|
const typeOptions = ref();
|
|
|
const responseTypeOptions = ref();
|
|
const responseTypeOptions = ref();
|
|
|
const resultJsonOptions = ref();
|
|
const resultJsonOptions = ref();
|
|
|
- const useApp = useAppStore();
|
|
|
|
|
- console.log(useApp.getMenuSetting);
|
|
|
|
|
|
|
+ // 操作名称
|
|
|
|
|
+ const opName = ref('');
|
|
|
|
|
+ // tab 切换选中
|
|
|
|
|
+ const tabSelected = ref();
|
|
|
onBeforeMount(async () => {
|
|
onBeforeMount(async () => {
|
|
|
- typeOptions.value = await listDictModel({ dictCode: 'sys_login_log_type' });
|
|
|
|
|
responseTypeOptions.value = await listDictModel({ dictCode: 'sys_response_type' });
|
|
responseTypeOptions.value = await listDictModel({ dictCode: 'sys_response_type' });
|
|
|
resultJsonOptions.value = await listDictModel({ dictCode: 'sys_response_type' });
|
|
resultJsonOptions.value = await listDictModel({ dictCode: 'sys_response_type' });
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
const { createConfirm, createMessage } = useMessage();
|
|
const { createConfirm, createMessage } = useMessage();
|
|
|
- // const [registerModal, { openModal }] = useModal();
|
|
|
|
|
|
|
+ const [registerModal, { openModal }] = useModal();
|
|
|
const [registerDrawer] = useDrawer(); // , { openDrawer }
|
|
const [registerDrawer] = useDrawer(); // , { openDrawer }
|
|
|
const [registerDrawerView, { openDrawer: openDrawerView }] = useDrawer();
|
|
const [registerDrawerView, { openDrawer: openDrawerView }] = useDrawer();
|
|
|
|
|
|
|
@@ -111,16 +123,19 @@
|
|
|
},
|
|
},
|
|
|
]) as any;
|
|
]) as any;
|
|
|
|
|
|
|
|
- const [registerTable, { reload, getSelectRowKeys }] = useTable({
|
|
|
|
|
|
|
+ const [registerTable, { reload, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
|
|
|
title: '',
|
|
title: '',
|
|
|
api: LogQueryPage,
|
|
api: LogQueryPage,
|
|
|
|
|
+ batchDelApi: LogRemove,
|
|
|
|
|
+ batchExportApi: LogLoginExport,
|
|
|
|
|
+ exportAuthList: ['sys:log:export:login'],
|
|
|
|
|
+ delAuthList: ['sys:log:remove'],
|
|
|
rowKey: 'id',
|
|
rowKey: 'id',
|
|
|
columns,
|
|
columns,
|
|
|
showIndexColumn: true,
|
|
showIndexColumn: true,
|
|
|
rowSelection: { type: 'checkbox' },
|
|
rowSelection: { type: 'checkbox' },
|
|
|
formConfig: {
|
|
formConfig: {
|
|
|
labelWidth: 120,
|
|
labelWidth: 120,
|
|
|
- schemas: searchFormSchema,
|
|
|
|
|
autoSubmitOnEnter: true,
|
|
autoSubmitOnEnter: true,
|
|
|
baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
|
|
baseColProps: { xs: 24, sm: 12, md: 12, lg: 8 },
|
|
|
resetButtonOptions: {
|
|
resetButtonOptions: {
|
|
@@ -148,20 +163,10 @@
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- // // 新增按钮事件
|
|
|
|
|
- // function handleCreate() {
|
|
|
|
|
- // openDrawer(true, {
|
|
|
|
|
- // isUpdate: false,
|
|
|
|
|
- // });
|
|
|
|
|
- // }
|
|
|
|
|
-
|
|
|
|
|
- // // 编辑按钮事件
|
|
|
|
|
- // function handleEdit(record: Recordable) {
|
|
|
|
|
- // openDrawer(true, {
|
|
|
|
|
- // record,
|
|
|
|
|
- // isUpdate: true,
|
|
|
|
|
- // });
|
|
|
|
|
- // }
|
|
|
|
|
|
|
+ // 导入按钮
|
|
|
|
|
+ function handleImport() {
|
|
|
|
|
+ openModal(true);
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
// 删除按钮事件
|
|
// 删除按钮事件
|
|
|
async function handleDelete(record: Recordable) {
|
|
async function handleDelete(record: Recordable) {
|
|
@@ -170,16 +175,21 @@
|
|
|
createMessage.success('删除成功!');
|
|
createMessage.success('删除成功!');
|
|
|
await reload();
|
|
await reload();
|
|
|
} else {
|
|
} else {
|
|
|
- createConfirm({
|
|
|
|
|
- content: '你确定要删除?',
|
|
|
|
|
- iconType: 'warning',
|
|
|
|
|
- onOk: async () => {
|
|
|
|
|
- const keys = getSelectRowKeys();
|
|
|
|
|
- await LogRemove(keys);
|
|
|
|
|
- createMessage.success('删除成功!');
|
|
|
|
|
- await reload();
|
|
|
|
|
- },
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ const keys = getSelectRowKeys();
|
|
|
|
|
+ if (keys.length > 0) {
|
|
|
|
|
+ createConfirm({
|
|
|
|
|
+ content: '你确定要删除?',
|
|
|
|
|
+ iconType: 'warning',
|
|
|
|
|
+ onOk: async () => {
|
|
|
|
|
+ await LogRemove(keys);
|
|
|
|
|
+ createMessage.success('删除成功!');
|
|
|
|
|
+ await reload();
|
|
|
|
|
+ clearSelectedRowKeys();
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ createMessage.warning('请选择要删除的数据');
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
// 表格点击字段排序
|
|
// 表格点击字段排序
|
|
@@ -196,8 +206,16 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 表格请求之前,对参数进行处理, 添加默认 排序
|
|
// 表格请求之前,对参数进行处理, 添加默认 排序
|
|
|
- function handleBeforeFetch(params) {
|
|
|
|
|
- return { ...params, orders: tableSort.value };
|
|
|
|
|
|
|
+ async function handleBeforeFetch(params) {
|
|
|
|
|
+ if (!typeOptions.value && !tabSelected.value) {
|
|
|
|
|
+ typeOptions.value = await listDictModel({ dictCode: 'sys_login_log_type' });
|
|
|
|
|
+ typeOptions.value = typeOptions.value.map(ele => {
|
|
|
|
|
+ ele.key = ele.value;
|
|
|
|
|
+ return ele;
|
|
|
|
|
+ });
|
|
|
|
|
+ tabSelected.value = typeOptions.value[0].value;
|
|
|
|
|
+ }
|
|
|
|
|
+ return { ...params, orders: tableSort.value, type: tabSelected.value, opName: opName.value };
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 弹窗回调事件
|
|
// 弹窗回调事件
|
|
@@ -206,4 +224,14 @@
|
|
|
console.log(values);
|
|
console.log(values);
|
|
|
await reload();
|
|
await reload();
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ // 组件回调
|
|
|
|
|
+ async function callTab(data) {
|
|
|
|
|
+ tabSelected.value = data.value;
|
|
|
|
|
+ await reload();
|
|
|
|
|
+ }
|
|
|
|
|
+ async function callForm(data) {
|
|
|
|
|
+ opName.value = data.opName;
|
|
|
|
|
+ await reload();
|
|
|
|
|
+ }
|
|
|
</script>
|
|
</script>
|