更换组合式API写法

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>
+<script setup>
-import * as echarts from 'echarts';
+import * as echarts from 'echarts'
-// import resize from './mixins/resize'
+let chart = null
-
+const { proxy } = getCurrentInstance()
 const animationDuration = 6000
-
+const props = defineProps({
-export default {
-  // mixins: [resize],
-  props: {
   className: {
     type: String,
-      default: 'chart'
+    default: 'chart',
   },
   width: {
     type: String,
-      default: '100%'
+    default: '100%',
   },
   height: {
     type: String,
-      default: '300px'
+    default: '300px',
-    }
   },
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
 })
-  },
+function initChart() {
-  beforeDestroy() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
 
-      this.chart.setOption({
+  chart.setOption({
     tooltip: {
       trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+      axisPointer: {
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+        // 坐标轴指示器，坐标轴触发有效
-          }
+        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
+      },
     },
     grid: {
       top: 10,
       left: '2%',
       right: '2%',
       bottom: '3%',
-          containLabel: true
+      containLabel: true,
     },
-        xAxis: [{
+    xAxis: [
+      {
         type: 'category',
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         axisTick: {
-            alignWithLabel: true
+          alignWithLabel: true,
-          }
+        },
-        }],
+      },
-        yAxis: [{
+    ],
+    yAxis: [
+      {
         type: 'value',
         axisTick: {
-            show: false
+          show: false,
-          }
+        },
-        }],
+      },
-        series: [{
+    ],
+    series: [
+      {
         name: 'pageA',
         type: 'bar',
         stack: 'vistors',
         barWidth: '60%',
         data: [79, 52, 200, 334, 390, 330, 220],
-          animationDuration
+        animationDuration,
-        }, {
+      },
+      {
         name: 'pageB',
         type: 'bar',
         stack: 'vistors',
         barWidth: '60%',
         data: [80, 52, 200, 334, 390, 330, 220],
-          animationDuration
+        animationDuration,
-        }, {
+      },
+      {
         name: 'pageC',
         type: 'bar',
         stack: 'vistors',
         barWidth: '60%',
         data: [30, 52, 200, 334, 390, 330, 220],
-          animationDuration
+        animationDuration,
-        }]
+      },
+    ],
   })
 }
-  }
+onMounted(() => {
-}
+  initChart()
+})
 </script>

src/views/dashboard/LineChart.vue

@@ -1,14 +1,12 @@
 <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)
-export default {
+const props = defineProps({
-  // mixins: [resize],
-  props: {
   className: {
     type: String,
     default: 'chart',
@@ -29,39 +27,18 @@ export default {
     type: Object,
     required: true,
   },
-  },
-  data() {
-    return {
-      chart: null,
-    }
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val)
-      },
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
 })
+let chart = null
+watch(
+  () => props.chartData,
+  (val) => {
+    setOptions(val)
   },
-  beforeDestroy() {
+  { deep: true },
-    if (!this.chart) {
+)
-      return
+
-    }
+function setOptions({ expectedData, actualData } = {}) {
-    this.chart.dispose()
+  chart.setOption({
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el)
-      this.setOptions(this.chartData)
-    },
-    setOptions({ expectedData, actualData } = {}) {
-      this.chart.setOption({
     xAxis: {
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       boundaryGap: false,
@@ -127,7 +104,15 @@ export default {
       },
     ],
   })
-    },
+}
-  },
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
+  setOptions(props.chartData)
+}
+onMounted(() => {
+  initChart()
+})
+window.onresize = function () {
+  chart.resize()
 }
 </script>

src/views/dashboard/PieChart.vue

@@ -1,57 +1,38 @@
 <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 * as echarts from 'echarts'
