neo-cmp-cli 1.13.16 → 1.13.17

package/template/neo-pipeline-cmps/src/components/simpleTable__c/index.tsx

@@ -0,0 +1,665 @@
+/**
+ * @file XObject 数据表格组件（简化版）
+ * @description 基于 Neo 平台的 XObject 实体对象数据表格组件，仅支持数据展示
+ */
+import * as React from 'react';
+import { Table, Spin, Empty, Popover } from 'antd';
+// @ts-ignore
+import { xObject } from 'neo-open-api'; // Neo Open API
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+
+// Neo Open API// 引入 neo-ui-common / BaseCmp
+// @ts-ignore
+import { BaseCmp } from 'neo-ui-common';
+
+// 引入 neo-ui-common / NeoEvent
+// @ts-ignore
+import { NeoEvent } from 'neo-ui-common';
+
+import queryByCustomSQL from '../../utils/queryByCustomSQL';
+import {
+  closeRangeFromFilter,
+  entityTypeIdForWhere,
+  normalizeOwnerIdsForWhere,
+  getDefaultFilterByProps,
+} from '../../utils/common';
+import {
+  buildHistoryMap,
+  closeDateChangeTooltipTitle,
+  closeDateTrend,
+  formatActivityDateTime,
+  formatCloseDate,
+  formatMoneyCell,
+  formatMoneySummaryAmount,
+  formatPercentCell,
+  isMoneyField,
+  moneyChangeTooltipTitle,
+  moneyTrend,
+  renderOppHealthAssessmentLevel,
+  renderTrendCell,
+  renderWinRateHoverCard,
+  sumMoneyRows,
+  type FieldInfo,
+  type HistoryOppSnap,
+} from '../../utils/simpleTable';
+
+import ShowHealthResult from '../showHealthResult__c';
+
+import './common.scss';
+import './style.scss';
+
+export type { HistoryOppSnap } from '../../utils/simpleTable';
+
+/** 商机详情页 hash 路由（与平台 neoweb 一致） */
+function buildOpportunityDetailUrl(id: string, objectApiKey: string): string {
+  const q = new URLSearchParams({
+    objectApiKey,
+    recordId: id,
+  });
+  return `/bff/neoweb#/entityDetail/opportunity/${id}?${q.toString()}`;
+}
+
+/** 不在表格中展示的字段（仍可通过 xObjectDataApi.fields 拉取，用于 hover 卡片 / tooltip） */
+const HIDDEN_TABLE_COLUMN_KEYS = new Set([
+  'customItem244__c',
+  'customItem241__c',
+  'customItem242__c',
+  'customItem246__c',
+  'customItem247__c',
+  'customItem245__c',
+  // 'objectId', // 跳转到详情页需要
+  // 'businessTypeId' // 跳转到详情页需要
+]);
+
+/** 历史商机 SQL 与 stageSwitch 一致；字段顺序需与 query fields 一致（数组行按列下标解析） */
+const HISTORY_OPPORTUNITY_BI_KEY = 'biCustomModel_397169_20260401104916618';
+const HISTORY_QUERY_FIELDS = [
+  // 'id', // 历史版本ID
+  'opportunity_1__id', // 商机ID
+  'opportunity_1_closeDate',
+  'opportunity_1_opportunityName',
+  'opportunity_1_saleStageId',
+  'opportunity_1_money',
+] as const;
+
+const defaultXObjectDataApi = {
+  xObjectApiKey: 'opportunity',
+  fields: [
+    'opportunityName', // OpportunityStageName 商机名称
+    'money', // Amount
+    'closeDate', // Close Date
+    'customItem248__c', // Stage
+    // 'oppHealthAssessmentScore',
+    'recentActivityRecordTime',
+    'oppHealthAssessmentLevel', // 1.AI Score; hover卡片：调用商机健康度接口
+    'customItem239__c', // 2.AI Win Rate: hover卡片展示的3个信息，对应商机上的3个字段（baseline、positiveFactors、negativeFactors）
+    'customItem244__c', // baseline
+    'customItem241__c', // positiveFactors
+    'customItem242__c', // negativeFactors
+    'customItem246__c', // AmoutChanged
+    'customItem247__c', // ClosedDateChanged
+    'customItem245__c', // StageChanged
+    // 'objectId', // 跳转到详情页需要
+    // 'businessTypeId' // 跳转到详情页需要
+  ],
+  page: 1,
+  pageSize: 50,
+};
+/**
+ * 组件属性接口
+ */
+interface SimpleTableProps {
+  /** XObject 实体对象的 API Key，用于标识要操作的数据对象 */
+  xObjectDataApi: {
+    xObjectApiKey: string;
+    fields: string[];
+    fieldDescList?: any[];
+    autoFetchData?: boolean;
+  };
+  /** Neo 平台传递的数据，包含系统信息等 */
+  data?: any;
+  entityData?: any; // Neo 平台自动获取的实体数据
+  /** 是否为自定义实体对象 */
+  custom?: boolean;
+  /** 组件类名 */
+  className?: string;
+  /** 表格标题，优先使用此配置 */
+  title?: string;
+  /** 标题下方说明文案 */
+  description?: string;
+  /** 当前激活的销售阶段 */
+  activeStage?: string;
+}
+
+/**
+ * 组件状态接口
+ */
+interface SimpleTableState {
+  /** 表格标题 */
+  title?: string;
+  fieldList: FieldInfo[];
+  /** 表格数据源 */
+  dataSource: any[];
+  /** 加载状态 */
+  loading: boolean;
+  /** 错误信息 */
+  error: string | null;
+  activeStage: string; // 当前激活的销售阶段
+  /**
+   * 与 FilterBar 事件 payload 一致（closeDateCustomRange / opportunityOwner / businessType 等）；
+   * 默认值为 defaultFilter，getFilterWhere 仅从中取值
+   */
+  filter: any;
+}
+
+/**
+ * XObject 数据表格组件（简化版）
+ * 仅支持数据展示，不支持增删改查操作
+ */
+export default class SimpleTable extends BaseCmp<
+  SimpleTableProps,
+  SimpleTableState
+> {
+  constructor(props: SimpleTableProps) {
+    super(props);
+
+    // 初始化组件状态
+    this.state = {
+      fieldList: [],
+      dataSource: [],
+      loading: false,
+      error: null,
+      activeStage: props.activeStage || 'Prospecting',
+      filter: getDefaultFilterByProps(props),
+    };
+
+    this.loadData = this.loadData.bind(this);
+    this.loadFieldList = this.loadFieldList.bind(this);
+    this.getCurFieldList = this.getCurFieldList.bind(this);
+    this.getMoneyFieldApiKey = this.getMoneyFieldApiKey.bind(this);
+    this.generateColumns = this.generateColumns.bind(this);
+    this.getFilterWhere = this.getFilterWhere.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+    this.updateActiveStage = this.updateActiveStage.bind(this);
+  }
+
+  componentDidMount() {
+    // const { xObjectDataApi } = this.props;
+    // const { xObjectApiKey } = xObjectDataApi || {};
+    const { xObjectApiKey } = defaultXObjectDataApi;
+
+    if (xObjectApiKey) {
+      // 初始化字段列表、加载数据
+      this.loadFieldList();
+      this.loadData();
+    }
+
+    /*
+    // 广播事件：更新 FilterBar filter
+    NeoEvent.listen('updateFilterData', (filterData: any) => {
+      console.log('SimpleTable 监听到了一个广播事件 updateFilterData: ', filterData);
+      this.setFilter(filterData);
+    });
+
+    // 广播事件：更新当前激活的销售阶段
+    NeoEvent.listen('updateActiveStage', (activeStage: string) => {
+      console.log('SimpleTable 监听到了一个广播事件 updateActiveStage: ', activeStage);
+      this.updateActiveStage(activeStage);
+    });
+    */
+  }
+
+  /**
+   * 加载字段列表
+   * 从 Neo 平台获取 XObject 的字段描述信息
+   */
+  async loadFieldList() {
+    const xObjectDataApi: any = defaultXObjectDataApi;
+
+    // 方式一：直接从 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);
+      }
+    }
+  }
+
+  /**
+   * 当前表格可见字段列表（与列配置一致）
+   */
+  getCurFieldList(): FieldInfo[] {
+    // const { xObjectDataApi } = this.props;
+    const xObjectDataApi: any = defaultXObjectDataApi;
+    const { fieldList } = this.state;
+    const { fields, fieldDescList } = xObjectDataApi || {};
+    let curFieldList =
+      fieldDescList && fieldDescList.length > 0 ? fieldDescList : fieldList;
+
+    if (fields && fields.length > 0) {
+      curFieldList = curFieldList.filter((field: FieldInfo) =>
+        fields.includes(field.apiKey),
+      );
+    }
+    return curFieldList;
+  }
+
+  /**
+   * 汇总用金额字段 apiKey（与金额列一致，取第一个货币字段）
+   */
+  getMoneyFieldApiKey(): string | null {
+    const moneyField = this.getCurFieldList().find((f) => isMoneyField(f));
+    return moneyField?.apiKey ?? null;
+  }
+
+  /**
+   * 生成表格列配置
+   * @returns 表格列配置数组
+   */
+  generateColumns() {
+    const xObjectDataApi: any = defaultXObjectDataApi;
+
+    const curFieldList = this.getCurFieldList().filter(
+      (field) => !HIDDEN_TABLE_COLUMN_KEYS.has(field.apiKey),
+    );
+
+    // 根据字段列表生成基础列配置
+    const columns: any[] = curFieldList.map((field) => {
+      const col: any = {
+        title: field.label,
+        dataIndex: field.apiKey,
+        key: field.apiKey,
+        ellipsis: true,
+      };
+      if (
+        field.apiKey === 'oppHealthAssessmentLevel' ||
+        field.apiKey === 'customItem239__c'
+      ) {
+        col.title = (
+          <span className="simpleTable-th-title-with-ai-icon">
+            <span className="simpleTable-th-ai-icon" />
+            <span>{field.label}</span>
+          </span>
+        );
+      }
+      if (field.apiKey === 'closeDate') {
+        col.render = (text: unknown, record: any) => {
+          const display = formatCloseDate(text);
+          const trend = closeDateTrend(text, record?.historyData);
+          if (trend !== 'up' && trend !== 'down') {
+            return display;
+          }
+          return renderTrendCell({
+            displayText: display,
+            trend,
+            tooltip: closeDateChangeTooltipTitle(record, text),
+          });
+        };
+      } else if (field.apiKey === 'opportunityName') {
+        col.render = (text: unknown, record: any) => {
+          const display = text == null || text === '' ? '—' : String(text);
+          const id =
+            record?.id != null && record.id !== '' ? String(record.id) : '';
+          const objectApiKey = xObjectDataApi?.xObjectApiKey;
+          if (!id || !objectApiKey) {
+            return display;
+          }
+          const url = buildOpportunityDetailUrl(id, objectApiKey);
+          return (
+            <a
+              className="simpleTable-opp-name-link"
+              href={url}
+              target="_blank"
+              /*
+              onClick={(e) => {
+                e.preventDefault();
+                window.location.assign(url);
+              }}
+              */
+            >
+              {display}
+            </a>
+          );
+        };
+      } else if (field.apiKey === 'recentActivityRecordTime') {
+        col.render = (text: unknown) => formatActivityDateTime(text);
+      } else if (field.apiKey === 'oppHealthAssessmentLevel') {
+        col.render = (text: unknown, record: any) => {
+          const cell = renderOppHealthAssessmentLevel(text);
+          const id =
+            record?.id != null && record.id !== '' ? String(record.id) : '';
+          const xObjectApiKey = xObjectDataApi?.xObjectApiKey;
+          if (!id || !xObjectApiKey) {
+            return cell;
+          }
+          return (
+            <Popover
+              content={
+                <div className="simpleTable-health-popover-body">
+                  <ShowHealthResult id={id} xObjectApiKey={xObjectApiKey} />
+                </div>
+              }
+              trigger="hover"
+              placement="topLeft"
+              overlayClassName="simpleTable-health-popover-overlay"
+              mouseEnterDelay={0.08}
+            >
+              <span className="simpleTable-health-popover-trigger">{cell}</span>
+            </Popover>
+          );
+        };
+      } else if (field.apiKey === 'customItem239__c') {
+        col.align = 'center';
+        col.render = (_text: unknown, record: any) => (
+          <Popover
+            content={renderWinRateHoverCard(record)}
+            trigger="hover"
+            placement="topLeft"
+            overlayClassName="simpleTable-winrate-popover"
+            mouseEnterDelay={0.08}
+          >
+            <span className="simpleTable-winrate-trigger">
+              {formatPercentCell(record?.customItem239__c)}
+            </span>
+          </Popover>
+        );
+      } else if (isMoneyField(field)) {
+        // col.align = 'right';
+        col.render = (text: unknown, record: any) => {
+          const display = formatMoneyCell(text);
+          const trend = moneyTrend(text, record?.historyData);
+          if (trend !== 'up' && trend !== 'down') {
+            return display;
+          }
+          return renderTrendCell({
+            displayText: display,
+            trend,
+            tooltip: moneyChangeTooltipTitle(record, text),
+          });
+        };
+      }
+      return col;
+    });
+
+    return columns;
+  }
+
+  /**
+   * 将 FilterBar 结构 filter 转为 xObject.√ 的 where 字符串数组（与 stageSwitch 一致，SDK 按顺序 and 拼接）
+   */
+  getFilterWhere(): string[] {
+    const raw = this.state.filter;
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+      return [];
+    }
+    const curFilter = raw as Record<string, unknown>;
+    const where: string[] = [];
+
+    const range = closeRangeFromFilter(curFilter.closeDateCustomRange);
+    if (range) {
+      where.push(`closeDate >= ${range.start} and closeDate <= ${range.end}`);
+    }
+
+    const ownerIds = normalizeOwnerIdsForWhere(curFilter.opportunityOwner);
+    if (ownerIds.length === 1) {
+      where.push(`ownerId = ${ownerIds[0]}`);
+    } else if (ownerIds.length > 1) {
+      where.push(`ownerId in (${ownerIds.join(', ')})`);
+    }
+
+    const entityTypeId = entityTypeIdForWhere(curFilter.businessType);
+    if (entityTypeId != null) {
+      where.push(`entityType = ${entityTypeId}`);
+    }
+
+    /*
+    // 如果 activeStage 存在，则添加 stage 过滤条件
+    if (this.state.activeStage) {
+      // customItem248__c 是销售阶段字段
+      where.push(`customItem248__c = '${this.state.activeStage}'`);
+    }
+    */
+
+    return where;
+  }
+
+  /** 与 stageSwitch一致：历史商机自定义 SQL 的 where（opportunity_1_* 字段） */
+  getHistoryOpportunityQueryFilter(): string[] {
+    const raw = this.state.filter;
+    const curFilter: Record<string, unknown> =
+      raw && typeof raw === 'object' && !Array.isArray(raw)
+        ? Object.keys(raw as object).length > 0
+          ? (raw as Record<string, unknown>)
+          : defaultFilter
+        : defaultFilter;
+
+    const where: string[] = [];
+
+    const range = closeRangeFromFilter(curFilter.closeDateCustomRange);
+    if (range) {
+      where.push(
+        `opportunity_1_closeDate >= ${range.start} and opportunity_1_closeDate <= ${range.end}`,
+      );
+    }
+
+    const ownerIds = normalizeOwnerIdsForWhere(curFilter.opportunityOwner);
+    if (ownerIds.length === 1) {
+      where.push(`opportunity_1_ownerId = ${ownerIds[0]}`);
+    } else if (ownerIds.length > 1) {
+      where.push(`opportunity_1_ownerId in (${ownerIds.join(', ')})`);
+    }
+
+    const entityTypeId = entityTypeIdForWhere(curFilter.businessType);
+    if (entityTypeId != null) {
+      where.push(`opportunity_1_entityType = ${entityTypeId}`);
+    }
+
+    if (curFilter.changesSinceCustomTime) {
+      where.push(`version = ${curFilter.changesSinceCustomTime}`);
+    }
+
+    return where;
+  }
+
+  /** 查询期间初历史商机列表（与 stageSwitch.fetchHistoryOpportunityList 同源，字段按需求扩展） */
+  async fetchHistoryOpportunityList(): Promise<unknown[]> {
+    const result = await queryByCustomSQL({
+      xObjectApiKey: HISTORY_OPPORTUNITY_BI_KEY,
+      fields: [...HISTORY_QUERY_FIELDS],
+      page: 1,
+      pageSize: 1000,
+      where: this.getHistoryOpportunityQueryFilter(),
+    });
+
+    return result?.status ? result.data ?? [] : [];
+  }
+
+  /**
+   * 加载表格数据
+   */
+  @NeoEvent.function
+  async loadData() {
+    // const api = this.props.xObjectDataApi || {};
+    const api: any = defaultXObjectDataApi;
+    const { xObjectApiKey } = api;
+    if (!xObjectApiKey) return;
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      const rawWhere = (api as { where?: unknown }).where;
+      const baseWhere: string[] = Array.isArray(rawWhere)
+        ? rawWhere.filter((w): w is string => typeof w === 'string')
+        : typeof rawWhere === 'string' && rawWhere
+        ? [rawWhere]
+        : [];
+      const filterWhere =
+        xObjectApiKey === 'opportunity' ? this.getFilterWhere() : [];
+      const [result, historyRows] = await Promise.all([
+        xObject.query({
+          ...api,
+          where: [...baseWhere, ...filterWhere],
+        }),
+        this.fetchHistoryOpportunityList(),
+      ]);
+
+      if (result && result.status) {
+        let records = result.data || [];
+
+        console.log('[SimpleTable__c] records:', records, historyRows);
+
+        // 根据阶段过滤数据
+        if (this.state.activeStage) {
+          records = records.filter((record: any) => {
+            return record.customItem248__c === this.state.activeStage;
+          });
+        }
+
+        const historyMap =
+          xObjectApiKey === 'opportunity'
+            ? buildHistoryMap(historyRows)
+            : new Map<string, HistoryOppSnap>();
+
+        const merged = records.map((r: any) => {
+          const id = r?.id != null ? String(r.id) : '';
+          const historyData = id ? historyMap.get(id) ?? null : null;
+          return { ...r, historyData };
+        });
+
+        this.setState({
+          dataSource: merged,
+          loading: false,
+        });
+      } else {
+        this.setState({
+          error: result?.msg || '获取数据失败',
+          loading: false,
+        });
+      }
+    } catch (error: any) {
+      this.setState({
+        error: error.message || '获取数据失败',
+        loading: false,
+      });
+    }
+  }
+
+  /**
+   * 与 stageSwitch 一致：更新 FilterBar filter 并重新拉取表格数据。
+   */
+  @NeoEvent.function
+  setFilter(filter?: any) {
+    if (isEqual(filter, this.state.filter)) {
+      return;
+    }
+    console.log('[SimpleTable__c] setFilter:', filter);
+    this.setState({ filter }, () => {
+      this.loadData();
+    });
+  }
+
+  /**
+   * 更新当前激活的销售阶段
+   */
+  @NeoEvent.function
+  updateActiveStage(activeStage?: string) {
+    if (isEqual(activeStage, this.state.activeStage)) {
+      return;
+    }
+    console.log('[SimpleTable__c] updateActiveStage:', activeStage);
+    this.setState({ activeStage: activeStage || '' }, () => {
+      this.loadData();
+    });
+  }
+
+  /**
+   * 渲染组件
+   * @returns 组件 JSX 元素
+   */
+  render() {
+    const { title: stateTitle, dataSource, loading, error } = this.state;
+    const { className, title: propsTitle, description } = this.props;
+    // const { xObjectApiKey } = this.props.xObjectDataApi || {};
+    const { xObjectApiKey } = defaultXObjectDataApi;
+    const columns = this.generateColumns();
+
+    // 优先使用 props.title，其次使用 state.title，最后使用默认值
+    const displayTitle = propsTitle || stateTitle || '数据表格';
+
+    const moneyKey = this.getMoneyFieldApiKey();
+    const totalAmount = moneyKey ? sumMoneyRows(dataSource, moneyKey) : 0;
+    const oppCount = dataSource.length;
+    const oppWord = oppCount === 1 ? 'opportunity' : 'opportunities';
+    const summaryText = `Total: ${formatMoneySummaryAmount(
+      totalAmount,
+    )} · ${oppCount} ${oppWord}`;
+
+    console.log(
+      'simpleTable__c / dataSource:',
+      dataSource,
+      this.props,
+      this.state,
+    );
+
+    return (
+      <div className={`simpleTable__c ${className}`} data-time="2026.4.15 01">
+        <div className="table-wrapper">
+          <div className="panel-header">
+            <div className="panel-header-text">
+              <h3>
+                {displayTitle} - {this.state.activeStage}
+              </h3>
+              {description ? (
+                <p className="panel-header-description">{description}</p>
+              ) : null}
+            </div>
+            <div className="panel-header-summary" title={summaryText}>
+              Total:{' '}
+              <span className="summary-amount">
+                {formatMoneySummaryAmount(totalAmount)}
+              </span>
+              {' · '}
+              <span className="summary-amount">{oppCount}</span> {oppWord}
+            </div>
+          </div>
+          <div className="table-container">
+            <Spin spinning={loading} tip="加载数据中...">
+              {error ? (
+                <Empty
+                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                  description={
+                    <div>
+                      <div style={{ color: '#ff4d4f', marginBottom: 8 }}>
+                        {error}
+                      </div>
+                    </div>
+                  }
+                />
+              ) : (
+                <Table
+                  key={`${xObjectApiKey}-${columns.length}`}
+                  columns={columns}
+                  dataSource={dataSource}
+                  rowKey="id"
+                  pagination={false}
+                  scroll={{ x: 'max-content' }}
+                />
+              )}
+            </Spin>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}