neo-cmp-cli 1.8.2 → 1.8.3

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

@@ -1,784 +0,0 @@
-/**
- * @file XObject 数据表格组件
- * @description 基于 Neo 平台的 XObject 实体对象数据表格组件，支持增删改查操作
- */
-import * as React from 'react';
-import {
-  Table,
-  Button,
-  Space,
-  Modal,
-  Form,
-  Input,
-  Select,
-  message,
-  Popconfirm,
-  Spin,
-  Empty,
-  Card,
-  DatePicker,
-  InputNumber,
-  Checkbox,
-  Row,
-  Col,
-} from 'antd';
-import {
-  PlusOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  ReloadOutlined,
-} 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 EntityTableProps {
-  /** XObject 实体对象的 API Key，用于标识要操作的数据对象 */
-  xObjectDataApi: {
-    xObjectApiKey: string;
-    fields: string[];
-    fieldDescList?: any[];
-    pageSize?: number;
-    page?: number;
-    autoFetchData?: boolean;
-  };
-  /** Neo 平台传递的数据，包含系统信息等 */
-  data?: any;
-  entityData?: any; // Neo 平台自动获取的实体数据
-  /** 是否显示新增按钮 */
-  showAddButton?: boolean;
-  /** 是否显示编辑按钮 */
-  showEditButton?: boolean;
-  /** 是否显示删除按钮 */
-  showDeleteButton?: boolean;
-  /** 是否为自定义实体对象 */
-  custom?: boolean;
-}
-
-/**
- * 字段信息接口
- */
-interface FieldInfo {
-  /** 字段名称 */
-  name: string;
-  /** 字段显示标签 */
-  label: string;
-  /** 字段 API Key */
-  apiKey: string;
-  /** 字段类型 */
-  type: string;
-  /** 字段项类型 */
-  itemType: string;
-  /** 复选框选项列表 */
-  checkitem: any[];
-  /** 下拉选择选项列表 */
-  selectitem?: any[];
-  /** 是否必填 */
-  required: boolean;
-}
-
-/**
- * 组件状态接口
- */
-interface EntityTableState {
-  /** 表格标题 */
-  title?: string;
-  fieldList: FieldInfo[];
-  /** 表格数据源 */
-  dataSource: any[];
-  /** 加载状态 */
-  loading: boolean;
-  /** 错误信息 */
-  error: string | null;
-  /** 分页信息 */
-  pagination: {
-    current: number;
-    pageSize: number;
-    total: number;
-  };
-  /** 模态框是否可见 */
-  isModalVisible: boolean;
-  /** 是否为编辑模式 */
-  isEditMode: boolean;
-  /** 正在编辑的记录 */
-  editingRecord: any;
-  /** 表单实例 */
-  form: any;
-  /** 业务类型列表 */
-  entityTypeList: any[];
-}
-
-/**
- * XObject 数据表格组件
- * 支持对 Neo 平台的 XObject 实体对象进行增删改查操作
- */
-export default class EntityTable extends React.PureComponent<
-  EntityTableProps,
-  EntityTableState
-> {
-  constructor(props: EntityTableProps) {
-    super(props);
-    const { xObjectDataApi } = this.props;
-    const { page, pageSize } = xObjectDataApi || {};
-
-    // 初始化组件状态
-    this.state = {
-      fieldList: [],
-      dataSource: [],
-      loading: false,
-      error: null,
-      pagination: {
-        current: page || 1,
-        pageSize: pageSize || 10,
-        total: 0,
-      },
-      isModalVisible: false,
-      isEditMode: false,
-      editingRecord: null,
-      form: null,
-      entityTypeList: [],
-    };
-
-    // 绑定方法上下文
-    this.loadData = this.loadData.bind(this);
-    this.handleAdd = this.handleAdd.bind(this);
-    this.handleEdit = this.handleEdit.bind(this);
-    this.handleDelete = this.handleDelete.bind(this);
-    this.handleModalOk = this.handleModalOk.bind(this);
-    this.handleModalCancel = this.handleModalCancel.bind(this);
-    this.handleTableChange = this.handleTableChange.bind(this);
-  }
-
-  componentDidMount() {
-    const { xObjectDataApi } = this.props;
-    const { xObjectApiKey, fields, page, pageSize } = xObjectDataApi || {};
-
-    if (xObjectApiKey) {
-      // 初始化字段列表、加载数据和业务类型列表
-      this.getEntityTypeList(xObjectApiKey);
-      this.loadFieldList();
-
-      if (fields) {
-        this.loadData(page, pageSize);
-      }
-    }
-  }
-
-  /**
-   * 组件更新后执行
-   * 当 xObjectApiKey 发生变化时重新加载数据
-   */
-  async componentDidUpdate(prevProps: EntityTableProps) {
-    const { xObjectApiKey, fields, page, pageSize } =
-      this.props.xObjectDataApi || {};
-    const {
-      xObjectApiKey: prevXObjectApiKey,
-      fields: prevFields,
-      page: prevPage,
-      pageSize: prevPageSize,
-    } = prevProps.xObjectDataApi || {};
-    if (
-      xObjectApiKey !== prevXObjectApiKey ||
-      !isEqual(fields, prevFields) ||
-      page !== prevPage ||
-      pageSize !== prevPageSize
-    ) {
-      if (xObjectApiKey) {
-        // 先加载字段列表，等待完成后再加载数据，确保字段信息已更新
-        await this.loadFieldList();
-        await this.getEntityTypeList(xObjectApiKey);
-        this.loadData(page, pageSize);
-      } else {
-        this.setState({
-          dataSource: [],
-          fieldList: [],
-        });
-      }
-    }
-  }
-
-  /**
-   * 获取业务类型列表
-   * 用于下拉选择框的选项数据
-   */
-  async getEntityTypeList(xObjectApiKey?: string) {
-    const { xObjectDataApi } = this.props;
-    const curXObjectApiKey = xObjectApiKey || xObjectDataApi?.xObjectApiKey;
-    const result = await xObject.getEntityTypeList(curXObjectApiKey);
-    if (result && result.status) {
-      const records = result.data || [];
-      this.setState({
-        entityTypeList: records,
-      });
-    }
-  }
-
-  /**
-   * 加载字段列表
-   * 从 Neo 平台获取 XObject 的字段描述信息
-   */
-  async loadFieldList() {
-    const { xObjectDataApi } = this.props || {};
-
-    // 方式一：直接从 props.xObjectDetailApi 中获取字段描述
-    if (xObjectDataApi && xObjectDataApi.fieldDescList) {
-      this.setState({ fieldList: xObjectDataApi.fieldDescList });
-    } else {
-      // 方式二：自行通过 OpenAPI SDK 获取字段描述
-      if (!xObjectDataApi.xObjectApiKey) return;
-      try {
-        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 });
-        }
-      } catch (error) {
-        console.error('获取字段列表失败:', error);
-        message.error('获取字段列表失败');
-      }
-    }
-  }
-
-  /**
-   * 生成表格列配置
-   * @returns 表格列配置数组
-   */
-  generateColumns() {
-    const { showEditButton, showDeleteButton, xObjectDataApi } = this.props;
-    const { fieldList } = this.state;
-    const { fields, fieldDescList } = xObjectDataApi || {};
-    let curFieldList =
-      fieldDescList && fieldDescList.length > 0 ? fieldDescList : fieldList;
-
-    if (fields && fields.length > 0) {
-      // 如果 fields 存在，则过滤掉 fieldList 中不存在的字段
-      curFieldList = curFieldList.filter((field) =>
-        fields.includes(field.apiKey),
-      );
-    }
-
-    // 根据字段列表生成基础列配置
-    const columns: any[] = curFieldList.map((field) => ({
-      title: field.label,
-      dataIndex: field.apiKey,
-      key: field.apiKey,
-      ellipsis: true,
-    }));
-
-    // 添加操作列（编辑和删除按钮）
-    if (showEditButton || showDeleteButton) {
-      columns.push({
-        title: '操作',
-        key: 'action',
-        dataIndex: 'action',
-        ellipsis: false,
-        width: 150,
-        render: (text: any, record: any) => (
-          <Space size="middle">
-            {showEditButton && (
-              <Button
-                type="link"
-                icon={<EditOutlined />}
-                onClick={() => this.handleEdit(record)}
-                size="small"
-              >
-                编辑
-              </Button>
-            )}
-            {showDeleteButton && (
-              <Popconfirm
-                title="确定要删除这条记录吗？"
-                onConfirm={() => this.handleDelete(record.id)}
-                okText="确定"
-                cancelText="取消"
-              >
-                <Button
-                  type="link"
-                  danger
-                  icon={<DeleteOutlined />}
-                  size="small"
-                >
-                  删除
-                </Button>
-              </Popconfirm>
-            )}
-          </Space>
-        ),
-      });
-    }
-
-    return columns;
-  }
-
-  /**
-   * 加载表格数据
-   * @param page 页码，默认为 1
-   * @param pageSize 每页条数，默认为 10
-   */
-  async loadData(page = 1, pageSize = 10) {
-    const { xObjectApiKey, autoFetchData } = this.props.xObjectDataApi || {};
-    if (!xObjectApiKey) return;
-
-    this.setState({ loading: true, error: null });
-
-    try {
-      // 获取所有字段的 API Key=
-      const result = await xObject.query(this.props.xObjectDataApi);
-
-      if (result && result.status) {
-        const records = result.data || [];
-        const totalSize = result.totalSize || 0;
-
-        this.setState({
-          dataSource: records,
-          pagination: {
-            current: page,
-            pageSize,
-            total: totalSize,
-          },
-          loading: false,
-        });
-      } else {
-        this.setState({
-          error: result?.msg || '获取数据失败',
-          loading: false,
-        });
-      }
-    } catch (error: any) {
-      this.setState({
-        error: error.message || '获取数据失败',
-        loading: false,
-      });
-    }
-  }
-
-  /**
-   * 处理新增按钮点击
-   * 打开新增模态框
-   */
-  handleAdd() {
-    this.setState({
-      isModalVisible: true,
-      isEditMode: false,
-      editingRecord: null,
-    });
-  }
-
-  /**
-   * 处理编辑按钮点击
-   * @param record 要编辑的记录
-   */
-  handleEdit(record: any) {
-    this.setState({
-      isModalVisible: true,
-      isEditMode: true,
-      editingRecord: record,
-    });
-  }
-
-  /**
-   * 处理删除操作
-   * @param id 要删除的记录 ID
-   */
-  async handleDelete(id: string) {
-    const { xObjectApiKey } = this.props.xObjectDataApi || {};
-    if (!xObjectApiKey) return;
-
-    try {
-      const response = await xObject.delete(xObjectApiKey, id);
-      if (response && (response.code === 200 || response.code === '200')) {
-        message.success('删除成功');
-        // 删除成功后重新加载当前页数据
-        this.loadData(
-          this.state.pagination.current,
-          this.state.pagination.pageSize,
-        );
-      } else {
-        message.error(response?.message || '删除失败');
-      }
-    } catch (error) {
-      console.error('删除失败:', error);
-      message.error('删除失败');
-    }
-  }
-
-  /**
-   * 处理模态框确定按钮点击
-   * 执行新增或编辑操作
-   */
-  handleModalOk() {
-    this.state.form?.validateFields().then(async (values: any) => {
-      const { xObjectApiKey, fields: fieldList } =
-        this.props.xObjectDataApi || {};
-      const { isEditMode, editingRecord } = this.state;
-
-      try {
-        let response;
-        if (isEditMode) {
-          // 编辑模式：更新现有记录
-          const { fieldList } = this.state;
-          // 处理日期格式的字段，转换为时间戳
-          Object.keys(values).forEach((fieldKey: any) => {
-            const field = fieldList.find(
-              (field: any) => field.apiKey === fieldKey,
-            );
-            if (
-              field &&
-              (field.type === 'date' ||
-                field.type === 'datetime' ||
-                field.type === 'time')
-            ) {
-              values[fieldKey] = new Date(values[fieldKey]).getTime();
-            }
-          });
-          response = await xObject.update(xObjectApiKey, editingRecord.id, {
-            data: values,
-            method: 'PATCH',
-          });
-        } else {
-          // 新增模式：创建新记录
-          response = await xObject.create(xObjectApiKey, {
-            data: values,
-            method: 'POST',
-          });
-        }
-
-        if (response && (response.code === 200 || response.code === '200')) {
-          message.success(isEditMode ? '更新成功' : '创建成功');
-          this.setState({ isModalVisible: false });
-          // 操作成功后重新加载当前页数据
-          this.loadData(
-            this.state.pagination.current,
-            this.state.pagination.pageSize,
-          );
-        } else {
-          message.error(
-            response?.message || (isEditMode ? '更新失败' : '创建失败'),
-          );
-        }
-      } catch (error) {
-        console.error(isEditMode ? '更新失败:' : '创建失败:', error);
-        message.error(isEditMode ? '更新失败' : '创建失败');
-      }
-    });
-  }
-
-  /**
-   * 处理模态框取消按钮点击
-   * 关闭模态框并重置状态
-   */
-  handleModalCancel() {
-    this.setState({
-      isModalVisible: false,
-      isEditMode: false,
-      editingRecord: null,
-    });
-  }
-
-  /**
-   * 处理表格分页变化
-   * @param pagination 分页信息
-   */
-  handleTableChange(pagination: any) {
-    this.loadData(pagination.current, pagination.pageSize);
-  }
-
-  /**
-   * 渲染表单内容
-   * 根据字段类型动态生成对应的输入组件
-   * @returns 表单 JSX 元素
-   */
-  renderForm() {
-    const {
-      fieldList: _fieldList,
-      isEditMode,
-      editingRecord,
-      entityTypeList,
-    } = this.state;
-    const { xObjectApiKey, fields } = this.props.xObjectDataApi || {};
-    let fieldList = _fieldList;
-
-    if (fields && fields.length > 0) {
-      fieldList = fieldList.filter((field) => fields.includes(field.apiKey));
-    }
-
-    // 如果没有选择对象，显示提示信息
-    if (!xObjectApiKey) {
-      return (
-        <Empty
-          description="请先选择要操作的对象"
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-        />
-      );
-    }
-
-    // 处理编辑模式下的日期格式字段
-    const curEditingRecord = editingRecord || {};
-    if (editingRecord) {
-      Object.keys(editingRecord).forEach((fieldKey: any) => {
-        const field = fieldList.find((field: any) => field.apiKey === fieldKey);
-        if (
-          field &&
-          editingRecord[fieldKey] &&
-          (field.type === 'date' ||
-            field.type === 'datetime' ||
-            field.type === 'time')
-        ) {
-          // 将时间戳转换为 moment 对象，用于日期选择器
-          curEditingRecord[fieldKey] = moment(
-            new Date(editingRecord[fieldKey]),
-            field.type === 'date'
-              ? 'YYYY/MM/DD'
-              : field.type === 'datetime'
-              ? 'YYYY/MM/DD HH:mm:ss'
-              : 'HH:mm:ss',
-          );
-        }
-      });
-    }
-
-    return (
-      <Form
-        ref={(form) => this.setState({ form })}
-        layout="vertical"
-        initialValues={isEditMode ? curEditingRecord : {}}
-      >
-        {fieldList.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="请选择业务类型">
-                  {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}`}>
-                  {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} />
-              );
-              break;
-            case 'multipicklist':
-              // 多选下拉框
-              inputComponent = (
-                <Select placeholder={`请选择${field.label}`} mode="multiple">
-                  {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}
-                />
-              );
-              break;
-            case 'date':
-              // 日期选择器
-              inputComponent = (
-                <DatePicker
-                  placeholder={`请输入${field.label}`}
-                  format={'YYYY/MM/DD'}
-                />
-              );
-              break;
-            case 'time':
-              // 时间选择器
-              inputComponent = (
-                <DatePicker
-                  placeholder={`请输入${field.label}`}
-                  format={'HH:mm:ss'}
-                  showTime={true}
-                />
-              );
-              break;
-            case 'int':
-            case 'float':
-              // 数字输入框
-              inputComponent = (
-                <InputNumber placeholder={`请输入${field.label}`} />
-              );
-              break;
-            default:
-              // 默认文本输入框
-              inputComponent = <Input placeholder={`请输入${field.label}`} />;
-          }
-
-          return (
-            <Form.Item
-              key={field.apiKey}
-              name={field.apiKey}
-              label={field.label}
-              required={field.required ?? false}
-              rules={[
-                {
-                  required: field.required,
-                  message: `请输入${field.label}`,
-                },
-              ]}
-            >
-              {inputComponent}
-            </Form.Item>
-          );
-        })}
-      </Form>
-    );
-  }
-
-  /**
-   * 渲染组件
-   * @returns 组件 JSX 元素
-   */
-  render() {
-    const {
-      title,
-      dataSource,
-      loading,
-      error,
-      pagination,
-      isModalVisible,
-      isEditMode,
-    } = this.state;
-    const curAmisData = this.props.data || {};
-    const systemInfo = curAmisData.__NeoSystemInfo || {};
-    const { xObjectApiKey } = this.props.xObjectDataApi || {};
-    const columns = this.generateColumns();
-    console.log('this.props：', this.props, columns);
-
-    return (
-      <div className="entity-table-container">
-        <Card>
-          <div className="table-header">
-            <div className="header-content">
-              <h3 className="header-title">
-                {title || '数据表格'}
-                {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
-              </h3>
-              <Space>
-                {this.props.showAddButton && (
-                  <Button
-                    type="primary"
-                    icon={<PlusOutlined />}
-                    onClick={this.handleAdd}
-                    disabled={!xObjectApiKey}
-                  >
-                    新增
-                  </Button>
-                )}
-                <Button
-                  icon={<ReloadOutlined />}
-                  onClick={() =>
-                    this.loadData(pagination.current, pagination.pageSize)
-                  }
-                  loading={loading}
-                >
-                  刷新
-                </Button>
-              </Space>
-            </div>
-          </div>
-
-          <div className="table-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.loadData(pagination.current, pagination.pageSize)
-                        }
-                      >
-                        重新加载
-                      </Button>
-                    </div>
-                  }
-                />
-              ) : (
-                <Table
-                  key={`${xObjectApiKey}-${columns.length}`}
-                  columns={columns}
-                  dataSource={dataSource}
-                  rowKey="id"
-                  pagination={{
-                    ...pagination,
-                    showSizeChanger: true,
-                    showQuickJumper: true,
-                    showTotal: (total, range) =>
-                      `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
-                  }}
-                  onChange={this.handleTableChange}
-                  scroll={{ x: 'max-content' }}
-                />
-              )}
-            </Spin>
-          </div>
-        </Card>
-
-        <Modal
-          title={isEditMode ? `编辑${title}` : `新增${title}`}
-          visible={isModalVisible}
-          onOk={this.handleModalOk}
-          onCancel={this.handleModalCancel}
-          cancelText="取消"
-          okText="确定"
-          width={600}
-          destroyOnClose
-        >
-          {this.renderForm()}
-        </Modal>
-      </div>
-    );
-  }
-}