jufubao-third 1.0.0-beta1

package/src/mixins/pageEditx.js

@@ -0,0 +1,251 @@
+'use strict';
+import {
+  AttrToTargetValues,
+  getContainerPropsValue,
+  baseCloneDeep,
+} from "@/utils/xd.base";
+
+
+export default {
+  data(){
+    return {
+      time: 400, //ms
+      dataListRefreshKey: '', //编辑时候重置key
+    }
+  },
+
+  created(){
+    //注册预览模式删除插件事件
+    XdBus.addEvent('onDelPackage', (data) => {
+      this.deleteComponent(data);
+    });
+
+    //注册预览模式新增插件事件
+    this.regAddComponent();
+
+    //注册预览模式编辑插件面板事件
+    this.editComponent();
+
+    //注册预览模式移动插件面板事件
+    this.regMoveComponent()
+  },
+
+  methods: {
+    //==移动插件相关=================================
+    regMoveComponent() {
+      XdBus.addEvent('onMoveComponents', ({container, type}) => {
+        let temp = baseCloneDeep(this.containers);
+
+        //先计算当前移动的插件在那个组中
+        let fixed = this.getFixedValue(container);
+        let containers = temp[fixed];
+
+        //数组为0或者为1个长度不处理
+        if (containers.length <= 1) {
+          alert('当前区域只有一个组件，无需排序操作');
+          return;
+        }
+        let index = this.getItemToContainerIndex(containers, container.containerId);
+
+        //向上并且已经是第一个
+        if (type === 'up' && index === 0) {
+          alert('已经是第一个，无需排序操作');
+          return;
+        }
+
+        //向下并且已经是最后一个
+        if (type === 'down' && index === (containers.length - 1)) {
+          alert('已经是最后个，无需排序操作');
+          return;
+        }
+
+        let item = baseCloneDeep(containers[index]);
+        let newIndex = type === 'up' ? (index - 1) : (index + 1);
+        containers.splice(index, 1);
+        containers.splice(newIndex, 0, item);
+        temp[fixed] = containers;
+        let newContainers = baseCloneDeep([].concat(temp.tops, temp.bodys, temp.bottoms));
+
+        this.containers = baseCloneDeep.cloneDeep(temp);
+        let indexObj = {};
+        newContainers.map((it, i) => {
+          indexObj[it['container_id']] = i;
+        });
+        XdBus.send('onMoveComponentsIndex', indexObj);
+      });
+    },
+    getItemToContainerIndex(container, containerId) {
+      let index = null;
+      container.map((item, idx) => {
+        if (containerId === item['container_id']) index = idx
+      })
+      return index;
+    },
+    getFixedValue(value) {
+      let fixed = 'bodys';
+      let attr = value['container']['component']['attrs'];
+      attr.map(item => {
+        if (item['key'] === 'fixed') {
+          if (item['value'] === 'top') fixed = 'tops';
+          if (item['value'] === 'bottom') fixed = 'bottoms';
+          if (item['value'] === 'footer') fixed = 'footers';
+        }
+      })
+      return fixed;
+    },
+    //==移动插件相关=================================
+
+
+    //==操作插件相关=================================
+    /**
+     * @description  删除插件
+     */
+    deleteComponent(data) {
+      let temp = this.$xdUniHelper.cloneDeep(this.containers);
+      temp['refreshKey'] = this.$xdUniHelper.randomChar(20);
+      this.refs = this.refs.filter(item => {
+        return item !== data.containerId
+      });
+
+      let {fixed, height} = this.getFixedKey(data, false);
+      switch (fixed) {
+        case 'top':
+          temp.tops = temp.tops.filter(item => {
+            return data.containerId !== item['container_id'];
+          });
+          temp.topHeight -= height;
+          break;
+        case 'bottom':
+          temp.bottoms = temp.bottoms.filter(item => {
+            return data.containerId !== item['container_id'];
+          });
+          temp.bottomHeight -= height;
+          break;
+        case 'footer':
+          temp.footers = temp.footers.filter(item => {
+            return data.containerId !== item['container_id'];
+          });
+          temp.footerHeight -= height;
+          break;
+        default:
+          temp.bodys = temp.bodys.filter(item => {
+            return data.containerId !== item['container_id'];
+          });
+      }
+      this.containers = temp;
+
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.setIframeHeigth(false);
+          XdBus.send('onDelViewUpdateBoard', {});
+          this.dataListRefreshKey = this.$xdUniHelper.randomChar(20);
+        }, this.time)
+      })
+    },
+
+    /**
+     * @description 接受点击加入插件操作
+     */
+    regAddComponent() {
+      XdBus.addEvent('onAddComponent', (containers) => {
+        let temp = this.$xdUniHelper.cloneDeep(this.containers);
+        temp['refreshKey'] = this.$xdUniHelper.randomChar(20);
+        let {fixed, height}  = this.getFixedKey(containers);
+        this.switchFixed(fixed, height, containers,temp);
+        this.containers = temp;
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.setIframeHeigth();
+            XdBus.message('onBoardSelect', {containerId: item['container_id']});
+            this.dataListRefreshKey = this.$xdUniHelper.randomChar(20);
+          }, this.time)
+        })
+      })
+    },
+
+    /**
+     * @description 编辑页面操作
+     */
+    editComponent() {
+      XdBus.addEvent('onEditComponent', ({container, isHeight}) => {
+        let temp = this.$xdUniHelper.cloneDeep(this.containers);
+        temp['refreshKey'] = this.$xdUniHelper.randomChar(20);
+        let {fixed, height} = this.getFixedKey(container, false);
+        switch (fixed) {
+          case 'top':
+            temp.tops = temp.tops.map(item => {
+              if (container['container_id'] === item['container_id']) return container;
+              return item;
+            });
+            if (isHeight) {
+              if (container.hidden) temp.topHeight -= height;
+              else temp.topHeight += height;
+            }
+            break;
+          case 'bottom':
+            temp.bottoms = temp.bottoms.map(item => {
+              if (container['container_id'] === item['container_id']) return container;
+              return item;
+            });
+            if (isHeight) {
+              if (container.hidden) temp.bottomHeight -= height;
+              else temp.bottomHeight += height;
+            }
+            break;
+          case 'footer':
+            temp.footers = temp.footers.map(item => {
+              if (container['container_id'] === item['container_id']) return container;
+              return item;
+            });
+            if (isHeight) {
+              if (container.hidden) temp.footerHeight -= height;
+              else temp.footerHeight += height;
+            }
+            break;
+          default:
+            temp.bodys = temp.bodys.map(item => {
+              if (container['container_id'] === item['container_id']) return container;
+              return item;
+            });
+        }
+
+        //编辑模式更新高度需要设置ref
+        if (isHeight) {
+          if (container.hidden) {
+            this.refs = this.refs.filter(ref => {
+              return ref !== container['container_id']
+            });
+          } else {
+            this.refs.push(container['container_id'])
+          }
+        }
+        this.containers = temp;
+
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.setIframeHeigth(false);
+            XdBus.message('onBoardSelect', {containerId: container['container_id']});
+            this.dataListRefreshKey = this.$xdUniHelper.randomChar(20);
+          }, this.time)
+        })
+      })
+    },
+    //==操作插件相关=================================
+
+    /**
+     * @description 刷新父级Iframe高度
+     * @param type
+     */
+    setIframeHeigth(type = true) {
+      let xdLayoutEl = this.$refs[this.layoutId].$el;
+      let height = parseInt(xdLayoutEl.style.height || window.getComputedStyle(xdLayoutEl).height);
+      if (height !== this.indexHeight) {
+        window['XdBus'].send('setIframeHeight', height);
+        this.indexHeight = height;
+      }
+    },
+
+  }
+}
+
+

