新增树分割组件TreePanel

RuoYi

2026-04-02 19cb8327f006f12403ea8591a22debd0ea26d43f

 ruoyi-ui/src/views/monitor/job/index.vue

@@ -1,17 +1,16 @@
<template>

  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="任务名称" prop="jobName">

        <el-input

          v-model="queryParams.jobName"

          placeholder="请输入任务名称"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="任务组名" prop="jobGroup">

        <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable size="small">

        <el-select v-model="queryParams.jobGroup" placeholder="请选择任务组名" clearable>

          <el-option

            v-for="dict in dict.type.sys_job_group"

            :key="dict.value"

@@ -21,7 +20,7 @@
        </el-select>

      </el-form-item>

      <el-form-item label="任务状态" prop="status">

        <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable size="small">

        <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>

          <el-option

            v-for="dict in dict.type.sys_job_status"

            :key="dict.value"

@@ -95,7 +94,11 @@
    <el-table v-loading="loading" :data="jobList" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="任务编号" width="100" align="center" prop="jobId" />

      <el-table-column label="任务名称" align="center" prop="jobName" :show-overflow-tooltip="true" />

      <el-table-column label="任务名称" align="center" :show-overflow-tooltip="true">

        <template slot-scope="scope">

          <a class="link-type" style="cursor:pointer" @click="handleView(scope.row)">{{ scope.row.jobName }}</a>

        </template>

      </el-table-column>

      <el-table-column label="任务组名" align="center" prop="jobGroup">

        <template slot-scope="scope">

          <dict-tag :options="dict.type.sys_job_group" :value="scope.row.jobGroup"/>

@@ -130,14 +133,10 @@
            v-hasPermi="['monitor:job:remove']"

          >删除</el-button>

          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['monitor:job:changeStatus', 'monitor:job:query']">

            <span class="el-dropdown-link">

              <i class="el-icon-d-arrow-right el-icon--right"></i>更多

            </span>

            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>

            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item command="handleRun" icon="el-icon-caret-right"

                v-hasPermi="['monitor:job:changeStatus']">执行一次</el-dropdown-item>

              <el-dropdown-item command="handleView" icon="el-icon-view"

                v-hasPermi="['monitor:job:query']">任务详细</el-dropdown-item>

              <el-dropdown-item command="handleJobLog" icon="el-icon-s-operation"

                v-hasPermi="['monitor:job:query']">调度日志</el-dropdown-item>

            </el-dropdown-menu>

@@ -165,7 +164,7 @@
          </el-col>

          <el-col :span="12">

            <el-form-item label="任务分组" prop="jobGroup">

              <el-select v-model="form.jobGroup" placeholder="请选择">

              <el-select v-model="form.jobGroup" placeholder="请选择任务分组">

                <el-option

                  v-for="dict in dict.type.sys_job_group"

                  :key="dict.value"

@@ -203,8 +202,19 @@
              </el-input>

            </el-form-item>

          </el-col>

          <el-col :span="24">

            <el-form-item label="错误策略" prop="misfirePolicy">

          <el-col :span="24" v-if="form.jobId !== undefined">

            <el-form-item label="状态">

              <el-radio-group v-model="form.status">

                <el-radio

                  v-for="dict in dict.type.sys_job_status"

                  :key="dict.value"

                  :label="dict.value"

                >{{dict.label}}</el-radio>

              </el-radio-group>

            </el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="执行策略" prop="misfirePolicy">

              <el-radio-group v-model="form.misfirePolicy" size="small">

                <el-radio-button label="1">立即执行</el-radio-button>

                <el-radio-button label="2">执行一次</el-radio-button>

@@ -217,17 +227,6 @@
              <el-radio-group v-model="form.concurrent" size="small">

                <el-radio-button label="0">允许</el-radio-button>

                <el-radio-button label="1">禁止</el-radio-button>

              </el-radio-group>

            </el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="状态">

              <el-radio-group v-model="form.status">

                <el-radio

                  v-for="dict in dict.type.sys_job_status"

                  :key="dict.value"

                  :label="dict.value"

                >{{dict.label}}</el-radio>

              </el-radio-group>

            </el-form-item>

          </el-col>