-// import resize from './mixins/resize'
+const { proxy } = getCurrentInstance()
-
+let chart = null
-export default {
+const props = defineProps({
-  // mixins: [resize],
-  props: {
   className: {
     type: String,
-      default: 'chart'
+    default: 'chart',
   },
   width: {
     type: String,
-      default: '100%'
+    default: '100%',
   },
   height: {
     type: String,
-      default: '300px'
+    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({
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef)
+
+  chart.setOption({
     tooltip: {
       trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
     },
     legend: {
       left: 'center',
       bottom: '10',
-          data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
+      data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts'],
     },
     series: [
       {
@@ -65,14 +46,15 @@ export default {
           { value: 240, name: 'Technology' },
           { value: 149, name: 'Forex' },
           { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
+          { value: 59, name: 'Forecasts' },
         ],
         animationEasing: 'cubicInOut',
-            animationDuration: 2600
+        animationDuration: 2600,
-          }
+      },
-        ]
+    ],
   })
 }
-  }
+onMounted(() => {
-}
+  initChart()
+})
 </script>

src/views/dashboard/RaddarChart.vue

@@ -4,7 +4,6 @@
 
 <script>
 import * as echarts from 'echarts'
-// import resize from './mixins/resize'
 
 const animationDuration = 3000
 

src/views/monitor/logininfor/index.vue

@@ -13,7 +13,13 @@
         </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>
@@ -59,138 +67,120 @@
   </div>
 </template>
 
-<script>
+<script setup name="logininfor">
-import {
+import { list as queryList, delLogininfor, cleanLogininfor, exportLogininfor } from '@/api/monitor/logininfor'
-  list,
-  delLogininfor,
-  cleanLogininfor,
-  exportLogininfor,
-} from "@/api/monitor/logininfor";
 
-export default {
-  name: "logininfor",
-  data() {
-    return {
 // 遮罩层
-      loading: true,
+const loading = ref(true)
 // 选中数组
-      ids: [],
+const ids = ref([])
 // 非多个禁用
-      multiple: true,
+const multiple = ref(true)
 // 显示搜索条件
-      showSearch: true,
+const showSearch = ref(true)
 // 总条数
-      total: 0,
+const total = ref(0)
 // 表格数据
-      list: [],
+const list = ref([])
 // 状态数据字典
-      statusOptions: [],
+const statusOptions = ref([])
 // 日期范围
-      dateRange: [],
+const dateRange = ref([])
 // 查询参数
-      queryParams: {
+const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
   ipaddr: undefined,
   userName: undefined,
   status: undefined,
-      },
+})
-    };
+
-  },
+const { proxy } = getCurrentInstance()
-  created() {
-    this.getList();
-    this.getDicts("sys_common_status").then((response) => {
-      this.statusOptions = response.data;
-    });
-  },
-  methods: {
 /** 查询登录日志列表 */
-    getList() {
+function getList() {
-      this.loading = true;
+  loading.value = true
-      list(this.addDateRange(this.queryParams, this.dateRange)).then(
+  queryList(proxy.addDateRange(queryParams, dateRange.value)).then((response) => {
-        (response) => {
+    loading.value = false
-          this.loading = false;
     if (response.code == 200) {
-            this.list = response.data.result;
+      list.value = response.data.result
-            this.total = response.data.totalNum;
+      total.value = response.data.totalNum
     } else {
-            this.total = 0;
+      total.value = 0
-            this.list = [];
+      list.value = []
     }
+  })
 }
-      );
-    },
 // 登录状态字典翻译
-    statusFormat(row, column) {
+function statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status);
+  return proxy.selectDictLabel(statusOptions.value, 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",
 }
-      )
+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);
+      return delLogininfor(infoIds)
     })
     .then(() => {
-          this.getList();
+      getList()
-          this.$modal.msgSuccess("删除成功");
+      proxy.$modal.msgSuccess('删除成功')
-        });
+    })
-    },
+}
 /** 清空按钮操作 */
-    handleClean() {
+function handleClean() {
-      this.$confirm("是否确认清空所有登录日志数据项?", "警告", {
+  proxy
-        confirmButtonText: "确定",
+    .$confirm('是否确认清空所有登录日志数据项?', '警告', {
-        cancelButtonText: "取消",
+      confirmButtonText: '确定',
-        type: "warning",
+      cancelButtonText: '取消',
+      type: 'warning',
     })
     .then(function () {
-          return cleanLogininfor();
+      return cleanLogininfor()
     })
     .then(() => {
-          this.getList();
+      getList()
-          this.$modal.msgSuccess("清空成功");
+      proxy.$modal.msgSuccess('清空成功')
-        });
+    })
-    },
+}
 /** 导出按钮操作 */
-    handleExport() {
+function handleExport() {
-      const queryParams = this.queryParams;
+  proxy
-      this.$confirm("是否确认导出所有操作日志数据项?", "警告", {
+    .$confirm('是否确认导出所有操作日志数据项?', '警告', {
-        confirmButtonText: "确定",
+      confirmButtonText: '确定',
-        cancelButtonText: "取消",
+      cancelButtonText: '取消',
-        type: "warning",
+      type: 'warning',
     })
     .then(function () {
-          return exportLogininfor(queryParams);
+      return exportLogininfor(queryParams)
     })
     .then((response) => {
-          this.download(response.data.path);
+      proxy.download(response.data.path)
-        });
+    })
-    },
+}
-  },
-};
 </script>
-

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,36 +136,33 @@
   </div>
 </template>
 
-<script>
+<script setup name="operlog">
-import { list, delOperlog, cleanOperlog, exportOperlog } from '@/api/monitor/operlog'
+import { list as listOperLog, delOperlog, cleanOperlog, exportOperlog } from '@/api/monitor/operlog'
 
