neo-cmp-cli 1.12.7 → 1.12.9

package/template/asset-manage-template/src/components/assetManage__c/cmps/AssetCreateModal.tsx

@@ -0,0 +1,260 @@
+/**
+ * 新增资产弹窗（参照 entityTable__c：getDesc 动态表单 + xObject.create）
+ */
+import * as React from 'react';
+import {
+  Modal,
+  Form,
+  Input,
+  Select,
+  message,
+  Spin,
+  Empty,
+  DatePicker,
+  InputNumber,
+} from 'antd';
+// @ts-ignore
+import { xObject } from 'neo-open-api';
+import moment from 'moment';
+import type { FieldDesc } from '../types';
+
+const { Option } = Select;
+
+export interface AssetCreateModalProps {
+  visible: boolean;
+  assetApiKey?: string;
+  assetFields?: string[];
+  /** 实体显示名，用于标题 */
+  entityLabel?: string;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export const AssetCreateModal: React.FC<AssetCreateModalProps> = ({
+  visible,
+  assetApiKey,
+  assetFields,
+  entityLabel,
+  onClose,
+  onSuccess,
+}) => {
+  const [form] = Form.useForm();
+  const [loadingMeta, setLoadingMeta] = React.useState(false);
+  const [submitting, setSubmitting] = React.useState(false);
+  const [fieldList, setFieldList] = React.useState<FieldDesc[]>([]);
+  const [entityTypeList, setEntityTypeList] = React.useState<any[]>([]);
+  const [objectLabel, setObjectLabel] = React.useState<string>('');
+
+  const loadMeta = React.useCallback(async () => {
+    if (!assetApiKey) return;
+    setLoadingMeta(true);
+    try {
+      const [descRes, typeRes] = await Promise.all([
+        xObject.getDesc(assetApiKey),
+        xObject.getEntityTypeList(assetApiKey),
+      ]);
+      if (typeRes?.status) {
+        setEntityTypeList(typeRes.data || []);
+      }
+      if (descRes?.status) {
+        const data = descRes.data || {};
+        const fields: FieldDesc[] = data.fields || [];
+        setObjectLabel(data.label || '');
+        setFieldList(fields);
+      } else {
+        setFieldList([]);
+        message.error(descRes?.msg || '获取实体字段失败');
+      }
+    } catch (e) {
+      console.error(e);
+      message.error('获取实体字段失败');
+      setFieldList([]);
+    } finally {
+      setLoadingMeta(false);
+    }
+  }, [assetApiKey]);
+
+  React.useEffect(() => {
+    if (visible && assetApiKey) {
+      form.resetFields();
+      loadMeta();
+    }
+  }, [visible, assetApiKey, form, loadMeta]);
+
+  const filteredFields = React.useMemo(() => {
+    let list = fieldList;
+    if (assetFields && assetFields.length > 0) {
+      list = list.filter((f) => assetFields.includes(f.apiKey));
+    }
+    return list.filter((f) => f.apiKey !== 'id');
+  }, [fieldList, assetFields]);
+
+  const handleOk = () => {
+    if (!assetApiKey) return;
+    form.validateFields().then(async (values: any) => {
+      setSubmitting(true);
+      const payload = { ...values };
+      Object.keys(payload).forEach((fieldKey) => {
+        const field = fieldList.find((f) => f.apiKey === fieldKey);
+        if (
+          field &&
+          (field.type === 'date' ||
+            field.type === 'datetime' ||
+            field.type === 'time')
+        ) {
+          const v = payload[fieldKey];
+          if (v && moment.isMoment(v)) {
+            payload[fieldKey] = v.valueOf();
+          } else if (v instanceof Date) {
+            payload[fieldKey] = v.getTime();
+          }
+        }
+      });
+      try {
+        const response = await xObject.create(assetApiKey, {
+          data: payload,
+          method: 'POST',
+        });
+        if (response && (response.code === 200 || response.code === '200')) {
+          message.success('创建成功');
+          onClose();
+          onSuccess();
+        } else {
+          message.error(response?.message || '创建失败');
+        }
+      } catch (err) {
+        console.error(err);
+        message.error('创建失败');
+      } finally {
+        setSubmitting(false);
+      }
+    });
+  };
+
+  const titleName = entityLabel || objectLabel || assetApiKey || '资产';
+
+  const renderFieldInput = (field: FieldDesc) => {
+    const selectitem = field.selectitem || [];
+    const checkitem = field.checkitem || [];
+
+    switch (field.type) {
+      case 'entityType':
+      case 'entitytype':
+        return (
+          <Select placeholder="请选择业务类型">
+            {entityTypeList.map((item) => (
+              <Option key={item.apiKey} value={item.id} disabled={!item.active}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        );
+      case 'picklist':
+        return (
+          <Select placeholder={`请选择${field.label}`}>
+            {selectitem.map((item) => (
+              <Option key={item.apiKey} value={item.id}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        );
+      case 'textarea':
+        return <Input.TextArea placeholder={`请输入${field.label}`} rows={3} />;
+      case 'multipicklist':
+        return (
+          <Select placeholder={`请选择${field.label}`} mode="multiple">
+            {checkitem.map((item) => (
+              <Option key={item.apiKey} value={item.id}>
+                {item.label}
+              </Option>
+            ))}
+          </Select>
+        );
+      case 'datetime':
+        return (
+          <DatePicker
+            placeholder={`请选择${field.label}`}
+            format="YYYY/MM/DD HH:mm:ss"
+            showTime
+            style={{ width: '100%' }}
+          />
+        );
+      case 'date':
+        return (
+          <DatePicker
+            placeholder={`请选择${field.label}`}
+            format="YYYY/MM/DD"
+            style={{ width: '100%' }}
+          />
+        );
+      case 'time':
+        return (
+          <DatePicker
+            placeholder={`请选择${field.label}`}
+            format="HH:mm:ss"
+            showTime
+            style={{ width: '100%' }}
+          />
+        );
+      case 'int':
+      case 'float':
+        return (
+          <InputNumber
+            placeholder={`请输入${field.label}`}
+            style={{ width: '100%' }}
+          />
+        );
+      default:
+        return <Input placeholder={`请输入${field.label}`} />;
+    }
+  };
+
+  return (
+    <Modal
+      title={`新增${titleName}`}
+      visible={visible}
+      onOk={handleOk}
+      onCancel={onClose}
+      cancelText="取消"
+      okText="确定"
+      width={600}
+      destroyOnClose
+      confirmLoading={submitting}
+    >
+      {!assetApiKey ? (
+        <Empty
+          description="未配置资产实体 API Key"
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
+      ) : (
+        <Spin spinning={loadingMeta} tip="加载表单字段...">
+          {filteredFields.length === 0 && !loadingMeta ? (
+            <Empty
+              description="未获取到可填写的字段，请检查实体权限或 assetFields 配置"
+              image={Empty.PRESENTED_IMAGE_SIMPLE}
+            />
+          ) : (
+            <Form form={form} layout="vertical">
+              {filteredFields.map((field) => (
+                <Form.Item
+                  key={field.apiKey}
+                  name={field.apiKey}
+                  label={field.label}
+                  rules={[
+                    {
+                      required: !!field.required,
+                      message: `请填写${field.label}`,
+                    },
+                  ]}
+                >
+                  {renderFieldInput(field)}
+                </Form.Item>
+              ))}
+            </Form>
+          )}
+        </Spin>
+      )}
+    </Modal>
+  );
+};

package/template/asset-manage-template/src/components/assetManage__c/cmps/AssetGrid.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Spin, Empty, Row } from 'antd';
+import type { AssetItem } from '../types';
+import { AssetCard } from './assetDisplay';
+
+export interface AssetGridProps {
+  assetApiKey?: string;
+  assets: AssetItem[];
+  loadingAssets: boolean;
+}
+
+export function AssetGrid({
+  assetApiKey,
+  assets,
+  loadingAssets,
+}: AssetGridProps) {
+  if (!assetApiKey) {
+    return (
+      <section className="asset-grid-wrapper content-placeholder">
+        <Empty
+          description="请在设计器中配置资产实体 API Key（assetApiKey）"
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          className="grid-empty"
+        />
+      </section>
+    );
+  }
+
+  return (
+    <section className="asset-grid-wrapper">
+      <Spin spinning={loadingAssets} tip="加载资产数据...">
+        {assets.length === 0 && !loadingAssets ? (
+          <Empty
+            description="暂无匹配的资产数据"
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            className="grid-empty"
+          />
+        ) : (
+          <Row gutter={[20, 20]} className="asset-grid">
+            {assets.map((asset) => (
+              <AssetCard key={asset.id} asset={asset} />
+            ))}
+          </Row>
+        )}
+      </Spin>
+    </section>
+  );
+}

package/template/asset-manage-template/src/components/assetManage__c/cmps/AssetSidebar.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Spin, Empty } from 'antd';
+import { AppstoreOutlined, InboxOutlined } from '@ant-design/icons';
+import type { CategoryItem } from '../types';
+import { CATEGORY_ICONS } from '../constants';
+
+export interface AssetSidebarProps {
+  categoryApiKey?: string;
+  categories: CategoryItem[];
+  activeCategoryId: string | null;
+  loadingCategories: boolean;
+  totalAssets: number;
+  onCategoryClick: (categoryId: string | null) => void;
+}
+
+export function AssetSidebar({
+  categoryApiKey,
+  categories,
+  activeCategoryId,
+  loadingCategories,
+  totalAssets,
+  onCategoryClick,
+}: AssetSidebarProps) {
+  if (!categoryApiKey) {
+    return (
+      <aside className="asset-sidebar">
+        <div className="sidebar-placeholder">
+          <Empty
+            description="请在设计器中配置分类实体 API Key（categoryApiKey）"
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+          />
+        </div>
+      </aside>
+    );
+  }
+
+  return (
+    <aside className="asset-sidebar">
+      <div className="sidebar-header">
+        <span className="sidebar-label">资产分类</span>
+      </div>
+      <Spin spinning={loadingCategories} size="small">
+        <nav className="sidebar-nav">
+          <div
+            className={`sidebar-item ${
+              activeCategoryId === null ? 'active' : ''
+            }`}
+            onClick={() => onCategoryClick(null)}
+          >
+            <AppstoreOutlined className="sidebar-icon" />
+            <span className="sidebar-text">全部资产</span>
+            <span className="sidebar-count">{totalAssets}</span>
+          </div>
+          {categories.map((cat) => {
+            const icon = CATEGORY_ICONS[cat.name] || <InboxOutlined />;
+            return (
+              <div
+                key={cat.id}
+                className={`sidebar-item ${
+                  activeCategoryId === cat.id ? 'active' : ''
+                }`}
+                onClick={() => onCategoryClick(cat.id)}
+              >
+                <span className="sidebar-icon">{icon}</span>
+                <span className="sidebar-text">{cat.name}</span>
+              </div>
+            );
+          })}
+        </nav>
+      </Spin>
+      <div className="sidebar-footer">数据源: {categoryApiKey}</div>
+    </aside>
+  );
+}

package/template/asset-manage-template/src/components/assetManage__c/cmps/AssetToolbar.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { Input, Select, Button } from 'antd';
+import {
+  SearchOutlined,
+  ReloadOutlined,
+  PlusOutlined,
+} from '@ant-design/icons';
+
+const { Option } = Select;
+
+export interface AssetToolbarProps {
+  assetApiKey?: string;
+  searchKeyword: string;
+  statusFilter: number | undefined;
+  loadingAssets: boolean;
+  onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onStatusChange: React.ComponentProps<typeof Select>['onChange'];
+  onRefresh: () => void;
+  onAdd: () => void;
+}
+
+export function AssetToolbar({
+  assetApiKey,
+  searchKeyword,
+  statusFilter,
+  loadingAssets,
+  onSearchChange,
+  onStatusChange,
+  onRefresh,
+  onAdd,
+}: AssetToolbarProps) {
+  const hasAsset = Boolean(assetApiKey);
+
+  return (
+    <section className="asset-toolbar">
+      <div className="toolbar-left">
+        <Input
+          className="search-input"
+          placeholder="搜索资产名称、序列号..."
+          prefix={<SearchOutlined style={{ color: '#bfbfbf' }} />}
+          value={searchKeyword}
+          onChange={onSearchChange}
+          allowClear
+          disabled={!hasAsset}
+        />
+        <Select
+          className="status-select"
+          placeholder="所有状态"
+          value={statusFilter}
+          onChange={onStatusChange}
+          allowClear
+          disabled={!hasAsset}
+        >
+          <Option value={1}>在库</Option>
+          <Option value={2}>使用中</Option>
+          <Option value={3}>维修中</Option>
+        </Select>
+      </div>
+      <div className="toolbar-right">
+        <Button
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={onAdd}
+          disabled={!hasAsset}
+        >
+          新增资产
+        </Button>
+        <Button
+          icon={<ReloadOutlined />}
+          onClick={onRefresh}
+          loading={loadingAssets}
+          disabled={!hasAsset}
+        >
+          刷新
+        </Button>
+      </div>
+    </section>
+  );
+}

package/template/asset-manage-template/src/components/assetManage__c/cmps/assetDisplay.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { LaptopOutlined } from '@ant-design/icons';
+import { Col } from 'antd';
+import { STATUS_MAP } from '../constants';
+import type { AssetItem } from '../types';
+
+export function formatDate(value: string | number | undefined): string {
+  if (!value) return '-';
+  const d = new Date(typeof value === 'string' ? value : Number(value));
+  if (isNaN(d.getTime())) return '-';
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(
+    2,
+    '0',
+  )}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+export function renderStatusBadge(status: string | number | undefined) {
+  const key = status != null && status !== '' ? String(status) : '';
+  const info = STATUS_MAP[key] || {
+    label: status != null && status !== '' ? String(status) : '未知',
+    color: '#8c8c8c',
+    bg: '#f5f5f5',
+  };
+  return (
+    <span
+      className="status-badge"
+      style={{ color: info.color, backgroundColor: info.bg }}
+    >
+      {info.label}
+    </span>
+  );
+}
+
+export interface AssetCardProps {
+  asset: AssetItem;
+}
+
+export function AssetCard({ asset }: AssetCardProps) {
+  const imgUrl =
+    asset.productIMG__c?.url || asset.productIMG__c?.fileUrl || null;
+
+  return (
+    <Col xs={24} sm={12} md={8} lg={6}>
+      <div className="asset-card">
+        <div className="card-image">
+          {imgUrl ? (
+            <img src={imgUrl} alt={asset.name} />
+          ) : (
+            <div className="card-image-placeholder">
+              <LaptopOutlined />
+            </div>
+          )}
+        </div>
+        <div className="card-body">
+          <div className="card-title-row">
+            <h3 className="card-name" title={asset.name}>
+              {asset.name}
+            </h3>
+            {renderStatusBadge(asset.status__c)}
+          </div>
+          <p className="card-serial">SN: {asset.serialNumber__c || '-'}</p>
+          <div className="card-footer">
+            <span className="card-date">
+              入库日期: {formatDate(asset.purchaseDate__c)}
+            </span>
+            <span className="card-detail-link">详情</span>
+          </div>
+        </div>
+      </div>
+    </Col>
+  );
+}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { LaptopOutlined, CodeOutlined, InboxOutlined } from '@ant-design/icons';
+
+/** 资产状态：与常见 picklist 取值 1/2/3 对应 */
+export const STATUS_MAP: Record<
+  string,
+  { label: string; color: string; bg: string }
+> = {
+  '1': { label: '在库', color: '#52c41a', bg: '#f6ffed' },
+  '2': { label: '使用中', color: '#1890ff', bg: '#e6f7ff' },
+  '3': { label: '维修中', color: '#ff4d4f', bg: '#fff2f0' },
+};
+
+export const DEFAULT_ASSET_FIELDS = [
+  'name',
+  'categoryId__c',
+  'status__c',
+  'serialNumber__c',
+  'purchaseDate__c',
+  'productIMG__c',
+];
+
+/** 分类名称到图标（无匹配则用通用图标） */
+export const CATEGORY_ICONS: Record<string, React.ReactNode> = {
+  办公硬件: React.createElement(LaptopOutlined),
+  正版软件: React.createElement(CodeOutlined),
+  通用耗材: React.createElement(InboxOutlined),
+};