fix: 登录日志改为新样式

src/api/monitor/LogApi.ts

@@ -8,6 +8,7 @@ enum Api {
   LogEdit = '/sys/log/edit',
   LogRemove = '/sys/log/removeByIds',
   LogExport = '/sys/log/export/operation',
+  LogLoginExport = '/sys/log/export/login',
 }
 
 /**
@@ -137,3 +138,11 @@ export const LogRemove = (params: Array<string | number>) => {
 export const LogExport = (params: Array<string | number>) => {
   return defHttp.post({ url: Api.LogExport, params: params });
 };
+
+/**
+ * @description: 导出登录/等出,权限 - sys:log:export:login
+ * @method: POST
+ */
+export const LogLoginExport = (params: Array<string | number>) => {
+  return defHttp.post({ url: Api.LogLoginExport, params: params });
+};

src/views/monitor/loginLog/index.vue

@@ -1,5 +1,18 @@
 <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">
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'type'">
@@ -44,18 +57,6 @@
           />
         </template>
       </template>
-      <template #toolbar>
-        <Button type="primary" @click="handleImport"> 导入 </Button>
-        <Button
-          v-auth="['sys:log:remove']"
-          type="primary"
-          danger
-          @click="handleDelete(null)"
-          preIcon="icon-delete|iconfont"
-        >
-          批量删除
-        </Button>
-      </template>
     </BasicTable>
     <FormDrawer @register="registerDrawer" @success="handleSuccess" />
     <ViewDrawer @register="registerDrawerView" @success="handleSuccess" />
@@ -65,40 +66,63 @@
 <script lang="ts" setup>
   import { onBeforeMount, ref } from '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 FormDrawer from './formDrawer.vue';
   import ViewDrawer from './viewDrawer.vue';
   import importView from './importModal/importView.vue';
   import { columns, searchFormSchema } from './data';
 
-  import { LogQueryPage, LogRemove } from '/@/api/monitor/LogApi';
+  import { LogQueryPage, LogRemove, LogLoginExport } from '/@/api/monitor/LogApi';
   import { listDictModel } from '/@/api/common';
   import { formatDictColor, formatDictValue } from '/@/utils'; //
   import { useDrawer } from '/@/components/Drawer';
+
+  import { XTTitle } from '/@/components/XTTitle/index';
+  import { XTTab } from '/@/components/XTTab/index';
+  import { XTForm } from '/@/components/XTForm/index';
   import { useModal } from '/@/components/Modal';
-  import { useAppStore } from '/@/store/modules/app';
 
+  // 标题组件右侧按钮
+  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 responseTypeOptions = ref();
   const resultJsonOptions = ref();
-  const useApp = useAppStore();
-  console.log(useApp.getMenuSetting);
+  // tab 切换选中
+  const tabSelected = ref();
   onBeforeMount(async () => {
     typeOptions.value = await listDictModel({ dictCode: 'sys_login_log_type' });
     responseTypeOptions.value = await listDictModel({ dictCode: 'sys_response_type' });
     resultJsonOptions.value = await listDictModel({ dictCode: 'sys_response_type' });
+    typeOptions.value = typeOptions.value.map(ele => {
+      ele.key = ele.value;
+      return ele;
+    });
+    tabSelected.value = typeOptions.value[0].value;
   });
-
   const { createConfirm, createMessage } = useMessage();
   const [registerModal, { openModal }] = useModal();
   const [registerDrawer] = useDrawer(); // , { openDrawer }
   const [registerDrawerView, { openDrawer: openDrawerView }] = useDrawer();
 
+  // 操作名称
+  const opName = ref('');
+
   const tableSort = ref([
     {
       field: 'create_time',
@@ -109,6 +133,10 @@
   const [registerTable, { reload, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
     title: '',
     api: LogQueryPage,
+    batchDelApi: LogRemove,
+    batchExportApi: LogLoginExport,
+    exportAuthList: ['sys:log:export:login'],
+    delAuthList: ['sys:log:remove'],
     rowKey: 'id',
     columns,
     showIndexColumn: true,
@@ -143,18 +171,11 @@
     });
   }
 
+  // 导入按钮
   function handleImport() {
     openModal(true);
   }
 
-  //   // 编辑按钮事件
-  //   function handleEdit(record: Recordable) {
-  //     openDrawer(true, {
-  //       record,
-  //       isUpdate: true,
-  //     });
-  //   }
-
   // 删除按钮事件
   async function handleDelete(record: Recordable) {
     if (record) {
@@ -194,7 +215,7 @@
 
   // 表格请求之前，对参数进行处理, 添加默认 排序
   function handleBeforeFetch(params) {
-    return { ...params, orders: tableSort.value };
+    return { ...params, orders: tableSort.value, type: tabSelected.value, opName: opName.value };
   }
 
   // 弹窗回调事件
@@ -203,4 +224,14 @@
     console.log(values);
     await reload();
   }
+
+  // 组件回调
+  async function callTab(data) {
+    tabSelected.value = data.value;
+    await reload();
+  }
+  async function callForm(data) {
+    opName.value = data.opName;
+    await reload();
+  }
 </script>

src/views/monitor/operLog/index.vue

@@ -42,7 +42,7 @@
                 onClick: handleView.bind(null, record),
               },
               {
-                auth: 'sys:log:remove	',
+                auth: 'sys:log:remove',
                 icon: 'icon-delete|iconfont',
                 tooltip: '删除',
                 label: '删除',
@@ -57,17 +57,6 @@
           />
         </template>
       </template>
-      <template #toolbar>
-        <Button
-          v-auth="['sys:log:remove']"
-          type="primary"
-          danger
-          @click="handleDelete(null)"
-          preIcon="icon-delete|iconfont"
-        >
-          批量删除
-        </Button>
-      </template>
     </BasicTable>
     <FormDrawer @register="registerDrawer" @success="handleSuccess" />
     <ViewDrawer @register="registerDrawerView" @success="handleSuccess" />
@@ -76,11 +65,8 @@
 <script lang="ts" setup>
   import { onBeforeMount, ref } from 'vue';
   import { Tag } from 'ant-design-vue';
-  import { Button } from '/@/components/Button';
-
   import { BasicTable, useTable, TableAction } from '/@/components/TableCard';
 
-  // import { useModal } from '/@/components/Modal';
   import { useMessage } from '/@/hooks/web/useMessage';
   import FormDrawer from './formDrawer.vue';
   import ViewDrawer from './viewDrawer.vue';
@@ -139,8 +125,8 @@
   const [registerTable, { reload, getSelectRowKeys }] = useTable({
     api: LogQueryPage,
     batchDelApi: LogRemove,
-    batchExportApi: LogExport, // 目前调用的是删除接口
-    exportAuthList: ['sys:log:export:login:operation'],
+    batchExportApi: LogExport,
+    exportAuthList: ['sys:log:export:operation'],
     delAuthList: ['sys:log:remove'],
     rowKey: 'id',
     columns,
@@ -163,21 +149,6 @@
     });
   }
 
-  //   // 新增按钮事件
-  //   function handleCreate() {
-  //     openDrawer(true, {
-  //       isUpdate: false,
-  //     });
-  //   }
-
-  //   // 编辑按钮事件
-  //   function handleEdit(record: Recordable) {
-  //     openDrawer(true, {
-  //       record,
-  //       isUpdate: true,
-  //     });
-  //   }
-
   // 删除按钮事件
   async function handleDelete(record: Recordable) {
     if (record) {
@@ -224,6 +195,7 @@
 
   // 组件回调
   async function callTab(data) {
+    debugger;
     tabSelected.value = data.value;
     await reload();
   }