huangjingfen/pro_v3.5.1/view/admin/src/pages/system/crontab/index.vue

<template>
  <Card :bordered="false" dis-hover>
    <Button
      v-auth="['system-crontab-create']"
      type="primary"
      to="/admin/system/crontab/create"
      >添加定时任务</Button
    >
    <Table
      :columns="columns"
      :data="tableData"
      :loading="loading"
      class="ivu-mt"
    >
      <template slot-scope="{ row }" slot="is_open">
        <i-switch
          v-model="row.is_open"
          :true-value="1"
          :false-value="0"
          size="large"
          @on-change="handleChange(row)"
        >
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </template>
      <template slot-scope="{ row }" slot="action">
        <router-link :to="`/admin/system/crontab/create/${row.id}`"
          >编辑</router-link
        >
        <Divider type="vertical" />
        <a @click="handleRunNow(row)" :class="{ 'running': row._running }">
          {{ row._running ? '执行中…' : '手动触发' }}
        </a>
        <Divider type="vertical" />
        <a @click="handleDelete(row, '删除定时任务', index)">删除</a>
      </template>
    </Table>
    <div class="acea-row row-right page">
      <Page
        :total="total"
        :current="page"
        show-elevator
        show-total
        @on-change="pageChange"
        :page-size="limit"
      />
    </div>
  </Card>
</template>

<script>
import { timerIndex, showTimer, runTimerNow } from '@/api/system';

export default {
  name: 'system_crontab',
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '名称',
          key: 'name',
          minWidth: 150,
        },
        {
          title: '最后执行时间',
          key: 'last_execution_time',
          minWidth: 150,
        },
        {
          title: '执行周期',
          key: 'execution_cycle',
          minWidth: 150,
        },
        {
          title: '是否开启',
          slot: 'is_open',
          minWidth: 100,
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
          fixed: 'right',
          minWidth: 200,
        },
      ],
      tableData: [],
      page: 1,
      limit: 15,
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 列表
    getList() {
      this.loading = true;
      timerIndex({
        page: this.page,
        limit: this.limit,
      })
        .then((res) => {
          this.loading = false;
          let { count, list } = res.data;
          this.total = count;
          this.tableData = list;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    // 删除
    handleDelete(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: `system/timer/del/${row.id}`,
        method: 'get',
        ids: '',
      };
      this.$modalSure(delfromData)
        .then((res) => {
          this.$Message.success(res.msg);
          this.tableData.splice(num, 1);
          if (!this.tableData.length) {
            this.page =
                this.page == 1 ? 1 : this.page - 1;
          }
          this.getList();
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    // 手动立即触发
    handleRunNow(row) {
      this.$set(row, '_running', true);
      runTimerNow(row.id)
        .then((res) => {
          this.$Message.success(res.msg || '触发成功，任务已执行');
          this.getList();
        })
        .catch((res) => {
          this.$Message.error(res.msg || '触发失败');
        })
        .finally(() => {
          this.$set(row, '_running', false);
        });
    },
    // 是否开启
    handleChange({ id, is_open }) {
      showTimer(id, is_open)
        .then((res) => {
          this.$Message.success(res.msg);
          this.getList();
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    pageChange(index) {
      this.page = index;
      this.getList();
    },
  },
};
</script>

<style lang="stylus" scoped>
.running
  color #999
  cursor not-allowed
  pointer-events none
</style>