From 6b505312d9e76fa42808d6359135b82e3ee1c007 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Mon, 13 Jun 2022 12:31:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E7=BB=84=E5=90=88=E5=BC=8FAP?=
 =?UTF-8?q?I=E5=86=99=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/BarChart.vue       | 169 +++++++-------
 src/views/dashboard/LineChart.vue      | 229 +++++++++----------
 src/views/dashboard/PieChart.vue       | 124 +++++------
 src/views/dashboard/RaddarChart.vue    |   1 -
 src/views/monitor/logininfor/index.vue | 268 +++++++++++-----------
 src/views/monitor/operlog/index.vue    | 295 +++++++++++++------------
 6 files changed, 525 insertions(+), 561 deletions(-)

diff --git a/src/views/dashboard/BarChart.vue b/src/views/dashboard/BarChart.vue
index c8e141a..2b8e344 100644
--- a/src/views/dashboard/BarChart.vue
+++ b/src/views/dashboard/BarChart.vue
@@ -1,101 +1,90 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
-<script>
-import * as echarts from 'echarts';
-// import resize from './mixins/resize'
-
+<script setup>
+import * as echarts from 'echarts'
+let chart = null
+const { proxy } = getCurrentInstance()
 const animationDuration = 6000
+const props = defineProps({
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+})
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
 
-export default {
-  // mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
+  chart.setOption({
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
     },
-    width: {
-      type: String,
-      default: '100%'
+    grid: {
+      top: 10,
+      left: '2%',
+      right: '2%',
+      bottom: '3%',
+      containLabel: true,
     },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
+    xAxis: [
+      {
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        axisTick: {
+          alignWithLabel: true,
         },
-        grid: {
-          top: 10,
-          left: '2%',
-          right: '2%',
-          bottom: '3%',
-          containLabel: true
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisTick: {
+          show: false,
         },
-        xAxis: [{
-          type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          axisTick: {
-            alignWithLabel: true
-          }
-        }],
-        yAxis: [{
-          type: 'value',
-          axisTick: {
-            show: false
-          }
-        }],
-        series: [{
-          name: 'pageA',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageB',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }, {
-          name: 'pageC',
-          type: 'bar',
-          stack: 'vistors',
-          barWidth: '60%',
-          data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
-        }]
-      })
-    }
-  }
+      },
+    ],
+    series: [
+      {
+        name: 'pageA',
+        type: 'bar',
+        stack: 'vistors',
+        barWidth: '60%',
+        data: [79, 52, 200, 334, 390, 330, 220],
+        animationDuration,
+      },
+      {
+        name: 'pageB',
+        type: 'bar',
+        stack: 'vistors',
+        barWidth: '60%',
+        data: [80, 52, 200, 334, 390, 330, 220],
+        animationDuration,
+      },
+      {
+        name: 'pageC',
+        type: 'bar',
+        stack: 'vistors',
+        barWidth: '60%',
+        data: [30, 52, 200, 334, 390, 330, 220],
+        animationDuration,
+      },
+    ],
+  })
 }
+onMounted(() => {
+  initChart()
+})
 </script>
diff --git a/src/views/dashboard/LineChart.vue b/src/views/dashboard/LineChart.vue
index c87cd70..54ac971 100644
--- a/src/views/dashboard/LineChart.vue
+++ b/src/views/dashboard/LineChart.vue
@@ -1,133 +1,118 @@
 <template>
-  <div :class="className" :style="{ height: height, width: width }" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
-<script>
+<script setup>
 import * as echarts from 'echarts'
-// import resize from './mixins/resize'
+const { proxy } = getCurrentInstance()
+const chartRef = ref(null)
+const props = defineProps({
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '350px',
+  },
+  autoResize: {
+    type: Boolean,
+    default: true,
+  },
+  chartData: {
+    type: Object,
+    required: true,
+  },
+})
+let chart = null
+watch(
+  () => props.chartData,
+  (val) => {
+    setOptions(val)
+  },
+  { deep: true },
+)
 
