neo-cmp-cli 1.12.7 → 1.12.9

package/template/asset-manage-template/src/components/assetManage__c/index.tsx

@@ -0,0 +1,258 @@
+/**
+ * @file 企业办公设备"自助查" - 资产浏览器组件
+ * @description 左侧分类导航 + 顶部搜索 + 右侧资产卡片网格，支持分类过滤、关键词搜索、状态筛选、弹窗新增资产
+ */
+import * as React from 'react';
+import { message, Select } from 'antd';
+import { AppstoreOutlined } from '@ant-design/icons';
+// @ts-ignore
+import isEqual from 'lodash/isEqual';
+// @ts-ignore
+import debounce from 'lodash/debounce';
+// @ts-ignore
+import { NeoEvent } from 'neo-ui-common';
+import { AssetSidebar } from './cmps/AssetSidebar';
+import { AssetToolbar } from './cmps/AssetToolbar';
+import { AssetGrid } from './cmps/AssetGrid';
+import { AssetCreateModal } from './cmps/AssetCreateModal';
+import { fetchAssets, fetchCategories } from './assetApi';
+import type { AssetManageProps, AssetManageState, FilterParams } from './types';
+import './style.scss';
+
+export default class AssetManage extends React.PureComponent<
+  AssetManageProps,
+  AssetManageState
+> {
+  private debouncedRefresh: (filters: FilterParams) => void;
+
+  constructor(props: AssetManageProps) {
+    super(props);
+    this.state = {
+      categories: [],
+      assets: [],
+      activeCategoryId: null,
+      searchKeyword: '',
+      statusFilter: undefined,
+      loadingCategories: false,
+      loadingAssets: false,
+      totalAssets: 0,
+      createModalVisible: false,
+    };
+    this.debouncedRefresh = debounce(
+      (filters: FilterParams) => this.refreshAssets(filters),
+      300,
+    );
+  }
+
+  componentDidMount() {
+    this.loadCategories();
+    this.refreshAssets(this.getCurrentFilters());
+  }
+
+  componentDidUpdate(prevProps: AssetManageProps) {
+    if (
+      prevProps.assetApiKey !== this.props.assetApiKey ||
+      prevProps.categoryApiKey !== this.props.categoryApiKey ||
+      !isEqual(prevProps.assetFields, this.props.assetFields)
+    ) {
+      this.loadCategories();
+      this.refreshAssets(this.getCurrentFilters());
+    }
+  }
+
+  getCurrentFilters(): FilterParams {
+    return {
+      categoryId: this.state.activeCategoryId,
+      keyword: this.state.searchKeyword,
+      status: this.state.statusFilter,
+    };
+  }
+
+  async loadCategories() {
+    const { categoryApiKey } = this.props;
+    if (!categoryApiKey) {
+      this.setState({ categories: [], loadingCategories: false });
+      return;
+    }
+
+    this.setState({ loadingCategories: true });
+    try {
+      const records = await fetchCategories(categoryApiKey);
+      this.setState({ categories: records, loadingCategories: false });
+    } catch (e) {
+      console.error('加载分类失败:', e);
+      message.error('加载分类失败');
+      this.setState({ categories: [], loadingCategories: false });
+    }
+  }
+
+  async refreshAssets(filters: FilterParams) {
+    const { assetApiKey, assetFields, pageSize = 50 } = this.props;
+    if (!assetApiKey) {
+      this.setState({
+        assets: [],
+        totalAssets: 0,
+        loadingAssets: false,
+      });
+      return;
+    }
+
+    this.setState({ loadingAssets: true });
+    try {
+      const { records, total } = await fetchAssets({
+        assetApiKey,
+        assetFields,
+        pageSize,
+        filters,
+      });
+      this.setState({
+        assets: records,
+        totalAssets: total,
+        loadingAssets: false,
+      });
+    } catch (e) {
+      console.error('加载资产失败:', e);
+      message.error('加载资产失败');
+      this.setState({
+        assets: [],
+        totalAssets: 0,
+        loadingAssets: false,
+      });
+    }
+  }
+
+  @NeoEvent.function
+  async loadAssets() {
+    await this.refreshAssets(this.getCurrentFilters());
+  }
+
+  handleOpenCreateModal = () => {
+    const { assetApiKey } = this.props;
+    if (!assetApiKey) {
+      message.warning('请先配置资产实体 API Key（assetApiKey）');
+      return;
+    }
+    this.setState({ createModalVisible: true });
+  };
+
+  handleCloseCreateModal = () => {
+    this.setState({ createModalVisible: false });
+  };
+
+  handleCreateSuccess = () => {
+    this.refreshAssets(this.getCurrentFilters());
+  };
+
+  handleCategoryClick = (categoryId: string | null) => {
+    const filters: FilterParams = {
+      categoryId,
+      keyword: this.state.searchKeyword,
+      status: this.state.statusFilter,
+    };
+    this.setState({ activeCategoryId: categoryId }, () => {
+      this.refreshAssets(filters);
+    });
+  };
+
+  handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const keyword = e.target.value;
+    this.setState({ searchKeyword: keyword });
+    const filters: FilterParams = {
+      categoryId: this.state.activeCategoryId,
+      keyword,
+      status: this.state.statusFilter,
+    };
+    this.debouncedRefresh(filters);
+  };
+
+  handleStatusChange: React.ComponentProps<typeof Select>['onChange'] = (
+    value,
+  ) => {
+    const raw = Array.isArray(value) ? value[0] : value;
+    let normalized: number | undefined;
+    if (raw === undefined || raw === null || raw === '') {
+      normalized = undefined;
+    } else {
+      const n = Number(raw);
+      normalized = Number.isNaN(n) ? undefined : n;
+    }
+    this.setState({ statusFilter: normalized });
+    const filters: FilterParams = {
+      categoryId: this.state.activeCategoryId,
+      keyword: this.state.searchKeyword,
+      status: normalized,
+    };
+    this.refreshAssets(filters);
+  };
+
+  render() {
+    const {
+      title = 'Smart Asset Hub',
+      className,
+      assetApiKey,
+      categoryApiKey,
+      assetFields,
+    } = this.props;
+    const {
+      categories,
+      assets,
+      activeCategoryId,
+      searchKeyword,
+      statusFilter,
+      loadingCategories,
+      loadingAssets,
+      totalAssets,
+      createModalVisible,
+    } = this.state;
+
+    return (
+      <div className={`AssetManage__c ${className || ''}`}>
+        <header className="asset-header">
+          <div className="header-left">
+            <div className="header-logo">
+              <AppstoreOutlined />
+            </div>
+            <span className="header-title">{title}</span>
+          </div>
+          <span className="header-version">开发者预览版 v1.0</span>
+        </header>
+
+        <div className="asset-main">
+          <AssetSidebar
+            categoryApiKey={categoryApiKey}
+            categories={categories}
+            activeCategoryId={activeCategoryId}
+            loadingCategories={loadingCategories}
+            totalAssets={totalAssets}
+            onCategoryClick={this.handleCategoryClick}
+          />
+          <div className="asset-content">
+            <AssetToolbar
+              assetApiKey={assetApiKey}
+              searchKeyword={searchKeyword}
+              statusFilter={statusFilter}
+              loadingAssets={loadingAssets}
+              onSearchChange={this.handleSearchChange}
+              onStatusChange={this.handleStatusChange}
+              onRefresh={() => this.refreshAssets(this.getCurrentFilters())}
+              onAdd={this.handleOpenCreateModal}
+            />
+            <AssetGrid
+              assetApiKey={assetApiKey}
+              assets={assets}
+              loadingAssets={loadingAssets}
+            />
+          </div>
+        </div>
+
+        <AssetCreateModal
+          visible={createModalVisible}
+          assetApiKey={assetApiKey}
+          assetFields={assetFields}
+          onClose={this.handleCloseCreateModal}
+          onSuccess={this.handleCreateSuccess}
+        />
+      </div>
+    );
+  }
+}

