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

<template>
  <div class="container-fluid">
    <div class="form-inline">
      <div class="page-header">
        <h1>
          工作流管理 <small>管理所有工作流</small>
        </h1>
      </div>
      <div class="form-inline">
        <div class="form-group">
          <label for="documentNo">文件编码</label>
          <input
            id="documentNo"
            v-model="documentNo"
            autocomplete="off"
            type="text"
            class="form-control"
          />
        </div>
        <div class="form-group">
          <label for="title">单据主题</label>
          <input
            id="title"
            v-model="title"
            autocomplete="off"
            type="text"
            class="form-control"
          />
        </div>
        <div class="form-group">
          <label for="content">审批摘要</label>
          <input
            id="content"
            v-model="content"
            autocomplete="off"
            type="text"
            class="form-control"
          />
        </div>

        <div class="form-group">
          <label for="status">单据状态</label>
          <select
            v-model="status"
            class="form-control"
          >
            <option value="Running">运行中</option>
            <option value="Suspended">已暂停</option>
            <option value="Finished">已完成</option>
          </select>
        </div>

        <div class="form-group">
          <label for="startAfter">开始时间</label>
          <input
            id="startAfter"
            v-model="startAfter"
            autocomplete="off"
            type="date"
            class="form-control"
          />
        </div>

        <div class="form-group">
          <label for="startBefore">~</label>
          <input
            id="startBefore"
            v-model="startBefore"
            autocomplete="off"
            type="date"
            class="form-control"
          />
        </div>

        <button
          class="btn btn-default"
          @click="requery"
        >
          查询
        </button>
      </div>

      <table class="table table-bordered table-hover table-condensed">
        <thead>
          <tr>
            <th style="width: 60px;">
              序号
            </th>
            <th style="width: 100px;">
              文件编码
            </th>
            <th style="width: 100px;">
              单据主题
            </th>
            <th>
              审批摘要
            </th>
            <th style="width: 60px;">
              状态
            </th>
            <th style="width: 100px;">
              开始时间
            </th>
            <th style="width: 100px;">
              结束时间
            </th>
            <th style="width: 100px;">
              流程实例Id
            </th>
            <th style="width: 100px;">
              操作
            </th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(data, index) in datas" :key="data.processInstanceId">
            <tr>
              <td>
                {{ index + ((pagination.current_page - 1) * (pagination.per_page)) + 1 }}
              </td>
              <td>
                {{ data.documentNo }}
              </td>
              <td>
                {{ data.title }}
              </td>
              <td>
                <span
                  v-if="data.content != null && data.content != 'null'"
                  style="white-space: pre-line"
                >{{ data.content }}</span>
              </td>
              <td>
                {{ data.status === 'Running' ? '运行中' : (data.status === 'Suspended' ? '暂停' : (data.status === 'Finished' ? '已完成' : (''))) }}
              </td>
              <td>
                {{ data.startTime }}
              </td>
              <td>
                {{ data.endTime }}
              </td>
              <td>
                {{ data.processInstanceId }}
              </td>
              <td>
                <button
                  v-if="data.status === 'Running'"
                  class="td-button"
                  @click="changeProcessInstance(data, 'suspend', null)"
                >
                  暂停
                </button>
                <button
                  v-if="data.status === 'Suspended'"
                  class="td-button"
                  @click="changeProcessInstance(data, 'activate', null)"
                >
                  激活
                </button>
                <button
                  v-if="data.status === 'Running'"
                  class="td-button"
                  @click="deleteProcessInstance(data, 'delete', null)"
                >
                  删除
                </button>
                <button
                  class="td-button"
                  @click="listTaskInfo(data)"
                >
                  查看任务
                </button>
              </td>
            </tr>
            <template v-if="data.taskDocInfos != null && data.taskDocInfos.length > 0">
              <tr
                :key="'tasks-title' + data.processInstanceId"
                class="info"
              >
                <td colspan="9">进行中的任务</td>
              </tr>
              <tr
                :key="'tasks' + data.processInstanceId"
                class="info"
              >
                <td
                  colspan="9"
                  style="padding:0px;"
                >
                  <table class="table table-bordered table-hover table-condensed inner-table">
                    <thead>
                      <tr class="warning">
                        <th style="width: 60px;">
                          序号
                        </th>
                        <th style="width: 200px;">
                          任务名称
                        </th>
                        <th style="width: 100px;">
                          审批人
                        </th>
                        <th style="width: 100px;">
                          发起日期
                        </th>
                        <th>
                          评论信息
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <template v-for="(taskDocInfo, index1) in data.taskDocInfos" :key="taskDocInfo.id">
                        <tr
                          
                          class="warning"
                        >
                          <td>
                            {{ index1 }}
                          </td>
                          <td>
                            {{ taskDocInfo.name }}
                          </td>
                          <td>
                            {{ taskDocInfo.assigneeName }}
                          </td>
                          <td>
                            {{ taskDocInfo.createTime }}
                          </td>
                          <td>
                            {{ taskDocInfo.comments }}
                          </td>
                        </tr>
                      </template>
                    </tbody>
                  </table>
                </td>
              </tr>
            </template>

            <template v-if="data.historicTaskDocInfos != null && data.historicTaskDocInfos.length > 0">
              <tr
                :key="'historicTasks-title' + data.processInstanceId"
                class="success"
              >
                <td colspan="9">已完成的任务</td>
              </tr>
              <tr
                :key="'historicTasks' + data.processInstanceId"
                class="success"
              >
                <td
                  colspan="9"
                  style="padding:0px;"
                >
                  <table class="table table-bordered table-hover table-condensed inner-table">
                    <thead>
                      <tr class="warning">
                        <th style="width: 60px;">
                          序号
                        </th>
                        <th style="width: 200px;">
                          任务名称
                        </th>
                        <th style="width: 100px;">
                          审批人
                        </th>
                        <th style="width: 100px;">
                          发起日期
                        </th>
                        <th style="width: 100px;">
                          完成日期
                        </th>
                        <th>
                          评论信息
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <template v-for="(historicTaskDocInfo, index2) in data.historicTaskDocInfos" :key="historicTaskDocInfo.id">
                        <tr
                          
                          class="warning"
                        >
                          <td>
                            {{ index2 }}
                          </td>
                          <td>
                            {{ historicTaskDocInfo.name }}
                          </td>
                          <td>
                            {{ historicTaskDocInfo.assigneeName }}
                          </td>
                          <td>
                            {{ historicTaskDocInfo.createTime }}
                          </td>
                          <td>
                            {{ historicTaskDocInfo.endTime }}
                          </td>
                          <td>
                            {{ historicTaskDocInfo.comments }}
                          </td>
                        </tr>
                      </template>
                    </tbody>
                  </table>
                </td>
              </tr>
            </template>
          </template>
        </tbody>
      </table>
    </div>
    <VueBootstrapPagination
      :pagination="pagination"
      :callback="listProcessInstanceDoc"
    />
  </div>
