应用场景

       在苍穹平台无法提供特殊业务需求的控件的场景下，可以利用自定义控件结合前端静态文件和后端插件开发满足自己业务的组件，如苍穹开发平台暂未提供复制文字至剪切板的控件等，下面结合自身最近开发复制按钮简单介绍下自定义控件的开发总结复盘。

自定义控件封装

前端组件

本地开发组件存放地址

       前端组件存放在开发者C盘平台代码目录下，具体的为：

C:\biz-evn-dev\mservice\webapp\kingdee\mbis，其中mbis为领域标识。

前端组件构成:

       index.js为控件引导脚本，组件中不可或缺，提供了完整的生命周期，包括init、update、destoryed等方法，init是在组件初始化时被调用，常用于文件或数据加载， update是后端向前端自定义控件传值时触发，常用于后端的数据渲染，具体的业务逻辑可以在init或update代码块中封装实现，如本例中加载自定义样式文件copy.css渲染按钮样式。destroyed在组件销毁时调用。启动服务，访问http://localhost:8080/ierp/kingdee/mbis/appid_copy/index.js，如果成功，则显示以下界面：

       css目录存放组件所属的样式文件；

       html目录存放用于渲染组件的页面，如按钮、div容器、input输入框等；如本例需展示漏斗图，html页面中添加<button id="appid_button">复制</button>标签，用于加载复制按钮。

       js目录存放引入的第三方js或自己的业务js，如引入自定义js文件copy.js，用于处理业务逻辑。

源码：

        //加载按钮样式文件
       KDApi.loadFile('./css/copy.css', model, function() {
          KDApi.getTemplateStringByFilePath('./html/copy.html', model, {
             text:'Hello, World!'
          }).then(function(result) {
             console.log(result)
             model.dom.innerHTML = result;
             initEvent(model,props);
          })
       })
    }
 
    var initEvent = function(model,props){
       //增加button按钮对象点击事件
       $("#appid_button").click(function(){
          //appid输入框的值
          var val = $("#appid").find("input")[0].value;
          //原生js拷贝文字
          var copyInput = document.createElement("input");
          copyInput.type = "text";
          copyInput.value = val;
          document.body.appendChild(copyInput);
          copyInput.select();
          // 执行浏览器复制命令
          document.execCommand('Copy');
          document.body.removeChild(copyInput);
          model.invoke('appid_copy_button',"xxx");
       })
    }
 
    KDApi.register('appid_copy', MyComponent);
 })(window.KDApi, jQuery)

       index.js文件中KDApi.loadFile （）用于加载所需的文件，类似于js文件中<script src=”xxxx.js”></script>引入外部js，KDApi.getTemplateStringByFilePath（）获取外部待渲染的容器文件，KDApi.register(‘appid_copy', MyComponent)；将此前端组件注册到页面并与该自定义组件选择的控件方案进行绑定，其中‘appid_copy’必须与控件方案中的方案id一致（详见下文），否则，该控件在预览时找不到指定静态文件

自定义控件创建

       在单据页面选择【自定义控件】，拖至指定位置

       在右侧【控件属性】新增控件方案，并进行绑定，注意：方案id一定要和index.js中KDApi.register('appid_copy', MyComponent)方法中的id要一致。领域标识与c盘平台代码静态文件地址C:\biz-evn-dev\mservice\webapp\kingdee\下的文件夹名一致。创建成功后可预览控件。

与后端交互

       index.js中的添加this.model.invoke(‘appid_copy_button’,value);(注意:此处的‘appid_copy_button’要与自定义控件的标识id严格一致，否则在与后端交互时无法到达指定业务逻辑分支)，在执行至此方法时，系统会触发调用单据绑定的插件的customEvent时间，可向后端传值进行交互处理业务逻辑；

@Override

        public void customEvent(CustomEventArgs e) {}

Index.js中的添加this.model.invoke('appid_copy_button ',value);在执行至此方法时，系统会触发调用单据绑定的插件的customEvent时间，可向后端传值进行交互处理业务逻辑；后端插件方法中进行setData()方法

 CustomControl customcontrol= this.getView().getControl("appid_copy_button ");                       

            customcontrol.setData("test message");  }

       前端index.js中的update事件中获取到后台发送的数据

       update:function(props){

          $(this.model.dom).find('input').val(props.data);

        }

效果展示

       所选值已复制至剪切板，接下来可以粘贴至文档中。