R3系统Mixin(混入)策略

背景：为适应不同项目在不同场景下所提出的千变万化的需求，框架提供mixin机制，给使用框架的项目方提供手段在框架的三大标准配置界面可适当接入项目内定制化的功能逻辑;

支持列表界面，单对象界面（上下/左右结构）

使用此功能，你需要掌握Vue混入策略相关知识 Vue混入策略官方文档： 🔗https://cn.vuejs.org/v2/guide/mixins.html

R3.launchApplication(ProjectConfig:Object)

Param	Type	Description	IsRequired	Default Value
customizeMixins	Object	获取所有外部接入的mixins对象

customizeMixins参数详细说明

Param	Type	Description
standardTableListsCustomize	Object	标准列表界面配置项
verticalTableDetailCustomize	Object	上下结构单对象界面配置项
horizontalTableDetailCustomize	Object	左右结构单对象界面配置项
taskList	Object	任务记录模块
setPanel	Object	设置面板模块

eg: 示例场景为设置标准列表界面混入文件

index.js（项目入口文件）

第一步：引入需要混入的文件

    import standardTableListsCustomize from './src/config/minxin/standardTableListsCustomize.js';

    standardTableListsCustomize.js建议写法
        混入文件与框架对应的单对象文件或列表界面文件拥有同等生命周期，你可以拿到当前文件对应的被混入的文件的所有数据，但是由于框架数据给入的时机问题，会导致在处理一些需求时，拿到数据的时机不准确，因此建议在updated生命周期处理相关逻辑，以确保可以拿到准确数据；

        使用mixin机制处理逻辑时，建议项目在开发时将功能点独立为单独的mixin功能文件，以便功能方便维护；
        
         
        


        export default () => ({
          mixins: [standardMixinForBigBackground(), standardMixinForSetButtonsText()]
          data() {
            return {};
          },
          watch: {},
          created() {},
          updated() {},
          mounted() {},
          methods: {},
        });

第二步：你需要在R3框架启动项配置参数

    R3.launchApplication({
          customizeMixins: { // 获取所有外部接入的mixins对象
                  standardTableListsCustomize: standardTableListsCustomize(), // 标准列表界面混入文件
          },
    })

taskList（配置项）

Name	Param	Type	Description
optionsClick	当前点击行数据	Function	操作列的点击方法,返回一个Promise对象

setPanel（配置项）

Name	Param	Type	Description
customizeComponent	-	Vue实例	框架设置面板的自定义组件，通过设置customizeComponent字段可以展示对应的组件

第三步：增加功能

 eg：假设你需要开发一个重置标准列表界面海量图片的功能


        第一步：你需要创建一个js文件，我们暂且将它命名为standardMixinForBigBackground.js
              代码内容如下
                    按照mixin的机制，你将拥有与框架配置界面的同等生命周期
                    import bigBackground from '../../assets/image/login.png';//导入一张图片

                    export default () => ({
                      updated() {
                        if (this.$refs.agTableElement && this.$refs.agTableElement.bigBackground) { // 重置海量图片
                          this.$refs.agTableElement.bigBackground = bigBackground;
                        }
                      },
                    
                    });
        第二步： 将standardMixinForBigBackground.js文件引入standardTableListsCustomize.js中

         standardTableListsCustomize.js中代码内容如下
                import standardMixinForBigBackground from './standardMixinForBigBackground';

                export default () => ({
                  mixins: [standardMixinForBigBackground()],//支持配置通过mixin实现的多个功能点配置
                  data() {
                    return {};
                  },
                  watch: {},
                  created() {},
                  updated() {},
                  mounted() {},
                  methods: {},
                });


        第三步： 运行项目
                你会发现你打开的配置海量功能的表所展示的图片已经替换为你设置的图片

r3-project-template仓库中mixin分支提供了完整的示例，可参考

js类型按钮

（Mixin功能可与元数据配置的自定义类型按钮一起使用）

eg:功能场景：单对象界面操作框架的保存前需执行一段业务逻辑

第一步：原数据配置自定义脚本类型按钮

⚠️：脚本对应的字段为混入文件内定义的方法名

第二步：在单对象对应的混入文件内定义元数据配置的方法

eg:singlePageMixinForSave.js （定制的左右结构混入文件）

import R3 from '@syman/burgeon-r3';//使用R3框架包的方式可随意，可按照资源包的引用方式，也可改为cdn的使用方式，可根据项目具体情况进行选择
⚠️：cdn获取R3的方式为  const R3=window.R3.default;
   资源包获取R3的方式为  import R3 from '@syman/burgeon-r3';


