docking-vue/src/views/schedule/job/index.vue

<template>
  <div>
    <app-table v-model:pagination="pagination" :data="list" @get-data="getData">
      <el-table-column prop="beanName" label="名称" />
      <el-table-column prop="params" label="参数" />
      <el-table-column prop="cronExpression" label="cron表达式" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="状态">
        <template #default="{ row }">
          <el-tag v-if="row.status === 0" size="small">正常</el-tag>
          <el-tag v-else size="small" type="danger">暂停</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="200" label="操作">
        <template #default="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="fnAddOrEdit(row.jobId, 'edit')"
          >
            修改
          </el-button>
          <el-button type="primary" text link @click="fnDelete(row.jobId)">
            删除
          </el-button>
          <el-button
            v-if="row.status === 0"
            type="primary"
            text
            link
            @click="fnPause(row.jobId)"
          >
            暂停
          </el-button>
          <el-button
            v-if="row.status === 1"
            type="primary"
            text
            link
            @click="fnResume(row.jobId)"
          >
            恢复
          </el-button>
          <el-button type="primary" text link @click="fnRun(row.jobId)">
            立即执行
          </el-button>
        </template>
      </el-table-column>
      <template #button>
        <el-button type="primary" @click="fnAddOrEdit('', 'add')">
          新增
        </el-button>
      </template>
    </app-table>
    <add
      v-model:form="addOrEditDialog.form"
      v-model:visible="addOrEditDialog.visible"
      :type="addOrEditDialog.type"
      @get-data="resetPagination"
    />
  </div>
</template>

<script setup>
import { nextTick, ref } from "vue";
import {
  getScheduleJobList,
  getScheduleJobInfo,
  setScheduleJobDelete,
  setScheduleJobRun,
  setScheduleJobPause,
  setScheduleJobResume,
} from "@/request/schedule_job.js";
import { ElMessage, ElMessageBox } from "element-plus";
import AppTable from "@/components/table/index.vue";
import Add from "./components/add.vue";
import useListData from "@/assets/js/useListData.js";

const { list, pagination, getData, resetPagination } =
  useListData(getScheduleJobList);
const addOrEditDialog = ref({
  visible: false,
  type: "",
  form: {
    jobId: "",
    beanName: "",
    params: "",
    cronExpression: "",
    status: "",
    remark: "",
  },
});

const fnAddOrEdit = async (jobId, type) => {
  addOrEditDialog.value.visible = true;
  addOrEditDialog.value.type = type;
  await nextTick();
  if (type === "edit") {
    const resData = await getScheduleJobInfo({ jobId });
    addOrEditDialog.value.form = resData.schedule;
  }
};

const fnDelete = async (jobId) => {
  await ElMessageBox.confirm(`确定要删除吗？`, { type: "warning" });
  await setScheduleJobDelete({ jobId });
  ElMessage.success("删除成功");
  await resetPagination();
};
const fnPause = async (jobId) => {
  await ElMessageBox.confirm(`确定要暂停吗？`, { type: "warning" });
  await setScheduleJobPause({ jobId });
  ElMessage.success("暂停成功");
  await resetPagination();
};
const fnResume = async (jobId) => {
  await ElMessageBox.confirm(`确定要恢复吗？`, { type: "warning" });
  await setScheduleJobResume({ jobId });
  ElMessage.success("恢复成功");
  await resetPagination();
};
const fnRun = async (jobId) => {
  await ElMessageBox.confirm(`确定要立即执行吗？`, { type: "warning" });
  await setScheduleJobRun({ jobId });
  ElMessage.success("立即执行成功");
  await resetPagination();
};
</script>