client-base-v5/src/workflow/ExecutionList.vue

<template>
  <div class="container-fluid">
    <Navbar title="执行列表" :is-go-back="false" />

    <ul id="myTab" class="nav nav-tabs">
      <li class="active">
        <a data-toggle="tab" @click="changeSelectTab('HTTP')">HTTP实例</a>
      </li>
      <li>
        <a data-toggle="tab" @click="changeSelectTab('PROCESS_REPORT')">流程报表实例</a>
      </li>
      <li>
        <a data-toggle="tab" @click="changeSelectTab('PROCESS')">流程任务</a>
      </li>
    </ul>

    <div id="myTabContent" class="tab-content">
      <div>
        <div class="form-inline">
          <div class="form-group">
            <label>选择任务：</label>
            <select
              v-model="selectedTaskDefineId"
              class="form-control"
              @change="changeFilterData"
            >
              <option
                v-for="(data, index) in taskDefineDtos"
                :key="index"
                :value="data.id"
              >
                {{ data.taskName }}
              </option>
            </select>
          </div>
          <div class="form-group">
            <label>选择运行状态：</label>
            <select
              v-model="selectedTaskInstanceStatus"
              class="form-control"
              @change="changeFilterData"
            >
              <option
                v-for="(data, index) in taskInstanceStatus"
                :key="index"
                :value="data.value"
              >
                {{ data.label }}
              </option>
            </select>
          </div>
          <div class="form-group">
            <label>开始时间：</label>
            <DateTime v-model="startDate" />
          </div>
          <div class="form-group">
            <label>结束时间：</label>
            <DateTime v-model="endDate" />
          </div>
          <div class="form-group">
            <button class="btn btn-info" @click="changeFilterData">查询</button>
          </div>
        </div>
        <div>
          <CommonTable
            ref="table"
            :columns="columns"
            :data-source="taskInstanceDtos"
            :total="pagination.total"
            @get-pager="getPageParams"
          >
            <template #headerCell="{ column }">
              <template v-if="column.key == 'httpRequestType'">
                <span>
                  {{
                    taskType == "HTTP"
                      ? "HTTP请求类型"
                      : taskType == "PROCESS"
                        ? "流程编号"
                        : "流程报表文件编码"
                  }}
                </span>
              </template>
              <template v-if="column.key == 'httpRequestUrl'">
                <span>
                  {{
                    taskType == "HTTP"
                      ? "HTTP请求路径"
                      : taskType == "PROCESS"
                        ? "流程任务名称"
                        : "流程报表名称"
                  }}
                </span>
              </template>
            </template>
            <template #bodyCell="{ column, record }">
              <template v-if="column.key == 'taskType'">
                {{
                  record.taskType == null
                    ? ""
                    : record.taskType == "HTTP"
                      ? "HTTP请求"
                      : record.taskType == "PROCESS"
                        ? "流程任务"
                        : "流程报表"
                }}
              </template>
              <template v-if="column.key == 'httpRequestType'">
                {{
                  record.taskType == "HTTP"
                    ? record.httpRequestType
                    : taskType == "PROCESS"
                      ? record.processNo
                      : record.processReportNo
                }}
              </template>
              <template v-if="column.key == 'httpRequestUrl'">
                {{
                  record.taskType == "HTTP"
                    ? record.httpRequestUrl
                    : taskType == "PROCESS"
                      ? record.taskName
                      : record.processReportName
                }}
              </template>
              <template v-if="column.key == 'taskInstanceStatus'">
                {{
                  record.taskInstanceStatus == "SUCCESS"
                    ? "成功"
                    : record.taskInstanceStatus == "IN_OPERATION"
                      ? "运行中"
                      : "失败"
                }}
              </template>
            </template>
          </CommonTable>
        </div>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';
import TaskInstanceResource from '../api/base/TaskInstanceResource.js';
import TaskDefineResource from '../api/task/TaskDefineResource.js';
import vSelect from 'vue-select';
import 'vue-select/dist/vue-select.css';
import CommonTable from '../common/CommonTable.vue';

