pc-component-v5/packages/info/src/QueryPage.vue

<template>
  <div
    class="flex-container" :class="{
      'flex-container-modal': isSearchWidget == true,
      'flex-container': isSearchWidget == null || isSearchWidget == false,
    }"
  >
    <div class="flex-header">
      <div>
        <div>
          <InfoHeader
            :html-help-url="infoWindowDto.htmlHelpUrl"
            :info-grid-fields="infoGridFieldsInstance.infoGridFields"
            :header-name="Language.getNameTrl($i18n.locale, infoWindowDto)"
            :sub-header-name="Language.getHelpTrl($i18n.locale, infoWindowDto)" :info-filter-fields="infoFilterFields"
            :info-window-no="infoWindowDto.no" :show-back="isSearchWidget == null || isSearchWidget == false"
            @filter-field-property-changed="filterFieldPropertyChanged($event)"
            @grid-field-property-changed="gridFieldPropertyChanged($event)"
          />
        </div>
        <div>
          <a-flex justify="space-between" align="center">
            <QueryCondition
              ref="queryCondition" :info-filter-fields="infoFilterFields"
              :info-buttons="infoWindowDto.infoButtons" :is-search-widget="isSearchWidget"
              :info-window-no="infoWindowDto.no" :search-condition-instance="searchConditionInstance"
              @simple-search="simpleSearch" @complex-search="complexSearch"
            />

            <div>
              <a-pagination
                v-model:current="pagination.current_page" v-model:pageSize="pagination.per_page"
                show-quick-jumper size="small" :total="pagination.total" :page-size-options="pageSizeOptions"
                @change="handlePageChange" @show-size-change="handleShowSizeChange"
              />
            </div>
          </a-flex>
        </div>
      </div>

      <div v-if="!isSearchWidget" style="display: inline-block">
        <QueryPageButton
          :info-buttons="infoWindowDto.infoButtons" :info-window-no="infoWindowDto.no" :select-info-data="selectInfoData" :class-name="className"
          @refresh-datas="pageSearch" @execute-export="executeExport" @execute-process="executeProcess"
        />
      </div>

      <a-segmented v-model:value="selectedView" :options="views" class="m-segmented" size="small">
        <template #label="{ value: val, payload = {} }">
          <div style="padding: 2px 2px">
            <a-tooltip :title="payload.name" placement="top">
              <a-avatar
                :src="payload.src" :style="payload.icon ? payload.style : null" :alt="val" size="small"
                shape="square"
              >
                <template #icon>
                  <component :is="payload.icon" style="font-size: 22px; color: #1677ff; background: #f5f5f5" />
                </template>
                {{ payload.content }}
              </a-avatar>
            </a-tooltip>
          </div>
        </template>
      </a-segmented>
    </div>
    <!-- xx -->

    <div
      style="
        padding: 0;
        border-bottom: solid 1px #d1cfcf;
        margin-top: 5px;
        margin-bottom: 5px;
      "
    />
    <div class="flex-content">
      <component
        :is="selectedView" v-if="
          selectedView != null &&
            selectedView != '' &&
            componentLoadedCount == views.length
        " :info-grid-fields-instance="infoGridFieldsInstance" :sort-instance="sortInstance"
        :info-window-data-instance="infoWindowDataInstance" :pagination="pagination" :multiple="multiple"
        :call-out-js-url="infoWindowDto.callOutJsUrl" @data-selected="$emit('dataSelected', $event)"
        @info-selected="infoSelected" @delete-selected="$emit('deleteSelected', $event)"
      />
    </div>
    <div class="flex-footer" style="margin-top: 10px">
      <div class="pull-left">
        <!-- <span>{{ $t("lang.QueryPage.the") }}
          {{ (pagination.current_page - 1) * pagination.per_page + 1 }}
          -
          {{ pagination.current_page * pagination.per_page }}
          {{ $t("lang.QueryPage.strip") }}
          ,
          {{ $t("lang.QueryPage.total") }}
          {{ pagination.total }}
          {{ $t("lang.QueryPage.strip") }}
          ,
          {{ $t("lang.QueryPage.displayOnEachPage") }}
        </span>
        <PageSizeSelect :size="pagination.per_page" @page-size-changed="gridSizeSelect" />
        <span>{{ $t("lang.QueryPage.strip") }}</span> -->
      </div>
      <div class="pull-right">
        <!-- <Pagination :pagination="pagination" :callback="pageSearch" /> -->
      </div>
    </div>
    <Loading v-if="loading" />
    <a-modal v-model:open="modal" :title="$t('lang.QueryPage.resultsOfEnforcement')" @ok="modal = false">
      <ProcessReportResult :process-report-result="processReportResult" :pdf-only="pdfOnly" :excel-only="excelOnly" />
    </a-modal>
  </div>
  <!-- <component :is="modal1Component" v-model:open="modal1Open" :model-data="selectInfoData" @refresh-data="pageSearch" /> -->
