neo-cmp-cli 1.8.3 → 1.8.6

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

@@ -0,0 +1,134 @@
+/**
+ * @file XObject 表格组件对接编辑器的描述文件
+ * @description 定义组件在 Neo 平台编辑器中的配置信息
+ * @author Neo Custom Widget CLI
+ * @version 1.0.0
+ */
+export class EntityTableModel {
+  /**
+   * 组件类型标识
+   * 用于标识组件的唯一性，在构建时根据当前组件目录名称自动生成
+   * 注意：此字段在构建时会被自动替换，不需要手动设置
+   */
+  // cmpType: string = 'entityTable';
+
+  /** 组件名称，用于设置在编辑器左侧组件面板中展示的名称 */
+  label: string = '实体数据表格';
+
+  /** 组件描述，用于设置在编辑器左侧组件面板中展示的描述 */
+  description: string = '基于 XObject 的数据表格组件，支持增删改查操作';
+
+  /** 分类标签，用于设置在编辑器左侧组件面板哪个分类中展示（可设置多个分类标签） */
+  // tags: string[] = ['自定义组件'];
+
+  /** 组件图标，用于设置在编辑器左侧组件面板中展示的图标 */
+  iconSrc: string = 'https://custom-widgets.bj.bcebos.com/table.svg';
+
+  /**
+   * 用于设置组件支持的页面类型
+   *
+   * 当前 NeoCRM 平台存在的页面类型：
+   * all:	1	全页面
+   * indexPage:	2	首页
+   * entityListPage:	3	实体列表页
+   * entityFormPage:	4	实体表单页
+   * entityDetailPage:	5	实体详情页
+   * customPage:	6	自定义页面
+   * bizPage:	7	业务页面
+   */
+  // targetPage: string[] = ['customPage'];
+
+  /** 初次插入页面的默认属性数据 */
+  defaultComProps = {
+    title: '实体数据表格',
+    showAddButton: true,
+    showEditButton: true,
+    showDeleteButton: true,
+    xObjectDataApi: {
+      xObjectApiKey: 'customContact__c',
+      fields: ['name', 'phone__c'],
+    },
+  };
+
+  /**
+   * 组件属性配置模式
+   * 支持静态配置：propsSchema，优先级比 propsSchemaCreator 低
+   * 定义组件在编辑器中可配置的属性
+   */
+  propsSchema = [
+    /*
+    {
+      type: 'select',
+      name: 'custom',
+      label: '实体类型',
+      value: true,
+      placeholder: '请选择要操作的实体类型',
+      options: [
+        {
+          label: '标准实体',
+          value: false,
+        },
+        {
+          label: '自定义实体',
+          value: true,
+        },
+      ],
+    },
+    {
+      type: 'select',
+      name: 'xObjectApiKey',
+      label: '选择实体对象',
+      source: {
+        url: '/rest/metadata/v2.0/xobjects/filter?custom=${custom}&active=true',
+        method: 'GET',
+        adaptor: (resp: any) => {
+          const entityList = resp.data?.data?.records || [];
+          return {
+            status: 0,
+            data: {
+              options: entityList.map((item: any) => ({
+                label: item.label || item.name,
+                value: item.apiKey || item.name,
+              })),
+            },
+          };
+        },
+      },
+      searchable: true,
+      value: 'account',
+      placeholder: '请选择要操作的实体对象',
+    },
+    */
+    {
+      type: 'xObjectDataApi', // 用于获取实体业务数据列表的配置项
+      name: 'xObjectDataApi',
+      label: '实体数据源',
+      value: {
+        xObjectApiKey: 'customContact__c',
+        fields: ['name', 'phone__c'],
+      },
+      placeholder: '请选择实体数据源',
+      custom: true,
+    },
+    {
+      type: 'switch',
+      name: 'showAddButton',
+      label: '显示新增按钮',
+      value: true,
+    },
+    {
+      type: 'switch',
+      name: 'showEditButton',
+      label: '显示编辑按钮',
+      value: true,
+    },
+    {
+      type: 'switch',
+      name: 'showDeleteButton',
+      label: '显示删除按钮',
+      value: true,
+    },
+  ];
+}
+
+export default EntityTableModel;

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

