From e63228dd54129be3e486fd6f490261369a7106fc Mon Sep 17 00:00:00 2001
From: ailanyin <ailanyin4j@163.com>
Date: Wed, 5 Jul 2023 15:06:22 +0800
Subject: [PATCH] add

---
 src/api/monitor/useLog.js          |  29 +++
 src/constant/dict.js               |  61 +++++
 src/views/monitor/useLog/index.vue | 367 +++++++++++++++++++++++++++++
 3 files changed, 457 insertions(+)
 create mode 100644 src/api/monitor/useLog.js
 create mode 100644 src/views/monitor/useLog/index.vue

diff --git a/src/api/monitor/useLog.js b/src/api/monitor/useLog.js
new file mode 100644
index 0000000..8178c7f
--- /dev/null
+++ b/src/api/monitor/useLog.js
@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+// 查询操作日志列表
+export function list(query) {
+  return request({
+    url: '/monitor/useLog/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除操作日志
+export function delOperlog(ids) {
+  return request({
+    url: '/monitor/useLog',
+    method: 'delete',
+    data: {
+      ids: ids
+    }
+  })
+}
+
+// 清空操作日志
+export function cleanOperlog() {
+  return request({
+    url: '/monitor/useLog/clean',
+    method: 'delete'
+  })
+}
diff --git a/src/constant/dict.js b/src/constant/dict.js
index 7538a00..331036e 100644
--- a/src/constant/dict.js
+++ b/src/constant/dict.js
@@ -11,6 +11,19 @@ export const sys_normal_disable = [
   },
 ];
 
+export const sys_common_status = [
+  {
+    label: "成功",
+    value: "1",
+    elTagType: "success",
+  },
+  {
+    label: "失败",
+    value: "0",
+    elTagType: "danger",
+  },
+];
+
 export const sys_user_gender = [
   {
     label: "男",
@@ -74,6 +87,54 @@ export const database_type_dict = [
   },
 ];
 
+export const sys_oper_type = [
+  {
+    label: "新增",
+    value: "1",
+    elTagType: "info",
+  },
+  {
+    label: "修改",
+    value: "2",
+    elTagType: "info",
+  },
+  {
+    label: "删除",
+    value: "3",
+    elTagType: "danger",
+  },
+  {
+    label: "授权",
+    value: "4",
+    elTagType: "primary",
+  },
+  {
+    label: "导出",
+    value: "5",
+    elTagType: "warning",
+  },
+  {
+    label: "导入",
+    value: "6",
+    elTagType: "warning",
+  },
+  {
+    label: "强退",
+    value: "7",
+    elTagType: "danger",
+  },
+  {
+    label: "生成代码",
+    value: "8",
+    elTagType: "info",
+  },
+  {
+    label: "清空数据",
+    value: "9",
+    elTagType: "danger",
+  },
+];
+
 export const tenantModeDict = [
   {
     label: "字段",
diff --git a/src/views/monitor/useLog/index.vue b/src/views/monitor/useLog/index.vue
new file mode 100644
index 0000000..2354e56
--- /dev/null
+++ b/src/views/monitor/useLog/index.vue
@@ -0,0 +1,367 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="系统模块" prop="title">
+        <el-input
+          v-model="queryParams.title"
+          placeholder="请输入系统模块"
+          clearable
+          style="width: 240px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="操作人员" prop="operatorName">
+        <el-input
+          v-model="queryParams.operatorName"
+          placeholder="请输入操作人员"
+          clearable
+          style="width: 240px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="类型" prop="businessType">
+        <el-select
+          v-model="queryParams.businessType"
+          placeholder="操作类型"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in sys_oper_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="操作状态"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in sys_common_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作时间" style="width: 308px">
+        <el-date-picker
+          v-model="dateRange"
+          value-format="YYYY-MM-DD"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['monitor:useLog:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          @click="handleClean"
+          v-hasPermi="['monitor:useLog:remove']"
+          >清空</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['monitor:useLog:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      ref="useLogRef"
+      v-loading="loading"
+      :data="useLogList"
+      @selection-change="handleSelectionChange"
+      :default-sort="defaultSort"
+      @sort-change="handleSortChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="日志编号" align="center" prop="id" />
+      <el-table-column label="系统模块" align="center" prop="title" />
+      <el-table-column label="操作类型" align="center" prop="businessType">
+        <template #default="scope">
+          <dict-tag :options="sys_oper_type" :value="scope.row.businessType" />
+        </template>
+      </el-table-column>
+      <el-table-column label="请求方式" align="center" prop="requestMethod" />
+      <el-table-column
+        label="操作人员"
+        align="center"
+        prop="operatorName"
+        :show-overflow-tooltip="true"
+        sortable="custom"
+        :sort-orders="['descending', 'ascending']"
+        width="100"
+      />
+      <el-table-column
+        label="主机"
+        align="center"
+        prop="ip"
+        width="130"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column label="操作状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :options="sys_common_status" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作日期"
+        align="center"
+        prop="operationTime"
+        sortable="custom"
+        :sort-orders="['descending', 'ascending']"
+        width="180"
+      >
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.operationTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template #default="scope">
+          <el-button
+            type="text"
+            icon="View"
+            @click="handleView(scope.row, scope.index)"
+            v-hasPermi="['monitor:useLog:query']"
+            >详细</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 操作日志详细 -->
+    <el-dialog title="操作日志详细" v-model="open" width="700px" append-to-body>
+      <el-form :model="form" label-width="100px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="操作模块："
+              >{{ form.title }} / {{ typeFormat(form) }}</el-form-item
+            >
+            <el-form-item label="登录信息："
+              >{{ form.operatorName }} / {{ form.ip }} /
+              {{ form.operationLocation }}</el-form-item
+            >
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="请求地址：">{{ form.url }}</el-form-item>
+            <el-form-item label="请求方式：">{{
+              form.requestMethod
+            }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="请求参数：">{{
+              form.operationParam
+            }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="返回参数：">{{
+              form.jsonResult
+            }}</el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作状态：">
+              <div v-if="form.status === 0">正常</div>
+              <div v-else-if="form.status === 1">失败</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="操作时间：">{{
+              parseTime(form.operationTime)
+            }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="异常信息：" v-if="form.status === 1">{{
+              form.errorMsg
+            }}</el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="open = false">关 闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Operlog">
+import { list, delOperlog, cleanOperlog } from "@/api/monitor/useLog";
+
+import { sys_oper_type,sys_common_status } from "@/constant/dict";
+
+const { proxy } = getCurrentInstance();
+
+const useLogList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+const dateRange = ref([]);
+const defaultSort = ref({ prop: "operationTime", order: "descending" });
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    title: undefined,
+    operatorName: undefined,
+    businessType: undefined,
+    status: undefined,
+  },
+});
+
+const { queryParams, form } = toRefs(data);
+
+/** 查询登录日志 */
+function getList() {
+  loading.value = true;
+  list(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (response) => {
+      useLogList.value = response.rows;
+      total.value = response.total;
+      loading.value = false;
+    }
+  );
+}
+/** 操作日志类型字典翻译 */
+function typeFormat(row, column) {
+  return proxy.selectDictLabel(sys_oper_type.value, row.businessType);
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = [];
+  proxy.resetForm("queryRef");
+  proxy.$refs["useLogRef"].sort(
+    defaultSort.value.prop,
+    defaultSort.value.order
+  );
+  handleQuery();
+}
+/** 多选框选中数据 */
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.id);
+  multiple.value = !selection.length;
+}
+/** 排序触发事件 */
+function handleSortChange(column, prop, order) {
+  queryParams.value.orderByColumn = column.prop;
+  queryParams.value.isAsc = column.order;
+  getList();
+}
+/** 详细按钮操作 */
+function handleView(row) {
+  open.value = true;
+  form.value = row;
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const deleteIds = row.id || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除日志编号为"' + deleteIds + '"的数据项?')
+    .then(function () {
+      return delOperlog(deleteIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+/** 清空按钮操作 */
+function handleClean() {
+  proxy.$modal
+    .confirm("是否确认清空所有操作日志数据项?")
+    .then(function () {
+      return cleanOperlog();
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("清空成功");
+    })
+    .catch(() => {});
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download(
+    "monitor/useLog/export",
+    {
+      ...queryParams.value,
+    },
+    `操作日志_${new Date().getTime()}.xlsx`
+  );
+}
+
+getList();
+</script>