neo-cmp-cli 1.8.2 → 1.8.3

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

@@ -1,615 +0,0 @@
-/**
- * @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 EntityFormProps {
-  /** 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 EntityFormState {
-  /** 表单标题 */
-  title?: string;
-  /** 字段列表 */
-  fieldList: FieldInfo[];
-  /** 加载状态 */
-  loading: boolean;
-  /** 提交中状态 */
-  submitting: boolean;
-  /** 错误信息 */
-  error: string | null;
-  /** 表单实例 */
-  form: any;
-  /** 业务类型列表 */
-  entityTypeList: any[];
-  /** 提交成功状态 */
-  submitSuccess: boolean;
-}
-
-/**
- * Object Form 对象表单组件
- * 支持对 Neo 平台的 XObject 实体对象进行新增操作
- */
-export default class EntityForm extends React.PureComponent<
-  EntityFormProps,
-  EntityFormState
-> {
-  constructor(props: EntityFormProps) {
-    super(props);
-
-    // 初始化组件状态
-    this.state = {
-      fieldList: [],
-      loading: false,
-      submitting: false,
-      error: null,
-      form: null,
-      entityTypeList: [],
-      submitSuccess: false,
-    };
-
-    // 绑定方法上下文
-    this.loadFieldList = this.loadFieldList.bind(this);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleReset = this.handleReset.bind(this);
-  }
-
-  componentDidMount() {
-    const { xObjectDataApi } = this.props;
-    const { xObjectApiKey } = xObjectDataApi || {};
-    
-    if (xObjectApiKey) {
-      // 初始化字段列表和业务类型列表
-      this.getEntityTypeList(xObjectApiKey);
-      this.loadFieldList();
-    }
-  }
-
-  /**
-   * 组件更新后执行
-   * 当 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: [],
-        });
-      }
-    }
-  }
-
-  /**
-   * 获取业务类型列表
-   * 用于下拉选择框的选项数据
-   */
-  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="entity-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/entityForm/model.ts

@@ -1,107 +0,0 @@
-/**
- * @file Object Form 表单组件对接编辑器的描述文件
- * @description 定义组件在 Neo 平台编辑器中的配置信息
- * @author Neo Custom Widget CLI
- * @version 1.0.0
- */
-export class EntityFormModel {
-  /**
-   * 组件类型标识
-   * 用于标识组件的唯一性，在构建时根据当前组件目录名称自动生成
-   * 注意：此字段在构建时会被自动替换，不需要手动设置
-   */
-  // cmpType: string = 'entityForm';
-
-  /** 组件名称，用于设置在编辑器左侧组件面板中展示的名称 */
-  label: string = '实体对象表单';
-
-  /** 组件描述，用于设置在编辑器左侧组件面板中展示的描述 */
-  description: string = '基于 XObject 的对象表单组件，用于新增数据';
-
-  /** 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签） */
-  // tags: string[] = ['自定义组件'];
-
-  /**
-   * 用于设置组件支持的页面类型
-   *
-   * 当前 NeoCRM 平台存在的页面类型：
-   * all:	1	全页面
-   * indexPage:	2	首页
-   * entityListPage:	3	实体列表页
-   * entityFormPage:	4	实体表单页
-   * entityDetailPage:	5	实体详情页
-   * customPage:	6	自定义页面
-   * bizPage:	7	业务页面
-   */
-  // targetPage: string[] = ['customPage'];
-
-  /** 组件图标，用于设置在编辑器左侧组件面板中展示的图标 */
-  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'],
-    },
-  };
-
-  /**
-   * 组件属性配置模式
-   * 支持静态配置：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,
-      showPage: false,
-      showPageSize: false,
-      showAutoFetchData: false,
-    },
-    {
-      type: 'select',
-      name: 'columnCount',
-      label: '表单列数',
-      value: 1,
-      placeholder: '请选择表单列数',
-      options: [
-        {
-          label: '单列',
-          value: 1,
-        },
-        {
-          label: '双列',
-          value: 2,
-        },
-      ],
-    },
-    {
-      type: 'switch',
-      name: 'showResetButton',
-      label: '显示重置按钮',
-      value: true,
-    },
-  ];
-}
-
-export default EntityFormModel;