From 5442b82b24d047d320a22c66910cb76768cc2a2f Mon Sep 17 00:00:00 2001
From: piexlmax <qimiaojiangjizhao@gmail.com>
Date: Thu, 30 Dec 2021 17:06:11 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B6=85=E7=BA=A7=E7=AE=A1=E7=90=86=E5=91=98?=
 =?UTF-8?q?=20setup=20=E6=94=B9=E9=80=A0=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/utils/format.js                       |  17 +
 web/src/view/superAdmin/api/api.vue           |   2 +-
 .../superAdmin/dictionary/sysDictionary.vue   | 396 +++++++++++-------
 .../dictionary/sysDictionaryDetail.vue        | 275 ++++++------
 .../operation/sysOperationRecord.vue          | 178 ++++----
 5 files changed, 527 insertions(+), 341 deletions(-)
 create mode 100644 web/src/utils/format.js

diff --git a/web/src/utils/format.js b/web/src/utils/format.js
new file mode 100644
index 00000000..987992d6
--- /dev/null
+++ b/web/src/utils/format.js
@@ -0,0 +1,17 @@
+import { formatTimeToStr } from '@/utils/date'
+
+export const formatBoolean = (bool) => {
+  if (bool !== null) {
+    return bool ? '是' : '否'
+  } else {
+    return ''
+  }
+}
+export const formatDate = (time) => {
+  if (time !== null && time !== '') {
+    var date = new Date(time)
+    return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
+  } else {
+    return ''
+  }
+}
diff --git a/web/src/view/superAdmin/api/api.vue b/web/src/view/superAdmin/api/api.vue
index 3ae5619c..2da3b2dd 100644
--- a/web/src/view/superAdmin/api/api.vue
+++ b/web/src/view/superAdmin/api/api.vue
@@ -239,7 +239,7 @@ const getTableData = async() => {
   }
 }
 
-getTableData(getApiList)
+getTableData()
 
 // 批量操作
 const handleSelectionChange = (val) => {
diff --git a/web/src/view/superAdmin/dictionary/sysDictionary.vue b/web/src/view/superAdmin/dictionary/sysDictionary.vue
index 4e8f579e..484b5315 100644
--- a/web/src/view/superAdmin/dictionary/sysDictionary.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionary.vue
@@ -21,14 +21,28 @@
           <el-input v-model="searchInfo.desc" placeholder="搜索条件" />
         </el-form-item>
         <el-form-item>
-          <el-button size="mini" type="primary" icon="search" @click="onSubmit">查询</el-button>
-          <el-button size="mini" icon="refresh" @click="onReset">重置</el-button>
+          <el-button
+            size="mini"
+            type="primary"
+            icon="search"
+            @click="onSubmit"
+          >查询</el-button>
+          <el-button
+            size="mini"
+            icon="refresh"
+            @click="onReset"
+          >重置</el-button>
         </el-form-item>
       </el-form>
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button size="mini" type="primary" icon="plus" @click="openDialog">新增</el-button>
+        <el-button
+          size="mini"
+          type="primary"
+          icon="plus"
+          @click="openDialog"
+        >新增</el-button>
       </div>
       <el-table
         ref="multipleTable"
@@ -39,31 +53,72 @@
       >
         <el-table-column type="selection" width="55" />
         <el-table-column align="left" label="日期" width="180">
-          <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
+          <template #default="scope">{{
+            formatDate(scope.row.CreatedAt)
+          }}</template>
         </el-table-column>
 
-        <el-table-column align="left" label="字典名（中）" prop="name" width="160" />
+        <el-table-column
+          align="left"
+          label="字典名（中）"
+          prop="name"
+          width="160"
+        />
 
-        <el-table-column align="left" label="字典名（英）" prop="type" width="120" />
+        <el-table-column
+          align="left"
+          label="字典名（英）"
+          prop="type"
+          width="120"
+        />
 
         <el-table-column align="left" label="状态" prop="status" width="120">
