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

<template>
  <div>
    <component
      :is="componentName" ref="infoComponent" :field-value="fieldValue" :info-window="infoWindowDto"
      :where-clause-source="whereClauseSource" :is-search-widget="isSearchWidget" :parent-model-data="parentModelData"
      :model-data="modelData" :multiple="multiple" @data-selected="dataSelected" @delete-selected="deleteSelected"
    />

    <Loading v-if="loading" />
  </div>
</template>
<script>
var Common = require('../../common/Common.js').default;
var Notify = require('../../common/Notify.js').default;
var CssUtil = require('../../common/CssUtil.js').default;
var JsUtil = require('../../common/JsUtil.js').default;
var QueryPage = require('./QueryPage.vue').default;
var Loading = require('../../loading/src/Loading.vue').default;
var ClientOrganization = require('../../client-organization/src/ClientOrganization.vue').default;

export default {
  name: 'InfoWindow',

  components: {
    QueryPage,
    Loading,
    'ClientOrganization': ClientOrganization,
  },

  props: {
    'whereClauseSource': {
      type: Object,
      default: null,
    },
    'isSearchWidget': {
      type: Boolean,
      default: null,
    },
    'parentModelData': {
      type: Object,
      default: null,
    },
    'modelData': {
      type: Object,
      default: null,
    },
    'fieldValue': {
      type: Object,
      default: null,
    },
    /**
         * 查询窗口编号
         */
    'infoWindowNo': {
      type: String,
      default: null,
    },
    /**
         * 是否多选
         */
    'multiple': {
      type: Boolean,
      default: false,
    },
  },

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

  data: function () {
    return {
      'infoWindowDto': {},
      // 显示部件名称
      'componentName': '',
      loading: false,
      moduleDtos: [],
    };
  },

  watch: {

    'infoWindowNo': {
      handler: function (newValue, oldValue) {
        let _self = this;
        if (newValue != oldValue) {
          this.$nextTick(function () {
            _self.loadData();
          });
        }
      },
      immediate: true,
    },
  },

  mounted: function () {
  },

  methods: {
    /**
         * 加载数据
         */
    loadData: function () {
      if (this.infoWindowNo == null || this.infoWindowNo.length == 0) {
        return;
      }
      var _self = this;
      _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 = false;
          console.log(data);
          _self.infoWindowDto = data;

          // 计算显示的部件
          if (_self.infoWindowDto.componentName != undefined && _self.infoWindowDto.componentName != '') {
            _self.componentName = _self.infoWindowDto.componentName;
            _self.dynamicInit();
          } else if (_self.infoWindowDto.infoWindowType == undefined || _self.infoWindowDto.infoWindowType == 'TableGrid'
              || _self.infoWindowDto.infoWindowType == 'NONE') {
            _self.componentName = 'QueryPage';
          }

          _self.$nextTick(function () {
            if (_self.infoWindowDto.componentName == undefined || _self.infoWindowDto.componentName == '') {
              if (_self.infoWindowDto.infoWindowType == undefined || _self.infoWindowDto.infoWindowType == 'TableGrid' || _self.infoWindowDto.infoWindowType == 'NONE') {
                _self.$refs.infoComponent.initWidget(data);
              } else {
                _self.$refs.infoComponent.initWidget(data);
              }
            }
          });
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    /**
     * 动态初始化仪表盘
     */
    dynamicInit: function () {
      let _self = this;

      const componentName = _self.infoWindowDto.componentName;
      const cssUrl = _self.infoWindowDto.cssUrl;

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

      const jsUrl = _self.infoWindowDto.jsUrl;
      if(jsUrl != null && jsUrl != undefined){
        let promise = JsUtil.dynamicLoadJsModule(jsUrl);
        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);
        }, errorData => {
          console.error(errorData);
        });
      }
    },

    /**
         * 数据选择事件
         */
    dataSelected: function (data) {
      this.$emit('dataSelected', data);
    },

    valueChanged: function (fieldValue) {
      this.$emit('valueChanged', fieldValue);
    },

    /**
         * 数据删除事件
         */
    deleteSelected: function (data) {
      this.$emit('deleteSelected', data);
    },

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

    refresh: function () {
      var _self = this;
      if (_self.$refs.infoComponent != undefined) {
        if (_self.componentName == 'QueryPage') {
          _self.$refs.infoComponent.pageSearch();
        } else if (_self.componentName == 'ClientOrganization') {
          _self.$refs.infoComponent.refresh();
        }
      }
    },
  },
};

</script>