111

2024-06-20 19:12:13 +08:00
parent 12f0406a48
commit 4a6e6f4ac4
22 changed files with 509 additions and 204 deletions
--- a/cdTMP/src/views/monitor/operations/index.vue
+++ b/cdTMP/src/views/monitor/operations/index.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="ma-content-block lg:flex justify-between p-4">
+        <div class="lg:w-full w-full lg:ml-4 mt-5 lg:mt-0">
+            <ma-crud :options="crudOptions" :columns="crudColumns" ref="crudRef">
+                <template #create_datetime="{ record }">
+                    {{ record.create_datetime.split(".")[0].replace("T", " ") }}
+                </template>
+                <template #tableBeforeButtons>
+                    <a-button type="primary" status="warning" @click="handleDeleteLogButton">
+                        <template #icon> <icon-delete /> </template>删除7天前数据
+                    </a-button>
+                    <a-button type="primary" status="danger" @click="handleDeleteAllLogButton">
+                        <template #icon> <icon-delete /> </template>删除全部日志
+                    </a-button>
+                </template>
+                <!-- 操作列 -->
+                <template #operationCell="{ record }">
+                    <a-button size="mini" type="primary" status="success" @click="handleSee(record)"
+                        ><icon-eye
+                    /></a-button>
+                </template>
+            </ma-crud>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import logApi from "@/api/monitor/operations"
+import { Message, Notification } from "@arco-design/web-vue"
+const crudRef = ref({})
+// 删除日志按钮事件处理函数
+const handleDeleteLogButton = async () => {
+    const res = await logApi.operationsDelete({ day: 7 }) // 参数：{day:4}保留4天内的日志
+    Message.success(res.message)
+}
+const handleDeleteAllLogButton = async () => {
+    const res = await logApi.operationsDelete({ day: 0 }) // 0表示删除全部日志
+    crudRef.value.refresh()
+    Message.success(res.message)
+}
+// 点击操作：查看【思路打开编辑窗口】
+const handleSee = (record) => {
+    crudRef.value.editAction(record)
+    // 设置表单标题
+    crudRef.value.crudFormRef.actionTitle = "详情"
+}
+// 设置api
+async function editClick() {
+    Notification.error("该详情只能查看")
+}
+const crudOptions = ref({
+    api: logApi.getOperations,
+    edit: { api: editClick, text: "查看操作日志信息", show: false },
+    showIndex: false,
+    showTools: false,
+    pageLayout: "fixed",
+    tablePagination: false,
+    operationColumn: true,
+    operationColumnAlign: "center",
+    bordered: { wrapper: true, cell: true },
+    isDbClickEdit: false,
+    formOption: {
+        viewType: "drawer",
+        width: 600
+    }
+})
+const crudColumns = ref([
+    { title: "ID", dataIndex: "id", addDisplay: false, editDisplay: false, width: 50, hide: true },
+    { title: "操作用户", dataIndex: "request_username", search: true, align: "center" },
+    { title: "请求方式", dataIndex: "request_method", align: "center" },
+    { title: "IP", dataIndex: "request_ip", align: "center" },
+    { title: "浏览器", dataIndex: "request_browser", align: "center" },
+    { title: "响应状态码", dataIndex: "response_code", align: "center" },
+    { title: "操作系统", dataIndex: "request_os", align: "center" },
+    {
+        title: "创建时间",
+        dataIndex: "create_datetime",
+        align: "center",
+        width: 150,
+        addDisplay: false,
+        editDisplay: false
+    },
+    { title: "请求地址", dataIndex: "request_path", hide: true },
+    { title: "请求参数", dataIndex: "request_body", hide: true, formType: "textarea" },
+    { title: "返回信息", dataIndex: "json_result", hide: true, formType: "textarea" }
+])
+</script>
+
+<style lang="less" scoped></style>