jufubao-base 1.0.8 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",
@@ -25,9 +25,9 @@
     "coder": "node ./build/commands/coder.js",
     "coder:page": "node ./build/commands/coder.page.js",
     "init.editx": "node ./build/commands/editx.init.js",
+    "publish": "node ./commands/npmignore && npm publish",
     "update.package": "node ./commands/update.pack.js",
-    "publish.package": "node ./commands/npmignore && npm publish",
-    "create.pack": "node ./commands/create.pack.js"
+    "create.package": "node ./commands/create.pack.js"
   },
   "dependencies": {
     "@dcloudio/uni-app-plus": "2.0.1-33920220208001",
@@ -49,7 +49,7 @@
     "core-js": "^2.6.5",
     "flyio": "^0.6.2",
     "gxd-uni-commands": "1.0.21",
-    "gxd-uni-library": "1.0.22",
+    "gxd-uni-library": "1.0.34",
     "jweixin-module": "^1.6.0",
     "md5": "^2.3.0",
     "qs": "^6.9.6",

package/src/components/JfbBaseBlock/Attr.js

@@ -0,0 +1,48 @@
+'use strict';
+
+export default [
+  {
+    label: '颜色:', //label
+    ele: 'el-input', //package 名称
+    type: 'text',
+    valueKey: 'color', //form[valueKey]
+    value: '#fff', //v-model
+    placeholder: '请输入占位框颜色',
+    classNmae: 'input40', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    disabled: true,
+    rules: [
+      {
+        required: true,
+        message: '请输入占位框颜色',
+        trigger: 'blur'
+      },
+    ]
+  },
+  {
+    label: '高度:', //label
+    ele: 'el-input', //package 名称
+    type: 'number',
+    valueKey: 'height', //form[valueKey]
+    value: 1, //v-model
+    placeholder: '请输入占位框高度，单位像素',
+    classNmae: 'input40', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    disabled: true,
+    rules: [
+      {
+        required: true,
+        message: '请输入占位框高度',
+        trigger: 'blur'
+      },
+    ]
+  },
+  {
+    label: '设置引用:', //label
+    ele: 'xd-switch', //package 名称
+    valueKey: 'is_reference', //form[valueKey]
+    value: false, //v-model
+    list: ['', ''], //左右文本
+    showTips: false, //是否显示文本
+    disabled: true,
+    backValueType: 2,
+  },
+]

package/src/components/JfbBaseBlock/JfbBaseBlock.vue

@@ -0,0 +1,86 @@
+<template>
+  <view
+    class="jfb-base-block"
+    @click="handleSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-block__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-block__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-block__body">
+      <view :style="{height: height * 2 + 'rpx', background: color}"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseBlockMixin from "./JfbBaseBlockMixin";
+  export default {
+    name: "JfbBaseBlock",
+    components: {
+      XdFontIcon
+    },
+    mixins: [
+      JfbBaseBlockMixin
+    ],
+    data() {
+      return {
+        height: 20,
+        color: '#fff'
+      }
+    },
+    created() {
+    },
+    methods: {
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  .jfb-base-block {
+    border: 1px dashed rgba(0,0,0,0);
+    box-sizing: border-box;
+
+    &.editx {
+      position: relative;
+      border: 1px dashed red;
+      box-sizing: border-box;
+    }
+
+    &__edit {
+      position: absolute;
+      right: unit(0, rpx);
+      top: unit(-52, rpx);
+      height: unit(50, rpx);
+      line-height: unit(50, rpx);
+      padding: 0 unit(20,rpx);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0,0,0,.6);
+      border-radius: unit(10,rpx);
+      box-shadow: 0 0 10px rbga(0,0,0,0.3);
+      color: #fff;
+      font-size: unit(22,rpx);
+
+
+      &.editx {
+        box-sizing: border-box;
+
+      }
+    }
+
+    &__body{
+
+    }
+  }
+</style>

package/src/components/{JfbBaseTop/JfbBaseTopMixin.js → JfbBaseBlock/JfbBaseBlockMixin.js}

@@ -6,6 +6,10 @@ import Attr from "./Attr";
 
 export default {
   props: {
+    cid:{
+      type: null|String|Number,
+      default: null,
+    },
     layoutInfo: {
       type: Object,
       default() {
@@ -19,13 +23,13 @@ export default {
       }
     },
     componentAtrr: {
-      type: Object,
+      type: Object|Array,
       default() {
         return {}
       }
     },
     appAtrr: {
-      type: Object,
+      type: Object|Array,
       default() {
         return {}
       }
@@ -39,39 +43,33 @@ export default {
   },
   data() {
     return {
+      containerId: null, //容器ID
       //#ifdef H5
-      
+
       //@AttrData
       Attr, //对外开发编辑属性
       //@EndAttrData
-      
+
       active: false, //是否选择当前状态
       isEditx: true, //当前为Editx模式
       edit: false, //是否开启编辑模式
-      containerId: null, //容器ID
       // #endif
     }
   },
   created() {
-    //#ifdef H5
-
-    //设置插件ID
-    if (this.componentAtrr.id) {
-      this.containerId = this.componentAtrr.id;
+    //设置插件cid
+    if (this.cid) {
+      this.containerId = this.cid;
     } else {
       this.containerId = this.$xdUniHelper.randomChar(20);
     }
+    console.log('created',this.containerId, this.cid)
 
+    //#ifdef H5
     //监听用户点击状态显示虚框
     XdBus.addEvent('select', ({containerId}) => {
       this.active = containerId === this.containerId;
     });
-
-    //监听用户点击编辑按钮进行编辑状态显示
-    XdBus.addEvent('useEditx', ({containerId}) => {
-      this.edit = containerId === this.containerId;
-    });
-
     // #endif
   },
   methods: {
@@ -84,21 +82,13 @@ export default {
 
     //#ifdef H5
     /**
-     * @description 点击视图编辑按钮发送Editx属性编辑面板
+     * @description 点击删除操作按钮
      */
-    showEdit() {
-      if (this.edit) return;
-      this.edit = true;
-
-      //往控制面板传递事件
-      XdBus.send('attrViewChange', {
-        Attr: this.$xdUniHelper.cloneDeep(Attr),
-        containerId: this.containerId,
-      }, false, 'xd-iframe');
-
-      //是否对当前控制面板进行编辑操作
-      XdBus.message('useEditx', {
+    delEdit(){
+      XdBus.send('onDelPackage', {
         containerId: this.containerId,
+        componentAtrr: this.componentAtrr,
+        cid: this.cid
       })
     },
     //#endif
@@ -107,14 +97,18 @@ export default {
      * @description 点击选择插件显示边框
      */
     handleSelect() {
-
       //#ifdef H5
       if (this.active) return;
       this.active = true;
+      console.log('handleSelect', Attr);
+      XdBus.send('onSelectPackage', {
+        containerId: this.containerId,
+        Attr: Attr,
+      });
+
       XdBus.message('select', {
         containerId: this.containerId,
       })
-
       //#endif
     },
 

package/src/components/JfbBaseLine/Attr.js

@@ -0,0 +1,116 @@
+'use strict';
+
+export default [
+  {
+    label: '颜色:', //label
+    ele: 'el-input', //package 名称
+    type: 'text',
+    valueKey: 'color', //form[valueKey]
+    value: '#ececec', //v-model
+    placeholder: '请输入分割线颜色',
+    classNmae: 'input40', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    disabled: true,
+    rules: [
+      {
+        required: true,
+        message: '请输入分割线颜色',
+        trigger: 'blur'
+      },
+    ]
+  },
+  {
+    label: '大小:', //label
+    ele: 'el-input', //package 名称
+    type: 'number',
+    valueKey: 'size', //form[valueKey]
+    value: 1, //v-model
+    placeholder: '请输入分割线大小，单位像素',
+    classNmae: 'input40', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    disabled: true,
+    rules: [
+      {
+        required: true,
+        message: '请输入分割线大小',
+        trigger: 'blur'
+      },
+    ]
+  },
+  {
+    label: '上边距:', //label
+    ele: 'el-input', //package 名称
+    type: 'number',
+    valueKey: 'topMargin', //form[valueKey]
+    value: 5, //v-model
+    placeholder: '请输入分割线上边距大小，单位像素',
+    classNmae: 'input40', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    disabled: true,
+    rules: [
+      {
+        required: true,
+        message: '请输入分割线上边距大小',
+        trigger: 'blur'
+      },
+    ]
+  },
+  {
+    label: '下边距:', //label
+    ele: 'el-input', //package 名称
+    type: 'number',
+    valueKey: 'bottomMargin', //form[valueKey]
+    value: 5, //v-model
+    placeholder: '请输入分割线下边距大小，单位像素',
+    classNmae: 'input40', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    disabled: true,
+    rules: [
+      {
+        required: true,
+        message: '请输入分割线下边距大小',
+        trigger: 'blur'
+      },
+    ]
+  },
+  {
+    label: '左边距:', //label
+    ele: 'el-input', //package 名称
+    type: 'number',
+    valueKey: 'leftMargin', //form[valueKey]
+    value: 5, //v-model
+    placeholder: '请输入分割线左边距大小，单位像素',
+    classNmae: 'input40', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    disabled: true,
+    rules: [
+      {
+        required: true,
+        message: '请输入分割线左边距大小',
+        trigger: 'blur'
+      },
+    ]
+  },
+  {
+    label: '右边距:', //label
+    ele: 'el-input', //package 名称
+    type: 'number',
+    valueKey: 'rightMargin', //form[valueKey]
+    value: 5, //v-model
+    placeholder: '请输入分割线右边距大小，单位像素',
+    classNmae: 'input40', //样式名称 //input100,input80,input70,input60,input50,input40,input30,input20,
+    disabled: true,
+    rules: [
+      {
+        required: true,
+        message: '请输入分割线右边距大小',
+        trigger: 'blur'
+      },
+    ]
+  },
+  {
+    label: '设置引用:', //label
+    ele: 'xd-switch', //package 名称
+    valueKey: 'is_reference', //form[valueKey]
+    value: false, //v-model
+    list: ['', ''], //左右文本
+    showTips: false, //是否显示文本
+    disabled: true,
+    backValueType: 2,
+  },
+]

package/src/components/JfbBaseLine/JfbBaseLine.vue

@@ -0,0 +1,111 @@
+<template>
+  <view
+    class="jfb-base-line"
+    @click="handleSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-line__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-line__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-line__body">
+      <view
+        :style="{
+          height: size * 2 + 'rpx',
+          background: color,
+          marginTop: topMargin * 2 + 'rpx',
+          marginBottom: bottomMargin * 2 + 'rpx',
+          marginLeft: leftMargin * 2 + 'rpx',
+          marginRight: rightMargin * 2 + 'rpx',
+        }"
+      ></view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseLineMixin from "./JfbBaseLineMixin";
+  export default {
+    name: "JfbBaseLine",
+    components: {
+      XdFontIcon
+    },
+    mixins: [
+      JfbBaseLineMixin
+    ],
+    data() {
+      return {
+        size: 1, //px
+        color: '#ececec',
+        topMargin: 5, //px
+        bottomMargin: 5,//px
+        leftMargin: 20, //px
+        rightMargin: 20 //px
+      }
+    },
+    created() {
+
+    },
+    methods: {
+
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  .jfb-base-line {
+    border: 1px dashed rgba(0,0,0,0);
+    box-sizing: border-box;
+
+    &.editx {
+      position: relative;
+      border: 1px dashed red;
+      box-sizing: border-box;
+    }
+
+    &__edit {
+      position: absolute;
+      right: unit(0, rpx);
+      top: unit(-52, rpx);
+      height: unit(50, rpx);
+      line-height: unit(50, rpx);
+      padding: 0 unit(20,rpx);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(0,0,0,.6);
+      border-radius: unit(10,rpx);
+      box-shadow: 0 0 10px rbga(0,0,0,0.3);
+      color: #fff;
+      font-size: unit(22,rpx);
+
+
+      &.editx {
+        box-sizing: border-box;
+
+      }
+    }
+
+    &__body{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      & > view {
+        overflow: hidden;
+        display: flex;
+        flex-flow: wrap;
+        width: 100%;
+        box-sizing: border-box;
+      }
+    }
+  }
+</style>

package/src/components/{JfbBaseBottom/JfbBaseBottomMixin.js → JfbBaseLine/JfbBaseLineMixin.js}

@@ -6,6 +6,10 @@ import Attr from "./Attr";
 
 export default {
   props: {
+    cid:{
+      type: null|String|Number,
+      default: null,
+    },
     layoutInfo: {
       type: Object,
       default() {
@@ -19,13 +23,13 @@ export default {
       }
     },
     componentAtrr: {
-      type: Object,
+      type: Object|Array,
       default() {
         return {}
       }
     },
     appAtrr: {
-      type: Object,
+      type: Object|Array,
       default() {
         return {}
       }
@@ -39,39 +43,33 @@ export default {
   },
   data() {
     return {
+      containerId: null, //容器ID
       //#ifdef H5
-      
+
       //@AttrData
       Attr, //对外开发编辑属性
       //@EndAttrData
-      
+
       active: false, //是否选择当前状态
       isEditx: true, //当前为Editx模式
       edit: false, //是否开启编辑模式
-      containerId: null, //容器ID
       // #endif
     }
   },
   created() {
-    //#ifdef H5
-
-    //设置插件ID
-    if (this.componentAtrr.id) {
-      this.containerId = this.componentAtrr.id;
+    //设置插件cid
+    if (this.cid) {
+      this.containerId = this.cid;
     } else {
       this.containerId = this.$xdUniHelper.randomChar(20);
     }
+    console.log('created',this.containerId, this.cid)
 
+    //#ifdef H5
     //监听用户点击状态显示虚框
     XdBus.addEvent('select', ({containerId}) => {
       this.active = containerId === this.containerId;
     });
-
-    //监听用户点击编辑按钮进行编辑状态显示
-    XdBus.addEvent('useEditx', ({containerId}) => {
-      this.edit = containerId === this.containerId;
-    });
-
     // #endif
   },
   methods: {
@@ -84,21 +82,13 @@ export default {
 
     //#ifdef H5
     /**
-     * @description 点击视图编辑按钮发送Editx属性编辑面板
+     * @description 点击删除操作按钮
      */
-    showEdit() {
-      if (this.edit) return;
-      this.edit = true;
-
-      //往控制面板传递事件
-      XdBus.send('attrViewChange', {
-        Attr: this.$xdUniHelper.cloneDeep(Attr),
-        containerId: this.containerId,
-      }, false, 'xd-iframe');
-
-      //是否对当前控制面板进行编辑操作
-      XdBus.message('useEditx', {
+    delEdit(){
+      XdBus.send('onDelPackage', {
         containerId: this.containerId,
+        componentAtrr: this.componentAtrr,
+        cid: this.cid
       })
     },
     //#endif
@@ -107,14 +97,18 @@ export default {
      * @description 点击选择插件显示边框
      */
     handleSelect() {
-
       //#ifdef H5
       if (this.active) return;
       this.active = true;
+      console.log('handleSelect', Attr);
+      XdBus.send('onSelectPackage', {
+        containerId: this.containerId,
+        Attr: Attr,
+      });
+
       XdBus.message('select', {
         containerId: this.containerId,
       })
-
       //#endif
     },