-          <template #default="scope">{{ formatBoolean(scope.row.status) }}</template>
+          <template #default="scope">{{
+            formatBoolean(scope.row.status)
+          }}</template>
         </el-table-column>
 
         <el-table-column align="left" label="描述" prop="desc" width="280" />
 
         <el-table-column align="left" label="按钮组">
           <template #default="scope">
-            <el-button size="mini" icon="document" type="text" @click="toDetile(scope.row)">详情</el-button>
-            <el-button size="mini" icon="edit" type="text" @click="updateSysDictionary(scope.row)">变更</el-button>
-            <el-popover :visible="scope.row.visible" placement="top" width="160">
+            <el-button
+              size="mini"
+              icon="document"
+              type="text"
+              @click="toDetile(scope.row)"
+            >详情</el-button>
+            <el-button
+              size="mini"
+              icon="edit"
+              type="text"
+              @click="updateSysDictionaryFunc(scope.row)"
+            >变更</el-button>
+            <el-popover
+              :visible="scope.row.visible"
+              placement="top"
+              width="160"
+            >
               <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 type="primary" size="mini" @click="deleteSysDictionary(scope.row)">确定</el-button>
+              <div style="text-align: right; margin-top: 8px">
+                <el-button
+                  size="mini"
+                  type="text"
+                  @click="scope.row.visible = false"
+                >取消</el-button>
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click="deleteSysDictionaryFunc(scope.row)"
+                >确定</el-button>
               </div>
               <template #reference>
-                <el-button type="text" icon="delete" size="mini" style="margin-left:10px">删除</el-button>
+                <el-button
+                  type="text"
+                  icon="delete"
+                  size="mini"
+                  style="margin-left: 10px"
+                >删除</el-button>
               </template>
             </el-popover>
           </template>
@@ -82,14 +137,24 @@
         />
       </div>
     </div>
-    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
-      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
+    <el-dialog
+      v-model="dialogFormVisible"
+      :before-close="closeDialog"
+      title="弹窗操作"
+    >
+      <el-form
+        ref="dialogForm"
+        :model="formData"
+        :rules="rules"
+        size="medium"
+        label-width="110px"
+      >
         <el-form-item label="字典名（中）" prop="name">
           <el-input
             v-model="formData.name"
             placeholder="请输入字典名（中）"
             clearable
-            :style="{width: '100%'}"
+            :style="{ width: '100%' }"
           />
         </el-form-item>
         <el-form-item label="字典名（英）" prop="type">
@@ -97,20 +162,33 @@
             v-model="formData.type"
             placeholder="请输入字典名（英）"
             clearable
-            :style="{width: '100%'}"
+            :style="{ width: '100%' }"
           />
         </el-form-item>
         <el-form-item label="状态" prop="status" required>
-          <el-switch v-model="formData.status" active-text="开启" inactive-text="停用" />
+          <el-switch
+            v-model="formData.status"
+            active-text="开启"
+            inactive-text="停用"
+          />
         </el-form-item>
         <el-form-item label="描述" prop="desc">
-          <el-input v-model="formData.desc" placeholder="请输入描述" clearable :style="{width: '100%'}" />
+          <el-input
+            v-model="formData.desc"
+            placeholder="请输入描述"
+            clearable
+            :style="{ width: '100%' }"
+          />
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
           <el-button size="small" @click="closeDialog">取 消</el-button>
-          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+          <el-button
+            size="small"
+            type="primary"
+            @click="enterDialog"
+          >确 定</el-button>
         </div>
       </template>
     </el-dialog>
@@ -118,140 +196,174 @@
 </template>
 
 <script>
+export default {
+  name: 'SysDictionary',
+}
+</script>
+
+<script setup>
 import {
   createSysDictionary,
   deleteSysDictionary,
   updateSysDictionary,
   findSysDictionary,
-  getSysDictionaryList
+  getSysDictionaryList,
 } from '@/api/sysDictionary' //  此处请自行替换地址
-import infoList from '@/mixins/infoList'
 import warningBar from '@/components/warningBar/warningBar.vue'
