@ai-partner-x/aiko-boot-cli 0.1.4

package/templates/scaffold-default/packages/admin/src/pages/purchase-requisitions/ListPage.tsx

@@ -0,0 +1,307 @@
+import { useState } from "react"
+import { useNavigate } from "react-router"
+import { ShoppingCart, Eye, Pencil } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { ListReport, type ListReportColumn } from "@/components/admin-ui/list-report"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+const statusConfig = {
+  draft: { label: "草稿", color: "bg-muted text-muted-foreground", dot: "bg-muted-foreground" },
+  pending: { label: "待审批", color: "bg-amber-500/10 text-amber-700", dot: "bg-amber-500" },
+  approved: { label: "已批准", color: "bg-emerald-500/10 text-emerald-700", dot: "bg-emerald-500" },
+  rejected: { label: "已拒绝", color: "bg-red-500/10 text-red-600", dot: "bg-red-500" },
+  processing: { label: "处理中", color: "bg-primary/10 text-primary", dot: "bg-primary" },
+}
+
+interface PurchaseRequisition {
+  id: string
+  prNumber: string
+  material: string
+  materialCode: string
+  quantity: number
+  unit: string
+  totalAmount: number
+  status: string
+  createdAt: string
+  requester: string
+  department: string
+}
+
+const mockData: PurchaseRequisition[] = [
+  {
+    id: "1",
+    prNumber: "PR-2024-0156",
+    material: 'MacBook Pro 14" M3',
+    materialCode: "IT-001",
+    quantity: 10,
+    unit: "台",
+    totalAmount: 189000,
+    status: "pending",
+    createdAt: "2024-01-15 14:30",
+    requester: "张三",
+    department: "研发部",
+  },
+  {
+    id: "2",
+    prNumber: "PR-2024-0155",
+    material: "A4复印纸 80g",
+    materialCode: "OF-023",
+    quantity: 500,
+    unit: "包",
+    totalAmount: 12500,
+    status: "approved",
+    createdAt: "2024-01-14 09:15",
+    requester: "李四",
+    department: "行政部",
+  },
+  {
+    id: "3",
+    prNumber: "PR-2024-0154",
+    material: "人体工学办公椅",
+    materialCode: "FN-008",
+    quantity: 20,
+    unit: "把",
+    totalAmount: 56000,
+    status: "draft",
+    createdAt: "2024-01-13 16:45",
+    requester: "王五",
+    department: "人力资源",
+  },
+  {
+    id: "4",
+    prNumber: "PR-2024-0153",
+    material: 'Dell 27" 4K显示器',
+    materialCode: "IT-015",
+    quantity: 15,
+    unit: "台",
+    totalAmount: 52500,
+    status: "rejected",
+    createdAt: "2024-01-12 11:20",
+    requester: "赵六",
+    department: "设计部",
+  },
+  {
+    id: "5",
+    prNumber: "PR-2024-0152",
+    material: "无线键鼠套装",
+    materialCode: "IT-032",
+    quantity: 30,
+    unit: "套",
+    totalAmount: 8970,
+    status: "pending",
+    createdAt: "2024-01-11 08:00",
+    requester: "钱七",
+    department: "运营部",
+  },
+]
+
+export function ListPage() {
+  const navigate = useNavigate()
+  const [showFilter, setShowFilter] = useState(false)
+  const [filters, setFilters] = useState({
+    status: "",
+    requester: "",
+    department: "",
+  })
+
+  const filterCount = Object.values(filters).filter((v) => v !== "").length
+  const handleClearFilters = () => setFilters({ status: "", requester: "", department: "" })
+  const formatAmount = (amount: number) => `¥${amount.toLocaleString()}`
+
+  const columns: ListReportColumn<PurchaseRequisition>[] = [
+    {
+      id: "prNumber",
+      header: "采购申请号",
+      sortable: true,
+      accessorKey: "prNumber",
+      cell: (row) => (
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation()
+            navigate(`/purchase-requisitions/${row.id}`)
+          }}
+          className="text-sm font-medium text-primary hover:underline"
+        >
+          {row.prNumber}
+        </button>
+      ),
+    },
+    {
+      id: "material",
+      header: "物料信息",
+      cell: (row) => (
+        <div>
+          <p className="text-sm">{row.material}</p>
+          <p className="text-xs text-muted-foreground">{row.materialCode}</p>
+        </div>
+      ),
+    },
+    {
+      id: "quantity",
+      header: "数量",
+      align: "right",
+      cell: (row) => (
+        <div>
+          <span className="text-sm">{row.quantity}</span>
+          <span className="ml-1 text-xs text-muted-foreground">{row.unit}</span>
+        </div>
+      ),
+    },
+    {
+      id: "totalAmount",
+      header: "金额",
+      align: "right",
+      cell: (row) => (
+        <span className="text-sm font-medium">{formatAmount(row.totalAmount)}</span>
+      ),
+    },
+    {
+      id: "status",
+      header: "状态",
+      align: "center",
+      cell: (row) => {
+        const status = statusConfig[row.status as keyof typeof statusConfig]
+        return (
+          <div className="flex justify-center">
+            <span
+              className={cn(
+                "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium",
+                status?.color ?? "bg-muted text-muted-foreground"
+              )}
+            >
+              <span className={cn("size-1.5 rounded-full", status?.dot ?? "bg-muted-foreground")} />
+              {status?.label ?? row.status}
+            </span>
+          </div>
+        )
+      },
+    },
+    {
+      id: "requester",
+      header: "申请人",
+      cell: (row) => (
+        <div>
+          <p className="text-sm">{row.requester}</p>
+          <p className="text-xs text-muted-foreground">{row.department}</p>
+        </div>
+      ),
+    },
+    {
+      id: "createdAt",
+      header: "创建时间",
+      cell: (row) => <span className="text-sm text-muted-foreground">{row.createdAt}</span>,
+    },
+    {
+      id: "actions",
+      header: "操作",
+      align: "center",
+      cell: (row) => (
+        <div className="flex justify-center gap-1" onClick={(e) => e.stopPropagation()}>
+          <button
+            type="button"
+            onClick={() => navigate(`/purchase-requisitions/${row.id}`)}
+            className="flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
+            title="查看"
+          >
+            <Eye className="size-4" />
+          </button>
+          <button
+            type="button"
+            onClick={() => navigate(`/purchase-requisitions/${row.id}/edit`)}
+            className="flex size-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary"
+            title="编辑"
+          >
+            <Pencil className="size-4" />
+          </button>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="h-full">
+      <ListReport<PurchaseRequisition>
+        header={{
+          title: "采购申请管理",
+          subtitle: "F1643 - 管理和跟踪所有采购申请单据",
+          tag: "List Report",
+          icon: <ShoppingCart className="size-7" />,
+        }}
+        data={mockData}
+        columns={columns}
+        totalCount={156}
+        primaryAction={{
+          id: "create",
+          label: "创建",
+          onClick: () => navigate("/purchase-requisitions/create"),
+        }}
+        selectionActions={[
+          { id: "view", label: "查看", icon: <Eye className="size-4" />, onClick: () => { } },
+          { id: "edit", label: "编辑", icon: <Pencil className="size-4" />, onClick: () => { } },
+        ]}
+        searchPlaceholder="搜索采购申请号、物料、申请人..."
+        showFilter={showFilter}
+        onFilterToggle={() => setShowFilter(!showFilter)}
+        filterCount={filterCount}
+        onFilterClear={handleClearFilters}
+        filterContent={
+          <div className="grid grid-cols-3 gap-4">
+            <div className="space-y-2">
+              <Label className="text-xs text-muted-foreground">状态</Label>
+              <Select
+                value={filters.status || "__all__"}
+                onValueChange={(v) => setFilters({ ...filters, status: v === "__all__" ? "" : v })}
+              >
+                <SelectTrigger><SelectValue placeholder="全部" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__all__">全部</SelectItem>
+                  <SelectItem value="draft">草稿</SelectItem>
+                  <SelectItem value="pending">待审批</SelectItem>
+                  <SelectItem value="approved">已批准</SelectItem>
+                  <SelectItem value="rejected">已拒绝</SelectItem>
+                  <SelectItem value="processing">处理中</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label className="text-xs text-muted-foreground">申请人</Label>
+              <Input
+                placeholder="输入申请人"
+                value={filters.requester}
+                onChange={(e) => setFilters({ ...filters, requester: e.target.value })}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label className="text-xs text-muted-foreground">部门</Label>
+              <Select
+                value={filters.department || "__all__"}
+                onValueChange={(v) => setFilters({ ...filters, department: v === "__all__" ? "" : v })}
+              >
+                <SelectTrigger><SelectValue placeholder="全部部门" /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="__all__">全部部门</SelectItem>
+                  <SelectItem value="研发部">研发部</SelectItem>
+                  <SelectItem value="行政部">行政部</SelectItem>
+                  <SelectItem value="人力资源">人力资源</SelectItem>
+                  <SelectItem value="设计部">设计部</SelectItem>
+                  <SelectItem value="运营部">运营部</SelectItem>
+                  <SelectItem value="市场部">市场部</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        }
+        getRowId={(row) => row.id}
+      />
+    </div>
+  )
+}

