任务日志页面更换组合式api写法

src/views/monitor/job/log.vue

@@ -26,12 +26,10 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="delete"  :disabled="multiple" @click="handleDelete"
+        <el-button type="danger" plain icon="delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['PRIV_JOBLOG_DELETE']">删除</el-button>
-          v-hasPermi="['PRIV_JOBLOG_DELETE']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="delete"  @click="handleClean" :disabled="total <= 0"
+        <el-button type="danger" plain icon="delete" @click="handleClean" :disabled="total <= 0" v-hasPermi="['PRIV_JOBLOG_REMOVE']">清空</el-button>
-          v-hasPermi="['PRIV_JOBLOG_REMOVE']">清空</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['PRIV_JOBLOG_EXPORT']">导出</el-button>
@@ -69,7 +67,7 @@
 
     <!-- 调度日志详细 -->
     <el-dialog title="调度日志详细" v-model="open" width="700px" append-to-body>
-      <el-form ref="form" :model="form" label-width="100px" >
+      <el-form ref="form" :model="form" label-width="100px">
         <el-row>
           <el-col :span="12">
             <el-form-item label="日志序号：">{{ form.jobLogId }}</el-form-item>
@@ -106,41 +104,31 @@
   </div>
 </template>
 
-<script>
+<script setup name="job/log">
 import {
   listJobLog,
   delJobLog,
   exportJobLog,
   cleanJobLog,
 } from '@/api/monitor/jobLog'
+import { useRoute } from 'vue-router'
+import { getCurrentInstance, reactive, toRefs } from 'vue-demi'
+const { proxy } = getCurrentInstance()
+const route = useRoute()
 
-export default {
+const loading = ref(true)
-  name: 'job/log',
+const ids = ref([])
-  data() {
+const multiple = ref(true)
-    return {
+const showSearch = ref(true)
-      // 遮罩层
+const total = ref(0)
-      loading: true,
+const jobLogList = ref([])
-      // 选中数组
+const open = ref(false)
-      ids: [],
+const dateRange = ref([])
-      // 非多个禁用
+const statusOptions = ref([])
-      multiple: true,
+const jobGroupOptions = ref([])
-      // 显示搜索条件
+
-      showSearch: true,
+const data = reactive({
-      // 总条数
-      total: 0,
-      // 调度日志表格数据
-      jobLogList: [],
-      // 是否显示弹出层
-      open: false,
-      // 日期范围
-      dateRange: [],
-      // 表单参数
   form: {},
-      // 执行状态字典
-      statusOptions: [],
-      // 任务组名字典
-      jobGroupOptions: [],
-      // 查询参数
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -149,63 +137,66 @@ export default {
     status: undefined,
     jobId: undefined,
   },
-    }
+})
-  },
+
-  created() {
+const { form, queryParams } = toRefs(data)
-    this.queryParams.jobId = this.$route.query.jobId
+queryParams.value.jobId = route.query.jobId
-    this.getList()
+
-    this.getDicts('sys_job_status').then((response) => {
+proxy.getDicts('sys_job_status').then((response) => {
-      this.statusOptions = response.data
+  statusOptions.value = response.data
-    })
+})
-    this.getDicts('sys_job_group').then((response) => {
+proxy.getDicts('sys_job_group').then((response) => {
-      this.jobGroupOptions = response.data
+  jobGroupOptions.value = response.data
-    })
+})
-  },
+
-  methods: {
+/** 查询调度日志列表 */
-    /** 查询调度日志列表 */
+function getList() {
-    getList() {
+  loading.value = true
-      this.loading = true
+  listJobLog(proxy.addDateRange(queryParams.value, dateRange.value)).then(
-      listJobLog(this.addDateRange(this.queryParams, this.dateRange)).then(
     (response) => {
-          this.jobLogList = response.data.result
+      jobLogList.value = response.data.result
-          this.total = response.data.totalNum
+      total.value = response.data.totalNum
-          this.loading = false
+      loading.value = false
     }
   )
-    },
+}
-    // 执行状态字典翻译
+
-    statusFormat(row, column) {
+// 执行状态字典翻译
-      return this.selectDictLabel(this.statusOptions, row.status)
+function statusFormat(row, column) {
-    },
+  return proxy.selectDictLabel(statusOptions.value, row.status)
-    // 任务组名字典翻译
+}
-    jobGroupFormat(row, column) {
+// 任务组名字典翻译
-      return this.selectDictLabel(this.jobGroupOptions, row.jobGroup)
+function jobGroupFormat(row, column) {
-    },
+  return proxy.selectDictLabel(jobGroupOptions.value, row.jobGroup)
-    /** 搜索按钮操作 */
+}
-    handleQuery() {
+
-      this.queryParams.pageNum = 1
+/** 搜索按钮操作 */
-      this.getList()
+function handleQuery() {
-    },
+  queryParams.value.pageNum = 1
-    /** 重置按钮操作 */
+  getList()
-    resetQuery() {
+}
-      this.dateRange = []
+/** 重置按钮操作 */
-      this.resetForm('queryForm')
+function resetQuery() {
-      this.handleQuery()
+  dateRange.value = []
-    },
+  resetForm('queryForm')
-    // 多选框选中数据
+  handleQuery()
-    handleSelectionChange(selection) {
+}
-      this.ids = selection.map((item) => item.jobLogId)
+
-      this.multiple = !selection.length
+// 多选框选中数据
-    },
+function handleSelectionChange(selection) {
-    /** 详细按钮操作 */
+  ids.value = selection.map((item) => item.jobLogId)
-    handleView(row) {
+  multiple.value = !selection.length
-      this.open = true
+}
-      this.form = row
+/** 详细按钮操作 */
-    },
+function handleView(row) {
-    /** 删除按钮操作 */
+  open.value = true
-    handleDelete(row) {
+  form.value = row
-      const jobLogIds = this.ids
+}
-      this.$confirm(
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const jobLogIds = ids.value
+  proxy
+    .$confirm(
       '是否确认删除调度日志编号为"' + jobLogIds + '"的数据项?',
       '警告',
       {
@@ -218,13 +209,14 @@ export default {
       return delJobLog(jobLogIds)
     })
     .then(() => {
-          this.getList()
+      getList()
-          this.$modal.msgSuccess('删除成功')
+      proxy.$modal.msgSuccess('删除成功')
     })
-    },
+}
-    /** 清空按钮操作 */
+/** 清空按钮操作 */
-    handleClean() {
+function handleClean() {
-      this.$confirm('是否确认清空所有调度日志数据项?', '警告', {
+  proxy
+    .$confirm('是否确认清空所有调度日志数据项?', '警告', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning',
@@ -233,25 +225,24 @@ export default {
       return cleanJobLog()
     })
     .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(function () {
-          return exportJobLog(queryParams)
+      return exportJobLog(queryParams.value)
     })
     .then((response) => {
-          this.download(response.data.path)
+      proxy.download(response.data.path)
     })
-    },
-  },
 }
+handleQuery()
 </script>