autotask.vue

<template>
  <div>
    <!-- <Card title="自动任务" :padding="0" shadow style="margin: 4px">
      <a href="#" slot="extra" @click.prevent="editAutotask"> 修改 </a>
      <Table :columns="autotaskCol" :data="tableData" max-height="200"></Table>
    </Card> -->
    <Card title="自动任务" :padding="0" shadow style="margin: 4px">
      <a slot="extra" @click="newAutotask"> 新增 </a>
      <List
        split
        style="max-height: 212px; overflow: scroll; margin: 0 0 0 16px"
      >
        <ListItem v-for="(item, index) in tableData" :key="index">
          <ListItemMeta
            :title="formTitle(item.task)"
            :description="triggerDef[item.trigger]"
          />
          <template slot="action">
            <li>
              <Button
                size="small"
                type="primary"
                icon="ios-create-outline"
                @click="editAutotask(index)"
              ></Button>
            </li>
            <li>
              <Button
                size="small"
                type="error"
                icon="ios-trash-outline"
                @click="deleteAutotask(index)"
              ></Button>
            </li>
          </template>
        </ListItem>
      </List>
      <Row type="flex" justify="center" v-if="tableData.length === 0">
        <span style="color: #ccc; margin-bottom: 8px">暂无数据</span>
      </Row>
    </Card>
    <Modal
      v-model="showEdit"
      title="编辑自动任务"
      :loading="loading"
      @on-ok="onOk"
      @on-cancel="onCancel"
      :z-index="1100"
    >
      <Form
        ref="AutotaskForm"
        :label-width="80"
        label-position="formLeft"
        :model="tempTask"
        :rules="taskRule"
      >
        <FormItem prop="trigger" label="触发时机">
          <Select v-model="tempTask.trigger" placeholder="选择触发时机">
            <Option value="before" label="任务发起前"></Option>
            <Option value="after" label="任务完成后"></Option>]
          </Select>
        </FormItem>
        <FormItem prop="task" label="执行任务">
          <Select v-model="tempTask.task" placeholder="选择执行任务">
            <Option
              v-for="item in extentionTasks"
              :value="item.beanName"
              :key="item.beanName"
              :label="item.name"
            >
              <span>{{ item.name }}</span>
              <br />
              <span style="color: #ccc">{{ item.beanName }}</span>
            </Option>
          </Select>
        </FormItem>
        <FormItem prop="params" label="附加参数">
          <Input v-model="tempTask.params"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import { Modal } from "view-design";
export default {
  data() {
    return {
      loading: true,
      showEdit: false,
      editIndex: null,
      triggerDef: {
        before: "任务发起前",
        after: "任务完成后",
      },
      tableData: [],
      tempTask: {
        trigger: "",
        task: "",
        params: "",
      },
      taskRule: {
        trigger: [
          {
            required: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请选择触发时机"));
              } else {
                callback();
              }
            },
          },
        ],
        task: [
          {
            required: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请选择执行任务"));
              } else {
                callback();
              }
            },
          },
        ],
      },
      autotaskCol: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "响应时机",
          key: "trigger",
        },
        {
          title: "自动任务",
          key: "task",
        },
      ],
      autotaskEditCol: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "响应时机",
          key: "trigger",
        },
        {
          title: "自动任务",
          key: "task",
        },
      ],
      extentionTasks: [],
    };
  },
  components: {
    Modal,
  },
  props: {
    currentNode: {
      type: Object,
      required: true,
    },
  },
  mounted() {
    if (!this.currentNode.hasOwnProperty("properties")) {
      this.currentNode.properties = new Object();
    }
    if (!this.currentNode.properties.hasOwnProperty("autotask")) {
      this.currentNode.properties["autotask"] = new Array();
    }
    this.tableData = this.currentNode.properties.autotask;
    this.getAutotask();
  },
  methods: {
    getAutotask() {
      GMS.$http.get(`/sedu/workflow/autotask/autotasks`).then((res) => {
        this.extentionTasks = res.data;
        console.log(this.extentionTasks);
      });
    },
    onOk() {
      this.loading = false;
      setTimeout(() => {
        this.loading = true;
      });
      this.$refs["AutotaskForm"].validate((valid) => {
        if (valid) {
          if (this.editIndex == this.tableData.length) {
            this.tableData.push(this.tempTask);
            this.tempTask = new Object();
            this.tempTask = {
              trigger: "",
              task: "",
            };
          }
          console.log(this.currentNode.properties);
          console.log(this.tableData);
          // this.currentNode.properties.autotask = this.tableData;
          this.showEdit = false;
        } else {
          this.$Message.error("请填写必填项 !");
        }
      });
    },
    onCancel() {
      this.showEdit = false;
    },
    newAutotask() {
      let _this = this;
      _this.showEdit = false;
      _this.editIndex = _this.tableData.length;
      _this.tempTask = {
        trigger: "",
        task: "",
      };
      _this.showEdit = true;
    },
    editAutotask(index) {
      this.showEdit = false;
      this.editIndex = index;
      this.tempTask = this.tableData[index];
      this.showEdit = true;
    },
    deleteAutotask(index) {
      this.tableData.splice(index, 1);
    },
    formTitle(task) {
      return (
        this.extentionTasks.find((e) => e.beanName == task)?.name ?? "未知任务"
      );
    },
  },
  watch: {
    currentNode: {
      deep: true,
      handler(newValue, oldValue) {
        if (!newValue.hasOwnProperty("properties")) {
          newValue.properties = new Object();
        }
        if (!newValue.properties.hasOwnProperty("autotask")) {
          newValue.properties["autotask"] = new Array();
        }
        this.tableData = newValue.properties.autotask;
      },
    },
  },
};
</script>
<style>
.tablecell {
  height: 30px;
  display: table-cell;
  border: #e8e8e8 1px solid;
  vertical-align: middle;
  text-align: center;
}
</style>