ioc-admin-ui/src/views/securityManagement/systemMonitor/periodicTask.vue

<template>
  <div>
    <div class="header">
      <el-form label-width="120px">
        <div style="display: flex; padding: 10px">
          <el-form-item label="任务名称：">
            <el-input
              v-model="form.taskName"
              placeholder="请输入任务名称"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item label="任务组名：">
            <el-select
              v-model="form.taskGroupName"
              placeholder="请输入任务组名"
              style="width: 200px"
            >
              <el-option
                v-for="item in taskGroupOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务状态：">
            <el-select
              v-model="form.taskStatus"
              placeholder="请选择任务状态"
              style="width: 200px"
            >
              <el-option
                v-for="item in taskStatusOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button class="reset-btn" @click="resetEvent">重置</el-button>
          <el-button class="search-btn" @click="searchEvent">查询</el-button>
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="content-inner">
        <!-- <el-button class="blue-btn" @click="addEvent">新增</el-button> -->
        <!-- <el-button class="blue-btn" @click="modifyEvent">修改</el-button> -->
        <el-button class="delete-btn" @click="batchDelete">批量删除</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        style="width: 100%"
        height="350"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column prop="taskID" label="任务编号"> </el-table-column>
        <el-table-column prop="taskName" label="任务名称"> </el-table-column>
        <el-table-column prop="taskGroupName" label="任务组名">
        </el-table-column>
        <el-table-column prop="taskDescription" label="任务描述">
        </el-table-column>
        <el-table-column prop="cron" label="cron 执行表达式"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作">
          <template slot-scope="scope">
            <!-- <el-button
              v-show="scope.row.taskID == null ? false : true"
              size="mini"
              type="text"
              >查看</el-button
            > -->
            <el-button
              v-show="scope.row.taskID == null ? false : true"
              size="mini"
              type="text"
              @click="alterTaskEvent(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-show="scope.row.taskID == null ? false : true"
              size="mini"
              type="text"
              @click="deleteEvent(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bottom">
      <page class="page" :paginationData="paginationData"></page>
    </div>
    <alterTask ref="altertask" @submitForm="submitForm"></alterTask>
  </div>
</template>