package/template/asset-manage-template/src/components/assetManage__c/model.ts

@@ -0,0 +1,75 @@
+/**
+ * @file 资产浏览器组件 - 模型文件
+ * @description 定义组件在 Neo 平台编辑器中的配置信息
+ */
+export class AssetManageModel {
+  label: string = '资产管理';
+
+  description: string =
+    '企业办公设备自助查，支持分类导航、关键词搜索、状态筛选，以卡片形式展示资产信息';
+
+  targetPage: string[] = ['all'];
+
+  targetDevice: string = 'web';
+
+  enableDuplicate: boolean = true;
+
+  iconUrl: string = 'https://custom-widgets.bj.bcebos.com/data-list.svg';
+
+  defaultComProps = {
+    title: 'Smart Asset Hub',
+    assetApiKey: 'AssetItem__c',
+    categoryApiKey: 'AssetCategory__c',
+    assetFields: [
+      'name',
+      'categoryId__c',
+      'status__c',
+      'serialNumber__c',
+      'purchaseDate__c',
+      'productIMG__c',
+    ],
+    pageSize: 50,
+  };
+
+  functions = [
+    {
+      apiKey: 'loadAssets',
+      label: '刷新资产列表',
+      helpTextKey: '重新加载资产数据',
+    },
+  ];
+
+  propsSchema = [
+    {
+      type: 'panelInput',
+      name: 'title',
+      label: '组件标题',
+      value: 'Smart Asset Hub',
+      placeholder: '请输入组件标题',
+    },
+    {
+      type: 'panelInput',
+      name: 'assetApiKey',
+      label: '资产实体 API Key',
+      value: '',
+      placeholder: '请输入资产实体的 API Key',
+    },
+    {
+      type: 'panelInput',
+      name: 'categoryApiKey',
+      label: '分类实体 API Key',
+      value: '',
+      placeholder: '请输入分类实体的 API Key（留空则左侧显示未配置提示）',
+    },
+    {
+      type: 'panelNumber',
+      name: 'pageSize',
+      label: '每页条数',
+      value: 50,
+      min: 10,
+      max: 200,
+    },
+  ];
+}
+
+export default AssetManageModel;