export default {
  
  components: {
    vSelect,
    CommonTable,
  },
  data: function () {
    return {
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          customRender: ({ text, record, index }) => `${index + 1}`,
        },
        {
          title: '任务名',
          dataIndex: 'taskName',
          key: 'taskName',
        },
        {
          title: '任务类型',
          dataIndex: 'taskType',
          key: 'taskType',
        },
        {
          title: 'HTTP请求类型',
          dataIndex: 'httpRequestType',
          key: 'httpRequestType',
          width: 180,
        },
        {
          title: 'HTTP请求路径',
          dataIndex: 'httpRequestUrl',
          key: 'httpRequestUrl',
          width: 180,
        },
        {
          title: '开始时间',
          dataIndex: 'startDate',
          key: 'startDate',
        },
        {
          title: '结束时间',
          dataIndex: 'endDate',
          key: 'endDate',
        },
        {
          title: '运行状态',
          dataIndex: 'taskInstanceStatus',
          key: 'taskInstanceStatus',
        },
        {
          title: '运行结果',
          dataIndex: 'operationResult',
          key: 'operationResult',
          width: 180,
          fixed: 'right',
          ellipsis: true,
        },
      ].map(item => ({ ...item, align: 'center' })),

      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 0, // required
      },
      loading: false,
      taskType: 'HTTP',
      selectedTaskDefineId: null,
      selectedTaskInstanceStatus: 'ALL',
      taskDefineDtos: [],
      taskInstanceDtos: [],
      taskInstanceStatus: [
        {
          value: 'ALL',
          label: '全部',
        },
        {
          value: 'SUCCESS',
          label: '成功',
        },
        {
          value: 'IN_OPERATION',
          label: '运行中',
        },
        {
          value: 'FAIL',
          label: '失败',
        },
      ],
      startDate: null,
      endDate: null,
    };
  },

  mounted: function () {
    var _self = this;
    _self.getAllTaskDefineDtos();
    _self.getDatas();
  },

  methods: {
    getPageParams: function (start, length) {
      this.pagination.current_page = start;
      this.pagination.per_page = length;
      this.getDatas();
    },
    changeSelectTab: function (value) {
      var _self = this;
      _self.taskType = value;
      _self.selectedTaskDefineId = null;
      _self.getAllTaskDefineDtos();
      _self.getDatas();
    },
    changeFilterData: function () {
      var _self = this;
      _self.$refs.table.backFirstPage();
    },
    getAllTaskDefineDtos: function () {
      var _self = this;
      var taskDefineSelectRequest = {
        id: null,
        taskName: null,
        taskDescription: null,
        taskType: _self.taskType,
        start: 0,
        length: 0,
      };
      _self.taskDefineDtos.splice(0, _self.taskDefineDtos.length);
      TaskDefineResource.getAllTaskDefine(taskDefineSelectRequest).then(
        successData => {
          // console.log(successData, 'getAllTaskDefine');
          if (successData && successData.errorCode == 0) {
            _self.taskDefineDtos = successData.datas;
            // _self.pagination.total = successData.total;
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
    getDatas: function () {
      var _self = this;
      var selectedTaskInstanceStatus = null;
      if (_self.selectedTaskInstanceStatus != 'ALL') {
        selectedTaskInstanceStatus = _self.selectedTaskInstanceStatus;
      }
      var taskInstanceQueryDto = {
        taskDefineId: _self.selectedTaskDefineId,
        taskName: null,
        taskDescription: null,
        taskType: _self.taskType,
        startDate: _self.startDate,
        endDate: _self.endDate,
        taskInstanceStatus: selectedTaskInstanceStatus,
        start: (this.pagination.current_page - 1) * this.pagination.per_page,
        length: this.pagination.per_page,
      };
      _self.loading = true;
      TaskInstanceResource.list(taskInstanceQueryDto).then(
        successData => {
          // console.log(successData, 'list');
          _self.loading = false;
          if (successData && successData.errorCode == 0) {
            _self.taskInstanceDtos = successData.datas;
            _self.pagination.total = successData.total;
            _self.pagination.last_page = Math.ceil(
              successData.total / _self.pagination.per_page,
            );
          }

        },
        errorData => {
          _self.loading = false;
          Common.processException(errorData);
        },
      );
    },
  },
};
</script>

<style scoped>
.flex-content {
  width: 100%;
  /*视口被均分为100单位的vh 占据整个窗口，扣掉顶部topNav的距离后，计算得到container的高度*/
  height: calc(100vh - 150px);
}

.fixed-table {
  table-layout: fixed;
  width: 1050px !important;
  min-width: 1050px !important;
}

table.fixed-table tr {
  height: 40px;
}

#myTabContent {
  margin-top: 8px;
}
.form-group {
  margin-right: 8px;
}
table.fixed-table th,
table.fixed-table td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>