-export default {
-  // mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart',
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: '350px',
-    },
-    autoResize: {
-      type: Boolean,
-      default: true,
-    },
-    chartData: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
+function setOptions({ expectedData, actualData } = {}) {
+  chart.setOption({
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      boundaryGap: false,
+      axisTick: {
+        show: false,
       },
     },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
-      this.setOptions(this.chartData)
+    grid: {
+      left: 10,
+      right: 10,
+      bottom: 20,
+      top: 30,
+      containLabel: true,
     },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-          boundaryGap: false,
-          axisTick: {
-            show: false,
-          },
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 20,
-          top: 30,
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-          },
-          padding: [5, 10],
-        },
-        yAxis: {
-          axisTick: {
-            show: false,
-          },
-        },
-        legend: {
-          data: ['expected', 'actual'],
-        },
-        series: [
-          {
-            name: 'expected',
-            itemStyle: {
-              color: '#FF005A',
-              lineStyle: {
-                color: '#FF005A',
-                width: 2,
-              },
-            },
-            smooth: true,
-            type: 'line',
-            data: expectedData,
-            animationDuration: 2800,
-            animationEasing: 'cubicInOut',
-          },
-          {
-            name: 'actual',
-            smooth: true,
-            type: 'line',
-            itemStyle: {
-              color: '#3888fa',
-              areaStyle: {
-                color: '#f3f8ff',
-              },
-              lineStyle: {
-                color: '#3888fa',
-                width: 2,
-              },
-            },
-            data: actualData,
-            animationDuration: 2800,
-            animationEasing: 'quadraticOut',
-          },
-        ],
-      })
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+      },
+      padding: [5, 10],
     },
-  },
+    yAxis: {
+      axisTick: {
+        show: false,
+      },
+    },
+    legend: {
+      data: ['expected', 'actual'],
+    },
+    series: [
+      {
+        name: 'expected',
+        itemStyle: {
+          color: '#FF005A',
+          lineStyle: {
+            color: '#FF005A',
+            width: 2,
+          },
+        },
+        smooth: true,
+        type: 'line',
+        data: expectedData,
+        animationDuration: 2800,
+        animationEasing: 'cubicInOut',
+      },
+      {
+        name: 'actual',
+        smooth: true,
+        type: 'line',
+        itemStyle: {
+          color: '#3888fa',
+          areaStyle: {
+            color: '#f3f8ff',
+          },
+          lineStyle: {
+            color: '#3888fa',
+            width: 2,
+          },
+        },
+        data: actualData,
+        animationDuration: 2800,
+        animationEasing: 'quadraticOut',
+      },
+    ],
+  })
+}
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
+  setOptions(props.chartData)
+}
+onMounted(() => {
+  initChart()
+})
+window.onresize = function () {
+  chart.resize()
 }
 </script>
diff --git a/src/views/dashboard/PieChart.vue b/src/views/dashboard/PieChart.vue
index 169357f..b06bdf2 100644
--- a/src/views/dashboard/PieChart.vue
+++ b/src/views/dashboard/PieChart.vue
@@ -1,78 +1,60 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
-<script>
-import * as echarts from 'echarts';
-// import resize from './mixins/resize'
+<script setup>
+import * as echarts from 'echarts'
+const { proxy } = getCurrentInstance()
+let chart = null
+const props = defineProps({
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+})
 
-export default {
-  // mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart'
-    },
-    width: {
-      type: String,
-      default: '100%'
-    },
-    height: {
-      type: String,
-      default: '300px'
-    }
-  },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef)
 
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        legend: {
-          left: 'center',
-          bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
-        },
-        series: [
-          {
-            name: 'WEEKLY WRITE ARTICLES',
-            type: 'pie',
-            roseType: 'radius',
-            radius: [15, 95],
-            center: ['50%', '38%'],
-            data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
-            ],
-            animationEasing: 'cubicInOut',
-            animationDuration: 2600
-          }
-        ]
-      })
-    }
-  }
+  chart.setOption({
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+    },
+    legend: {
+      left: 'center',
+      bottom: '10',
+      data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
+    },
+    series: [
+      {
+        name: 'WEEKLY WRITE ARTICLES',
+        type: 'pie',
+        roseType: 'radius',
+        radius: [15, 95],
+        center: ['50%', '38%'],
+        data: [
+          { value: 320, name: 'Industries' },
+          { value: 240, name: 'Technology' },
+          { value: 149, name: 'Forex' },
+          { value: 100, name: 'Gold' },
+          { value: 59, name: 'Forecasts' },
+        ],
+        animationEasing: 'cubicInOut',
+        animationDuration: 2600,
+      },
+    ],
+  })
 }
