cap3自定义控件

1、自定义控件事件注册

目录：移动工程/v5/form/js/components/suiCustom.js

示例：

  /**
 * demo自定义控件-附件，返回html
 * @param (html, inputAttrObj, options, auth)
 * @returns {string}
 */
 
api.buildAttaChmentDom = function(html, inputAttrObj, options, auth){
    //此处是渲染控件的dom
    
    //如果是relation或者relationform，则修改__state
    if (options.fieldInfo.inputType == 'relation' || options.fieldInfo.inputType == 'relationform') {
        options.model.__state = 'modified';
    }
    inputAttrObj['value'] = options.model.value;
    inputAttrObj['readonly'] = 'true';
    inputAttrObj['class'] += ' sui-hide';
    html += '<input ' + cmp.sui.attrBuilder(inputAttrObj) + '/>';
    html += '<div ' + cmp.sui.attrBuilder({class: 'sui-form-ctrl-value-display sui-form-ctrl-attachment', id: options.fieldInfo.name}) + '>';
    //attachment控件 --start
    options.model.attData = options.model.attData || [];
    var items = options.model.attData;

    if (items.length > 0) {
        html += '<div class="attachment-items">';
        items.forEach(function(item){
            item.remoteSource = !item.remoteSource ? (cmp.util.getSeeyonPath() + '/rest/attachment/file/' + item.fileUrl) : item.remoteSource;
            html += '   <div class="attachment-item">';
            html += '       <i class="attachment-icon ' + _FileExtensionFilter(item.extension) +  '"></i>';
            var dom = document.createElement('div');
            dom.classList.add('attachment-content');
            dom.classList.add('allow-click-attachment');
            dom.setAttribute('see-att-data', JSON.stringify(item));
            dom.innerHTML = item.filename;
            html += dom.outerHTML;
            if (auth == 'edit') {
                html += '    <i class="see-icon-v5-form-close-circle-fill"></i>';
            }
            html += '   </div>';
        });
    } else {
        html += '<div class="attachment-items items-empty">';
    }

    html += '</div>';//items-end
    if (auth == 'edit') {
        html += '<div class="attachment-add-item">' + (cmp.i18n('form.attachment.uploadLimit') || 'Please upload file which limited as 50MB') +
            '   <div class="icon-add">' +
            '           <i class="see-icon-v5-form-add"></i>' +
            '  </div>' +
            ' </div>';
    }

    html += '</div>';
    //attachment控件 --end
    html +='</div>';
    return html
}

2、自定义调用

目录：移动工程/v5/form/js/components/sui_utils.js

示例：

case 'customcontrol':
  if(options.model.customType&&options.model.customType!='text'){
      //自定义控件 -demo
      inputAttrObj['customType'] = options.model.customType;
      switch (inputAttrObj['customType']){
          case 'attachment':
              html += SuiCustom.buildAttaChmentDom (html, inputAttrObj, options, auth)
              break;
          default:
              break;
      }
  }else{
      inputAttrObj['value'] = options.model.value;
      inputAttrObj['readonly'] = 'true';
      inputAttrObj['class'] += ' sui-hide';
      html += '<input ' + $.sui.attrBuilder(inputAttrObj) + '/>';
      html += '<div ' + $.sui.attrBuilder({class: 'sui-form-ctrl-value-display sui-form-ctrl-static ' + (!options.model.value ? 'sui-form-placeholder' : ''), id: options.fieldInfo.name}) + '>' + (options.model.display || options.fieldInfo.desc || '').escapeHTML() + '</div>';
  }
  break;

创建人：yinyanting

快速跳转

• cap3自定义控件