From bd8ee9811f2b6c3776052a3acfc867e9fce65ae3 Mon Sep 17 00:00:00 2001
From: jacky <phpcrazy@163.com>
Date: Sun, 21 Apr 2024 14:25:52 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=A5=E5=BF=97=E5=A2=9E=E5=8A=A0=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=9D=83=E9=99=90=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../operation/sysOperationRecord.vue          | 177 +++++-------------
 1 file changed, 50 insertions(+), 127 deletions(-)

diff --git a/src/view/superAdmin/operation/sysOperationRecord.vue b/src/view/superAdmin/operation/sysOperationRecord.vue
index 51cdecc..e0db26c 100644
--- a/src/view/superAdmin/operation/sysOperationRecord.vue
+++ b/src/view/superAdmin/operation/sysOperationRecord.vue
@@ -1,125 +1,59 @@
 <template>
   <div>
     <div class="gva-search-box">
-      <el-form
-        :inline="true"
-        :model="searchInfo"
-      >
+      <el-form :inline="true" :model="searchInfo">
         <el-form-item label="请求方法">
-          <el-input
-            v-model="searchInfo.method"
-            placeholder="搜索条件"
-          />
+          <el-input v-model="searchInfo.method" placeholder="搜索条件" />
         </el-form-item>
         <el-form-item label="请求路径">
-          <el-input
-            v-model="searchInfo.path"
-            placeholder="搜索条件"
-          />
+          <el-input v-model="searchInfo.path" placeholder="搜索条件" />
         </el-form-item>
         <el-form-item label="结果状态码">
-          <el-input
-            v-model="searchInfo.status"
-            placeholder="搜索条件"
-          />
+          <el-input v-model="searchInfo.status" placeholder="搜索条件" />
         </el-form-item>
         <el-form-item>
-          <el-button
-            type="primary"
-            icon="search"
-            @click="onSubmit"
-          >查询</el-button>
-          <el-button
-            icon="refresh"
-            @click="onReset"
-          >重置</el-button>
+          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
+          <el-button icon="refresh" @click="onReset">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button
-          icon="delete"
-          :disabled="!multipleSelection.length"
-          @click="onDelete"
-        >删除</el-button>
+        <el-button v-auth="btnAuth.delete" icon="delete" :disabled="!multipleSelection.length"
+          @click="onDelete">删除</el-button>
       </div>
-      <el-table
-        ref="multipleTable"
-        :data="tableData"
-        style="width: 100%"
-        tooltip-effect="dark"
-        row-key="ID"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column
-          align="left"
-          type="selection"
-          width="55"
-        />
-        <el-table-column
-          align="left"
-          label="操作人"
-          width="140"
-        >
+      <el-table ref="multipleTable" :data="tableData" style="width: 100%" tooltip-effect="dark" row-key="ID"
+        @selection-change="handleSelectionChange">
+        <el-table-column align="left" type="selection" width="55" />
+        <el-table-column align="left" label="操作人" min-width="200">
           <template #default="scope">
             <div>{{ scope.row.user.userName }}({{ scope.row.user.nickName }})</div>
           </template>
         </el-table-column>
-        <el-table-column
-          align="left"
-          label="日期"
-          width="180"
-        >
+        <el-table-column align="left" label="时间" min-width="180">
           <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
         </el-table-column>
-        <el-table-column
-          align="left"
-          label="状态码"
-          prop="status"
-          width="120"
-        >
+        <el-table-column align="left" label="状态码" prop="status" min-width="80">
           <template #default="scope">
             <div>
               <el-tag type="success">{{ scope.row.status }}</el-tag>
             </div>
           </template>
         </el-table-column>
-        <el-table-column
-          align="left"
-          label="请求IP"
-          prop="ip"
-          width="120"
-        />
-        <el-table-column
-          align="left"
-          label="请求方法"
-          prop="method"
-          width="120"
-        />
-        <el-table-column
-          align="left"
-          label="请求路径"
-          prop="path"
-          width="240"
-        />
-        <el-table-column
-          align="left"
-          label="请求"
-          prop="path"
-          width="80"
-        >
+        <el-table-column align="left" label="请求IP" prop="ip" min-width="160" />
+        <el-table-column align="left" label="请求方法" prop="method" min-width="100" />
+        <el-table-column align="left" label="请求路径" prop="path" min-width="300" />
+        <el-table-column align="left" label="请求" prop="path" min-width="80">
           <template #default="scope">
             <div>
