日志增加按钮权限控制

src/view/superAdmin/operation/sysOperationRecord.vue

@@ -1,125 +1,59 @@
 <template>
   <div>
     <div class="gva-search-box">
-      <el-form
+      <el-form :inline="true" :model="searchInfo">
-        :inline="true"
-        :model="searchInfo"
-      >
         <el-form-item label="请求方法">
-          <el-input
+          <el-input v-model="searchInfo.method" placeholder="搜索条件" />
-            v-model="searchInfo.method"
-            placeholder="搜索条件"
-          />
         </el-form-item>
         <el-form-item label="请求路径">
-          <el-input
+          <el-input v-model="searchInfo.path" placeholder="搜索条件" />
-            v-model="searchInfo.path"
-            placeholder="搜索条件"
-          />
         </el-form-item>
         <el-form-item label="结果状态码">
-          <el-input
+          <el-input v-model="searchInfo.status" placeholder="搜索条件" />
-            v-model="searchInfo.status"
-            placeholder="搜索条件"
-          />
         </el-form-item>
         <el-form-item>
-          <el-button
+          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
-            type="primary"
+          <el-button icon="refresh" @click="onReset">重置</el-button>
-            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
+        <el-button v-auth="btnAuth.delete" icon="delete" :disabled="!multipleSelection.length"
-          icon="delete"
+          @click="onDelete">删除</el-button>
-          :disabled="!multipleSelection.length"
-          @click="onDelete"
-        >删除</el-button>
       </div>
-      <el-table
+      <el-table ref="multipleTable" :data="tableData" style="width: 100%" tooltip-effect="dark" row-key="ID"
-        ref="multipleTable"
+        @selection-change="handleSelectionChange">
-        :data="tableData"
+        <el-table-column align="left" type="selection" width="55" />
-        style="width: 100%"
+        <el-table-column align="left" label="操作人" min-width="200">
-        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"
-        >
           <template #default="scope">
             <div>{{ scope.row.user.userName }}({{ scope.row.user.nickName }})</div>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column align="left" label="时间" min-width="180">
-          align="left"
-          label="日期"
-          width="180"
-        >
           <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
         </el-table-column>
-        <el-table-column
+        <el-table-column align="left" label="状态码" prop="status" min-width="80">
-          align="left"
-          label="状态码"
-          prop="status"
-          width="120"
-        >
           <template #default="scope">
             <div>
               <el-tag type="success">{{ scope.row.status }}</el-tag>
             </div>
           </template>
         </el-table-column>
-        <el-table-column
+        <el-table-column align="left" label="请求IP" prop="ip" min-width="160" />
-          align="left"
+        <el-table-column align="left" label="请求方法" prop="method" min-width="100" />
-          label="请求IP"
+        <el-table-column align="left" label="请求路径" prop="path" min-width="300" />
-          prop="ip"
+        <el-table-column align="left" label="请求" prop="path" min-width="80">
-          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"
-        >
           <template #default="scope">
             <div>
-              <el-popover
+              <el-popover v-if="scope.row.body" placement="left-start">
-                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
+        <el-table-column align="left" label="响应" prop="path" width="80">
-          align="left"
-          label="响应"
-          prop="path"
-          width="80"
-        >
           <template #default="scope">
             <div>
-              <el-popover
+              <el-popover v-if="scope.row.resp" placement="left-start">
-                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
+        <el-table-column align="left" label="操作">
-          align="left"
-          label="操作"
-        >
           <template #default="scope">
-            <el-button
+            <el-button v-auth="btnAuth.delete" icon="delete" type="primary" link
-              icon="delete"
+              @click="deleteSysOperationRecordFunc(scope.row)">删除</el-button>
-              type="primary"
-              link
-              @click="deleteSysOperationRecordFunc(scope.row)"
-            >删除</el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="gva-pagination">
-        <el-pagination
+        <el-pagination :current-page="page" :page-size="pageSize" :page-sizes="[10, 30, 50, 100]" :total="total"
-          :current-page="page"
+          layout="total, sizes, prev, pager, next, jumper" @current-change="handleCurrentChange"
-          :page-size="pageSize"
+          @size-change="handleSizeChange" />
-          :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 => {
+      multipleSelection.value.forEach(item => {
-          ids.push(item.ID)
+        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>