<script>
import checkbox from "@/components/Checkbox/index";
import page from "@/components/pagination/index";
import alterTask from "../messageDialog/alterTask";
import publicFunc from "@/utils/publicFunc";
import { getTaskList } from "@/api/security/systemMonitor";
export default {
  components: { checkbox, page, alterTask },
  data() {
    return {
      input: "",
      show: true,
      form: {
        taskName: "",
        taskGroupName: "",
        taskStatus: "",
      },
      tableData: [
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskDescription: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "true",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "默认",
          taskDescription: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "true",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskDescription: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskDescription: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskDescription: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskDescription: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskDescription: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
        {
          id: publicFunc.buildGuid("video"),
          taskID: "1",
          taskName: "采集视频云平台",
          taskGroupName: "系统",
          taskDescription: "xxx.xxx.xxx.xxx",
          cron: "001***?",
          status: "false",
        },
      ],
      taskStatusOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: 1,
          label: "暂停",
        },
        {
          value: 0,
          label: "正常",
        },
      ],
      taskGroupOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: 1,
          label: "系统",
        },
      ],
      multipleSelection: [],
      currentPageSize: 10,
      currentPage: 1,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 30,
        currentChange: (val) => {
          this.getTableData(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getTableData(1);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    cancleChecked() {
      this.$refs.multipleTable.clearSelection();
    },
    alterTaskEvent(data) {
      this.$refs.altertask.dialogVisible = true;
      this.$refs.altertask.form.taskID = data.taskID;
      this.$refs.altertask.form.name = data.taskName;
      this.$refs.altertask.form.groupName = data.taskGroupName;
      this.$refs.altertask.form.cron_expression = data.cron;
    },
    resetEvent() {
      this.form.taskName = "";
      this.form.taskGroupName = "";
      this.form.taskStatus = "";
    },
    searchEvent() {
      console.log(this.form);
      this.getTableData(1);
    },
    getTableData(val) {
      this.tableData = [];
      getTaskList(
        val,
        this.currentPageSize,
        this.form.taskName,
        this.form.taskGroupName,
        this.form.taskStatus
      ).then((res) => {
        if (res.data.code === 0) {
          let data = res.data.data.data;
          this.paginationData.total = data.total;
          this.tableData = data.list.map((v) => {
            return {
              taskID: v.id,
              taskName: v.name,
              taskGroupName: v.groupType === 1 ? "系统" : "默认",
              taskDescription: v.description,
              cron: v.cronExpression,
              status: v.status === 0 ? true : false,
            };
          });
        }
      });
    },
    handleSizeChange() {},
    deleteEvent(data) {
      this.tableData = this.tableData.filter((v) => {
        return v.taskID !== data.taskID;
      });
    },
    addEvent() {},
    modifyEvent() {},
    batchDelete() {
      console.log(this.multipleSelection);
      let selectedIds = this.multipleSelection.map((v) => v.taskID);
      this.tableData = this.tableData.filter(
        (v) => !selectedIds.includes(v.taskID)
      );
    },
    submitForm(data) {
      this.$refs.altertask.dialogVisible = false;
      this.tableData = this.tableData.map((v) => {
        if (v.taskID == data.taskID) {
          let name = data.name;
          let groupName = data.groupName;
          return {
            taskID: v.taskID,
            taskName: name,
            taskGroupName: groupName,
            taskDescription: v.taskDescription,
            cron: data.cron_expression,
          };
        } else {
          return {
            taskID: v.taskID,
            taskName: v.taskName,
            taskGroupName: v.taskGroupName,
            taskDescription: v.taskDescription,
            cron: v.cron,
            status: v.status,
          };
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  margin: 0 2.5%;
  height: 60px;
  background-color: #fafafa;
  position: relative;
  .reset-btn,
  .search-btn {
    height: 30px;
    width: 80px;
    position: absolute;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .reset-btn {
    top: 10px;
    background-color: #b3b3b3;
    right: 130px;
  }
  .search-btn {
    top: 10px;
    background-color: #2ea8e6;
    right: 25px;
  }

  .el-form-item {
    margin-bottom: 0 !important;
    margin-right: 60px !important;

    /deep/.el-form-item {
      margin-right: 50px;
      margin-bottom: 0;
    }

    /deep/.el-form-item__content {
      margin-left: 120px;
    }
  }
}

.content {
  width: 95%;
  position: absolute;
  margin-top: 30px;
  margin-left: 2.5%;
  margin-right: 2.5%;
  height: 400px;
  &-inner {
    height: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    .blue-btn,
    .delete-btn {
      width: 80px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      color: #fff;
      border-radius: 3px;
    }
    .blue-btn {
      background-color: #2ea8e6;
    }
    .delete-btn {
      background: #b3b3b3;
    }
  }

  .el-table {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: calc(100% - 30px);
    border: 1px solid #f0f2f2;
    margin-top: 10px;
    font-size: 0.95rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #b2b2b2;
    background: rgba(255, 255, 255, 0.8);

    /deep/th {
      background: #f7fbff;
    }
    /deep/.el-checkbox {
      color: #b2b2b2;
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: #2ea8e6;
      }

      .el-checkbox__input.is-checked .el-checkbox__inner::after {
        width: 70%;
        height: 70%;
        background: #2ea8e6;
        border-radius: 0;
        transform: rotate(0deg) scaleY(1);
        position: static;
        // border: 1px solid #8DD9FF;
      }

      .el-checkbox__inner {
        border: 1px solid #8dd9ff;
        background: rgba(0, 170, 255, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        &::after {
          transition: 0ms;
        }
      }

      .el-checkbox__label {
        padding-left: 0;
        font-size: 15px;
        position: absolute;
        top: 1px;
        left: 25px;
      }
    }
  }
}

.el-select {
  width: 80px;
  margin-right: 20px;
}

.bottom {
  position: absolute;
  bottom: 10px;
  left: 50px;
  height: 50px;
  width: 95%;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  text-align: center;
}
</style>