更换组合式API写法

src/views/monitor/job/index.vue

@@ -4,8 +4,7 @@
       <el-col>
         <el-form :inline="true" @submit.prevent>
           <el-form-item>
-            <el-input v-model="queryParams.queryText" placeholder="请输入计划任务名称" clearable prefix-icon="el-icon-search" @keyup.enter="handleQuery"
+            <el-input v-model="queryParams.queryText" placeholder="请输入计划任务名称" clearable prefix-icon="el-icon-search" @keyup.enter="handleQuery" @clear="handleQuery" />
-              @clear="handleQuery" />
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
@@ -18,18 +17,11 @@
       <el-col :span="1.5">
         <el-button v-hasPermi="['monitor:job:add']" plain type="primary" icon="plus" @click="handleCreate">新增</el-button>
       </el-col>
-      <!-- <el-col :span="1.5">
-        <el-button v-hasPermi="['monitor:job:edit']" plain type="success" icon="el-icon-edit" @click="handleRun(null)" :disabled="single">运行一次</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button v-hasPermi="['monitor:job:delete']" plain type="danger" icon="el-icon-remove" @click="handleDelete(null)" :disabled="single">删除</el-button>
-      </el-col>-->
       <el-col :span="1.5">
         <el-button type="warning" plain icon="download" @click="handleExport" v-hasPermi="['monitor:job:export']">导出</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button plain v-hasPermi="['monitor:job:query']" type="info" icon="operation" @click="handleJobLog()">日志
+        <el-button plain v-hasPermi="['monitor:job:query']" type="info" icon="operation" @click="handleJobLog()">日志 </el-button>
-        </el-button>
       </el-col>
       <right-toolbar :showSearch="searchToggle" @queryTable="handleQuery"></right-toolbar>
     </el-row>
@@ -45,29 +37,29 @@
         <el-table-column prop="cron" align="center" label="运行表达式" :show-overflow-tooltip="true" />
         <el-table-column sortable prop="isStart" align="center" label="任务状态" width="100">
           <template #default="scope">