package/templates/scaffold-default/packages/admin/src/pages/purchase-requisitions/ViewPage.tsx

@@ -0,0 +1,304 @@
+import { useNavigate, useParams } from "react-router";
+import { Calendar, User, Building2, Pencil, Workflow, Package } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ObjectPage } from "@/components/admin-ui/object-page";
+import {
+  EditableTable,
+  TableText,
+  TableFooterRow,
+  type EditableTableColumn,
+} from "@/components/admin-ui/editable-table";
+import { statusConfig, formatAmount, type WorkflowStep } from "./constants";
+
+interface ViewItem {
+  id: string;
+  lineNum: number;
+  materialCode: string;
+  materialName: string;
+  quantity: number;
+  unit: string;
+  unitPrice: number;
+  amount: number;
+  deliveryDate: string;
+}
+
+const mockDetail = {
+  prNumber: "PR-2024-0156",
+  description: "IT设备采购申请 - 研发部笔记本电脑",
+  status: "pending",
+  createdAt: "2024-01-15 14:30",
+  requester: "张三",
+  department: "研发部",
+  companyCode: "1000",
+  purchaseOrg: "1000 - 总部采购组织",
+  purchaseGroup: "001 - IT采购组",
+  priority: "high",
+  deliveryDate: "2024-02-15",
+  totalQuantity: 10,
+  totalAmount: 189000,
+  currency: "CNY",
+  items: [
+    {
+      id: "1",
+      lineNum: 10,
+      materialCode: "IT-001",
+      materialName: 'MacBook Pro 14" M3',
+      quantity: 10,
+      unit: "台",
+      unitPrice: 18900,
+      amount: 189000,
+      deliveryDate: "2024-02-15",
+    },
+  ] as ViewItem[],
+  workflow: [
+    { step: 1, title: "创建", user: "张三", time: "2024-01-15 14:30", status: "completed" as const },
+    { step: 2, title: "部门审批", user: "李经理", time: "2024-01-15 16:00", status: "completed" as const },
+    { step: 3, title: "财务审批", user: "王财务", time: "", status: "current" as const },
+    { step: 4, title: "采购执行", user: "", time: "", status: "pending" as const },
+  ] as WorkflowStep[],
+};
+
+const priorityLabel: Record<string, string> = {
+  low: "低",
+  normal: "普通",
+  high: "高",
+  urgent: "紧急",
+};
+
+export function ViewPage() {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const data = mockDetail;
+  const status = statusConfig[data.status as keyof typeof statusConfig];
+
+  const lineColumns: EditableTableColumn<ViewItem>[] = [
+    {
+      key: "lineNum",
+      title: "行号",
+      width: 60,
+      render: (record) => <TableText variant="muted">{record.lineNum}</TableText>,
+    },
+    {
+      key: "material",
+      title: "物料",
+      width: 200,
+      render: (record) => (
+        <div>
+          <p className="text-sm font-medium">{record.materialName}</p>
+          <p className="text-xs text-muted-foreground">{record.materialCode}</p>
+        </div>
+      ),
+    },
+    {
+      key: "quantity",
+      title: "数量",
+      width: 100,
+      align: "right",
+      render: (record) => (
+        <span>
+          <TableText>{record.quantity}</TableText>
+          <TableText variant="muted" className="ml-1 text-xs">
+            {record.unit}
+          </TableText>
+        </span>
+      ),
+    },
+    {
+      key: "unitPrice",
+      title: "单价",
+      width: 100,
+      align: "right",
+      render: (record) => <TableText>{formatAmount(record.unitPrice)}</TableText>,
+    },
+    {
+      key: "amount",
+      title: "金额",
+      width: 100,
+      align: "right",
+      render: (record) => (
+        <TableText variant="bold">{formatAmount(record.amount)}</TableText>
+      ),
+    },
+    {
+      key: "deliveryDate",
+      title: "交货日期",
+      width: 100,
+      render: (record) => (
+        <TableText variant="muted">{record.deliveryDate}</TableText>
+      ),
+    },
+  ];
+
+  return (
+    <ObjectPage
+      mode="display"
+      backPath="/purchase-requisitions"
+      breadcrumb="采购申请管理"
+      title={data.description || data.prNumber}
+      subtitle={data.prNumber}
+      status={{ label: status.label, color: status.color }}
+      headerFields={[
+        { icon: <Calendar className="h-4 w-4" />, label: "申请日期", value: data.createdAt.split(" ")[0] },
+        { icon: <Calendar className="h-4 w-4" />, label: "交货日期", value: data.deliveryDate },
+        { icon: <User className="h-4 w-4" />, label: "申请人", value: data.requester },
+        { icon: <Building2 className="h-4 w-4" />, label: "公司代码", value: data.companyCode },
+      ]}
+      kpis={[
+        { value: data.totalQuantity, label: "申请数量 (台)", color: "blue" },
+        { value: formatAmount(data.items[0]?.unitPrice ?? 0), label: `单价 (${data.currency})`, color: "green" },
+        { value: formatAmount(data.totalAmount), label: `总金额 (${data.currency})`, color: "orange" },
+      ]}
+      showSectionNav={true}
+      sections={[
+        {
+          id: "basic",
+          title: "基本信息",
+          subtitle: "采购申请的基本详情",
+          content: (
+            <div className="grid grid-cols-2 gap-6">
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">申请描述</p>
+                <p className="text-sm">{data.description}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">优先级</p>
+                <span
+                  className={cn(
+                    "inline-flex items-center rounded px-2 py-0.5 text-xs font-medium",
+                    data.priority === "high" ? "bg-red-100 text-red-700" : "bg-muted text-muted-foreground"
+                  )}
+                >
+                  {priorityLabel[data.priority] ?? data.priority}
+                </span>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">部门</p>
+                <p className="text-sm">{data.department}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">采购组织</p>
+                <p className="text-sm">{data.purchaseOrg}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-xs text-muted-foreground">采购组</p>
+                <p className="text-sm">{data.purchaseGroup}</p>
+              </div>
+            </div>
+          ),
+        },
+        {
+          id: "items",
+          title: "行项目",
+          subtitle: "采购物料明细",
+          content: (
+            <EditableTable<ViewItem>
+              showIndex={false}
+              rowKey="id"
+              dataSource={data.items}
+              minWidth={700}
+              header={{ title: "行项目", subtitle: "采购物料明细" }}
+              columns={lineColumns}
+              footer={
+                <TableFooterRow
+                  label="合计"
+                  value={
+                    <span className="font-semibold text-primary">
+                      {formatAmount(data.totalAmount)}
+                    </span>
+                  }
+                  colSpan={4}
+                  valueColSpan={1}
+                  tailColSpan={1}
+                />
+              }
+            />
+          ),
+        },
+        {
+          id: "workflow",
+          title: "审批流程",
+          sidebar: true,
+          icon: <Workflow className="h-4 w-4" />,
+          content: (
+            <div className="space-y-4">
+              {data.workflow.map((step, index) => (
+                <div key={step.step} className="flex gap-3">
+                  <div className="flex flex-col items-center">
+                    <div
+                      className={cn(
+                        "flex h-6 w-6 items-center justify-center rounded-full text-xs text-white",
+                        step.status === "completed" && "bg-emerald-500",
+                        step.status === "current" && "bg-primary",
+                        step.status === "pending" && "bg-muted"
+                      )}
+                    >
+                      {step.status === "completed" ? (
+                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2">
+                          <path d="M2 6l3 3 5-6" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                      ) : (
+                        step.step
+                      )}
+                    </div>
+                    {index < data.workflow.length - 1 && (
+                      <div
+                        className={cn(
+                          "mt-1 h-8 w-0.5",
+                          step.status === "completed" ? "bg-emerald-500" : "bg-border"
+                        )}
+                      />
+                    )}
+                  </div>
+                  <div className="flex-1 pb-2">
+                    <p className="text-sm font-medium">{step.title}</p>
+                    {step.user && <p className="text-xs text-muted-foreground">{step.user}</p>}
+                    {step.time && (
+                      <p className="mt-1 text-xs text-muted-foreground">{step.time}</p>
+                    )}
+                    {step.status === "current" && (
+                      <span className="mt-1 inline-flex items-center rounded bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+                        处理中
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ),
+        },
+        {
+          id: "related",
+          title: "相关主数据",
+          sidebar: true,
+          icon: <Package className="h-4 w-4" />,
+          content: (
+            <div className="space-y-3">
+              <div className="rounded-lg bg-muted p-3">
+                <p className="text-xs text-muted-foreground">物料</p>
+                <p className="text-sm font-medium">IT-001</p>
+                <p className="text-xs text-muted-foreground">MacBook Pro 14" M3</p>
+              </div>
+              <div className="rounded-lg bg-muted p-3">
+                <p className="text-xs text-muted-foreground">供应商</p>
+                <p className="text-sm font-medium">VD-001</p>
+                <p className="text-xs text-muted-foreground">Apple 授权经销商</p>
+              </div>
+            </div>
+          ),
+        },
+      ]}
+      actions={[
+        {
+          key: "edit",
+          label: "编辑",
+          icon: <Pencil className="h-4 w-4" />,
+          onClick: () => navigate(`/purchase-requisitions/${id}/edit`),
+          showInModes: ["display"],
+          position: "header",
+        },
+      ]}
+    />
+  );
+}
+
+export default ViewPage;

package/templates/scaffold-default/packages/admin/src/pages/purchase-requisitions/constants.ts

@@ -0,0 +1,51 @@
+/** 物料选项（模拟） */
+export const materialOptions = [
+  { code: "IT-001", name: 'MacBook Pro 14" M3', unit: "台", price: 18900 },
+  { code: "IT-015", name: 'Dell 27" 4K显示器', unit: "台", price: 3500 },
+  { code: "IT-032", name: "无线键鼠套装", unit: "套", price: 299 },
+  { code: "OF-023", name: "A4复印纸 80g", unit: "包", price: 25 },
+  { code: "FN-008", name: "人体工学办公椅", unit: "把", price: 2800 },
+];
+
+export const priorityOptions = [
+  { value: "low", label: "低" },
+  { value: "normal", label: "普通" },
+  { value: "high", label: "高" },
+  { value: "urgent", label: "紧急" },
+];
+
+export const purchaseOrgOptions = [
+  { value: "1000", label: "1000 - 总部采购组织" },
+  { value: "2000", label: "2000 - 华东采购组织" },
+];
+
+export const statusConfig = {
+  draft: { label: "草稿", color: "gray" as const },
+  pending: { label: "待审批", color: "yellow" as const },
+  approved: { label: "已批准", color: "green" as const },
+  rejected: { label: "已拒绝", color: "red" as const },
+  processing: { label: "处理中", color: "blue" as const },
+};
+
+export interface LineItem {
+  id: string;
+  lineNum?: number;
+  materialCode: string;
+  materialName: string;
+  quantity: number;
+  unit: string;
+  unitPrice: number;
+  amount: number;
+  deliveryDate: string;
+  note?: string;
+}
+
+export interface WorkflowStep {
+  step: number;
+  title: string;
+  user: string;
+  time: string;
+  status: "completed" | "current" | "pending";
+}
+
+export const formatAmount = (amount: number) => `¥${amount.toLocaleString()}`;

package/templates/scaffold-default/packages/admin/src/pages/purchase-requisitions/index.ts

@@ -0,0 +1,4 @@
+export { ListPage } from "./ListPage";
+export { CreatePage } from "./CreatePage";
+export { ViewPage } from "./ViewPage";
+export { EditPage } from "./EditPage";