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
        class="panel panel-default"
        style="margin-bottom: 5px;"
      >
        <div
          class="panel-heading"
          style="padding: 0px;"
        >
          <InfoHeader
            :html-help-url="infoWindowDto.htmlHelpUrl"
            :info-grid-fields="infoGridFields"
            :header-name="infoWindowDto.name"
            :info-filter-fields="infoFilterFields"
            :info-window-no="infoWindowDto.no"
            @filter-field-property-changed="filterFieldPropertyChanged($event)"
            @grid-field-property-changed="gridFieldPropertyChanged($event)"
          />
        </div>
        <div
          class="panel-body"
          style="padding-bottom: 5px; padding-top: 8px;"
        >
          <QueryCondition
            ref="queryCondition"
            :info-filter-fields="infoFilterFields"
            :info-buttons="infoWindowDto.infoButtons"
            :is-search-widget="isSearchWidget"
            :show-button="true"
            :info-window-no="infoWindowDto.no"
            @simple-search="simpleSearch"
            @complex-search="complexSearch"
            @refresh-search="pageSearch"
            @execute-process="executeProcess($event)"
            @execute-export="executeExport"
          />
        </div>
      </div>
    </div>
    <div class="flex-content">
      <div
        :id="tableOutDivId"
        class="flex-main table-fix-head"
      >
        <table
          class="fixed-table table-striped table-bordered"
          :width="tableWidth"
          height="40px"
        >
          <thead>
            <tr height="40px">
              <th width="50px">{{ $t('lang.QueryPage.serialNumber') }}</th>
              <th
                width="30px"
                class="text-center"
                :class="{'mulitiple-select': multipleSelect}"
                @click.self="changeSelectMode"
              >
                <input
                  v-model="isSelectAll"
                  type="checkbox"
                />
              </th>
              <th
                v-for="(infoGridField) in infoGridFields"
                v-show="infoGridField.isShow"
                :key="infoGridField.fieldName"
                :width="infoGridField.width + 'px'"
                @dragover="ondragover($event, infoGridField)"
                @click="onSort(infoGridField)"
              >
                <div
                  :id="'infoGridFieldId_' + infoGridField.fieldName"
                  class="rz-handle"
                  draggable="true"
                  @dragstart="ondragstart($event, infoGridField)"
                  @drag="ondrag($event, infoGridField)"
                  @dragend="ondragend($event, infoGridField)"
                />

                <div
                  v-tooltip.right="Language.getHelpTrl($i18n.locale, infoGridField)"
                  class="td-max"
                >
                  {{ Language.getNameTrl($i18n.locale, infoGridField) }}
                </div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item1,index) in infoWindowData.dataList"
              :key="'tr' + item1.id"
              height="40px"
              :class="{'warning':item1.select}"
              @dblclick="selectNode(item1)"
            >
              <td style="text-align: center;">{{ index+1+(pagination.current_page-1)*pagination.per_page }}</td>

              <td class="text-center">
                <input
                  type="checkbox"
                  :checked="item1.select"
                  @click.self="selectNodeForSearch(item1)"
                />
              </td>
              <td
                v-for="item2 in infoGridFields"
                v-show="item2.isShow"
                id="item.id"
                :key="'td-' + item2.id"
              >
                <span v-if="item2.simpleDisplayType == 'Image'">
                  <QueryPageImage
                    v-if="item1.data[item2.fieldName] != undefined"
                    :class-name="item2.selectClause"
                    :image-names="item1.data[item2.fieldName].displayValue[0]"
                  />
                </span>
                <span v-else>
                  {{ item1.data[item2.fieldName] != undefined ? item1.data[item2.fieldName].displayValue[0] : "" }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </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 @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" />
    <Modal v-model:show="modal">
      <template #default>
        <ProcessReportResult
          :process-report-result="processReportResult"
          :pdf-only="pdfOnly"
          :excel-only="excelOnly"
        />
      </template>
      <template #header>
        <div>{{ $t('lang.QueryPage.resultsOfEnforcement') }}</div>
      </template>
    </Modal>
  </div>
</template>

<script>
var Common = require('../../common/Common.js').default;
var Modal = require('../../modal/src/Modal.vue').default;

var PageSizeSelect = require('../../page-size-select/src/PageSizeSelect.vue').default;
var Pagination = require('../../vue-bootstrap-pagination/src/vue-bootstrap-pagination.vue').default;

var QueryCondition = require('./QueryCondition.vue').default;
var InfoHeader = require('./InfoHeader.vue').default;
var InfoUtil = require('./InfoUtil.js').default;
var Notify = require('../../common/Notify.js').default;

var Loading = require('../../loading/src/Loading.vue').default;
var ProcessReportResult = require('../../process/src/ProcessReportResult.vue').default;
var Uuid = require('../../common/Uuid.js').default;
var QueryPageImage = require('./QueryPageImage.vue').default;

var DownloadService = require('../../common/DownloadService.js').default;
var HtmlWindowResource = require('../../html-window/src/api/HtmlWindowResource.js').default;
var CustomerWindowResource = require('../../customer-window/src/api/CustomerWindowResource.js').default;
var ProcessReportResource = require('../../process/src/api/ProcessReportResource.js').default;

var UserStorageResource = require('../../common/UserStorageResource.js').default;

var Language = require('../../common/Language.js').default;

export default {

  name: 'QueryPage',

  components: {
    Pagination,
    QueryCondition,
    Modal,
    InfoHeader,
    Loading,
    ProcessReportResult,
    PageSizeSelect,
    QueryPageImage,
  },

  
  props: {
    'whereClauseSource':{
      type: Object,
      default: null,
    },  
    'isSearchWidget':{
      type: Boolean,
      default: false,
    }, 
    'parentModelData': {
      type: Object,
      default: null,
    },
    'modelData': {
      type: Object,
      default: null,
    },
    'fieldValue': {
      type: Object,
      default: null,
    },
  },

  emits: ['dataSelected'],

  data: function () {
    this.Language = Language;
    return {
      infoWindowDto: {},
      queryResult: {},
      infoWindowData: {},
      selectedModelDatas: [],	// 当前界面的选择项 (multiple)
      pagination: {
        total: 0,
        per_page: Common.pageSize,    // required
        current_page: 1, // required
        last_page: 10,    // required
      },
      isSelectAll: false,
      infoQueryParam: [],
      processReportResult: [],
      multipleSelect: false,
      uuid: Uuid.createUUID(),
      sortStr: '',// 排序
      sortStyle: ' ASC',
      currentIsSimpleSearch: true,
      startX: '',
      startWidth: '',
      processReportDto: '',
      pdfOnly: '',
      excelOnly: '',
      infoGridFields: [],
      infoFilterFields: [],
      // 表格外面的DIV的id
      tableOutDivId: Uuid.createUUID(),
      loading: false,
      modal: false,
    };
  },
  computed: {
    tableWidth: function () {
      var totalWidth = 50;
      if (this.infoWindowDto != undefined && this.infoGridFields != undefined) {
        this.infoGridFields.forEach(function (item) {
          if (item.isShow) {
            totalWidth += Number(item.width);
          }
        });
      }
      return totalWidth + 'px';
    },
  },
  watch: {

    /**
         * 是否选择了全部的数据
         */
    isSelectAll: function (val) {
      var _self = this;
      if (_self.multipleSelect) {
        if (_self.isSelectAll) {
          _self.selectedModelDatas.splice(0, _self.selectedModelDatas.length);
          if (val) {
            _self.infoWindowData.dataList.forEach(function (item) {
              item.select = true;
              _self.selectedModelDatas.push(item);
            });
          }
        } else {
          _self.infoWindowData.dataList.forEach(function (item) {
            item.select = false;
          });
          _self.selectedModelDatas = [];
        }
      } else {
        _self.isSelectAll = false;
      }
    },

    /**
         * 路由发生改变
         */
    $route: function (to, from) {
      var _self = this;
      _self.infoWindowData = {};
    },

    /**
         * 选择的数据发生改变
         */
    // selectedModelDatas: function(to, from){
    // 	var _self = this;
    // 	if(!_self.multipleSelect){
    // 		if(to.length > 1){
    // 			_self.selectedModelDatas.splice(0, to.length - 1);
    // 		}
    // 	}
    // },

    /**
         * fieldValue发生改变
         */
    fieldValue: function (to, from) {
      this.reSelectedNode(to);
    },
  },

  methods: {
    // 页码数量改变
    gridSizeSelect: function (newPageSize) {
      this.pagination.per_page = newPageSize;
      this.pagination.current_page = 1;
    },

    ondragstart: function (event, gridFieldItem) {
      var _self = this;
      _self.startX = event.pageX;
      _self.startWidth = Number(gridFieldItem.width);
      event.dataTransfer.setDragImage(event.target, 0, 20);
      event.dataTransfer.effectAllowed = 'move';
    },

    ondrag: function (event, gridFieldItem) {
      var _self = this;
      gridFieldItem.width = _self.startWidth + (event.pageX - _self.startX);
    },

    ondragend: function (event, gridFieldItem, index) {
      var _self = this;
      let newWidth = _self.startWidth + (event.pageX - _self.startX);
      if (newWidth < 50) {
        newWidth = 50;
      }
      gridFieldItem.width = newWidth;

      InfoUtil.saveInfoGridFields(_self.infoWindowDto.no, _self.infoGridFields);

    },


    ondragover: function (event, gridFieldItem) {
      event.preventDefault();
      event.dataTransfer.dropEffect = 'move';
    },


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

      _self.infoWindowDto = data;
      _self.infoFilterFields = data.infoFilterFields;
      _self.infoGridFields = data.infoGridFields;
      // var sortNo = 10;
      _self.infoGridFields.forEach(function (item) {
        item.width = 150;
      });
      _self.infoFilterFields.forEach(function (item) {
        item.value = {
          'infoFilterFieldId': item.id,
          'value1': '',
          'value2': '',
        };
      });
      InfoUtil.restoreInfoFilterFields(_self.infoWindowDto.no, _self.infoFilterFields);
      InfoUtil.restoreInfoGridFields(_self.infoWindowDto.no, _self.infoGridFields);


      _self.simpleSearch();
    },

    complexSearch: function () {
      var _self = this;
      _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;
      var isSimpleQuery = _self.$refs.queryCondition.isSimpleQuery();
      if (isSimpleQuery) {
        _self.queryInfoWindowDataSimple();
      } else {
        _self.queryInfoWindowDataComplex();
      }
    },

    /**
       * 简单查询
       * @return {void} 
       */
    simpleSearch: function () {
      var _self = this;
      _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;
          data.dataList.forEach(function (item) {
            item.select = false;
          });
          _self.infoWindowData = data;
          _self.selectedModelDatas.splice(0, _self.selectedModelDatas.length);

          _self.reSelectedNode(_self.fieldValue);
          _self.pagination.total = data.totalSize;
          _self.pagination.last_page = Math.ceil(data.totalSize / data.range.length);

          _self.fixedTableHeader();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    queryInfoWindowDataSimple: function () {
      var _self = this;
      if (_self.$refs.loading) {
        _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) {
          if (_self.$refs.loading) {
            _self.loading=false;
          }
          data.dataList.forEach(function (item) {
            item.select = false;
          });
          _self.infoWindowData = data;

          _self.selectedModelDatas.splice(0, _self.selectedModelDatas.length);

          _self.reSelectedNode(_self.fieldValue);
          _self.pagination.total = data.totalSize;
          _self.pagination.last_page = Math.ceil(data.totalSize / data.range.length);

          _self.fixedTableHeader();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          if (_self.$refs.loading) {
            _self.loading=false;
          }
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 双击表格行事件
         */
    selectNode: function (modelData) {
      this.$emit('dataSelected', modelData);
    },

    /**
         * 选择/取消选择表格行中的复选框事件
         */
    selectNodeForSearch: function (modelData) {
      var _self = this;
      if ((_self.fieldValue != undefined) && (_self.fieldValue.fieldType == 'ManyToManyKey')) {
        // CRUD-ManyToManySetBoxEditor多选搜索框-多选

      } else if ((_self.fieldValue != undefined) && (_self.fieldValue.displayType == 'MultiSearchBoxEditor')) {
        // 多选

      } else if ((_self.fieldValue != undefined) && (_self.fieldValue.fieldType == 'Key')) {
        // 单选
        // 清空选择项
        _self.selectedModelDatas.splice(0, _self.selectedModelDatas.length);
      }
      var currentStatus = modelData.select;
      var index = _self.selectedModelDatas.indexOf(modelData);
      if (!_self.multipleSelect) {
        _self.selectedModelDatas = [];
        _self.infoWindowData.dataList.forEach(function (item) {
          item.select = false;
        });
      }

      modelData.select = !currentStatus;

      if (index < 0) {
        _self.selectedModelDatas.push(modelData);
        _self.$emit('dataSelected', modelData);
      } else {
        _self.selectedModelDatas.splice(index, 1);
        _self.$emit('deleteSelected', modelData);
      }
    },

    /**
         * 获取选择的数据
         */
    getSelectedModelDatas: function (data) {
      var _self = this;
      return _self.selectedModelDatas;
    },

    /**
         * 条件字段属性发生改变
         */
    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;
      InfoUtil.saveInfoGridFields(_self.infoWindowDto.no, infoGridFieldsClone).then(successData => {
        InfoUtil.restoreInfoGridFields(_self.infoWindowDto.no, _self.infoGridFields);
      }, errorData => {
        console.log(errorData);
      });
    },

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

      if (infoButton == null) {
        return;
      }

      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 (_self.selectedModelDatas.length == 0) {
                    Notify.error('错误', '未选择可操作的数据', true);
                    return;
                  }
                  htmlWindowUrl = htmlWindowUrl.replace('{RecordId}', _self.getFirstSelectRecordId());
                } else if (tempResult == '{RecordIds}') {
                  if (_self.selectedModelDatas.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 (_self.selectedModelDatas.length == 0) {
                    Notify.error('错误', '未选择可操作的数据', true);
                    return;
                  } else if (_self.selectedModelDatas.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 (_self.selectedModelDatas.length == 0) {
              // Notify.error("错误", "未选择可操作的数据", true);
              // return;
              // }
              localStorage.setItem(_self.uuid, JSON.stringify(_self.selectedModelDatas));

              var routeDate = {
                path: customerWindowRouteUrl,
                query: {
                  'uuid': _self.uuid,
                },
              };
              _self.$router.push(routeDate);
            }
          }
        }, errorData => {
          Common.processException(errorData);
        });
      } else if (infoButton.processReportNo != null && infoButton.processReportNo.length > 0) {

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

          _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');
            }, errorData => {
              _self.loading=false;
              Common.processException(errorData);
            });
          }, errorData => {
            _self.loading=false;
            Common.processException(errorData);
          });
        }
      }
    },

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

      var isSimpleQuery = _self.$refs.queryCondition.isSimpleQuery();
      if(isSimpleQuery){
        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 = moment().format('_YYYYMMDD_hhmmss');
        let fileName = (_self.infoWindowDto == null ? '导出数据' + timeStr + '.xls' : _self.infoWindowDto.name + timeStr + '.xls');
        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 = moment().format('_YYYYMMDD_hhmmss');
        let fileName = (_self.infoWindowDto == null ? '导出数据' + timeStr + '.xls' : _self.infoWindowDto.name + timeStr + '.xls');
        let userStorageDtos = [
          {
            key: _self.uuid,
            value: infoFilterFieldValueStrs,
          },
        ];
        // 组装查询条件，然后放到后台数据库当中
        UserStorageResource.uploadUserStorage(userStorageDtos).then(successData => {
          DownloadService.downloadFile(downloadUrl, fileName);
        }, errorData => {
          Common.processException(errorData);
        });
      }      
    },


    /**
         * 获取选择数据的Id集合
         */
    getSelectedRecordIds: function () {
      var _self = this;
      var recordIds = [];
      _self.selectedModelDatas.forEach(function (selectedModelData) {
        recordIds.push(selectedModelData.id);
      });
      return recordIds;
    },

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

    /**
         * 获取选中的第一个数据的FieldValue
         */
    getFirstSelectModelDataFieldValue: function (name) {
      var _self = this;
      if (_self.selectedModelDatas.length > 0) {
        if (_self.selectedModelDatas[0].data[name] != undefined) {
          return _self.selectedModelDatas[0].data[name].displayValue[0];
        }
      }
      return undefined;
    },

    /**
         * 切换全选/单选
         */
    changeSelectMode: function () {
      this.multipleSelect = !this.multipleSelect;
    },

    /**
         * 排序
         */
    onSort: function (infoGridField) {
      var _self = this;
      var fieldName = null;
      if (infoGridField.sortFieldName != undefined && infoGridField.sortFieldName != '') {
        fieldName = infoGridField.sortFieldName;
      } else {
        fieldName = infoGridField.fieldName;
      }
      var sortStr = fieldName + _self.sortStyle;

      _self.infoQueryParam.sortClause = sortStr;
      if (_self.currentIsSimpleSearch) {
        _self.queryInfoWindowDataSimple();
      } else {
        _self.queryInfoWindowDataComplex();
      }

      _self.sortStyle = _self.sortStyle == ' ASC' ? ' DESC' : ' ASC';
    },

    /**
         * 重新加载数据以后，重新计算当前界面的选择项
         */
    reSelectedNode: function (fieldValue) {
      if (!fieldValue) {
        return;
      }
      var _self = this;
      var ids = [];
      if (fieldValue.displayType == 'MultiSearchBoxEditor') {
        ids = fieldValue.ids;
      } else if (fieldValue.fieldType == 'ManyToManyKey') {
        ids = fieldValue.ids;
      } else if (fieldValue.fieldType == 'Key') {
        ids.push(fieldValue.id);
      } else {
        return;
      }

      _self.selectedModelDatas.splice(0, _self.selectedModelDatas.length);
      if (this.infoWindowData && this.infoWindowData.dataList) {
        this.infoWindowData.dataList.forEach(function (node) {
          if (ids.indexOf(node.id) > -1) {
            _self.selectedModelDatas.push(node);
          }
        });
      }
    },



    /**
         * 冻结表头
         */
    fixedTableHeader: function () {
      let _self = this;
      _self.$nextTick(function () {
        var $th = $('#' + _self.tableOutDivId).find('thead');
        $('#' + _self.tableOutDivId).on('scroll', function () {
          $th.css('transform', 'translateY(' + this.scrollTop + 'px)');
        });
      });
    },

  },
};
</script>

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

.fixed-table {
    table-layout: fixed;
}
table.fixed-table tr th {
    text-align: center;
}
table.fixed-table td {
    text-align: center;
    word-wrap: break-word;
    word-break: normal;
}
.btn-process {
    float: right;
    margin-left: 15px;
}
.mulitiple-select {
    background-color: #6699cc !important;
}

table.fixed-table th {
    position: relative;
    min-width: 25px;
}

table.fixed-table th,
table.fixed-table td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

table.fixed-table th {
    min-width: 10px;
    background-color: #f8f8f8;
}

table.fixed-table th .rz-handle {
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.05) 2px,
        rgba(0, 0, 0, 0.05) 4px
    );
    cursor: ew-resize !important;
}

table.fixed-table th .rz-handle.rz-handle-active {
    border-right: 2px solid #000;
    transform: scaleX(100);
    background: rgba(0, 0, 0, 0.05) 2px;
}

.rz-handle:hover {
    background: rgba(0, 0, 0, 0.2) 4px;
}

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

.flex-main {
    overflow: scroll;
    flex: 1;
    margin-bottom: 0px;
}
</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;
}
</style>