erp/apps/web/src/pages/workflow/ProcessDefinitions.tsx

import { useEffect, useState } from 'react';
import { Button, message, Modal, Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
  listProcessDefinitions,
  createProcessDefinition,
  updateProcessDefinition,
  publishProcessDefinition,
  type ProcessDefinitionInfo,
  type CreateProcessDefinitionRequest,
} from '../../api/workflowDefinitions';
import ProcessDesigner from './ProcessDesigner';

const statusColors: Record<string, string> = {
  draft: 'default',
  published: 'green',
  deprecated: 'red',
};

export default function ProcessDefinitions() {
  const [data, setData] = useState<ProcessDefinitionInfo[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [designerOpen, setDesignerOpen] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);

  const fetch = async () => {
    setLoading(true);
    try {
      const res = await listProcessDefinitions(page, 20);
      setData(res.data);
      setTotal(res.total);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => { fetch(); }, [page]);

  const handleCreate = () => {
    setEditingId(null);
    setDesignerOpen(true);
  };

  const handleEdit = (id: string) => {
    setEditingId(id);
    setDesignerOpen(true);
  };

  const handlePublish = async (id: string) => {
    try {
      await publishProcessDefinition(id);
      message.success('发布成功');
      fetch();
    } catch {
      message.error('发布失败');
    }
  };

  const handleSave = async (req: CreateProcessDefinitionRequest, id?: string) => {
    try {
      if (id) {
        await updateProcessDefinition(id, req);
        message.success('更新成功');
      } else {
        await createProcessDefinition(req);
        message.success('创建成功');
      }
      setDesignerOpen(false);
      fetch();
    } catch {
      message.error(id ? '更新失败' : '创建失败');
    }
  };

  const columns: ColumnsType<ProcessDefinitionInfo> = [
    { title: '名称', dataIndex: 'name', key: 'name' },
    { title: '编码', dataIndex: 'key', key: 'key' },
    { title: '版本', dataIndex: 'version', key: 'version', width: 80 },
    { title: '分类', dataIndex: 'category', key: 'category', width: 120 },
    {
      title: '状态', dataIndex: 'status', key: 'status', width: 100,
      render: (s: string) => <Tag color={statusColors[s]}>{s}</Tag>,
    },
    {
      title: '操作', key: 'action', width: 200,
      render: (_, record) => (
        <Space>
          {record.status === 'draft' && (
            <>
              <Button size="small" onClick={() => handleEdit(record.id)}>编辑</Button>
              <Button size="small" type="primary" onClick={() => handlePublish(record.id)}>发布</Button>
            </>
          )}
        </Space>
      ),
    },
  ];

  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" onClick={handleCreate}>新建流程</Button>
      </div>
      <Table
        rowKey="id"
        columns={columns}
        dataSource={data}
        loading={loading}
        pagination={{ current: page, total, pageSize: 20, onChange: setPage }}
      />
      <Modal
        title={editingId ? '编辑流程' : '新建流程'}
        open={designerOpen}
        onCancel={() => setDesignerOpen(false)}
        footer={null}
        width={1200}
        destroyOnClose
      >
        <ProcessDesigner
          definitionId={editingId}
          onSave={handleSave}
        />
      </Modal>
    </>
  );
}