@@ -0,0 +1,304 @@
+.entity-table-container {
+  .table-header {
+    margin-bottom: 16px;
+
+    .header-content {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 12px;
+
+      .header-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #262626;
+        flex: 1;
+        min-width: 200px;
+      }
+
+      .ant-space {
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  .table-content {
+    .ant-table {
+      .ant-table-thead > tr > th {
+        background-color: #fafafa;
+        font-weight: 600;
+        color: #262626;
+        border-bottom: 1px solid #f0f0f0;
+      }
+
+      .ant-table-tbody > tr > td {
+        border-bottom: 1px solid #f0f0f0;
+        padding: 12px 16px;
+      }
+
+      .ant-table-tbody > tr:hover > td {
+        background-color: #f5f5f5;
+      }
+
+      .ant-table-pagination {
+        margin-top: 16px;
+        text-align: right;
+      }
+    }
+
+    .ant-empty {
+      padding: 40px 0;
+
+      .ant-empty-description {
+        color: #8c8c8c;
+        font-size: 14px;
+      }
+    }
+
+    .error-container {
+      text-align: center;
+      padding: 40px 0;
+
+      .retry-button {
+        background: #1890ff;
+        border: 1px solid #1890ff;
+        color: #fff;
+        padding: 6px 15px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.3s;
+
+        &:hover {
+          background: #40a9ff;
+          border-color: #40a9ff;
+        }
+      }
+    }
+  }
+
+  .ant-modal {
+    .ant-form {
+      .ant-form-item {
+        margin-bottom: 16px;
+
+        .ant-form-item-label {
+          padding-bottom: 4px;
+
+          label {
+            font-weight: 500;
+            color: #262626;
+          }
+        }
+
+        .ant-input,
+        .ant-select-selector,
+        .ant-input-number {
+          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 {
+            border-color: #40a9ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+          }
+        }
+
+        .ant-input-textarea {
+          resize: vertical;
+          min-height: 80px;
+        }
+      }
+    }
+  }
+
+  .ant-btn {
+    border-radius: 4px;
+    font-weight: 500;
+    transition: all 0.3s;
+
+    &.ant-btn-primary {
+      background: #1890ff;
+      border-color: #1890ff;
+
+      &:hover {
+        background: #40a9ff;
+        border-color: #40a9ff;
+      }
+
+      &:focus {
+        background: #40a9ff;
+        border-color: #40a9ff;
+      }
+    }
+
+    &.ant-btn-link {
+      padding: 4px 8px;
+      height: auto;
+      line-height: 1.5;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+
+    &.ant-btn-link.ant-btn-dangerous {
+      color: #ff4d4f;
+
+      &:hover {
+        color: #ff7875;
+        background-color: #fff2f0;
+      }
+    }
+  }
+
+  .ant-popconfirm {
+    .ant-popover-inner-content {
+      padding: 12px 16px;
+    }
+
+    .ant-popover-buttons {
+      text-align: right;
+      margin-top: 8px;
+
+      .ant-btn {
+        margin-left: 8px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .ant-spin {
+    .ant-spin-dot {
+      font-size: 20px;
+    }
+
+    .ant-spin-text {
+      color: #8c8c8c;
+      font-size: 14px;
+    }
+  }
+
+  // 响应式设计
+  @media (max-width: 768px) {
+    .table-header {
+      .header-content {
+        flex-direction: column;
+        align-items: flex-start;
+
+        .header-title {
+          margin-bottom: 8px;
+        }
+
+        .ant-space {
+          width: 100%;
+          justify-content: flex-end;
+        }
+      }
+    }
+
+    .table-content {
+      .ant-table {
+        .ant-table-thead > tr > th,
+        .ant-table-tbody > tr > td {
+          padding: 8px 12px;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 576px) {
+    .table-header {
+      .header-content {
+        .header-title {
+          font-size: 16px;
+        }
+      }
+    }
+
+    .table-content {
+      .ant-table {
+        .ant-table-thead > tr > th,
+        .ant-table-tbody > tr > td {
+          padding: 6px 8px;
+          font-size: 12px;
+        }
+      }
+
+      .ant-table-pagination {
+        .ant-pagination-options {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+// 全局样式覆盖
+.ant-card {
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+  .ant-card-body {
+    padding: 20px;
+  }
+}
+
+.ant-modal {
+  .ant-modal-header {
+    border-bottom: 1px solid #f0f0f0;
+    padding: 16px 24px;
+
+    .ant-modal-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #262626;
+    }
+  }
+
+  .ant-modal-body {
+    padding: 24px;
+  }
+
+  .ant-modal-footer {
+    border-top: 1px solid #f0f0f0;
+    padding: 12px 24px;
+    text-align: right;
+
+    .ant-btn {
+      margin-left: 8px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.ant-modal-content {
+  display: flex;
+  flex-direction: column;
+
+  .ant-modal-header,
+  .ant-modal-footer {
+    flex: 0;
+  }
+
+  .ant-modal-body {
+    flex: 1;
+    max-height: 500px;
+    overflow-y: auto;
+  }
+}

package/template/neo-custom-cmp-template/src/utils/axiosFetcher.ts

@@ -0,0 +1,37 @@
+import axios from 'axios'; // https://www.axios-http.cn/docs/intro
+
+// 创建基于 axios 的 fetcher 函数
+const axiosFetcher = async (options: any) => {
+  try {
+    const config = {
+      ...options,
+      method: options?.method || 'GET',
+      data: options?.data || {},
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+      timeout: options?.timeout || 30000,
+    };
+
+    if (config?.method === 'GET') {
+      config.params = options?.data || {};
+    }
+
+    const response = await axios(config);
+    return response?.data || {};
+  } catch (error) {
+    if (error.response) {
+      // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
+      console.error('接口请求报错 / 接口服务异常：', error.message);
+    } else if (error.request) {
+      // 请求已经成功发起，但没有收到响应
+      console.error('接口请求报错 / 接口未正常响应：', error.message);
+    } else {
+      console.error('接口请求报错:', error, '，请求参数:', options);
+    }
+    throw error;
+  }
+};
+
+export default axiosFetcher;

package/template/neo-custom-cmp-template/src/utils/queryObjectData.ts

@@ -0,0 +1,76 @@
+import axiosFetcher from '$utils/axiosFetcher';
+
+/**
+ * 这里存放通用查询类 Open API
+ */
+
+// 获取业务对象数据列表
+export const queryXObjectData = async (options?: any) => {
+  const apiUrl = '/rest/data/v2/query';
+  const curOptions = options || {};
+  const xObjectApiKey = curOptions.xObjectApiKey || '';
+  const fields = curOptions.fields || [];
+  const page = curOptions.page || 1;
+  const pageSize = curOptions.pageSize || 10;
+
+  // 自动添加 objectId 字段
+  if (!fields.includes('id')) {
+    fields.push('id');
+  }
+
+  // 计算分页偏移量
+  const offset = (page - 1) * pageSize;
+
+  // 构建 SQL 查询
+  let querySql = `select ${fields.join(',')} from ${xObjectApiKey}`;
+
+  // 添加排序条件（如果有的话）
+  if (curOptions.orderBy) {
+    querySql += ` order by ${curOptions.orderBy}`;
+  }
+
+  if (curOptions.page || curOptions.pageSize) {
+    // 添加分页限制
+    querySql += ` limit ${pageSize} offset ${offset}`;
+  }
+
+  try {
+    const config = {
+      url: apiUrl,
+      method: 'GET',
+      data: {
+        q: querySql,
+      },
+    };
+
+    const resultData = await axiosFetcher(config);
+
+    if (resultData.code === 200) {
+      const { records, totalSize } = resultData.result || {};
+      return {
+        status: true,
+        code: resultData.code,
+        msg: resultData.msg || '获取业务对象数据列表成功',
+        totalSize,
+        data: records || [],
+      };
+    }
+
+    return {
+      status: false,
+      code: resultData.code,
+      msg: resultData.msg || '获取业务对象数据列表失败',
+      data: [],
+    };
+  } catch (error) {
+    console.error('获取业务对象数据列表失败:', error);
+
+    return {
+      status: false,
+      msg: error.msg || error.message || '获取业务对象数据列表失败',
+      data: [],
+    };
+  }
+};
+
+export default queryXObjectData;

package/template/neo-custom-cmp-template/src/utils/xobjects.ts

@@ -0,0 +1,162 @@
+import { message } from 'antd';
+import axiosFetcher from './axiosFetcher';
+
+// 获取业务类型列表
+export const getEntityTypeList = async (
+  xObjectApiKey: string,
+  options?: any,
+) => {
+  const curOptions = options || {};
+  const apiUrl = `/rest/data/v2.0/xobjects/${xObjectApiKey}/busiType`;
+  try {
+    const config = {
+      ...curOptions,
+      url: apiUrl,
+      method: 'GET',
+    };
+
+    const result = await axiosFetcher(config);
+    return result;
+  } catch (error) {
+    console.error('获取业务类型失败:', error);
+    message.error('获取业务类型失败。');
+    return {};
+  }
+};
+
+// 获取对象列表
+export const getEntityList = async (options?: any) => {
+  const curOptions = options || {};
+  const custom = curOptions.custom || false; // 默认获取标准对象列表
+  const active = curOptions.active || true; // 仅获取有权限的对象
+  const apiUrl = `/rest/metadata/v2.0/xobjects/filter?custom=${custom}&active=${active}`;
+  try {
+    const config = {
+      ...curOptions,
+      url: apiUrl,
+      method: 'GET',
+    };
+
+    const result = await axiosFetcher(config);
+    return result;
+  } catch (error) {
+    console.error('获取对象列表失败:', error);
+    message.error('获取对象列表失败。');
+    return {};
+  }
+};
+
+// 创建业务数据
+export const createXObject = async (xObjectApiKey: string, options: any) => {
+  const curOptions = options || {};
+  const apiUrl = `/rest/data/v2.0/xobjects/${xObjectApiKey}`;
+  const formData = curOptions.data || {};
+  try {
+    const config = {
+      ...options,
+      url: apiUrl,
+      method: curOptions.method || 'GET',
+      data: {
+        data: formData,
+      },
+    };
+
+    const result = await axiosFetcher(config);
+    return result;
+  } catch (error) {
+    console.error('创建业务数据失败:', error);
+    throw error;
+  }
+};
+
+// 获取业务对象描述
+export const getXObjectDesc = async (xObjectApiKey: string, options?: any) => {
+  const curOptions = options || {};
+  const apiUrl = `/rest/data/v2.0/xobjects/${xObjectApiKey}/description`;
+  try {
+    const config = {
+      ...options,
+      url: apiUrl,
+      method: curOptions.method || 'GET',
+    };
+
+    const result = await axiosFetcher(config);
+    return result;
+  } catch (error) {
+    console.error('获取业务对象描述:', error);
+    throw error;
+  }
+};
+
+// 更新业务数据
+export const updateXObject = async (
+  xObjectApiKey: string,
+  objectId: string,
+  options: any,
+) => {
+  const curOptions = options || {};
+  const apiUrl = `/rest/data/v2.0/xobjects/${xObjectApiKey}/${objectId}`;
+  const formData = curOptions.data || {};
+  try {
+    const config = {
+      ...curOptions,
+      url: apiUrl,
+      method: curOptions.method || 'PATCH',
+      data: {
+        data: formData,
+      },
+    };
+
+    const result = await axiosFetcher(config);
+    return result;
+  } catch (error) {
+    console.error('更新业务数据失败:', error);
+    throw error;
+  }
+};
+
+// 获取业务数据信息
+export const getXObject = async (
+  xObjectApiKey: string,
+  objectId: string,
+  options?: any,
+) => {
+  const curOptions = options || {};
+  const apiUrl = `/rest/data/v2.0/xobjects/${xObjectApiKey}/${objectId}`;
+  try {
+    const config = {
+      ...curOptions,
+      url: apiUrl,
+      method: curOptions.method || 'GET',
+    };
+
+    const result = await axiosFetcher(config);
+    return result;
+  } catch (error) {
+    console.error('获取业务数据信息失败:', error);
+    throw error;
+  }
+};
+
+// 删除业务数据
+export const deleteXObject = async (
+  xObjectApiKey: string,
+  objectId: string,
+  options?: any,
+) => {
+  const curOptions = options || {};
+  const apiUrl = `/rest/data/v2.0/xobjects/${xObjectApiKey}/${objectId}`;
+  try {
+    const config = {
+      ...curOptions,
+      url: apiUrl,
+      method: curOptions.method || 'DELETE',
+    };
+
+    const result = await axiosFetcher(config);
+    return result;
+  } catch (error) {
+    console.error('删除业务数据:', error);
+    throw error;
+  }
+};