client-base-v5/src/window1/tabFormView/TabFormViewModal.vue

<template>
  <a-modal :open="open" @update:open="$emit('update:open', $event)">
    <template #title>
      <a-page-header
        style="padding: 0 20px 0 0;"
        :title="Language.getNameTrl($i18n.locale, window)"
        :sub-title="subTitle()"
      >
        <template #extra>
          <a-button key="1" title="上一页" @click="pre">
            <template #icon>
              <CaretLeftOutlined />
            </template>
          </a-button>
          
          <a-button key="2" title="下一页" @click="next">
            <template #icon>
              <CaretRightOutlined />
            </template>
          </a-button>

          <a-button key="3" title="历史记录" @click="auditData">
            <template #icon>
              <SmallDashOutlined />
            </template>
            {{ currIndex }}/{{ totalCount }}
          </a-button>

          
          <a-tooltip v-if="!(window.htmlHelpUrl != null && window.htmlHelpUrl != '')" title="帮助">
            <QuestionCircleOutlined style="font-size: 2rem;" @click="openHtmlHelp(window.htmlHelpUrl)" />
          </a-tooltip>
        </template>
      </a-page-header>
    </template>

    <template #footer />


    <a-space>
      <a-button
        v-if="showCreateButton && windowDisplayType == 'Grid'" 
        @click="createRecord"
      >
        {{ $t("lang.tabFormView.create") }}
      </a-button>
      <a-button
        v-if="showEditButton && windowDisplayType == 'Grid'" 
        @click="editRecord"
      >
        {{ $t("lang.tabFormView.edit") }}
      </a-button>
      <a-button @click="refresh">
        {{ $t("lang.tabFormView.refresh") }}
      </a-button>
      <a-button
        v-if="isView == true && windowDisplayType == 'Grid'" 
        @click="changeWindowDisplayType"
      >
        {{ $t("lang.tabFormView.reportView") }}
      </a-button>
      <a-button
        v-if="isView == true && windowDisplayType == 'Report'" 
        @click="changeWindowDisplayType"
      >
        {{ $t("lang.tabFormView.formView") }}
      </a-button>

      <a-button
        v-if="showDeleteButton && windowDisplayType == 'Grid'" 
        @click="deleteRecord(true)"
      >
        {{ $t("lang.tabFormView.remove") }}
      </a-button>

      <a-button v-if="showRedrawButton" @click="abandonWorkflow">
        {{ $t("lang.tabFormView.redraw") }}
      </a-button>
    </a-space>


    <div>
      <!-- header -->
      <div style="position: relative">
        <div v-show="showSpaceRow" class="row">
          <div class="col-md-12">
            <div class="m-space-btn-group" />
          </div>
        </div>

        <div ref="fixedButtonGroup" class="row m-row fixed-btn-group">
          <div class="col-md-12">
            <div class="btn-group">
              <TabButton
                :show-tab-dto="tab" :model-data="modelData" :uuid="uuid" :view-type="'Form'"
                :tab-buttons="tab.tabFormView ? tab.tabFormView.tabButtons : null"
                :curd-window-function-access="curdWindowFunctionAccess" @save-view="backupView"
                @process-execute-finish="refresh" @model-data-changed="modelDataChanged"
              />

              <FormFieldDef
                :tab-form-fields="tabFormFields" :window-no="windowNo" :tab-index="tabIndex"
                @tab-form-field-property-changed="
                  tabFormFieldPropertyChanged($event)
                "
              />
            </div>
          </div>
        </div>
        <img
          v-if="processInstanceId != undefined" style="
          position: absolute;
          right: 0px;
          top: 118px;
          z-index: 2;
          width: 100px;
        " :src="getWorkFlowImageUrl()"
        />
      </div>
      <div v-if="windowDisplayType == 'Grid'">
        <!-- eslint-disable-next-line -->
        <div v-html="headerHtml" />

        <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="jsUrl"
                  :is-chinese-english="window.isChineseEnglish" @execute-callout="executeCallout(fieldItem)"
                />
              </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="jsUrl"
                      :is-chinese-english="window.isChineseEnglish" @execute-callout="executeCallout(fieldItem)"
                    />
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- eslint-disable-next-line -->
        <div v-html="footerHtml" />

        <template v-if="modelData != 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="jsUrl"
                :is-chinese-english="window.isChineseEnglish" @save-view="backupView"
                @process-execute-finish="refresh"
              />
            </div>
          </div>
        </template>

        <div v-if="attributeKey != null && attributeKey === true" class="row clearfix">
          <div class="col-md-12">
            <AttributeViewPanel
              ref="attributePanel" :attribute-key="attributeKey"
              :attribute-value-key="attributeValueKey" :window-no="windowNo"
            />
          </div>
        </div>
      </div>
      <div v-else style="height: 400px; overflow: scroll">
        <ProcessReportResultPreview
          v-if="
            processReportResult != null &&
              (processReportResult.reportResults != null ||
                processReportResult.processResult != null)
          " :process-report-result="processReportResult" :pdf-only="false" :excel-only="false"
        />
      </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-if="window.workflow.workflowType === 'OTHER'" class="col-md-12">
          <WorkflowStart :work-flow="window.workflow" :process-definition-id="processDefinitionId" @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="workflowType"
            :work-flow="window.workflow" :window-no="windowNo" :process-definition-id="processDefinitionId"
            :show-choice-button="showChoiceButton" :process-instance-id="processInstanceId" :task-info-id="taskInfoId"
            :record-id="modelData.id" :show-tab-dto="tab" :model-data="modelData" :uuid="uuid"
            :workflow-class-name="tab.tabDataSource.className" @save-view="backupView"
          />
        </div>
      </div>


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

      <div
        v-if="
          window != null &&
            tab != null &&
            tab.tabDataSource != null &&
            !window.hideCreateRecordButton && showAttachmentPanel == true
        "
      >
        <AttachmentPanel
          v-if="type == 'view'" :is-show-edit="true" :class-name="tab.tabDataSource.className"
          :record-id="recordId" :tab-index="tabIndex" :window-no="windowNo"
          :curd-window-function-access="curdWindowFunctionAccess"
        />
      </div>

      <a-modal 
        v-model:open="modal2" 
        width="100%" 
        @ok="showAuditPanel = false; 
             modal2 = false" 
        @cancel="showAuditPanel = false"
      >
        <template #title>
          {{ $t("lang.tabFormView.recordInformation") }}{{ currIndex }}/{{ totalCount }} - {{ tab.name }}
        </template>
        <TabAudit
          v-if="showAuditPanel" :window-no="windowNo" :tab-index="tabIndex" :tab="tab"
          :model-data="modelData"
        />
      </a-modal>

      <a-modal v-model:open="modal3" width="100%" title="创建评论">
        <CurdWindowCommentCreate ref="curdCommentCreate" :record-id="modelData.id" :window-no="modelData.windowNo" />
        <template #footer>
          <a-button type="primary" @click="saveAndSendNotification">
            确认
          </a-button>
          <a-button @click="modal3 = false">
            取消
          </a-button>
        </template>
      </a-modal>

      <div>
        <div class="page-header">
          <h4 style="display: inline-block">
            评论信息
          </h4>
          <a-button type="link" @click="openCurdWindowComment">发表评论</a-button>
        </div>
        <CurdWindowComment ref="curdComment" :record-id="modelData.id" />
      </div>



      <Loading v-if="loading" />
    </div>
  </a-modal>
