neo-cmp-cli 1.2.12 → 1.2.15

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

@@ -0,0 +1,325 @@
+import * as React from 'react';
+import {
+  Card,
+  Row,
+  Col,
+  Spin,
+  Empty,
+  Descriptions,
+  Button,
+  Tag,
+  Divider,
+  Typography,
+} from 'antd';
+import {
+  ReloadOutlined,
+  InfoCircleOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+} from '@ant-design/icons';
+// @ts-ignore
+import { xObject } from 'neo-open-api'; // Neo OpenAPI SDK
+import './style.scss';
+
+const { Title, Text } = Typography;
+
+interface EntityDetailProps {
+  title?: string;
+  xObjectDetailApi?: {
+    xObjectApiKey: string;
+    objectId: string;
+  };
+  columnCount?: number;
+  showTitle?: boolean;
+  data?: any;
+}
+
+interface FieldDescription {
+  apiKey: string;
+  label: string;
+  type: string;
+  [key: string]: any;
+}
+
+interface EntityDetailState {
+  detailData: any;
+  fieldDescriptions: FieldDescription[];
+  loading: boolean;
+  error: string | null;
+}
+
+export default class EntityDetail extends React.PureComponent<
+  EntityDetailProps,
+  EntityDetailState
+> {
+  constructor(props: EntityDetailProps) {
+    super(props);
+
+    this.state = {
+      detailData: {},
+      fieldDescriptions: [],
+      loading: false,
+      error: null,
+    };
+
+    this.loadEntityDetail = this.loadEntityDetail.bind(this);
+    this.loadFieldDescriptions = this.loadFieldDescriptions.bind(this);
+  }
+
+  componentDidMount() {
+    this.loadData();
+  }
+
+  componentDidUpdate(prevProps: EntityDetailProps) {
+    const { xObjectDetailApi } = this.props;
+    if (
+      xObjectDetailApi?.xObjectApiKey !==
+        prevProps.xObjectDetailApi?.xObjectApiKey ||
+      xObjectDetailApi?.objectId !== prevProps.xObjectDetailApi?.objectId
+    ) {
+      this.loadData();
+    }
+  }
+
+  async loadData() {
+    const { xObjectDetailApi } = this.props;
+    if (!xObjectDetailApi?.xObjectApiKey || !xObjectDetailApi?.objectId) {
+      this.setState({
+        error: '缺少必要参数：实体类型或数据ID',
+        loading: false,
+      });
+      return;
+    }
+
+    await Promise.all([this.loadFieldDescriptions(), this.loadEntityDetail()]);
+  }
+
+  async loadFieldDescriptions() {
+    const { xObjectDetailApi } = this.props;
+    if (!xObjectDetailApi?.xObjectApiKey) return;
+
+    try {
+      const result = await xObject.getDesc(xObjectDetailApi.xObjectApiKey);
+      if (result?.status) {
+        const fields = result.data?.fields || [];
+        this.setState({ fieldDescriptions: fields });
+      }
+    } catch (error: any) {
+      console.error('获取字段描述失败:', error);
+    }
+  }
+
+  async loadEntityDetail() {
+    const xObjectDetailApi: any = this.props.xObjectDetailApi || {};
+    if (!xObjectDetailApi.xObjectApiKey || !xObjectDetailApi.objectId) return;
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      const result = await xObject.get(
+        xObjectDetailApi.xObjectApiKey,
+        xObjectDetailApi.objectId,
+      );
+
+      if (result?.status) {
+        const data = result.data || {};
+        this.setState({
+          detailData: data,
+          loading: false,
+        });
+      } else {
+        this.setState({
+          error: result?.msg || '获取详情数据失败',
+          loading: false,
+        });
+      }
+    } catch (error: any) {
+      this.setState({
+        error: error.message || '获取详情数据失败',
+        loading: false,
+      });
+    }
+  }
+
+  getFieldLabel(apiKey: string): string {
+    const { fieldDescriptions } = this.state;
+    const field = fieldDescriptions.find((f) => f.apiKey === apiKey);
+    return field?.label || apiKey;
+  }
+
+  getFieldType(apiKey: string): string {
+    const { fieldDescriptions } = this.state;
+    const field = fieldDescriptions.find((f) => f.apiKey === apiKey);
+    return field?.type || 'text';
+  }
+
+  renderFieldValue(value: any, fieldType: string) {
+    if (value === null || value === undefined || value === '') {
+      return <Text type="secondary">-</Text>;
+    }
+
+    // 根据字段类型渲染不同的值
+    switch (fieldType) {
+      case 'boolean':
+        return value ? (
+          <Tag icon={<CheckCircleOutlined />} color="success">
+            是
+          </Tag>
+        ) : (
+          <Tag icon={<CloseCircleOutlined />} color="default">
+            否
+          </Tag>
+        );
+      case 'date':
+      case 'datetime':
+        return new Date(value).toLocaleString('zh-CN');
+      case 'number':
+      case 'currency':
+      case 'percent':
+        return typeof value === 'number'
+          ? value.toLocaleString('zh-CN')
+          : value;
+      case 'url':
+        return (
+          <a href={value} target="_blank" rel="noopener noreferrer">
+            {value}
+          </a>
+        );
+      case 'email':
+        return <a href={`mailto:${value}`}>{value}</a>;
+      case 'phone':
+        return <a href={`tel:${value}`}>{value}</a>;
+      default:
+        return String(value);
+    }
+  }
+
+  renderDetailContent() {
+    const { detailData } = this.state;
+    const { columnCount = 3 } = this.props;
+
+    if (!detailData || Object.keys(detailData).length === 0) {
+      return (
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description="暂无详情数据"
+        />
+      );
+    }
+
+    // 过滤系统字段和空字段
+    const displayFields = Object.keys(detailData).filter(
+      (key) =>
+        // 可以根据需要自定义过滤规则
+        !key.startsWith('_') && detailData[key] !== undefined,
+    );
+
+    // 将字段分成多组，每组对应一列
+    const fieldsPerColumn = Math.ceil(displayFields.length / columnCount);
+    const columnGroups: string[][] = [];
+
+    for (let i = 0; i < columnCount; i++) {
+      const start = i * fieldsPerColumn;
+      const end = start + fieldsPerColumn;
+      columnGroups.push(displayFields.slice(start, end));
+    }
+
+    return (
+      <Row gutter={[24, 24]}>
+        {columnGroups.map((fields, colIndex) => (
+          <Col xs={24} sm={24} md={24 / columnCount} key={colIndex}>
+            <Card className="detail-column-card" bordered={false} size="small">
+              <Descriptions
+                column={1}
+                size="middle"
+                bordered
+                labelStyle={{
+                  fontWeight: 500,
+                  backgroundColor: '#fafafa',
+                  width: '35%',
+                }}
+                contentStyle={{
+                  backgroundColor: '#ffffff',
+                }}
+              >
+                {fields.map((fieldKey) => {
+                  const fieldType = this.getFieldType(fieldKey);
+                  const fieldLabel = this.getFieldLabel(fieldKey);
+                  const fieldValue = detailData[fieldKey];
+
+                  return (
+                    <Descriptions.Item label={fieldLabel} key={fieldKey}>
+                      {this.renderFieldValue(fieldValue, fieldType)}
+                    </Descriptions.Item>
+                  );
+                })}
+              </Descriptions>
+            </Card>
+          </Col>
+        ))}
+      </Row>
+    );
+  }
+
+  render() {
+    const { title, showTitle = true } = this.props;
+    const { loading, error } = this.state;
+    const curAmisData = this.props.data || {};
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+
+    return (
+      <div className="entity-detail-container">
+        {showTitle && (
+          <div className="detail-header">
+            <div className="header-content">
+              <Title level={4} className="header-title">
+                <InfoCircleOutlined className="title-icon" />
+                {title || '实体数据详情'}
+                {systemInfo.tenantName ? (
+                  <Tag color="blue" style={{ marginLeft: 8 }}>
+                    {systemInfo.tenantName}
+                  </Tag>
+                ) : null}
+              </Title>
+              <Button
+                type="primary"
+                icon={<ReloadOutlined />}
+                onClick={this.loadEntityDetail}
+                loading={loading}
+                className="refresh-button"
+                size="small"
+              >
+                刷新
+              </Button>
+            </div>
+            <Divider style={{ margin: '12px 0' }} />
+          </div>
+        )}
+
+        <div className="detail-content">
+          <Spin spinning={loading} tip="加载详情数据中...">
+            {error ? (
+              <div className="error-container">
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description={
+                    <div>
+                      <div style={{ color: '#ff4d4f', marginBottom: 8 }}>
+                        {error}
+                      </div>
+                      <Button type="primary" onClick={this.loadEntityDetail}>
+                        重新加载
+                      </Button>
+                    </div>
+                  }
+                />
+              </div>
+            ) : (
+              this.renderDetailContent()
+            )}
+          </Spin>
+        </div>
+      </div>
+    );
+  }
+}