+onMounted(() => {
+  initChart()
+})
 </script>
diff --git a/src/views/dashboard/RaddarChart.vue b/src/views/dashboard/RaddarChart.vue
index 323dbee..1d9dd30 100644
--- a/src/views/dashboard/RaddarChart.vue
+++ b/src/views/dashboard/RaddarChart.vue
@@ -4,7 +4,6 @@
 
 <script>
 import * as echarts from 'echarts'
-// import resize from './mixins/resize'
 
 const animationDuration = 3000
 
diff --git a/src/views/monitor/logininfor/index.vue b/src/views/monitor/logininfor/index.vue
index 9a872f1..30fd576 100644
--- a/src/views/monitor/logininfor/index.vue
+++ b/src/views/monitor/logininfor/index.vue
@@ -5,15 +5,21 @@
         <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="用户名称" prop="userName">
-        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable  @keyup.enter="handleQuery" />
+        <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable @keyup.enter="handleQuery" />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="登录状态" clearable  >
+        <el-select v-model="queryParams.status" placeholder="登录状态" clearable>
           <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
         </el-select>
       </el-form-item>
       <el-form-item label="登录时间">
-        <el-date-picker v-model="dateRange"  style="width: 240px" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"></el-date-picker>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
@@ -23,7 +29,9 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">删除</el-button>
+        <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']"
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button type="danger" plain icon="delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
@@ -43,7 +51,7 @@
       <el-table-column label="浏览器" align="center" prop="browser" />
       <el-table-column label="操作系统" align="center" prop="os" />
       <el-table-column label="操作状态" align="center" prop="status">
-        <template #default="{row}">
+        <template #default="{ row }">
           <dict-tag :options="statusOptions" :value="row.status"></dict-tag>
         </template>
       </el-table-column>
@@ -55,142 +63,124 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
   </div>
 </template>
 
-<script>
-import {
-  list,
-  delLogininfor,
-  cleanLogininfor,
-  exportLogininfor,
-} from "@/api/monitor/logininfor";
+<script setup name="logininfor">
+import { list as queryList, delLogininfor, cleanLogininfor, exportLogininfor } from '@/api/monitor/logininfor'
 
