jufubao-base 1.0.287 → 1.0.289-beta1

package/src/components/JfbBaseFooter/JfbBaseFooter.vue

@@ -23,7 +23,7 @@
           style="height:100%"
           v-if="list !== null"
           :height="height"
-          :tabbar="list"
+          :tab-bar="list"
           :view="view"
           :styles="styles"
           :key="footerBarKey"
@@ -44,7 +44,8 @@
   import {getNoUrl} from "@/utils/nourl";
   import {
     getContainerPropsValue,
-    getComponentAttr
+    getComponentAttr,
+    gCPVal
   } from "@/utils/xd.base";
   import getServiceUrl from "@/common/getServiceUrl";
 
@@ -65,6 +66,7 @@
           backgroundSize: '100% 100%',
           backgroundRepeat: 'no-repeat',
           backgroundPosition: 'top center',
+          backgroundColor: this.backgroundColor,
           '--border-color': this.borderColor
         }
 
@@ -74,49 +76,46 @@
         return params
       }
     },
+    watch: {
+      container(value,oloValue) {
+        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
+        if (this.$configProject['isPreview']){
+          this.init(value);
+          this.getNumber();
+          this.footerBarKey = this.$xdUniHelper.randomChar(20);
+        }
+      }
+    },
     data() {
       return {
+        closeMask: true,
         height: 0,
         list: null,
         view: false,
         numObj: {},
         footerBarKey: 'footerBarKey', //刷新
         baseUrl: '',
+        footerTpl:'', //模版样式
+
+        //样式
         backgroundImage: '',
-        borderColor: ''
-      }
-    },
-    watch: {
-      container(value,oloValue) {
-        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
-        if (this.$configProject['isPreview']){
-          this.init(value);
-          this.getNumber();
-          this.footerBarKey = this.$xdUniHelper.randomChar(20);
-        }
+        backgroundColor:'#fff',
+        borderColor: '',
       }
     },
     created() {
       this.view = this.$configProject.isPreview;
 
-      //非预览模式
       //#ifdef H5
       if (!this.$configProject.isPreview){
         this.baseUrl = this.projectAttr['deploy_dir']
       }
       //#endif
 
-      //设置高度
-      if(this.$configProject.isPreview) {
-        this.height = getComponentAttr(this.componentAttr, 'height');
-      }
-      else {
-        this.height = getComponentAttr(this.componentAttr, 'height');
-      }
-
-      this.height =  Number(this.height);
+      this.height = 96//Number(getComponentAttr(this.componentAttr, 'height'));
 
       this.init(this.container);
+
       //监听重试消息数量
       this.$xdRoot.$on('restFooterNumber', this.handle)
     },
@@ -196,29 +195,83 @@
 
       /**
        * @description 监听事件变化
-       * @param value {object} 业务组件对象自己
+       * @param container {object} 业务组件对象自己
        */
