jufubao-base 1.0.237-beta18 → 1.0.237-beta3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.237-beta18",
+  "version": "1.0.237-beta3",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseBlock/Attr.js

@@ -1,43 +1,488 @@
 'use strict';
 
+import {
+  dataVal ,
+  statusShow,
+  statusDataVal,
+  customVal,
+  cusDisabled ,
+  getCustomAttr,
+  oldTonNewBorAndSha,
+  compatibleRelationBorShadow
+} from "@/utils/AttrTools";
+
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
  */
 export default {
   style: [],
-  content: [
-    {
-      label: '',
-      ele: 'slot',
-      slot: 'is_reference_title',
-      groupKey:'advanced',
-    },
-    {
-      label: '背景颜色:',
-      ele: 'xd-color',
-      valueKey: 'bgcolor',
-      value: '',
-      groupKey:'style',
-      placeholder: '请输入占位框背景颜色',
-      classNmae: 'input80',
-    },
-    {
-      label: '高度:',
-      ele: 'el-input',
-      type: 'number',
-      valueKey: 'height',
-      groupKey:'style',
-      value: null,
-      classNmae: 'input60',
-      inline: false,
-      notice:'占位框高度，单位像素，默认：<span style="color:red">20</span>像素'
-    },
-    {
-      label: '',
-      ele: 'slot',
-      slot: 'is_reference',
-      groupKey:'advanced',
-    },
-  ],
+  content:(data, gValue={} ,gColor ,oldData={})=>{
+    let isRefresh=false;
+    if(oldData.cusMargin && oldData.cusMargin === 'none' && oldData.cusMargin !== data.cusMargin) {
+      isRefresh = true;
+    }
+
+    let checkFieldsBg = { bgColorStatus:['bgColor'], bgHeightStatus:['bgHeight'], cusPaddingStatus:['cusPadding'],wColorStatus:['bgWColor','bgWidth'],titleBorder:['titleBorder','bs'] }
+    let isDisabled = cusDisabled({
+      data,
+      key: 'testStyle',
+      fields: checkFieldsBg,
+      gValue
+    });
+
+    let defTitleBorder = compatibleRelationBorShadow( data, 'titleBorder', {disabled: isDisabled, old:[]},gValue);
+
+    return [
+      {
+        label: '',
+        ele: 'slot',
+        slot: 'is_reference_title',
+        groupKey:'advanced',
+      },
+      // {
+      //   ele: 'title',
+      //   label: '边距布局',
+      //   size: 'small',
+      //   groupKey:'content',
+      // },
+      // {
+      //   label: "边距布局",
+      //   ele: "xd-style-image",
+      //   groupKey: 'content',
+      //   valueKey: "cusMargin",
+      //   value: customVal({
+      //     data,
+      //     key: 'cusMargin',
+      //     fields: { 'marginContStatus':['marginCont']},
+      //     gValue
+      //   }),
+      //   labelInline:true,
+      //   className: 'input100',
+      //   handleCustom(cusRes) {
+      //     XdBus.getParentApi('getCompStylesOptions')({
+      //       //多条记录使用逗号隔开
+      //       layout_ids: 'NVfJK3O9p4DEww5TH7bUk',
+      //       key: Date.now()
+      //     })
+      //       ////Array[String]|String 单条记录使用res，多条记录使用res.items[layout_id]
+      //       .then(res => {
+      //         cusRes.data.cb(res)
+      //       })
+      //       .catch(error => {
+      //         console.error(error);
+      //       });
+      //   },
+      // },
+      // {
+      //   label: '内边距:',
+      //   ele: 'xd-radio',
+      //   groupKey: 'content',
+      //   valueKey: 'marginContStatus',
+      //   isRefresh : isRefresh,
+      //   value: statusDataVal({
+      //     data,
+      //     key:'marginContStatus',
+      //     fields:['marginCont'],
+      //     gValue,
+      //     cusField:['cusMargin']
+      //   }),
+      //   labelInline:true,
+      //   disabled: cusDisabled({
+      //     data,
+      //     key: 'cusMargin',
+      //     fields: {'marginStatus':['margin']},
+      //     gValue
+      //   }),
+      //   list: [
+      //     {label: '默认', value: 'D'},
+      //     {label: '自定义', value: 'C'},
+      //   ]
+      // },
+      {ele: 'group_start'},
+      {
+        label: '',
+        groupKey: 'content',
+        ele: 'xd-margin-padding',
+        valueKey: 'marginCont',
+        value: dataVal({
+          data,
+          key:'marginCont',
+          dValue:[getCustomAttr(data['cusMargin'],'marginCont'), 20],
+          gValue,
+          isPM: true
+        }),
+        disabled: cusDisabled({
+          data,
+          key: 'cusMargin',
+          fields: { 'marginContStatus':['marginCont']},
+          gValue
+        }),
+        setting: {
+          type: 'margin',
+        },
+        placeholder: '请填充设置',
+        hidden: !statusShow({data, key: 'marginContStatus', fields:['marginCont'], gValue}),
+        inline: false,
+      },
+      {ele: 'group_end'},
+
+      {
+        ele: 'title',
+        label: '内容区域',
+        size: 'small',
+        groupKey:'content',
+      },
+      {
+        label: "样式布局",
+        ele: "xd-style-image",
+        groupKey: 'content',
+        valueKey: "testStyle",
+        value: customVal({
+          data,
+          key: 'testStyle',
+          fields: checkFieldsBg,
+          gValue,
+          sValue: '{\"border\":\"1px solid red\",\"bgColor\":\"#f90\",\"height\": 10,\"padding\":{\"top\":20,\"left\":20,\"right\":20,\"bottom\":20},\"shadow\":\"0 4rpx 10rpx rgba(0,0,0,0.5)\",\"width\":0,\"color\":\"red\"}',
+        }),
+        labelInline:true,
+        className: 'input100',
+        handleCustom(cusRes) {
+          XdBus.getParentApi('getCompStylesOptions')({
+            //多条记录使用逗号隔开
+            layout_ids: 'k4BAuvfbAFI5dpBLmVJ27',
+            key: Date.now()
+          })
+            ////Array[String]|String 单条记录使用res，多条记录使用res.items[layout_id]
+            .then(res => {
+              cusRes.data.cb(res)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+      },
+
+      {
+        label: '背景颜色:',
+        ele: 'xd-radio',
+        groupKey: 'content',
+        valueKey: 'bgColorStatus',
+        value: statusDataVal({
+          data,
+          key:'bgColorStatus',
+          fields:['bgColor'],
+          gValue,
+          cusField:['testStyle']
+        }),
+        disabled: isDisabled,
+        isRefresh:true,
+        labelInline:true,
+        list: [
+          {label: '默认', value: 'D'},
+          {label: '自定义', value: 'C'},
+        ]
+      },
+      {ele: 'group_start'},
+      {
+        label: '',
+        ele: 'xd-color',
+        valueKey: 'bgColor',
+        value: dataVal({
+          data,
+          key:'bgColor',
+          dValue:[getCustomAttr(data['testStyle'],'bgColor'), '#f90'],
+          gValue,
+        }),
+        groupKey:'content',
+        placeholder: '请输入占位框背景颜色',
+        disabled:isDisabled,
+        hidden: !statusShow({data, key: 'bgColorStatus', fields:['bgColor'], gValue}),
+        classNmae: 'input80',
+        setting:{
+          showAlpha: true
+        }
+      },
+      {ele: 'group_end'},
+      {
+        label: '高度:',
+        ele: 'xd-radio',
+        groupKey: 'content',
+        valueKey: 'bgHeightStatus',
+        value: statusDataVal({
+          data,
+          key:'bgHeightStatus',
+          fields:['bgHeight'],
+          gValue,
+          cusField:['testStyle']
+        }),
+        disabled: isDisabled,
+        isRefresh:true,
+        labelInline:true,
+        list: [
+          {label: '默认', value: 'D'},
+          {label: '自定义', value: 'C'},
+        ]
+      },
+      {ele: 'group_start'},
+      {
+        label: '',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'bgHeight',
+        groupKey:'content',
+        value: dataVal({
+          data,
+          key:'bgHeight',
+          dValue:[getCustomAttr(data['testStyle'],'height'), 0],
+          gValue,
+        }),
+        disabled:isDisabled,
+        classNmae: 'input60',
+        inline: false,
+        hidden:!statusShow({data, key: 'bgHeightStatus', fields:['bgHeight'], gValue}),
+      },
+      {ele: 'group_end'},
+      {
+        label: '外边距:',
+        ele: 'xd-radio',
+        groupKey: 'content',
+        valueKey: 'cusPaddingStatus',
+        value: statusDataVal({
+          data,
+          key:'cusPaddingStatus',
+          fields:['cusPadding'],
+          gValue,
+          cusField:['testStyle']
+        }),
+        disabled: isDisabled,
+        isRefresh:true,
+        labelInline:true,
+        list: [
+          {label: '默认', value: 'D'},
+          {label: '自定义', value: 'C'},
+        ]
+      },
+      {ele: 'group_start'},
+      {
+        label: '',
+        groupKey: 'content',
+        ele: 'xd-margin-padding',
+        valueKey: 'cusPadding',
+        value: dataVal({
+          data,
+          key:'cusPadding',
+          dValue:[getCustomAttr(data['cusPaddingStatus'],'padding'), 20],
+          gValue,
+          isPM: true
+        }),
+        disabled: isDisabled,
+        setting: {
+          type: 'margin',
+        },
+        placeholder: '请填充设置',
+        hidden: !statusShow({data, key: 'cusPaddingStatus', fields:['cusPadding'], gValue}),
+        inline: false,
+      },
+      {ele: 'group_end'},
+
+      {
+        label: '宽度颜色:',
+        ele: 'xd-radio',
+        groupKey: 'content',
+        valueKey: 'wColorStatus',
+        value: statusDataVal({
+          data,
+          key:'wColorStatus',
+          fields:['bgWidth'],
+          gValue,
+          cusField:['testStyle']
+        }),
+        disabled: isDisabled,
+        isRefresh:true,
+        labelInline:true,
+        list: [
+          {label: '默认', value: 'D'},
+          {label: '自定义', value: 'C'},
+        ]
+      },
+      {ele: 'group_start'},
+      {
+        label: '',
+        ele: 'xd-color',
+        valueKey: 'bgWColor',
+        value: dataVal({
+          data,
+          key:'bgWColor',
+          dValue:[getCustomAttr(data['testStyle'],'color'), '#09f'],
+          gValue,
+        }),
+        groupKey:'content',
+        placeholder: '请输入占位框背景颜色',
+        disabled:isDisabled,
+        hidden: !statusShow({data, key: 'wColorStatus', fields:['bgWColor','bgWidth'], gValue}),
+        classNmae: 'input80',
+        setting:{
+          showAlpha: true
+        }
+      },
+      {
+        label: '',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'bgWidth',
+        groupKey:'content',
+        value: dataVal({
+          data,
+          key:'bgWidth',
+          dValue:[getCustomAttr(data['testStyle'],'width'), 0],
+          gValue,
+        }),
+        disabled:cusDisabled({
+          data,
+          key: 'testStyle',
+          fields:checkFieldsBg,
+          gValue
+        }),
+        classNmae: 'input60',
+        inline: false,
+        hidden:!statusShow({data, key: 'wColorStatus', fields:['bgWColor','bgWidth'], gValue}),
+      },
+      {ele: 'group_end'},
+
+      {
+        label: '导航描边',
+        ele: 'xd-border',
+        groupKey:'content',
+        valueKey: 'titleBorder',
+        value: defTitleBorder,
+        labelInline: true,
+        className: 'input100',
+        disabled:isDisabled,
+        isRefresh:isDisabled,
+        setting: {
+          selected: defTitleBorder.type,//设置默认选中项
+          isRadio: true,//启用editx默认
+          isDef: true, //启动默认选项
+          //==设置默认值==
+          color: '#e5e5e5',
+          width: '2',
+          style: 'solid'
+          //==设置默认值==
+        },
+      },
+
+
+
+
+      // {
+      //   ele: 'title',
+      //   label: '常规',
+      //   size: 'small',
+      //   groupKey:'style',
+      // },
+      // {
+      //   label: '外边距:',
+      //   ele: 'xd-radio',
+      //   groupKey: 'style',
+      //   valueKey: 'marginStatus',
+      //   value: statusDataVal({data, key:'marginStatus', fields:['margin'],gValue}),
+      //   labelInline:true,
+      //   list: [
+      //     {label: '默认', value: 'D'},
+      //     {label: '自定义', value: 'C'},
+      //   ]
+      // },
+      // {ele: 'group_start'},
+      // {
+      //   label: '',
+      //   groupKey: 'style',
+      //   ele: 'xd-margin-padding',
+      //   valueKey: 'margin',
+      //   value:  dataVal({
+      //     data,
+      //     key:'margin',
+      //     dValue:[20],
+      //     gValue,
+      //     isPM: true,
+      //     isCPM: true,
+      //   }
+      //   ),
+      //   setting: {
+      //     type: 'margin',
+      //   },
+      //   placeholder: '请填充设置',
+      //   hidden: !statusShow({data, key: 'marginStatus', fields:['margin'], gValue}),
+      //   inline: false,
+      // },
+      // {ele: 'group_end'},
+
+      {
+        ele: 'title',
+        label: '内容区域',
+        size: 'small',
+        groupKey:'style',
+      },
+
+
+
+
+      {
+        label: '容器设置:',
+        ele: 'xd-radio',
+        groupKey: 'style',
+        valueKey: 'contStatus',
+        value: statusDataVal({data, key: 'contStatus', fields:['bgcolor','height'], gValue}),
+        labelInline:true,
+        list: [
+          {label: '默认', value: 'D'},
+          {label: '自定义', value: 'C'},
+        ]
+      },
+      {ele: 'group_start'},
+      {
+        label: '',
+        ele: 'xd-color',
+        valueKey: 'bgcolor',
+        value: dataVal({data, key:'bgcolor', dValue:'', gValue}),
+        groupKey:'style',
+        placeholder: '请输入占位框背景颜色',
+        hidden: !statusShow({data, key: 'contStatus', fields:['bgcolor','height'], gValue}),
+        classNmae: 'input80',
+        setting:{
+
+          showAlpha: true
+        }
+      },
+      {
+        label: '',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'height',
+        groupKey:'style',
+        value: dataVal({data, key:'height', dValue:20 , gValue}),
+        classNmae: 'input60',
+        inline: false,
+        hidden:!statusShow({data, key: 'contStatus', fields:['bgcolor','height'], gValue}),
+      },
+      {ele: 'group_end'},
+
+      {
+        label: '',
+        ele: 'slot',
+        slot: 'is_reference',
+        groupKey:'advanced',
+      },
+      {
+        label: '版本号:',
+        ele: 'el-input',
+        type: 'text',
+        groupKey: 'style',
+        valueKey: 'version',
+        value: 'v2.0',
+        hidden: true,
+      },
+    ].filter(i=>i);
+
+  } ,
   advanced: [],
 };

package/src/components/JfbBaseBlock/JfbBaseBlock.vue

@@ -17,7 +17,10 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-block__body">
-      <view :style="{height: height + 'rpx', background: bgcolor}"></view>
+      <view :style="{minHeight: height + 'rpx', background: bgColor, margin:compMargin}">
+        <view style="height: 1rpx"></view>
+        <view :style="{margin:compPadding, background:'#fff', height: '40rpx'}"></view>
+      </view>
     </view>
   </view>
 </template>
@@ -28,7 +31,8 @@
   import JfbBaseBlockMixin from "./JfbBaseBlockMixin";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
-  import {getContainerPropsValue} from "@/utils/xd.base";
+  import {getContainerPropsValue,gCPVal} from "@/utils/xd.base";
+  import {mapActions} from "vuex";
 
   export default {
     name: "JfbBaseBlock",
@@ -38,8 +42,18 @@
     mixins: [componentsMixins,extsMixins,JfbBaseBlockMixin],
     data() {
       return {
-        height: 10,
-        bgcolor: '#fff'
+        height: 100,
+        bgColor: '',
+        margin: {},
+        padding: {},
+      }
+    },
+    computed: {
+      compMargin(){
+        return this.getMarginAndPadding(this.margin,0)
+      },
+      compPadding(){
+        return this.getMarginAndPadding(this.padding,0)
       }
     },
     watch: {
@@ -52,11 +66,40 @@
       this.init(this.container);
     },
     methods: {
-      init(value) {
-        let bgcolor = getContainerPropsValue(value, 'content.bgcolor', 'rgba(0,0,0,0)');
-        let height = getContainerPropsValue(value, 'content.height', 20);
-        if (bgcolor) this.bgcolor = bgcolor;
-        if (height) this.height = height;
+      ...mapActions(['getCustomList']),
+      async init(value) {
+        //常规边距与填充属性（单属性组可不不设置fields字段）
+        this.margin = gCPVal(value, 'margin', [20], {sKey: 'marginStatus',isPMR:true, isCPM: true, gDefVal: this.gStyleValue.margin});
+
+        //获取面板样式与自定义样式属性关联场景(单个属性关联)
+        let options = await this.getCustomList({layout_ids:'NVfJK3O9p4DEww5TH7bUk'});
+        this.padding = gCPVal(value, 'marginCont', [20], {sKey: 'marginContStatus',isPMR:true, cusFields: ['cusMargin','margin',options]});
+
+
+        //获取面板样式与自定义样式属性关联场景(多个属性属性关联)
+        let testStyleoptions = await this.getCustomList({layout_ids:'k4BAuvfbAFI5dpBLmVJ27'});
+        let sValue = '{\"border\":\"1px solid red\",\"bgColor\":\"#f90\",\"height\": 10,\"padding\":{\"top\":20,\"left\":20,\"right\":20,\"bottom\":20},\"shadow\":\"0 4rpx 10rpx rgba(0,0,0,0.5)\",\"width\":0,\"color\":\"red\"}';
+        let bgColor = gCPVal(value, 'bgColor', ['#f90'], {sKey: 'bgColorStatus', cusFields: ['testStyle','bgColor',testStyleoptions,sValue]});
+        let bgHeight = gCPVal(value, 'bgHeight', [0], {sKey: 'bgHeightStatus', cusFields: ['testStyle','height',testStyleoptions,sValue]});
+        let bgPadding = gCPVal(value, 'cusPadding', [20], {sKey: 'cusPaddingStatus',isPMR:true, cusFields: ['testStyle','padding',testStyleoptions,sValue]});
+        let bgWColor = gCPVal(value, 'bgWColor', ['#09f'], {sKey: 'wColorStatus', fields:['bgWColor','bgWidth'], cusFields: ['testStyle','color',testStyleoptions,sValue]});
+        let bgWidth = gCPVal(value, 'bgWidth', [0], {sKey: 'wColorStatus', fields:['bgWColor','bgWidth'], cusFields: ['testStyle','width',testStyleoptions,sValue]});
+        debugger
+
+
+
+        //普通属性
+        this.bgColor = gCPVal(value,'bgcolor', '', {sKey:'contStatus',fields:['bgcolor','height']});
+        this.height = gCPVal(value,'height', 20, {sKey:'contStatus',fields:['bgcolor','height']});
+
+
+
+
+        // let bgcolor = getContainerPropsValue(value, 'content.bgcolor', '');
+        // let height = getContainerPropsValue(value, 'content.height', 20);
+        //
+        // if (bgcolor) this.bgcolor = bgcolor;
+        // if (height) this.height = height;
       },
     }
   }

package/src/components/JfbBaseFastLink/Attr.js

@@ -24,8 +24,7 @@ export default {
         multiple: false,
         className: 'input80',
         list: [
-          {label: '垂直', value: 'noraml'},
-          {label: '水平', value: 'horizontal'},
+          {label: '平铺', value: 'noraml'},
           {label: '悬浮', value: 'fixed'},
         ],
         inline: false,
@@ -54,16 +53,6 @@ export default {
         placeholder: '请输入自定义名称',
         className: 'input80',
       },
-      {
-        label: '自定义服务名称:',
-        ele: 'el-input',
-        type: 'text',
-        groupKey:'content',
-        valueKey: 'customName',
-        value: data['customName']? data['customName']: '我的服务',
-        placeholder: '请输入自定义服务名称',
-        className: 'input80',
-      },
       {
         label: '背景颜色:',
         ele: 'xd-color',