@@ -244,61 +243,17 @@
    </el-dialog>



    <!-- 任务日志详细 -->

    <el-dialog title="任务详细" :visible.sync="openView" width="700px" append-to-body>

      <el-form ref="form" :model="form" label-width="120px" size="mini">

        <el-row>

          <el-col :span="12">

            <el-form-item label="任务编号：">{{ form.jobId }}</el-form-item>

            <el-form-item label="任务名称：">{{ form.jobName }}</el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="任务分组：">{{ jobGroupFormat(form) }}</el-form-item>

            <el-form-item label="创建时间：">{{ form.createTime }}</el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="cron表达式：">{{ form.cronExpression }}</el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="下次执行时间：">{{ parseTime(form.nextValidTime) }}</el-form-item>

          </el-col>

          <el-col :span="24">

            <el-form-item label="调用目标方法：">{{ form.invokeTarget }}</el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="任务状态：">

              <div v-if="form.status == 0">正常</div>

              <div v-else-if="form.status == 1">失败</div>

            </el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="是否并发：">

              <div v-if="form.concurrent == 0">允许</div>

              <div v-else-if="form.concurrent == 1">禁止</div>

            </el-form-item>

          </el-col>

          <el-col :span="12">

            <el-form-item label="执行策略：">

              <div v-if="form.misfirePolicy == 0">默认策略</div>

              <div v-else-if="form.misfirePolicy == 1">立即执行</div>

              <div v-else-if="form.misfirePolicy == 2">执行一次</div>

              <div v-else-if="form.misfirePolicy == 3">放弃执行</div>

            </el-form-item>

          </el-col>

        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button @click="openView = false">关 闭</el-button>

      </div>

    </el-dialog>

    <job-detail :visible.sync="openView" :row="form" type="job" />

  </div>

</template>



<script>

import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job";

import { listJob, getJob, delJob, addJob, updateJob, runJob, changeJobStatus } from "@/api/monitor/job"

import JobDetail from './detail'

import Crontab from '@/components/Crontab'