-export default {
-  name: "logininfor",
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 表格数据
-      list: [],
-      // 状态数据字典
-      statusOptions: [],
-      // 日期范围
-      dateRange: [],
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        ipaddr: undefined,
-        userName: undefined,
-        status: undefined,
-      },
-    };
-  },
-  created() {
-    this.getList();
-    this.getDicts("sys_common_status").then((response) => {
-      this.statusOptions = response.data;
-    });
-  },
-  methods: {
-    /** 查询登录日志列表 */
-    getList() {
-      this.loading = true;
-      list(this.addDateRange(this.queryParams, this.dateRange)).then(
-        (response) => {
-          this.loading = false;
-          if (response.code == 200) {
-            this.list = response.data.result;
-            this.total = response.data.totalNum;
-          } else {
-            this.total = 0;
-            this.list = [];
-          }
-        }
-      );
-    },
-    // 登录状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status);
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = [];
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.infoId);
-      this.multiple = !selection.length;
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const infoIds = row.infoId || this.ids;
-      this.$confirm(
-        '是否确认删除访问编号为"' + infoIds + '"的数据项?',
-        "警告",
-        {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning",
-        }
-      )
-        .then(function () {
-          return delLogininfor(infoIds);
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("删除成功");
-        });
-    },
-    /** 清空按钮操作 */
-    handleClean() {
-      this.$confirm("是否确认清空所有登录日志数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return cleanLogininfor();
-        })
-        .then(() => {
-          this.getList();
-          this.$modal.msgSuccess("清空成功");
-        });
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams;
-      this.$confirm("是否确认导出所有操作日志数据项?", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(function () {
-          return exportLogininfor(queryParams);
-        })
-        .then((response) => {
-          this.download(response.data.path);
-        });
-    },
-  },
-};
+// 遮罩层
+const loading = ref(true)
+// 选中数组
+const ids = ref([])
+// 非多个禁用
+const multiple = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 总条数
+const total = ref(0)
+// 表格数据
+const list = ref([])
+// 状态数据字典
+const statusOptions = ref([])
+// 日期范围
+const dateRange = ref([])
+// 查询参数
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+  ipaddr: undefined,
+  userName: undefined,
+  status: undefined,
+})
+
+const { proxy } = getCurrentInstance()
+/** 查询登录日志列表 */
+function getList() {
+  loading.value = true
+  queryList(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
+    loading.value = false
+    if (response.code == 200) {
+      list.value = response.data.result
+      total.value = response.data.totalNum
+    } else {
+      total.value = 0
+      list.value = []
+    }
+  })
+}
+// 登录状态字典翻译
+function statusFormat(row, column) {
+  return proxy.selectDictLabel(statusOptions.value, row.status)
+}
+getList()
+proxy.getDicts('sys_common_status').then((response) => {
+  statusOptions.value = response.data
+})
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNum = 1
+  getList()
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.infoId)
+  multiple.value = !selection.length
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const infoIds = row.infoId || ids.value
+  proxy
+    .$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return delLogininfor(infoIds)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+}
+/** 清空按钮操作 */
+function handleClean() {
+  proxy
+    .$confirm('是否确认清空所有登录日志数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return cleanLogininfor()
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('清空成功')
+    })
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy
+    .$confirm('是否确认导出所有操作日志数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return exportLogininfor(queryParams)
+    })
+    .then((response) => {
+      proxy.download(response.data.path)
+    })
+}
 </script>
-
diff --git a/src/views/monitor/operlog/index.vue b/src/views/monitor/operlog/index.vue
index e18ff85..4905eea 100644
--- a/src/views/monitor/operlog/index.vue
+++ b/src/views/monitor/operlog/index.vue
@@ -90,7 +90,7 @@
 
     <!-- 操作日志详细 -->
     <el-dialog title="操作日志详细" v-model="open" width="700px" append-to-body>
-      <el-form ref="form" :model="form" label-width="100px">
+      <el-form ref="formRef" :model="form" label-width="100px">
         <el-row>
           <el-col :lg="12">
             <el-form-item label="操作模块：">{{ form.title }} </el-form-item>
@@ -136,148 +136,167 @@
   </div>
 </template>
 
-<script>
-import { list, delOperlog, cleanOperlog, exportOperlog } from '@/api/monitor/operlog'
+<script setup name="operlog">
+import { list as listOperLog, delOperlog, cleanOperlog, exportOperlog } from '@/api/monitor/operlog'
 
