neo-cmp-cli 1.13.1 → 1.13.3

package/template/neo-web-entity-grid/src/components/createForm__c/index.tsx

@@ -0,0 +1,786 @@
+/**
+ * @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,
+  Modal,
+} from 'antd';
+import {
+  SaveOutlined,
+  ReloadOutlined,
+  CheckCircleOutlined,
+} from '@ant-design/icons';
+// @ts-ignore
+import { xObject } from 'neo-open-api'; // Neo Open API
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+// 引入 neo-ui-common / NeoEvent
+// @ts-ignore
+import { NeoEvent } from 'neo-ui-common';
+
+// 使用其他自定义组件
+// @ts-ignore
+import NeoEntityGrid from 'entityGrid3__c';
+
+import './style.scss';
+
+const { Option } = Select;
+
+/**
+ * 组件属性接口
+ */
+interface CreateFormProps {
+  /** 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;
+  className?: string;
+  /** 渲染函数 */
+  render?: (name: string, schema: any) => React.ReactNode;
+}
+
+/**
+ * 字段信息接口
+ */
+interface FieldInfo {
+  /** 字段名称 */
+  name: string;
+  /** 字段显示标签 */
+  label: string;
+  /** 字段 API Key */
+  apiKey: string;
+  /** 字段类型 */
+  type: string;
+  /** 字段项类型 */
+  itemType: string;
+  /** 复选框选项列表 */
+  checkitem: any[];
+  /** 下拉选择选项列表 */
+  selectitem?: any[];
+  /** 是否必填 */
+  required: boolean;
+  /** 关联对象信息，存在时为关联字段 */
+  referTo?: {
+    apiKey: string;
+    [key: string]: any;
+  };
+}
+
+/**
+ * 组件状态接口
+ */
+interface CreateFormState {
+  /** 表单标题 */
+  title?: string;
+  /** 字段列表 */
+  fieldList: FieldInfo[];
+  /** 加载状态 */
+  loading: boolean;
+  /** 提交中状态 */
+  submitting: boolean;
+  /** 错误信息 */
+  error: string | null;
+  /** 表单实例 */
+  form: any;
+  /** 业务类型列表 */
+  entityTypeList: any[];
+  /** 提交成功状态 */
+  submitSuccess: boolean;
+  /** 关联字段选择弹窗是否可见 */
+  referModalVisible: boolean;
+  /** 当前正在选择的关联字段 */
+  currentReferField: FieldInfo | null;
+  /** 关联字段已选中的显示名称映射（apiKey -> 显示名称） */
+  referSelectedLabels: Record<string, string>;
+}
+
+/**
+ * Object Form 对象表单组件
+ * 支持对 Neo 平台的 XObject 实体对象进行新增操作
+ */
+export default class CreateEntityForm extends React.PureComponent<
+  CreateFormProps,
+  CreateFormState
+> {
+  constructor(props: CreateFormProps) {
+    super(props);
+
+    // 初始化组件状态
+    this.state = {
+      fieldList: [],
+      loading: false,
+      submitting: false,
+      error: null,
+      form: null,
+      entityTypeList: [],
+      submitSuccess: false,
+      referModalVisible: false,
+      currentReferField: null,
+      referSelectedLabels: {},
+    };
+
+    // 绑定方法上下文
+    this.loadFieldList = this.loadFieldList.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+    this.openReferModal = this.openReferModal.bind(this);
+    this.closeReferModal = this.closeReferModal.bind(this);
+  }
+
+  componentDidMount() {
+    const { xObjectDataApi } = this.props;
+    const { xObjectApiKey } = xObjectDataApi || {};
+
+    if (xObjectApiKey) {
+      // 初始化字段列表和业务类型列表
+      this.getEntityTypeList(xObjectApiKey);
+      this.loadFieldList();
+    }
+
+    /*
+    // 触发一个广播事件
+    console.log('触发了一个广播事件 EntityFormInit。');
+    NeoEvent.broadcast('createFormInit', this.props);
+    */
+  }
+
+  /**
+   * 组件更新后执行
+   * 当 xObjectApiKey 发生变化时重新加载字段列表
+   */
+  async componentDidUpdate(prevProps: EntityFormProps) {
+    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: [],
+          error: null,
+        });
+      }
+    }
+  }
+
+  /**
+   * 获取业务类型列表
+   * 用于下拉选择框的选项数据
+   */
+  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, error: null });
+
+    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,
+      });
+    }
+  }
+
+  /**
+   * 表单提交事件
+   */
+  @NeoEvent.dispatch
+  onSubmit() {
+    console.log('触发了表单提交事件：', this.props);
+
+    /*
+    // 触发一个广播事件
+    console.log('触发了一个广播事件 reloadData。');
+    NeoEvent.broadcast('reloadData', this.props);
+    */
+  }
+
+  /**
+   * 处理表单提交
+   * 执行新增操作
+   */
+  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 });
+      }
+
+      // 触发表单提交事件
+      this.onSubmit();
+    });
+  }
+
+  /**
+   * 处理表单重置
+   */
+  handleReset() {
+    this.state.form?.resetFields();
+    this.setState({ submitSuccess: false, referSelectedLabels: {} });
+    message.info('表单已重置');
+  }
+
+  /**
+   * 打开关联字段选择弹窗
+   */
+  openReferModal(field: FieldInfo) {
+    this.setState({
+      referModalVisible: true,
+      currentReferField: field,
+    });
+  }
+
+  /**
+   * 关闭关联字段选择弹窗
+   */
+  closeReferModal() {
+    this.setState({
+      referModalVisible: false,
+      currentReferField: null,
+    });
+  }
+
+  /**
+   * 渲染表单内容
+   * 根据字段类型动态生成对应的输入组件
+   * @returns 表单 JSX 元素
+   */
+  renderForm() {
+    const {
+      fieldList,
+      entityTypeList,
+      submitSuccess,
+      referModalVisible,
+      currentReferField,
+      referSelectedLabels,
+    } = this.state;
+    const { xObjectDataApi } = this.props;
+    const { xObjectApiKey, fields } = 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 || [];
+
+            // 关联字段：存在 referTo 时，渲染为点击选择弹窗的输入框
+            if (field.referTo && (field.type !== 'entityType' && field.type !== 'entitytype')) {
+              // 非业务类型字段
+              const selectedLabel = referSelectedLabels[field.apiKey] || '';
+              const colSpan = columnCount === 2 ? 12 : 24;
+              return (
+                <Col span={colSpan} key={field.apiKey}>
+                  <Form.Item
+                    label={field.label}
+                    required={field.required ?? false}
+                  >
+                    <Input.Group compact style={{ display: 'flex' }}>
+                      <Form.Item
+                        name={field.apiKey}
+                        noStyle
+                        rules={[
+                          {
+                            required: field.required,
+                            message: `请选择${field.label}`,
+                          },
+                        ]}
+                      >
+                        <Input type="hidden" />
+                      </Form.Item>
+                      <Input
+                        readOnly
+                        value={selectedLabel}
+                        placeholder={`请点击选择${field.label}`}
+                        style={{ flex: 1, cursor: 'pointer' }}
+                        onClick={() => this.openReferModal(field)}
+                      />
+                      <Button
+                        type="primary"
+                        onClick={() => this.openReferModal(field)}
+                      >
+                        选择
+                      </Button>
+                    </Input.Group>
+                  </Form.Item>
+                </Col>
+              );
+            }
+
+            // 根据字段类型生成对应的输入组件
+            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>
+
+      <Modal
+        open={referModalVisible}
+        onCancel={this.closeReferModal}
+        footer={null}
+        width={900}
+        title={`选择${currentReferField?.label || ''}`}
+        destroyOnClose
+      >
+        {currentReferField && currentReferField.referTo && (
+          <NeoEntityGrid
+            render={this.props.render}
+            objectApiKey={currentReferField.referTo.apiKey}
+            referData={{
+              referObjectApiKey: xObjectDataApi?.xObjectApiKey,
+              referItemApiKey: currentReferField.apiKey,
+            }}
+            selectedCount={1}
+            onCancel={this.closeReferModal}
+            onSelectedCall={(selectedData: any) => {
+              const { currentReferField: curField, currentReferField } = this.state;
+              if (!curField) return;
+
+              const items = Array.isArray(selectedData)
+                ? selectedData
+                : [selectedData];
+              const firstItem = items[0];
+              const selectedId = firstItem?.id ?? firstItem;
+              const selectedName = firstItem[`${currentReferField?.referTo?.apiKey}Name`] || firstItem?.label || firstItem?.name || firstItem?.id;
+
+              if (selectedId !== undefined && selectedId !== null) {
+                this.state.form?.setFieldsValue({
+                  [curField.apiKey]: selectedId,
+                });
+                this.setState((prev) => ({
+                  referSelectedLabels: {
+                    ...prev.referSelectedLabels,
+                    [curField.apiKey]: selectedName,
+                  },
+                  referModalVisible: false,
+                  currentReferField: null,
+                }));
+              }
+            }}
+          />
+        )}
+      </Modal>
+      </>
+    );
+  }
+
+  /**
+   * 渲染组件
+   * @returns 组件 JSX 元素
+   */
+  render() {
+    const { title, loading, submitting, error } = this.state;
+    const { formTitle, className, showResetButton = true, data } = this.props;
+
+    // 测试输出
+    console.log('createForm__c / this.props:', this.props);
+
+    const curAmisData = data || {};
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
+
+    const displayTitle = formTitle || title || '新增数据';
+
+    return (
+      <div className={`createForm__c ${className}`}>
+        <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>
+    );
+  }
+}