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

<template>
  <div v-if="window != null">
    <h1>{{ Language.getNameTrl($i18n.locale, window) }}</h1>
    <p v-if="subTitle != null && subTitle != 'undefined' && subTitle != 'null'" style="white-space: pre-line"> {{ subTitle }}</p>
  </div>

  <div v-if="modelData != null">
    <div v-if="tab != null && tab.tabFormView != null" class="m-row clearfix">
      <div class="col-xs-12">
        <div
          :class="{
            'form-inline': tab.tabFormView.multipleColumn,
            'form-horizontal': !tab.tabFormView.multipleColumn,
          }"
        >
          <template
            v-for="fieldItem in tabFormFields" :key="
              'TabFormFieldView_' +
                windowNo +
                '_' +
                tabIndex +
                '_' +
                fieldItem.fieldName +
                '_' +
                fieldItem.entityFieldIndex
            "
          >
            <TabFormFieldView
              ref="fieldItem1" :class-name="tab.tabDataSource.className" :field="fieldItem"
              :model-data="modelData" :multiple-column="tab.tabFormView.multipleColumn"
              :js-url="window.jsUrl"
              :is-chinese-english="window.isChineseEnglish"
            />
          </template>
        </div>
      </div>
    </div>

    <div
      v-if="
        tab != null &&
          tab.tabFormView != null &&
          tab.tabFormView.fieldGroups != null &&
          tab.tabFormView.fieldGroups.length > 0
      " class="m-row clearfix"
    >
      <ul id="myTabs" class="nav nav-tabs" role="tablist">
        <li
          v-for="(fieldGroup, fieldGroupIndex) in tab.tabFormView.fieldGroups" :key="fieldGroup.groupName"
          role="presentation" :class="{ active: selectedTabIndex == fieldGroupIndex }"
          @click="selectedTabIndex = fieldGroupIndex"
        >
          <a
            :id="'tab-' + fieldGroupIndex" role="tab" data-toggle="tab"
            aria-controls="home" aria-expanded="true"
          >
            {{ Language.getGroupNameTrl($i18n.locale, fieldGroup) }}
          </a>
        </li>
      </ul>

      <div id="myTabContent" class="tab-content">
        <div
          v-for="(fieldGroup, fieldGroupIndex) in tab.tabFormView.fieldGroups"
          v-show="selectedTabIndex == fieldGroupIndex" id="home" :key="fieldGroup.groupName" role="tabpanel"
          class="tab-pane fade active in" aria-labelledby="home-tab"
        >
          <div v-if="fieldGroup.show">
            <div
              :class="{
                'form-inline': tab.tabFormView.multipleColumn,
                'form-horizontal': !tab.tabFormView.multipleColumn,
              }"
            >
              <template
                v-for="fieldItem in fieldGroup.fields" :key="
                  'TabFormFieldView_' +
                    windowNo +
                    '_' +
                    tabIndex +
                    '_' +
                    fieldItem.fieldName +
                    '_' +
                    fieldItem.entityFieldIndex
                "
              >
                {{ window.isChineseEnglish }}
                <TabFormFieldView
                  ref="fieldItem2" :class-name="tab.tabDataSource.className" :field="fieldItem"
                  :model-data="modelData" :multiple-column="tab.tabFormView.multipleColumn" :js-url="window.jsUrl"
                  :is-chinese-english="window.isChineseEnglish"
                />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template v-if="modelData != null && tab != null">
      <div
        v-for="subTab in tab.subTabs" 
        :id="'SubTabGridEdit-' + windowNo + '-' + tabIndex + '-' + modelData.id + '-subTab-' + subTab.tabIndex"
        :key="'SubTabGridEdit-' + windowNo + '-' + tabIndex + '-' + modelData.id + '-subTab-' + subTab.tabIndex"
        class="row clearfix"
      >
        <div class="col-md-12">
          <SubTabGridEdit
            :ref="'subTab' + subTab.tabIndex" :window-no="windowNo" :tab-index="subTab.tabIndex"
            :fixed-button-group-height="fixedButtonGroupHeight" :is-show-edit="false" :tab="subTab"
            :parent-model-data="modelData" :parent-tab="tab" :js-url="window.jsUrl" :is-chinese-english="window.isChineseEnglish"
          />
        </div>
      </div>
    </template>
  </div>
  <div v-if="processReportNo != null && recordId != null">
    <a-button type="primary" @click="openReport()">{{ $t("lang.ReportApprove.viewReport") }}</a-button>
  </div>
  <br />
  <div />
  <div v-if="showApply" class="row clearfix">
    <div v-if="window.workflow.workflowType === 'UserDefine'" class="col-md-12">
      <WorkflowUserDefine
        ref="workflowUserDefine" :work-flow="window.workflow"
        :process-definition-id="processDefinitionId" :model-data="modelData" @apply="apply"
      />
    </div>
    <div v-else class="col-md-12">
      <WorkflowSelectUser
        ref="workflow" :work-flow="window.workflow" :window-no="windowNo"
        :process-definition-id="processDefinitionId" :model-data="modelData" :record-id="recordId" @apply="apply"
      />
    </div>
  </div>

  <div v-if="showApproveComment" class="row clearfix">
    <div class="col-md-12">
      <ApproveComment
        ref="approveComment" :parent-widget="'TabFormView'" :workflow-type="window.workflow.workflowType"
        :work-flow="window.workflow" :window-no="windowNo" :process-definition-id="processDefinitionId"
        :show-choice-button="showChoiceButton" :process-instance-id="processInstanceId" :task-info-id="taskId"
        :record-id="modelData.id" :show-tab-dto="tab" :model-data="modelData" :workflow-class-name="tab.tabDataSource.className"
      />
    </div>
  </div>

  
  <!-- 历史审批记录 -->
  <div v-if="modelData != null" class="row clearfix">
    <div class="col-md-12">
      <HistoryApproveComment :record-id="modelData.id" :process-instance-id="processInstanceId" />        
    </div>
  </div>
  

  <div
    v-if="showApproveComment"
    class="row clearfix"
  >
    <AttachmentPanel
      :is-show-edit="true" :class-name="tab.tabDataSource.className"
      :record-id="modelData.id" :tab-index="0" :window-no="windowNo"
    />
  </div>
  

  <Loading v-if="loading" />
