错误日志

src/views/monitor/errorLog/index.vue

+<script setup lang="ts">
+const route = useRoute();
+import {
+  list,
+  delErrLog,
+  cleanErrLog,
+  exportErrLog,
+} from "@/api/monitor/errorLog";
+import { getDataCache, setDataCache } from "@/assets/js/filterData";
+
+defineOptions({
+  name: "Operlog",
+  inheritAttrs: false,
+});
+
+const { proxy } = getCurrentInstance();
+
+const endDatePicker = ref<Boolean>(handelFixDate);
+const clearVisible = ref<Boolean>(false);
+const exportVisible = ref<Boolean>(false);
+const open = ref<Boolean>(false);
+const exportFrom = ref({});
+const loading = ref<Boolean>(true);
+const multiple = ref<Boolean>(true);
+const ids = ref<number[] | undefined>([]);
+const total = ref(0);
+const tableList = ref([]);
+const dateRange = ref([]);
+
+const queryParams = reactive({
+  page: 1,
+  rows: 10,
+  title: "",
+  operName: "",
+  operTime: [],
+});
+const form = reactive({});
+const clearForm = reactive({});
+const exportRule = reactive({
+  month: [{ required: true, message: "请选择月份", trigger: "change" }],
+});
+const clearRule = reactive({
+  month: [{ required: true, message: "请选择月份", trigger: "change" }],
+});
+
+const fromRef = ref(ElForm);
+const clearFormRef = ref(ElForm);
+const exportFromRef = ref(ElForm);
+
+onMounted(() => {
+  Object.assign(queryParams, JSON.parse(getDataCache(route.path)));
+  getList();
+});
+// 清空和导出弹出框的日期选择器禁用当前月份之后的月份
+function handelFixDate() {
+  return {
+    disabledDate(time) {
+      // 如果想蕴含本月本月 - 8.64e7 * t 就不须要了，
+      // 如果想之前的不能抉择把 > 换成 <
+      return time.getTime() > Date.now();
+    },
+  };
+}
+
+/** 查询登录日志列表 */
+function getList() {
+  loading.value = true;
+  list(proxy.$addDateRange(queryParams, dateRange.value)).then((response) => {
+    tableList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+function handleClose() {
+  clearVisible.value = false;
+  exportVisible.value = false;
+}
+
+function timechange(e) {
+  exportFrom.month = e;
+}
+
+/** 查询按钮操作 */
+function handleQuery() {
+  queryParams.page = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  Object.assign(dateRange, []);
+  Object.assign(queryParams, {
+    page: 1,
+    rows: 10,
+    title: "",
+    operName: "",
+    operTime: [],
+  });
+  handleQuery();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.businessId);
+  multiple.value = !selection.length;
+}
+
+/** 删除按钮操作 */
+function handleDelete(data) {
+  ElMessageBox.confirm("是否确认操作？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      const id = data;
+      const query = {
+        deleteIds: id,
+      };
+      return delErrLog(query);
+    })
+    .then(() => {
+      getList();
+      ElMessage.success("删除成功");
+      ids.value = [];
+      multiple.value = true;
+    })
+    .catch(function () {});
+}
+
+function clear() {
+  clearFormRef.value.validate((valid) => {
+    if (valid) {
+      const query = {
+        beginTime: clearForm.month[0],
+        endTime: clearForm.month[1],
+      };
+      cleanErrLog(query).then((res) => {
+        if (res.code === 200) {
+          getList();
+          ElMessage.success("清空成功");
+          clearVisible.value = false;
+        } else {
+          ElMessage.error(res.message);
+        }
+      });
+    }
+  });
+}
+
+/** 清空按钮操作 */
+function handleClean() {
+  clearVisible.value = true;
+  Object.assign(clearForm, {});
+}
+
+function exportSubmit() {
+  exportFromRef.value.validate((valid) => {
+    if (valid) {
+      const query = {
+        beginTime: exportFrom.month[0],
+        endTime: exportFrom.month[1],
+      };
+      return exportErrLog(query).then((response) => {
+        const blob = new Blob([response]);
+        const downloadElement = document.createElement("a");
+        const href = window.URL.createObjectURL(blob); // 创建下载的链接
+        downloadElement.href = href;
+        downloadElement.download = "异常日志" + ".xls"; // 下载后文件名
+        document.body.appendChild(downloadElement);
+        downloadElement.click(); // 点击下载
+        document.body.removeChild(downloadElement); // 下载完成移除元素
+        window.URL.revokeObjectURL(href); // 释放掉blob对象
+        exportVisible.value = false;
+      });
+    }
+  });
+}
+
+function handleView(row) {
+  open.value = true;
+  Object.assign(form, row);
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  exportVisible.value = true;
+  Object.assign(exportFrom, {});
+}
+</script>
+
+<template>
+  <div class="app-container">
+    <div class="search-container">
+      <el-form
+        ref="queryForm"
+        style="padding: 0 0 0 10px"
+        :model="queryParams"
+        :inline="true"
+        label-width="auto"
+      >
+        <el-form-item label="系统模块" prop="title">
+          <el-input
+            v-model="queryParams.title"
+            placeholder="请输入系统模块"
+            clearable
+            style="width: 140px"
+            :maxlength="30"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="用户名称" prop="operName">
+          <el-input
+            v-model="queryParams.operName"
+            placeholder="请输入用户名称"
+            clearable
+            :maxlength="30"
+            style="width: 140px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="操作月份" prop="operTime">
+          <el-date-picker
+            v-model="queryParams.operTime"
+            type="month"
+            style="width: 140px"
+            value-format="YYYY-MM"
+            placeholder="请选择月份"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button class="queryBtn" type="primary" @click="handleQuery"
+            ><i-ep-search />查询</el-button
+          >
+          <el-button class="resetBtn" @click="resetQuery"
+            ><i-ep-refresh />重置</el-button
+          >
+        </el-form-item>
+        <div style="float: right">
+          <el-form-item>
+            <el-button class="clearBtn" type="danger" @click="handleClean"
+              ><i-ep-Delete />清空</el-button
+            >
+            <el-button class="exportBtn" type="success" @click="handleExport"
+              ><i-ep-download />导出</el-button
+            >
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+    <el-card shadow="never" class="table-container">
+      <template #header>
+        <div class="tableTitle">操作日志列表</div>
+      </template>
+      <el-table
+        v-loading="loading"
+        border
+        :data="tableList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="index" width="55" label="序号" align="center" />
+
+        <el-table-column
+          :show-overflow-tooltip="true"
+          label="系统模块"
+          align="center"
+          prop="systemMode"
+        >
+          <template #default="scope">
+            {{ scope.row.systemMode || "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          label="操作信息"
+          align="center"
+          prop="optionName"
+        >
+          <template #default="scope">
+            {{ scope.row.optionName || "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="异常信息"
+          prop="errorMsg"
+          :show-overflow-tooltip="true"
+        >
+          <template #default="scope">
+            {{ scope.row.errorMsg || "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          label="请求方式"
+          align="center"
+          prop="requestMethod"
+        >
+          <template #default="scope">
+            {{ scope.row.requestMethod || "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :show-overflow-tooltip="true"
+          label="用户名称"
+          align="center"
+          prop="operName"
+        >
+          <template #default="scope">
+            {{ scope.row.operName || "-" }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作时间"
+          align="center"
+          prop="operTime"
+          width="180"
+          show-overflow-tooltip
+        >
+          <template #default="scope">
+            <span>{{
+              $transformDateByFormat(scope.row.operTime, "YYYY-MM")
+            }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button
+              class="delBtn"
+              size="mini"
+              type="text"
+              @click="handleView(scope.row, scope.index)"
+              >查看</el-button
+            >
+            <el-button
+              class="delBtn"
+              type="text"
+              size="mini"
+              @click="handleDelete(scope.row.businessId)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        style="float: right"
+        v-show="total > 0"
+        :total="total"
+        v-model:page="queryParams.page"
+        v-model:limit="queryParams.rows"
+        @pagination="getList"
+      />
+    </el-card>
+    <el-dialog title="异常日志信息" v-model="open" width="700px" append-to-body>
+      <el-form ref="formRef" :model="form" label-width="100px" size="mini">
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="系统模块：">{{
+              form.systemMode || "-"
+            }}</el-form-item>
+            <el-form-item label="操作信息：">{{
+              form.optionName || "-"
+            }}</el-form-item>
+            <el-form-item label="请求地址：">{{
+              form.operUrl || "-"
+            }}</el-form-item>
+            <el-form-item label="请求方式：">{{
+              form.requestMethod || "-"
+            }}</el-form-item>
+            <el-form-item label="操作时间：">{{
+              $parseTime(form.operTime) ? $parseTime(form.operTime) : "-"
+            }}</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.operParam || "-"
+            }}</el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item v-if="form.status === 1" label="异常信息：">{{
+              form.errorMsg || "-"
+            }}</el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-dialog>
+    <!--    清空弹窗-->
+    <el-dialog
+      title="选择清空月份"
+      v-model="clearVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form ref="clearFormRef" :model="clearForm" :rules="clearRule">
+        <el-form-item label="月份" prop="month">
+          <el-date-picker
+            v-model="clearForm.month"
+            type="monthrange"
+            range-separator="至"
+            start-placeholder="开始月份"
+            end-placeholder="结束月份"
+            value-format="YYYY_MM"
+            :picker-options="endDatePicker"
+            @change="timechange"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button class="cancelBtn" @click="clearVisible = false"
+            >取 消</el-button
+          >
+          <el-button class="submitBtn" type="primary" @click="clear"
+            >确 定</el-button
+          >
+        </div>
+      </template>
+    </el-dialog>
+    <!--    导出弹窗-->
+    <el-dialog
+      title="选择导出月份"
+      v-model="exportVisible"
+      width="30%"
+      :before-close="handleClose"
+    >
+      <el-form ref="exportFromRef" :model="exportFrom" :rules="exportRule">
+        <el-form-item label="月份" prop="month">
+          <el-date-picker
+            v-model="exportFrom.month"
+            type="monthrange"
+            range-separator="至"
+            start-placeholder="开始月份"
+            end-placeholder="结束月份"
+            value-format="YYYY_MM"
+            :picker-options="endDatePicker"
+            @change="timechange"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="exportVisible = false">取 消</el-button>
+          <el-button type="primary" @click="exportSubmit">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

src/views/monitor/operLog/index.vue

@@ -30,8 +30,9 @@ const dateRange = ref([]);
 const queryParams = reactive({
   page: 1,
   rows: 10,
-  username: "",
-  loginTime: "",
+  title: "",
+  operName: "",
+  operTime: [],
 });
 const form = reactive({});
 const clearForm = reactive({});
@@ -89,8 +90,9 @@ function resetQuery() {
   Object.assign(queryParams, {
     page: 1,
     rows: 10,
-    username: "",
-    loginTime: "",
+    title: "",
+    operName: "",
+    operTime: [],
   });
   handleQuery();
 }