</template>

<script>
import Common from '../common/Common.js';




export default {

  components: {
  
  },
  data: function () {
    return {
      'documentNo': null,
      'title': null,
      'content': null,
      'status': 'Running',
      'startAfter': null,
      'startBefore': null,
      'datas': [],
      'pagination': {
        total: 0,
        per_page: 20,    // required
        current_page: 1, // required
        last_page: 0,    // required
      },
    };
  },



  mounted: function () {
    this.listProcessInstanceDoc();
  },

  methods: {

    /**
         * 重新查询
         */
    requery: function () {
      this.pagination.total = 0;
      this.pagination.per_page = 20;
      this.pagination.current_page = 1;
      this.pagination.last_page = 0;
      this.listProcessInstanceDoc();
    },

    /**
         * 查询所有的单据流程实例
         */
    listProcessInstanceDoc: function () {
      let _self = this;

      let processInstanceDocRequest = {
        'documentNo': this.documentNo,
        'title': this.title,
        'content': this.content,
        'status': this.status,
        'startAfter': this.startAfter,
        'startBefore': this.startBefore,
        'start': (this.pagination.current_page - 1) * this.pagination.per_page,
        'length': this.pagination.per_page,
      };


      $.ajax({
        url: Common.getApiURL('DocManagmentResource/query'),
        type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify(processInstanceDocRequest),
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          data.datas.forEach(item => {
            try {
              var content = JSON.parse(item.content);
              var parentForm = '';
              if (content != null && content.parentForm != null) {
                content.parentForm.forEach(item => {
                  parentForm = parentForm + item.title + ':' + item.content + '\n';
                });
                item.content = parentForm;
              }
            } catch (error) {
              console.error(error);
            } finally{                            
              item.taskDocInfos = [];
              item.historicTaskDocInfos = [];
            }
          });
          _self.datas = data.datas;
          _self.pagination.total = data.total;
          _self.pagination.last_page = Math.ceil(data.total / _self.pagination.per_page);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 查询流程实例的任务信息
         */
    listTaskInfo(processInstanceInfo) {
      $.ajax({
        url: Common.getApiURL('DocManagmentResource/listTasks'),
        type: 'GET',
        dataType: 'json',
        data: {
          processInstanceId: processInstanceInfo.processInstanceId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (datas) {
          processInstanceInfo.taskDocInfos = datas;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
      $.ajax({
        url: Common.getApiURL('DocManagmentResource/listHistoricTasks'),
        type: 'GET',
        dataType: 'json',
        data: {
          processInstanceId: processInstanceInfo.processInstanceId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (datas) {
          processInstanceInfo.historicTaskDocInfos = datas;
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });


    },

    /**
         * 删除流程实例
         */
    deleteProcessInstance(processInstanceInfo, changeType, reason) {
      let _self = this;
      BootstrapDialog.show({
        title: '确认',
        message: '删除流程实例是不可恢复的操作，您确认要删除流程实例吗？',
        buttons: [{
          label: '确认',
          action: function (dialogItself) {
            _self.changeProcessInstance(processInstanceInfo, changeType, reason);
            dialogItself.close();
          },
        },
        {
          label: '取消',
          action: function (dialogItself) {
            dialogItself.close();
          },
        }],
      });
    },


    /**
         * 修改流程实例的状态
         */
    changeProcessInstance(processInstanceInfo, changeType, reason) {
      let _self = this;
      $.ajax({
        url: Common.getApiURL('DocManagmentResource/changeProcessInstance'),
        type: 'GET',
        dataType: 'json',
        data: {
          processInstanceId: processInstanceInfo.processInstanceId,
          changeType: changeType,
          reason: reason,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (datas) {
          _self.listProcessInstanceDoc();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
  },
};
</script>


<style scoped>
label {
    width: 80px;
    text-align: left;
    padding-left: 10px;
}

button {
    margin-bottom: 5px;
}

input,
select {
    width: 200px !important;
}

.form-group {
    margin-bottom: 5px;
}

table tr {
    height: 40px;
}

.td-button {
    width: 100px;
}

.inner-table {
    margin-bottom: 0px;
}
</style>