字段启用禁用控制示例

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

    // 启用指定字段（如果之前被禁用）
    kinlink.formApi.enableField('文字列__1行__0');
    kinlink.formApi.enableField('文字列__1行__1');

    // 批量禁用多个字段
    const fieldsToDisable = ['单行文本框_8', '单行文本框_9'];
    fieldsToDisable.forEach((fieldCode) => {
      kinlink.formApi.disableField(fieldCode);
    });

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

    let isDisabled = true;
    toggleButton.addEventListener('click', () => {
      if (isDisabled) {
        kinlink.formApi.enableField('单行文本框_10');
        kinlink.formApi.enableField('日期_2');
        toggleButton.textContent = '禁用字段';
        toggleButton.style.backgroundColor = '#e74c3c';
      } else {
        kinlink.formApi.disableField('单行文本框_10');
        kinlink.formApi.disableField('日期_2');
        toggleButton.textContent = '启用字段';
        toggleButton.style.backgroundColor = '#27ae60';
      }
      isDisabled = !isDisabled;
    });

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