新增操作日志模块

src/layout/SidevarItem.vue

@@ -40,7 +40,6 @@
           <template #title>{{ i.name }}</template>
         </el-menu-item>
       </div>
-
       <!-- <el-menu-item index="/dataOverview">
         <SvgIcon name="dataOverview" color="#fff" size="22"></SvgIcon>
         <template #title>数据总览</template>

src/router/index.js

@@ -18,6 +18,11 @@ const routes = [
     path: "/",
     redirect: "/login",
   },
+  {
+    path: "/log",
+    component: () => import("@/views/log/log.vue"),
+    meta: { title: "", icon: "", showHeader: true },
+  },
   // {
   //   path: "/:pathMatch(.*)*",
   //   redirect: "/404",

src/stores/index.js

@@ -223,6 +223,23 @@ export const useCounterStore = defineStore("user", {
             });
           }
 
+          // 操作日志
+          if (roles.logManagementSetting) {
+            console.log("操作日志",roles.logManagementSetting.split(","));
+            
+            let arr = roles.logManagementSetting.split(",");
+            arr.forEach((i) => {
+              btn.push(`logManagementSetting${i}`);
+              if (i == 1) {
+                this.roleList.push({
+                  name: "操作日志 ",
+                  path: "/log",
+                  icon: "log",
+                });
+              }
+            });
+          }
+
           // 系统设置
           if (roles.settingManagementSetting) {
             let arr = roles.settingManagementSetting.split(",");
@@ -266,6 +283,8 @@ export const useCounterStore = defineStore("user", {
           router.push({
             path: roleList[0].path,
           });
+          console.log(roleList);
+          
         } else {
           console.log("动态添加路由失败");
           router.addRoute({

src/views/log/log.vue

@@ -0,0 +1,469 @@
+<template>
+  <div class="content-box">
+    <div class="left">
+      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
+      <span class="cameratxt">操作日志</span>
+    </div>
+    <div class="scroll">
+      <div class="middle">
+        <div class="filter">
+          <div class="condition">
+            <span>操作人 :</span>
+            <el-input
+              clearable
+              v-model.trim="searchInput.userName"
+              class="w-50 m-2"
+              placeholder="请输入操作人"
+              style="width: 180px"
+              @clear="searchBtn"
+            />
+          </div>
+          <div class="condition">
+            <span>操作模块 :</span>
+            <el-input
+              clearable
+              v-model.trim="searchInput.operMode"
+              class="w-50 m-2"
+              placeholder="请输入操作模块"
+              style="width: 180px"
+              @clear="searchBtn"
+            />
+          </div>
+          <div class="condition">
+            <span>日志级别 :</span>
+            <el-select
+              clearable
+              v-model="searchInput.olevelId"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="i in levelData"
+                :key="i.id"
+                :label="i.name"
+                :value="i.id"
+              />
+            </el-select>
+          </div>
+          <div class="condition">
+            <span>操作时间 :</span>
+            <el-date-picker
+              v-model="searchInput.createTime"
+              type="datetimerange"
+              range-separator="-"
+              start-placeholder="起始时间"
+              end-placeholder="结束时间"
+              format="YYYY-MM-DD HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              placeholder="请选择日期"
+            />
+          </div>
+          <el-button
+            style="margin-left: 20px"
+            color="rgba(38, 151, 255, 1)"
+            type="primary"
+            class="search"
+            @click="searchBtn"
+            ><span>查询</span></el-button
+          >
+          <el-button @click="resetBtn" plain color="rgba(43, 153, 255, 1)"
+            >重置</el-button
+          >
+        </div>
+      </div>
+      <div class="footer" v-loading="loading">
+        <el-table
+          :row-class-name="tableRowClassName"
+          :data="tableData.list"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          :header-cell-style="{
+            background: 'rgba(240, 243, 247, 1)',
+            height: '50px',
+            border: 0,
+          }"
+        >
+          <el-table-column
+            width="80"
+            align="center"
+            label="序号"
+            type="index"
+            index="1"
+          />
+          <el-table-column align="center" prop="createTime" label="操作时间" />
+          <el-table-column align="center" prop="userName" label="操作人" />
+          <el-table-column align="center" prop="operMode" label="操作模块" />
+          <el-table-column align="center" prop="otype" label="操作类型" />
+          <el-table-column align="center" prop="operation" label="操作内容" />
+          <el-table-column align="center" prop="ip" label="IP地址" />
+          <el-table-column align="center" prop="olevel" label="日志级别" />
+          
+        </el-table>
+        <!-- 分页组件 -->
+        <div class="pageSize">
+          <span></span>
+          <el-pagination
+            background
+            :current-page="currentPage"
+            :page-size="pageSize"
+            :page-sizes="[10, 20, 30, 40]"
+            layout="total,sizes, prev, pager, next, jumper, slot"
+            :total="total"
+            @size-change="handleSizeChange"
+            @update:current-page="handleCurrentChange"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  watch,
+  reactive,
+  nextTick,
+  onBeforeMount,
+  onUnmounted,
+} from "vue";
+import { useRouter } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { dayjs } from "element-plus";
+import lodash from "lodash";
+import { https } from "@/utils/request"; // 绝对路径
+
+import { storeToRefs } from "pinia";
+import { useCounterStore } from "@/stores/index";
+
+const router = useRouter();
+const store = useCounterStore();
+
+// 为避免解构时失去响应性
+const { name, age, isCollapse, realAge, roleId } = storeToRefs(store);
+
+// 表格数据
+const loading = ref(false);
+const tableData = reactive({
+  list: [{}],
+});
+
+const searchInput = reactive({
+  userName: "",
+  operMode: "",
+  olevelId: "",
+  createTime: "",
+}); // 搜索按钮数据
+
+const currentPage = ref(1); // 当前页
+const pageSize = ref(10);
+const total = ref(); // 当前总数
+
+// 等级
+const levelData = ref([]);
+const levelList = async () => {
+  let res = await https.get("/welcome/api/welcomeLog/queryLogLevel", "params");
+  console.log(res, "等级分类");
+  if (res.code == 200) {
+    levelData.value = res.data;
+  } else {
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.message,
+      center: true,
+    });
+  }
+};
+
+// 获取账户列表
+const getList = async () => {
+  loading.value = true;
+  let params = {
+    currentPage: currentPage.value, // 当前页
+    pageCount: pageSize.value, // 一页数据条数
+    userName: searchInput.userName,
+    operMode: searchInput.operMode,
+    olevelId: searchInput.olevelId,
+  };
+  if (searchInput.createTime) {
+    params.startTime = searchInput.createTime[0];
+    params.endTime = searchInput.createTime[1];
+  }
+
+  let res = await https.get(
+    "/welcome/api/welcomeLog/queryLogPages",
+    "params",
+    params,
+  );
+  console.log(res, "账号信息");
+  if (res.code == 200) {
+    tableData.list = res.data.list;
+    total.value = res.data.totalCount;
+    loading.value = false;
+  } else {
+    loading.value = false;
+    ElMessage({
+      type: "error",
+      showClose: true,
+      message: res.message,
+      center: true,
+    });
+  }
+};
+
+// 搜索功能
+const searchBtn = lodash.debounce(async () => {
+  getList();
+}, 300);
+const resetBtn = lodash.debounce(async () => {
+  searchInput.userName = null;
+  searchInput.operMode = null;
+  searchInput.olevelId = null;
+  searchInput.createTime = null;
+  getList();
+}, 300);
+
+// 表格斑马纹颜色修改
+const tableRowClassName = ({ row, rowIndex }) => {
+  if (rowIndex % 2 === 0) {
+    return "even";
+  } else if (rowIndex % 2 !== 0) {
+    return "odd";
+  }
+  return "";
+};
+// 每页显示条数
+const handleSizeChange = (value) => {
+  console.log(value, "每页显示条数");
+  pageSize.value = value;
+  getList();
+};
+// 分页
+const handleCurrentChange = (value) => {
+  // console.log(value);
+  currentPage.value = value;
+  getList();
+};
+
+onBeforeMount(() => {
+  getList();
+  levelList();
+});
+onUnmounted(() => {
+  // document.removeEventListener("keyup", Enters);
+});
+</script>
+
+<style scoped lang="scss">
+.content-box {
+  width: calc(100% - 40px);
+  height: calc(100% - 105px);
+  margin: 20px auto;
+  background-color: #fff;
+  color: #000;
+  display: flex;
+  flex-direction: column;
+
+  .svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  .left {
+    width: calc(100% - 60px);
+    height: 60px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #ccc;
+    color: #000;
+    font-size: 18px;
+    font-weight: 600;
+    .camera {
+      margin-right: 15px;
+      color: #4392f7;
+    }
+  }
+  .scroll {
+    width: calc(100% - 60px);
+    height: calc(100% - 61px);
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+
+    .middle {
+      width: calc(100%);
+      color: #000;
+      .filter {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        .search {
+          margin-left: 0 !important;
+          color: #fff;
+        }
+        .condition {
+          display: flex;
+          align-items: center;
+          margin: 10px 30px 10px 0;
+          :deep(.el-input .el-input__inner) {
+            font-size: 14px;
+          }
+          .el-select {
+            width: 220px;
+          }
+          span {
+            margin: 0 10px 0 0;
+          }
+        }
+      }
+      .gongneng {
+        margin: 10px 0;
+        .el-button {
+          color: #fff;
+          margin-right: 15px;
+        }
+      }
+    }
+    .footer {
+      width: calc(100%);
+      flex: 1;
+      margin: 0 auto;
+      overflow: auto;
+
+      .el-table--fit {
+        height: calc(100% - 60px);
+        :deep(.el-table__header-wrapper) {
+          background-color: #000;
+          font-size: 15px;
+          color: #000;
+          .cell {
+            color: #000;
+          }
+        }
+        :deep(.el-table__row) {
+          height: 50px;
+          font-size: 15px;
+          color: #000;
+        }
+        :deep(.el-table__row td) {
+          padding: 0;
+          border: 0;
+        }
+
+        .el-button--primary {
+          margin-left: 5px;
+        }
+        :deep(.el-table__body .even) {
+          background-color: #fff;
+        }
+        :deep(.el-table__body .odd) {
+          background-color: rgba(240, 243, 247, 1);
+        }
+        :deep(.options) {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .edit {
+            margin: 0 15px 0 0;
+            color: rgba(0, 186, 173, 1);
+            cursor: pointer;
+          }
+          .delete {
+            color: rgba(212, 48, 48, 1);
+            cursor: pointer;
+          }
+        }
+      }
+
+      .pageSize {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 0 30px;
+        height: 60px;
+
+        span {
+          color: #000;
+        }
+
+        .el-pagination {
+          // width: 1600px;
+          :deep(.el-pagination__total) {
+            color: #000;
+          }
+
+          :deep(.el-pagination__goto) {
+            color: #000;
+          }
+
+          :deep(.el-pagination__classifier) {
+            color: #000;
+          }
+
+          :deep(.el-input__wrapper) {
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            box-shadow: none;
+          }
+
+          :deep(.el-pager li) {
+            margin: 0 5px;
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            background-color: transparent;
+          }
+
+          :deep(.el-pager li.is-active) {
+            // background-color: rgba(0, 97, 255, 0.8);
+            border: 1px solid rgba(0, 97, 255, 1);
+            color: rgba(0, 97, 255, 1);
+          }
+
+          :deep(.btn-prev) {
+            margin-right: 5px;
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            background-color: transparent;
+          }
+
+          :deep(.btn-next) {
+            margin-left: 5px;
+            border: 1px solid rgba(0, 0, 0, 1);
+            border-radius: 5px;
+            background-color: transparent;
+          }
+        }
+      }
+    }
+  }
+
+  // 添加员工弹窗样式
+  :deep(.addStaff) {
+    .el-dialog__body {
+      padding: 20px 20px 10px 20px;
+      .el-input {
+        width: 400px;
+        .el-input__suffix-inner {
+          color: rgba(61, 81, 232, 1);
+        }
+      }
+      .el-select {
+        width: 400px;
+      }
+      .el-tree {
+        width: 400px;
+      }
+      .el-form {
+        .el-form-item {
+          display: flex;
+          align-items: center;
+        }
+        .options {
+          margin-top: 30px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/role/role.vue

@@ -226,6 +226,12 @@
                 </div>
               </div>
               <div class="options" v-else></div>
+              <!-- <span
+                class="edit"
+                v-if="store.BtnRole('roleManagementSetting2')"
+                @click="updateS(row)"
+                >编辑</span
+              > -->
             </template>
           </el-table-column>
         </el-table>
@@ -496,9 +502,30 @@
                 </td>
               </tr>
 
+              <!-- 操作日志 13 -->
+              <tr align="center">
+                <td>操作日志</td>
+                <td>/</td>
+                <td>
+                  <el-tree
+                    ref="addRolesData13"
+                    style="max-width: 600px"
+                    :data="addRolesList13.three"
+                    show-checkbox
+                    node-key="id"
+                    :props="defaultProps"
+                    default-expand-all
+                    @check="
+                      (data, nodes) =>
+                        editMemberCheckChange(data, nodes, addRolesList13.one)
+                    "
+                  />
+                </td>
+              </tr>
+
               <!-- 系统设置 11 -->
               <tr align="center">
-                <td rowspan="2">系统设置</td>
+                <td>系统设置</td>
                 <td>/</td>
                 <td>
                   <el-tree
@@ -594,6 +621,7 @@ const addRoles = reactive({
   accountManagementSetting: [], //用户管理设置
   dormitoryMoneySetting: [], //选宿舍金额设置
   settingManagementSetting: [], //设置管理设置
+  logManagementSetting: [], // 操作日志
 });
 
 const addRolesData1 = ref();
@@ -844,6 +872,21 @@ const addRolesList12 = reactive({
   checkedSel: [],
 });
 
+const addRolesData13 = ref();
+const addRolesList13 = reactive({
+  one: "操作日志",
+  two: "/",
+  three: [
+    {
+      name: "全部",
+      id: 0,
+      children: [{ name: "查看页面", id: 1 }],
+    },
+  ],
+  four: "13",
+  checkedSel: [],
+});
+
 const addRolesData11 = ref();
 const addRolesList11 = reactive({
   one: "系统设置",
@@ -885,7 +928,7 @@ const getList = async () => {
   let res = await https.get(
     "/welcome/api/welcomeRole/listRole",
     "params",
-    params
+    params,
   );
   console.log(res, "角色查询");
   if (res.code == 200) {
@@ -966,6 +1009,9 @@ const addRolesClick = () => {
   if (addRolesData12.value) {
     addRolesData12.value.setCheckedKeys([]);
   }
+  if (addRolesData13.value) {
+    addRolesData13.value.setCheckedKeys([]);
+  }
   if (addRolesData11.value) {
     addRolesData11.value.setCheckedKeys([]);
   }
@@ -980,7 +1026,6 @@ const updateS = async (row) => {
     // 房态管理 1
     if (addRolesData1.value) {
       console.log(row.dataManagementSetting.split(","));
-
       addRoles.dataManagementSetting = row.dataManagementSetting.split(",");
       addRolesData1.value.setCheckedKeys(row.dataManagementSetting.split(","));
     }
@@ -990,7 +1035,7 @@ const updateS = async (row) => {
       addRoles.studentManagementSetting =
         row.studentManagementSetting.split(",");
       addRolesData2.value.setCheckedKeys(
-        row.studentManagementSetting.split(",")
+        row.studentManagementSetting.split(","),
       );
     }
 
@@ -999,7 +1044,7 @@ const updateS = async (row) => {
       addRoles.buildingManagementSetting =
         row.buildingManagementSetting.split(",");
       addRolesData3.value.setCheckedKeys(
-        row.buildingManagementSetting.split(",")
+        row.buildingManagementSetting.split(","),
       );
     }
     // 房间列表 4
@@ -1007,7 +1052,7 @@ const updateS = async (row) => {
       addRoles.dormitoryManagementSetting =
         row.dormitoryManagementSetting.split(",");
       addRolesData4.value.setCheckedKeys(
-        row.dormitoryManagementSetting.split(",")
+        row.dormitoryManagementSetting.split(","),
       );
     }
 
@@ -1022,7 +1067,7 @@ const updateS = async (row) => {
       addRoles.studentAccommodationSetting =
         row.studentAccommodationSetting.split(",");
       addRolesData6.value.setCheckedKeys(
-        row.studentAccommodationSetting.split(",")
+        row.studentAccommodationSetting.split(","),
       );
     }
 
@@ -1031,7 +1076,7 @@ const updateS = async (row) => {
       addRoles.accommodationStatisticsSetting =
         row.accommodationStatisticsSetting.split(",");
       addRolesData7.value.setCheckedKeys(
-        row.accommodationStatisticsSetting.split(",")
+        row.accommodationStatisticsSetting.split(","),
       );
     }
     // 流程管理 8
@@ -1039,7 +1084,7 @@ const updateS = async (row) => {
       addRoles.visitorManagementSetting =
         row.visitorManagementSetting.split(",");
       addRolesData8.value.setCheckedKeys(
-        row.visitorManagementSetting.split(",")
+        row.visitorManagementSetting.split(","),
       );
     }
     // 用户管理 9
@@ -1047,7 +1092,7 @@ const updateS = async (row) => {
       addRoles.accountManagementSetting =
         row.accountManagementSetting.split(",");
       addRolesData9.value.setCheckedKeys(
-        row.accountManagementSetting.split(",")
+        row.accountManagementSetting.split(","),
       );
     }
     // 角色管理 10
@@ -1060,17 +1105,24 @@ const updateS = async (row) => {
       if (row.dormitoryMoneySetting) {
         addRoles.dormitoryMoneySetting = row.dormitoryMoneySetting.split(",");
         addRolesData12.value.setCheckedKeys(
-          row.dormitoryMoneySetting.split(",")
+          row.dormitoryMoneySetting.split(","),
         );
       }
     }
+    // 操作日志 13
+    if (addRolesData13.value) {
+      if (row.logManagementSetting) {
+        addRoles.logManagementSetting = row.logManagementSetting.split(",");
+        addRolesData13.value.setCheckedKeys(row.logManagementSetting.split(","));
+      }
+    }
 
-    // 门锁管理 11
+    // 系统设置 11
     if (addRolesData11.value) {
       addRoles.settingManagementSetting =
         row.settingManagementSetting.split(",");
       addRolesData11.value.setCheckedKeys(
-        row.settingManagementSetting.split(",")
+        row.settingManagementSetting.split(","),
       );
     }
   }, 100);
@@ -1088,7 +1140,7 @@ const deleteS = async (row) => {
       let res = await https.get(
         "/welcome/api/welcomeRole/deleteRole",
         "params",
-        data
+        data,
       );
       if (res.code == 200) {
         ElMessage({
@@ -1136,6 +1188,8 @@ const editMemberCheckChange = (data, nodes, name) => {
     addRoles.roleManagementSetting = nodes.checkedKeys;
   } else if (name == "选宿舍金额设置") {
     addRoles.dormitoryMoneySetting = nodes.checkedKeys;
+  } else if (name == "操作日志") {
+    addRoles.logManagementSetting = nodes.checkedKeys;
   } else if (name == "系统设置") {
     addRoles.settingManagementSetting = nodes.checkedKeys;
   }
@@ -1167,13 +1221,14 @@ const confirmEdit = async () => {
     accountManagementSetting: addRoles.accountManagementSetting.join(","),
     dormitoryMoneySetting: addRoles.dormitoryMoneySetting.join(","),
     settingManagementSetting: addRoles.settingManagementSetting.join(","),
+    logManagementSetting:addRoles.logManagementSetting.join(",")
   };
   if (addRoles.id) {
     data.id = addRoles.id;
     let res = await https.post(
       "/welcome/api/welcomeRole/updateRole",
       "data",
-      data
+      data,
     );
     console.log(res);
 
@@ -1198,7 +1253,7 @@ const confirmEdit = async () => {
     let res = await https.post(
       "/welcome/api/welcomeRole/saveRole",
       "data",
-      data
+      data,
     );
     if (res.code == 200) {
       getList();
@@ -1221,6 +1276,45 @@ const confirmEdit = async () => {
 };
 const cancelAddRoles = () => {
   addRolesVisible.value = false;
+  if (addRolesData1.value) {
+    addRolesData1.value.setCheckedKeys([]);
+  }
+  if (addRolesData2.value) {
+    addRolesData2.value.setCheckedKeys([]);
+  }
+  if (addRolesData3.value) {
+    addRolesData3.value.setCheckedKeys([]);
+  }
+  if (addRolesData4.value) {
+    addRolesData4.value.setCheckedKeys([]);
+  }
+  if (addRolesData5.value) {
+    addRolesData5.value.setCheckedKeys([]);
+  }
+  if (addRolesData6.value) {
+    addRolesData6.value.setCheckedKeys([]);
+  }
+  if (addRolesData7.value) {
+    addRolesData7.value.setCheckedKeys([]);
+  }
+  if (addRolesData8.value) {
+    addRolesData8.value.setCheckedKeys([]);
+  }
+  if (addRolesData9.value) {
+    addRolesData9.value.setCheckedKeys([]);
+  }
+  if (addRolesData10.value) {
+    addRolesData10.value.setCheckedKeys([]);
+  }
+  if (addRolesData12.value) {
+    addRolesData12.value.setCheckedKeys([]);
+  }
+  if (addRolesData13.value) {
+    addRolesData13.value.setCheckedKeys([]);
+  }
+  if (addRolesData11.value) {
+    addRolesData11.value.setCheckedKeys([]);
+  }
 };
 
 // 表格斑马纹颜色修改