neo-cmp-cli 1.13.15 → 1.13.17

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

@@ -0,0 +1,511 @@
+/**
+ * @file 阶段切换卡片组件
+ * @description 切换显示不同销售阶段的数据；商机来自 xObject.query，阶段来自 stage 接口
+ */
+import * as React from 'react';
+import { Spin } from 'antd';
+// @ts-ignore
+import { request, xObject } from 'neo-open-api';
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+// @ts-ignore
+import { BaseCmp, NeoEvent } from 'neo-ui-common';
+
+import queryByCustomSQL from '../../utils/queryByCustomSQL';
+import {
+  closeRangeFromFilter,
+  entityTypeIdForWhere,
+  extractStageKeyFromStageName,
+  formatAmountDisplay,
+  normalizeOwnerIdsForWhere,
+  parseNumberOrZero,
+  getDefaultFilterByProps,
+} from '../../utils/common';
+import { rowMoney, rowOpportunityStage } from '../../utils/stageSwitch';
+
+import './style.scss';
+
+const STAGE_LIST_URL =
+  '/rest/data/v2.0/xobjects/stage/actions/getStageListByEntityTypeApiKey';
+
+interface StageTab {
+  key: string;
+  name: string;
+  amount: string;
+  count: number;
+  /** 暂无环比时可为空对象，不参与渲染 */
+  changes?: Record<string, unknown>;
+}
+
+interface StageSwitchProps {
+  stages?: StageTab[];
+  activeStage?: string;
+  data?: {
+    __NeoCurrentUser?: { id?: string | number };
+  };
+  onStageChange?: (stage: StageTab) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+interface StageSwitchState {
+  activeStage: string;
+  opportunityList: Record<string, unknown>[];
+  /** 由接口 + getOpportunityList 生成的展示用阶段 */
+  stages: StageTab[];
+  loading: boolean;
+  error: string | null;
+  /** 与 FilterBar 事件 payload 一致（closeDateCustomRange / opportunityOwner / businessType 等）；空对象时回退 defaultFilter */
+  filter: any;
+  defaultEntityTypeApiKey: string;
+}
+
+class StageSwitch extends BaseCmp<StageSwitchProps, StageSwitchState> {
+  constructor(props: StageSwitchProps) {
+    super(props);
+
+    const defaultFilter = getDefaultFilterByProps(props);
+
+    this.state = {
+      activeStage: props.activeStage || '',
+      opportunityList: [],
+      stages: props.stages?.length ? props.stages : [],
+      loading: false,
+      error: null,
+      filter: defaultFilter,
+      defaultEntityTypeApiKey:
+        defaultFilter.businessTypeApiKey ?? 'defaultBusiType',
+    };
+
+    this.getOpportunityQueryFilter = this.getOpportunityQueryFilter.bind(this);
+    this.fetchOpportunityList = this.fetchOpportunityList.bind(this);
+    this.getOpportunityStats = this.getOpportunityStats.bind(this);
+    this.fetchStageRows = this.fetchStageRows.bind(this);
+    this.buildStagesFromApi = this.buildStagesFromApi.bind(this);
+    this.fetchAllData = this.fetchAllData.bind(this);
+    this.handleStageClick = this.handleStageClick.bind(this);
+    this.refreshData = this.refreshData.bind(this);
+    this.setFilter = this.setFilter.bind(this);
+    this.updateActiveStage = this.updateActiveStage.bind(this);
+  }
+
+  componentDidMount() {
+    this.fetchAllData();
+
+    /*
+    // 监听一个广播事件
+    NeoEvent.listen('updateFilterData', (filterData: any) => {
+      console.log('StageSwitch 监听到了一个广播事件 updateFilterData: ', filterData);
+      this.setFilter(filterData);
+    });
+
+    // 广播事件：更新当前激活的销售阶段
+    NeoEvent.listen('updateActiveStage', (activeStage: string) => {
+      console.log('SimpleTable 监听到了一个广播事件 updateActiveStage: ', activeStage);
+      this.updateActiveStage(activeStage);
+    });
+    */
+  }
+
+  componentDidUpdate(prevProps: StageSwitchProps) {
+    if (
+      this.props.activeStage != null &&
+      this.props.activeStage !== '' &&
+      this.props.activeStage !== prevProps.activeStage
+    ) {
+      this.setState({ activeStage: this.props.activeStage });
+    }
+  }
+
+  /** 将 FilterBar 结构 filter 转为 xObject.query 的 where 字符串数组（SDK 按顺序 and 拼接） */
+  getOpportunityQueryFilter(): 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(`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}`);
+    }
+
+    return where;
+  }
+
+  /** 用于生成获取历史商机列表数据的查询条件 */
+  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;
+  }
+
+  /** 单次查询最多 1000 条 opportunity */
+  async fetchOpportunityList(): Promise<Record<string, unknown>[]> {
+    const result = await xObject.query({
+      xObjectApiKey: 'opportunity',
+      fields: ['id', 'money', 'customItem248__c'],
+      page: 1,
+      pageSize: 1000,
+      where: this.getOpportunityQueryFilter(),
+    });
+
+    return result?.status
+      ? ((result.data ?? []) as Record<string, unknown>[])
+      : [];
+  }
+
+  /** 查询历史商机列表数据 */
+  async fetchHistoryOpportunityList(): Promise<unknown[]> {
+    const result = await queryByCustomSQL({
+      xObjectApiKey: 'biCustomModel_397169_20260401104916618',
+      fields: [
+        'opportunity_1_opportunityName',
+        'opportunity_1_saleStageId',
+        'opportunity_1_money',
+      ],
+      page: 1,
+      pageSize: 1000,
+      where: this.getHistoryOpportunityQueryFilter(),
+    });
+
+    return result?.status ? result.data ?? [] : [];
+  }
+
+  /**
+   * 按 stageName 过滤商机：取 stageName 第一个 `.` 之后的片段作为阶段键，与商机行上阶段文案同样规则比对。
+   * @returns count — 条数； amount — money（若无则 amount 字段）之和
+   */
+  getOpportunityStats(
+    stageName: string,
+    list: Record<string, unknown>[], // 商机列表
+  ): { amount: number; count: number } {
+    const key = extractStageKeyFromStageName(stageName);
+    let amount = 0; // 商机总金额
+    let count = 0; // 商机总条数
+
+    for (const row of list) {
+      if (!row || typeof row !== 'object') continue;
+      const rec = row as Record<string, unknown>;
+      const rowKey = extractStageKeyFromStageName(rowOpportunityStage(rec));
+      if (key !== rowKey) continue;
+      count += 1;
+      amount += rowMoney(rec);
+    }
+
+    return { amount, count };
+  }
+
+  /**
+   * 历史商机列表为自定义 SQL 返回的二维数组行：
+   * `[opportunityName, saleStageId, money, ...]` — 第 2 列为阶段 ID（与阶段 `key` 对应），第 3 列为销售额。
+   * @returns count — 条数； amount — 销售额之和
+   */
+  getHistoryOpportunityStats(
+    stageKey: string,
+    list: unknown[],
+  ): { amount: number; count: number } {
+    let amount = 0;
+    let count = 0;
+    const targetId = String(stageKey);
+
+    for (const row of list) {
+      if (!Array.isArray(row) || row.length < 3) continue;
+      if (String(row[1]) !== targetId) continue;
+      count += 1;
+      amount += parseNumberOrZero(row[2]);
+    }
+
+    return { amount, count };
+  }
+
+  async fetchStageRows(): Promise<Record<string, unknown>[]> {
+    const defaultEntityTypeApiKey =
+      this.state.defaultEntityTypeApiKey ?? 'defaultBusiType';
+
+    const res = await request({
+      url: STAGE_LIST_URL,
+      method: 'POST',
+      data: {
+        data: {
+          entityTypeApiKey: defaultEntityTypeApiKey,
+        },
+      },
+    });
+
+    return res.data || [];
+  }
+
+  buildStagesFromApi(
+    rows: any[], // 阶段列表
+    opportunityList: Record<string, unknown>[], // 商机列表
+    historyOpportunityList: unknown[], // 历史商机：SQL 二维数组行
+  ): StageTab[] {
+    console.log(
+      '[StageSwitch__c] buildStagesFromApi:',
+      rows,
+      opportunityList,
+      historyOpportunityList,
+    );
+    return rows.map((row, index) => {
+      const stageName = row.stageName;
+      const { amount, count } = this.getOpportunityStats(
+        stageName,
+        opportunityList,
+      );
+      const key = String(
+        row.id ?? row.apiKey ?? (stageName || `stage-${index}`),
+      );
+
+      // 根据商机ID，从历史商机列表中找到对应的商机
+      const { amount: historyAmount, count: historyCount } =
+        this.getHistoryOpportunityStats(key, historyOpportunityList);
+
+      const tab: StageTab = {
+        key,
+        name: stageName,
+        amount: formatAmountDisplay(amount),
+        count: count,
+        changes: {
+          amount: formatAmountDisplay(historyAmount),
+          count: historyCount,
+          amountDirection:
+            historyAmount < amount
+              ? 'up'
+              : historyAmount == amount
+              ? 'same'
+              : 'down',
+          countDirection:
+            historyCount < count
+              ? 'up'
+              : historyCount == count
+              ? 'same'
+              : 'down',
+        },
+      };
+      return tab;
+    });
+  }
+
+  async fetchAllData() {
+    this.setState({ loading: true, error: null });
+
+    try {
+      const [opportunityList, stageRows, historyOpportunityList] =
+        await Promise.all([
+          this.fetchOpportunityList(),
+          this.fetchStageRows(),
+          this.fetchHistoryOpportunityList(),
+        ]);
+
+      const stages = this.buildStagesFromApi(
+        stageRows,
+        opportunityList,
+        historyOpportunityList,
+      );
+
+      this.setState({
+        opportunityList,
+        stages,
+        loading: false,
+      });
+    } catch (e: unknown) {
+      console.error('StageSwitch 加载失败:', e);
+      const msg = e instanceof Error ? e.message : '加载失败';
+      this.setState({
+        loading: false,
+        error: msg,
+        opportunityList: [],
+        stages: [],
+      });
+    }
+  }
+
+  // 点击阶段切换时，更新当前激活的销售阶段
+  handleStageClick(stage: StageTab) {
+    const { onStageChange } = this.props;
+    if (onStageChange) {
+      onStageChange(stage);
+    }
+    // 广播事件：更新当前激活的销售阶段
+    const activeStage = extractStageKeyFromStageName(stage.name);
+    this.setState({ activeStage: activeStage });
+
+    this.onActiveStageChange({
+      activeStage,
+    });
+
+    // 触发一个广播事件
+    // NeoEvent.broadcast('updateActiveStage', activeStage);
+  }
+
+  @NeoEvent.function
+  async refreshData() {
+    await this.fetchAllData();
+  }
+
+  /**
+   * 与 pipelineFunnel 一致：传入 { relation, filter }，将重新拉取商机并合并阶段统计。
+   */
+  @NeoEvent.function
+  setFilter(filter?: any) {
+    if (isEqual(filter, this.state.filter)) {
+      return;
+    }
+    let defaultEntityTypeApiKey = this.state.defaultEntityTypeApiKey;
+    if (filter.businessTypeApiKey) {
+      defaultEntityTypeApiKey = filter.businessTypeApiKey;
+    }
+    console.log('[StageSwitch__c] setFilter:', filter);
+    this.setState(
+      { filter: filter, defaultEntityTypeApiKey: defaultEntityTypeApiKey },
+      () => {
+        this.fetchAllData();
+      },
+    );
+  }
+
+  /**
+   * 更新当前激活的销售阶段
+   */
+  @NeoEvent.function
+  updateActiveStage(activeStage?: string) {
+    if (isEqual(activeStage, this.state.activeStage)) {
+      return;
+    }
+    console.log('[StageSwitch__c] updateActiveStage:', activeStage);
+    this.setState({ activeStage: activeStage || '' });
+  }
+
+  @NeoEvent.dispatch
+  onActiveStageChange(eventData?: any) {}
+
+  render() {
+    const { className, style } = this.props;
+    const { activeStage, stages, loading, error } = this.state;
+
+    return (
+      <div
+        className={`stageSwitch__c ${className || ''}`}
+        style={style}
+        data-time="2026.4.15 01"
+      >
+        <Spin spinning={loading}>
+          {error ? (
+            <div
+              className="stageSwitch__c-error"
+              style={{ color: '#cf1322', fontSize: 12, marginBottom: 8 }}
+            >
+              {error}
+            </div>
+          ) : null}
+          <div className="stage-tabs">
+            {stages.map((stage) => (
+              <div
+                key={stage.key}
+                className={`stage-tab ${
+                  activeStage === extractStageKeyFromStageName(stage.name)
+                    ? 'active'
+                    : ''
+                }`}
+                onClick={() => this.handleStageClick(stage)}
+              >
+                <div className="stage-name">{stage.name}</div>
+                <div className="stage-amount-row">
+                  <span className="stage-amount">{stage.amount}</span>
+                  <span className="stage-count">({stage.count})</span>
+                </div>
+                {stage.changes && Object.keys(stage.changes).length > 0 && (
+                  <div className="stage-sub">
+                    <span
+                      className={`change-amount ${
+                        stage.changes.amountDirection === 'up'
+                          ? 'positive'
+                          : stage.changes.amountDirection === 'down'
+                          ? 'negative'
+                          : ''
+                      }`}
+                    >
+                      {stage.changes.amountDirection === 'up'
+                        ? '↑'
+                        : stage.changes.amountDirection === 'same'
+                        ? ''
+                        : '↓'}{' '}
+                      {stage.changes.amount}
+                    </span>
+                    <span> &nbsp; </span>
+                    <span
+                      className={`change-count ${
+                        stage.changes.countDirection === 'up'
+                          ? 'positive'
+                          : stage.changes.amountDirection === 'down'
+                          ? 'negative'
+                          : ''
+                      }`}
+                    >
+                      {stage.changes.countDirection === 'up'
+                        ? '↑'
+                        : stage.changes.countDirection === 'same'
+                        ? ''
+                        : '↓'}{' '}
+                      {stage.changes.count}
+                    </span>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </Spin>
+      </div>
+    );
+  }
+}
+
+export default StageSwitch;

package/template/neo-pipeline-cmps/src/components/stageSwitch__c/model.ts

@@ -0,0 +1,70 @@
+export class StageSwitchModel {
+  label: string = '阶段切换卡片';
+  description: string = '切换显示不同销售阶段的数据，包含金额、数量和变化趋势';
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/card.svg';
+  targetPage: string[] = ['all'];
+  targetDevice: string = 'all';
+
+  defaultComProps = {
+    /** 请求阶段列表接口时传入的 defaultEntityTypeApiKey */
+    // defaultEntityTypeApiKey: 'defaultBusiType',
+    stages: [] as unknown[],
+    activeStage: 'Prospecting',
+  };
+
+  events = [
+    {
+      apiKey: 'onActiveStageChange',
+      label: '当前激活阶段变动后',
+      helpText:
+        '当前激活阶段变动后触发；事件参数含 activeStage（当前激活阶段）',
+      eventParams:
+        '[{"apiKey":"eventParam","children":[{"apiKey":"activeStage","label":"当前激活阶段","type":"String"}],"label":"事件入参","type":"Object"}]',
+    },
+  ];
+
+  functions = [
+    {
+      apiKey: 'updateActiveStage',
+      label: '更新当前激活阶段',
+      helpTextKey: '设置当前激活的销售阶段',
+      funcInParams: [
+        {
+          apiKey: 'activeStage',
+          label: '当前激活阶段',
+          type: 'String',
+          required: false,
+        },
+      ],
+    },
+    {
+      apiKey: 'setFilter',
+      label: '设置过滤条件',
+      helpTextKey:
+        '设置与图表一致的 filter（closeDate / ownerId / entityType），并重新拉取商机',
+      funcInParams: [
+        {
+          apiKey: 'filter',
+          label: '过滤条件（relation + filter 数组）',
+          type: 'Object',
+          required: false,
+        },
+      ],
+    },
+    {
+      apiKey: 'refreshData',
+      label: '刷新数据',
+      helpTextKey: '重新拉取商机列表与阶段列表',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'panelInput',
+      name: 'defaultEntityTypeApiKey',
+      label: '业务类型 ApiKey（阶段列表接口）',
+    },
+  ];
+}
+
+export default StageSwitchModel;

package/template/{neo-bi-cmps → neo-pipeline-cmps}/src/components/stageSwitch__c/style.scss

@@ -1,8 +1,10 @@
-.stage-switch__c {
+.stageSwitch__c {
+  margin-top: 12px;
+
   .stage-tabs {
     display: flex;
     gap: 0;
-    margin-bottom: 20px;
+    margin-bottom: 12px;
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);