-export default {
-  name: 'operlog',
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 选中数组
-      ids: [],
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 表格数据
-      list: [],
-      // 是否显示弹出层
-      open: false,
-      // 类型数据字典
-      statusOptions: [],
-      // 业务类型（0其它 1新增 2修改 3删除）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
-      businessTypeOptions: [],
-      // 日期范围
-      dateRange: [],
-      // 表单参数
-      form: {},
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 20,
-        title: undefined,
-        operName: undefined,
-        businessType: undefined,
-        status: undefined,
-      },
+const { proxy } = getCurrentInstance()
+// 遮罩层
+const loading = ref(true)
+// 选中数组
+const ids = ref([])
+// 非多个禁用
+const multiple = ref(true)
+// 显示搜索条件
+const showSearch = ref(true)
+// 总条数
+const total = ref(0)
+// 表格数据
+const list = ref([])
+// 是否显示弹出层
+const open = ref(false)
+// 类型数据字典
+const statusOptions = ref([])
+// 业务类型（0其它 1新增 2修改 3删除）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
+const businessTypeOptions = ref([])
+// 日期范围
+const dateRange = ref([])
+
+const state = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 20,
+    title: undefined,
+    operName: undefined,
+    businessType: undefined,
+    status: undefined,
+  },
+})
+const { form, queryParams } = toRefs(state)
+var dictParams = [
+  { dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
+  { dictType: 'sys_common_status', columnName: 'statusOptions' },
+]
+proxy.getDicts(dictParams).then((response) => {
+  response.data.forEach((element) => {
+    proxy[element.columnName] = element.list
+  })
+})
+/** 查询登录日志 */
+function getList() {
+  loading.value = true
+  listOperLog(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
+    loading.value = false
+    if (response.code == 200) {
+      list.value = response.data.result
+      total.value = response.data.totalNum
+    } else {
+      total.value = 0
+      list.value = []
     }
-  },
-  created() {
-    this.getList()
-    var dictParams = [
-      { dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
-      { dictType: 'sys_common_status', columnName: 'statusOptions' },
-    ]
-    this.getDicts(dictParams).then((response) => {
-      response.data.forEach((element) => {
-        this[element.columnName] = element.list
-      })
+  })
+}
+// 操作日志状态字典翻译
+function statusFormat(row, column) {
+  return proxy.selectDictLabel(statusOptions.value, row.status)
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+/** 重置按钮操作 */
+function resetQuery() {
+  dateRange.value = []
+  proxy.resetForm('queryForm')
+  handleQuery()
+}
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map((item) => item.operId)
+  multiple.value = !selection.length
+}
+const formRef = ref()
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    operId: undefined,
+    title: undefined,
+    businessType: undefined,
+    method: undefined,
+    requestMethod: undefined,
+    operatorType: undefined,
+    deptName: undefined,
+    operUrl: undefined,
+    operIp: undefined,
+    operLocation: undefined,
+    operParam: undefined,
+    jsonResult: undefined,
+    status: 0,
+    errorMsg: undefined,
+    operTime: undefined,
+    elapsed: 0,
+  }
+  proxy.resetForm('formRef')
+}
+/** 详细按钮操作 */
+function handleView(row) {
+  reset()
+  open.value = true
+  form.value = row
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const operIds = row.operId || ids.value
+  proxy
+    .$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
     })
-  },
-  methods: {
-    /** 查询登录日志 */
-    getList() {
-      this.loading = true
-      list(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
-        this.loading = false
-        if (response.code == 200) {
-          this.list = response.data.result
-          this.total = response.data.totalNum
+    .then(function () {
+      return delOperlog(operIds)
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('删除成功')
+    })
+}
+/** 清空按钮操作 */
+function handleClean() {
+  proxy
+    .$confirm('是否确认清空所有操作日志数据项?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(function () {
+      return cleanOperlog()
+    })
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess('清空成功')
+    })
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy
+    .$confirm('是否确认导出所有操作日志?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      exportOperlog(queryParams.value).then((response) => {
+        const { code, data } = response
+        if (code == 200) {
+          proxy.$modal.msgSuccess('导出成功')
+          proxy.download(data.path)
         } else {
-          this.total = 0
-          this.list = []
+          proxy.$modal.msgError('导出失败')
         }
       })
-    },
-    // 操作日志状态字典翻译
-    statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status)
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.dateRange = []
-      this.resetForm('queryForm')
-      this.handleQuery()
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.operId)
-      this.multiple = !selection.length
-    },
-    /** 详细按钮操作 */
-    handleView(row) {
-      this.open = true
-      this.form = row
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const operIds = row.operId || this.ids
-      this.$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(function () {
-          return delOperlog(operIds)
-        })
-        .then(() => {
-          this.getList()
-          this.$modal.msgSuccess('删除成功')
-        })
-    },
-    /** 清空按钮操作 */
-    handleClean() {
-      this.$confirm('是否确认清空所有操作日志数据项?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(function () {
-          return cleanOperlog()
-        })
-        .then(() => {
-          this.getList()
-          this.$modal.msgSuccess('清空成功')
-        })
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      const queryParams = this.queryParams
-      this.$confirm('是否确认导出所有操作日志?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }).then(() => {
-        exportOperlog(queryParams).then((response) => {
-          const { code, data } = response
-          if (code == 200) {
-            this.$modal.msgSuccess('导出成功')
-            this.download(data.path)
-          } else {
-            this.$modal.msgError('导出失败')
-          }
-        })
-      })
-    },
-  },
+    })
 }
+handleQuery()
 </script>