yylib-quick-mobile/dist/yylib/quickdev/YYCreateModel.js

yylib-quick-mobile

var React = require('react');
var _ = require('lodash');
var ResourceParser= require('../templates/resource/index');
var DataUtil = require('../../utils/DataUtil');
//var ajax = require('../../utils/ajax');
var {YYSpin} = require('yylib-ui');
var {MODULE_URL} = require('../../common/RestUrl');
var CACHE_KEY = "YYCreateModel_";//缓存的键值前缀

var YYCreateModel = React.createClass({
    getDefaultProps:function(){
        return {
            appCode:null,//应用编码
            resourceCode:null,//页面编码
            generator:null,//生成的页面类型
            enableCache:false,//是否启用缓存
            serverUrl:MODULE_URL.GET_RESOURCE_DATA,
            isView:false,
            uiResource:null
        }
    }
    ,getInitialState:function(){
        return {
            appCode:this.props.appCode,
            resourceCode:this.props.resourceCode,
            generator:this.props.generator
        }
    }
    ,componentWillReceiveProps(nextProps){
        if('appCode' in nextProps && 'resourceCode' in nextProps && 'generator' in nextProps){
            //当应用编码或资源编码变更时重新加载刷新页面
            if(this.props.appCode !== nextProps.appCode
                || this.props.resourceCode !== nextProps.resourceCode
                || this.props.generator !== nextProps.generator){
                this.refreshPage(nextProps.appCode,nextProps.resourceCode,nextProps.generator,null,null);
            }
        }
        if('location'in nextProps){
            var query= this.props.location?this.props.location.query:{};
            var nextQuery= nextProps.location?nextProps.location.query:{};
            if(query.appCode!==nextQuery.appCode
                ||query.resourceCode!==nextQuery.resourceCode
                ||query.generator!==nextQuery.generator
            ){
                this.refreshPage(nextProps.appCode,nextProps.resourceCode,nextProps.generator,nextProps.location,null);
            }
        }
        if('routeParams' in nextProps){
            var query= this.props.routeParams?this.props.routeParams:{};
            var nextQuery= nextProps.routeParams?nextProps.routeParams:{};
            if(query.appCode!==nextQuery.appCode
                ||query.resourceCode!==nextQuery.resourceCode
                ||query.generator!==nextQuery.generator){
                this.refreshPage(nextProps.appCode,nextProps.resourceCode,nextProps.generator,null,nextProps.routeParams);
            }
        }
        //每次传入uiResource刷新页面 在预览时实时显示改变的效果
        if('uiResource' in nextProps){
            this.refreshPage(nextProps.appCode,nextProps.resourceCode,nextProps.generator,nextProps.location,nextProps.routeParams);
        }
    }
    ,refreshPage:function(appCode,resourceCode,generator,location,routeParams){
        var query= location?location.query:{};
        if(routeParams)query = routeParams;
        //如果属性不存在则取路由URL参数
        var _appCode = appCode?appCode:query.appCode;
        var _resourceCode = resourceCode?resourceCode:query.resourceCode;
        var _generator = generator?generator:query.generator;
        this.setState({appCode:_appCode,resourceCode:_resourceCode,generator:_generator}); //更新appCode|resourceCode|generator
        this._loadMetaData(_appCode,_resourceCode);
    }
    //加载元数据
    ,_loadMetaData:function(appCode,resourceCode){
    	var  ajax=window.YYUtils.Ajax;

        var self = this;
        if(!appCode||!resourceCode)return;
        var {serverUrl, enableCache, uiResource} = this.props;
        //读取缓存(内存级)
        var metaData = enableCache===false?null:DataUtil.getCache(CACHE_KEY+appCode+"_"+resourceCode);
        if(uiResource) {
            self.setState({uiResource: uiResource})
        } else if (metaData){
            self.setState({uiResource: _.cloneDeep(metaData)});
        } else {
            var url = ajax.fillUrlParams(serverUrl,{appCode,resourceCode});
            ajax.getJSON(url,function (result) {
                var data = null;
                if (result.success && result.backData && result.backData.data) {
                    data = JSON.parse(result.backData.data);
                }
                self.setState({uiResource: _.isEmpty(data)?null:data});
                DataUtil.setCache(CACHE_KEY+appCode+"_"+resourceCode, _.isEmpty(data)?null:_.cloneDeep(data));//存入缓存(内存级)
            });
        }
    }
    ,componentDidMount: function () {
        var {appCode,resourceCode,generator,location,routeParams} = this.props;
        this.refreshPage(appCode,resourceCode,generator,location,routeParams);
    }
    ,render: function() {
        var {router,location,params,route,routeParams,routes}=this.props;
        var _props = {router,location,params,route,routeParams,routes};
        _props.appCode = this.state.appCode;
        _props.resourceCode = this.state.resourceCode;
        _props.generator = this.state.generator;
        _props.uiResource = this.state.uiResource;
        _props.isView = this.props.isView
        if(this.state.uiResource!==undefined){
            //显示解析页面
            var component = _props.generator?ResourceParser[_props.generator]:null;
            return component?React.createElement(component,_props):null;
        }else{
            //显示加载中
            return <YYSpin style={{height:'100%',display:'flex',alignItems:'center',justifyContent:'center'}}/>;
        }
    }
});
module.exports = YYCreateModel;