neo-cmp-cli 1.13.1 → 1.13.3

package/template/neo-web-entity-grid/src/components/createForm__c/model.ts

@@ -0,0 +1,130 @@
+/**
+ * @file Object Form 表单组件对接编辑器的描述文件
+ * @description 定义组件在 Neo 平台编辑器中的配置信息
+ * @author Neo Custom Widget CLI
+ * @version 1.0.0
+ */
+export class CreateFormModel {
+  /**
+   * 组件类型标识
+   * 用于标识组件的唯一性，在构建时根据当前组件目录名称自动生成
+   * 注意：此字段在构建时会被自动替换，不需要手动设置
+   */
+  // cmpType: string = 'createForm';
+
+  /** 组件名称，用于设置在编辑器左侧组件面板中展示的名称 */
+  label: string = '新增数据表单';
+
+  /** 组件描述，用于设置在编辑器左侧组件面板中展示的描述 */
+  description: string = '基于 XObject 的对象表单组件，用于新增数据';
+
+  /** 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示 */
+  // tags: string[] = ['自定义组件'];
+
+  /**
+   * 用于设置组件支持的页面类型
+   *
+   * 当前 NeoCRM 平台存在的页面类型：
+   * all:	1	全页面
+   * entityFormPage:	4	实体表单页
+   * customPage:	6	自定义页面
+   */
+  targetPage: string[] = ['all'];
+
+  /**
+   * 用于设置组件支持的终端类型
+   *
+   * 当前 NeoCRM 平台存在的终端类型：
+   * web:	网页端
+   * mobile: 移动端
+   */
+  targetDevice: string = 'web';
+
+  enableDuplicate: boolean = true;
+
+  /** 组件图标，用于设置在编辑器左侧组件面板中展示的图标 */
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/custom-form.svg';
+
+  /** 初次插入页面的默认属性数据 */
+  defaultComProps = {
+    formTitle: '新增数据表单',
+    showResetButton: true,
+    columnCount: 1,
+    xObjectDataApi: {
+      xObjectApiKey: 'opportunity',
+      fields: ['entityType', 'ownerId', 'opportunityName', 'accountId', 'money', 'closeDate'],
+    },
+  };
+
+  /**
+   * 声明当前组件会触发的所有事件
+   * 备注：页面设计器端可用于进行事件绑定，在组件属性配置模式中配置事件动作
+   */
+  events = [
+    {
+      apiKey: 'onSubmit', // 事件名称
+      label: '提交表单后', // 事件
+      helpText: '表单提交后触发该事件', // 信息icon hover 时的提示文本
+    },
+  ];
+
+  /**
+   * 组件属性配置模式
+   * 支持静态配置：propsSchema，优先级比 propsSchemaCreator 低
+   * 定义组件在编辑器中可配置的属性
+   */
+  propsSchema = [
+    {
+      type: 'panelInput',
+      name: 'formTitle',
+      label: '表单标题',
+      value: '新增数据表单',
+      placeholder: '请输入表单标题',
+    },
+    {
+      type: 'xObjectDataApi', // 用于获取实体业务数据列表的配置项
+      name: 'xObjectDataApi',
+      label: '实体数据源',
+      /*
+      value: {
+        xObjectApiKey: 'customContact__c',
+        fields: ['name', 'entityType', 'phone__c'],
+      },
+      */
+      placeholder: '请选择实体数据源',
+      custom: true,
+      showPage: false,
+      showPageSize: false,
+      showAutoFetchData: false,
+    },
+    {
+      type: 'panelSelect',
+      name: 'columnCount',
+      label: '表单列数',
+      value: 1,
+      placeholder: '请选择表单列数',
+      options: [
+        {
+          label: '单列',
+          value: 1,
+        },
+        {
+          label: '双列',
+          value: 2,
+        },
+        {
+          label: '三列',
+          value: 3,
+        },
+      ],
+    },
+    {
+      type: 'panelSwitch',
+      name: 'showResetButton',
+      label: '显示重置按钮',
+      defaultChecked: true,
+    },
+  ];
+}
+
+export default CreateFormModel;

package/template/neo-web-entity-grid/src/components/createForm__c/style.scss

