neo-cmp-cli 1.2.23 → 1.2.26

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

@@ -0,0 +1,621 @@
+/**
+ * @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>
+    );
+  }
+}
+