package/src/mixins/pageEvent.js

@@ -0,0 +1,132 @@
+'use strict';
+import {JfbEvent} from "@/utils/xd.event";
+
+/**
+ * @description 绑定生命周期 + 操作事件类方法
+ */
+export default {
+  data(){
+    return {
+      isFirst: true, //是否为首次访问
+      currentPagesIsShow: false, //当前页面是否为显示状态
+      layoutInfo: null, //框架信息
+      options: null, //参数信息
+
+    }
+  },
+  onLoad(options) {
+    this.options = options;
+    if (this.isCheckAuth) {
+      console.warn('event.onLoad.onJfbLoad');
+      new JfbEvent('onJfbLoad', {
+        vm: this,
+        data: options,
+      });
+      console.log('exec.onLoad', new Date().getTime() - this.time, 'ms');
+    } else {
+      this.isOnLoad = true;
+    }
+  },
+  onPageScroll(e) {
+    console.warn('event.onPageScroll.onJfbScroll');
+    new JfbEvent('onJfbScroll', {
+      vm: this,
+      data: {e, options: this.options},
+    })
+  },
+  onReachBottom(e) {
+    console.warn('event.onReachBottom.onJfbReachBottom');
+    new JfbEvent('onJfbReachBottom', {
+      vm: this,
+      data: {e, options: this.options},
+    })
+  },
+  onShow() {
+    this.currentPagesIsShow = true;
+    if (!this.isFirst) {
+      console.log('exec.onShow', new Date().getTime() - this.time, 'ms');
+      console.warn('event.onShow.onJfbShow');
+      new JfbEvent('onJfbShow', {
+        vm: this,
+        data: this.options,
+      })
+    }
+    if (this.isFirst) {
+      this.isFirst = false;
+    }
+  },
+  onHide() {
+    this.currentPagesIsShow = false;
+    new JfbEvent('onJfbHide', {
+      vm: this,
+      data: this.options,
+    })
+  },
+  onUnload() {
+    console.warn('event.onUnload.onJfbUnload');
+    this.currentPagesIsShow = false;
+    new JfbEvent('onJfbUnload', {
+      vm: this,
+      data: this.options,
+    })
+  },
+  methods: {
+
+    getCurrentPagesIsShow(){
+      return this.currentPagesIsShow
+    },
+    /**
+     * @description 框架完成事件
+     * @param layout {object} 框架对象
+     * @return {Object}
+     */
+    handleDone(layout) {
+      this.layoutInfo = layout;
+
+      // #ifdef H5
+      if (this.$configProject.viewType === 'preview') {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.setIframeHeigth();
+          }, 50)
+        });
+      }
+      // #endif
+    },
+
+    /**
+     * @description 框架节点发生变化事件
+     * @param layout {object} 框架对象
+     * @return {Object}
+     */
+    handleChange(layout) {
+      this.layoutInfo = layout;
+    },
+
+    /**
+     * 业务组件之间通信事件
+     */
+    onCustomEvent(action, data) {
+      if (this.currentPagesIsShow) {
+        console.warn('event.onCustomEvent.onJfbCustomEvent');
+        new JfbEvent('onJfbCustomEvent', {
+          vm: this,
+          data: {action, data, options: this.options},
+        })
+      }
+    },
+
+    /**
+     * @description 绑定自定义导航时候返回事件方法
+     */
+    back() {
+      console.warn('event.back.onJfbBack');
+      new JfbEvent('onJfbBack', {
+        vm: this,
+        data: this.options,
+      })
+    },
+  }
+}
+
+