-              <el-popover
-                v-if="scope.row.body"
-                placement="left-start"
-              >
+              <el-popover v-if="scope.row.body" placement="left-start">
                 <div class="popover-box">
                   <pre>{{ fmtBody(scope.row.body) }}</pre>
                 </div>
                 <template #reference>
-                  <el-icon style="cursor: pointer;"><warning /></el-icon>
+                  <el-icon style="cursor: pointer;">
+                    <warning />
+                  </el-icon>
                 </template>
               </el-popover>
 
@@ -127,53 +61,34 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column
-          align="left"
-          label="响应"
-          prop="path"
-          width="80"
-        >
+        <el-table-column align="left" label="响应" prop="path" width="80">
           <template #default="scope">
             <div>
-              <el-popover
-                v-if="scope.row.resp"
-                placement="left-start"
-              >
+              <el-popover v-if="scope.row.resp" placement="left-start">
                 <div class="popover-box">
                   <pre>{{ fmtBody(scope.row.resp) }}</pre>
                 </div>
                 <template #reference>
-                  <el-icon style="cursor: pointer;"><warning /></el-icon>
+                  <el-icon style="cursor: pointer;">
+                    <warning />
+                  </el-icon>
                 </template>
               </el-popover>
               <span v-else>无</span>
             </div>
           </template>
         </el-table-column>
-        <el-table-column
-          align="left"
-          label="操作"
-        >
+        <el-table-column align="left" label="操作">
           <template #default="scope">
-            <el-button
-              icon="delete"
-              type="primary"
-              link
-              @click="deleteSysOperationRecordFunc(scope.row)"
-            >删除</el-button>
+            <el-button v-auth="btnAuth.delete" icon="delete" type="primary" link
+              @click="deleteSysOperationRecordFunc(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="gva-pagination">
-        <el-pagination
-          :current-page="page"
-          :page-size="pageSize"
-          :page-sizes="[10, 30, 50, 100]"
-          :total="total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @current-change="handleCurrentChange"
-          @size-change="handleSizeChange"
-        />
+        <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
+          layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
+          @size-change="handleSizeChange" />
       </div>
     </div>
   </div>
@@ -188,6 +103,9 @@ import {
 import { formatDate } from '@/utils/format'
 import { ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import { useBtnAuth } from '@/utils/btnAuth'
+
+const btnAuth = useBtnAuth()
 
 defineOptions({
   name: 'SysOperationRecord'
@@ -223,7 +141,7 @@ const handleCurrentChange = (val) => {
 }
 
 // 查询
-const getTableData = async() => {
+const getTableData = async () => {
   const table = await getSysOperationRecordList({
     page: page.value,
     pageSize: pageSize.value,
@@ -243,17 +161,17 @@ const multipleSelection = ref([])
 const handleSelectionChange = (val) => {
   multipleSelection.value = val
 }
-const onDelete = async() => {
+const onDelete = async () => {
   ElMessageBox.confirm('确定要删除吗?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(async() => {
+  }).then(async () => {
     const ids = []
     multipleSelection.value &&
-        multipleSelection.value.forEach(item => {
-          ids.push(item.ID)
-        })
+      multipleSelection.value.forEach(item => {
+        ids.push(item.ID)
+      })
     const res = await deleteSysOperationRecordByIds({ ids })
     if (res.code === 0) {
       ElMessage({
@@ -267,12 +185,12 @@ const onDelete = async() => {
     }
   })
 }
-const deleteSysOperationRecordFunc = async(row) => {
+const deleteSysOperationRecordFunc = async (row) => {
   ElMessageBox.confirm('确定要删除吗?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(async() => {
+  }).then(async () => {
     const res = await deleteSysOperationRecord({ ID: row.ID })
     if (res.code === 0) {
       ElMessage({
@@ -300,9 +218,11 @@ const fmtBody = (value) => {
 .table-expand {
   padding-left: 60px;
   font-size: 0;
+
   label {
     width: 90px;
     color: #99a9bf;
+
     .el-form-item {
       margin-right: 0;
       margin-bottom: 0;
@@ -310,6 +230,7 @@ const fmtBody = (value) => {
     }
   }
 }
+
 .popover-box {
   background: #112435;
   color: #f08047;
@@ -317,7 +238,9 @@ const fmtBody = (value) => {
   width: 420px;
   overflow: auto;
 }
+
 .popover-box::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
+  display: none;
+  /* Chrome Safari */
 }
 </style>