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

<!-- 历史评论信息 -->
<template>
  <div v-if="historyProcessInstanceDescriptions != undefined">
    <div
      v-for="historyProcessInstanceDescription, index in historyProcessInstanceDescriptions"
      :key="historyProcessInstanceDescription.id"
    >
      <div class="page-header">
        <h4 style="display: inline-block; margin-right: 2rem;">
          {{ $t("lang.historyApproveComment.title") }}
        </h4>
        
        <a-tag color="warning">
          {{ index + 1 }} / {{ abandonCount == undefined ? "0" : abandonCount }}
        </a-tag>

        <a-tag v-if="historyProcessInstanceDescription.approvalHistory != null" color="processing">
          <template #icon>
            <close-circle-outlined />
          </template>
          {{ historyProcessInstanceDescription.approvalHistory.documentStatusChangeReason }}
        </a-tag>



        <a-tag color="success">
          <template #icon>
            <clock-circle-outlined />
          </template>
          {{ historyProcessInstanceDescription.startTime }}-{{ historyProcessInstanceDescription.endTime }}
        </a-tag>
      </div>

      
      <div>
        <ul
          class="media-list m-media-list"
        >
          <li class="media">
            <div class="media-left">
              <a>
                <AuthImage
                  :auth-src="
                    Common.getThumbnailImageSrc(
                      'com.leanwo.prodog.base.model.User',
                      historyProcessInstanceDescription.startUserImageUrl
                    )
                  "
                  class="media-object thumbnail m-image"
                />
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading">
                {{ historyProcessInstanceDescription.startUserName }}
                <small class="badge alert-error">
                  {{ $t("lang.approveComment.submitUser") }}
                </small>
              </h4>
              <h5 class="m-h5">{{ historyProcessInstanceDescription.startTime }}</h5>
              <p class="comment-text">{{ $t("lang.approveComment.submitApprove") }}</p>
            </div>
          </li>

          <template v-if="historyProcessInstanceDescription.historicTaskInstanceDescriptions != undefined">
            <li
              v-for="historicTaskInstanceDescription in historyProcessInstanceDescription.historicTaskInstanceDescriptions"
              :key="historicTaskInstanceDescription.id"
              class="media"
            >
              <div class="media-left">
                <a>
                  <AuthImage
                    :auth-src="
                      Common.getThumbnailImageSrc(
                        'com.leanwo.prodog.base.model.User',
                        historicTaskInstanceDescription.assigneeImageUrl
                      )
                    "
                    class="media-object thumbnail m-image"
                  />
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">
                  {{ historicTaskInstanceDescription.assigneeName }}
                  <small class="badge alert-error">{{ historicTaskInstanceDescription.name }}({{
                    getTaskCompleteType(historicTaskInstanceDescription.completeReason)
                    
                  }})</small>
                </h4>

                <div v-if="historicTaskInstanceDescription.comments != undefined">
                  <div
                    v-for="commentItem in historicTaskInstanceDescription.comments"
                    :key="commentItem.id"
                  >
                    <h5 class="m-h5">{{ commentItem.time }}</h5>
                    <p class="comment-text">{{ commentItem.message }}</p>
                  </div>
                </div>

                <ApproveTaskAttachmentView :enable-delete="false" :attachments="historicTaskInstanceDescription.attachments" />
              </div>
            </li>
          </template>
        </ul>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../common/Common.js';
import AuthImage from '../widget/AuthImage.vue';
import { Notify } from 'pc-component-v3';
import ApproveTaskAttachmentView from './ApproveTaskAttachmentView.vue';
import { CheckCircleOutlined, SyncOutlined, ClockCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';

export default {
  components: {
    AuthImage,
    ApproveTaskAttachmentView,
    CheckCircleOutlined, SyncOutlined, ClockCircleOutlined,
    CloseCircleOutlined,
  },

  props: {
    processInstanceId: {
      type: String,
      default: null,
    },
    recordId: {
      type: Number,
      default: null,
    },
  },

  emits: ['saveData'],

  data: function () {
    this.Common = Common;
    return {
      historyProcessInstanceDescriptions: null,
      abandonCount: 0,
      className: 'WorkFlow',
      loading: false,
    };
  },

  watch: {
    recordId: function (currentValue, oldValue) {
      this.refreshDebounce();
    },
    processInstanceId: function (currentValue, oldValue) {
      this.refreshDebounce();
    },
  },

  mounted: function () {
    var _self = this;
    this.refreshDebounce = Common.debounce(() => _self.refresh(), 1000);
    this.refreshDebounce();
  },

  methods: {

    /**
     * 刷新流程信息
     */
    refresh: function () {
      var _self = this;

      _self.historyProcessInstanceDescriptions = null;
      _self.abandonCount = 0;

      if (_self.recordId == null) {
        return;
      }

      _self.loading = true;
      $.ajax({
        url: Common.getApiURL(
          'WorkflowResource/listAbandonHistoryProcessInstanceDescription',
        ),
        type: 'GET',
        dataType: 'json',
        data: {
          excludeProcessInstanceId: _self.processInstanceId,
          recordId: _self.recordId,
        },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.loading = false;
          if (data.errorCode == 0) {
            _self.historyProcessInstanceDescriptions = data.datas;
            _self.abandonCount = data.total;
          } else {
            _self.historyProcessInstanceDescriptions = null;
            _self.abandonCount = 0;
            Notify.error('历史审批记录查询失败', data.errorMessage, false);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 获取评论的图片
     * @param  {[type]} imageUrl [description]
     * @return {[type]}          [description]
     */
    getCommentImageSrc: function (imageUrl) {
      console.log(imageUrl);
      var realImageUrl = Common.getImageSrc(
        this.className,
        'thumbnail/' + imageUrl,
      );
      return realImageUrl;
    },

    /**
     * 打开图片附件的功能
     * @param  {[type]} imageName [description]
     * @return {[type]}           [description]
     */
    openImageAttachment: function (imageName) {
      if (imageName == undefined) {
        return;
      }
      var fullPath = Common.getImageSrc(this.className, imageName);
      window.open(fullPath);
    },


    getTaskCompleteType: function(completeReason){
      if(completeReason == 'APPROVE'){
        return '审批通过';
      }else if(completeReason == 'REJECT'){
        return '审批不通过';
      }else if(completeReason == 'WITHDRAW'){
        return '撤销';
      }else{
        return '未处理';
      }
    },
  },
};
</script>
<style scoped>
.m-label {
  margin-left: 10px;
}

.m-h5 {
  display: inline;
}

.m-image {
  width: 64px;
  height: 64px;
  margin-bottom: 0px;
}

.m-image1 {
  display: inline !important;
  width: 64px;
  height: 64px;
  cursor: pointer;
  margin-right: 5px;
}

.m-media-list{
  margin-bottom: 0px;
}

.comment-text{
  margin-bottom: 0px;
}
</style>