-            <el-tag :type="scope.row.isStart ? 'success' : 'danger'">{{ scope.row.isStart ? "运行中":"已停止" }}</el-tag>
+            <el-tag :type="scope.row.isStart ? 'success' : 'danger'">{{ scope.row.isStart ? '运行中' : '已停止' }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column prop="lastRunTime" align="center" label="最后运行时间" :show-overflow-tooltip="true" />
         <el-table-column prop="remark" align="center" label="备注" :show-overflow-tooltip="true" />
         <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
           <template #default="scope">
-            <el-button type="text" icon="view" v-hasPermi="['monitor:job:query']"
+            <el-button type="text" icon="view" v-hasPermi="['monitor:job:query']" @click="handleJobLog(scope.row.id, scope.row.name)">
-              @click="handleJobLog(scope.row.id, scope.row.name)">
               日志
-              <!-- <router-link :to="{path: 'job/log', query: {jobId: scope.row.id}}">日志</router-link> -->
             </el-button>
-            <el-button type="text" v-if="scope.row.isStart" v-hasPermi="['monitor:job:run']" icon="remove" title="运行"
+            <el-button type="text" v-if="scope.row.isStart" v-hasPermi="['monitor:job:run']" icon="remove" title="运行" @click="handleRun(scope.row)">运行</el-button>
-              @click="handleRun(scope.row)">运行</el-button>
+            <el-button type="text" v-if="scope.row.isStart" v-hasPermi="['monitor:job:stop']" icon="video-pause" style="color: red" title="停止" @click="handleStop(scope.row)">
-            <el-button type="text" v-if="scope.row.isStart" v-hasPermi="['monitor:job:stop']" icon="video-pause" style="color:red"
+              停止
-              title="停止" @click="handleStop(scope.row)">停止</el-button>
+            </el-button>
 
-            <el-button type="text" v-if="!scope.row.isStart" v-hasPermi="['monitor:job:start']" icon="video-play" title="启动"
+            <el-button type="text" v-if="!scope.row.isStart" v-hasPermi="['monitor:job:start']" icon="video-play" title="启动" @click="handleStart(scope.row)">启动</el-button>
-              @click="handleStart(scope.row)">启动</el-button>
+            <el-button type="text" v-if="!scope.row.isStart" v-hasPermi="['monitor:job:edit']" icon="edit" style="color: gray" title="编辑" @click="handleUpdate(scope.row)"
-            <el-button type="text" v-if="!scope.row.isStart" v-hasPermi="['monitor:job:edit']" icon="edit" style="color:gray"
+              >编辑</el-button
-              title="编辑" @click="handleUpdate(scope.row)">编辑</el-button>
+            >
-            <el-button type="text" v-if="!scope.row.isStart" v-hasPermi="['monitor:job:delete']" icon="delete" style="color:red"
+
-              title="删除" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button type="text" v-if="!scope.row.isStart" v-hasPermi="['monitor:job:delete']" icon="delete" style="color: red" title="删除" @click="handleDelete(scope.row)"
+              >删除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -75,11 +67,11 @@
     </el-row>
 
     <el-dialog :title="title" v-model="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
         <el-row>
           <el-col :lg="24" v-if="this.form.id">
             <el-form-item label="任务ID">
-              <div>{{form.id}}</div>
+              <div>{{ form.id }}</div>
             </el-form-item>
           </el-col>
           <el-col :lg="12">
@@ -89,7 +81,7 @@
           </el-col>
           <el-col :lg="12">
             <el-form-item label="触发器类型" prop="triggerType">
-              <el-select v-model="form.triggerType" placeholder="请选择触发器类型" style="width:100%">
+              <el-select v-model="form.triggerType" placeholder="请选择触发器类型" style="width: 100%">
                 <el-option v-for="item in triggerTypeOptions" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
               </el-select>
             </el-form-item>
@@ -113,7 +105,7 @@
           <el-col :lg="24" v-if="form.taskType == 2">
             <el-form-item label="apiUrl" prop="apiUrl">
               <el-input v-model="form.apiUrl" placeholder="远程调用接口url">
-                <!-- <template #default="prepend">Http://</template> -->
+                <template #prepend>http://</template>
               </el-input>
             </el-form-item>
           </el-col>
@@ -171,12 +163,12 @@
                 </span>
               </template>
 
-              <el-date-picker v-model="form.beginTime" style="width:100%" type="date" :picker-options="pickerOptions" placeholder="选择开始日期" />
+              <el-date-picker v-model="form.beginTime" style="width: 100%" type="date" :picker-options="pickerOptions" placeholder="选择开始日期" />
             </el-form-item>
           </el-col>
           <el-col :lg="12">
             <el-form-item label="结束日期" prop="endTime">
-              <el-date-picker v-model="form.endTime" style="width:100%" type="date" placeholder="选择结束日期" />
+              <el-date-picker v-model="form.endTime" style="width: 100%" type="date" placeholder="选择结束日期" />
             </el-form-item>
           </el-col>
           <el-col :lg="24">
@@ -206,8 +198,8 @@
     <el-drawer :title="logTitle" v-model="drawer">
       <el-timeline>
         <el-timeline-item :timestamp="item.createTime" placement="top" v-for="(item, i) in jobLogList" :key="i">
-          <h4>{{item.jobMessage}}</h4>
+          <h4>{{ item.jobMessage }}</h4>
-          <p>{{item.exception}}</p>
+          <p>{{ item.exception }}</p>
         </el-timeline-item>
       </el-timeline>
       <el-empty v-if="jobLogList.length <= 0"></el-empty>
@@ -215,373 +207,337 @@
   </div>
 </template>
 
-<script>
+<script setup name="job">
-import {
+import { queryTasks, getTasks, createTasks, updateTasks, deleteTasks, startTasks, stopTasks, runTasks, exportTasks } from '@/api/monitor/job'
-  queryTasks,
-  getTasks,
-  createTasks,
-  updateTasks,
-  deleteTasks,
-  startTasks,
-  stopTasks,
-  runTasks,
-  exportTasks,
-} from '@/api/monitor/job'
 import { listJobLog } from '@/api/monitor/jobLog'
 // import Crontab from '@/components/Crontab'
 
-export default {
+var cronValidate = (rule, value, callback) => {
-  name: 'job',
+  if (form.value.triggerType === 1) {
-  // components: { Crontab },
+    if (value === '' || value === undefined) {
-  data() {
+      callback(new Error('运行时间表达式不能为空!'))
-    var cronValidate = (rule, value, callback) => {
+    } else {
-      if (this.form.triggerType === 1) {
+      callback()
-        if (value === '' || value === undefined) {
-          callback(new Error('运行时间表达式不能为空!'))
-        } else {
-          callback()
-        }
-      } else {
-        callback()
-      }
     }
-    var beginTimeValidate = (rule, value, callback) => {
+  } else {
-      if (this.form.triggerType === 0) {
+    callback()
-        if (value === '' || value === undefined) {
+  }
-          callback(new Error('选择开始日期!'))
-        } else {
-          callback()
-        }
-      } else {
-        callback()
-      }
-    }
-    var endTimeValidate = (rule, value, callback) => {
-      if (this.form.triggerType === 0) {
-        if (value === '' || value === undefined) {
-          callback(new Error('选择结束日期!'))
-        } else {
-          callback()
-        }
-      } else {
-        callback()
-      }
-    }
-    var intervalSecondValidate = (rule, value, callback) => {
-      if (this.form.triggerType === 0) {
-        if (value === '' || value === undefined) {
-          callback(new Error('请设置执行间隔!'))
-        } else {
-          callback()
-        }
-      } else {
-        callback()
-      }
-    }
-    return {
-      // 是否显示Cron表达式弹出层
-      openCron: false,
-      // 传入的表达式
-      expression: '',
-      drawer: false,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
-      // 是否显示弹出层
-      open: false,
-      // 表单
-      form: {},
-      // 表单标题
-      title: '',
-      // 显示搜索
-      searchToggle: true,
-      // 表格高度
-      tableHeight: window.innerHeight,
-      // 合计条数
-      total: 0,
-      // 遮罩层
-      loading: true,
-      // 查询参数
-      queryParams: {
-        queryText: undefined,
-        PageNum: 1,
-        pageSize: 10,
-        orderby: 'createTime',
-        sort: 'descending',
-      },
-      // 计划任务列表
-      dataTasks: [],
-      // 任务日志列表
-      jobLogList: [],
-      logTitle: '',
-      // 任务状态字典
-      isStartOptions: [
-        { dictLabel: '运行中', dictValue: 'true' },
-        { dictLabel: '已停止', dictValue: 'false', listClass: 'danger' },
-      ],
-      // 任务组名字典
-      jobGroupOptions: [],
-      // 触发器类型
-      triggerTypeOptions: [
-        {
-          label: '[普通]',
-          value: 0,
-        },
-        {
-          label: '[表达式]',
-          value: 1,
-        },
-      ],
-      // 表单校验
-      rules: {
-        name: [
-          { required: true, message: '任务名称不能为空', trigger: 'blur' },
-        ],
-        jobGroup: [
-          { required: true, message: '任务分组不能为空', trigger: 'blur' },
-        ],
-        assemblyName: [
-          { required: true, message: '程序集名称不能为空', trigger: 'blur' },
-        ],
-        className: [
-          { required: true, message: '任务类名不能为空', trigger: 'blur' },
-        ],
-        triggerType: [
-          { required: true, message: '请选择触发器类型', trigger: 'blur' },
-        ],
-        apiUrl: [
-          { required: true, message: '请输入apiUrl地址', trigger: 'blur' },
-        ],
-        cron: [{ validator: cronValidate, trigger: 'blur' }],
-        beginTime: [{ validator: beginTimeValidate, trigger: 'blur' }],
-        endTime: [{ validator: endTimeValidate, trigger: 'blur' }],
-        intervalSecond: [
-          {
-            validator: intervalSecondValidate,
-            type: 'number',
-            trigger: 'blur',
-          },
-        ],
-      },
-      // 时间的选择
-      pickerOptions: {
-        disabledDate(time) {
-          return time.getTime() < Date.now() - 8.64e7
-        },
-      },
-    }
-  },
-  created() {
-    this.getList()
-    this.getDicts('sys_job_group').then((response) => {
-      this.jobGroupOptions = response.data
-    })
-  },
-  watch: {
-    'form.triggerType': {
-      handler(val) {
-        console.log(val)
-        if (val == 0) {
-          this.form.cron = undefined
-        }
-      },
-      deep: true,
-      immediate: true,
-    },
-  },
-  methods: {
-    /** 查询计划任务列表 */
-    getList() {
-      this.loading = true
-      queryTasks(this.queryParams).then((response) => {
-        this.dataTasks = response.data.result
-        this.total = response.data.totalNum
-        this.loading = false
-      })
-    },
-    handleQuery() {
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    handleReset() {
-      this.queryParams.queryText = ''
-      this.getList()
-    },
-    /** 新增按钮操作 */
-    handleCreate() {
-      this.reset()
-      this.open = true
-      this.title = '添加计划任务'
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset()
-
-      getTasks(row.id).then((res) => {
-        this.form = res.data
-        this.open = true
-        this.title = '修改计划任务'
-      })
-    },
-    /** 任务日志列表查询 */
-    handleJobLog(id, title) {
-      if (id == undefined) {
-        this.$router.push({ path: 'job/log' })
-      } else {
-        this.drawer = true
-        this.jobLogList = []
-        this.logTitle = title
-        listJobLog({ JobId: id }).then((response) => {
-          this.jobLogList = response.data.result
-        })
-      }
-    },
-    /** cron表达式按钮操作 */
-    handleShowCron() {
-      this.expression = this.form.cron
-      this.openCron = true
-    },
-    /** 确定后回传值 */
-    crontabFill(value) {
-      console.log(value)
-      this.form.cron = value
-    },
-    // 启动按钮
-    handleStart(row) {
-      startTasks(row.id).then((response) => {
-        if (response.code === 200) {
-          this.$modal.msgSuccess(response.msg)
-          this.open = false
-          this.getList()
-        }
-      })
-    },
-    // 停止按钮
-    handleStop(row) {
-      stopTasks(row.id).then((response) => {
-        if (response.code === 200) {
-          this.$modal.msgSuccess(response.msg)
-          this.open = false
-          this.getList()
-        }
-      })
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const jobInfo = row
-
-      this.$confirm(
-        '是否确认删除名称为"' + jobInfo.name + '"的计划任务?',
-        '警告',
-        {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning',
-        }
-      )
-        .then(() => {
-          deleteTasks(jobInfo.id).then((response) => {
-            if (response.code === 200) {
-              this.getList()
-              this.$modal.msgSuccess('删除成功')
-            }
-          })
-        })
-        .catch(function () {})
-    },
-    /* 立即执行一次 */
-    handleRun(row) {
-      const jobInfo = row
-
-      this.$confirm('确认要立即执行一次"' + jobInfo.name + '"任务吗?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }).then((res) => {
-        runTasks(jobInfo.id).then((res) => {
-          if (res.code === 200) {
-            this.$modal.msgSuccess('执行成功')
-            this.getList()
-          }
-        })
-      })
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          if (this.form.id !== undefined) {
-            updateTasks(this.form).then((response) => {
-              if (response.code === 200) {
-                this.$modal.msgSuccess('修改成功')
-                this.open = false
-                this.getList()
-              }
-            })
-          } else {
-            createTasks(this.form).then((response) => {
-              if (response.code === 200) {
-                this.$modal.msgSuccess('新增成功')
-                this.open = false
-                this.getList()
-              }
-            })
-          }
-        }
-      })
-    },
-    // 排序操作
-    handleSortable(val) {
-      this.queryParams.orderby = val.prop
-      this.queryParams.sort = val.order
-      this.getList()
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        id: undefined,
-        name: undefined,
-        jobGroup: undefined,
-        assemblyName: 'ZR.Tasks',
-        className: undefined,
-        jobParams: undefined,
-        triggerType: 1,
-        beginTime: undefined,
-        endTime: undefined,
-        intervalSecond: 1,
-        cron: undefined,
-        taskType: 1,
-      }
-      this.resetForm('form')
-    },
-    // 自动计算分页 Id
-    handleIndexCalc(index) {
-      return (
-        (this.queryParams.PageNum - 1) * this.queryParams.pageSize + index + 1
-      )
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false
-      this.reset()
-    },
-    /** 导出按钮操作 */
-    handleExport() {
-      this.$confirm('是否确认导出所有任务?', '警告', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      })
-        .then(() => {
-          return exportTasks()
-        })
-        .then((response) => {
-          this.download(response.data.path)
-        })
-    },
-  },
 }