package/src/mixins/pageMain.js

@@ -0,0 +1,119 @@
+'use strict';
+import {mapActions, mapState, mapMutations} from 'vuex';
+import {
+  AttrToTargetValues,
+  getContainerPropsValue,
+  baseCloneDeep,
+} from "@/utils/xd.base";
+
+export default {
+  data(){
+    return {
+      time: new Date().getTime(),//与页面加载速度有关
+      isOnLoad: false, //是否执行了onload事件
+      options: null, //页面参数
+      site_id: null, //当前网站ID
+      layoutInfo: null, //框架数据
+      indexHeight: 0, //预览模式更新Iframe高度有关
+      projectAttr: {}, //项目属性
+      settings: {}, //编译时刻项目配置对象
+
+      //保存计算当前页面使用业务组件列表
+      containers: {
+        topHeight: 0,
+        bottomHeight: 0,
+        footerHeight: 0,
+        tops: [],
+        bottoms: [],
+        bodys: [],
+        footers: [],
+      },
+    }
+  },
+  created(){
+    this.settings = this.$settings;
+    this.site_id = getApp().globalData.$xd.brandInfo.site_id;
+    this.projectAttr = getApp().globalData.$xd.brandInfo;
+  },
+  methods: {
+    ...mapActions(['getPageAttr']),
+    ...mapMutations(['setPagesHeader', 'setPagesPermission']),
+
+
+    /**
+     * @description 获取Containers生产的位置和高度
+     * @param item
+     * @param isTranform 是否需要转化事件 默认：true
+     * @returns {{fixed: *, height: *}}
+     */
+    getFixedKey(item, isTranform = true) {
+      let fixed = 'body';
+      let height = 0;
+      if (isTranform) item['component']['attrs'] = AttrToTargetValues(item['component']['attrs']);
+      item['component']['attrs'].map(it => {
+        if (it['key'] === 'fixed') {
+          fixed = it['value'];
+        }
+        if (it['key'] === 'height') {
+          height = it['value'];
+        }
+      });
+      return {fixed, height};
+    },
+
+    /**
+     * @description 计算top/bottom/footer各自所站高度
+     * @param fixed
+     * @param height
+     * @param oldItem
+     * @param containers
+     * @returns {*}
+     */
+    switchFixed(fixed, height, oldItem, containers ){
+      switch (fixed) {
+        case 'top':
+          containers.tops.push(oldItem);
+          if (!oldItem.hidden) containers.topHeight += height;
+          break;
+        case 'bottom':
+          containers.bottoms.push(oldItem);
+          if (!oldItem.hidden) containers.bottomHeight += height;
+          break;
+        case 'footer':
+          containers.footers.push(oldItem);
+          if (!oldItem.hidden) containers.footerHeight += height;
+          break;
+        default:
+          containers.bodys.push(oldItem);
+      }
+    },
+
+    /**
+     * @description Container数据转化
+     * @param containers {Array} 使用业务插件数据
+     * @return {Object}
+     */
+    getContainerGroup(containers) {
+      let temp = {
+        topHeight: 0,
+        bottomHeight: 0,
+        footerHeight: 0,
+        tops: [],
+        bottoms: [],
+        bodys: [],
+        footers: [],
+      };
+      let refs = [];
+      containers.map(item => {
+        item['refreshKey'] = this.$xdUniHelper.randomChar(20);
+        if (!item.hidden) refs.push(item['container_id']);
+        let {fixed, height} = this.getFixedKey(item);
+        this.switchFixed(fixed, height, item, temp);
+      });
+      this.refs = refs;
+      return temp;
+    },
+  }
+}
+
+