-export default {
-  name: 'SysDictionary',
-  components: {
-    warningBar
-  },
-  mixins: [infoList],
-  data() {
-    return {
-      listApi: getSysDictionaryList,
-      dialogFormVisible: false,
-      type: '',
-      formData: {
-        name: null,
-        type: null,
-        status: true,
-        desc: null
-      },
-      rules: {
-        name: [
-          {
-            required: true,
-            message: '请输入字典名（中）',
-            trigger: 'blur'
-          }
-        ],
-        type: [
-          {
-            required: true,
-            message: '请输入字典名（英）',
-            trigger: 'blur'
-          }
-        ],
-        desc: [
-          {
-            required: true,
-            message: '请输入描述',
-            trigger: 'blur'
-          }
-        ]
-      }
-    }
-  },
-  async created() {
-    this.getTableData()
-  },
-  methods: {
-    toDetile(row) {
-      this.$router.push({
-        name: 'dictionaryDetail',
-        params: {
-          id: row.ID
-        }
-      })
-    },
-    onReset() {
-      this.searchInfo = {}
-    },
-    // 条件搜索前端看此方法
-    onSubmit() {
-      this.page = 1
-      this.pageSize = 10
-      if (this.searchInfo.status === '') {
-        this.searchInfo.status = null
-      }
-      this.getTableData()
-    },
-    async updateSysDictionary(row) {
-      const res = await findSysDictionary({ ID: row.ID })
-      this.type = 'update'
-      if (res.code === 0) {
-        this.formData = res.data.resysDictionary
-        this.dialogFormVisible = true
-      }
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { formatBoolean, formatDate } from '@/utils/format'
+
+const router = useRouter()
+
+const dialogFormVisible = ref(false)
+const type = ref('')
+const formData = ref({
+  name: null,
+  type: null,
+  status: true,
+  desc: null,
+})
+const rules = ref({
+  name: [
+    {
+      required: true,
+      message: '请输入字典名（中）',
+      trigger: 'blur',
     },
-    closeDialog() {
-      this.dialogFormVisible = false
-      this.formData = {
-        name: null,
-        type: null,
-        status: true,
-        desc: null
-      }
+  ],
+  type: [
+    {
+      required: true,
+      message: '请输入字典名（英）',
+      trigger: 'blur',
     },
-    async deleteSysDictionary(row) {
-      row.visible = false
-      const res = await deleteSysDictionary({ ID: row.ID })
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '删除成功'
-        })
-        if (this.tableData.length === 1 && this.page > 1) {
-          this.page--
-        }
-        this.getTableData()
-      }
+  ],
+  desc: [
+    {
+      required: true,
+      message: '请输入描述',
+      trigger: 'blur',
     },
-    async enterDialog() {
-      this.$refs['elForm'].validate(async valid => {
-        if (!valid) return
-        let res
-        switch (this.type) {
-          case 'create':
-            res = await createSysDictionary(this.formData)
-            break
-          case 'update':
-            res = await updateSysDictionary(this.formData)
-            break
-          default:
-            res = await createSysDictionary(this.formData)
-            break
-        }
-        if (res.code === 0) {
-          this.closeDialog()
-          this.getTableData()
-        }
-      })
+  ],
+})
+
+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 getSysDictionaryList({
+    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
+  }
+}
+
+getTableData()
+
+const toDetile = (row) => {
+  router.push({
+    name: 'dictionaryDetail',
+    params: {
+      id: row.ID,
     },
-    openDialog() {
-      this.type = 'create'
-      this.dialogFormVisible = true
+  })
+}
+
+const updateSysDictionaryFunc = async(row) => {
+  const res = await findSysDictionary({ ID: row.ID })
+  type.value = 'update'
+  if (res.code === 0) {
+    formData.value = res.data.resysDictionary
+    dialogFormVisible.value = true
+  }
+}
+const closeDialog = () => {
+  dialogFormVisible.value = false
+  formData.value = {
+    name: null,
+    type: null,
+    status: true,
+    desc: null,
+  }
+}
+const deleteSysDictionaryFunc = async(row) => {
+  row.visible = false
+  const res = await deleteSysDictionary({ ID: row.ID })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功',
+    })
+    if (tableData.value.length === 1 && page.value > 1) {
+      page.value--
     }
+    getTableData()
   }
 }
+
+const dialogForm = ref(null)
+const enterDialog = async() => {
+  dialogForm.value.validate(async(valid) => {
+    if (!valid) return
+    let res
+    switch (type.value) {
+      case 'create':
+        res = await createSysDictionary(formData.value)
+        break
+      case 'update':
+        res = await updateSysDictionary(formData.value)
+        break
+      default:
+        res = await createSysDictionary(formData.value)
+        break
+    }
+    if (res.code === 0) {
+      closeDialog()
+      getTableData()
+    }
+  })
+}
+const openDialog = () => {
+  type.value = 'create'
+  dialogFormVisible.value = true
+}
 </script>
 
-<style>
-</style>
+<style></style>
diff --git a/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue b/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
index 84728d50..be422e38 100644
--- a/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
@@ -48,12 +48,12 @@
 
         <el-table-column align="left" label="按钮组">
           <template #default="scope">
-            <el-button size="small" type="text" icon="edit" @click="updateSysDictionaryDetail(scope.row)">变更</el-button>
+            <el-button size="small" type="text" icon="edit" @click="updateSysDictionaryDetailFunc(scope.row)">变更</el-button>
             <el-popover :visible="scope.row.visible" placement="top" width="160">
               <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 type="primary" size="mini" @click="deleteSysDictionaryDetail(scope.row)">确定</el-button>
+                <el-button type="primary" size="mini" @click="deleteSysDictionaryDetailFunc(scope.row)">确定</el-button>
               </div>
               <template #reference>
                 <el-button type="text" icon="delete" size="mini">删除</el-button>
@@ -77,7 +77,7 @@
     </div>
 
     <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" title="弹窗操作">
-      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
+      <el-form ref="dialogForm" :model="formData" :rules="rules" size="medium" label-width="110px">
         <el-form-item label="展示值" prop="label">
           <el-input
             v-model="formData.label"
@@ -114,6 +114,12 @@
 </template>
 
 <script>
+export default {
+  name: 'SysDictionaryDetail'
+}
+</script>
+
+<script setup>
 import {
   createSysDictionaryDetail,
   deleteSysDictionaryDetail,
@@ -121,128 +127,157 @@ import {
   findSysDictionaryDetail,
   getSysDictionaryDetailList
 } from '@/api/sysDictionaryDetail' //  此处请自行替换地址
-import infoList from '@/mixins/infoList'
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { formatBoolean, formatDate } from '@/utils/format'
+const route = useRoute()
 
-export default {
-  name: 'SysDictionaryDetail',
-  mixins: [infoList],
-  data() {
-    return {
-      listApi: getSysDictionaryDetailList,
-      dialogFormVisible: false,
-      type: '',
-      formData: {
-        label: null,
-        value: null,
-        status: true,
-        sort: null
-      },
-      rules: {
-        label: [
-          {
-            required: true,
-            message: '请输入展示值',
-            trigger: 'blur'
-          }
-        ],
-        value: [
-          {
-            required: true,
-            message: '请输入字典值',
-            trigger: 'blur'
-          }
-        ],
-        sort: [
-          {
-            required: true,
-            message: '排序标记',
-            trigger: 'blur'
-          }
-        ]
-      }
+const dialogFormVisible = ref(false)
+const type = ref('')
+const formData = ref({
+  label: null,
+  value: null,
+  status: true,
+  sort: null
+})
+const rules = ref({
+  label: [
+    {
+      required: true,
+      message: '请输入展示值',
+      trigger: 'blur'
     }
-  },
-  created() {
-    this.searchInfo.sysDictionaryID = Number(this.$route.params.id)
-    this.getTableData()
-  },
-  methods: {
-    onReset() {
-      this.searchInfo = {}
-    },
-    // 条件搜索前端看此方法
-    onSubmit() {
-      this.page = 1
-      this.pageSize = 10
-      if (this.searchInfo.status === '') {
-        this.searchInfo.status = null
-      }
-      this.getTableData()
-    },
-    async updateSysDictionaryDetail(row) {
-      const res = await findSysDictionaryDetail({ ID: row.ID })
-      this.type = 'update'
-      if (res.code === 0) {
-        this.formData = res.data.resysDictionaryDetail
-        this.dialogFormVisible = true
-      }
-    },
-    closeDialog() {
-      this.dialogFormVisible = false
-      this.formData = {
-        label: null,
-        value: null,
-        status: true,
-        sort: null,
-        sysDictionaryID: ''
-      }
-    },
-    async deleteSysDictionaryDetail(row) {
-      row.visible = false
-      const res = await deleteSysDictionaryDetail({ ID: row.ID })
-      if (res.code === 0) {
-        this.$message({
-          type: 'success',
-          message: '删除成功'
-        })
-        if (this.tableData.length === 1 && this.page > 1) {
-          this.page--
-        }
-        this.getTableData()
-      }
-    },
-    async enterDialog() {
-      this.formData.sysDictionaryID = Number(this.$route.params.id)
-      this.$refs['elForm'].validate(async valid => {
-        if (!valid) return
-        let res
-        switch (this.type) {
-          case 'create':
-            res = await createSysDictionaryDetail(this.formData)
-            break
-          case 'update':
-            res = await updateSysDictionaryDetail(this.formData)
-            break
-          default:
-            res = await createSysDictionaryDetail(this.formData)
-            break
-        }
-        if (res.code === 0) {
-          this.$message({
-            type: 'success',
-            message: '创建/更改成功'
-          })
-          this.closeDialog()
-          this.getTableData()
-        }
-      })
-    },
-    openDialog() {
-      this.type = 'create'
-      this.dialogFormVisible = true
+  ],
+  value: [
+    {
+      required: true,
+      message: '请输入字典值',
+      trigger: 'blur'
+    }
+  ],
+  sort: [
+    {
+      required: true,
+      message: '排序标记',
+      trigger: 'blur'
+    }
+  ]
+})
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(10)
+const tableData = ref([])
+const searchInfo = ref({ sysDictionaryID: Number(route.params.id) })
+const onReset = () => {
+  searchInfo.value = { sysDictionaryID: Number(route.params.id) }
+}
+
+// 条件搜索前端看此方法
+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 getSysDictionaryDetailList({
+    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
+  }
+}
+
+getTableData()
+
+const updateSysDictionaryDetailFunc = async(row) => {
+  const res = await findSysDictionaryDetail({ ID: row.ID })
+  type.value = 'update'
+  if (res.code === 0) {
+    formData.value = res.data.resysDictionaryDetail
+    dialogFormVisible.value = true
+  }
+}
+
+const closeDialog = () => {
+  dialogFormVisible.value = false
+  formData.value = {
+    label: null,
+    value: null,
+    status: true,
+    sort: null,
+    sysDictionaryID: ''
+  }
+}
+const deleteSysDictionaryDetailFunc = async(row) => {
+  row.visible = false
+  const res = await deleteSysDictionaryDetail({ ID: row.ID })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '删除成功'
+    })
+    if (tableData.value.length === 1 && page.value > 1) {
+      page.value--
     }
+    getTableData()
   }
 }
+
+const dialogForm = ref(null)
+const enterDialog = async() => {
+  formData.value.sysDictionaryID = Number(route.params.id)
+  dialogForm.value.validate(async valid => {
+    if (!valid) return
+    let res
+    switch (type.value) {
+      case 'create':
+        res = await createSysDictionaryDetail(formData.value)
+        break
+      case 'update':
+        res = await updateSysDictionaryDetail(formData.value)
+        break
+      default:
+        res = await createSysDictionaryDetail(formData.value)
+        break
+    }
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '创建/更改成功'
+      })
+      closeDialog()
+      getTableData()
+    }
+  })
+}
+const openDialog = () => {
+  type.value = 'create'
+  dialogFormVisible.value = true
+}
+
 </script>
 
 <style>
diff --git a/web/src/view/superAdmin/operation/sysOperationRecord.vue b/web/src/view/superAdmin/operation/sysOperationRecord.vue
index 58b4df81..f1e793e0 100644
--- a/web/src/view/superAdmin/operation/sysOperationRecord.vue
+++ b/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">