+var beginTimeValidate = (rule, value, callback) => {
+  if (form.value.triggerType === 0) {
+    if (value === '' || value === undefined) {
+      callback(new Error('选择开始日期!'))
+    } else {
+      callback()
+    }
+  } else {
+    callback()
+  }
+}
+var endTimeValidate = (rule, value, callback) => {
+  if (form.value.triggerType === 0) {
+    if (value === '' || value === undefined) {
+      callback(new Error('选择结束日期!'))
+    } else {
+      callback()
+    }
+  } else {
+    callback()
+  }
+}
+var intervalSecondValidate = (rule, value, callback) => {
+  if (form.value.triggerType === 0) {
+    if (value === '' || value === undefined) {
+      callback(new Error('请设置执行间隔!'))
+    } else {
+      callback()
+    }
+  } else {
+    callback()
+  }
+}
+const router = useRouter()
+const { proxy } = getCurrentInstance()
+// 是否显示Cron表达式弹出层
+const openCron = ref(false)
+// 传入的表达式
+const expression = ref('')
+const drawer = ref(false)
+// 是否显示弹出层
+const open = ref(false)
+// 表单标题
+const title = ref('')
+// 显示搜索
+const searchToggle = ref(true)
+// 合计条数
+const total = ref(0)
+// 遮罩层
+const loading = ref(true)
+// 查询参数
+const queryParams = reactive({
+  queryText: undefined,
+  PageNum: 1,
+  pageSize: 10,
+  orderby: 'createTime',
+  sort: 'descending',
+})
+// 计划任务列表
+const dataTasks = ref([])
+// 任务日志列表
+const jobLogList = ref([])
+const logTitle = ref('')
+const formRef = ref()
+// 任务状态字典
+const isStartOptions = ref([
+  { dictLabel: '运行中', dictValue: 'true' },
+  { dictLabel: '已停止', dictValue: 'false', listClass: 'danger' },
+])
+// 任务组名字典
+const jobGroupOptions = ref([])
+// 触发器类型
+const triggerTypeOptions = ref([
+  {
+    label: '[普通]',
+    value: 0,
+  },
+  {
+    label: '[表达式]',
+    value: 1,
+  },
+])
+const state = reactive({
+  form: {},
+  // 表单校验
+  rules: {
+    name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
+    jobGroup: [{ required: true, message: '任务分组不能为空', trigger: 'blur' }],
+    assemblyName: [{ required: true, message: '程序集名称不能为空', trigger: 'blur' }],
+    className: [{ required: true, message: '任务类名不能为空', trigger: 'blur' }],
+    triggerType: [{ required: true, message: '请选择触发器类型', trigger: 'blur' }],
+    apiUrl: [{ required: true, message: '请输入apiUrl地址', trigger: 'blur' }],
+    cron: [{ validator: cronValidate, trigger: 'blur' }],
+    beginTime: [{ validator: beginTimeValidate, trigger: 'blur' }],
+    endTime: [{ validator: endTimeValidate, trigger: 'blur' }],
+    intervalSecond: [
+      {
+        validator: intervalSecondValidate,
+        type: 'number',
+        trigger: 'blur',
+      },
+    ],
+  },
+})
+const { rules, form } = toRefs(state)
+// 时间的选择
+const pickerOptions = reactive({
+  disabledDate(time) {
+    return time.getTime() < Date.now() - 8.64e7
+  },
+})
+/** 查询计划任务列表 */
+function getList() {
+  loading.value = true
+  queryTasks(queryParams).then((response) => {
+    dataTasks.value = response.data.result
+    total.value = response.data.totalNum
+    loading.value = false
+  })
+}
+function handleQuery() {
+  getList()
+}
+/** 重置按钮操作 */
+function handleReset() {
+  queryParams.queryText = ''
+  getList()
+}
+/** 新增按钮操作 */
+function handleCreate() {
+  reset()
+  open.value = true
+  title.value = '添加计划任务'
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+
+  getTasks(row.id).then((res) => {
+    form.value = res.data
+    open.value = true
+    title.value = '修改计划任务'
+  })
+}
+
+/** 任务日志列表查询 */
+function handleJobLog(id, title) {
+  if (id == undefined) {
+    router.push({ path: 'job/log' })
+  } else {
+    drawer.value = true
+    jobLogList.value = []
+    logTitle.value = title
+    listJobLog({ JobId: id }).then((response) => {
+      jobLogList.value = response.data.result
+    })
+  }
+}
+/** cron表达式按钮操作 */
+function handleShowCron() {
+  expression.value = form.value.cron
+  openCron.value = true
+}
+/** 确定后回传值 */
+function crontabFill(value) {
+  console.log(value)
+  form.value.cron = value
+}
+// 启动按钮
+function handleStart(row) {
+  startTasks(row.id).then((response) => {
+    if (response.code === 200) {
+      proxy.$modal.msgSuccess(response.msg)
+      open.value = false
+      getList()
+    }
+  })
+}
+// 停止按钮
+function handleStop(row) {
+  stopTasks(row.id).then((response) => {
+    if (response.code === 200) {
+      proxy.$modal.msgSuccess(response.msg)
+      open.value = false
+      getList()
+    }
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const jobInfo = row
+
+  proxy
+    .$confirm('是否确认删除名称为"' + jobInfo.name + '"的计划任务?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      deleteTasks(jobInfo.id).then((response) => {
+        if (response.code === 200) {
+          getList()
+          proxy.$modal.msgSuccess('删除成功')
+        }
+      })
+    })
+    .catch(function () {})
+}
+/* 立即执行一次 */
+function handleRun(row) {
+  const jobInfo = row
+
+  proxy
+    .$confirm('确认要立即执行一次"' + jobInfo.name + '"任务吗?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then((res) => {
+      runTasks(jobInfo.id).then((res) => {
+        if (res.code === 200) {
+          proxy.$modal.msgSuccess('执行成功')
+          getList()
+        }
+      })
+    })
+}
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs['formRef'].validate((valid) => {
+    if (valid) {
+      if (form.value.id !== undefined) {
+        updateTasks(form.value).then((response) => {
+          if (response.code === 200) {
+            proxy.$modal.msgSuccess('修改成功')
+            open.value = false
+            getList()
+          }
+        })
+      } else {
+        createTasks(form.value).then((response) => {
+          if (response.code === 200) {
+            proxy.$modal.msgSuccess('新增成功')
+            open.value = false
+            getList()
+          }
+        })
+      }
+    }
+  })
+}
+// 排序操作
+function handleSortable(val) {
+  queryParams.orderby = val.prop
+  queryParams.sort = val.order
+  getList()
+}
+// 表单重置
+function reset() {
+  form.value = {
+    id: undefined,
+    name: undefined,
+    jobGroup: undefined,
+    assemblyName: 'ZR.Tasks',
+    className: undefined,
+    jobParams: undefined,
+    triggerType: 1,
+    beginTime: undefined,
+    endTime: undefined,
+    intervalSecond: 1,
+    cron: undefined,
+    taskType: 1,
+  }
+  proxy.resetForm('formRef')
+}
+// 自动计算分页 Id
+function handleIndexCalc(index) {
+  return (queryParams.PageNum - 1) * queryParams.pageSize + index + 1
+}
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+/** 导出按钮操作 */
+function handleExport() {
+  proxy
+    .$confirm('是否确认导出所有任务?', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      return exportTasks()
+    })
+    .then((response) => {
+      proxy.download(response.data.path)
+    })
+}
+
+getList()
+proxy.getDicts('sys_job_group').then((response) => {
+  jobGroupOptions.value = response.data
+})
+watch(
+  () => form.value.triggerType,
+  (val) => {
+    console.log(val)
+    if (val == 0) {
+      form.value.cron = undefined
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
 </script>

src/views/monitor/job/log.vue

@@ -15,8 +15,15 @@
         </el-select>
       </el-form-item>
       <el-form-item label="执行时间">
-        <el-date-picker v-model="dateRange" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
+        <el-date-picker
-          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+          v-model="dateRange"
+          style="width: 240px"
+          value-format="YYYY-MM-DD"
+          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>
@@ -47,8 +54,7 @@
       <el-table-column label="执行状态" align="center" prop="status" :formatter="statusFormat" />
       <el-table-column label="作业用时" align="center" prop="elapsed">
         <template #default="scope">
-          <span :style="scope.row.elapsed < 1000 ? 'color:green':scope.row.elapsed <3000 ?'color:orange':'color:red'">{{ scope.row.elapsed /1000 }}
+          <span :style="scope.row.elapsed < 1000 ? 'color:green' : scope.row.elapsed < 3000 ? 'color:orange' : 'color:red'">{{ scope.row.elapsed / 1000 }} ms</span>
-            ms</span>
         </template>
       </el-table-column>
       <el-table-column label="执行时间" align="center" prop="createTime" width="180">
@@ -89,7 +95,8 @@
               <div v-else-if="form.status == 1">失败</div>
             </el-form-item>
           </el-col>
-          <el-col :span="24" v-if="form.status == 1">>
+          <el-col :span="24" v-if="form.status == 1"
+            >>
             <el-form-item label="异常信息：">{{ form.exception }}</el-form-item>
           </el-col>
         </el-row>
@@ -99,20 +106,12 @@
           <el-button type="text" @click="open = false">关 闭</el-button>
         </div>
       </template>
-
     </el-dialog>
   </div>
 </template>
 
 <script setup name="job/log">
-import {
+import { listJobLog, delJobLog, exportJobLog, cleanJobLog } from '@/api/monitor/jobLog'
-  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()
 
@@ -152,13 +151,11 @@ proxy.getDicts('sys_job_group').then((response) => {
 /** 查询调度日志列表 */
 function getList() {
   loading.value = true
-  listJobLog(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+  listJobLog(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
-    (response) => {
+    jobLogList.value = response.data.result
-      jobLogList.value = response.data.result
+    total.value = response.data.totalNum
-      total.value = response.data.totalNum
+    loading.value = false
-      loading.value = false
+  })
-    }
-  )
 }
 
 // 执行状态字典翻译
@@ -196,15 +193,11 @@ function handleView(row) {
 function handleDelete(row) {
   const jobLogIds = ids.value
   proxy
-    .$confirm(
+    .$confirm('是否确认删除调度日志编号为"' + jobLogIds + '"的数据项?', '警告', {
-      '是否确认删除调度日志编号为"' + jobLogIds + '"的数据项?',
+      confirmButtonText: '确定',
-      '警告',
+      cancelButtonText: '取消',
-      {
+      type: 'warning',
-        confirmButtonText: '确定',
+    })
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-    )
     .then(function () {
       return delJobLog(jobLogIds)
     })