ECS5 / ECS5.0Web · Files

<template>
  <el-container style="padding: 20px">
    <el-aside>
      <el-card :style="{ height: asideHeight }">
        <el-form label-width="80px">
          <el-form-item label="任务名称">
            <el-input v-model="paramCode" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="分组">
            <el-input v-model="paramName" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="job状态">
            <el-select v-model="crontabJobStatus" placeholder="请选择库存状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="运行" value="Run"></el-option>
              <el-option label="暂停" value="Pause"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="8">
                <el-button type="primary" size="small" @click="handleQuery"
                  >查询</el-button
                >
              </el-col>
              <el-col :span="8">
                <el-button type="success" size="small" @click="handleAdd"
                  >新增</el-button
                >
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="8">
                <el-button type="warning" size="small" @click="handleEdit"
                  >编辑</el-button
                >
              </el-col>
              <el-col :span="8">
                <el-button type="danger" size="small" @click="handleDelete"
                  >删除</el-button
                >
              </el-col>
            </el-row>
            <el-row style="margin-top: 5px">
              <el-col :span="8">
                <el-button type="info" size="small" @click="handleStart"
                  >启动</el-button
                >
              </el-col>
              <el-col :span="8">
                <el-button type="info" size="small" @click="handlePause"
                  >暂停</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-card>
    </el-aside>
    <el-dialog
      title="新增任务"
      :visible.sync="dialogFormVisible"
      width="30%"
      center
    >
      <el-form :model="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务名称">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分组">
              <el-input v-model="form.group" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="程序集">
              <el-input
                v-model="form.assemblyName"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类名">
              <el-input v-model="form.className" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="表达式">
              <el-input v-model="form.cron" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排除表达式">
              <el-input
                v-model="form.excludedCron"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="任务参数">
          <el-input
            type="textarea"
            v-model="form.taskParams"
            autocomplete="off"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddData">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="任务编辑"
      :visible.sync="EditdialogFormVisible"
      width="30%"
      center
    >
      <el-form :model="Editform" label-width="80px">
        <el-form-item label="任务名称">
          <el-input v-model="Editform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分组">
          <el-input v-model="Editform.group" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="程序集">
          <el-input
            v-model="Editform.assemblyName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="类名">
          <el-input v-model="Editform.className" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="表达式">
          <el-input v-model="Editform.cron" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排除表达式">
          <el-input
            v-model="Editform.excludedCron"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="任务参数">
          <el-input
            type="textarea"
            v-model="Editform.taskParams"
            autocomplete="off"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="Editform.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="EditdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="editLoading" @click="handleEditData"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-main>
      <el-card>
        <el-table
          :data="tableData"
          style="width: 100%"
          :height="TableHeight"
          border
          highlight-current-row
          @selection-change="handleSelectionChange"
          @row-click="handleRowClick"
          ref="multipleTable"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column
            prop="name"
            width="120"
            label="任务名称"
          ></el-table-column>
          <el-table-column
            prop="group"
            width="120"
            label="分组"
          ></el-table-column>
          <el-table-column
            prop="crontabJobStatus"
            label="job状态"
          ></el-table-column>
          <el-table-column
            prop="assemblyName"
            width="180"
            label="程序集"
          ></el-table-column>
          <el-table-column
            prop="className"
            width="300"
            label="类名"
          ></el-table-column>
          <el-table-column
            prop="cron"
            width="150"
            label="表达式"
          ></el-table-column>
          <el-table-column
            prop="excludedCron"
            width="180"
            label="排除表达式"
          ></el-table-column>
          <el-table-column
            prop="count"
            label="已执行次数"
            width="100"
          ></el-table-column>
          <el-table-column
            prop="jobParams"
            width="180"
            label="任务参数"
          ></el-table-column>
          <el-table-column
            prop="lastExecuteTime"
            width="180"
            label="最后一次运行时间"
          ></el-table-column>
          <el-table-column
            prop="lastExecuteSuccess"
            width="180"
            label="最后一次运行是否成功"
          ></el-table-column>
          <el-table-column
            prop="executeMsg"
            label="执行携带的消息"
            width="430"
          ></el-table-column>
          <el-table-column
            prop="remark"
            width="180"
            label="备注"
          ></el-table-column>
          <el-table-column
            prop="created"
            width="180"
            label="创建时间"
          ></el-table-column>
          <el-table-column prop="createdBy" label="创建人"></el-table-column>
          <el-table-column
            prop="updated"
            width="180"
            label="更新时间"
          ></el-table-column>
          <el-table-column prop="updatedBy" label="更新人"></el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 15px"
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import {
  GetCrontabJobsByPage,
  AddJob,
  RemoveJob,
  UpdateJob,
  StartJob,
  PauseJob,
} from "@/api/systemManage/timer";
export default {
  name: "Timer",
  computed: {
    TableHeight() {
      return `calc(100vh - 220px )`;
    },
    asideHeight() {
      return `calc(100vh - 150px)`;
    },
  },
  data() {
    return {
      paramCode: "",
      paramName: "",
      currentPage: 1,
      total: 0,
      pageSize: 10,
      selectedItems: [],
      tableData: [],
      crontabJobStatus: "",
      dialogFormVisible: false,
      form: {
        name: "",
        group: "",
        assemblyName: "",
        className: "",
        cron: "",
        excludedCron: "",
        taskParams: "",
        remark: "",
      },
      EditdialogFormVisible: false,
      Editform: {
        name: "",
        group: "",
        assemblyName: "",
        className: "",
        cron: "",
        excludedCron: "",
        taskParams: "",
        remark: "",
      },
      editLoading: false,
    };
  },
  methods: {
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    handleSelectionChange(val) {
      this.selectedItems = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.handleQuery();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleQuery();
    },
    handleQuery() {
      const requestData = {
        pageNumber: this.currentPage,
        perPageCount: this.pageSize,
        queryConfig: {
          code: this.paramCode.trim(),
          name: this.paramName.trim(),
          crontabJobStatus: this.crontabJobStatus,
        },
      };
      GetCrontabJobsByPage(requestData).then((res) => {
        if (res.code == "Success" && res.data) {
          this.tableData = res.data.data || res.data;
          this.total = res.data.totalCount || res.data.data.length;
        }
      });
    },
    handleAdd() {
      // 新增逻辑
      this.dialogFormVisible = true;
      this.form = {
        name: "",
        group: "",
        assemblyName: "",
        className: "",
        cron: "",
        excludedCron: "",
        taskParams: "",
        remark: "",
      };
    },
    handleAddData() {
      if (this.form.name === "") {
        this.$message.error("任务名称不能为空");
        return;
      }
      if (this.form.group === "") {
        this.$message.error("分组不能为空");
        return;
      }
      if (this.form.assemblyName === "") {
        this.$message.error("程序集不能为空");
        return;
      }
      if (this.form.className === "") {
        this.$message.error("类名不能为空");
        return;
      }
      if (this.form.cron === "") {
        this.$message.error("表达式不能为空");
        return;
      }

      AddJob(this.form).then((res) => {
        if (res.code === "Success") {
          this.$message.success("新增成功");
          this.dialogFormVisible = false;
          this.handleQuery();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleEdit() {
      if (this.selectedItems.length === 0) {
        this.$alert("请至少选择一条数据", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.selectedItems.length > 1) {
        this.$alert("只能选择一条数据进行编辑", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      this.EditdialogFormVisible = true;
      this.Editform = { ...this.selectedItems[0] };
    },
    handleEditData() {
      this.editLoading = true;
      UpdateJob(this.Editform).then((res) => {
        if (res.code === "Success") {
          this.$message.success("数据修改成功");
          this.EditdialogFormVisible = false;
          this.editLoading = false;
          this.handleQuery();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleDelete() {
      if (this.selectedItems.length === 0) {
        this.$alert("请至少选择一条数据", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.selectedItems.length > 1) {
        this.$alert("只能选择一条数据进行删除", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      this.$confirm("确定要删除选中的数据吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const mergedObject = Object.assign({}, ...this.selectedItems);
          RemoveJob(mergedObject).then((res) => {
            if (res.code === "Success") {
              this.$message.success("删除成功");
              this.handleQuery();
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    handleStart() {
      if (this.selectedItems.length === 0) {
        this.$alert("请至少选择一条数据", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.selectedItems.length > 1) {
        this.$alert("只能选择一条数据进行编辑", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      const mergedObjectStart = Object.assign({}, ...this.selectedItems);
      StartJob(mergedObjectStart).then((res) => {
        if (res.code === "Success") {
          this.$message.success("启动成功");
          this.handleQuery();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handlePause() {
      if (this.selectedItems.length === 0) {
        this.$alert("请至少选择一条数据", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.selectedItems.length > 1) {
        this.$alert("只能选择一条数据进行编辑", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      const mergedObjectPauseJob = Object.assign({}, ...this.selectedItems);
      PauseJob(mergedObjectPauseJob).then((res) => {
        if (res.code === "Success") {
          this.$message.success("暂停成功");
          this.handleQuery();
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #777f87;
  border-radius: 4px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
.el-card__body,
.el-main {
  padding: 0 10px 0 10px;
}
::v-deep.el-table thead {
  color: #101010;
  font-weight: 600;
}
.el-form-item {
  margin-bottom: 18px;
}
::v-deep .el-form-item__label,
::v-deep .el-input__inner {
  font-size: 13px !important;
}
.el-table__body tr.current-row {
  background-color: #f0f9eb; /* 自定义高亮背景色 */
}
</style>