字段显示隐藏控制示例

/**
* 示例3: 字段显示隐藏控制
* 功能：动态控制表单字段的显示和隐藏
*/
(function () {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
  try {
    // 隐藏指定字段
    kinlink.formApi.hideField('单行文本框_10');
    kinlink.formApi.hideField('日期_2');

    // 显示指定字段
    kinlink.formApi.showField('文字列__1行__0');
    kinlink.formApi.showField('文字列__1行__1');

    // 批量隐藏多个字段
    const fieldsToHide = ['单行文本框_8', '单行文本框_9'];
    fieldsToHide.forEach((fieldCode) => {
      kinlink.formApi.hideField(fieldCode);
    });

    // 创建切换按钮来演示动态控制
    const toggleButton = document.createElement('button');
    toggleButton.textContent = '切换字段显示';
    toggleButton.style.margin = '10px 0';
    toggleButton.style.padding = '8px 16px';
    toggleButton.style.backgroundColor = '#3498db';
    toggleButton.style.color = 'white';
    toggleButton.style.border = 'none';
    toggleButton.style.borderRadius = '4px';
    toggleButton.style.cursor = 'pointer';

    let isHidden = false;
    toggleButton.addEventListener('click', () => {
      if (isHidden) {
        kinlink.formApi.showField('单行文本框_10');
        kinlink.formApi.showField('日期_2');
        toggleButton.textContent = '隐藏字段';
      } else {
        kinlink.formApi.hideField('单行文本框_10');
        kinlink.formApi.hideField('日期_2');
        toggleButton.textContent = '显示字段';
      }
      isHidden = !isHidden;
    });

    // 添加按钮到表单
    const formElement = document.querySelector('.ant-form') || document.body;
    formElement.insertBefore(toggleButton, formElement.firstChild);
  } catch (error) {
    console.error('控制字段显示隐藏失败:', error);
  }
});
})();