@@ -0,0 +1,370 @@
+.createForm__c {
+  .form-header {
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+
+    .form-title {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+
+  .form-content {
+    .ant-form {
+      .ant-form-item {
+        margin-bottom: 20px;
+
+        .ant-form-item-label {
+          padding-bottom: 6px;
+
+          label {
+            font-weight: 500;
+            color: #262626;
+            font-size: 14px;
+
+            &::before {
+              display: inline-block;
+              margin-right: 4px;
+              color: #ff4d4f;
+              font-size: 14px;
+              font-family: SimSun, sans-serif;
+              line-height: 1;
+            }
+          }
+        }
+
+        .ant-input,
+        .ant-select-selector,
+        .ant-input-number,
+        .ant-picker {
+          border-radius: 4px;
+          border: 1px solid #d9d9d9;
+          transition: all 0.3s;
+
+          &:hover {
+            border-color: #40a9ff;
+          }
+
+          &:focus,
+          &.ant-input-focused,
+          &.ant-select-focused .ant-select-selector,
+          &.ant-picker-focused {
+            border-color: #40a9ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+          }
+        }
+
+        .ant-input-number {
+          width: 100%;
+        }
+
+        .ant-input-textarea {
+          textarea {
+            resize: vertical;
+            min-height: 80px;
+            border-radius: 4px;
+          }
+        }
+
+        .ant-picker {
+          width: 100%;
+        }
+
+        .ant-select {
+          width: 100%;
+        }
+      }
+
+      // 错误提示样式
+      .ant-form-item-has-error {
+        .ant-input,
+        .ant-select-selector,
+        .ant-input-number,
+        .ant-picker {
+          border-color: #ff4d4f;
+
+          &:focus {
+            border-color: #ff4d4f;
+            box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
+          }
+        }
+      }
+    }
+
+    .submit-success-message {
+      margin: 16px 0;
+      padding: 12px 16px;
+      background-color: #f6ffed;
+      border: 1px solid #b7eb8f;
+      border-radius: 4px;
+      color: #52c41a;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      animation: fadeIn 0.3s ease-in;
+
+      .anticon {
+        margin-right: 8px;
+        font-size: 16px;
+      }
+    }
+
+    .form-actions {
+      margin-top: 32px;
+      padding-top: 24px;
+      border-top: 1px solid #f0f0f0;
+      text-align: center;
+
+      .ant-space {
+        .ant-btn {
+          min-width: 100px;
+          height: 40px;
+          font-size: 15px;
+          border-radius: 4px;
+          font-weight: 500;
+          transition: all 0.3s;
+
+          &.ant-btn-primary {
+            background: #1890ff;
+            border-color: #1890ff;
+
+            &:hover {
+              background: #40a9ff;
+              border-color: #40a9ff;
+              transform: translateY(-2px);
+              box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+            }
+
+            &:active {
+              background: #096dd9;
+              border-color: #096dd9;
+              transform: translateY(0);
+            }
+
+            &:disabled {
+              background: #f5f5f5;
+              border-color: #d9d9d9;
+              color: rgba(0, 0, 0, 0.25);
+              transform: none;
+              box-shadow: none;
+            }
+          }
+
+          &:not(.ant-btn-primary) {
+            &:hover {
+              color: #40a9ff;
+              border-color: #40a9ff;
+              transform: translateY(-2px);
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            }
+
+            &:active {
+              color: #096dd9;
+              border-color: #096dd9;
+              transform: translateY(0);
+            }
+          }
+        }
+      }
+    }
+
+    .ant-empty {
+      padding: 40px 0;
+
+      .ant-empty-description {
+        color: #8c8c8c;
+        font-size: 14px;
+      }
+    }
+  }
+
+  // 动画效果
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .form-header {
+      margin-bottom: 16px;
+      padding-bottom: 12px;
+
+      .form-title {
+        font-size: 16px;
+      }
+    }
+
+    .form-content {
+      .ant-form {
+        .ant-form-item {
+          margin-bottom: 16px;
+
+          .ant-form-item-label {
+            label {
+              font-size: 13px;
+            }
+          }
+
+          .ant-input,
+          .ant-select-selector,
+          .ant-input-number,
+          .ant-picker {
+            font-size: 14px;
+          }
+        }
+      }
+
+      .form-actions {
+        margin-top: 24px;
+        padding-top: 16px;
+
+        .ant-space {
+          .ant-btn {
+            min-width: 80px;
+            height: 36px;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 576px) {
+    .form-header {
+      .form-title {
+        font-size: 15px;
+      }
+    }
+
+    .form-content {
+      .ant-form {
+        // 在小屏幕上强制单列显示
+        .ant-row {
+          .ant-col {
+            max-width: 100% !important;
+            flex: 0 0 100% !important;
+          }
+        }
+
+        .ant-form-item {
+          margin-bottom: 14px;
+
+          .ant-form-item-label {
+            label {
+              font-size: 13px;
+            }
+          }
+        }
+      }
+
+      .form-actions {
+        .ant-space {
+          width: 100%;
+
+          .ant-space-item {
+            flex: 1;
+          }
+
+          .ant-btn {
+            width: 100%;
+            min-width: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 全局样式覆盖
+.ant-card {
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  .ant-card-body {
+    padding: 24px;
+  }
+}
+
+// Spin 加载样式
+.ant-spin {
+  .ant-spin-dot {
+    font-size: 20px;
+  }
+
+  .ant-spin-text {
+    color: #8c8c8c;
+    font-size: 14px;
+  }
+}
+
+// Select 下拉样式优化
+.ant-select-dropdown {
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  .ant-select-item {
+    padding: 8px 12px;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    &.ant-select-item-option-selected {
+      background-color: #e6f7ff;
+      color: #1890ff;
+      font-weight: 500;
+    }
+  }
+}
+
+// DatePicker 日期选择器样式优化
+.ant-picker-dropdown {
+  .ant-picker-panel-container {
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+
+  .ant-picker-cell-selected {
+    .ant-picker-cell-inner {
+      background-color: #1890ff;
+    }
+  }
+
+  .ant-picker-cell:hover:not(.ant-picker-cell-selected) {
+    .ant-picker-cell-inner {
+      background-color: #f5f5f5;
+    }
+  }
+}
+
+// InputNumber 数字输入框样式优化
+.ant-input-number {
+  .ant-input-number-handler-wrap {
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  &:hover {
+    .ant-input-number-handler-wrap {
+      opacity: 1;
+    }
+  }
+
+  .ant-input-number-handler {
+    border-left: 1px solid #d9d9d9;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+  }
+}

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

@@ -0,0 +1,139 @@
+import * as React from 'react';
+// @ts-ignore
+import { NeoEntityGrid } from 'neo-ui-component-web';
+// 引入 neo-ui-common / BaseCmp
+// @ts-ignore
+import { BaseCmp, NeoEvent } from 'neo-ui-common';
+import './style.scss'; // 组件内容样式
+
+/** 与 NeoEntityGrid additionalConditions、searchForm customSearchEvent 约定一致 */
+export interface AdditionalConditionItem {
+  apiKey: string;
+  type: number;
+  value: unknown;
+  item?: number;
+  [key: string]: unknown;
+}
+
+interface NeoEntityGridProps {
+  objectApiKey: string;
+  disableSearch?: boolean;
+  className?: string;
+  render: (name: string, schema: any) => React.ReactNode;
+  additionalConditions?: AdditionalConditionItem[];
+  [key: string]: any;
+}
+
+interface NeoEntityGridCmpState {
+  additionalConditions: AdditionalConditionItem[];
+}
+
+export default class NeoEntityGridCmp extends BaseCmp<
+  NeoEntityGridProps,
+  NeoEntityGridCmpState
+> {
+  constructor(props: NeoEntityGridProps) {
+    super(props);
+    this.state = {
+      additionalConditions: props.additionalConditions ?? [],
+    };
+    this.handleCustomSearchEvent = this.handleCustomSearchEvent.bind(this);
+  }
+
+  componentDidMount() {
+    try {
+      // 监听 customSearchEvent 广播事件
+      NeoEvent.listen('customSearchEvent', this.handleCustomSearchEvent);
+    } catch {
+      // NeoEvent 不可用时忽略
+      console.error(' NeoEvent.listen / 广播事件 不可用。');
+    }
+  }
+
+  /**
+   * 接收 searchForm 等组件发出的 customSearchEvent（payload 含 xObjectApiKey、conditions）
+   */
+  @NeoEvent.function
+  handleCustomSearchEvent(eventData: any) {
+    console.log('设置自定义筛选条件（handleCustomSearchEvent）: ', eventData, this.props);
+
+    if (!eventData) {
+      this.setState({ additionalConditions: [] });
+      return;
+    }
+    if (Array.isArray(eventData)) {
+      this.setState({
+        additionalConditions: eventData as AdditionalConditionItem[],
+      });
+      return;
+    }
+    const payload = eventData as {
+      xObjectApiKey?: string;
+      conditions?: AdditionalConditionItem[];
+    };
+    const { xObjectApiKey, conditions } = payload;
+    const gridKey = this.props.objectApiKey;
+    if (xObjectApiKey && gridKey && xObjectApiKey !== gridKey) {
+      return;
+    }
+    this.setState({
+      additionalConditions: Array.isArray(conditions) ? conditions : [],
+    });
+  }
+
+  render() {
+    const {
+      className,
+      objectApiKey,
+      pattern,
+      hiddenHeader,
+      showView,
+      enableChangeView,
+      defaultViewId,
+      disableSearch,
+      canCreate,
+      canImport,
+      editable,
+      withOrder,
+      withCheck,
+      enableToolbar,
+      disableExport,
+      disablePagination,
+      paginationPageSize,
+      autoHeight,
+      height,
+      onRecordChange,
+      ...restProps
+    } = this.props;
+    console.log('entityGrid2__c: ', this.props, this);
+
+    return (
+      <div className={`entityGrid2__c ${className}`}>
+        <NeoEntityGrid
+          render={this.props.render}
+          objectApiKey={objectApiKey || 'account'}
+          pattern={'entityView'}
+          // defaultViewId="default_view" // 默认展示的列表视图
+          hiddenHeader={hiddenHeader ?? false}
+          showView={showView ?? true}
+          enableChangeView={enableChangeView ?? true}
+          defaultViewId={defaultViewId ?? 'default_view'}
+          disableSearch={disableSearch ?? false}
+          canCreate={canCreate ?? true}
+          canImport={canImport ?? true}
+          editable={editable ?? true}
+          withOrder={withOrder ?? true}
+          withCheck={withCheck ?? true}
+          enableToolbar={enableToolbar ?? true}
+          disableExport={disableExport ?? false}
+          disablePagination={disablePagination ?? false}
+          paginationPageSize={paginationPageSize ?? 20}
+          autoHeight={autoHeight ?? false}
+          height={height ?? '500px'}
+          customEmptyMsg="暂无数据，请点击「新建」按钮创建"
+          additionalConditions={this.state.additionalConditions}
+        />
+      </div>
+    );
+  }
+}

package/template/{neo-web-cmps/src/components/entityGrid4__c → neo-web-entity-grid/src/components/entityGrid2__c}/model.ts

@@ -9,10 +9,10 @@ export class NeoEntityGridModel {
   // cmpType: string = 'entityList__c';
 
   // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
-  label: string = '列表/自定义筛选条件';
+  label: string = '自定义筛选列表';
 
   // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
-  description: string = '数据列表示例: 基础大列表，支持自定义筛选条件';
+  description: string = '数据列表示例: 自定义表单筛选 + 大列表实时响应联动';
 
   // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示
   // tags: string[] = ['自定义组件'];
@@ -42,7 +42,7 @@ export class NeoEntityGridModel {
 
   // 初次插入页面的默认属性数据
   defaultComProps = {
-    objectApiKey: 'account',
+    objectApiKey: 'customContact__c',
     funPermission: true, // 设计器添加时绕过职能权限检查，确保能正常渲染列表
     hiddenHeader: false,
     showView: true,
@@ -61,6 +61,23 @@ export class NeoEntityGridModel {
     height: '500px',
   };
 
+  // 当前组件支持的函数列表（其他组件可触发当前组件的函数）
+  functions = [
+    {
+      apiKey: 'handleCustomSearchEvent',
+      label: '更新筛选条件',
+      helpTextKey: '更新自定义筛选条件',
+      funcInParams: [ // 定义组件函数入参
+        {
+          apiKey: 'eventData',
+          label: '自定义筛选条件',
+          type: 'Array',
+          required: true
+        },
+      ]
+    },
+  ];
+
   /**
    * 组件面板配置，用于生成编辑器右侧属性配置面板内容
    */

package/template/{neo-web-cmps/src/components/entityGrid4__c → neo-web-entity-grid/src/components/entityGrid2__c}/style.scss

@@ -2,7 +2,7 @@
   --padding-bottom: 12px;
 }
 
-.entityGrid4__c {
+.entityGrid2__c {
   position: relative;
   box-sizing: border-box;