jufubao-base 1.0.311-beta1 → 1.0.311-beta101

package/src/components/JfbBaseEntry/cusAttr/content.js

@@ -0,0 +1,77 @@
+'use strict';
+
+import {dataVal} from "@/utils/AttrTools";
+
+export default (data, gValue, gColor, oldData)=>{
+  let entryType = 'default'
+  if(data['entryType'] !== undefined) entryType = data['entryType']
+
+  let rowNum = 1;
+  if(data['rowNum'] !== undefined) rowNum = data['rowNum'];
+
+  return[
+    {
+      ele: 'title',
+      label: '基础',
+      size: 'small',
+      groupKey:'content',
+    },
+    {
+      label: '入口分组',
+      ele: 'xd-site-select-list',
+      valueKey: 'entryType',
+      value: entryType,
+      placeholder: '请选择综合入口分组',
+      multiple: false,
+      groupKey:'content',
+      className: 'input100',
+      labelInline:true,
+      rules: [
+        {required: true, message: '请选择综合入口分组', trigger: ['blur', 'change']}
+      ],
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getEntryGroupOption')({key: Date.now()})
+          .then(res => {
+            debugger
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    {
+      ele: 'title',
+      label: '组件样式',
+      size: 'small',
+      groupKey:'content',
+    },
+
+    {
+      label: "组件样式",
+      ele: "xd-style-image",
+      groupKey: 'content',
+      valueKey: "rowNum",
+      value: rowNum,
+      labelInline:true,
+      className: 'input100',
+      handleCustom(cusRes) {
+        XdBus.getParentApi('getCompStylesOptions')({
+          layout_ids: 'gXd7Z5uu31nJpfZzlFgYz',
+          key: Date.now()
+        })
+          .then(res => {
+            res.list = res.list.map(item => {
+              item.value = Number(item.value)
+              return item;
+            })
+            cusRes.data.cb(res)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+
+  ].filter(i=>i)
+}

package/src/components/JfbBaseEntry/cusAttr/style.js

@@ -0,0 +1,288 @@
+'use strict';
+import {
+  dataVal ,
+  statusShow,
+  statusDataVal,
+  customVal,
+  cusDisabled ,
+  getCustomAttr,
+} from "@/utils/AttrTools";
+
+export default function (data, gValue, gColor, oldData) {
+  const width = 750, height = 1334;
+  return [
+    {
+      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: '',
+      ele: 'xd-margin-padding',
+      groupKey:'style',
+      valueKey: 'margin',
+      value: dataVal({
+        data,
+        key:'margin',
+        dValue:0,
+        gValue,
+        isPM: true,
+      }),
+      hidden: !statusShow({data, key: 'marginStatus', fields:['margin'], gValue}),
+      setting: {
+        type: 'margin',
+      },
+    },
+    {ele: 'group_end'},
+
+    {
+      label: '圆角',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'radiusStatus',
+      value: statusDataVal({data, key:'radiusStatus', fields:['radius'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '无圆角', value: 'N'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-site-select-list',
+      labelInline: true,
+      valueKey: 'radius',
+      value: dataVal({data, key:'radius', dValue:'10', gValue}),
+      hidden: !statusShow({data, key: 'radiusStatus', fields:['radius'], gValue}),
+      placeholder: '请选择图标圆角',
+      multiple: false,
+      className: 'input80',
+      groupKey:'style',
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getOptionsSettingList')({
+          setting_id: 'edtix_style_radius',
+          key: Date.now()
+        })
+          .then(res => {
+            let list = (res.list || [])
+              .filter(item=>{
+                return item.label !== '无'
+              });
+            data.cb(list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    {ele: 'group_end'},
+
+    {
+      ele: 'title',
+      label: '內容区',
+      size: 'small',
+      groupKey:'style',
+    },
+    {
+      label: '内容区背景',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'bgStatus',
+      value: statusDataVal({data, key:'bgStatus', fields:['bgcolor','bgImage'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '背景色',
+      ele: 'xd-color',
+      valueKey: 'bgcolor',
+      labelInline:true,
+      value: dataVal({data, key:'bgcolor', dValue:'rgba(0,0,0,0)', gValue}),
+      hidden: !statusShow({data, key: 'bgStatus', fields:['bgcolor','bgImage'], gValue}),
+      groupKey: 'style',
+      placeholder: '请输入背景颜色',
+      classNmae: 'input80',
+    },
+    {
+      label: '背景图',
+      ele: 'xd-upload',
+      labelInline: true,
+      valueKey: 'bgImage',
+      value: dataVal({
+        data,
+        key: 'bgImage',
+        dValue: {},
+        gValue,
+      }),
+      defaultValue: dataVal({
+        data,
+        key: 'bgImage',
+        dValue: {},
+        gValue,
+      }),
+      slot: true,
+      tipsformet: `<span style="font-size: 12px; color: #999">上传文件格式：@imageType@，不超过@size@MB.，建议宽度为：<span style="color:red">${width}*${height}</span></span>`,
+      type: ['jpg', 'png', 'jpeg'],
+      styleType: 'one',
+      uploadType: 'aliyun',
+      hidden: !statusShow({ data, key: 'bgStatus', fields: ['bgcolor', 'bgImage'], gValue }),
+      oneWidth: 200,
+      oneHeight: 200*height/width,
+      size: 5,
+      action: 'aliyun',
+      groupKey: 'style',
+    },
+    {ele: 'group_end'},
+
+    {
+      label: '内容区边距',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'paddingStatus',
+      value: statusDataVal({data, key:'paddingStatus', fields:['padding'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-margin-padding',
+      groupKey:'style',
+      valueKey: 'padding',
+      value: dataVal({
+        data,
+        key:'padding',
+        dValue:0,
+        gValue,
+        isPM: true,
+      }),
+      hidden: !statusShow({data, key: 'paddingStatus', fields:['padding'], gValue}),
+      setting: {
+        type: 'margin',
+      },
+    },
+    {ele: 'group_end'},
+
+    {
+      label: '内容间距',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'paddingInputStatus',
+      value: statusDataVal({data, key:'paddingInputStatus', fields:['paddingInput'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: "",
+      groupKey: 'style',
+      ele: 'xd-slider',
+      valueKey: "paddingInput",
+      value: dataVal({data, key:'paddingInput', dValue:gValue.isFirst && gValue.isAdd ? 16: 20, gValue}),
+      hidden: !statusShow({data, key: 'paddingInputStatus', fields:['paddingInput'], gValue}),
+      className: "input80",
+      labelInline: true,
+      setting:{
+        min: 0,
+        max: 60,
+        step:1,
+        showStops:false,
+        showInput:false,
+      }
+    },
+    {ele: 'group_end'},
+
+    {
+      label: '内容圆角',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contRadiusStatus',
+      value: statusDataVal({data, key:'contRadiusStatus', fields:['contRadius'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '无圆角', value: 'N'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-site-select-list',
+      labelInline: true,
+      valueKey: 'contRadius',
+      value: dataVal({data, key:'contRadius', dValue:'10', gValue}),
+      hidden: !statusShow({data, key: 'contRadiusStatus', fields:['contRadius'], gValue}),
+      placeholder: '请选择图标圆角',
+      multiple: false,
+      className: 'input80',
+      groupKey:'style',
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getOptionsSettingList')({
+          setting_id: 'edtix_style_radius',
+          key: Date.now()
+        })
+          .then(res => {
+            let list = (res.list || [])
+              .filter(item=>{
+                return item.label !== '无'
+              });
+            data.cb(list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    {ele: 'group_end'},
+
+
+
+    {
+      label: '版本号:',
+      ele: 'el-input',
+      type: 'text',
+      groupKey: 'content',
+      valueKey: 'version',
+      value: 'v2.0',
+      hidden: true,
+    },
+    {
+      label: '过滤引用模版字段:',
+      ele: 'el-input',
+      type: 'text',
+      groupKey: 'content',
+      valueKey: 'refFilterKey',
+      value: '[]',
+      hidden: true,
+    },
+  ].filter(i=>i);
+}
+

package/src/components/JfbBaseImageBlock/Attr.js

@@ -1,14 +1,29 @@
 'use strict';
 
+import {dataVal, statusDataVal, statusShow,getAttrData} from "@/utils/AttrTools";
+
 /**
  * @description 当表单组件中有联动操作时候，使用方法进行返回
  */
 export default {
   style: [],
-  content: (data) => {
-    let width = 750,height = 562.5;
-    if(data.height) height = Number(data.height);
-    if(data.width) width = Number(data.width);
+  content: (data, gValue,gColor,oldData) => {
+    debugger
+    const defWidth = 750,defHeight = 562;
+    let height = defHeight, width = defWidth;
+    if(data.height !== undefined) height = Number(data.height) || defHeight;
+    if(data.width !== undefined) width = Number(data.width) || defWidth;
+
+    let defOldWidthAndHeight = {width:750,height:562};
+    if(data['widthAndHeight'] === undefined && height && width) defOldWidthAndHeight = {height,width};
+
+    //高宽的
+    let widthAndHeight = getAttrData(data,'widthAndHeight', [{width:750,height:562},defOldWidthAndHeight],{
+      sKey: 'widthAndHeightStatus',
+      fields:['widthAndHeight'],
+      isData: true,
+      gValue
+    });
 
     return [
       {
@@ -18,19 +33,110 @@ export default {
         groupKey:'advanced',
       },
       {
-        label: '边距设置:',
+        ele: 'title',
+        label: '基础',
+        size: 'small',
+        groupKey:'content',
+      },
+      {
+        label: '外边距',
+        ele: 'xd-radio',
+        groupKey: 'content',
+        valueKey: 'marginStatus',
+        value: statusDataVal({data, key:'marginStatus', fields:['margin'],gValue}),
+        labelInline:true,
+        list: [
+          {label: '默认', value: 'D'},
+          {label: '自定义', value: 'C'},
+        ]
+      },
+      {ele: 'group_start'},
+      {
+        label: '',
         ele: 'xd-margin-padding',
-        valueKey: 'margin',
         groupKey:'content',
-        value: data.margin || null,
+        valueKey: 'margin',
+        value: dataVal({
+          data,
+          key:'margin',
+          dValue:0,
+          gValue,
+          isPM: true,
+        }),
+        hidden: !statusShow({data, key: 'marginStatus', fields:['margin'], gValue}),
         setting: {
           type: 'margin',
         },
-        placeholder: '请设置边距设置',
-        inline: false,
-        notice: '设置边距充，<span style="color: red">单位：像素（px）</span>。默认值：<span style="color: red">0</span>像素',
-
       },
+      {ele: 'group_end'},
+      {
+        label: '圆角',
+        ele: 'xd-radio',
+        groupKey: 'content',
+        valueKey: 'radiusStatus',
+        value: statusDataVal({data, key:'radiusStatus',cValue: 'N', fields:['radius'],gValue}),
+        labelInline:true,
+        list: [
+          {label: '默认', value: 'D'},
+          {label: '无圆角', value: 'N'},
+          {label: '自定义', value: 'C'},
+        ]
+      },
+      {ele: 'group_start'},
+      {
+        label: '',
+        ele: 'xd-site-select-list',
+        labelInline: true,
+        valueKey: 'radius',
+        value: dataVal({data, key:'radius', dValue:'10', gValue}),
+        hidden: !statusShow({data, key: 'radiusStatus', fields:['radius'], gValue}),
+        placeholder: '请选择圆角',
+        multiple: false,
+        className: 'input80',
+        groupKey:'content',
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({
+            setting_id: 'edtix_style_radius',
+            key: Date.now()
+          })
+            .then(res => {
+              res.list = res.list.filter(item=>{
+                return item.label !== '无';
+              });
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+      },
+      {ele: 'group_end'},
+      {
+        label: '比例/尺寸',
+        ele: 'xd-radio',
+        groupKey: 'content',
+        valueKey: 'widthAndHeightStatus',
+        value: statusDataVal({data, key:'widthAndHeightStatus', fields:['widthAndHeight'],gValue}),
+        labelInline:true,
+        list: [
+          {label: '默认（750x562像素）', value: 'D'},
+          {label: '自定义', value: 'C'},
+        ]
+      },
+      {ele: 'group_start'},
+      {
+        label: '',
+        ele: 'xd-width-and-height',
+        groupKey:'content',
+        valueKey: 'widthAndHeight',
+        value: dataVal({data, key:'widthAndHeight', dValue:gValue.isAdd && gValue.isFirst ?{width:750,height:562}:defOldWidthAndHeight, gValue}),
+        hidden: !statusShow({data, key: 'widthAndHeightStatus', fields:['widthAndHeight'], gValue}),
+        setting: {
+          disabledWidth: true,
+          disabledHeight: false,
+        }
+      },
+      {ele: 'group_end'},
       {
         label: '图片真实宽度:',
         groupKey:'content',
@@ -39,6 +145,7 @@ export default {
         valueKey: 'width',
         value: data.width || '',
         className: 'input60',
+        hidden: true,
         inline:false,
         notice:'图片真实宽度设置，单位像素，默认：<span style="color:red">750</span>px',
       },
@@ -50,35 +157,55 @@ export default {
         valueKey: 'height',
         value: data.height||'',
         className: 'input60',
+        hidden: true,
         inline:false,
         notice:'图片真实高度设置，单位像素，默认：<span style="color:red">562.5</span>px',
       },
       {
-        label: '占位背景图片:',
+        label: '图片路径',
         ele: 'xd-upload',
         valueKey: 'backgroundImage',
-        groupKey:'content',
-        value: data.backgroundImage || {},
-        defaultValue: data.backgroundImage || null,
+        defaultValue: dataVal({data, key:'backgroundImage', dValue: {}, gValue}),
+        value: dataVal({data, key:'backgroundImage', dValue:{}, gValue}),
+        labelInline:true,
         slot: true,
-        oneWidth: 300,
-        oneHeight: 300 * height / width,
-        elinputClassName: 'input40',
-        tipsformet: `上传文件格式：@imageType@，不超过@size@MB，图片尺寸:<span style="color:red"> ${width}*${height}</span>像素`,
+        tipsformet: `<span style="font-size: 12px; color: #999;line-height: 16px">上传文件格式：@imageType@，不超过@size@MB.，建议尺寸为:<span style="color:red">${widthAndHeight.width}*${widthAndHeight.height}</span>像素。</span>`,
         type: ['jpg', 'png', 'jpeg'],
         styleType: 'one',
         uploadType: 'aliyun',
-        size: 1,
-        action: 'action',
-        sort: true,
+        size: 2,
+        action: 'aliyun',
+        oneWidth: 350,
+        oneHeight: 350 * (widthAndHeight.height)/ widthAndHeight.width,
+        groupKey: 'content',
         maxlen: 1,
+        extendClass:['itemBackgroundColor']
+      },
+      {
+        label: '版本号:',
+        ele: 'el-input',
+        type: 'text',
+        groupKey: 'content',
+        valueKey: 'version',
+        value: 'v2.0',
+        hidden: true,
+      },
+      {
+        label: '过滤引用模版字段:',
+        ele: 'el-input',
+        type: 'text',
+        groupKey: 'content',
+        valueKey: 'refFilterKey',
+        value: '[]',
+        hidden: true,
       },
       {
         label: '',
         ele: 'slot',
         slot: 'is_reference',
-        groupKey:'advanced',
+        groupKey:'content',
       },
+
     ].filter(i=>i)
   },
   advanced: [],

package/src/components/JfbBaseImageBlock/JfbBaseImageBlock.vue

@@ -14,8 +14,8 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-image-block__body">
-      <view class="image" :style="[bodyStyle]">
-        <image :src="backgroundImageComp" alt="bgImage"></image>
+      <view class="image" :style="[bodyStyleComp]">
+        <image v-if="backgroundImageComp" :src="backgroundImageComp" alt="bgImage"></image>
       </view>
     </view>
   </view>
@@ -23,9 +23,8 @@
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseImageBlockMixin from "./JfbBaseImageBlockMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
+  import { gCPVal } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   import getServiceUrl from "@/common/getServiceUrl";
@@ -38,14 +37,6 @@
       componentsMixins, extsMixins, JfbBaseImageBlockMixin
     ],
     computed:{
-      marginComp(){
-        let str = `${this.checkValue(this.margin.top, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.right, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.bottom, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.left,0)}rpx`;
-        return str;
-      },
-
       backgroundImageComp(){
         if(this.$xdUniHelper.checkVarType(this.backgroundImage) === 'object') {
           if(this.backgroundImage.url) return getServiceUrl(this.backgroundImage.url,'size8')
@@ -54,26 +45,32 @@
         return '';
       },
 
-      bodyStyle(){
-        let outWidth = uni.getSystemInfoSync().safeArea.width * this.$pxNum;
-        let outMarginRL = this.checkValue(this.margin.right, 0) + this.checkValue(this.margin.left, 0);
+      bodyStyleComp(){
+        let {width,height} = this.widthAndHeight;
+        let outWidth = 750 - this.getPMValue(this.margin,'RL',0);
         let bgColor = 'rgba(0,0,0,0)';
         if(this.backgroundImageComp === '') bgColor = '#f8f8f8'
         return {
-          margin: this.marginComp,
-          width: (outWidth - outMarginRL) +'rpx',
-          height: this.height * (outWidth - outMarginRL)/this.width + 'rpx',
-          backgroundColor: bgColor
+          margin: this.getMarginAndPadding(this.margin,0),
+          width: outWidth +'rpx',
+          height: (Number(height) * (outWidth)/Number(width)) + 'rpx',
+          backgroundColor: bgColor,
+          borderRadius: this.radius + 'rpx',
+          overflow:'hidden'
         }
       }
     },
     data() {
       return {
         closeMask: true,
-        height: 562.5,
-        width: 750,
-        margin:{},
-        backgroundImage:{},
+        margin:{},//边距
+        backgroundImage:{},//图片
+        radius:0,//圆角
+        //高宽
+        widthAndHeight:{
+          width: 750,
+          height: 562
+        },
       }
     },
     watch: {
@@ -87,16 +84,21 @@
     },
     methods: {
       onJfbLoad(options) {
+
       },
+
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.height = Number(getContainerPropsValue(container, 'content.height', 562.5));
-        this.width = Number(getContainerPropsValue(container, 'content.width', 750));
-        this.margin = getContainerPropsValue(container, 'content.margin', {});
-        this.backgroundImage = getContainerPropsValue(container, 'content.backgroundImage', {})
+        let height = Number(gCPVal(container, 'height', 562));
+        let width = Number(gCPVal(container, 'width', 750));
+        this.margin = gCPVal(container, 'margin', 0,{sKey: 'marginStatus', fields: ['margin'], isPMR: true});
+        this.widthAndHeight = gCPVal(container, 'widthAndHeight', [{width: 750, height: 562},{width,height}],{sKey: 'widthAndHeightStatus', fields: ['widthAndHeight']});
+        this.backgroundImage = gCPVal(container, 'backgroundImage', {});
+        this.radius = gCPVal(container, 'radius', [this.gStyleValue.radius,0],{sKey: 'radiusStatus', fields: ['radius']})||0;
+
       },
     }
   }