import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate, useSearchParams } from "react-router-dom"; import { DeleteOutlined as DeleteOutlinedIcon, EditOutlined as EditOutlinedIcon, PlusOutlined as PlusOutlinedIcon } from "@ant-design/icons"; import { PageHeader } from "@ant-design/pro-components"; import { useRequest } from "ahooks"; import { Button, Divider, Empty, Menu, type MenuProps, Modal, Radio, Space, Switch, Table, type TableProps, Tooltip, Typography, message, notification, theme, } from "antd"; import dayjs from "dayjs"; import { ClientResponseError } from "pocketbase"; import { type WorkflowModel, isAllNodesValidated } from "@/domain/workflow"; import { list as listWorkflow, remove as removeWorkflow, save as saveWorkflow } from "@/repository/workflow"; import { getErrMsg } from "@/utils/error"; const WorkflowList = () => { const navigate = useNavigate(); const [searchParams] = useSearchParams(); const { t } = useTranslation(); const { token: themeToken } = theme.useToken(); const [messageApi, MessageContextHolder] = message.useMessage(); const [modalApi, ModelContextHolder] = Modal.useModal(); const [notificationApi, NotificationContextHolder] = notification.useNotification(); const tableColumns: TableProps["columns"] = [ { key: "$index", align: "center", fixed: "left", width: 50, render: (_, __, index) => (page - 1) * pageSize + index + 1, }, { key: "name", title: t("workflow.props.name"), ellipsis: true, render: (_, record) => ( {record.name} {record.description} ), }, { key: "trigger", title: t("workflow.props.trigger"), ellipsis: true, render: (_, record) => { const trigger = record.type; if (!trigger) { return "-"; } else if (trigger === "manual") { return {t("workflow.props.trigger.manual")}; } else if (trigger === "auto") { return ( {t("workflow.props.trigger.auto")} {record.crontab ?? ""} ); } }, }, { key: "state", title: t("workflow.props.state"), defaultFilteredValue: searchParams.has("state") ? [searchParams.get("state") as string] : undefined, filterDropdown: ({ setSelectedKeys, confirm, clearFilters }) => { const items: Required["items"] = [ ["enabled", "workflow.props.state.filter.enabled"], ["disabled", "workflow.props.state.filter.disabled"], ].map(([key, label]) => { return { key, label: {t(label)}, onClick: () => { if (filters["state"] !== key) { setPage(1); setFilters((prev) => ({ ...prev, state: key })); setSelectedKeys([key]); } confirm({ closeDropdown: true }); }, }; }); const handleResetClick = () => { setPage(1); setFilters((prev) => ({ ...prev, state: undefined })); setSelectedKeys([]); clearFilters?.(); confirm(); }; const handleConfirmClick = () => { confirm(); }; return (
); }, render: (_, record) => { const enabled = record.enabled; return ( { handleEnabledChange(record); }} /> ); }, }, { key: "lastExecutedAt", title: t("workflow.props.latest_execution_status"), render: () => { // TODO: 最近执行状态 return <>TODO; }, }, { key: "createdAt", title: t("workflow.props.created_at"), ellipsis: true, render: (_, record) => { return dayjs(record.created!).format("YYYY-MM-DD HH:mm:ss"); }, }, { key: "updatedAt", title: t("workflow.props.updated_at"), ellipsis: true, render: (_, record) => { return dayjs(record.updated!).format("YYYY-MM-DD HH:mm:ss"); }, }, { key: "$action", align: "end", fixed: "right", width: 120, render: (_, record) => ( , ]} /> columns={tableColumns} dataSource={tableData} loading={loading} locale={{ emptyText: , }} pagination={{ current: page, pageSize: pageSize, total: tableTotal, showSizeChanger: true, onChange: (page: number, pageSize: number) => { setPage(page); setPageSize(pageSize); }, onShowSizeChange: (page: number, pageSize: number) => { setPage(page); setPageSize(pageSize); }, }} rowKey={(record: WorkflowModel) => record.id} scroll={{ x: "max(100%, 960px)" }} /> ); }; export default WorkflowList;