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

<template>
  <div class="grid-container-2">
    <div class="grid-header-2">
      <QueryCondition
        ref="queryCondition"
        :info-filter-fields="infoFilterFields"
        :show-button="true"
        :is-search-widget="true"
        :info-window-no="infoWindowDto.no"
        @simple-search="simpleSearch()"
        @complex-search="complexSearch()"
        @refresh-search="queryInfoWindowData"
        @change-search="tabIndex = 1;"
      >
        <template #header>
          <li
            role="presentation"
            :class="{'active': tabIndex === 2}"
          >
            <a @click="$refs.queryCondition.changeSearch(1); tabIndex = 2;">{{ $t('lang.DocGenerator.selectedDatas') }}</a>
          </li>
        </template>
        <template #body>
          <div
            class="tab-pane"
            :class="{'active': tabIndex === 2}"
          />
        </template>
      </QueryCondition>
    </div>

    <div class="grid-content-2">
      <DocGeneratorGrid
        v-show="tabIndex === 1" 
                
        ref="docGeneratorGrid"
        :info-window-no="infoWindowNo"
        :info-grid-fields="infoGridFields"
        :info-window-data="infoWindowData"
        :is-selected-by-id="isSelectedById"
        @refresh-search="queryInfoWindowData"
        @select-changed="selectChanged"
      />

      <DocGeneratorSelected 
        v-show="tabIndex === 2"
        ref="docGeneratorSelected"
        :info-window-no="infoWindowNo"
        :info-grid-fields="infoGridFields"
        @select-changed="queryInfoWindowData"
      />
    </div>
    <Loading v-if="loading" />
  </div>
</template>
<script>
var Common = require('../../common/Common.js').default;
var InfoUtil = require('./InfoUtil.js').default;
var Loading = require('../../loading/src/Loading.vue').default;
var QueryCondition = require('./QueryCondition.vue').default;
var DocGeneratorSelected = require('./DocGeneratorSelected.vue').default;
var DocGeneratorGrid = require('./DocGeneratorGrid.vue').default;

export default {
  name: 'DocGenerator',

  components: {
    QueryCondition, Loading,  
    DocGeneratorSelected,
    DocGeneratorGrid,
  },
    
  props: {
    infoWindowNo : {
      type: String,
      default: null,
    },
  },

  data: function () {
    return {
      infoWindowDto: {},
      infoFilterFields: [],   // 过滤字段
      infoGridFields: [],     // 表格字段
      infoWindowData: [],
      tabIndex: 1,
      loading: false,
    };
  },

  watch: {
    infoWindowNo: function(newValue, oldValue){
      this.init();
    },
  },

  mounted: function(){
    this.init();
  },

  methods: {
        
    /**
         * 加载查询窗口的定义
         * @author YangZhiJie 20210909
         */
    init: function () {
      var _self = this;
      if (_self.infoWindowNo === undefined || _self.infoWindowNo === null || _self.infoWindowNo === '') {
        return;
      }
      _self.loading=true;
      $.ajax({
        url: Common.getApiURL('InfoWindowResource/uniqueByNo'),
        type: 'GET',
        dataType: 'json',
        data: { 'infoWindowNo': _self.infoWindowNo },
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        success: function (data) {
          _self.loading=true;
          _self.infoWindowDto = data;
          _self.$emit('showTitle', data.name);
          _self.$nextTick(function () {
            _self.initQueryPage();
          });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=true;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 根据用户配置更新查询窗口的定义
         * @author YangZhiJie 20210909
         */
    initQueryPage: function () {
      var _self = this;
      if (_self.infoWindowDto === undefined || _self.infoWindowDto === null) {
        return;
      }
            
      _self.infoWindowDto.infoGridFields.forEach(function (item) {
        item.width = 150;
      });

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

            
      InfoUtil.restoreInfoFilterFields(_self.infoWindowDto.no, _self.infoWindowDto.infoFilterFields);
      InfoUtil.restoreInfoGridFields(_self.infoWindowDto.no, _self.infoWindowDto.infoGridFields);

      _self.infoFilterFields = _self.infoWindowDto.infoFilterFields;
      _self.infoGridFields = _self.infoWindowDto.infoGridFields;


      _self.$nextTick(function () {
        _self.queryInfoWindowData();
      });
    },

    /**
         * 重新开始简单查询
         * @author YangZhiJie 20210909
         */
    simpleSearch: function () {
      this.$refs.docGeneratorGrid.resetPagination();
      this.queryInfoWindowDataSimple();
    },

    /**
         * 从新开始复杂查询
         * @author YangZhiJie 20210909
         */
    complexSearch: function () {
      this.$refs.docGeneratorGrid.resetPagination();
      this.queryInfoWindowDataComplex();
    },

    /**
         * 查询窗口数据查询
         * @author YangZhiJie 20210909
         */
    queryInfoWindowData: function () {
      var isSimpleSearch = this.$refs.queryCondition.isSimpleQuery();
      if (isSimpleSearch) {
        this.queryInfoWindowDataSimple();
      } else {
        this.queryInfoWindowDataComplex();
      }
    },

    /**
         * 简单数据查询
         * @author YangZhiJie 20210909
         */
    queryInfoWindowDataSimple: function () {
      var _self = this;

      var infoQueryParam = this.$refs.docGeneratorGrid.getQueryParam();
      infoQueryParam.infoFilterFieldValues = _self.$refs.queryCondition.getQueryCondition();            
      _self.loading=true;
      $.ajax({
        url: Common.getApiURL('InfoWindowResource/queryInfoWindowDataSimple'),
        type: 'post',
        dataType: 'json',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        contentType: 'application/json',
        data: JSON.stringify(infoQueryParam),
        success: function (data) {
          _self.loading=false;
          console.log(data);
          if (data != undefined && data.range != undefined) {
            _self.infoWindowData = data.dataList;
            _self.$refs.docGeneratorGrid.setPagination(data.totalSize, Math.ceil(data.totalSize / data.range.length));
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 复杂数据查询
         * @author YangZhiJie 20210909
         */
    queryInfoWindowDataComplex: function () {
      var _self = this;

      var infoQueryParam = this.$refs.docGeneratorGrid.getQueryParam();
      infoQueryParam.infoFilterFieldValues = _self.$refs.queryCondition.getQueryCondition();

      _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(infoQueryParam),
        success: function (data) {
          _self.loading=false;
          console.log(data);
          if (data != undefined && data.range != undefined) {
            _self.infoWindowData = data.dataList;
            _self.$refs.docGeneratorGrid.setPagination(data.totalSize, Math.ceil(data.totalSize / data.range.length));
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
         * 选择的内容发生了改变
         * @author YangZhiJie 20210909
         */
    selectChanged: function(selectDatas){
      this.$refs.docGeneratorSelected.parseDataList(selectDatas);
    },

    /**
         * 根据id判断数据是否被选中
         * 供外部接口调用
         * @author YangZhiJie 20210909
         */
    isSelectedById: function(id){
      return this.$refs.docGeneratorSelected.isSelectedById(id);
    },

    /**
         * 获取选中的数据
         * 供外部接口调用
         * @author YangZhiJie 20210909
         */
    getSelectedData: function(){
      return this.$refs.docGeneratorSelected.getSelectedData();
    },
  },
};
</script>
<style scoped>
.grid-container-2 {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: min-content auto;
    width: 100%;
    height: calc(100% - 10px);
}

.grid-header-2 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

.grid-content-2 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    overflow: auto;
}
</style>

<style scoped>

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

</style>