client-base-v5/src/window1/tabGridView/CellTextItem.vue

<template>
  <div class="table-cell-text">
    <div
      v-if="!fieldUtil.isManyToManySetType(gridFieldItem)
        && !fieldUtil.isImageType(gridFieldItem)
        && !fieldUtil.isImageListType(gridFieldItem)
        && !fieldUtil.isVideoType(gridFieldItem)
        && !fieldUtil.isFileType(gridFieldItem)
        && !fieldUtil.isEnumMultiType(gridFieldItem)
        && !fieldUtil.isEnumListType(gridFieldItem)
        && !fieldUtil.isTextAreaType(gridFieldItem)
        && !fieldUtil.isRichTextAreaEditor(gridFieldItem)
        && !fieldUtil.isCustomerRender(gridFieldItem)
        && !fieldUtil.isButtonType(gridFieldItem)
        && !fieldUtil.isGridButtonEditor(gridFieldItem)"
    >
      {{ displayValue(modelData) }}
    </div>

    <p v-else-if="fieldUtil.isRichTextAreaEditor(gridFieldItem)">
      {{ displayValue(modelData) }}
    </p>

    <div v-else-if="fieldUtil.isTextAreaType(gridFieldItem)" class="table-cell-text-line">
      {{ displayValue(modelData) }}
    </div>

    <div v-else-if="fieldUtil.isEnumListType(gridFieldItem)">
      {{ getEnmuValue() === "编辑中" ? $t("lang.TabFormFieldView.editing") :
        getEnmuValue() === "审批中" ? $t("lang.TabFormFieldView.pendingApproval") :
        getEnmuValue() === "审批通过" ? $t("lang.TabFormFieldView.approved") :
        getEnmuValue() === "审批不通过" ? $t("lang.TabFormFieldView.rejected") :
        getEnmuValue() === "单据已撤回" ? $t("lang.TabFormFieldView.withdraw") :
        getEnmuValue() === "转移" ? $t("lang.TabFormFieldView.transfer") :
        getEnmuValue() === "报废" ? $t("lang.TabFormFieldView.disposal") :
        getEnmuValue() === "全盘" ? $t("lang.TabFormFieldView.overall") :
        getEnmuValue() === "抽盘" ? $t("lang.TabFormFieldView.randomInventory") : getEnmuValue()
      }}
    </div>

    <div v-else-if="fieldUtil.isEnumMultiType(gridFieldItem)">
      {{ getMultiEnmuValue() }}
    </div>

    <div v-else-if="fieldUtil.isManyToManySetType(gridFieldItem)">
      <span v-for="item, index in getManyToManyValues()" :key="index" class="selected-tag">
        {{ item }}
      </span>
    </div>

    <AuthImage v-else-if="fieldUtil.isImageType(gridFieldItem)" :auth-src="imageUrl" class="cell-image" />

    <span v-else-if="fieldUtil.isImageListType(gridFieldItem)">
      <AuthImage
        v-for="singleImageName in imageUrls" :key="singleImageName" :auth-src="singleImageName"
        class="cell-image-list"
      />
    </span>

    <VideoListCell
      v-else-if="fieldUtil.isVideoType(gridFieldItem)" :field="gridFieldItem" :field-value="fieldValue"
      :class-name="className" :readonly="true"
    />

    <ButtonCell
      v-else-if="fieldUtil.isButtonType(gridFieldItem)" :field="gridFieldItem" :field-value="fieldValue"
      :readonly="readOnly" @execute-callout="executeCallout"
    />

    <div v-else-if="fieldUtil.isFileType(gridFieldItem)" style="padding: 0px 10px">
      <FileListWidget :field="gridFieldItem" :field-value="fieldValue" :class-name="className" :readonly="true" />
    </div>

    <div v-else-if="fieldUtil.isGridButtonEditor(gridFieldItem)">
      <template v-for="(tabGridButtonItem, index) in gridFieldItem.tabGridButtonDtos" :key="tabGridButtonItem.name">
        <template v-if="visible[index]">
          <a-button
            v-if="tabGridButtonItem.action === 'CREATE' || tabGridButtonItem.action === 'SAVE' || tabGridButtonItem.action === 'RUN' || tabGridButtonItem.action === 'EXPORT' || tabGridButtonItem.action === 'NOTICE' || tabGridButtonItem.action === 'REFRESH'"
            type="link" @click="buttonClick"
          >
            {{ tabGridButtonItem.name }}
          </a-button>
          <a-button v-if="tabGridButtonItem.action === 'DELETE'" type="link" danger @click="deleteRecord">
            {{
              tabGridButtonItem.name }}
          </a-button>
          <a-button v-if="tabGridButtonItem.action === 'EDIT'" type="link" @click="editRecord">
            {{ tabGridButtonItem.name
            }}
          </a-button>
          <a-button v-if="tabGridButtonItem.action === 'SEE'" type="link" @click="readRecord">
            {{ tabGridButtonItem.name
            }}
          </a-button>
          <a-button
            v-if="tabGridButtonItem.action === 'RUN_PROCESS_REPORT'" type="link"
            @click="execute(tabGridButtonItem)"
          >
            {{ tabGridButtonItem.name }}
          </a-button>
          <a-button
            v-if="tabGridButtonItem.action === 'OPEN_CUSTOMER_WINDOW'" type="link"
            @click="execute(tabGridButtonItem)"
          >
            {{ tabGridButtonItem.name }}
          </a-button>
          <a-button
            v-if="tabGridButtonItem.action === 'OPEN_HTML_WINDOW'" type="link"
            @click="execute(tabGridButtonItem)"
          >
            {{ tabGridButtonItem.name }}
          </a-button>
          <a-button
            v-if="tabGridButtonItem.action === 'OPEN_REMOTE_COMPONENT_MODULE_IN_MODAL'" type="link"
            @click="openRemoteComponentModule(tabGridButtonItem)"
          >
            {{ tabGridButtonItem.name }}
          </a-button>
          <a-button
            v-if="tabGridButtonItem.action === 'OPEN_NEW_VIEW_EDIT'" type="link"
            @click="openNewViewEdit(tabGridButtonItem)"
          >
            {{ tabGridButtonItem.name }}
          </a-button>
        </template>
      </template>
    </div>

    <component
      :is="customerComponentName" v-else-if="fieldUtil.isCustomerRender(gridFieldItem)" :field="gridFieldItem"
      :field-value="fieldValue" :class-name="className"
      :model-data="modelData"
      @refresh-data="refreshDatas"
    />
  </div>

  

  <Modal v-model:show="modal" :full="true">
    <ProcessReportResultPreview
      v-if="
        processReportResult != null &&
          (processReportResult.reportResults != null ||
            processReportResult.processResult != null)
      " :process-report-result="processReportResult" :pdf-only="false" :excel-only="false"
    />
    <template #header>
      {{ $t("lang.tabButton.executeResult") }}
    </template>
  </Modal>
  <Modal v-model:show="titleModal" :show-canel-button="false" :show-ok-button="false">
    <template #header>
      {{ tabButtonModel.tipsTitle }}
    </template>
    {{ tabButtonModel.tipsContent }}
    <template #footer>
      <button type="button" class="btn btn-default" @click="titleModalClose">
        {{ $t("lang.tabButton.cancel") }}
      </button>
      <button type="primary" class="btn btn-default" @click="executeProcess">
        确认
      </button>
    </template>
  </Modal>
  <component :is="modal1Component" v-model:open="modal1Open" :class-name="className" :model-data="modelData" @refresh-data="refreshDatas" />
