neo-cmp-cli 1.8.3 → 1.8.6

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

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