neo-cmp-cli 1.13.0 → 1.13.2

package/template/neo-web-entity-grid/src/components/searchForm__c/index.tsx

@@ -0,0 +1,667 @@
+/**
+ * @file SearchForm 自定义查询表单组件
+ * @description 基于 Neo 平台的 XObject 字段元数据渲染筛选表单，点击查询输出 conditions（type 1 等于 / type 3 包含）
+ */
+import * as React from 'react';
+import {
+  Form,
+  Input,
+  Select,
+  Button,
+  message,
+  Card,
+  DatePicker,
+  InputNumber,
+  Space,
+  Spin,
+  Empty,
+  Row,
+  Col,
+} from 'antd';
+import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
+// @ts-ignore
+import { xObject } from 'neo-open-api'; // Neo Open API
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+// 引入 neo-ui-common / NeoEvent
+// @ts-ignore
+import { NeoEvent } from 'neo-ui-common';
+import './style.scss';
+
+const { Option } = Select;
+
+/** 单条查询条件（与 NeoEntityGrid additionalConditions 等约定一致：1 等于，3 包含） */
+export interface CustomQueryCondition {
+  apiKey: string;
+  type: 1 | 3;
+  value: unknown;
+}
+
+/** 点击查询时对外传递的自定义查询数据 */
+export interface CustomQueryPayload {
+  xObjectApiKey: string;
+  conditions: CustomQueryCondition[];
+  data?: Object;
+}
+
+/**
+ * 组件属性接口
+ */
+interface SearchFormProps {
+  /** XObject 实体对象的 API Key，用于标识要操作的数据对象 */
+  xObjectDataApi: {
+    xObjectApiKey: string;
+    fields?: string[];
+    fieldDescList?: any[];
+  };
+  /** Neo 平台传递的数据，包含系统信息等 */
+  data?: any;
+  /** 表单标题 */
+  formTitle?: string;
+  /** 是否显示重置按钮 */
+  showResetButton?: boolean;
+  /** 表单列数（1列或2列） */
+  columnCount?: 1 | 2;
+  /** 查询提交后的回调（与 onSubmit 事件二选一或同时使用） */
+  onSuccess?: (data: CustomQueryPayload) => void;
+  /** 是否为自定义实体对象 */
+  custom?: boolean;
+  className?: string;
+}
+
+/**
+ * 字段信息接口
+ */
+interface FieldInfo {
+  /** 字段名称 */
+  name: string;
+  /** 字段显示标签 */
+  label: string;
+  /** 字段 API Key */
+  apiKey: string;
+  /** 字段类型 */
+  type: string;
+  /** 字段项类型 */
+  itemType: string;
+  /** 复选框选项列表 */
+  checkitem: any[];
+  /** 下拉选择选项列表 */
+  selectitem?: any[];
+  /** 是否必填 */
+  required: boolean;
+}
+
+/**
+ * 组件状态接口
+ */
+interface SearchFormState {
+  /** 表单标题 */
+  title?: string;
+  /** 字段列表 */
+  fieldList: FieldInfo[];
+  /** 加载状态 */
+  loading: boolean;
+  /** 查询请求中状态 */
+  submitting: boolean;
+  /** 错误信息 */
+  error: string | null;
+  /** 表单实例 */
+  form: any;
+  /** 业务类型列表 */
+  entityTypeList: any[];
+}
+
+/**
+ * 自定义查询表单：收集表单项 apiKey + value，并按字段类型映射查询运算符 type（输入类 3，下拉/日期/单选类 1）
+ */
+export default class SearchForm extends React.PureComponent<
+  SearchFormProps,
+  SearchFormState
+> {
+  constructor(props: SearchFormProps) {
+    super(props);
+
+    // 初始化组件状态
+    this.state = {
+      fieldList: [],
+      loading: false,
+      submitting: false,
+      error: null,
+      form: null,
+      entityTypeList: [],
+    };
+
+    // 绑定方法上下文
+    this.loadFieldList = this.loadFieldList.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+  }
+
+  componentDidMount() {
+    const { xObjectDataApi } = this.props;
+    const { xObjectApiKey } = xObjectDataApi || {};
+
+    if (xObjectApiKey) {
+      // 初始化字段列表和业务类型列表
+      this.getEntityTypeList(xObjectApiKey);
+      this.loadFieldList();
+    }
+  }
+
+  /**
+   * 组件更新后执行
+   * 当 xObjectApiKey 发生变化时重新加载字段列表
+   */
+  async componentDidUpdate(prevProps: SearchFormProps) {
+    const { xObjectApiKey, fields } = this.props.xObjectDataApi || {};
+    const { xObjectApiKey: prevXObjectApiKey, fields: prevFields } =
+      prevProps.xObjectDataApi || {};
+
+    if (xObjectApiKey !== prevXObjectApiKey || !isEqual(fields, prevFields)) {
+      if (xObjectApiKey) {
+        await this.loadFieldList();
+        await this.getEntityTypeList(xObjectApiKey);
+      } else {
+        this.setState({
+          fieldList: [],
+          error: null,
+        });
+      }
+    }
+  }
+
+  /**
+   * 获取业务类型列表
+   * 用于下拉选择框的选项数据
+   */
+  async getEntityTypeList(xObjectApiKey?: string) {
+    const { xObjectDataApi } = this.props;
+    const curXObjectApiKey = xObjectApiKey || xObjectDataApi?.xObjectApiKey;
+    try {
+      const result = await xObject.getEntityTypeList(curXObjectApiKey);
+      if (result && result.status) {
+        const records = result.data || [];
+        this.setState({
+          entityTypeList: records,
+        });
+      }
+    } catch (error) {
+      console.error('获取业务类型列表失败:', error);
+    }
+  }
+
+  /**
+   * 加载字段列表
+   * 从 Neo 平台获取 XObject 的字段描述信息
+   */
+  async loadFieldList() {
+    const { xObjectDataApi } = this.props || {};
+
+    this.setState({ loading: true, error: null });
+
+    try {
+      // 方式一：直接从 props.xObjectDataApi 中获取字段描述
+      if (xObjectDataApi && xObjectDataApi.fieldDescList) {
+        this.setState({
+          fieldList: xObjectDataApi.fieldDescList,
+          loading: false,
+        });
+      } else {
+        // 方式二：自行通过 OpenAPI SDK 获取字段描述
+        if (!xObjectDataApi.xObjectApiKey) {
+          this.setState({ loading: false });
+          return;
+        }
+        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,
+            loading: false,
+          });
+        } else {
+          this.setState({
+            error: '获取字段列表失败',
+            loading: false,
+          });
+        }
+      }
+    } catch (error) {
+      console.error('获取字段列表失败:', error);
+      message.error('获取字段列表失败');
+      this.setState({
+        error: '获取字段列表失败',
+        loading: false,
+      });
+    }
+  }
+
+  /** 下拉、日期、单选/多选等：查询运算符为等于（1）；其余按输入类处理为包含（3） */
+  private static getConditionType(fieldType: string): 1 | 3 {
+    const equalsTypes = new Set([
+      'entityType',
+      'entitytype',
+      'picklist',
+      'multipicklist',
+      'date',
+      'datetime',
+      'time',
+    ]);
+    return equalsTypes.has(fieldType) ? 1 : 3;
+  }
+
+  private normalizeQueryValue(field: FieldInfo, raw: unknown): unknown {
+    if (raw === undefined || raw === null) return raw;
+    if (Array.isArray(raw)) {
+      return raw.length === 0 ? raw : raw.join(',');
+    }
+    const t = field.type;
+    if (
+      (t === 'date' || t === 'datetime' || t === 'time') &&
+      raw !== '' &&
+      typeof raw === 'object' &&
+      typeof (raw as { valueOf?: () => number }).valueOf === 'function'
+    ) {
+      return (raw as { valueOf: () => number }).valueOf();
+    }
+    if (
+      (t === 'date' || t === 'datetime' || t === 'time') &&
+      raw !== '' &&
+      !(typeof raw === 'number')
+    ) {
+      const n = new Date(raw as string | Date).getTime();
+      return Number.isNaN(n) ? raw : n;
+    }
+    return raw;
+  }
+
+  private isEmptyQueryValue(v: unknown): boolean {
+    if (v === undefined || v === null) return true;
+    if (v === '') return true;
+    if (Array.isArray(v) && v.length === 0) return true;
+    return false;
+  }
+
+  /**
+   * 页面设计器事件：点击查询后触发，参数为自定义查询数据
+   */
+  @NeoEvent.dispatch
+  onQuery(customSearchData?: CustomQueryPayload) {
+    // 触发一个广播事件
+    // console.log('触发了一个广播事件 customSearchEvent:', customSearchData);
+    // NeoEvent.broadcast('customSearchEvent', customSearchData);
+  }
+
+  /**
+   * 点击查询：校验表单，组装 apiKey + value + type，触发 onSubmit
+   */
+  handleSubmit() {
+    const form = this.state.form;
+    if (!form) return;
+
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
+    if (!xObjectApiKey) {
+      message.error('请先选择要操作的对象');
+      return;
+    }
+
+    this.setState({ submitting: true });
+
+    form
+      .validateFields()
+      .then((values: Record<string, unknown>) => {
+        const { fieldList } = this.state;
+
+        const conditions: CustomQueryCondition[] = [];
+
+        Object.keys(values).forEach((apiKey) => {
+          const field = fieldList.find((f) => f.apiKey === apiKey);
+          if (!field) return;
+
+          const raw = values[apiKey];
+          if (this.isEmptyQueryValue(raw)) return;
+
+          const value = this.normalizeQueryValue(field, raw);
+          if (this.isEmptyQueryValue(value)) return;
+
+          conditions.push({
+            apiKey,
+            type: SearchForm.getConditionType(field.type),
+            value,
+          });
+        });
+
+        const payload: CustomQueryPayload = {
+          xObjectApiKey, // 冗余数据
+          conditions, // 冗余数据
+          data: { // 事件动作的入参数据
+            xObjectApiKey,
+            conditions
+          }
+        };
+
+        this.onQuery(payload);
+        if (this.props.onSuccess) {
+          this.props.onSuccess(payload);
+        }
+      })
+      .catch(() => {
+        /* 表单校验未通过 */
+      })
+      .finally(() => {
+        this.setState({ submitting: false });
+      });
+  }
+
+  /**
+   * 处理表单重置
+   */
+  handleReset() {
+    this.state.form?.resetFields();
+    message.info('表单已重置');
+  }
+
+  /**
+   * 渲染表单内容
+   * 根据字段类型动态生成对应的输入组件
+   * @returns 表单 JSX 元素
+   */
+  renderForm() {
+    const { fieldList, entityTypeList } = this.state;
+    const { xObjectApiKey, fields } = this.props.xObjectDataApi || {};
+    const { columnCount = 1 } = this.props;
+
+    let curFieldList = fieldList;
+
+    // 如果指定了 fields，则只显示指定的字段
+    if (fields && fields.length > 0) {
+      curFieldList = fieldList.filter((field) => fields.includes(field.apiKey));
+    }
+
+    // 如果没有选择对象，显示提示信息
+    if (!xObjectApiKey) {
+      return (
+        <Empty
+          description="请先选择要操作的对象"
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      );
+    }
+
+    // 如果字段列表为空，显示提示信息
+    if (curFieldList.length === 0) {
+      return (
+        <Empty
+          description="暂无可用字段"
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      );
+    }
+
+    const formItemLayout =
+      columnCount === 2
+        ? {
+            labelCol: { span: 8 },
+            wrapperCol: { span: 16 },
+          }
+        : {
+            labelCol: { span: 4 },
+            wrapperCol: { span: 20 },
+          };
+
+    return (
+      <Form
+        ref={(form) => this.setState({ form })}
+        layout="horizontal"
+        {...formItemLayout}
+      >
+        <Row gutter={16}>
+          {curFieldList.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="请选择业务类型" allowClear>
+                    {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}`} allowClear>
+                    {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}
+                    showCount
+                    maxLength={500}
+                  />
+                );
+                break;
+              case 'multipicklist':
+                // 多选下拉框
+                inputComponent = (
+                  <Select
+                    placeholder={`请选择${field.label}`}
+                    mode="multiple"
+                    allowClear
+                  >
+                    {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}
+                    style={{ width: '100%' }}
+                  />
+                );
+                break;
+              case 'date':
+                // 日期选择器
+                inputComponent = (
+                  <DatePicker
+                    placeholder={`请选择${field.label}`}
+                    format={'YYYY/MM/DD'}
+                    style={{ width: '100%' }}
+                  />
+                );
+                break;
+              case 'time':
+                // 时间选择器
+                inputComponent = (
+                  <DatePicker
+                    placeholder={`请选择${field.label}`}
+                    format={'HH:mm:ss'}
+                    showTime={true}
+                    style={{ width: '100%' }}
+                  />
+                );
+                break;
+              case 'int':
+              case 'float':
+                // 数字输入框
+                inputComponent = (
+                  <InputNumber
+                    placeholder={`请输入${field.label}`}
+                    style={{ width: '100%' }}
+                  />
+                );
+                break;
+              case 'email':
+                // 邮箱输入框
+                inputComponent = (
+                  <Input placeholder={`请输入${field.label}`} type="email" />
+                );
+                break;
+              case 'url':
+                // URL 输入框
+                inputComponent = (
+                  <Input placeholder={`请输入${field.label}`} type="url" />
+                );
+                break;
+              case 'phone':
+                // 电话号码输入框
+                inputComponent = (
+                  <Input placeholder={`请输入${field.label}`} type="tel" />
+                );
+                break;
+              default:
+                // 默认文本输入框
+                inputComponent = (
+                  <Input placeholder={`请输入${field.label}`} maxLength={200} />
+                );
+            }
+
+            const colSpan = columnCount === 2 ? 12 : 24;
+
+            return (
+              <Col span={colSpan} key={field.apiKey}>
+                <Form.Item
+                  name={field.apiKey}
+                  label={field.label}
+                  /*
+                  required={field.required ?? false}
+                  rules={[
+                    {
+                      required: field.required,
+                      message: `请${
+                        field.type === 'picklist' ||
+                        field.type === 'multipicklist' ||
+                        field.type === 'entityType' ||
+                        field.type === 'entitytype' ||
+                        field.type === 'date' ||
+                        field.type === 'datetime' ||
+                        field.type === 'time'
+                          ? '选择'
+                          : '输入'
+                      }${field.label}`,
+                    },
+                  ]}
+                  */
+                >
+                  {inputComponent}
+                </Form.Item>
+              </Col>
+            );
+          })}
+        </Row>
+      </Form>
+    );
+  }
+
+  /**
+   * 渲染组件
+   * @returns 组件 JSX 元素
+   */
+  render() {
+    const { title, loading, submitting, error } = this.state;
+    const { formTitle, className, showResetButton = true, data } = this.props;
+
+    // 测试输出
+    console.log('this.props:', this.props);
+
+    const curAmisData = data || {};
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+    const { xObjectApiKey } = this.props.xObjectDataApi || {};
+
+    const displayTitle = formTitle || title || '自定义筛选条件';
+
+    return (
+      <div className={`searchForm__c ${className}`}>
+        <Card>
+          <div className="form-header">
+            <h3 className="form-title">
+              {displayTitle}
+              {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+            </h3>
+          </div>
+
+          <div className="form-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.loadFieldList}>
+                        重新加载
+                      </Button>
+                    </div>
+                  }
+                />
+              ) : (
+                <>
+                  {this.renderForm()}
+                  <div className="form-actions">
+                    <Space size="middle">
+                      {showResetButton && (
+                        <Button
+                          icon={<ReloadOutlined />}
+                          onClick={this.handleReset}
+                          disabled={submitting}
+                        >
+                          重置
+                        </Button>
+                      )}
+                      <Button
+                        type="primary"
+                        icon={<SearchOutlined />}
+                        onClick={this.handleSubmit}
+                        loading={submitting}
+                        disabled={!xObjectApiKey}
+                      >
+                        {submitting ? '查询中...' : '查询'}
+                      </Button>
+                    </Space>
+                  </div>
+                </>
+              )}
+            </Spin>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+}