</template>

<script>
import {
  ref,
  defineAsyncComponent,
} from 'vue';
import { Notify, Uuid, CssUtil } from 'pc-component-v3';
import { Spin as ASpin, Empty as AEmpty } from 'ant-design-vue';
import FieldUtil from '../../resource/dictionary/FieldUtil.js';
import Common from '../../common/Common.js';

import VideoListCell from '../tabGridWidget/VideoListCell.vue';
import FileListWidget from '../tabFormWidget/FileListWidget.vue';
import ButtonCell from '../tabGridWidget/ButtonCell.vue';
import AuthImage from '../../widget/AuthImage.vue';
import CustomerWindowResource from '../../api/dic/CustomerWindowResource.js';
import HtmlWindowResource from '../../api/dic/HtmlWindowResource.js';
import ProcessReportResource from '../../api/dic/ProcessReportResource.js';
import JsUtil from '../../common/JsUtil.js';
import Context from '../common/Context.js';


export default {

  components: {
    VideoListCell, FileListWidget, ButtonCell, AuthImage,
  },


  props: {
    gridFieldItem: {
      type: Object,
      default: function () {
        return null;
      },
    },
    modelData: {
      type: Object,
      default: function () {
        return {};
      },
    },
    className: {
      type: String,
      default: null,
    },
    simpleFilterParams: {
      type: String,
      default: null,
    },
    complexFilterParams: {
      type: Array,
      default: () => {
        return [];
      },
    },
    modelDatas: {
      type: Array,
      default: () => {
        return [];
      },
    },
    jsUrl: {
      type: String,
      default: null,
    },
    index:{
      type: Number,
      default: null,
    },
  },
  emits: ['executeCallout', 'deleteRecord', 'refreshDatas', 'editRecord', 'readRecord'],


  data: function () {
    this.Common = Common;
    return {
      fieldUtil: FieldUtil,
      customerComponentName: null,
      modal1Open: false,
      modal1Component: null,
      processReportResult: {},
      modal: false,
      titleModal: false,
      tabButtonModel: {},
      tabGridButtonDtos: [],
      visible: [],
    };
  },

  computed: {
    imageUrl: function () {
      var _self = this;
      var value = this.displayValue(this.modelData);
      if (value != undefined) {
        var tempImageUrl = _self.getImageUrl(value);
        return tempImageUrl;
      }
      return '';
    },

    imageUrls: function () {
      var _self = this;
      var value = this.displayValue(this.modelData);
      var images = [];
      if (value != undefined && value.length > 0) {
        var values = value.split(',');
        values.forEach(function (tempValue) {
          var tempImageUrl = _self.getImageUrl(tempValue);
          images.push(tempImageUrl);
        });
      }
      return images;
    },

    fieldValue: function () {
      var _self = this;
      var modelData = _self.modelData;

      var fieldValue = {};

      if (modelData.data[_self.gridFieldItem.fieldName] != undefined) {
        fieldValue = modelData.data[_self.gridFieldItem.fieldName];
      } else {
        fieldValue = {
          displayValue: [],
          fieldType: 'String',
        };
      }
      return fieldValue;
    },

    /**
         * 字段是否只读
         */
    readOnly: function () {
      if (this.gridFieldItem == undefined) {
        return true;
      }

      if (this.gridFieldItem != undefined && this.gridFieldItem.readOnly == true) {
        return true;
      }

      if (this.gridFieldItem != undefined && this.gridFieldItem.entityFieldIndex > 0) {
        return true;
      }

      if (this.modelData != undefined && this.modelData.id > 0 && (this.gridFieldItem.updatable == undefined || this.gridFieldItem.updatable == false)) {
        return true;
      }

      return this.gridFieldItem.readOnly;
    },
  },
  watch: {
    modelData: {
      deep: true,
      immediate: true,
      handler(curVal, oldVal) {
        this.cellTextItemTabGridButtonShowLogical();
      },
    },

    gridFieldItem: {
      immediate: true,
      handler(curVal, oldVal) {
        this.renderRemoteComponentModule();
      },
    },

    'gridFieldItem.tabGridButtonDtos': {

      immediate: true,
      handler(curVal, oldVal) {
        const _self = this;
        this.visible.splice(0, this.visible.length);
        if (curVal != null) {
          curVal.forEach(item => {
            _self.visible.push(true);
          });
        }
      },
    },
  },
  mounted: function () {
    // this.cellTextItemTabGridButtonShowLogical();
  },
  methods: {
    /**
         * 获取Context
         */
    getContext: Context,

    /**
     * 操作列设置显示逻辑
     */
    cellTextItemTabGridButtonShowLogical: function () {
      var _self = this;
      if (_self.gridFieldItem.tabGridButtonDtos != null &&
        _self.gridFieldItem.tabGridButtonDtos != undefined && _self.gridFieldItem.tabGridButtonDtos.length > 0
      ) {
        for (let index = 0; index < _self.gridFieldItem.tabGridButtonDtos.length; index++) {
          const tabGridButtonItem = _self.gridFieldItem.tabGridButtonDtos[index];
          let oldTabGridButtonString = JSON.stringify(tabGridButtonItem);
          const showLogical = tabGridButtonItem.showLogical;
          if (showLogical != null && showLogical.length > 0) {
            let functionName = tabGridButtonItem.showLogical.replace('.', '_') + '_showLogical';

            let executeFunction = function () {
              let ctx = new _self.getContext(_self.modelData);
              try {
                _self.visible[index] = _self[functionName](ctx);
                console.log(tabGridButtonItem.name, index, _self.visible[index]);
              } catch (e) {
                console.error('js代码 %s 执行异常 %o', showLogical, e);
                _self.visible[index] = true;
              }
            };

            if (_self[functionName] == null) {
              // 执行服务端的脚本
              const jsUrl = _self.jsUrl;
              if (jsUrl == null || jsUrl == undefined) {
                Notify.error('数据字典定义异常', '【' + tabGridButtonItem.name + '】列显示逻辑的JS文件不存在,请联系管理员检查数据字典是否JS文件。', false);
                return;
              }
              let promise = JsUtil.dynamicLoadJsFunction(jsUrl, showLogical);
              promise.then(dynamicFunction => {
                let targetFunction = dynamicFunction;

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

                _self[functionName] = targetFunction;

                executeFunction();
              }, errorData => {
                console.error(errorData);
              });
            } else {
              executeFunction();
            }
          } else {
            _self.visible[index] = true;
          }

          let newTabGridButtonString = JSON.stringify(tabGridButtonItem);

          // bug fixed by jack 2022-01-17
          // 只有当数据发生改变以后，才重新设置数据，解决当子表数据量很打的时候，输入卡顿的问题。
          if (oldTabGridButtonString != newTabGridButtonString) {
            _self.gridFieldItem.tabGridButtonDtos[index] = tabGridButtonItem;
          }
        }
      }
    },

    /**
         * 执行Callout
         */
    executeCallout: function (field) {
      this.$emit('executeCallout', field);
    },

    displayValue: function (modelData) {
      if (modelData == undefined) {
        return '';
      } else if (modelData.data == undefined) {
        return '';
      } else if (modelData.data[this.gridFieldItem.fieldName] == undefined) {
        return '';
      } else if (modelData.data[this.gridFieldItem.fieldName].displayValue == undefined) {
        return '';
      } else {
        var value = modelData.data[this.gridFieldItem.fieldName].displayValue[this.gridFieldItem.entityFieldIndex];
        if (FieldUtil.isCheckBoxType(this.gridFieldItem)) {
          if (value == 'true' || value == true) {
            return this.$t('lang.TabFormFieldView.yes');
          } else if (value == 'false' || value == false) {
            return this.$t('lang.TabFormFieldView.no');
          }
        } else if (FieldUtil.isRedGreenEditorType(this.gridFieldItem)) {
          if (value == 'true' || value == true) {
            return '红单';
          } else if (value == 'false' || value == false) {
            return '蓝单';
          }
        }
        return value;
      }
    },

    // 获取
    getImageUrl: function (name) {
      return Common.getThumbnailImageSrc(this.className, name);
    },

    /**
         * 获取枚举单选框的值
         */
    getEnmuValue: function () {
      var _self = this;
      var result;
      if (_self.fieldValue != undefined && _self.fieldValue.displayValue != undefined) {
        var value0 = _self.fieldValue.displayValue[0];
        if (_self.gridFieldItem != null && _self.gridFieldItem.keyValues != null) {
          _self.gridFieldItem.keyValues.forEach(function (item1) {
            if (value0 == item1.keyStr) {
              result = item1.value;
            }
          });
        }
      }
      return result;
    },


    /**
         * 获取枚举多选框的值
         */
    getMultiEnmuValue: function () {
      var _self = this;
      var fieldValue = (_self.modelData.data == undefined) ? [] : _self.modelData.data[_self.gridFieldItem.fieldName];
      var result = [];
      if (fieldValue != undefined && _self.fieldValue.displayValue != undefined) {
        var arr = fieldValue.displayValue[0].split(',');
        arr.forEach(function (item) {
          _self.gridFieldItem.keyValues.forEach(function (item1) {
            if (item == item1.keyStr) {
              result.push(item1.value + ' ');
            }
          });
        });
      }
      return result.join(',');
    },

    // 获取枚举多选框的值
    getManyToManyValues: function () {
      var modelData = this.modelData;
      if (modelData == undefined) {
        return [];
      } else if (modelData.data == undefined) {
        return [];
      } else if (modelData.data[this.gridFieldItem.fieldName] == undefined) {
        return [];
      } else if (modelData.data[this.gridFieldItem.fieldName].displayValue == undefined) {
        return [];
      } else {
        return modelData.data[this.gridFieldItem.fieldName].displayValue;
      }
    },


    buttonClick: function () {
      Notify.error('提示', '暂不支持该组件', false);
    },
    deleteRecord: function () {
      this.$emit('deleteRecord');
    },
    refreshDatas: function () {
      this.$emit('refreshDatas');
    },
    // 改变表格行元素的编辑状态
    editRecord: function () {
      this.$emit('editRecord', this.modelData, this.index);
    },
    readRecord: function () {
      this.$emit('readRecord', true, this.modelData, this.index);
    },


    
    /**
     * 远程加载ES VUE组件模块，并在模态框中打开。
     * @param jsUrl js路径
     * @param cssUrl css路径
     */
    openRemoteComponentModule: function (tabButton) {
      var _self = this;
      let jsUrl = tabButton.remoteComponentModuleJsUrl;
      let cssUrl = tabButton.remoteComponentModuleCssUrl;

      // 显示模态框
      // 异步的加载js组件
      //let jsUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.js';
      //let cssUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.css';

      if (cssUrl != null && cssUrl.length > 0) {
        let cssUrlHash = _self.getHash(cssUrl);
        CssUtil.dynamicLoadCss(cssUrl, cssUrlHash);
      }
      // webpackIgnore：设置为 true 时，禁用动态导入解析。
      // const testAsyncRemoteComponent  = await import(/* webpackIgnore: true */ jsUrl);

      // console.log(testAsyncRemoteComponent);
      if (jsUrl != null && jsUrl.length > 0) {
        const testAsyncRemoteComponent = defineAsyncComponent({
          // 加载函数
          loader: () => {
            return import(/* webpackIgnore: true */ jsUrl);
          },
          // 加载异步组件时使用的组件
          loadingComponent: ASpin,
          // 展示加载组件前的延迟时间，默认为 200ms
          delay: 200,
          // 加载失败后展示的组件
          errorComponent: AEmpty,
          // 如果提供了一个 timeout 时间限制，并超时了
          // 也会显示这里配置的报错组件，默认值是：Infinity
          timeout: 10000,
        });

        _self.modal1Component = testAsyncRemoteComponent;
        _self.modal1Open = true;
        console.log(_self.modal1Component);
      }
    },

    /**
     * 打开新界面编辑
     * @param tabButton 
     */
    openNewViewEdit:function(tabButton){
      //打开新界面编辑Url
      var openNewViewEditUrl = tabButton.openNewViewEditUrl;
      //传递modelData,调接口
      //待开发
    },

    /**
     * 获取字符串的哈希值
     * @param input
     */
    getHash: function (input) {
      let hash = 0;
      if (input.length === 0) {
        return hash;
      }
      for (let i = 0; i < input.length; i++) {
        const char = input.charCodeAt(i);
        hash = (hash << 5) - hash + char;
        hash = hash & hash; // 确保返回值是一个32位有符号整数
      }
      return Math.abs(hash).toString();
    },    
    
    /**
     * 远程加载ES VUE组件模块。
     * @param jsUrl js路径
     * @param cssUrl css路径
     */
    renderRemoteComponentModule: async function () {
      const _self = this;

      
      if(this.gridFieldItem == null || !FieldUtil.isCustomerRender(this.gridFieldItem)){
        return;
      }

      let jsUrl = this.gridFieldItem.remoteComponentModuleJsUrl;
      let cssUrl = this.gridFieldItem.remoteComponentModuleCssUrl;

      // 显示模态框
      // 异步的加载js组件
      //let jsUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.js';
      //let cssUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.css';

      if (cssUrl != null && cssUrl.length > 0) {
        let cssUrlHash = _self.getHash(cssUrl);
        CssUtil.dynamicLoadCss(cssUrl, cssUrlHash);
      }
      // webpackIgnore：设置为 true 时，禁用动态导入解析。
      // const testAsyncRemoteComponent  = await import(/* webpackIgnore: true */ jsUrl);

      // console.log(testAsyncRemoteComponent);
      if (jsUrl != null && jsUrl.length > 0) {
        const asyncRemoteComponent = defineAsyncComponent({
          // 加载函数
          loader: () => {
            return import(/* webpackIgnore: true */ jsUrl);
          },
          // 加载异步组件时使用的组件
          loadingComponent: ASpin,
          // 展示加载组件前的延迟时间，默认为 200ms
          delay: 200,
          // 加载失败后展示的组件
          errorComponent: AEmpty,
          // 如果提供了一个 timeout 时间限制，并超时了
          // 也会显示这里配置的报错组件，默认值是：Infinity
          timeout: 10000,
        });

        _self.customerComponentName = asyncRemoteComponent;
        console.log(_self.customerComponentName);
      }
    },
  
    //跳转或执行流程
    execute: function (tabButton) {
      var _self = this;
      _self.tabButtonModel = tabButton;
      if (tabButton.customerWindowNo != undefined && tabButton.customerWindowNo != '') {
        CustomerWindowResource.uniqueByNo(tabButton.customerWindowNo).then(
          successData => {
            if (successData.errorCode == 0) {
              tabButton.customerWindowRouteUrl = successData.data.routeUrl;
              if (tabButton.customerWindowNo == '20221101_151823') {
                localStorage.setItem('AssetInstance_ComplexFilterParams', JSON.stringify(_self.complexFilterParams));
                localStorage.setItem('AssetInstance_SimpleFilterParams', _self.simpleFilterParams);
              }
              //跳转到tabButton.routeUrl
              _self.switchFormRoute(tabButton);
            }else{
              Notify.error(_self.$t('lang.Notify.error'), successData.errorMessage, true);
            }
            
          },
          errorData => {
            Common.processException(errorData);
          },
        );
      } else if (
        tabButton.processReportNo != undefined &&
      tabButton.processReportNo != ''
      ) {
      // 判断流程报表是否有参数
      // 如果有参数则直接跳转到流程和报表的界面。
        if (tabButton.routerRedirect == undefined || tabButton.routerRedirect == false) {
          if (tabButton.tipsTitle == undefined || tabButton.tipsTitle.length == 0) {
            _self.executeProcess();
          } else {
            _self.titleModal = true;
          }
        } else {
          this.$router.push({
            path: '/desktop/process-report/' + tabButton.processReportNo,
          });
        }
      } else if (tabButton.htmlWindowNo != undefined) {
        HtmlWindowResource.uniqueByNo(tabButton.htmlWindowNo).then(
          response => {
            if (response.errorCode != 0) {
              Notify.error(_self.$t('lang.Notify.dataDictionaryError'), response.errorMessage, true);
              return;
            }

            const htmlWindowDto = response.data;
            if (htmlWindowDto != undefined) {
              var htmlWindowUrl = htmlWindowDto.htmlFileName;
              var autoCloseInterval = htmlWindowDto.autoCloseInterval;
              var regExp = new RegExp('[{].*?[}]', 'g');
              var result = htmlWindowUrl.match(regExp);
              if (htmlWindowUrl != undefined && htmlWindowUrl != '') {
                for (var index = 0, len = result.length; index < len; index++) {
                  var tempResult = result[index];
                  console.log('{' + tempResult + '}匹配');
                  if (tempResult == '{URL}') {
                    htmlWindowUrl = htmlWindowUrl.replace(
                      '{URL}',
                      Common.getHostPageBaseURL(),
                    );
                  } else if (tempResult == '{RecordIds}') {
                    var recordId = _self.modelData.id;
                    htmlWindowUrl = htmlWindowUrl.replace('{RecordIds}', recordId);
                  } else if (tempResult == '{Token}') {
                    htmlWindowUrl = htmlWindowUrl.replace('{Token}', Common.getToken());
                  } else {
                    if (_self.selectedModelDatas.length == 0) {
                      Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.tabButton.describe3'), true);
                      return;
                    } else if (_self.selectedModelDatas.length > 1) {
                      Notify.error(_self.$t('lang.Notify.error'), _self.$t('lang.tabButton.describe2'), true);
                      return;
                    }
                    var tempResult1 = tempResult.replace('{', '').replace('}', '');
                    htmlWindowUrl = htmlWindowUrl.replace(
                      tempResult,
                      _self.getFirstSelectModelDataFieldValue(tempResult1),
                    );
                  }
                }

                var openWindow = window.open(htmlWindowUrl);

                // 自动关闭
                if (autoCloseInterval != undefined) {
                  setTimeout(function () {
                    openWindow.close();
                    openWindow = undefined;
                  }, autoCloseInterval * 1000);
                }
              }
            }
          },
          errorData => {
            Common.processException(errorData);
          },
        );
      }
    },
    // 切换到Form表单的路由
    switchFormRoute: function (tabButton) {
      const _self = this;
      var routeDate = {
        path: tabButton.customerWindowRouteUrl,
        params: {
          modelData: this.modelData,
        },
      };
      // 请勿修改，会影响生单的功能
      var uuid = _self.uuid;
      if (uuid != undefined) {
        routeDate.path = routeDate.path + '/' + uuid;
      }

      const frameUrl = Common.getRedirectUrl(
        '#' + routeDate.path,
      );

      // 供子页面iframe调用，修改modelData，(举例：生单界面修改参数)。
      // window.modelDataChanged = this.modelDataChanged;

      // window.getModelData = this.getModelData;
      let modelData = JSON.stringify(this.modelData);
      console.log(modelData);
      localStorage.setItem(_self.uuid + '#GenerateDocumentTool', modelData);

      var iWidth = 1280;//弹出窗口的宽度;
      var iHeight = 720; //弹出窗口的高度;
      var iTop = (window.screen.availHeight - 30 - iHeight) / 2;//获得窗口的垂直位置;
      var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //获得窗口的水平位置;
      window.open(frameUrl, '_blank', 'height=' + iHeight + ',innerHeight=' + iHeight + ',width=' + iWidth + ',innerWidth=' + iWidth + ',top=' + iTop + ',left=' + iLeft + ',toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no');
    // window.open(frameUrl);
    },
    // 执行流程
    executeProcess: function () {
      var _self = this;
      var ids = [_self.modelData.id];
      ProcessReportResource.runProcessByIds(_self.tabButtonModel.processReportNo, ids).then(
        successData => {
          _self.modal = true;
          _self.processReportResult = successData;

          if (
            _self.processReportResult.reportResults != undefined &&
          _self.processReportResult.reportResults.length > 0
          ) {
            _self.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.titleModal = false;
          _self.refreshDatas();
        },
        errorData => {
          _self.titleModal = false;
          Common.processException(errorData);
        },
      );
    // }
    },
    //关闭表头按钮提示框
    titleModalClose: function () {
      var _self = this;
      _self.titleModal = false;
    },
  },
};


</script>
<style scoped>
.table-cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.table-cell-text-line {
  word-break: break-all;
  white-space: pre-line;
  max-height: 4em;
}

.required-mark {
  color: red;
}

.cell-image {
  width: 80px;
  height: 80px;
}

.cell-image-list {
  width: 40px;
  height: 40px;
  margin-right: 5px;
}

.selected-tag {
  color: #333;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 26px;
  margin: 4px 4px 0px 0px;
  padding: 6px 0.25em;
}
</style>