</template>

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

import WindowServerUtil from '../../resource/dictionary/WindowServerUtil.js';
import WindowClientUtil from '../../resource/dictionary/WindowClientUtil.js';
import TabFormView from './TabFormView.js';
import FieldUtil from '../../resource/dictionary/FieldUtil.js';
import ProcessReportResource from '../../api/dic/ProcessReportResource.js';
import UserStorageResource from '../../api/base/UserStorageResource.js';
import UserReadDocumentResource from '../../api/base/UserReadDocumentResource.js';
import Language from '../../common/Language.js';
import Context from '../common/Context.js';
import CurdWindowResource from '../../api/dic/CurdWindowResource.js';

import SubTabGridEdit from '../tabGridView/SubTabGridEdit.vue';
import TabFormFieldView from './TabFormFieldView.vue';
import TabButton from '../tabView/TabButton.vue';
import FormFieldDef from '../tab-form-common/FormFieldDef.vue';
import AttachmentPanel from '../attachment/AttachmentPanel.vue';

import AttributeViewPanel from '../attribute/AttributeViewPanel.vue';
import WorkflowSelectUser from '../../workflow/WorkflowSelectUser.vue';
import WorkflowStart from '../../workflow/WorkflowStart.vue';
import WorkflowUserDefine from '../../workflow/WorkflowUserDefine.vue';
import TabAudit from '../tabView/TabAudit.vue';
import ApproveComment from '../../workflow/ApproveComment.vue';


import CurdWindowResourceV2 from '../../api/dic/CurdWindowResourceV2.js';
import CurdWindowEditResource from '../../api/dic/CurdWindowEditResource.js';
import JsUtil from '../../common/JsUtil.js';
import { Notify, Uuid } from 'pc-component-v3';


import CurdWindowComment from './CurdWindowComment.vue';
import CurdWindowCommentCreate from './CurdWindowCommentCreate.vue';
import NotificationPanel from '../../customer/NotificationPanel.vue';
import HistoryApproveComment from '../../workflow/HistoryApproveComment.vue';