-      init(value) {
+      init(container) {
+        this.footerTpl =  gCPVal(container, 'footerTpl', 'noraml');
+
         //设置底部菜单
-        let bar = getContainerPropsValue(value, 'content.footer-setting', []);
-        let imageIcons = getContainerPropsValue(value, 'content.footerSettingImage', []);
-        this.backgroundImage = getContainerPropsValue(value, 'content.backgroundImage', '');
-        this.borderColor = getContainerPropsValue(value, 'content.borderColor', '#eee');
+        let settingKey = 'footer-setting';
+        if(this.footerTpl === 'itemCenterBig') settingKey = 'footer-setting-center-big'
+        let barList = gCPVal(container, settingKey, []);
+        let imageIcons = gCPVal(container, 'footerSettingImage', []);
+
+        this.backgroundImage = gCPVal(container, 'backgroundImage', '',{sKey:'navStatus',fields:['bgColor','backgroundImage','borderColor']});
+        this.backgroundColor = gCPVal(container, 'bgColor', '#fff',{sKey:'navStatus',fields:['bgColor','backgroundImage','borderColor']});
+        this.borderColor = gCPVal(container, 'bgColor', ['#fff','#eee'],{sKey:'navStatus',fields:['bgColor','backgroundImage','borderColor']});
+        let color = gCPVal(container,'color', '');
+        let selectedColor = gCPVal(container,'selectedColor', '');
+        let isShowTitle = gCPVal(container, 'isShowTitle', 'Y');
+        this.iconStyle = gCPVal(container, 'iconStyle', [
+          {
+            cusColor:{
+              iconColor: '#333',
+              color:'#333'
+            },
+            cusActColor:{
+              color: this.mainColor,
+              iconColor: this.mainColor
+            }
+          },
+            {
+            cusColor:{
+              iconColor: color || '#333',
+              color:color || '#333'
+            },
+            cusActColor:{
+              color: selectedColor || this.mainColor,
+              iconColor: selectedColor || this.mainColor
+            }
+          }
+        ],{sKey:'iconStyleStatus',fields:['iconStyle','color','selectedColor']});
+        let borderColor = gCPVal(container, 'centerColor', this.backgroundColor,{sKey:'iconCenterStatus',fields:['centerWidth','centerColor']});
+        let borderWidth = gCPVal(container, 'centerWidth', 12,{sKey:'iconCenterStatus',fields:['centerWidth','centerColor']});
+
+
         this.list = {
-          bgColor: getContainerPropsValue(value, 'content.bgColor', '#fff'),
-          bodyStyle: this.bodyStyle,
-          selectedColor: getContainerPropsValue(value, 'content.selectedColor', this.mainColor),
-          color: getContainerPropsValue(value, 'content.color', '#333'),
-          list: bar.map((item,index)=>{
-            return {
-              name: item.name.slice(0, 6),
-              icon: item.icon,
-              path: item.path.value,
-              size: item.size,
+          tpl:this.footerTpl,
+          hasName: isShowTitle === 'Y',
+          borderColor,
+          borderWidth,
+          bgColor: this.backgroundColor,
+          color:this.iconStyle.cusColor.color,
+          selectedColor:this.iconStyle.cusActColor.color,
+          iconColor:this.iconStyle.cusColor.iconColor,
+          selectedIconColor:this.iconStyle.cusActColor.iconColor,
+          list: barList.map((item,index)=>{
+            let selfImage = (item.image && item.image.url) ? getServiceUrl(item.image.url,'size3'):'';
+            let selfActImage = (item.actImage && item.actImage.url) ? getServiceUrl(item.actImage.url,'size3'):'';
+            let image = (selfImage || selfActImage) || this.getImage(imageIcons,index,'image') || this.getImage(imageIcons,index,'actImage');
+            let actImage = (selfActImage || selfImage) || this.getImage(imageIcons,index,'actImage') || this.getImage(imageIcons,index,'image');
+            let iconType = 'icon';
+            if(!item['iconType'] && (actImage || image)) iconType = 'image';
+            if(['icon','image'].includes(item['iconType'])) iconType = item['iconType'];
+            let router = {
+              path: (item.path && item.path.value) ? item.path.value :'',
               num: this.numObj[index] ? this.numObj[index]: 0 ,
-              image: this.getImage(imageIcons,index,'image') || this.getImage(imageIcons,index,'actImage'),
-              actImage: this.getImage(imageIcons,index,'actImage') || this.getImage(imageIcons,index,'image'),
             }
+            if(isShowTitle === 'Y') router['name'] = item.name ? item.name.slice(0, 5): '';
+            if(iconType === 'icon') {
+              router['icon'] = item.icon;
+              router['image'] = '';
+              router['actImage'] = '';
+            }
+            if(iconType === 'image') {
+              router['icon'] = '';
+              router['image'] = image;
+              router['actImage'] = actImage;
+            }
+            return router
           }),
         };
       },
@@ -234,12 +287,12 @@
       border-color: var(--border-color);
     }
   }
-  
 
-  .jfb-base-footer {
 
+  .jfb-base-footer {
     &__body{
       box-sizing: border-box;
+      overflow: inherit!important;
     }
   }
 </style>

package/src/components/JfbBaseFooter/cusAttr/advanced.js

@@ -0,0 +1,12 @@
+'use strict';
+
+import ICONS from "@/ICONS";
+import tools from "./tools";
+
+export default (data, gValue, gColor, oldData={})=>{
+  const {footerSettingImage, footerSetting} = tools(data);
+  return [
+
+  ]
+}
+

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

@@ -0,0 +1,446 @@
+'use strict';
+
+import tools from "./tools";
+import ICONS from "@/ICONS";
+import {
+  dataVal,
+  customVal,
+  statusDataVal,
+  statusShow
+} from "@/utils/AttrTools";
+
+export default function (data, gValue, gColor, oldData){
+  const {footerSettingImage, footerSetting} = tools(data);
+
+  let footerTpl = dataVal({data, key:'footerTpl', dValue:'normal', gValue});
+
+
+  let iconStyle = {
+    cusColor:{
+      iconColor: '#333',
+      color: '#333'
+    },
+    cusActColor:{
+      iconColor: gColor.mainColor,
+      color:gColor.mainColor
+    }
+  }
+  if(data.color) {
+    iconStyle['cusColor'] = {
+      iconColor: data.color,
+      color: data.color
+    }
+  }
+  if(data.selectedColor) {
+    iconStyle['cusActColor'] = {
+      iconColor: data.selectedColor,
+      color: data.selectedColor
+    }
+  }
+  if(data.iconStyle !== undefined) iconStyle = data.iconStyle;
+
+
+  return [
+    {
+      label: '',
+      ele: 'slot',
+      slot: 'is_reference_title',
+      groupKey: 'content',
+      labelInline:true,
+    },
+    {
+      ele: 'title',
+      label: '基础',
+      size: 'small',
+      groupKey:'content',
+    },
+    {
+      label: "组件样式",
+      ele: "xd-style-image",
+      groupKey: 'content',
+      valueKey: "footerTpl",
+      value: dataVal({data, key:'footerTpl', dValue:'normal', gValue}),
+      labelInline:true,
+      className: 'input100',
+      handleCustom(cusRes) {
+        XdBus.getParentApi('getCompStylesOptions')({
+          layout_ids: 'lynkWnvoDmMLIdOR1AhSt',
+          key: Date.now()
+        })
+          .then(res => {
+            cusRes.data.cb(res)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+
+    footerTpl === 'itemCenterBig'&&{ele: 'group_start'},
+    {
+      label: '中间图标',
+      ele: 'xd-radio',
+      groupKey: 'content',
+      valueKey: 'iconCenterStatus',
+      value: statusDataVal({data, key:'iconCenterStatus', fields:['centerColor','centerWidth'],gValue}),
+      hidden: !(footerTpl === 'itemCenterBig'),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {
+      label: '边框大小',
+      ele: 'el-input',
+      type: 'number',
+      groupKey: 'content',
+      valueKey: 'centerWidth',
+      cusStyle: {paddingLeft: '80px'},
+      labelInline:true,
+      value: dataVal({data, key:'centerWidth', dValue:12, gValue}),
+      hidden:!(footerTpl === 'itemCenterBig') || !statusShow({data, key: 'iconCenterStatus', fields:['centerColor','centerWidth'], gValue}),
+      className: 'input100',
+    },
+    {
+      label: '边框颜色',
+      ele: 'xd-color',
+      valueKey: 'centerColor',
+      groupKey:'content',
+      labelInline:true,
+      cusStyle: {paddingLeft: '80px'},
+      value: dataVal({data, key:'centerColor', dValue:'', gValue}),
+      hidden:!(footerTpl === 'itemCenterBig') || !statusShow({data, key: 'iconCenterStatus', fields:['centerColor','centerWidth'], gValue}),
+      placeholder: '请选择边框颜色',
+      setting: {
+        showAlpha: true
+      },
+      className: 'input100',
+    },
+    footerTpl === 'itemCenterBig'&& {ele: 'group_end'},
+
+    {
+      label: "菜单名称",
+      ele: "xd-radio",
+      valueKey: "isShowTitle",
+      labelInline:true,
+      value: dataVal({data, key:'isShowTitle', dValue:'Y', gValue}),
+      groupKey:'content',
+      list: [
+        {"label": "显示", "value": "Y"},
+        {"label": "隐藏", "value": "N"},
+      ],
+    },
+
+    {
+      label: '图标配色',
+      ele: 'xd-radio',
+      groupKey: 'content',
+      valueKey: 'iconStyleStatus',
+      value: statusDataVal({data, key:'iconStyleStatus', fields:['iconStyle','color','selectedColor'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-text-and-bgc',
+      groupKey:'content',
+      valueKey: 'iconStyle',
+      value: iconStyle,
+      hidden: !statusShow({data, key: 'iconStyleStatus', fields:['iconStyle','color','selectedColor'], gValue}),
+      labelInline:true,
+      setting: {
+        fontSize: false,
+        weight:false,
+        bgColor: false,
+        selected:true,
+        color: false,
+        cusColor: [
+          {label: '图标色', value: 'iconColor'},
+          {label: '文字色', value: 'color'},
+        ],
+        default:{
+          cusColor:{
+            iconColor: '#333',
+            color: '#333'
+          },
+          cusActColor:{
+            color: gColor.mainColor,
+            iconColor: gColor.mainColor
+          }
+        }
+      },
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_font_size'})
+          .then(res => {
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+            data.cb([])
+          });
+      },
+    },
+    {ele: 'group_end'},
+
+    {
+      label: '导航样式',
+      ele: 'xd-radio',
+      groupKey: 'content',
+      valueKey: 'navStatus',
+      value: statusDataVal({data, key:'navStatus', fields:['backgroundImage','bgColor','borderColor'], gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '背景色',
+      ele: 'xd-color',
+      valueKey: 'bgColor',
+      groupKey:'content',
+      value: dataVal({data, key:'bgColor', dValue:'', gValue}),
+      hidden:!statusShow({data, key: 'navStatus', fields:['bgColor','backgroundImage','borderColor'], gValue}),
+      labelInline:true,
+      placeholder: '请选择背景颜色',
+      setting: {
+        showAlpha: true
+      },
+      classNmae: 'input800',
+    },
+    {
+      label: '边框色:',
+      ele: 'xd-color',
+      valueKey: 'borderColor',
+      groupKey:'content',
+      value: dataVal({data, key:'borderColor', dValue:'', gValue}),
+      hidden:!statusShow({data, key: 'navStatus', fields:['bgColor','backgroundImage','borderColor'], gValue}),
+      placeholder: '请选择边框颜色',
+      labelInline:true,
+      setting: {
+        showAlpha: true
+      },
+      classNmae: 'input800',
+    },
+    {
+      label: '背景图',
+      labelInline:true,
+      ele: 'xd-upload',
+      valueKey: 'backgroundImage',
+      groupKey:'content',
+      value: dataVal({data, key:'backgroundImage', dValue:{}, gValue}),
+      hidden:!statusShow({data, key: 'navStatus', fields:['bgColor','backgroundImage','borderColor'], gValue}),
+      defaultValue: dataVal({data, key:'backgroundImage', dValue:null, gValue}),
+      slot: true,
+      oneWidth: 260,
+      oneHeight: 260*110/750,
+      elinputClassName: 'input40',
+      tipsformet: '<span style="font-size: 12px; color: #999">上传文件格式：@imageType@，不超过@size@MB。建议尺寸：<span style="color:red">750*110</span>像素</span>',
+      type: ['jpg', 'png', 'jpeg'],
+      styleType: 'one',
+      uploadType: 'aliyun',
+      size: .5,
+      action: 'action',
+      sort: true,
+      maxlen: 1,
+    },
+    {ele: 'group_end'},
+    //--弃用-----
+    {
+      label: '菜单图片配置:',
+      ele: 'xd-footer-setting',
+      valueKey: 'footerSettingImage',
+      groupKey:'content',
+      value: footerSettingImage,
+      hidden: true,
+      setting: {
+        router: XdBus.getParentApi('getPagesTree'),
+        hideAdd: true,
+        showField: {
+          path: true,
+          icon: false,
+          notice: false,
+          image: true,
+          actImage: true
+        },
+        disabel:{
+          path: true,
+          icon: true,
+          notice: true,
+          image: true,
+          actImage: true
+        },
+      },
+      handleCustom({action,data}){
+        if(action === 'number') {
+          XdBus.getParentApi('getOptionsNoticeNumber')()
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch();
+        }
+      },
+    },
+    {
+      label: '选中',
+      ele: 'xd-color',
+      valueKey: 'selectedColor',
+      groupKey:'content',
+      labelInline:true,
+      hidden: true,
+      setting: {
+        showAlpha: true
+      },
+      value: dataVal({data, key:'selectedColor', dValue:'', gValue}),
+      placeholder: '请选择菜单文字选中颜色',
+      classNmae: 'input100',
+    },
+    {
+      label: '未选中',
+      ele: 'xd-color',
+      valueKey: 'color',
+      groupKey:'content',
+      value: dataVal({data, key:'color', dValue:'', gValue}),
+      hidden: true,
+      labelInline:true,
+      setting: {
+        showAlpha: true
+      },
+      placeholder: '请选择菜单文字颜色',
+      classNmae: 'input100',
+    },
+    //--弃用-----
+    {
+      ele: 'title',
+      label: '菜单内容',
+      size: 'small',
+      groupKey:'content',
+    },
+    {
+      label: '',
+      ele: 'xd-footer-new-setting',
+      valueKey: 'footer-setting',
+      groupKey:'content',
+      value: footerSetting,
+      labelInline:true,
+      hidden: !(dataVal({data, key:'footerTpl', dValue:'normal', gValue}) === 'normal') ,
+      cusStyle: {marginLeft: 0,paddingLeft:0,paddingRight:0},
+      setting: {
+        router: XdBus.getParentApi('getPagesTree'),
+        icons:ICONS,
+        mode: 'new',
+        tplMode: footerTpl,
+        iconColor:{
+          color: data['iconStyleStatus'] === 'D'? '#333': iconStyle.cusColor.iconColor,
+          actColor :  data['iconStyleStatus'] === 'D'?gColor.mainColor: iconStyle.cusActColor.iconColor
+        },
+        showField: {
+          path: true,
+          icon: true,
+          notice: true,
+        }
+      },
+      handleCustom({action,data}){
+        console.log(`handleCustom.${action}`, data);
+        if(action === 'number') {
+          XdBus.getParentApi('getOptionsNoticeNumber')()
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch();
+        }
+      },
+      className: 'input100',
+      rules: [
+        {
+          required: false,
+          validator: (rule, value, callback) => {
+            let setTpl = dataVal({data, key:'footerTpl', dValue:'normal', gValue});
+            if(setTpl === 'normal') {
+              if(value && value.length === 0) callback('请设置菜单');
+              else callback();
+            }
+            else callback()
+          },
+          trigger: ['blur','change']
+        }
+      ],
+    },
+    {
+      label: '',
+      ele: 'xd-footer-new-setting',
+      valueKey: 'footer-setting-center-big',
+      groupKey:'content',
+      value: dataVal({data, key:'footer-setting-center-big', dValue:[], gValue}),
+      labelInline:true,
+      cusStyle: {marginLeft: 0,paddingLeft:0},
+      setting: {
+        router: XdBus.getParentApi('getPagesTree'),
+        icons:ICONS,
+        mode: 'new',
+        tplMode: footerTpl,
+        showField: {
+          path: true,
+          icon: true,
+          notice: true,
+        }
+      },
+      handleCustom({action,data}){
+        console.log(`handleCustom.${action}`, data);
+        if(action === 'number') {
+          XdBus.getParentApi('getOptionsNoticeNumber')()
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch();
+        }
+      },
+      hidden: !(dataVal({data, key:'footerTpl', dValue:'normal', gValue}) === 'itemCenterBig'),
+      rules: [
+        {
+          required: false,
+          validator: (rule, value, callback) => {
+            let setTpl = dataVal({data, key:'footerTpl', dValue:'normal', gValue});
+            if(setTpl === 'itemCenterBig') {
+              if(value && value.length === 0) callback('请设置菜单');
+              else callback();
+            }
+            else callback()
+          },
+          trigger: 'blur'
+        }
+      ],
+      className: 'input100',
+    },
+    {
+      label: '版本号:',
+      ele: 'el-input',
+      type: 'text',
+      groupKey: 'content',
+      valueKey: 'version',
+      value: 'v2.0',
+      hidden: true,
+    },
+    {
+      label: '引用过滤字段设置:',
+      ele: 'el-input',
+      type: 'text',
+      groupKey: 'content',
+      valueKey: 'refFilterContent',
+      value: '[]',
+      hidden: true,
+    },
+    {
+      label: '',
+      ele: 'slot',
+      slot: 'is_reference',
+      groupKey: 'content',
+    },
+  ].filter(i=>i)
+}

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

@@ -0,0 +1,7 @@
+'use strict';
+
+export default function (data, gValue,gColor,oldData){
+  return [
+  ].filter(i=>i)
+}
+

package/src/components/JfbBaseFooter/cusAttr/tools.js

@@ -0,0 +1,17 @@
+'use strict';
+
+export default (data)=>{
+  let footerSettingImage = [];
+  let footerSetting = []
+  if(data['footerSettingImage'] && data['footerSettingImage'].length > 0 ) {
+    footerSettingImage = data['footerSettingImage'];
+  }
+  if(data['footer-setting'] && data['footer-setting'].length > 0){
+    footerSetting = data['footer-setting'];
+    footerSetting.map((item,index)=>{
+      if(!footerSettingImage[index]) footerSettingImage[index] = {};
+      footerSettingImage[index] = Object.assign({},JSON.parse(JSON.stringify(item)),footerSettingImage[index])
+    })
+  }
+  return {footerSettingImage, footerSetting}
+}