</template>

<script>
import Common from '../../common/Common.js';
import { defineAsyncComponent, reactive, createVNode } from 'vue';
import PageSizeSelect from '../../page-size-select/src/PageSizeSelect.vue';
// import Pagination from '../../vue-bootstrap-pagination/src/vue-bootstrap-pagination.vue';

import QueryCondition from './QueryCondition.vue';
import InfoHeader from './InfoHeader.vue';
import InfoUtil from './InfoUtil.js';
import Notify from '../../common/Notify.js';

import Loading from '../../loading/src/Loading.vue';
import ProcessReportResult from '../../process/src/ProcessReportResult.vue';
import Uuid from '../../common/Uuid.js';

import DownloadService from '../../common/DownloadService.js';
import HtmlWindowResource from '../../html-window/src/api/HtmlWindowResource.js';
import CustomerWindowResource from '../../customer-window/src/api/CustomerWindowResource.js';
import ProcessReportResource from '../../process/src/api/ProcessReportResource.js';

import UserStorageResource from '../../common/UserStorageResource.js';

import Language from '../../common/Language.js';

import dayjs from 'dayjs';

import QueryPageTable from './QueryPageTable.vue';
import QueryPageDashboard from './QueryPageDashboard.vue';
import { Modal } from 'ant-design-vue';
import QueryPageButton from './QueryPageButton.vue';