export default {

  components: { Crontab },

  components: { Crontab, JobDetail },

  name: "Job",

  dicts: ['sys_job_group', 'sys_job_status'],

  data() {

@@ -349,29 +304,29 @@
          { required: true, message: "cron执行表达式不能为空", trigger: "blur" }

        ]

      }

    };

    }

  },

  created() {

    this.getList();

    this.getList()

  },

  methods: {

    /** 查询定时任务列表 */

    getList() {

      this.loading = true;

      this.loading = true

      listJob(this.queryParams).then(response => {

        this.jobList = response.rows;

        this.total = response.total;

        this.loading = false;

      });

        this.jobList = response.rows

        this.total = response.total

        this.loading = false

      })

    },

    // 任务组名字典翻译

    jobGroupFormat(row, column) {

      return this.selectDictLabel(this.dict.type.sys_job_group, row.jobGroup);

      return this.selectDictLabel(this.dict.type.sys_job_group, row.jobGroup)

    },

    // 取消按钮

    cancel() {

      this.open = false;

      this.reset();

      this.open = false

      this.reset()

    },

    // 表单重置

    reset() {

@@ -384,138 +339,126 @@
        misfirePolicy: 1,

        concurrent: 1,

        status: "0"

      };

      this.resetForm("form");

      }

      this.resetForm("form")

    },

    /** 搜索按钮操作 */

    handleQuery() {

      this.queryParams.pageNum = 1;

      this.getList();

      this.queryParams.pageNum = 1

      this.getList()

    },

    /** 重置按钮操作 */

    resetQuery() {

      this.resetForm("queryForm");

      this.handleQuery();

      this.resetForm("queryForm")

      this.handleQuery()

    },

    // 多选框选中数据

    handleSelectionChange(selection) {

      this.ids = selection.map(item => item.jobId);

      this.single = selection.length != 1;

      this.multiple = !selection.length;

      this.ids = selection.map(item => item.jobId)

      this.single = selection.length != 1

      this.multiple = !selection.length

    },

    // 更多操作触发

    handleCommand(command, row) {

      switch (command) {

        case "handleRun":

          this.handleRun(row);

          break;

          this.handleRun(row)

          break

        case "handleView":

          this.handleView(row);

          break;

          this.handleView(row)

          break

        case "handleJobLog":

          this.handleJobLog(row);

          break;

          this.handleJobLog(row)

          break

        default:

          break;

          break

      }

    },

    // 任务状态修改

    handleStatusChange(row) {

      let text = row.status === "0" ? "启用" : "停用";

      this.$confirm('确认要"' + text + '""' + row.jobName + '"任务吗?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return changeJobStatus(row.jobId, row.status);

        }).then(() => {

          this.msgSuccess(text + "成功");

        }).catch(function() {

          row.status = row.status === "0" ? "1" : "0";

        });

      let text = row.status === "0" ? "启用" : "停用"

      this.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗？').then(function() {

        return changeJobStatus(row.jobId, row.status)

      }).then(() => {

        this.$modal.msgSuccess(text + "成功")

      }).catch(function() {

        row.status = row.status === "0" ? "1" : "0"

      })

    },

    /* 立即执行一次 */

    handleRun(row) {

      this.$confirm('确认要立即执行一次"' + row.jobName + '"任务吗?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return runJob(row.jobId, row.jobGroup);

        }).then(() => {

          this.msgSuccess("执行成功");

        }).catch(() => {});

      this.$modal.confirm('确认要立即执行一次"' + row.jobName + '"任务吗？').then(function() {

        return runJob(row.jobId, row.jobGroup)

      }).then(() => {

        this.$modal.msgSuccess("执行成功")

      }).catch(() => {})

    },

    /** 任务详细信息 */

    handleView(row) {

      getJob(row.jobId).then(response => {

        this.form = response.data;

        this.openView = true;

      });

        this.form = response.data

        this.openView = true

      })

    },

    /** cron表达式按钮操作 */

    handleShowCron() {

      this.expression = this.form.cronExpression;

      this.openCron = true;

      this.expression = this.form.cronExpression

      this.openCron = true

    },

    /** 确定后回传值 */

    crontabFill(value) {

      this.form.cronExpression = value;

      this.form.cronExpression = value

    },

    /** 任务日志列表查询 */

    handleJobLog(row) {

      const jobId = row.jobId || 0;

      this.$router.push({ path: '/monitor/job-log/index', query: { jobId: jobId } })

      const jobId = row.jobId || 0

      this.$router.push('/monitor/job-log/index/' + jobId)

    },

    /** 新增按钮操作 */

    handleAdd() {

      this.reset();

      this.open = true;

      this.title = "添加任务";

      this.reset()

      this.open = true

      this.title = "添加任务"

    },

    /** 修改按钮操作 */

    handleUpdate(row) {

      this.reset();

      const jobId = row.jobId || this.ids;

      this.reset()

      const jobId = row.jobId || this.ids

      getJob(jobId).then(response => {

        this.form = response.data;

        this.open = true;

        this.title = "修改任务";

      });

        this.form = response.data

        this.open = true

        this.title = "修改任务"

      })

    },

    /** 提交按钮 */

    submitForm: function() {

    submitForm() {

      this.$refs["form"].validate(valid => {

        if (valid) {

          if (this.form.jobId != undefined) {

            updateJob(this.form).then(response => {

              this.msgSuccess("修改成功");

              this.open = false;

              this.getList();

            });

            updateJob(this.form).then(() => {

              this.$modal.msgSuccess("修改成功")

              this.open = false

              this.getList()

            })

          } else {

            addJob(this.form).then(response => {

              this.msgSuccess("新增成功");

              this.open = false;

              this.getList();

            });

            addJob(this.form).then(() => {

              this.$modal.msgSuccess("新增成功")

              this.open = false

              this.getList()

            })

          }

        }

      });

      })

    },

    /** 删除按钮操作 */

    handleDelete(row) {

      const jobIds = row.jobId || this.ids;

      this.$confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return delJob(jobIds);

        }).then(() => {

          this.getList();

          this.msgSuccess("删除成功");

        }).catch(() => {});

      const jobIds = row.jobId || this.ids

      this.$modal.confirm('是否确认删除定时任务编号为"' + jobIds + '"的数据项？').then(function() {

        return delJob(jobIds)

      }).then(() => {

        this.getList()

        this.$modal.msgSuccess("删除成功")

      }).catch(() => {})

    },

    /** 导出按钮操作 */

    handleExport() {

@@ -524,5 +467,5 @@
      }, `job_${new Date().getTime()}.xlsx`)

    }

  }

};

</script>
}

</script>