neo-cmp-cli 1.8.3 → 1.8.6

package/template/develop/neo-custom-cmp-template/src/components/contactForm/style.scss

@@ -0,0 +1,120 @@
+.contact-form-container {
+  .contact-form-card {
+    .ant-card-head {
+      border-bottom: 1px solid #f0f0f0;
+
+      .ant-card-head-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #262626;
+      }
+    }
+
+    .contact-form {
+      .ant-form-item {
+        margin-bottom: 20px;
+
+        .ant-form-item-label {
+          padding-bottom: 4px;
+
+          label {
+            font-weight: 500;
+            color: #262626;
+
+            &.ant-form-item-required::before {
+              color: #ff4d4f;
+            }
+          }
+        }
+
+        .ant-input,
+        .ant-select-selector {
+          border-radius: 6px;
+          border-color: #d9d9d9;
+
+          &:hover {
+            border-color: #40a9ff;
+          }
+
+          &:focus,
+          &.ant-select-focused .ant-select-selector {
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+          }
+        }
+
+        .ant-select {
+          .ant-select-selector {
+            height: 40px;
+
+            .ant-select-selection-item {
+              line-height: 38px;
+            }
+          }
+        }
+
+        .ant-input {
+          height: 40px;
+        }
+      }
+
+      .form-actions {
+        margin-bottom: 0;
+        padding-top: 16px;
+        border-top: 1px solid #f0f0f0;
+        text-align: right;
+
+        .ant-btn {
+          height: 40px;
+          padding: 8px 24px;
+          border-radius: 6px;
+          font-weight: 500;
+
+          &.ant-btn-primary {
+            background-color: #1890ff;
+            border-color: #1890ff;
+
+            &:hover {
+              background-color: #40a9ff;
+              border-color: #40a9ff;
+            }
+
+            &:active {
+              background-color: #096dd9;
+              border-color: #096dd9;
+            }
+          }
+
+          &:not(.ant-btn-primary) {
+            color: #262626;
+            background-color: #fff;
+            border-color: #d9d9d9;
+
+            &:hover {
+              color: #1890ff;
+              border-color: #1890ff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .contact-form-container {
+    .contact-form-card {
+      .contact-form {
+        .form-actions {
+          text-align: center;
+
+          .ant-btn {
+            width: 100%;
+            margin: 4px 0;
+          }
+        }
+      }
+    }
+  }
+}

package/template/develop/neo-custom-cmp-template/src/components/neoEntityGrid/README.md

@@ -0,0 +1,115 @@
+# Neo Entity Grid 组件
+
+这是一个基于 neo-ui-component-web 的 EntityGrid 和 EntityGridStore 的自定义组件。
+
+## 功能特性
+
+- 支持实体表格的展示和操作
+- 可配置实体 API Key、表格类型、选择模式等
+- 支持多选和单选模式
+- 集成 neo-ui-component-web 的 EntityGrid 组件
+
+## 使用方法
+
+### 基本用法
+
+```tsx
+import NeoEntityGrid from './components/neo-entity-grid';
+
+<NeoEntityGrid
+  title="产品列表"
+  objectApiKey="account"
+  tableType="lookup"
+  selectionMode="multiple"
+  backgroundImage="https://example.com/image.jpg"
+  imgCount={3}
+  commentCount={2025}
+/>
+```
+
+### 属性配置
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| title | string | - | 组件标题 |
+| objectApiKey | string | 'account' | 实体API Key |
+| tableType | string | 'lookup' | 表格类型 (lookup/list/related) |
+| selectionMode | string | 'multiple' | 选择模式 (single/multiple/none) |
+| showHeader | boolean | true | 是否显示头部 (工具栏、筛选等) |
+| data | any | - | 组件数据 |
+
+### 选择模式说明
+
+- **single**: 单选模式
+- **multiple**: 多选模式
+- **none**: 无选择模式
+
+### 显示控制说明
+- **showHeader**: 控制是否显示表格头部，包括工具栏、筛选条件等
+
+### 使用示例
+
+#### 1. 完整表格（默认）
+```tsx
+<NeoEntityGrid
+  title="账户列表"
+  objectApiKey="account"
+  tableType="lookup"
+  selectionMode="multiple"
+  showHeader={true}
+/>
+```
+
+#### 2. 不带底部的表格
+```tsx
+<NeoEntityGrid
+  title="账户列表"
+  objectApiKey="account"
+  tableType="list"
+  selectionMode="none"
+  showHeader={true}
+/>
+```
+
+#### 3. 纯数据表格（无头部和底部）
+```tsx
+<NeoEntityGrid
+  title="账户列表"
+  objectApiKey="account"
+  tableType="list"
+  selectionMode="none"
+  showHeader={false}
+/>
+```
+
+## 技术实现
+
+### EntityGridStore 配置
+
+组件内部会自动创建 EntityGridStore 实例，配置如下：
+
+```typescript
+const entityGridStore = EntityGridStore.create({
+  objectApiKey: 'account',
+  pattern: 'pickView',
+  tableType: 'lookup',
+  selectionMode: 'multiple',
+  skipExt: true,
+  funPermission: true,
+  height: '100%',
+  className: 'neo-entity-view',
+  entity: {
+    objectId: 1,
+    apiKey: objectApiKey,
+    custom: false
+  },
+  items: [],
+  currentPage: 1,
+  pageSize: 20,
+  totalSize: 0,
+});
+```
+
+## 注意事项
+1. 组件需要在 Neo 环境中使用，需要相应的上下文支持
+3. 确保有相应的权限配置

package/template/develop/neo-custom-cmp-template/src/components/neoEntityGrid/index.tsx

@@ -0,0 +1,304 @@
+import * as React from 'react';
+// @ts-ignore
+import { EntityGrid, EntityGridStore } from 'neo-ui-component-web';
+import axiosFetcher from '../../utils/axiosFetcher';
+import './style.scss'; // 组件内容样式
+
+interface NeoEntityGridProps {
+  title: string;
+  objectApiKey?: string;
+  tableType?: string;
+  selectionMode?: string;
+  data?: any;
+  env?: any;
+  showFooter?: boolean; // 是否显示 footer
+  showHeader?: boolean; // 是否显示 header
+}
+
+export default class NeoEntityGrid extends React.PureComponent<NeoEntityGridProps> {
+  private entityGridStore: any;
+
+  private entityGridRef: React.RefObject<EntityGrid>;
+
+  constructor(props: NeoEntityGridProps) {
+    super(props);
+    this.entityGridRef = React.createRef();
+    this.onSelectedCall = this.onSelectedCall.bind(this);
+    this.initStore();
+  }
+
+  shouldComponentUpdate(nextProps: Readonly<NeoEntityGridProps>): boolean {
+    if (nextProps.objectApiKey !== this.props.objectApiKey) {
+      // this.initStore();
+    }
+    const entityGridRef = this.entityGridRef.current || {};
+    const nexObj = entityGridRef.nexObj;
+
+    const {
+      title,
+      objectApiKey = 'account',
+      tableType = 'lookup',
+      selectionMode = 'multiple',
+      showFooter = false,
+      showHeader = true,
+      ...restProps
+    } = this.props;
+
+    entityGridRef.resetGrid({
+      // ...restProps,
+      pattern: 'pickView',
+      objectApiKey,
+      name: `${objectApiKey}Picker`,
+      tableType,
+      selectionMode,
+      skipExt: true,
+      onSelectedCall: this.onSelectedCall,
+      funPermission: true,
+      nexObj,
+      // store: this.entityGridStore,
+    });
+
+    // 不重新渲染整个组件
+    return false;
+  }
+
+  initStore() {
+    const {
+      objectApiKey = 'account',
+      tableType = 'lookup',
+      selectionMode = 'multiple',
+      env,
+      showFooter = false,
+      showHeader = true,
+    } = this.props;
+
+    try {
+      // 生成唯一的实例ID
+      const instanceId = `entityGrid_${objectApiKey}_${Date.now()}_${Math.random()
+        .toString(36)
+        .substr(2, 9)}`;
+
+      // 创建真正的 EntityGridStore 实例
+      this.entityGridStore = EntityGridStore.create({
+        id: instanceId,
+        objectApiKey,
+        pattern: 'pickView',
+        tableType,
+        selectionMode,
+        skipExt: true,
+        funPermission: true,
+        height: '100%',
+        className: 'neo-entity-view',
+        entity: {
+          objectId: 1,
+          apiKey: objectApiKey,
+          custom: false,
+        },
+        items: [
+          { apiKey: 'name', label: '名称', type: 'text' },
+          { apiKey: 'code', label: '编码', type: 'text' },
+          { apiKey: 'status', label: '状态', type: 'select' },
+        ],
+        currentPage: 1,
+        pageSize: 20,
+        totalSize: 0,
+        rowData: [],
+        selectedData: [],
+        selectedIds: [],
+        filterModel: [],
+        sortModel: [],
+        displayMode: 'list',
+        loading: false,
+        error: null,
+        hasPermission: true,
+        gridFooterVisible: false, // 控制 footer 显示
+        headerBottomVisible: showHeader, // 控制 header 显示
+        gridAmisJson: {
+          type: 'neoGrid',
+          name: 'list',
+          height: '100%',
+        },
+        fetcher: axiosFetcher,
+        env: env || {},
+        uniqueName: instanceId,
+        apiKey: objectApiKey,
+        // 添加其他必要的配置
+        requestConfig: {
+          url: '/api/entity/list',
+          method: 'POST',
+          data: {},
+        },
+        // 添加必要的方法
+        getFooterAmis: (options: any) => ({
+          type: 'container',
+          body: '分页信息',
+          ...options,
+        }),
+        getSelectedData: () => this.entityGridStore?.selectedData || [],
+        setSelectedRowsId: (ids: any) => {
+          this.entityGridStore.selectedIds = ids;
+        },
+        getGridStatus: () => ({ loading: false, error: null }),
+        deselectAll: () => {
+          this.entityGridStore.selectedData = [];
+          this.entityGridStore.selectedIds = [];
+        },
+      });
+
+      console.log('EntityGridStore 创建成功:', this.entityGridStore);
+    } catch (error) {
+      console.error('EntityGridStore 创建失败:', error);
+      // 创建一个简单的 fallback store
+      this.entityGridStore = EntityGridStore.create({
+        id: 'fallback_store',
+        objectApiKey,
+        pattern: 'pickView',
+        tableType: 'lookup',
+        selectionMode: 'multiple',
+        skipExt: true,
+        funPermission: true,
+        height: '100%',
+        className: 'neo-entity-view',
+        entity: {
+          objectId: 1,
+          apiKey: objectApiKey,
+          custom: false,
+        },
+        items: [],
+        currentPage: 1,
+        pageSize: 20,
+        totalSize: 0,
+        rowData: [],
+        selectedData: [],
+        selectedIds: [],
+        filterModel: [],
+        sortModel: [],
+        displayMode: 'list',
+        loading: false,
+        error: error.message,
+        hasPermission: true,
+        gridFooterVisible: false,
+        headerBottomVisible: showHeader, // 控制 header 显示
+        gridAmisJson: {
+          type: 'neoGrid',
+          name: 'list',
+          height: '100%',
+        },
+        fetcher: axiosFetcher,
+        env: {},
+        uniqueName: 'fallback_store',
+        apiKey: this.props.objectApiKey || 'account',
+        requestConfig: {
+          url: '/api/entity/list',
+          method: 'POST',
+          data: {},
+        },
+        // 添加必要的方法
+        getFooterAmis: (options: any) => ({
+          type: 'container',
+          body: '分页信息',
+          ...options,
+        }),
+        getSelectedData: () => this.entityGridStore?.selectedData || [],
+        setSelectedRowsId: (ids: any) => {
+          this.entityGridStore.selectedIds = ids;
+        },
+        getGridStatus: () => ({ loading: false, error: null }),
+        deselectAll: () => {
+          this.entityGridStore.selectedData = [];
+          this.entityGridStore.selectedIds = [];
+        },
+      });
+    }
+  }
+
+  onSelectedCall(item: any) {
+    console.log('onSelectedCall:', item);
+  }
+
+  componentWillUnmount() {
+    // 清理 store 实例
+    if (this.entityGridStore) {
+      this.entityGridStore = null;
+    }
+  }
+
+  render() {
+    const {
+      title,
+      objectApiKey = 'account',
+      tableType = 'lookup',
+      selectionMode = 'multiple',
+      showFooter = false,
+      showHeader = true,
+      ...restProps
+    } = this.props;
+    console.log('当前自定义组件：', this.props, this, this.entityGridStore);
+    const curAmisData = this.props.data || {};
+
+    const userInfo = curAmisData.__NeoCurrentUser;
+    const systemInfo = curAmisData.__NeoSystemInfo || {};
+
+    // 如果 store 创建失败，显示错误信息
+    if (this.entityGridStore?.error) {
+      return (
+        <div className="neo-entity-grid-container">
+          <div className="news-title">
+            {title ||
+              '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。'}
+            {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+          </div>
+          <div className="entity-grid-wrapper">
+            <div
+              style={{
+                padding: '20px',
+                textAlign: 'center',
+                color: '#ff4d4f',
+                backgroundColor: '#fff2f0',
+                border: '1px solid #ffccc7',
+                borderRadius: '4px',
+              }}
+            >
+              <div style={{ fontSize: '16px', marginBottom: '10px' }}>
+                ⚠️ 组件初始化失败
+              </div>
+              <div style={{ fontSize: '14px' }}>
+                错误信息: {this.entityGridStore.error}
+              </div>
+              <div
+                style={{ fontSize: '12px', marginTop: '10px', color: '#666' }}
+              >
+                请检查 neo-ui-component-web 依赖是否正确安装
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="neo-entity-grid-container">
+        <div className="news-title">
+          {title ||
+            '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。'}
+          {systemInfo.tenantName ? `【${systemInfo.tenantName}】` : ''}
+        </div>
+        <div className="entity-grid-wrapper">
+          <EntityGrid
+            ref={this.entityGridRef}
+            {...restProps}
+            pattern="pickView"
+            objectApiKey={objectApiKey}
+            name={`${objectApiKey}Picker`}
+            tableType={tableType}
+            selectionMode={selectionMode}
+            skipExt={true}
+            onSelectedCall={this.onSelectedCall}
+            funPermission={true}
+            store={this.entityGridStore}
+          />
+        </div>
+      </div>
+    );
+  }
+}

package/template/develop/neo-custom-cmp-template/src/components/neoEntityGrid/model.ts

@@ -0,0 +1,87 @@
+/**
+ * @file 自定义组件对接编辑器的描述文件
+ */
+export class NeoEntityGridModel {
+  /**
+   * cmpType 为自定义组件名称，用于标识组件的唯一性
+   * 在构建时根据当前组件目录名称自动生成
+   */
+  // cmpType: string = 'neo-entity-grid';
+
+  // 组件名称，用于设置在编辑器左侧组件面板中展示的名称
+  label: string = 'Neo实体表格';
+
+  // 组件描述，用于设置在编辑器左侧组件面板中展示的描述
+  description: string = 'Neo 实体表格组件';
+
+  // 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签）
+  // tags: string[] = ['自定义组件'];
+
+  // 组件图标，用于设置在编辑器左侧组件面板中展示的图标
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/table.svg';
+  // iconSrc: string = 'https://neo-widgets.bj.bcebos.com/custom-widget.svg';
+  // iconSrc = 'https://neo-widgets.bj.bcebos.com/favicon.png';
+
+  // 初次插入页面的默认属性数据
+  defaultComProps = {
+    title:
+      '营销服全场景智能CRM，帮助企业搭建数字化客户经营平台，实现业绩高质量增长。',
+    label: 'Neo实体表格',
+    objectApiKey: 'account',
+    tableType: 'list',
+    selectionMode: 'multiple',
+    showHeader: true,
+  };
+
+  // 设计器端预览时展示的默认数据
+  previewComProps = {
+    label: 'Neo实体表格',
+  };
+
+  /**
+   * 组件面板配置，用于生成编辑器右侧属性配置面板内容
+   */
+  propsSchema = [
+    {
+      type: 'select',
+      name: 'objectApiKey',
+      label: '实体API Key',
+      value: 'account',
+      creatable: true,
+      options: [
+        { label: '客户', value: 'account' },
+        { label: '产品', value: 'product' },
+        { label: '商品', value: 'goods' },
+        { label: '联系人', value: 'contact' },
+        { label: '商机明细', value: 'opportunityProduct' },
+        { label: '合同', value: 'contract' }
+      ],
+    },
+    {
+      type: 'select',
+      name: 'selectionMode',
+      label: '选择模式',
+      value: 'multiple',
+      options: [
+        { label: 'single', value: 'single' },
+        { label: 'multiple', value: 'multiple' },
+        { label: 'none', value: 'none' },
+      ],
+    },
+    {
+      type: 'switch',
+      name: 'showHeader',
+      label: '显示头部',
+      value: true,
+    },
+  ];
+
+  // 支持 函数式写法：propsSchemaCreator，com 为组件实例。优先级比 propsSchema 高
+  /*
+  propsSchemaCreator = (com: any) => {
+    return [];
+  };
+  */
+}
+
+export default NeoEntityGridModel;