import {
  useSort,
  useInfoGridFields,
  useInfoWindowData,
  useSearchCondition,
} from './InfoWindowState.js';
import {
  SyncOutlined,
  DownloadOutlined,
  TableOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons-vue';

import CssUtil from '../../common/CssUtil.js';
import { Spin as ASpin, Empty as AEmpty, message } from 'ant-design-vue';

export default {
  name: 'QueryPage',

  components: {
    // Pagination,
    QueryCondition,
    Modal,
    InfoHeader,
    Loading,
    ProcessReportResult,
    PageSizeSelect,
    QueryPageTable,
    QueryPageDashboard,
    SyncOutlined,
    DownloadOutlined,
    QueryPageButton,
    ExclamationCircleOutlined,
  },

  props: {
    whereClauseSource: {
      type: Object,
      default() {
        return null;
      },
    },
    isSearchWidget: {
      type: Boolean,
      default: false,
    },
    parentModelData: {
      type: Object,
      default() {
        return null;
      },
    },
    modelData: {
      type: Object,
      default() {
        return null;
      },
    },
    fieldValue: {
      type: Object,
      default() {
        return null;
      },
    },
    /**
     * 查询窗口编号
     */
    windowNo: {
      type: String,
      default: null,
    },
    // icon前缀地址
    iconSrc: {
      type: String,
      default: '',
    },

    /**
     * 是否多选
     */
    multiple: {
      type: Boolean,
      default: false,
    },
  },

  emits: ['dataSelected', 'deleteSelected'],

  data: function () {
    this.Language = Language;
    return {
      infoWindowDto: {},
      queryResult: {},
      pagination: {
        total: 0,
        per_page: Common.pageSize, // required
        current_page: 1, // required
        last_page: 10, // required
      },
      infoQueryParam: [],
      processReportResult: [],
      uuid: Uuid.createUUID(),
      currentIsSimpleSearch: true,
      startX: '',
      startWidth: '',
      processReportDto: '',
      pdfOnly: '',
      excelOnly: '',
      infoFilterFields: [],
      loading: false,
      modal: false,
      searchType: 'simple',
      sortInstance: useSort(),
      infoButtons: [],
      modal1Component: null,
      modal1Open: false,
      selectInfoData: null,
      searchConditionInstance: useSearchCondition(),
      infoGridFieldsInstance: useInfoGridFields(),
      infoWindowDataInstance: useInfoWindowData(),
      views: [
        {
          value: 'QueryPageTable',
          payload: {
            name: '表格视图',
            icon: TableOutlined,
            style: {
              backgroundColor: '#ffffff',
            },
          },
        },
      ],

      selectedView: 'QueryPageTable', // 选中的视图
      componentLoadedCount: 1,
      pageSizeOptions: ['20', '50', '100', '200', '1000'],
    };
  },

  watch: {
    'sortInstance.sortSetting': {
      handler(newValue, oldValue) {
        this.infoQueryParam.sortClause = this.sortInstance.getSortString();
        if (this.currentIsSimpleSearch) {
          this.queryInfoWindowDataSimple();
        } else {
          this.queryInfoWindowDataComplex();
        }
      },
      deep: true,
    },

    selectedView: function (newValue, oldValue) {
      console.log(newValue);
      console.log(oldValue);
    },
  },

  created: function () {
    const infoPageSize = localStorage.getItem(
      `InfoWindowPageSize${this.windowNo}`,
    );
    if (infoPageSize) {
      this.pagination.per_page = infoPageSize;
    }
  },

  mounted: function () { },

  methods: {
    /**
     * 页面显示数量改变
     * @param newPageSize
     */
    gridSizeSelect: function (newPageSize) {
      this.pagination.current_page = 1;
      this.pagination.per_page = newPageSize;
      localStorage.setItem(`InfoWindowPageSize${this.windowNo}`, newPageSize);
    },

    // 初始化数据
    initWidget: function (data) {
      var _self = this;
      if (data == undefined) {
        return;
      }

      _self.infoWindowDto = data;
      _self.infoFilterFields = data.infoFilterFields;

      _self.infoGridFieldsInstance.init(
        _self.infoWindowDto.no,
        data.infoGridFields,
      );

      _self.infoFilterFields.forEach(function (item) {
        item.value = {
          infoFilterFieldId: item.id,
          value1: '',
          value2: '',
        };
      });
      InfoUtil.restoreInfoFilterFields(
        _self.infoWindowDto.no,
        _self.infoFilterFields,
      );

      _self.simpleSearch();

      _self.dynamicInitViews();
    },

    /**
     * 高级查询
     * @param value
     */
    complexSearch: function (value) {
      var _self = this;
      _self.searchType = value;
      _self.pagination.current_page = 1;
      var infoQueryParam = {
        infoWindowNo: _self.infoWindowDto.no,
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
        sortClause: '',
        infoFilterFieldValues: _self.$refs.queryCondition.getQueryCondition(),
        whereClauseSource: _self.whereClauseSource,
        parentModelData: _self.parentModelData,
        modelData: _self.modelData,
        isSearchWidget: _self.isSearchWidget,
      };
      _self.infoQueryParam = infoQueryParam;
      _self.currentIsSimpleSearch = false;
      _self.queryInfoWindowDataComplex();
    },

    /**
     * 分页查询
     */
    pageSearch: function () {
      var _self = this;
      _self.infoQueryParam.start =
        (_self.pagination.current_page - 1) * _self.pagination.per_page;
      _self.infoQueryParam.length = _self.pagination.per_page;
      _self.infoQueryParam.infoFilterFieldValues =
        _self.$refs.queryCondition.getQueryCondition();
      if (_self.searchType === 'complex') {
        _self.queryInfoWindowDataComplex();
      } else {
        _self.queryInfoWindowDataSimple();
      }
    },

    /**
     * 简单查询
     * @return {void}
     */
    simpleSearch: function (value) {
      var _self = this;
      _self.searchType = value;
      _self.pagination.current_page = 1;
      var infoQueryParam = {
        infoWindowNo: _self.infoWindowDto.no,
        start: (_self.pagination.current_page - 1) * _self.pagination.per_page,
        length: _self.pagination.per_page,
        sortClause: '',
        infoFilterFieldValues: _self.$refs.queryCondition.getQueryCondition(),
        whereClauseSource: _self.whereClauseSource,
        parentModelData: _self.parentModelData,
        modelData: _self.modelData,
        isSearchWidget: _self.isSearchWidget,
      };
      _self.infoQueryParam = infoQueryParam;
      _self.currentIsSimpleSearch = true;
      _self.queryInfoWindowDataSimple();
    },

    /**
     * 调用后端高级查询的接口
     */
    queryInfoWindowDataComplex: function () {
      var _self = this;
      _self.loading = true;
      $.ajax({
        url: Common.getApiURL('InfoWindowResource/queryInfoWindowDataComplex'),
        type: 'post',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        contentType: 'application/json',
        data: JSON.stringify(_self.infoQueryParam),
        success: function (data) {
          _self.loading = false;
          _self.setSelectedFlag(data);
          _self.infoWindowDataInstance.init(data.dataList);

          _self.pagination.total = data.totalSize;
          _self.pagination.last_page = Math.ceil(
            data.totalSize / data.range.length,
          );
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 设置数据是否被已经被选中。
     */
    setSelectedFlag: function (data) {
      let _self = this;
      let selectedIds = null;
      let selectedId = null;

      if (_self.fieldValue != null) {
        selectedIds = _self.fieldValue.ids;
        selectedId = _self.fieldValue.id;
      }

      data.dataList.forEach(function (item) {
        if (selectedIds != null && selectedIds.indexOf(item.id) >= 0) {
          item.select = true;
        } else if (selectedId != null && selectedId == item.id) {
          item.select = true;
        } else {
          item.select = false;
        }
      });
    },

    /**
     * 调用后端简单查询接口
     */
    queryInfoWindowDataSimple: function () {
      var _self = this;
      _self.loading = true;
      _self.infoQueryParam.whereClauseSource = _self.whereClauseSource;
      $.ajax({
        url: Common.getApiURL('InfoWindowResource/queryInfoWindowDataSimple'),
        type: 'post',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        contentType: 'application/json',
        data: JSON.stringify(_self.infoQueryParam),
        success: function (data) {
          _self.loading = false;
          _self.setSelectedFlag(data);

          _self.infoWindowDataInstance.init(data.dataList);

          _self.pagination.total = data.totalSize;
          _self.pagination.last_page = Math.ceil(
            data.totalSize / data.range.length,
          );
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 获取选择的数据
     */
    getSelectedModelDatas: function () {
      return this.infoWindowDataInstance.getSelected();
    },

    /**
     * 条件字段属性发生改变
     */
    filterFieldPropertyChanged: function (infoFilterFieldsClone) {
      let _self = this;
      InfoUtil.saveInfoFilterFields(
        _self.infoWindowDto.no,
        infoFilterFieldsClone,
      ).then(
        successData => {
          InfoUtil.restoreInfoFilterFields(
            _self.infoWindowDto.no,
            _self.infoFilterFields,
          );
        },
        errorData => {
          console.log(errorData);
        },
      );
    },

    /**
     * 表格字段属性发生改变
     */
    gridFieldPropertyChanged: function (infoGridFieldsClone) {
      let _self = this;

      _self.infoGridFieldsInstance.saveInfoGridFields(
        _self.infoWindowDto.no,
        infoGridFieldsClone,
      );
    },

    /**
     * 执行流程
     * @param  {Object} infoButton
     * @return {void}
     */
    executeProcess: function (infoButton) {
      var _self = this;

      if (infoButton == null) {
        return;
      }

      let tempSelectedModelDatas = _self.getSelectedModelDatas();
      if (
        infoButton.htmlWindowNo != null &&
        infoButton.htmlWindowNo.length > 0
      ) {
        HtmlWindowResource.uniqueByNo(infoButton.htmlWindowNo).then(
          htmlWindowDto => {
            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.getRedirectUrl(''),
                    );
                    console.log('{' + htmlWindowUrl + '}地址');
                  } else if (tempResult == '{RecordId}') {
                    if (tempSelectedModelDatas.length == 0) {
                      Notify.error('错误', '未选择可操作的数据', true);
                      return;
                    }
                    htmlWindowUrl = htmlWindowUrl.replace(
                      '{RecordId}',
                      _self.getFirstSelectRecordId(),
                    );
                  } else if (tempResult == '{RecordIds}') {
                    if (tempSelectedModelDatas.length == 0) {
                      Notify.error('错误', '未选择可操作的数据', true);
                      return;
                    }
                    htmlWindowUrl = htmlWindowUrl.replace(
                      '{RecordIds}',
                      _self.getSelectedRecordIds(),
                    );
                  } else if (tempResult == '{Token}') {
                    htmlWindowUrl = htmlWindowUrl.replace(
                      '{Token}',
                      Common.getToken(),
                    );
                  } else if (tempResult == '{infoWindowNo}') {
                    htmlWindowUrl = htmlWindowUrl.replace(
                      '{infoWindowNo}',
                      _self.infoWindowDto.no,
                    );
                  } else {
                    if (tempSelectedModelDatas.length == 0) {
                      Notify.error('错误', '未选择可操作的数据', true);
                      return;
                    } else if (tempSelectedModelDatas.length > 1) {
                      Notify.error('错误', '请选择一条数据', 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);
          },
        );
      } else if (
        infoButton.customerWindowNo != null &&
        infoButton.customerWindowNo.length > 0
      ) {
        CustomerWindowResource.uniqueByNo(infoButton.customerWindowNo).then(
          customerWindowDto => {
            var customerWindowRouteUrl = customerWindowDto.routeUrl;
            if (
              customerWindowRouteUrl != undefined &&
              customerWindowRouteUrl != ''
            ) {
              if (customerWindowRouteUrl == 'exportInfoData') {
                var downloadUrl =
                  Common.getApiURL('exportResource/exportInfoDataComplex') +
                  '?infoWindowNo=' +
                  _self.infoWindowDto.no +
                  '&recordIds=' +
                  _self.getSelectedRecordIds().join(',') +
                  '&token=' +
                  Common.getToken();
                window.open(downloadUrl);
              } else {
                if (tempSelectedModelDatas.length > 0) {
                  let userStorageDtos = [
                    {
                      key: _self.uuid,
                      value: JSON.stringify(tempSelectedModelDatas),
                    },
                  ];

                  // 组装查询条件，然后放到后台数据库当中
                  UserStorageResource.uploadUserStorage(userStorageDtos).then(
                    successData => {
                      _self.$router.push({
                        path: customerWindowRouteUrl,
                        query: {
                          uuid: _self.uuid,
                        },
                      });
                    },
                    errorData => {
                      Common.processException(errorData);
                    },
                  );
                } else {
                  _self.$router.push({
                    path: customerWindowRouteUrl,
                    query: {
                      uuid: _self.uuid,
                    },
                  });
                }
              }
            }
          },
          errorData => {
            Common.processException(errorData);
          },
        );
      } else if (
        infoButton.processReportNo != null &&
        infoButton.processReportNo.length > 0
      ) {
        var processReportNo = infoButton.processReportNo;
        if (processReportNo != undefined && processReportNo != '') {

          const tipsTitle = infoButton.tipsTitle;
          const tipsContent = infoButton.tipsContent;
          const notNeedSelectData = infoButton.notNeedSelectData;

          var ids = _self.getSelectedRecordIds();
          if (notNeedSelectData !== true && ids.length < 1) {
            Notify.error('错误', '未选择可操作的数据', true);
            return;
          }


          const executeProcess = function () {
            _self.loading = true;
            ProcessReportResource.uniqueByNo(infoButton.processReportNo).then(
              successData => {
                _self.processReportDto = successData;
                if (successData) {
                  _self.pdfOnly = successData.pdfOnly;
                  _self.excelOnly = successData.excelOnly;
                }
                ProcessReportResource.runProcessByIds(
                  infoButton.processReportNo,
                  ids,
                ).then(
                  successData => {
                    _self.modal = true;
                    _self.loading = false;
                    _self.processReportResult = successData;
                    _self.$emit('processExecuteFinish');
                    // 流程执行完毕，调用刷新的按钮
                    _self.pageSearch();
                  },
                  errorData => {
                    _self.loading = false;
                    Common.processException(errorData);
                  },
                );
              },
              errorData => {
                _self.loading = false;
                Common.processException(errorData);
              },
            );
          };



          if (tipsTitle != null && tipsTitle.length > 0 && tipsContent != null && tipsContent.length > 0) {
            Modal.confirm({
              title: tipsTitle,
              icon: createVNode(ExclamationCircleOutlined),
              content: tipsContent,
              okText: '确认',
              cancelText: '取消',
              onOk() {
                executeProcess();
              },
              onCancel() {
                console.log('Cancel');
              },
            });
          } else {
            executeProcess();
          }

        }
      } else if (
        infoButton.curdWindowNo != null &&
        infoButton.curdWindowNo.length > 0
      ) {
        _self.$router.push(
          '/desktop/window/' + infoButton.curdWindowNo + '?uuid=' + _self.uuid,
        );
      }
    },

    /**
     * 执行导出
     * @return {void}
     */
    executeExport: function () {
      var _self = this;

      if (this.searchConditionInstance.state.isComplex == false) {
        let condition = _self.$refs.queryCondition.getQueryCondition();
        let downloadUrl =
          Common.getApiURL('exportResource/exportInfoDataSimple') +
          '?infoWindowNo=' +
          _self.infoWindowDto.no +
          '&recordIds=' +
          _self.getSelectedRecordIds().join(',') +
          '&infoFilterFieldValues=' +
          _self.uuid +
          '&condition=' +
          condition;
        let timeStr = dayjs().format('_YYYYMMDD_hhmmss');
        let fileName =
          _self.infoWindowDto == null
            ? '导出数据' + timeStr + '.xlsx'
            : _self.infoWindowDto.name + timeStr + '.xlsx';
        DownloadService.downloadFile(downloadUrl, fileName);
      } else {
        let infoFilterFieldValues =
          _self.$refs.queryCondition.getQueryCondition();
        let infoFilterFieldValueStrs = JSON.stringify(infoFilterFieldValues);
        let downloadUrl =
          Common.getApiURL('exportResource/exportInfoDataComplex') +
          '?infoWindowNo=' +
          _self.infoWindowDto.no +
          '&recordIds=' +
          _self.getSelectedRecordIds().join(',') +
          '&infoFilterFieldValues=' +
          _self.uuid;

        let timeStr = dayjs().format('_YYYYMMDD_hhmmss');
        let fileName =
          _self.infoWindowDto == null
            ? '导出数据' + timeStr + '.xlsx'
            : _self.infoWindowDto.name + timeStr + '.xlsx';
        let userStorageDtos = [
          {
            key: _self.uuid,
            value: infoFilterFieldValueStrs,
          },
        ];
        // 组装查询条件，然后放到后台数据库当中
        UserStorageResource.uploadUserStorage(userStorageDtos).then(
          successData => {
            DownloadService.downloadFile(downloadUrl, fileName);
          },
          errorData => {
            Common.processException(errorData);
          },
        );
      }
    },

    /**
     * 获取选择数据的Id集合
     */
    getSelectedRecordIds: function () {
      return this.infoWindowDataInstance.getSelectedRecordIds();
    },

    /**
     * 获取选中的第一个数据的Id
     */
    getFirstSelectRecordId: function () {
      var _self = this;
      let recordIds = _self.getSelectedRecordIds();
      if (recordIds.length > 0) {
        return recordIds[0];
      }
      return undefined;
    },

    /**
     * 获取选中的第一个数据的FieldValue
     */
    getFirstSelectModelDataFieldValue: function (name) {
      const firstData = this.infoWindowDataInstance.getFirstSelected();
      if (firstData == null) {
        return null;
      } else {
        if (firstData.data[name] != null) {
          return firstData.data[name].displayValue[0];
        }
      }
      return null;
    },

    dynamicInitViews: function () {
      let _self = this;
      let infoWindowDashbaords = _self.infoWindowDto.infoWindowDashbaords;
      if (infoWindowDashbaords != null && infoWindowDashbaords.length > 0) {
        for (let i = 0, length = infoWindowDashbaords.length; i < length; i++) {
          let infoWindowDashbaord = infoWindowDashbaords[i];
          console.log(infoWindowDashbaord);
          _self.dynamicInitView(infoWindowDashbaord);
        }
      }
    },

    /**
     * 初始化Dashbaord界面
     */
    dynamicInitView: function (infoWindowDashbaord) {
      // TODO: 添加测试文件
      //infoWindowDashbaord.cssUrl = '/content/DictionaryAsset/InfoWindow/EAM/20240922_095937_AssetDashboard.css';
      //infoWindowDashbaord.jsUrl = '/content/DictionaryAsset/InfoWindow/EAM/20240922_095937_AssetDashboard.js';
      let _self = this;

      const componentName = infoWindowDashbaord.componentName;

      // 如果是默认视图的话，进行加载
      if (infoWindowDashbaord.isDefault === true) {
        _self.selectedView = infoWindowDashbaord.componentName;
      }

      _self.views.push({
        value: componentName,
        payload: {
          name: infoWindowDashbaord.name,
          src: _self.iconSrc + infoWindowDashbaord.icon,
          style: {
            backgroundColor: '#f56a00',
          },
        },
      });

      const cssUrl = infoWindowDashbaord.cssUrl;

      if (cssUrl != null && cssUrl != undefined) {
        CssUtil.dynamicLoadCss(cssUrl, componentName);
      }

      const jsUrl = infoWindowDashbaord.jsUrl;
      if (jsUrl != null && jsUrl != undefined) {
        let promise = new Promise((resolve, reject) => {
          import(/* webpackIgnore: true */ jsUrl)
            .then(remoteComponent => {
              resolve(remoteComponent);
            })
            .catch(error => {
              reject(error);
            });
        });

        promise.then(
          remoteComponent => {
            console.log('remoteComponent：' + remoteComponent.default.name);
            if (componentName !== remoteComponent.default.name) {
              let errorMessage =
                '数据字典-查询窗口自定义组件部件名称定义的是' +
                componentName +
                '，但是程序中name定义的是' +
                remoteComponent.default.name +
                '，两者必须相同。';
              console.error(errorMessage);
              Notify.error('查询窗口自定义组件定义错误', errorMessage, false);
            }
            window.app.component(componentName, remoteComponent.default);
            _self.componentLoadedCount++;
          },
          errorData => {
            console.error(errorData);
          },
        );
      }
    },

    /**
     * 页数改变
     * @param page
     */
    handlePageChange: function (page) {
      this.pagination.current_page = page;
      setTimeout(() => {
        this.pageSearch();
      }, 100);
    },

    /**
     * 每页条数改变
     * @param current
     * @param size
     */
    handleShowSizeChange: function (current, size) {
      setTimeout(() => {
        this.pagination.current_page = 1;
      });
      this.pagination.per_page = size;
      localStorage.setItem(`InfoWindowPageSize${this.windowNo}`, size);
    },

    // 获取表格选择的数据
    infoSelected: function (selected) {
      this.selectInfoData = selected;
    },
  },
};
</script>

<style scoped>
.sort-button {
  float: left;
}

.btn-process {
  float: right;
  margin-left: 15px;
}

.mulitiple-select {
  background-color: #6699cc !important;
}

.flex-container {
  display: flex;
  /* 垂直*/
  flex-direction: column;
  width: 100%;
  /*视口被均分为100单位的vh 占据整个窗口*/
  height: calc(100vh - 75px);
}

.flex-container-modal {
  display: flex;
  /* 垂直*/
  flex-direction: column;
  width: 100%;
  /*视口被均分为100单位的vh 占据整个窗口*/
  height: calc(100vh - 215px);
}

.flex-header {
  /*放大缩小比例为0 占据垂直方向80px*/
  height: 400px;
  flex: 0 0 100px;
}

.flex-footer {
  height: 40px;
  flex: 0 0 40px;
}

.flex-content {
  display: flex;
  flex: 1;
  height: 0;
}
</style>


<style scoped>
/** 修复分页的样式 By YangZhiJie 2021-07-06 11:23 */
nav>>>ul.pagination {
  margin: 0 !important;
}
</style>

<style scoped>
.warning {
  background-color: #fcf8e3 !important;
}

.text-center {
  text-align: center !important;
}

.m-segmented {
  float: right;
  margin-top: 4px;
}

.m-segmented>>>.ant-segmented-item {
  margin-bottom: 0px;
}
</style>