1. @ysf/custom-form

自定义表单

1.1. 一、功能简介

自定义表单，支持纯文本、表单项只读、表单项可编辑可校验功能；

① 表单项数据：根据NEI CustomFieldValueVO 规则；

② 效果设置：可依据AntD进行表单项设置，其中

• 数字输入为含部分自研封装；
• 级联组件可传接口有默认值，token必传；

③ 表单对象：方式1获取组件内部表单对象；方式2通过props传入表单对象；

1.2. 二、使用示例

1.2.1. 安装

$ nenpm install @ysf/custom-form --save

1.2.2. 使用说明(示例)

import CustomForm, { CustomFields } from '@ysf/custom-form';

function App() {
  let customFormRef;
  const handleSubmit = () => {
      console.log(customFormRef);
      customFormRef
        .validateFields()
        .then((fields) => {
          console.info('fields', fields); 
        })
        .catch((err) => {
          console.info('err', err); 
        });
    };
}

  /* 级联项设置 */
  const cascaserFieldsFetch = {
    cascaderURI:
      'https://nei.hz.netease.com/api/apimock-v2/a3776c03f976093ff6ed9042192f59c9/api/customfield/base/category/get/mock?fieldId=',
    token: 'GLKTCMGJULFTCMYIRNHWT6R89Y46HFQR'
  };
  /* 自定义字段 */
  const customFields = [{
      id: 51159,
      name: '时间日期范围',
      type: -1,
      description: null,
      value: '1662566520000;1662576820000',
      valueEditable: 1,
      assignType: null,
      status: 0,
      dataId: null,
      fieldId: 51159,
      sort: null,
      prefill: null,
      hint: null,
      customer: null,
      show: null, // 场景标记
      required: 1, // 值为必填
      ai: 1, // 展示AI图标
      displayType: null,
      system: 0
    }];

  /* 自定义字段-表单 API 设置 */
  const customFormProps = {
    ...cascaserFieldsFetch,
    onCtSelect: (value, fields, customFields) => {
    },
    onCtChange: (value, fields, customFields, ev) => {
    },
    onCtBlur: (value, fields, customFields) => {
    },
    formItemProps: {
      // layout: 'vertical' // 不生效
      labelCol: { span: 4 },
      wrapperCol: { span: 8 }
    },
    formProps: {
      // layout: 'horizontal'//不生效
    },
    customFields
  };
  //方式 1： 独立表格（获取内部表单对象）
  return <CustomForm {...customFormProps} ref={(_form) => (customFormRef = _form)} />;
  //方式 2： 仅表单项（可传入表单对象）
   const [form] = Form.useForm(); //antd
  return <CustomFields {...customFormProps} form={form}>
}

1.3. 三、API

| 字段名 | 是否必须 | 类型 | 默认值 | 说明 | | -------------- | -------- | ----------------------------------- | ------ | ----------------------------------------------------------------------------------------- | | lang | 否 | string | '' | 多语言 | | jsonLang | 否 | object | {} | 多语言-信息【todo】 | | customFields | 是 | fieldsItem[] | [] | 自定义字段集合 | | | cascaderURI | 否 | URI |'/api/customfield/base/category/get' | 级联数据项所需http接口；传参会配合fieldItem.fieldId，需传token URL| | token | 否 | string | | 使用http接口时必传值 token | | formItemProps | 否 | object | -- | 参照antD form | | formProps | 否 | object | -- | 参照antD form | | showAI | 否 | boolean | false | 是否展示AI图标; 【可见示例】 | | readOnly | 否 | boolean | fasle | 表单项-只读 【旧】showOnly disabled; 【可见示例】 | | textOnly | 否 | boolean | false | 表单项-文本方式展示 【旧】 checkFields 是否来自客服工作台; isFromSingleIframe 启用该字段; 【可见示例】 | | verifiable | 否 | boolean | false | 表单校验, 配合fieldItem.required使用【可见示例】 | | debug | 否 | false | 通过控制台查看调试效果 | | onCtChange | 否 | (value, fields, customFields) => {} | ()=>{} | 输入框变更 触发事件；【可见示例】（控制台查看效果需配合debug） | | onCtBlur | 否 | (value, fields, customFields) => {} | ()=>{} | 输入框失焦 触发事件； 【可见示例】（控制台查看效果需配合debug） | | onCtSelect | 否 | (value, fields, customFields) => {} | ()=>{} | 日期、日期区间、下拉菜单、选择框、级联、附件（仅工单）变更 触发事件；【可见示例】（控制台查看效果需配合debug） | | getPopupContainer | 否 | htmlElement | node => node.parentNode |控制浮层组件所在的容器对象| document.body | 日期、日期区间、下拉菜单、选择框、级联等浮层容器定位参照容器 | |valueConvertible | 否 | boolean | false | v0.2.0-beta.0 通过from获取表单项的字段值，格式是否和传入的保持一致，true则一致；false为组件本身的格式| |labelFocus | 否| boolean | false | v0.3.0-beta.0 通过该字段控制是否在点击表单项label时聚焦对应的组件| |fieldTypeProps | 否| { [fieldType]: [fieldTypeProps] } | -- | fieldType对应组件类型 'input' | 'inputNumber'|'inputTextarea' | 'dropdown' | 'select' | 'datePicker' | 'dateRangePicker' | 'cascader' fieldTypeProps为 antd对应的表单项类型的props(除组件API关联项外)|

1.4. 四、开发相关

目录结构

...
src/ 
├─ index.tsx // 入口
demo/ 
├─ app.tsx // 入口
...

开发启动

# http://localhost:8927
npm start

1.5. Links

组件demo地址 antD form NEI CustomFieldValueVO 工单模板应用-接口

antd 升级调整点

1. 原有使用本地数字输入框, 现改为使用 antd 的数字输入框
2. select 目前不支持 showSingleClear 和 showSelectAll 的可配置
3. 多行文本的样式略微变更
4. 时间组件的使用方式, 用户的使用 还有开发需要使用 moment, 外部要调用多语言