-export default {
+const { proxy } = getCurrentInstance()
-  name: 'operlog',
-  data() {
-    return {
 // 遮罩层
-      loading: true,
+const loading = ref(true)
 // 选中数组
-      ids: [],
+const ids = ref([])
 // 非多个禁用
-      multiple: true,
+const multiple = ref(true)
 // 显示搜索条件
-      showSearch: true,
+const showSearch = ref(true)
 // 总条数
-      total: 0,
+const total = ref(0)
 // 表格数据
-      list: [],
+const list = ref([])
 // 是否显示弹出层
-      open: false,
+const open = ref(false)
 // 类型数据字典
-      statusOptions: [],
+const statusOptions = ref([])
 // 业务类型（0其它 1新增 2修改 3删除）选项列表 格式 eg:{ dictLabel: '标签', dictValue: '0'}
-      businessTypeOptions: [],
+const businessTypeOptions = ref([])
 // 日期范围
-      dateRange: [],
+const dateRange = ref([])
-      // 表单参数
+
+const state = reactive({
   form: {},
-      // 查询参数
   queryParams: {
     pageNum: 1,
     pageSize: 20,
@@ -174,64 +171,85 @@ export default {
     businessType: undefined,
     status: undefined,
   },
-    }
+})
-  },
+const { form, queryParams } = toRefs(state)
-  created() {
-    this.getList()
 var dictParams = [
   { dictType: 'sys_oper_type', columnName: 'businessTypeOptions' },
   { dictType: 'sys_common_status', columnName: 'statusOptions' },
 ]
-    this.getDicts(dictParams).then((response) => {
+proxy.getDicts(dictParams).then((response) => {
   response.data.forEach((element) => {
-        this[element.columnName] = element.list
+    proxy[element.columnName] = element.list
   })
 })
-  },
-  methods: {
 /** 查询登录日志 */
-    getList() {
+function getList() {
-      this.loading = true
+  loading.value = true
-      list(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+  listOperLog(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
-        this.loading = false
+    loading.value = false
     if (response.code == 200) {
-          this.list = response.data.result
+      list.value = response.data.result
-          this.total = response.data.totalNum
+      total.value = response.data.totalNum
     } else {
-          this.total = 0
+      total.value = 0
-          this.list = []
+      list.value = []
     }
   })
-    },
+}
 // 操作日志状态字典翻译
-    statusFormat(row, column) {
+function statusFormat(row, column) {
-      return this.selectDictLabel(this.statusOptions, row.status)
+  return proxy.selectDictLabel(statusOptions.value, row.status)
-    },
+}
 /** 搜索按钮操作 */
-    handleQuery() {
+function handleQuery() {
-      this.queryParams.pageNum = 1
+  queryParams.value.pageNum = 1
-      this.getList()
+  getList()
-    },
+}
 /** 重置按钮操作 */
-    resetQuery() {
+function resetQuery() {
-      this.dateRange = []
+  dateRange.value = []
-      this.resetForm('queryForm')
+  proxy.resetForm('queryForm')
-      this.handleQuery()
+  handleQuery()
-    },
+}
 // 多选框选中数据
-    handleSelectionChange(selection) {
+function handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.operId)
+  ids.value = selection.map((item) => item.operId)
-      this.multiple = !selection.length
+  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')
+}
 /** 详细按钮操作 */
-    handleView(row) {
+function handleView(row) {
-      this.open = true
+  reset()
-      this.form = row
+  open.value = true
-    },
+  form.value = row
+}
 /** 删除按钮操作 */
-    handleDelete(row) {
+function handleDelete(row) {
-      const operIds = row.operId || this.ids
+  const operIds = row.operId || ids.value
-      this.$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
+  proxy
+    .$confirm('是否确认删除日志编号为"' + operIds + '"的数据项?', '警告', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
@@ -240,13 +258,14 @@ export default {
       return delOperlog(operIds)
     })
     .then(() => {
-          this.getList()
+      getList()
-          this.$modal.msgSuccess('删除成功')
+      proxy.$modal.msgSuccess('删除成功')
     })
-    },
+}
 /** 清空按钮操作 */
-    handleClean() {
+function handleClean() {
-      this.$confirm('是否确认清空所有操作日志数据项?', '警告', {
+  proxy
+    .$confirm('是否确认清空所有操作日志数据项?', '警告', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
@@ -255,29 +274,29 @@ export default {
       return cleanOperlog()
     })
     .then(() => {
-          this.getList()
+      getList()
-          this.$modal.msgSuccess('清空成功')
+      proxy.$modal.msgSuccess('清空成功')
     })
-    },
+}
 /** 导出按钮操作 */
-    handleExport() {
+function handleExport() {
-      const queryParams = this.queryParams
+  proxy
-      this.$confirm('是否确认导出所有操作日志?', '警告', {
+    .$confirm('是否确认导出所有操作日志?', '警告', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
-      }).then(() => {
+    })
-        exportOperlog(queryParams).then((response) => {
+    .then(() => {
+      exportOperlog(queryParams.value).then((response) => {
         const { code, data } = response
         if (code == 200) {
-            this.$modal.msgSuccess('导出成功')
+          proxy.$modal.msgSuccess('导出成功')
-            this.download(data.path)
+          proxy.download(data.path)
         } else {
-            this.$modal.msgError('导出失败')
+          proxy.$modal.msgError('导出失败')
         }
       })
     })
-    },
-  },
 }
+handleQuery()
 </script>