package/src/template/neo-custom-cmp-template/src/components/entity-detail/model.ts

@@ -0,0 +1,125 @@
+/**
+ * @file 实体数据详情组件对接编辑器的描述文件
+ * @description 定义组件在 Neo 平台编辑器中的配置信息
+ */
+export class EntityDetailModel {
+  /**
+   * 组件类型标识
+   * 用于标识组件的唯一性，在构建时根据当前组件目录名称自动生成
+   * 注意：此字段在构建时会被自动替换，不需要手动设置
+   */
+  // cmpType: string = 'entity-detail';
+
+  /** 组件名称，用于设置在编辑器左侧组件面板中展示的名称 */
+  label: string = '实体数据详情';
+
+  /** 组件描述，用于设置在编辑器左侧组件面板中展示的描述 */
+  description: string = '展示实体数据详情信息，支持多列布局和字段类型识别';
+
+  /** 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签） */
+  tags: string[] = ['自定义组件'];
+
+  /** 组件图标，用于设置在编辑器左侧组件面板中展示的图标 */
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/detail.svg';
+
+  /** 初次插入页面的默认属性数据 */
+  defaultComProps = {
+    title: '实体数据详情',
+    xObjectDetailApi: {
+      xObjectApiKey: 'account',
+      objectId: '',
+    },
+    columnCount: 3,
+    showTitle: true,
+  };
+
+  /** 设计器端预览时展示的默认数据 */
+  previewComProps = {
+    title: '实体数据详情',
+    columnCount: 3,
+    showTitle: true,
+  };
+
+  /**
+   * 组件属性配置模式
+   * 定义组件在编辑器中可配置的属性
+   */
+  propsSchema = [
+    {
+      type: 'text',
+      name: 'title',
+      label: '标题',
+      value: '实体数据详情',
+      placeholder: '请输入标题',
+      description: '组件顶部显示的标题',
+    },
+    {
+      type: 'switch',
+      name: 'showTitle',
+      label: '显示标题栏',
+      value: true,
+      description: '是否显示组件顶部的标题和刷新按钮',
+    },
+    {
+      type: 'xObjectDetailApi', // 用于选取对象业务详情数据的配置项
+      name: 'xObjectDetailApi',
+      label: '业务详情数据',
+    },
+    /*
+    {
+      type: 'xObjectEntityList', // 用于选取实体的配置项
+      name: 'xObjectDetailApi.xObjectApiKey',
+      label: '实体对象',
+      helpText: '请选择要展示详情的实体对象',
+      custom: false,
+      value: 'account'
+    },
+    {
+      type: 'text',
+      name: 'xObjectDetailApi.objectId',
+      label: '数据ID',
+      value: '',
+      placeholder: '请输入数据ID或使用上下文变量',
+      description: '要展示的数据记录ID，支持变量：${recordId}',
+    },
+    */
+    {
+      type: 'select',
+      name: 'columnCount',
+      label: '列数',
+      value: 3,
+      options: [
+        {
+          label: '1列',
+          value: 1,
+        },
+        {
+          label: '2列',
+          value: 2,
+        },
+        {
+          label: '3列',
+          value: 3,
+        },
+        {
+          label: '4列',
+          value: 4,
+        },
+      ],
+      description: '详情页面的列数布局',
+    },
+  ];
+
+  /**
+   * 支持函数式写法：propsSchemaCreator
+   * com 为组件实例，优先级比 propsSchema 高
+   * 可以根据组件实例动态生成属性配置
+   */
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+export default EntityDetailModel;