import { CaretRightOutlined, CaretLeftOutlined, SmallDashOutlined, ExclamationCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import { Modal } from 'ant-design-vue';

export default {

  components: {
    SubTabGridEdit,
    TabFormFieldView,
    TabButton,
    FormFieldDef,
    AttachmentPanel,
    AttributeViewPanel,
    WorkflowSelectUser,
    WorkflowStart,
    ApproveComment,
    TabAudit,
    WorkflowUserDefine,
    CurdWindowComment,
    CurdWindowCommentCreate,
    NotificationPanel,
    HistoryApproveComment,
    CaretRightOutlined, 
    CaretLeftOutlined,
    SmallDashOutlined,
    ExclamationCircleOutlined,
    Modal,
    QuestionCircleOutlined,
  },

  props: {
    open: {
      type: Boolean,
      default: false,
    },
    // CURD窗口Id
    windowNo: {
      type: String,
      default: '',
    },
    // 页签编号
    tabIndex: {
      type: Number,
      default: 0,
    },
    // 数据记录Id
    modelDataId: {
      type: Number,
      default: null,
    },
    // 窗口类型(view:视图数据,restore:恢复数据)
    type: {
      type: String,
      default: '',
    },
    // 当前记录所在的页码
    currentPage: {
      type: Number,
      default: 0,
    },
    // 当前记录的排序
    currentIndex: {
      type: Number,
      default: 0,
    },
    // 记录的总数量
    totalRecords: {
      type: Number,
      default: 0,
    },
    // 窗口唯一Id(必须是唯一的)
    uuid: {
      type: String,
      default: '',
    },
    // 工作流任务Id(taskId)
    taskInfoId: {
      type: String,
      default: null,
    },
    // 工作流任务类型(approve:审批任务,copyTask:抄送任务)
    workflowType: {
      type: String,
      default: null,
    },
  },

  emits: ['update:open', 'OpenTabEditView'],
  
  data: function () {
    this.Language = Language;
    return {
      window: {}, // 窗口数据
      tab: {}, // 父页签
      tabFormFields: [],
      multipeColumnFields: [],
      modelData: {},
      errorCount: 0, // 校验错误数量
      errorMsg: '', // 校验错误信息
      error: 0,
      headerHtml: '', // Tab头HTML
      footerHtml: '', // Tab尾HTML
      headerApiUrl: '', // Tab头API URL
      footerApiUrl: '', // Tab尾API URL
      currPage: 1,
      attributeKey: undefined,
      attributeValueKey: undefined,
      processInstanceId: undefined,
      currIndex: 0,
      totalCount: 0,
      buttonGroupInitLeft: 0,
      buttonGroupInitTop: 0,
      showSpaceRow: false,

      // 工作流定义Id
      processDefinitionId: '',
      showAuditPanel: false,
      fixedButtonGroupHeight: 0,
      selectedTabIndex: 0, // 选择的页签序号
      windowDisplayType: 'Grid', //显示类型
      processReportResult: undefined,
      isView: true, //是否显示模式切换按钮
      curdWindowFunctionAccess: null, //权限
      jsUrl: null,
      loading: false,
      modal2: false,
      modal3: false,
      notificationModal: false,
    };
  },

  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;
    },

    /**
     * 是否显示历史审批记录面板
     * 处于审批中的单据，显示审批面板
     */
    showHistoryApproveComment: function () {
      if (
        this.window != null &&
        this.window.workflow != null &&
        this.modelData != null
      ) {
        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.taskInfoId != undefined &&
        this.workflowType != 'copyTask'
      ) {
        return true;
      }
      return false;
    },

    /**
         * 是否显示编辑
         * 审批完成的单据，显示审批评论面板
         */
    showEditButton: function () {
      if (this.window == undefined || this.window.tabs == undefined) {
        return false;
      } else if (this.window.readOnly) {
        return false;
      }

      if (this.curdWindowFunctionAccess == undefined || this.curdWindowFunctionAccess.allowUpdate == undefined || this.curdWindowFunctionAccess.allowUpdate == false) {
        return false;
      }

      if (
        this.window != undefined &&
        this.window.workflow != undefined &&
        this.modelData != undefined &&
        this.modelData.data != undefined &&
        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] == 'APPROVED' ||
          this.modelData.data.documentStatus.displayValue[0] == 'REJECTED' ||
          this.modelData.data.documentStatus.displayValue[0] == 'PROCESSING')
      ) {
        return false;
      }
      return true;
    },

    /**
     * 是否显示附件上传按钮
     */
    showAttachmentPanel: function () {
      if (this.curdWindowFunctionAccess == undefined
        || this.curdWindowFunctionAccess.allowUploadAttachment == undefined
        || this.curdWindowFunctionAccess.allowUploadAttachment == false) {
        return false;
      }
      return true;
    },

    /**
         * 是否显示新建按钮
         */
    showCreateButton: function () {
      if (this.window == undefined || this.window.tabs == undefined) {
        return false;
      } else if (this.window.readOnly) {
        return false;
      }

      if (this.curdWindowFunctionAccess == undefined || this.curdWindowFunctionAccess.allowCreate == undefined || this.curdWindowFunctionAccess.allowCreate == false) {
        return false;
      }

      var _self = this;

      if (_self.tab.isReadOnly == true) {
        return false;
      }

      // 处于审批界面
      if (_self.$route.query.workflowType === 'approve') {
        return false;
      }

      return true;
    },

    /**
         * 是否显示删除按钮
         */
    showDeleteButton: function () {
      if (this.window == undefined || this.window.tabs == undefined) {
        return false;
      } else if (this.window.readOnly) {
        return false;
      }

      if (this.curdWindowFunctionAccess == undefined || this.curdWindowFunctionAccess.allowDelete == undefined || this.curdWindowFunctionAccess.allowDelete == false) {
        return false;
      }

      var _self = this;

      if (_self.tab.isReadOnly == true) {
        return false;
      }

      // 处于审批界面
      if (_self.$route.query.workflowType === 'approve') {
        return false;
      }

      return true;
    },

    /**
         * 是否显示弃审按钮
         */
    showRedrawButton: function () {
      if (this.window == undefined || this.window.tabs == undefined) {
        return false;
      } else if (this.window.readOnly) {
        return false;
      }

      var _self = this;

      if (_self.tab.isReadOnly == true) {
        return false;
      }

      // 处于审批界面
      if (_self.$route.query.workflowType === 'approve') {
        return false;
      }
      // 处于抄送界面
      if (_self.$route.query.workflowType === 'copyTask') {
        return false;
      }

      if (
        _self.modelData != undefined &&
        _self.modelData.data != undefined &&
        _self.modelData.data.documentStatus != undefined
      ) {
        let documentStatus =
          _self.modelData.data.documentStatus.displayValue[0];
        if (documentStatus == 'REJECTED' || documentStatus == 'APPROVED') {
          return false;
        }
      }

      if (
        _self.window.workflow != undefined &&
        _self.processInstanceId != undefined &&
        _self.processInstanceId != ''
      ) {
        return true;
      }



      return false;
    },
  },

  watch: {

    modelData: {
      deep: true,
      handler(curVal, oldVal) {
        this.tabButtonsShowLogical();
        this.reportViewsShowLogical();
      },
    },

    /**
     * 显示界面发生改变的时候，重新执行显示逻辑
     */
    windowDisplayType: function (newValue, oldValue) {
      this.reportViewsShowLogical();
    },
  },

  mounted: function () {
    console.log('WindowView mounted.');

    var _self = this;

    // 按钮栏实现滚动
    // _self.$nextTick(function () {
    // var fixedButtonGroup = $(_self.$refs.fixedButtonGroup);
    // _self.computerButtonGroupLeftTop();
    // $(window).scroll(function (){
    //     if ($(window).scrollTop() > _self.buttonGroupInitTop) {
    //         _self.showSpaceRow = true;
    //         _self.$nextTick(function (){
    //         	fixedButtonGroup.addClass('btn-group-fixed');
    //         	fixedButtonGroup.css('left', _self.buttonGroupInitLeft + 'px');
    //         });
    //     } else {
    //         _self.showSpaceRow = false;
    //         _self.$nextTick(function (){
    //         	fixedButtonGroup.removeClass('btn-group-fixed');
    //         	fixedButtonGroup.css('left', '');
    //         });
    //     }

    //     if ($(window).scrollTop() <= 10){
    // 		_self.computerButtonGroupLeftTop();
    //     }
    // });

    // var fixedButtonGroup = $(_self.$refs.fixedButtonGroup);
    // var buttonInitTop = fixedButtonGroup.offset().top;

    // _self.fixedButtonGroupHeight = fixedButtonGroup.outerHeight();

    // // 按钮组实现悬浮
    // $(window).scroll(function () {
    //   var windowTop = $(window).scrollTop();
    //   if (windowTop > buttonInitTop + fixedButtonGroup.outerHeight()) {
    //     fixedButtonGroup.offset({
    //       top: windowTop,
    //       left: fixedButtonGroup.offset().left,
    //     });
    //   } else {
    //     fixedButtonGroup.offset({
    //       top: buttonInitTop,
    //     });
    //   }
    // });
    // });

    // $(window).resize(function () {
    //   _self.$nextTick(function () {
    //     _self.computerButtonGroupLeftTop();
    //   });
    // });

    // 获取待审阅的数据
    let userReadDocumentId = this.$route.query.userReadDocumentId;
    if (userReadDocumentId != null && userReadDocumentId != '') {
      UserReadDocumentResource.setProcessed(userReadDocumentId).then(
        successData => {
          if (successData.errorCode === 1) {
            Notify.error(_self.$t('lang.tabFormView.dataException'), _self.$t('lang.tabFormView.reviewDataHasBeenDeleted'), false);
          } else if (successData.errorCode === 2) {
            console.log('单据已经审阅');
            _self.initView();
          } else if (successData.errorCode === 3) {
            Notify.error(_self.$t('lang.tabFormView.dataException'), _self.$t('lang.tabFormView.describe1'), false);
          } else if (successData.errorCode === 0) {
            console.log('设置单据已经审阅成功。');
            _self.initView();
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    } else {
      console.debug('call init view method.');
      _self.initView();
    }
  },
  methods: {

    /**
     * 打开评论界面进行评论
     * @author GuoZhiBo 20171201
     */
    openCurdWindowComment: function () {
      var _self = this;
      _self.modal3 = true;
    },

    saveAndSendNotification: function () {
      var _self = this;
      _self.$refs.curdCommentCreate.photograph();
      _self.sendNotification();
    },

    // 发送通知
    sendNotification: function () {
      var _self = this;
      var notification = _self.$refs.curdCommentCreate.getNotification();
      var recordIds = [];
      recordIds.push(_self.modelData.id);
      if (recordIds.length == 0) {
        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.tabButton.describe7'), true);
        return;
      }
      // if (notification.userIds == null || notification.userIds.length == 0) {
      //   Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.tabButton.describe8'), true);
      //   _self.modal3 = false;
      //   return;
      // }
      if (notification.theme == null || notification.theme.trim() == '') {
        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.tabButton.describe9'), true);
        return;
      }
      if (notification.contentText == null || notification.contentText.trim() == '') {
        Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.tabButton.describe10'), true);
        return;
      }
      notification.windowNo = _self.modelData.windowNo;
      notification.tabIndex = _self.tabIndex;
      notification.recordIds = recordIds;
      notification.className = _self.tab.tabDataSource.className;
      notification.category = 'CurdWindow';
      notification.documentName = 'view';
      if (_self.modelData.data.processInstanceId != undefined || _self.modelData.data.processInstanceId != null) {
        notification.processInstanceId = _self.modelData.data.processInstanceId.displayValue[0];
      }
      if (_self.modelData.data.documentNo != undefined || _self.modelData.data.documentNo != null) {
        notification.documentNo = _self.modelData.data.documentNo.displayValue[0];
      }
      if (_self.modelData.data.documentCreateUser != undefined || _self.modelData.data.documentCreateUser != null) {
        notification.documentUserNickName = _self.modelData.data.documentCreateUser.displayValue[0];
      }

      _self.loading = true;
      $.ajax({
        url: Common.getApiURL('notificationResource/send'),
        type: 'post',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        contentType: 'application/json',
        data: JSON.stringify(notification),
        success: function (data) {
          _self.loading = false;
          Notify.success(_self.$t('lang.tabButton.describe11'), '操作成功', true);
          _self.modal3 = false;
          _self.$refs.curdComment.getCurdComment();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },


    /**
         * 获取审批图片
         */
    getWorkFlowImageUrl: function () {
      var _self = this;
      if (
        _self.modelData != undefined &&
        _self.modelData.data != undefined &&
        _self.modelData.data.documentStatus != undefined
      ) {
        var documentStatus =
          _self.modelData.data.documentStatus.displayValue[0];
        if (documentStatus == undefined || documentStatus == 'EDIT') {
          return '/static/assets/client-base-v4/image-workflow/edit.png';
        } else if (documentStatus == 'APPROVED') {
          return '/static/assets/client-base-v4/image-workflow/approved.png';
        } else if (documentStatus == 'REJECTED') {
          return '/static/assets/client-base-v4/image-workflow/rejected.png';
        } else if (documentStatus == 'PROCESSING') {
          return '/static/assets/client-base-v4/image-workflow/processing.png';
        } else if (documentStatus == 'WITHDRAW') {
          return '/static/assets/client-base-v4/image-workflow/withdraw.png';
        }
      }
    },
    /**
         * 切换显示模式
         * @author GuoZhiBo 20210419
         */
    changeWindowDisplayType: function () {
      var _self = this;
      if (_self.windowDisplayType == 'Grid') {
        _self.windowDisplayType = 'Report';
      } else {
        _self.windowDisplayType = 'Grid';
        _self.$nextTick(function () {
          for (var index = 0; index < _self.tab.subTabs.length; index++) {
            var subTabId = 'subTab' + this.tab.subTabs[index].tabIndex;
            _self.$refs[subTabId][0].queryGridData();
          }
        });
      }
    },
    // 执行流程
    executeProcess: function (processReportNo) {
      var _self = this;
      var ids = [];
      if (_self.modelDatas) {
        _self.modelDatas.forEach(function (modelData) {
          if (modelData.select == true) {
            ids.push(modelData.id);
          }
        });
      } else if (_self.modelData) {
        ids.push(_self.modelData.id);
      }
      ProcessReportResource.runProcessByIds(processReportNo, ids).then(
        successData => {
          var processReportResult = successData;
          if (_self.processReportResult == undefined) {
            if (
              processReportResult.reportResults != undefined &&
              processReportResult.reportResults.length > 0
            ) {
              processReportResult.reportResults.forEach(function (item, index) {
                if (item.reportDefinitionType !== 'ExcelReport') {
                  item.previewIndex = 1;
                } else {
                  item.previewIndex = 2;
                }
                if (index == 0) {
                  item.showPreview = true;
                } else {
                  item.showPreview = false;
                }
              });
            }
            _self.processReportResult = processReportResult;
          } else {
            if (
              processReportResult.reportResults != undefined &&
              processReportResult.reportResults.length > 0
            ) {
              processReportResult.reportResults.forEach(function (item, index) {
                item.previewIndex = 1;
                if (index == 0) {
                  item.showPreview = true;
                } else {
                  item.showPreview = false;
                }
                _self.processReportResult.reportResults.push(item);
              });
            }
          }
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },
    getContext: Context,
    /**
         * 弃审
         */
    abandonWorkflow: function () {
      var _self = this;
      _self.loading = true;
      var obj = {
        className: _self.tab.tabDataSource.className,
        tabIndex: _self.tabIndex,
        windowNo: _self.window.no,
        recordId: _self.modelData.id,
      };
      $.ajax({
        url: Common.getApiURL('WorkflowResource/abandonWorkflow'),
        type: 'post',
        contentType: 'application/json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: JSON.stringify(obj),
        success: function (data) {
          _self.loading = false;
          _self.refresh();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
         * 打开帮助页面
         */
    openHtmlHelp: function (htmlHelpUrl) {
      window.open(htmlHelpUrl);
    },
    auditData: function () {
      var _self = this;
      _self.showAuditPanel = true;
      _self.modal2 = true;
    },

    // 初始化界面
    initView: function () {
      this.recordId = this.modelDataId;
      this.currPage = this.currentPage;
      this.currIndex = this.currentIndex;
      this.totalCount = this.totalRecords;

      if (this.type == 'view') {
        this.initReadView();
      } else if (this.type == 'restore') {
        // 恢复视图
        this.restoreView();
      }
      if (this.workflowType == 'copyTask') {
        $.ajax({
          url: Common.getApiURL('WorkflowResource/processTaskInfo'),
          type: 'get',
          dataType: 'json',
          contentType: 'application/json',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          data: {
            taskInfoId: this.taskInfoId,
          },
          success: function (data) { },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      }
    },

    // 初始化编辑界面
    initReadView: function () {
      var _self = this;
      _self.loading = true;

      if (_self.taskInfoId) {
        CurdWindowResource.uniqueByNoWithWorkflow(
          null,
          _self.taskInfoId,
          _self.windowNo,
        ).then(
          successData => {
            initWindowAfterLoaded(successData);
            _self.uniqueByNoAccessControl();
          },
          errorData => {
            _self.loading = false;
            Common.processException(errorData);
          },
        );
      } else {
        WindowServerUtil.getWindowById(
          _self.windowNo,
          function (window) {
            initWindowAfterLoaded(window);
            _self.uniqueByNoAccessControl();
          },
          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.jsUrl = window.jsUrl;
        _self.tab = tab;
        TabFormView.restoreTabFormFieldDef(
          _self.windowNo,
          _self.tabIndex,
          _self.tabFormFields,
        );
        _self.loadData();

        if (_self.window.workflow != undefined) {
          _self.processDefinitionId = _self.window.workflow.deploymentId;
        }
        _self.initHeaderAndFooterApiUrl();
        _self.loadHeaderAndFooterContent(_self.recordId);
        _self.loading = false;
        if (
          _self.window.reportViewDto != null &&
          _self.window.reportViewDto.reportViewItemDtos != null &&
          _self.window.reportViewDto.reportViewItemDtos.length > 0
        ) {
          var isflag = false;
          _self.window.reportViewDto.reportViewItemDtos.forEach(function (item) {
            if (item.defaultDisplayReport) {
              isflag = true;
            }
          });
          if (isflag) {
            _self.windowDisplayType = 'Report';
          } else {
            _self.windowDisplayType = 'Grid';
          }
        } else {
          _self.windowDisplayType = 'Grid';
          _self.isView = false;
        }
      }
    },

    // 恢复视图
    restoreView: function () {
      var _self = this;
      _self.uuid = this.$route.query.uuid;

      _self.loading = true;
      WindowServerUtil.getWindowById(
        _self.windowNo,
        function (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.jsUrl = window.jsUrl;
          _self.tab = tab;
          TabFormView.restoreTabFormFieldDef(
            _self.windowNo,
            _self.tabIndex,
            _self.tabFormFields,
          );

          _self.uniqueByNoAccessControl();

          let key = _self.uuid + '_modelData';
          UserStorageResource.uniqueByKey(key).then(
            successData => {
              // if(successData.errorCode != 0) {
              //   Notify.error('提示', successData.errorMessage, false);
              //   return;
              // }
              if (successData.data != null && successData.data != '') {
                let cacheModelData = JSON.parse(successData.data);
                _self.$nextTick(function () {
                  if (
                    cacheModelData.saveDatas != undefined &&
                    cacheModelData.saveDatas.length > 0
                  ) {
                    cacheModelData.saveDatas.forEach(function (saveData) {
                      // 恢复子页签的数据
                      var subTabId = 'subTab' + saveData.tabIndex;
                      _self.$refs[subTabId][0].addModelData(saveData);
                    });
                  } else {
                    // BUG描述：父子页签，编辑以后撤销，子页签数据不显示
                    // BUG修复：刷新子页签的数据
                    // bug fixed by jack 20180203

                    for (
                      var index = 0; index < _self.tab.subTabs.length; index++
                    ) {
                      var subTabId =
                        'subTab' + this.tab.subTabs[index].tabIndex;
                      _self.$refs[subTabId][0].queryGridData();
                    }
                  }
                });

                _self.initHeaderAndFooterApiUrl();
                _self.loadHeaderAndFooterContent(_self.recordId);
              }
            },
            errorData => {
              Common.processException(errorData);
            },
          );

          if (_self.window.workflow != undefined) {
            _self.processDefinitionId = _self.window.workflow.deploymentId;
          }
          _self.loading = false;
        },
        function () {
          _self.loading = false;
        },
      );
    },

    // 备份视图
    backupView: function () {
      var _self = this;
      var subTabChangedData = _self.getSubTabChangedData();
      if (subTabChangedData.length > 0) {
        _self.modelData.saveDatas = subTabChangedData;
      } else {
        _self.modelData.saveDatas = null;
      }

      let key = _self.uuid + '_modelData';
      let userStorageDtos = [{
        key: key,
        value: JSON.stringify(_self.modelData),
      }];

      // 组装查询条件，然后放到后台数据库当中
      UserStorageResource.uploadUserStorage(userStorageDtos).then(
        successData => { },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    uniqueByNoAccessControl: function () {
      // 权限
      CurdWindowResourceV2.uniqueByNoAccessControl(
        this.windowNo,
      ).then(successData => {
        if (successData.errorCode === 0) {
          this.curdWindowFunctionAccess = successData.data;
          if (this.curdWindowFunctionAccess.readOnly != null && this.curdWindowFunctionAccess.readOnly === true) {
            this.window.readOnly = true;
          }
        }
      }, errorData => {
        Common.processException(errorData);
      });
    },

    /**
         * 数据发生改变
         * eg:生单界面回传了新的modelData数据
         */
    modelDataChanged: function (newModelData) {
      this.refresh();
    },

    /**
         * 获取界面的数据
         * eg:生单界面获取modelData数据
         */
    getModelData: function () {
      var _self = this;
      var subTabChangedData = _self.getSubTabChangedData();
      if (subTabChangedData.length > 0) {
        _self.modelData.saveDatas = subTabChangedData;
      } else {
        _self.modelData.saveDatas = null;
      }
      return _self.modelData;
    },

    /**
         * 初始化表头和表尾API方法
         * @return {[type]} [description]
         */
    initHeaderAndFooterApiUrl: function () {
      if (this.tab != undefined && this.tab.tabFormView != undefined) {
        this.headerApiUrl = this.tab.tabFormView.headerApiUrl;
        this.footerApiUrl = this.tab.tabFormView.footerApiUrl;
      }
    },

    /**
         * 加载表头和表位的方法
         * @return {[type]} [description]
         */
    loadHeaderAndFooterContent: function (recordId) {
      var _self = this;
      if (this.headerApiUrl != undefined && this.headerApiUrl.length > 0) {
        $.ajax({
          url: Common.getApiURL(_self.headerApiUrl),
          type: 'post',
          contentType: 'application/json',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          data: JSON.stringify({
            recordId: recordId,
          }),
          dataType: 'text',
          success: function (data) {
            _self.headerHtml = data;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      } else {
        _self.headerHtml = '';
      }
      if (this.footerApiUrl != undefined && this.footerApiUrl.length > 0) {
        $.ajax({
          url: Common.getApiURL(_self.footerApiUrl),
          type: 'post',
          contentType: 'application/json',
          beforeSend: function (request) {
            Common.addTokenToRequest(request);
          },
          data: JSON.stringify({
            recordId: recordId,
          }),
          dataType: 'text',
          success: function (data) {
            _self.footerHtml = data;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            Common.processException(XMLHttpRequest, textStatus, errorThrown);
          },
        });
      } else {
        _self.footerHtml = '';
      }
    },

    /**
         * 刷新数据
         */
    refresh: function () {
      var _self = this;
      _self.loadData();
      // add by jack 2018-03-22
      if (_self.recordId != null) {
        _self.loadHeaderAndFooterContent(_self.recordId);
      }
    },

    loadData: function () {
      var _self = this;

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

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

      _self.processInstanceId = '';

      _self.loading = true;

      WindowServerUtil.loadTabSingleData(
        tabLoadParam,
        function (modelData) {
          _self.modelData = modelData;

          // 判断是否显示审批状态
          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];
            } else {
              _self.processInstanceId = '';
            }
          } else {
            _self.processInstanceId = '';
          }

          // 判断是否有属性
          if (
            _self.modelData != null &&
            _self.modelData.data != null &&
            _self.modelData.data.attributeKey != null &&
            _self.modelData.data.attributeKey.displayValue != null
          ) {
            let displayValue = _self.modelData.data.attributeKey.displayValue;
            if (displayValue.length > 0) {
              _self.attributeKey = displayValue[0];
            }
          }

          // 判断是否有属性值
          if (
            _self.modelData != null &&
            _self.modelData.data != null &&
            _self.modelData.data.attributeKey != null &&
            _self.modelData.data.attributeValueKey != undefined &&
            _self.modelData.data.attributeValueKey.displayValue != undefined
          ) {
            var displayValue1 =
              _self.modelData.data.attributeValueKey.displayValue;
            if (displayValue1.length > 0) {
              _self.attributeValueKey = displayValue1[0];
            }
          }

          _self.loading = false;
        },
        function () {
          _self.loading = false;
        },
      );
    },

    // 改变字段分组的显示和隐藏
    changeFieldGroupStatus: function (fieldGroup) {
      fieldGroup.show = !fieldGroup.show;
      var index = this.tab.tabFormView.fieldGroups.indexOf(fieldGroup);
      if (index != -1) {
        this.tab.tabFormView.fieldGroups[index] = fieldGroup;
        localStorage.setItem(
          'FieldGroupStatus_' +
          this.windowNo +
          '_' +
          this.tabIndex +
          '_' +
          fieldGroup.groupName,
          fieldGroup.show,
        );
      }
    },

    // 获取子页签发生改变的数据
    getSubTabChangedData: function () {
      var subTabChangedRecords = [];
      if (this.tab.subTabs != undefined) {
        for (var index = 0; index < this.tab.subTabs.length; index++) {
          var subTabId = 'subTab' + this.tab.subTabs[index].tabIndex;
          var modelDatas = this.$refs[subTabId][0].getChangedModelData();
          if (modelDatas != undefined && modelDatas.length > 0) {
            modelDatas.forEach(function (modelData) {
              subTabChangedRecords.push(modelData);
            });
          }
        }
      }
      console.log(subTabChangedRecords);
      return subTabChangedRecords;
    },
    // 获取子页签数据校验的Promise
    getSubTabValidatePromise: function () {
      var _self = this;

      var validatePromises = [];
      if (this.tab.subTabs != undefined) {
        for (var index = 0; index < this.tab.subTabs.length; index++) {
          var subTabId = 'subTab' + this.tab.subTabs[index].tabIndex;
          var subTabValidates = this.$refs[subTabId][0].performValidate();
          validatePromises = validatePromises.concat(subTabValidates);
        }
      }
      return validatePromises;
    },

    /**
         * 表单字段的属性（显示）属性发生改变事件
         */
    tabFormFieldPropertyChanged: function () {
      TabFormView.restoreTabFormFieldDef(
        this.windowNo,
        this.tabIndex,
        this.tabFormFields,
      );
    },

    // 新建数据
    createRecord: function () {
      let _self = this;
      var currIndex = this.currIndex;
      var totalCount = this.totalCount;
      if (this.curdWindowFunctionAccess.allowCreate != null && this.curdWindowFunctionAccess.allowCreate === true) {
        let data = {
          type: 'create',
          windowNo: _self.windowNo,
          tabIndex: _self.tabIndex,
          modelDataId: _self.modelData.id,
          currentPage: _self.currPage,
          currentIndex: currIndex,
          totalRecords: totalCount,
          isRestoreData: true,
          uuid: _self.uuid,
        };
        _self.$emit('OpenTabEditView', data);

      } else {
        Notify.error(this.$t('lang.tabFormView.clickNewError'), this.$t('lang.tabFormView.describe3'), false);
      }
    },

    /**
         * 编辑数据
         * @return {void}
         */
    editRecord: function () {
      var _self = this;
      if (this.curdWindowFunctionAccess.allowUpdate != null && this.curdWindowFunctionAccess.allowUpdate === true) {
        this.backupView();

        let data = {
          type: 'edit',
          windowNo: _self.windowNo,
          tabIndex: _self.tabIndex,
          modelDataId: _self.modelData.id,
          currentPage: _self.currPage,
          currentIndex: _self.currIndex,
          totalRecords: _self.totalCount,
          isRestoreData: false,
          uuid: _self.uuid,
        };
        _self.$emit('OpenTabEditView', data);
      } else {
        Notify.error(_self.$t('lang.tabFormView.clickEditError'), _self.$t('lang.tabFormView.describe4'), false);
      }
    },

    /**
     * 删除当前的数据
     * @return {[type]} [description]
     */
    deleteRecord: function (isAlert) {
      var _self = this;
      if (this.modelData == undefined || this.modelData.id == undefined) {
        return;
      }

      if (this.curdWindowFunctionAccess.allowDelete != null && this.curdWindowFunctionAccess.allowDelete === true) {
        if (isAlert) {
          Modal.confirm({
            title: _self.$t('lang.tabFormView.deleteConfirmation'),
            icon: createVNode(ExclamationCircleOutlined),
            content: _self.$t('lang.tabFormView.someWhat'),
            okText: _self.$t('lang.tabFormView.determine'),
            okType: 'danger',
            cancelText: _self.$t('lang.tabFormView.cancel'),
            onOk() {
              _self.deleteRecord(false);
            },
            onCancel() {
              console.log('Cancel');
            },
          });
          return;
        }

        if (this.modelData.id < 0) {
          _self.$emit('update:open', false);
          return;
        }

        var tabDeleteData = {
          windowNo: _self.windowNo,
          tabIndex: _self.tabIndex,
          modelDatas: [_self.modelData],
        };

        WindowServerUtil.deleteTabData(tabDeleteData, function (result) {
          _self.$emit('update:open', false);
        });
      } else {
        Notify.error(_self.$t('lang.tabFormView.clickDeleteError'), _self.$t('lang.tabFormView.describe5'), false);
      }
    },

    /**
         * 子标题
         * @return {String} 子标题
         */
    subTitle: function () {
      var _self = this;
      var subTitle = '';
      if (_self.modelData == null || _self.modelData.data == undefined) {
        return subTitle;
      }
      if (_self.modelData.data.documentNo != undefined) {
        subTitle =
          _self.modelData.data.documentNo.displayValue == undefined ?
            '' :
            _self.modelData.data.documentNo.displayValue[0];
      } else if (_self.modelData.data.no != undefined) {
        subTitle =
          _self.modelData.data.no.displayValue == undefined ?
            '' :
            _self.modelData.data.no.displayValue[0];
      } else if (_self.modelData.data.name != undefined) {
        subTitle =
          _self.modelData.data.name.displayValue == undefined ?
            '' :
            _self.modelData.data.name.displayValue[0];
      }
      return subTitle;
    },


    /**
         * 审批
         * @return {void}
         */
    apply: function () {
      var _self = this;

      if (
        _self.processInstanceId != null &&
        _self.processInstanceId.length > 0
      ) {
        return;
      }

      var userData = null;
      var approveUsers = null;
      var copyUsers = null;
      var userTaskDtos = null;
      let userSelectDtos = null;
      if (this.window.workflow.workflowType === 'UserDefine') {
        try {
          let param = this.$refs.workflowUserDefine.getData();
          userSelectDtos = param.userSelectDtos;
          copyUsers = param.copyUsers;
        } catch (exception) {
          Notify.error(_self.$t('lang.tabFormView.describe6'), exception.message, false);
          return;
        }
      } else if (this.window.workflow.workflowType === 'OTHER') {
        userSelectDtos = null;
        copyUsers = null;
      } else {
        userData = _self.$refs.workflow.getUserData();
        approveUsers = userData.applyUsers;
        copyUsers = userData.copyUsers;
        userTaskDtos = userData.userTaskDtos;

        // 检查结点数据是否完整
        for (var i = 0; i < userTaskDtos.length; i++) {
          if (
            userTaskDtos[i].assignees.length == undefined ||
            userTaskDtos[i].assignees.length == 0
          ) {
            Notify.error(
              _self.$t('lang.tabFormView.submitFailed'),
              _self.$t('lang.tabFormView.describe7', { userTaskDtoName: userTaskDtos[i].name }),
              false,
            );
            return;
          }
        }
      }

      var deploymentId = _self.window.workflow.deploymentId;
      var recordId = _self.recordId;
      var windowNo = _self.windowNo;

      var workflowStartParam = {
        deploymentId: deploymentId,
        recordId: recordId,
        windowNo: windowNo,
        approveUsers: approveUsers,
        copyUsers: copyUsers,
        userTaskDtos: userTaskDtos,
        tabIndex: _self.tab.tabIndex,
        className: _self.tab.tabDataSource ?
          _self.tab.tabDataSource.className :
          null,
        userSelectDtos: userSelectDtos,
      };

      _self.loading = true;
      $.ajax({
        url: Common.getApiURL('WorkflowExtResource/startWorkflow'),
        type: 'post',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        contentType: 'application/json',
        data: JSON.stringify(workflowStartParam),
        success: function (data) {
          _self.loading = false;
          Notify.success(_self.$t('lang.tabFormView.notice'), _self.$t('lang.tabFormView.describe8'), true);
          _self.finishTask();
          _self.refresh();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 完成任务
     */
    finishTask: function () {
      let _self = this;
      let taskId = this.$route.query.taskId;
      if (taskId == null) {
        return;
      }
      $.ajax({
        url: Common.getApiURL('WorkflowResource/finishTask'),
        type: 'get',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        contentType: 'application/json',
        data: { taskId: taskId },
        success: function (data) {
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 上一条数据
         * @return {void}
         */
    pre: function () {
      var _self = this;
      if (_self.currIndex <= 1) {
        return;
      }
      _self.currIndex--;
      var tabQueryParam = {
        range: {
          start: _self.currIndex - 1,
          length: 1,
        },
        windowNo: _self.windowNo,
        tabIndex: _self.tabIndex,
      };

      UserStorageResource.uniqueByKey(_self.uuid).then(
        successData => {
          // if(successData.errorCode != 0) {
          //   Notify.error('提示', successData.errorMessage, false);
          //   return;
          // }
          let simpleFilterParams = null;

          let complexFilterParams = null;

          if (successData.data != null && successData.data != '') {
            let temp = JSON.parse(successData.data);
            // 分页数据

            // 简单过滤条件
            tabQueryParam.simpleFilterCondition = temp.simpleFilterParams;
            // 复杂过滤条件
            tabQueryParam.filterParams = temp.complexFilterParams;
            // 排序
            tabQueryParam.sortStr = temp.sortStr;
          }

          _self.loadTabData(tabQueryParam);
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    /**
         * 下一条数据
         * @return {void}
         */
    next: function () {
      var _self = this;
      var totalCount = _self.totalCount;
      if (_self.currIndex >= totalCount) {
        return;
      }
      _self.currIndex++;
      var tabQueryParam = {
        range: {
          start: _self.currIndex - 1,
          length: 1,
        },
        windowNo: _self.windowNo,
        tabIndex: _self.tabIndex,
      };

      UserStorageResource.uniqueByKey(_self.uuid).then(
        successData => {
          // if(successData.errorCode != 0) {
          //   Notify.error('提示', successData.errorMessage, false);
          //   return;
          // }
          if (successData.data != null && successData.data != '') {
            let temp = JSON.parse(successData.data);
            // 分页数据

            // 简单过滤条件
            tabQueryParam.simpleFilterCondition = temp.simpleFilterParams;
            // 复杂过滤条件
            tabQueryParam.filterParams = temp.complexFilterParams;
            // 排序
            tabQueryParam.sortStr = temp.sortStr;
          }

          _self.loadTabData(tabQueryParam);
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    /**
         * 加载一条数据
         * @param  {Object} tabQueryParam 查询条件
         * @return {void}
         */
    loadTabData: function (tabQueryParam) {
      var _self = this;

      _self.processInstanceId = '';

      _self.loading = true;
      WindowServerUtil.queryTabData(
        tabQueryParam,
        function (gridData) {
          var dataLists = gridData.dataList;
          if (dataLists != undefined && dataLists.length > 0) {
            _self.modelData = dataLists[0];
            if (_self.modelData) {
              _self.recordId = _self.modelData.id;
              _self.loadHeaderAndFooterContent(_self.recordId);

              if (_self.modelData.data.processInstanceId != undefined) {
                var displayValue =
                  _self.modelData.data.processInstanceId.displayValue;
                if (displayValue != undefined && displayValue.length > 0) {
                  _self.processInstanceId = displayValue[0];
                }
              }
            }
          }
          _self.loading = false;
        },
        function () {
          _self.loading = false;
        },
      );
    },

    /**
         * 计算按钮坐标
         *
         */
    computerButtonGroupLeftTop: function () {
      var _self = this;
      var fixedButtonGroup = $(_self.$refs.fixedButtonGroup);
      if (fixedButtonGroup != undefined) {
        var offset = fixedButtonGroup.offset();
        if (offset != undefined) {
          _self.buttonGroupInitLeft = offset.left;
          _self.buttonGroupInitTop = offset.top;
        }
      }
    },

    /**
         * 执行Callout
         */
    executeCallout: function (fieldItem) {
      var _self = this;
      if (fieldItem.calloutProcessReportNo != null) {
        _self.callout(fieldItem.calloutProcessReportNo);
      }
    },

    /**
         * callout
         * @param  {[type]} calloutProcessReportNo [description]
         * @return {[type]}                  [description]
         */
    callout: function (calloutProcessReportNo) {
      var _self = this;

      // 查询流程和报表的定义
      ProcessReportResource.uniqueByNo(calloutProcessReportNo).then(
        successData => {
          if (successData == null) {
            return;
          }

          // 执行服务端的脚本
          ProcessReportResource.runCallout(
            calloutProcessReportNo,
            _self.modelData,
          ).then(
            successData => {
              if (successData && successData.modelData) {
                _self.modelData = successData.modelData;
              }
            },
            errorData => {
              Common.processException(errorData);
            },
          );
        },
        errorData => {
          Common.processException(errorData);
        },
      );
    },

    /**
         * 页签按钮的显示逻辑
         */
    tabButtonsShowLogical: function () {
      let _self = this;
      if (
        this.tab.tabFormView != null &&
        this.tab.tabFormView.tabButtons != null
      ) {
        for (
          let index = 0; index < this.tab.tabFormView.tabButtons.length; index++
        ) {
          let tabButton = this.tab.tabFormView.tabButtons[index];
          if (tabButton.editMode != true) {
            var logic = tabButton.showLogical;

            if (logic == null || logic == '') {
              tabButton.invisible = false;
              return;
            }

            let functionName = 'form_view_show_logical_' + index;

            let executeFunction = function () {
              try {
                let context = new _self.getContext(_self.modelData);
                tabButton.invisible = !_self[functionName](context);
              } catch (error) {
                console.error(error);
                Notify.error('数据字典定义异常', '【' + tabButton.name + '】页签按钮显示逻辑定义异常,请联系管理员检查数据字典的定义。', false);
              }
            };

            if (_self[functionName] == null) {
              const jsUrl = _self.jsUrl;
              if (jsUrl == null || jsUrl == undefined) {
                Notify.error('数据字典定义异常', '【' + tabButton.name + '】页签按钮显示逻辑的JS文件不存在,请联系管理员检查数据字典是否存在JS文件。', false);
                return;
              }
              let promise = JsUtil.dynamicLoadJsFunction(jsUrl, logic);
              promise.then(targetFunction => {


                if (targetFunction == null) {
                  Notify.error('数据字典定义异常', '【' + tabButton.name + '】页签按钮显示逻辑不存在,请联系管理员检查数据字典的定义。', false);
                  return;
                }

                _self[functionName] = targetFunction;

                executeFunction();
              }, errorData => {
                console.error(errorData);
              });
            } else {
              executeFunction();
            }
          }
        }
      }
    },

    /**
     * 报表视图显示逻辑
     */
    reportViewsShowLogical: function () {
      var _self = this;

      if (_self.windowDisplayType != 'Report') {
        // add by jack 2023-12-05
        // 如果不处于报表界面，那么不执行下述业务逻辑
        return;
      }


      if (
        _self.window.reportViewDto != null &&
        _self.window.reportViewDto.reportViewItemDtos != null
      ) {
        _self.processReportResult = undefined;
        for (
          let index = 0; index < _self.window.reportViewDto.reportViewItemDtos.length; index++
        ) {
          let reportViewItemDto =
            _self.window.reportViewDto.reportViewItemDtos[index];
          var logic = reportViewItemDto.showLogical;
          if (logic == null || logic == '') {
            reportViewItemDto.invisible = false;
            _self.executeProcess(reportViewItemDto.processReportNo);
            return;
          }


          let executeFunction = function () {
            let context = new _self.getContext(_self.modelData);

            reportViewItemDto.invisible = !_self[functionName](context);

            if (reportViewItemDto.invisible == false) {
              _self.executeProcess(reportViewItemDto.processReportNo);
            }
          };

          let functionName = 'form_view_showlogical_' + index;

          if (this[functionName] == null) {

            const jsUrl = _self.jsUrl;
            if (jsUrl == null || jsUrl == undefined) {
              Notify.error('数据字典定义异常', '【' + reportViewItemDto.processReportName + '】CURD报表显示逻辑的JS文件不存在,请联系管理员检查数据字典是否存在JS文件。', false);
              return;
            }
            let promise = JsUtil.dynamicLoadJsFunction(jsUrl, logic);
            promise.then(targetFunction => {
              if (targetFunction == null) {
                Notify.error('数据字典定义异常', '【' + reportViewItemDto.processReportName + '】CURD报表显示逻辑不存在,请联系管理员检查数据字典的定义。', false);
                return;
              }
              _self[functionName] = targetFunction;

              executeFunction();
            });
          } else {
            executeFunction();
          }
        }
      }
    },

  },
};
</script>

<style scoped>
.field-group {
  padding-left: 30px;
  padding-right: 30px;
}

.fieldGroup-head {
  cursor: pointer;
}

.a-back {
  cursor: pointer;
  text-decoration: none;
}

h3 {
  line-height: inherit !important;
}

.m-space-btn-group {
  height: 34px;
}

.m-row {
  margin-bottom: 15px;
}

.fixed-btn-group {
  z-index: 3;
  background-color: #f7f7f7;
}
</style>

<style>
.btn-group-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}

.m-image {
  height: 50px;
  cursor: pointer;
}
</style>