新增树分割组件TreePanel

RuoYi

2026-04-02 19cb8327f006f12403ea8591a22debd0ea26d43f

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

@@ -94,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"/>

@@ -133,8 +137,6 @@
            <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>

@@ -241,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() {

@@ -346,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() {

@@ -381,126 +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" ? "启用" : "停用";

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

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

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

        return changeJobStatus(row.jobId, row.status)

      }).then(() => {

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

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

      }).catch(function() {

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

      });

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

      })

    },

    /* 立即执行一次 */

    handleRun(row) {

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

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

        return runJob(row.jobId, row.jobGroup)

      }).then(() => {

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

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

        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;

      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(() => {

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

              this.open = false;

              this.getList();

            });

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

              this.open = false

              this.getList()

            })

          } else {

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

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

              this.open = false;

              this.getList();

            });

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

              this.open = false

              this.getList()

            })

          }

        }

      });

      })

    },

    /** 删除按钮操作 */

    handleDelete(row) {

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

      const jobIds = row.jobId || this.ids

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

        return delJob(jobIds);

        return delJob(jobIds)

      }).then(() => {

        this.getList();

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

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

        this.getList()

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

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

    },

    /** 导出按钮操作 */

    handleExport() {

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

    }

  }

};

}

</script>