以下为你定义的混入文件内对应的示例代码
export default () => ({
  updated(){
    if(this.$router.currentRoute.params.tableName==='C'){//判断是否为需要操作的表
      const dom = document.getElementById('actionMODIFY');//找到该表对应的保存按钮dom节点
      if(dom){
        dom.style.display='none';
      }
    }

  },
  methods: {
    AAA(){//此方法对应的是元数据配置脚本字段
      const dom = document.getElementById('actionMODIFY');
      dom.click()
    }
  },
});

第三步：将singlePageMixinForSave.js 文件混入到单对象对应的混入文件内

入口文件：配置单对象混入文件

      import verticalTableDetailCustomize from './src/config/minxin/verticalTableDetailCustomize.js';
      import horizontalTableDetailCustomize from './src/config/minxin/horizontalTableDetailCustomize.js';

        R3.launchApplication({
              customizeMixins: { // 获取所有外部接入的mixins对象
                verticalTableDetailCustomize: verticalTableDetailCustomize(), // 上下结构单对象界面混入文件
                horizontalTableDetailCustomize: horizontalTableDetailCustomize(), // 上下结构单对象界面混入文件
              },
        })

verticalTableDetailCustomize.js(上下结构单对象界面混入文件，混入文件内引入singlePageMixinForSave.js文件)

    import singlePageMixinForSave from 'singlePageMixinForSave.js';

    export default () => ({
      mixins: [singlePageMixinForSave()]
    });

    左右结构同上

单对象界面提供的方法

单对象刷新后恢复到刷新前滚动的位置

  
  第一步：框架启动项配置参数（项目入口文件内）

  导入需要混入的文件
      import verticalTableDetailCustomize from './src/config/minxin/verticalTableDetailCustomize.js';导入需要混入的文件
      import horizontalTableDetailCustomize from './src/config/minxin/horizontalTableDetailCustomize.js';

  框架启动项配置customizeMixins参数（R3.launchApplication）：
    customizeMixins: { // 获取所有外部接入的mixins对象
      verticalTableDetailCustomize: verticalTableDetailCustomize(), // 上下结构单对象界面混入文件
      horizontalTableDetailCustomize: horizontalTableDetailCustomize(), // 上下结构单对象界面混入文件
    },


  verticalTableDetailCustomize.js文件代码内容：该文件代表单对象上下结构接入的混入文件
    import verticalMixinForScrollPosition from './verticalMixinForScrollPosition.js';导入verticalMixinForScrollPosition.js文件

    export default () => ({
      mixins: [verticalMixinForScrollPosition()]//将导入的文件verticalMixinForScrollPosition文件混入到该组件中
    });


  horizontalTableDetailCustomize.js.js文件代码内容：该文件代表单对象左右结构接入的混入文件
    import horizontalMixinForScrollPosition from './horizontalMixinForScrollPosition.js';导入horizontalMixinForScrollPosition.js文件

    export default () => ({
      mixins: [horizontalMixinForScrollPosition()]//将导入的文件horizontalMixinForScrollPosition文件混入到该组件中
    });

  第二步：需要到ArkShare上下载资源文件（verticalTableDetailCustomize.js与horizontalMixinForScrollPosition.js）
 
 

设置表单背景水印

🙋‍♂️🌰举个栗子

如果你想在所有单据上（框架配置界面，定制界面），都设置背景水印 你需要做一下几件事：

1.框架启动项内配置混入文件；

2.在对应的混入文件内加入mixinForWatermark.js方法，mixinForWatermark.js在下面提供源码，可直接复制粘贴使用；

🙋‍♂️🌰以下图片内容为在标准列表界面配置水印的示例代码：

📃 mixinForWatermark.js

export default () => ({
  mounted() {
    this.$nextTick(() => {
      const userInfo = JSON.parse(window.localStorage.getItem('userInfo')) || this.userInfo;
      const text = `${userInfo.name} ${userInfo.truename}`; 
      const object = {
        id: this.$router.currentRoute.params.tableName,
        textContent: [text], // 每行显示的文本内容
        watermark_intervalWidth: 100, //  间隔宽度
        watermark_intervalheight: 100, // 间隔高度
        style: {
          webkitTransform: 'rotate(-25deg)',
          MozTransform: 'rotate(-25deg)',
          msTransform: 'rotate(-25deg)',
          OTransform: 'rotate(-25deg)',
          transform: 'rotate(-25deg)',
          visibility: '',
          position: 'absolute',
          overflow: 'hidden',
          zIndex: '9999',
          pointerEvents: 'none', // pointer-events:none  让水印不阻止交互事件
          opacity: 0.2,
          fontSize: '14px',
          fontFamily: '微软雅黑',
          color: '#575757',
          textAlign: 'left',
          width: '140px',
          height: '15px',
          display: 'block',
          // left: '10px',//不支持设置定位，
          // top: '10px',
        }
      };
      this.$createWatermark(object);
    });
  }
 
});

具体代码可参照模版项目mixin分支，上面提供完整代码示例