超级管理员 setup 改造完成

web/src/view/superAdmin/operation/sysOperationRecord.vue

@@ -95,7 +95,7 @@
               <p>确定要删除吗？</p>
               <div style="text-align: right; margin-top: 8px;">
                 <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
-                <el-button size="mini" type="primary" @click="deleteSysOperationRecord(scope.row)">确定</el-button>
+                <el-button size="mini" type="primary" @click="deleteSysOperationRecordFunc(scope.row)">确定</el-button>
               </div>
               <template #reference>
                 <el-button icon="delete" size="mini" type="text">删除</el-button>
@@ -119,94 +119,116 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import {
   deleteSysOperationRecord,
   getSysOperationRecordList,
   deleteSysOperationRecordByIds
 } from '@/api/sysOperationRecord' // 此处请自行替换地址
-import infoList from '@/mixins/infoList'
+import { formatDate } from '@/utils/format'
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
 
-export default {
-  name: 'SysOperationRecord',
-  mixins: [infoList],
-  data() {
-    return {
-      listApi: getSysOperationRecordList,
-      dialogFormVisible: false,
-      type: '',
-      deleteVisible: false,
-      multipleSelection: [],
-      formData: {
-        ip: null,
-        method: null,
-        path: null,
-        status: null,
-        latency: null,
-        agent: null,
-        error_message: null,
-        user_id: null
-      }
-    }
-  },
-  created() {
-    this.getTableData()
-  },
-  methods: {
-    onReset() {
-      this.searchInfo = {}
-    },
-    // 条件搜索前端看此方法
-    onSubmit() {
-      this.page = 1
-      this.pageSize = 10
-      this.getTableData()
-    },
-    handleSelectionChange(val) {
-      this.multipleSelection = val
-    },
-    async onDelete() {
-      const ids = []
-      this.multipleSelection &&
-        this.multipleSelection.forEach(item => {
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+const searchInfo = ref({})
+const onReset = () => {
+  searchInfo.value = {}
+}
+// 条件搜索前端看此方法
+const onSubmit = () => {
+  page.value = 1
+  pageSize.value = 10
+  if (searchInfo.value.status === '') {
+    searchInfo.value.status = null
+  }
+  getTableData()
+}
+
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+// 查询
+const getTableData = async() => {
+  const table = await getSysOperationRecordList({
+    page: page.value,
+    pageSize: pageSize.value,
+    ...searchInfo.value,
+  })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
+  }
+}
+
+const deleteVisible = ref(false)
+const multipleSelection = ref([])
+
+getTableData()
+
+const handleSelectionChange = (val) => {
+  multipleSelection.value = val
+}
+const onDelete = async() => {
+  const ids = []
+  multipleSelection.value &&
+        multipleSelection.value.forEach(item => {
           ids.push(item.ID)
         })
-      const res = await deleteSysOperationRecordByIds({ ids })
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '删除成功'
-        })
-        if (this.tableData.length === ids.length && this.page > 1) {
-          this.page--
-        }
-        this.deleteVisible = false
-        this.getTableData()
-      }
-    },
-    async deleteSysOperationRecord(row) {
-      row.visible = false
-      const res = await deleteSysOperationRecord({ ID: row.ID })
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '删除成功'
-        })
-        if (this.tableData.length === 1 && this.page > 1) {
-          this.page--
-        }
-        this.getTableData()
-      }
-    },
-    fmtBody(value) {
-      try {
-        return JSON.parse(value)
-      } catch (err) {
-        return value
-      }
+  const res = await deleteSysOperationRecordByIds({ ids })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功'
+    })
+    if (tableData.value.length === ids.length && page.value > 1) {
+      page.value--
     }
+    deleteVisible.value = false
+    getTableData()
   }
 }
+const deleteSysOperationRecordFunc = async(row) => {
+  row.visible = false
+  const res = await deleteSysOperationRecord({ ID: row.ID })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功'
+    })
+    if (tableData.value.length === 1 && page.value > 1) {
+      this.page--
+    }
+    this.getTableData()
+  }
+}
+const fmtBody = (value) => {
+  try {
+    return JSON.parse(value)
+  } catch (err) {
+    return value
+  }
+}
+
+</script>
+
+<script>
+
+export default {
+  name: 'SysOperationRecord'
+}
 </script>
 
 <style lang="scss">