vue Esview 可视化编程 程序流程：assemble_page.vue 深度学习

当调用assemble_page的时候，调用mounted函数
mounted(){
this.clear()
//window.location.hash = deepCopy(window.location.hash) + ’ ’
this.getControlClazzes()//
resetSnapShot()
this.appId = this.$route.query.appIdthis.pageSoulId=this.$route.query.pageSoulId
this.clear()

  getControlList.call(this, (data) => {

这里面执行两个比较重要的函数：
getControlClazzes：这个函数比较难理解
和getControlList
GetControlClazzes函数：在app.vue中
mapActions(‘dragModule’, [‘getControlClazzes’]),
关于action的说明，在官网中：https://vuex.vuejs.org/zh/guide/mutations.html
这个mapActions语句很难懂，具体参数定义说明见：
https://vuex.vuejs.org/zh/guide/modules.html#带命名空间的绑定函数
就是表示映射到新的路径： dragModule/getControlClazzes
getControlList函数把控件显示出来：
getControlList.call(this, (data) => {

    let draggableControls = []

    data.forEach(origin => {
      let control = makeControl(origin.code);
      control.clazzId = origin.clazzId
      draggableControls.push(control)
    })

我们看看getControlList函数如何实现：（develop_resource.js）
function getControlList(fn) {
this.$http.post(‘control/controlList’).then(res => {
if (res.data.code === 10000) {
this.controls = res.data.data
if(fn){
fn.call(this,res.data.data)
}
}
})

并且保存在draggableControls中，
后台返回的数据如下：

这个控件的代码从服务器中得到的code代码如下：
exports.cid = ‘46’
exports.name = ‘Icon’;
exports.nickname = ‘Icon’;
exports.type = ‘Icon’;
exports.template= <Icon{model}></Icon>
exports.desc = ‘Icon’;
exports.allow = [];
exports.model = {
type:{
type:‘select’,
value:‘refresh’,
desc:’’
}
};
exports.script = function (eventCenter) {
};
exports.render = function (createElement) {
const context = this
const store = createElement.store
if(!context.initScript){
context.initScript=true
}
return createElement(context.type, {
props:{
type:context.model.type.value
},
domProps: {
controlConfig: this
},
directives: [
{
name:‘editable’,
value:‘Icon’
}
],
nativeOn: {
click: function (e) {
store.commit(‘dragModule/showEditorPanel’, e)
}
},
})
}",
函数从后台control表中取出来数据通过for语句
data.forEach(origin => {
let control = makeControl(origin.code);
control.clazzId = origin.clazzId
draggableControls.push(control)
})
这里面每个空间的origin.code：如下
origin.code
“exports.cid = ‘46’
exports.name = ‘Icon’;
exports.nickname = ‘Icon’;
exports.type = ‘Icon’;
exports.template= <Icon{model}></Icon>
exports.desc = ‘Icon’;
exports.allow = [];
exports.model = {
type:{
type:‘select’,
value:‘refresh’,
desc:’’
}
};
exports.script = function (eventCenter) {
};
exports.render = function (createElement) {
const context = this
const store = createElement.store
if(!context.initScript){
context.initScript=true
}
return createElement(context.type, {
props:{
type:context.model.type.value
},
domProps: {
controlConfig: this
},
directives: [
{
name:‘editable’,
value:‘Icon’
}
],
nativeOn: {
click: function (e) {
store.commit(‘dragModule/showEditorPanel’, e)
}
},
})
}”
最后把这个code 赋给了draggableControls
之后dragableControls有复制map，map有把controls赋给了clazz.controls：
this.controlClazzes.forEach(clazz => {
let controls = map[clazz.id]
if (controls) {
clazz.controls = controls
}
})
这样就把dragablecontrols的控件分类赋给了controlClazzes。

界面中显示的如下界面：

调用setDraggableControls（drag_module.js），把数据保存在state变量中（drag_module.js）
setDraggableControls(state, draggableControls){
state.draggableControls = draggableControls
},
这个函数应该是重点分析一下：把draggableControls保存在state.dragableControls中。

那么有个问题出来了：当assemble_page.vue显示完页面后，拖拽等动作如何注册的呢？
留在下一回在继续研究。
这里我们看到当点击这个控件的时候，执行
click: function (e) {
store.commit(‘dragModule/showEditorPanel’, e)
这个函数就是在点击的时候调用的。一起放到下一节学习。

之后，如果是新建立的页面继续执行init函数
init(draggableControls)
function init(draggableControls) {
let dropPanelSoul = findSoulByCid(100, draggableControls),
copy = deepCopy(dropPanelSoul);//before drop ,must copy drag control
copy.uid = generateUid() //dropped control has unique uid
store.commit(‘dragModule/setSoul’, copy)
}

  在init中执行store.commit('dragModule/setSoul', copy)，提交vuex的mutation

Vuex文档在：https://vuex.vuejs.org/zh/guide/ 还需要补一下。
Commit之后就是copy给state中的soul赋值了。
copy = deepCopy(dropPanelSoul);//before drop ,must copy drag control
在init函数中，deepCopy函数
我们在深入看一下deepCopy函数 assist.js中

如果是已有的页面，调用else部分（还是在assemble_page.vue中）

这里面调用getRichPage函数（assemble_resource.js）
function getRichPage(id, fn) {
this.$http.get(‘page/richPage/’ + id).then(res => {
if (res.data.code === 10000) {
if (fn) {
fn.call(this, res.data.data)
}
}
})
}
从后台得到如下数据：

里面的pageSoul就是页面里面的控件布局。pageSoul数据类似如下：

let ancestorSoul = parse(data.pageSoul)
= code代码如下=
“exports.cid = ‘100’
exports.name = ‘DropPanel’;
exports.nickname = ‘DropPanel’;
exports.type = ‘Div’;
exports.template=<div{model}>{slot}</div>
exports.desc = ‘拖拽安置面板’;
exports.allow = [];
exports.template= <Div{model} {slotName}>{slot}</Div>
exports.model = {
style: {
type: ‘json’,
value:{},
desc: ‘value’
}
};
exports.script = function () {
};
exports.render = function (createElement) {
const context = this
const store = createElement.store
if(!context.initScript){
context.initScript=true
}
return createElement(‘Div’, {
style:context.model.style.value,
domProps: {
controlConfig: this
},
directives: [
{
name: ‘droppable’
}
],
‘class’: {
‘soul-drop-panel’: true
},
nativeOn: {
click: function (e) {
store.commit(‘dragModule/clear’, e)
}
}
}, context.children.map(function (child) {
return child.render(createElement)
}))
}”
这样整个页面就显示出来了。