</template>


<script>
import WorkflowUserDefine from './WorkflowUserDefine.vue';
import WorkflowSelectUser from './WorkflowSelectUser.vue';
import Common from '../common/Common.js';
import CurdWindowResource from '../api/dic/CurdWindowResource.js';
import WindowServerUtil from '../resource/dictionary/WindowServerUtil.js';
import WindowClientUtil from '../resource/dictionary/WindowClientUtil.js';
import SubTabGridEdit from '../window/tabGridView/SubTabGridEdit.vue';
import TabFormFieldView from '../window/tabFormView/TabFormFieldView.vue';
import TabButton from '../window/tabView/TabButton.vue';
import FormFieldDef from '../window/tabFormView/FormFieldDef.vue';
import AttachmentPanel from '../window/attachment/AttachmentPanel.vue';
import Language from '../common/Language.js';
import { Notify } from 'pc-component-v3';
import WorkflowResource from '../api/workflow/WorkflowResource.js';
import HistoryApproveComment from './HistoryApproveComment.vue';
import ApproveComment from './ApproveComment.vue';


export default {

  components: {
    WorkflowUserDefine, WorkflowSelectUser, ApproveComment,TabFormFieldView,SubTabGridEdit,TabButton,FormFieldDef,AttachmentPanel,HistoryApproveComment,
  },

  data: function(){
    this.Language = Language;
    return {
      windowNo: null,
      tabIndex: null,
      recordId: null,
      taskId: null,
      loading: false,
      processDefinitionId: null,
      processReportNo: null,
      window: null,
      tab: null,
      tabFormFields: null,
      modelData: {},
      title: null,      // 标题
      subTitle: null,   // 子标题
    };
  },

  
  computed: {
    /**
     * 是否显示审批按钮
     */
    showApply: function () {
      // 判断是否显示审批按钮
      if (this.window == undefined) {
        return false;
      }

      if (this.window.workflow == undefined) {
        return false;
      }

      // 已经审批的单据，不显示审批按钮。
      if (
        this.modelData != undefined &&
          this.modelData.data != undefined &&
          this.modelData.data.processInstanceId != undefined &&
          this.modelData.data.processInstanceId.displayValue != undefined &&
          this.modelData.data.processInstanceId.displayValue[0] != undefined &&
          this.modelData.data.processInstanceId.displayValue[0].length > 0
      ) {
        return false;
      }

      if (this.modelData == undefined || this.modelData.data == undefined) {
        return false;
      }

      return true;
    },

    /**
         * 是否显示审批面板
         * 处于审批中的单据，显示审批面板
         */
    showApproveComment: function () {
      // 判断是否显示审批按钮
      if (
        this.window != undefined &&
          this.window.hasWorkflow != undefined &&
          this.modelData != undefined &&
          this.modelData.data != undefined &&
          this.modelData.data.processInstanceId != undefined &&
          this.modelData.data.processInstanceId.displayValue != undefined &&
          this.modelData.data.processInstanceId.displayValue[0] != undefined &&
          this.modelData.data.processInstanceId.displayValue[0].length > 0
      ) {
        return true;
      }
      return false;
    },

    /**
         * 是否显示审批评论面板
         * 审批完成的单据，显示审批评论面板
         */
    showChoiceButton: function () {
      if (
        this.window != undefined &&
          this.window.workflow != undefined &&
          this.modelData != undefined &&
          this.modelData.data != undefined &&
          this.modelData.data.processInstanceId != undefined &&
          this.modelData.data.processInstanceId.displayValue != undefined &&
          this.modelData.data.processInstanceId.displayValue[0] != undefined &&
          this.modelData.data.processInstanceId.displayValue[0].length > 0 &&
          this.modelData.data.documentStatus != undefined &&
          this.modelData.data.documentStatus.displayValue != undefined &&
          this.modelData.data.documentStatus.displayValue[0] != undefined &&
          this.modelData.data.documentStatus.displayValue[0].length > 0 &&
          this.modelData.data.documentStatus.displayValue[0] == 'PROCESSING' &&
          this.taskId != undefined
      ) {
        return true;
      }
      return false;
    },

  },

  mounted: function(){
    this.initViewParam();
    this.initViewData();
  },


  methods: {
    openReport: function(){
      window.open('/static/x-spreadsheet/index.html?processReportNo=' + this.processReportNo + '&recordId=' + this.recordId);
    },
    /**
     * 初始化界面的参数
     */
    initViewParam: function () {
      this.type = this.$route.query.type;
      this.windowNo = this.$route.query.windowNo;
      this.tabIndex = this.$route.query.tabIndex;
      this.recordId = this.$route.query.recordId;
      this.processReportNo = this.$route.query.processReportNo;
      this.taskId = this.$route.query.taskId;
      this.title = this.$route.query.title;
      this.subTitle = this.$route.query.subTitle;
    },


    /**
     * 初始化界面数据
     */
    initViewData: function () {
      var _self = this;
      _self.loading = true;

      if (_self.taskId) {
        CurdWindowResource.uniqueByNoWithWorkflow(
          null,
          _self.taskId,
          _self.windowNo,
        ).then(
          successData => {
            _self.loading = false;
            if (successData.errorCode == 0) {
              initWindowAfterLoaded(successData.data);
            }else{
              Notify.error(_self.$t('lang.Notify.error'), successData.errorMessage, true);
            }
          },
          errorData => {
            _self.loading = false;
            Common.processException(errorData);
          },
        );
      }else {
        WindowServerUtil.getWindowById(
          _self.windowNo,
          function (window) {
            _self.loading = false;
            if(window.errorCode != 0){
              Notify.error('Error', window.errorMessage, false);
              return;
            }
            initWindowAfterLoaded(window.data);
          },
          function () {
            _self.loading = false;
          },
        );
      }

      function initWindowAfterLoaded(window) {
        WindowClientUtil.parseFilterSchema(window);
        var tab = WindowClientUtil.getTab(window, _self.tabIndex);
        WindowClientUtil.parseSubTab(window, tab);
        WindowClientUtil.parseFieldGroup(tab);
        WindowClientUtil.restoreWindowTabFieldGroupsVisible(window);
        _self.tabFormFields = WindowClientUtil.getDetailField(tab);
        _self.window = window;
        _self.tab = tab;
        
        _self.loadData();
        if (_self.window.workflow != undefined) {
          _self.processDefinitionId = _self.window.workflow.deploymentId;
        }
        _self.loading = false;
        
      }
    },

    
    /**
     * 加载数据
     */
    loadData: function () {
      var _self = this;

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

      var tabLoadParam = {
        windowNo: _self.windowNo,
        tabIndex: _self.tabIndex,
        recordId: _self.recordId,
      };

      _self.processInstanceId = '';

      _self.loading = true;

      WindowServerUtil.loadTabSingleData(
        tabLoadParam,
        function (modelData) {
          _self.loading = false;
          _self.modelData = modelData;
          _self.processInstanceId = '';
          // 判断是否显示审批状态
          if (
            _self.modelData != null &&
              _self.modelData.data != null &&
              _self.modelData.data.processInstanceId != null
          ) {
            let displayValue =
                _self.modelData.data.processInstanceId.displayValue;
            if (displayValue != null && displayValue.length > 0) {
              _self.processInstanceId = displayValue[0];
            }
          }
        },
        function () {
          _self.loading = false;
        },
      );
    },
  },
};
</script>