client-base-v5/src/lowcode/LowcodeExample.vue

<template>
  <div id="lowcode-box" />
</template>


<script>

// import 'lowcode/sdk/sdk.js';
// import 'lowcode/lib/themes/antd.css';
// import 'lowcode/lib/helper.css';
// import 'lowcode/sdk/iconfont.css';
import { lowcodeConfig } from './LowcodeConfig.js';
import LowcodeWindowResource from '../api/dic/LowcodeWindowResource.js';
import Common from '../base/common/Common.js';
import { Notify, Uuid } from 'pc-component-v3';

export default {

  name: 'LowcodeExample',

  watch: {
    '$route': function (to, from) {
      let lowcodeWindowNo = this.$route.params.no;
      if(lowcodeWindowNo != null && lowcodeWindowNo != undefined){
        this.init();
      }
    },
  },


  mounted(){
    let _self = this;
    this.$nextTick(function(){
      let lowcodeWindowNo = this.$route.params.no;
      if(lowcodeWindowNo != null && lowcodeWindowNo != undefined){
        this.init();
      }
    });
  },

  beforeUnmount(){
    // 销毁 lowcode
    this.destory();
  },

  methods: {

    /**
     * 初始化lowcode实例
     */
    init(){
      // 初始化lowcode实例之前，先判断是否已经有lowcode实例，如果有的话就销毁。
      this.destory();
      let lowcodeWindowNo = this.$route.params.lowcodeWindowNo;
      let lowcode = window.lowcodeRequire('lowcode/embed');
      let _self = this;

      LowcodeWindowResource.readJson(lowcodeWindowNo).then(baseObjectResponse => {
        if(baseObjectResponse.errorCode === 0){
          let lowcodeJSON = JSON.parse(baseObjectResponse.data);
          _self.lowcodeScoped = lowcode.embed('#lowcode-box', lowcodeJSON, {}, lowcodeConfig);
        }else{
          let lowcodeJSON = {};
          Notify.error('提示', baseObjectResponse.errorMessage, false);
        }
      },errorData => {
        Common.processException(errorData);
      });
    },

    /**
     * 销毁lowcode实例
     */
    destory(){
      let _self = this;
      if(_self.lowcodeScoped != null){
        _self.lowcodeScoped.unmount();
        _self.lowcodeScoped = null;
      }
    },
  },
};
</script>