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" 
            @filter-field-property-changed="filterFieldPropertyChanged($event)"
            @grid-field-property-changed="gridFieldPropertyChanged($event)"
          />
        </div>
        <div>
          <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>
      </div>
      
      <a-space warp style="margin-top: 5px;">
        <a-button type="link" @click="pageSearch">
          {{ $t('lang.QueryConditionSimple.refresh') }}
          <template #icon>
            <SyncOutlined />
          </template>
        </a-button>


        <a-button type="link" @click="executeExport">
          {{ $t('lang.QueryConditionSimple.export') }}
          <template #icon>
            <DownloadOutlined />
          </template>
        </a-button>
      </a-space>



      <div v-if="!isSearchWidget" style="display: inline-block">
        <template v-for="infoButton in infoButtons" :key="infoButton.name">
          <a-button
            v-tooltip.right="Language.getHelpTrl($i18n.locale, infoButton)" type="link"
            @click="executeProcess(infoButton)"
          >
            {{ Language.getNameTrl($i18n.locale, infoButton) }}
          </a-button>
        </template>
      </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-avatar :src="payload.src" :alt="val" size="small" shape="square">
              {{ payload.content }}
            </a-avatar>
          </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"
        :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)"
        @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" />
    <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>
import Common from '../../common/Common.js';
import Modal from '../../modal/src/Modal.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 { useSort, useInfoGridFields, useInfoWindowData, useSearchCondition } from './InfoWindowState.js';
import { SyncOutlined, DownloadOutlined  } from '@ant-design/icons-vue';

export default {
  name: 'QueryPage',

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

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

    /**
     * 是否多选
     */
    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(),
      searchConditionInstance: useSearchCondition(),
      infoGridFieldsInstance: useInfoGridFields(),
      infoWindowDataInstance: useInfoWindowData(),

      views: [
        {
          name: '表格视图',
          value: 'QueryPageTable',
          payload: {
            src: 'https://joeschmoe.io/api/v1/random',
            style: {
              backgroundColor: '#f56a00',
            },
          },
        },
        {
          name: '看板视图',
          value: 'QueryPageDashboard',
          payload: {
            src: 'https://joeschmoe.io/api/v1/random',
            style: {
              backgroundColor: '#f56a00',
            },
          },
        },
      ],

      selectedView: 'QueryPageTable', // 选中的视图
    };
  },

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

    /**
     * 高级查询
     * @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) {
          if (_self.$refs.loading) {
            _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 != '') {
          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);
            },
          );
        }
      } else if (
        infoButton.curdWindowNo != null &&
        infoButton.curdWindowNo.length > 0
      ) {
        _self.$router.push(
          '/desktop/window/' + infoButton.curdWindowNo + '?uuid=' + _self.uuid,
        );
      }
    },

    /**
     * 执行导出
     * @return {void}
     */
    executeExport: function (isSimple) {
      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;
    },
  },
};
</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;
}

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