neo-cmp-cli 1.2.25 → 1.3.1

package/src/template/neo-custom-cmp-template/src/components/object-form/index.tsx

@@ -0,0 +1,612 @@
+/**
+ * @file Object Form 对象表单组件
+ * @description 基于 Neo 平台的 XObject 实体对象数据表单组件，用于新增数据
+ */
+import * as React from 'react';
+import {
+  Form,
+  Input,
+  Select,
+  Button,
+  message,
+  Card,
+  DatePicker,
+  InputNumber,
+  Space,
+  Spin,
+  Empty,
+  Row,
+  Col,
+} from 'antd';
+import {
+  SaveOutlined,
+  ReloadOutlined,
+  CheckCircleOutlined,
+} from '@ant-design/icons';
+import moment from 'moment';
+// @ts-ignore
+import { xObject } from 'neo-open-api'; // Neo Open API
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+import './style.scss';
+
+const { Option } = Select;
+
+/**
+ * 组件属性接口
+ */
+interface ObjectFormProps {
+  /** XObject 实体对象的 API Key，用于标识要操作的数据对象 */
+  xObjectDataApi: {
+    xObjectApiKey: string;
+    fields?: string[];
+    fieldDescList?: any[];
+  };
+  /** Neo 平台传递的数据，包含系统信息等 */
+  data?: any;
+  /** 表单标题 */
+  formTitle?: string;
+  /** 是否显示重置按钮 */
+  showResetButton?: boolean;
+  /** 表单列数（1列或2列） */
+  columnCount?: 1 | 2;
+  /** 提交成功后的回调 */
+  onSuccess?: (data: any) => void;
+  /** 是否为自定义实体对象 */
+  custom?: boolean;
+}
+
+/**
+ * 字段信息接口
+ */
+interface FieldInfo {
+  /** 字段名称 */
+  name: string;
+  /** 字段显示标签 */
+  label: string;
+  /** 字段 API Key */
+  apiKey: string;
+  /** 字段类型 */
+  type: string;
+  /** 字段项类型 */
+  itemType: string;
+  /** 复选框选项列表 */
+  checkitem: any[];
+  /** 下拉选择选项列表 */
+  selectitem?: any[];
+  /** 是否必填 */
+  required: boolean;
+}
+
+/**
+ * 组件状态接口
+ */
+interface ObjectFormState {
+  /** 表单标题 */
+  title?: string;
+  /** 字段列表 */
+  fieldList: FieldInfo[];
+  /** 加载状态 */
+  loading: boolean;
+  /** 提交中状态 */
+  submitting: boolean;
+  /** 错误信息 */
+  error: string | null;
+  /** 表单实例 */
+  form: any;
+  /** 业务类型列表 */
+  entityTypeList: any[];
+  /** 提交成功状态 */
+  submitSuccess: boolean;
+}
+
+/**
+ * Object Form 对象表单组件
+ * 支持对 Neo 平台的 XObject 实体对象进行新增操作
+ */
+export default class ObjectForm extends React.PureComponent<
+  ObjectFormProps,
+  ObjectFormState
+> {
+  constructor(props: ObjectFormProps) {
+    super(props);
+    const { xObjectDataApi } = props;
+    const { xObjectApiKey } = xObjectDataApi || {};
+
+    // 初始化组件状态
+    this.state = {
+      fieldList: [],
+      loading: false,
+      submitting: false,
+      error: null,
+      form: null,
+      entityTypeList: [],
+      submitSuccess: false,
+    };
+
+    if (xObjectApiKey) {
+      // 初始化字段列表和业务类型列表
+      this.getEntityTypeList(xObjectApiKey);
+      this.loadFieldList();
+    }
+
+    // 绑定方法上下文
+    this.loadFieldList = this.loadFieldList.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+  }
+
+  /**
+   * 组件更新后执行
+   * 当 xObjectApiKey 发生变化时重新加载字段列表
+   */
+  async componentDidUpdate(prevProps: ObjectFormProps) {
+    const { xObjectApiKey, fields } = this.props.xObjectDataApi || {};
+    const { xObjectApiKey: prevXObjectApiKey, fields: prevFields } =
+      prevProps.xObjectDataApi || {};
+
+    if (xObjectApiKey !== prevXObjectApiKey || !isEqual(fields, prevFields)) {
+      if (xObjectApiKey) {
+        await this.loadFieldList();
+        await this.getEntityTypeList(xObjectApiKey);
+      } else {
+        this.setState({
+          fieldList: [],
+        });
+      }
+    }
+  }
+
+  /**
+   * 获取业务类型列表
+   * 用于下拉选择框的选项数据
+   */
+  async getEntityTypeList(xObjectApiKey?: string) {
+    const { xObjectDataApi } = this.props;
+    const curXObjectApiKey = xObjectApiKey || xObjectDataApi?.xObjectApiKey;
+    try {
+      const result = await xObject.getEntityTypeList(curXObjectApiKey);
+      if (result && result.status) {
+        const records = result.data || [];
+        this.setState({
+          entityTypeList: records,
+        });
+      }
+    } catch (error) {
+      console.error('获取业务类型列表失败:', error);
+    }
+  }
+
+  /**
+   * 加载字段列表
+   * 从 Neo 平台获取 XObject 的字段描述信息
+   */
+  async loadFieldList() {
+    const { xObjectDataApi } = this.props || {};
+
+    this.setState({ loading: true });
+
+    try {
+      // 方式一：直接从 props.xObjectDataApi 中获取字段描述
+      if (xObjectDataApi && xObjectDataApi.fieldDescList) {
+        this.setState({
+          fieldList: xObjectDataApi.fieldDescList,
+          loading: false,
+        });
+      } else {
+        // 方式二：自行通过 OpenAPI SDK 获取字段描述
+        if (!xObjectDataApi.xObjectApiKey) {
+          this.setState({ loading: false });
+          return;
+        }
+        const resultData = await xObject.getDesc(xObjectDataApi.xObjectApiKey);
+        if (resultData && resultData.status) {
+          const result = resultData.data || {};
+          const fieldList = result.fields || [];
+          this.setState({
+            fieldList,
+            title: result.label,
+            loading: false,
+          });
+        } else {
+          this.setState({
+            error: '获取字段列表失败',
+            loading: false,
+          });
+        }
+      }
+    } catch (error) {
+      console.error('获取字段列表失败:', error);
+      message.error('获取字段列表失败');
+      this.setState({
+        error: '获取字段列表失败',
+        loading: false,
+      });
+    }
+  }
+
+  /**
+   * 处理表单提交
+   * 执行新增操作
+   */
+  handleSubmit() {
+    this.state.form?.validateFields().then(async (values: any) => {
+      const { xObjectApiKey } = this.props.xObjectDataApi || {};
+      const { fieldList } = this.state;
+
+      if (!xObjectApiKey) {
+        message.error('请先选择要操作的对象');
+        return;
+      }
+
+      this.setState({ submitting: true });
+
+      try {
+        // 处理日期格式的字段，转换为时间戳
+        Object.keys(values).forEach((fieldKey: any) => {
+          const field = fieldList.find(
+            (field: any) => field.apiKey === fieldKey,
+          );
+          if (
+            field &&
+            values[fieldKey] &&
+            (field.type === 'date' ||
+              field.type === 'datetime' ||
+              field.type === 'time')
+          ) {
+            values[fieldKey] = new Date(values[fieldKey]).getTime();
+          }
+        });
+
+        // 调用新增接口
+        const response = await xObject.create(xObjectApiKey, {
+          data: values,
+          method: 'POST',
+        });
+
+        if (response && (response.code === 200 || response.code === '200')) {
+          message.success('创建成功');
+          this.setState({
+            submitting: false,
+            submitSuccess: true,
+          });
+
+          // 重置表单
+          this.state.form?.resetFields();
+
+          // 1秒后隐藏成功提示
+          setTimeout(() => {
+            this.setState({ submitSuccess: false });
+          }, 2000);
+
+          // 调用成功回调
+          if (this.props.onSuccess) {
+            this.props.onSuccess(response.data);
+          }
+        } else {
+          message.error(response?.message || '创建失败');
+          this.setState({ submitting: false });
+        }
+      } catch (error) {
+        console.error('创建失败:', error);
+        message.error('创建失败');
+        this.setState({ submitting: false });
+      }
+    });
+  }
+
+  /**
+   * 处理表单重置
+   */
+  handleReset() {
+    this.state.form?.resetFields();
+    this.setState({ submitSuccess: false });
+    message.info('表单已重置');
+  }
+
+  /**
+   * 渲染表单内容
+   * 根据字段类型动态生成对应的输入组件
+   * @returns 表单 JSX 元素
+   */
+  renderForm() {
+    const { fieldList, entityTypeList, submitSuccess } = this.state;
+    const { xObjectApiKey, fields } = this.props.xObjectDataApi || {};
+    const { columnCount = 1 } = this.props;
+
+    let curFieldList = fieldList;
+
+    // 如果指定了 fields，则只显示指定的字段
+    if (fields && fields.length > 0) {
+      curFieldList = fieldList.filter((field) => fields.includes(field.apiKey));
+    }
+
+    // 如果没有选择对象，显示提示信息
+    if (!xObjectApiKey) {
+      return (
+        <Empty
+          description="请先选择要操作的对象"
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      );
+    }
+
+    // 如果字段列表为空，显示提示信息
+    if (curFieldList.length === 0) {
+      return (
+        <Empty
+          description="暂无可用字段"
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      );
+    }
+
+    const formItemLayout =
+      columnCount === 2
+        ? {
+            labelCol: { span: 8 },
+            wrapperCol: { span: 16 },
+          }
+        : {
+            labelCol: { span: 4 },
+            wrapperCol: { span: 20 },
+          };
+
+    return (
+      <Form
+        ref={(form) => this.setState({ form })}
+        layout="horizontal"
+        {...formItemLayout}
+      >
+        <Row gutter={16}>
+          {curFieldList.map((field) => {
+            // 跳过 ID 字段，不需要在表单中显示
+            if (field.apiKey === 'id') return null;
+
+            let inputComponent;
+            const selectitem = field.selectitem || [];
+            const checkitem = field.checkitem || [];
+
+            // 根据字段类型生成对应的输入组件
+            switch (field.type) {
+              case 'entityType':
+              case 'entitytype':
+                // 业务类型选择器
+                inputComponent = (
+                  <Select placeholder="请选择业务类型" allowClear>
+                    {entityTypeList.map((item) => (
+                      <Option
+                        key={item.apiKey}
+                        value={item.id}
+                        disabled={!item.active}
+                      >
+                        {item.label}
+                      </Option>
+                    ))}
+                  </Select>
+                );
+                break;
+              case 'picklist':
+                // 单选下拉框
+                inputComponent = (
+                  <Select placeholder={`请选择${field.label}`} allowClear>
+                    {selectitem.map((item) => (
+                      <Option key={item.apiKey} value={item.id}>
+                        {item.label}
+                      </Option>
+                    ))}
+                  </Select>
+                );
+                break;
+              case 'textarea':
+                // 多行文本输入框
+                inputComponent = (
+                  <Input.TextArea
+                    placeholder={`请输入${field.label}`}
+                    rows={3}
+                    showCount
+                    maxLength={500}
+                  />
+                );
+                break;
+              case 'multipicklist':
+                // 多选下拉框
+                inputComponent = (
+                  <Select
+                    placeholder={`请选择${field.label}`}
+                    mode="multiple"
+                    allowClear
+                  >
+                    {checkitem.map((item) => (
+                      <Option key={item.apiKey} value={item.id}>
+                        {item.label}
+                      </Option>
+                    ))}
+                  </Select>
+                );
+                break;
+              case 'datetime':
+                // 日期时间选择器
+                inputComponent = (
+                  <DatePicker
+                    placeholder={`请选择${field.label}`}
+                    format={'YYYY/MM/DD HH:mm:ss'}
+                    showTime={true}
+                    style={{ width: '100%' }}
+                  />
+                );
+                break;
+              case 'date':
+                // 日期选择器
+                inputComponent = (
+                  <DatePicker
+                    placeholder={`请选择${field.label}`}
+                    format={'YYYY/MM/DD'}
+                    style={{ width: '100%' }}
+                  />
+                );
+                break;
+              case 'time':
+                // 时间选择器
+                inputComponent = (
+                  <DatePicker
+                    placeholder={`请选择${field.label}`}
+                    format={'HH:mm:ss'}
+                    showTime={true}
+                    style={{ width: '100%' }}
+                  />
+                );
+                break;
+              case 'int':
+              case 'float':
+                // 数字输入框
+                inputComponent = (
+                  <InputNumber
+                    placeholder={`请输入${field.label}`}
+                    style={{ width: '100%' }}
+                  />
+                );
+                break;
+              case 'email':
+                // 邮箱输入框
+                inputComponent = (
+                  <Input placeholder={`请输入${field.label}`} type="email" />
+                );
+                break;
+              case 'url':
+                // URL 输入框
+                inputComponent = (
+                  <Input placeholder={`请输入${field.label}`} type="url" />
+                );
+                break;
+              case 'phone':
+                // 电话号码输入框
+                inputComponent = (
+                  <Input placeholder={`请输入${field.label}`} type="tel" />
+                );
+                break;
+              default:
+                // 默认文本输入框
+                inputComponent = (
+                  <Input placeholder={`请输入${field.label}`} maxLength={200} />
+                );
+            }
+
+            const colSpan = columnCount === 2 ? 12 : 24;
+
+            return (
+              <Col span={colSpan} key={field.apiKey}>
+                <Form.Item
+                  name={field.apiKey}
+                  label={field.label}
+                  required={field.required ?? false}
+                  rules={[
+                    {
+                      required: field.required,
+                      message: `请${
+                        field.type === 'picklist' ||
+                        field.type === 'multipicklist' ||
+                        field.type === 'entityType' ||
+                        field.type === 'entitytype' ||
+                        field.type === 'date' ||
+                        field.type === 'datetime' ||
+                        field.type === 'time'
+                          ? '选择'
+                          : '输入'
+                      }${field.label}`,
+                    },
+                  ]}
+                >
+                  {inputComponent}
+                </Form.Item>
+              </Col>
+            );
+          })}
+        </Row>
+
+        {submitSuccess && (
+          <div className="submit-success-message">
+            <CheckCircleOutlined /> 数据已成功提交
+          </div>
+        )}
+      </Form>
+    );
+  }
+
+  /**
+   * 渲染组件
+   * @returns 组件 JSX 元素
+   */
+  render() {
+    const { title, loading, submitting, error } = this.state;
+    const { formTitle, showResetButton = true, data } = this.props;
+
+    // 测试输出
+    console.log('this.props:', this.props);
+
+    const curAmisData = data || {};
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
+
+    const displayTitle = formTitle || title || '新增数据';
+
+    return (
+      <div className="object-form-container">
+        <Card>
+          <div className="form-header">
+            <h3 className="form-title">
+              {displayTitle}
+              {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+            </h3>
+          </div>
+
+          <div className="form-content">
+            <Spin spinning={loading} tip="加载字段信息...">
+              {error ? (
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description={
+                    <div>
+                      <div style={{ color: '#ff4d4f', marginBottom: 8 }}>
+                        {error}
+                      </div>
+                      <Button type="primary" onClick={this.loadFieldList}>
+                        重新加载
+                      </Button>
+                    </div>
+                  }
+                />
+              ) : (
+                <>
+                  {this.renderForm()}
+                  <div className="form-actions">
+                    <Space size="middle">
+                      <Button
+                        type="primary"
+                        icon={<SaveOutlined />}
+                        onClick={this.handleSubmit}
+                        loading={submitting}
+                        disabled={!xObjectApiKey}
+                      >
+                        {submitting ? '提交中...' : '提交'}
+                      </Button>
+                      {showResetButton && (
+                        <Button
+                          icon={<ReloadOutlined />}
+                          onClick={this.handleReset}
+                          disabled={submitting}
+                        >
+                          重置
+                        </Button>
+                      )}
+                    </Space>
+                  </div>
+                </>
+              )}
+            </Spin>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+}

package/src/template/neo-custom-cmp-template/src/components/object-form/model.ts

@@ -0,0 +1,106 @@
+/**
+ * @file Object Form 表单组件对接编辑器的描述文件
+ * @description 定义组件在 Neo 平台编辑器中的配置信息
+ * @author Neo Custom Widget CLI
+ * @version 1.0.0
+ */
+export class ObjectFormModel {
+  /**
+   * 组件类型标识
+   * 用于标识组件的唯一性，在构建时根据当前组件目录名称自动生成
+   * 注意：此字段在构建时会被自动替换，不需要手动设置
+   */
+  // cmpType: string = 'object-form';
+
+  /** 组件名称，用于设置在编辑器左侧组件面板中展示的名称 */
+  label: string = '实体对象表单';
+
+  /** 组件描述，用于设置在编辑器左侧组件面板中展示的描述 */
+  description: string = '基于 XObject 的对象表单组件，用于新增数据';
+
+  /** 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签） */
+  tags: string[] = ['自定义组件'];
+
+  /** 组件图标，用于设置在编辑器左侧组件面板中展示的图标 */
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/custom-form.svg';
+
+  /** 初次插入页面的默认属性数据 */
+  defaultComProps = {
+    formTitle: '新增数据表单',
+    showResetButton: true,
+    columnCount: 1,
+    xObjectDataApi: {
+      xObjectApiKey: 'customContact__c',
+      fields: ['name', 'entityType', 'phone__c'],
+    },
+  };
+
+  /** 设计器端预览时展示的默认数据 */
+  previewComProps = {
+    formTitle: '新增数据表单',
+  };
+
+  /**
+   * 组件属性配置模式
+   * 支持静态配置：propsSchema，优先级比 propsSchemaCreator 低
+   * 定义组件在编辑器中可配置的属性
+   */
+  propsSchema = [
+    {
+      type: 'text',
+      name: 'formTitle',
+      label: '表单标题',
+      value: '新增数据表单',
+      placeholder: '请输入表单标题',
+    },
+    {
+      type: 'xObjectDataApi', // 用于获取实体业务数据列表的配置项
+      name: 'xObjectDataApi',
+      label: '实体数据源',
+      /*
+      value: {
+        xObjectApiKey: 'customContact__c',
+        fields: ['name', 'entityType', 'phone__c'],
+      },
+      */
+      placeholder: '请选择实体数据源',
+      custom: true,
+    },
+    {
+      type: 'select',
+      name: 'columnCount',
+      label: '表单列数',
+      value: 1,
+      placeholder: '请选择表单列数',
+      options: [
+        {
+          label: '单列',
+          value: 1,
+        },
+        {
+          label: '双列',
+          value: 2,
+        },
+      ],
+    },
+    {
+      type: 'switch',
+      name: 'showResetButton',
+      label: '显示重置按钮',
+      value: true,
+    },
+  ];
+
+  /**
+   * 支持函数式写法：propsSchemaCreator
+   * com 为组件实例，优先级比 propsSchema 高
+   * 可以根据组件实例动态生成属性配置
+   */
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+export default ObjectFormModel;