字段值操作示例

/**
* 示例5: 字段值操作
* 功能：读取、设置、清空表单字段的值
*/
(function () {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
  try {
    // 设置字段值
    kinlink.formApi.setFieldValue('文字列__1行__0', '张');
    kinlink.formApi.setFieldValue('文字列__1行__1', '三');
    kinlink.formApi.setFieldValue('单行文本框_8', 'Zhang');
    kinlink.formApi.setFieldValue('单行文本框_9', 'San');

    // 设置日期字段值
    kinlink.formApi.setFieldValue('日期_1', '2024-01-15');
    kinlink.formApi.setFieldValue('日期_2', '2025-12-31');

    // 批量设置字段值
    const fieldValues = {
      '单行文本框_10': 'kinlink科技有限公司',
      '文字列__1行__2': '+86 138 0013 8000',
      '文字列__1行__3': '[email protected]',
    };
    kinlink.formApi.setFieldValues(fieldValues);

    // 创建操作按钮面板
    const controlPanel = document.createElement('div');
    controlPanel.style.margin = '10px 0';
    controlPanel.style.padding = '15px';
    controlPanel.style.backgroundColor = '#f8f9fa';
    controlPanel.style.border = '1px solid #dee2e6';
    controlPanel.style.borderRadius = '6px';

    // 按钮样式
    const buttonStyle = {
      margin: '5px',
      padding: '8px 12px',
      border: 'none',
      borderRadius: '4px',
      cursor: 'pointer',
      fontSize: '14px',
      fontWeight: '500',
    };

    // 获取值按钮
    const getValueBtn = document.createElement('button');
    getValueBtn.textContent = '获取字段值';
    Object.assign(getValueBtn.style, buttonStyle, {
      backgroundColor: '#3498db',
      color: 'white',
    });
    getValueBtn.addEventListener('click', () => {
      // 获取单个字段值
      const firstName = kinlink.formApi.getFieldValue('文字列__1行__0');
      const lastName = kinlink.formApi.getFieldValue('文字列__1行__1');
      
      // 批量获取字段值
      const values = kinlink.formApi.getFieldValues([
        '文字列__1行__0',
        '文字列__1行__1',
        '单行文本框_10',
        '文字列__1行__2',
      ]);
      
      console.log('单个字段值:', { firstName, lastName });
      console.log('批量字段值:', values);
      
      alert(`姓名: ${firstName} ${lastName}\n公司: ${values['单行文本框_10']}`);
    });

    // 清空值按钮
    const clearValueBtn = document.createElement('button');
    clearValueBtn.textContent = '清空字段值';
    Object.assign(clearValueBtn.style, buttonStyle, {
      backgroundColor: '#e74c3c',
      color: 'white',
    });
    clearValueBtn.addEventListener('click', () => {
      // 清空单个字段
      kinlink.formApi.setFieldValue('单行文本框_10', '');
      
      // 批量清空字段
      const fieldsToClear = {
        '文字列__1行__2': '',
        '文字列__1行__3': '',
        '日期_1': '',
      };
      kinlink.formApi.setFieldValues(fieldsToClear);
      
      console.log('字段值已清空');
    });

    // 重置值按钮
    const resetValueBtn = document.createElement('button');
    resetValueBtn.textContent = '重置默认值';
    Object.assign(resetValueBtn.style, buttonStyle, {
      backgroundColor: '#27ae60',
      color: 'white',
    });
    resetValueBtn.addEventListener('click', () => {
      // 重置为初始值
      kinlink.formApi.setFieldValues(fieldValues);
      kinlink.formApi.setFieldValue('日期_1', '2024-01-15');
      
      console.log('字段值已重置');
    });

    // 添加按钮到控制面板
    controlPanel.appendChild(getValueBtn);
    controlPanel.appendChild(clearValueBtn);
    controlPanel.appendChild(resetValueBtn);

    // 添加标题
    const panelTitle = document.createElement('div');
    panelTitle.textContent = '字段值操作演示';
    panelTitle.style.marginBottom = '10px';
    panelTitle.style.fontWeight = 'bold';
    panelTitle.style.color = '#2c3e50';
    controlPanel.insertBefore(panelTitle, controlPanel.firstChild);

    // 添加控制面板到表单
    const formElement = document.querySelector('.ant-form') || document.body;
    formElement.insertBefore(controlPanel, formElement.firstChild);
  } catch (error) {
    console.error('字段值操作失败:', error);
  }
});
})();