feat: menu

src/pages/system/tenant/list/index.tsx

@@ -1,68 +1,49 @@
 import EnhancedProTable from "@/components/EnhancedProTable";
 import {
   getTenantPage,
-  deleteTenant,
+  createTenant,
   type TenantPageReqVO,
   type TenantVO,
+  deleteTenant,
+  updateTenant,
 } from "@/services/system/tenant/list";
+import React, { createContext, useCallback } from "react";
+import ConfigurableDrawerForm, {
+  ConfigurableDrawerFormRef,
+} from "@/components/DrawerForm";
+import { useRef, useState } from "react";
+import { formColumns, baseTenantColumns } from "./config";
 import { PlusOutlined } from "@ant-design/icons";
-import {
-  ProCoreActionType,
-  ProTable,
-  TableDropdown,
-  type ProColumns,
-} from "@ant-design/pro-components";
-import { Button, Space } from "antd";
-
-import {
-  createOrderTableConfig,
-  createCommonActions,
-  createCommonToolbarActions,
-} from "@/utils/antd/tableConfigFactory";
-import { useEnhancedTable } from "@/hooks/antd/useEnhancedTable";
+import { ref } from "process";
+import { ActionType, ProColumns } from "@ant-design/pro-components";
+import { ToolbarAction } from "@/components/EnhancedProTable/types";
+import { Modal, Popconfirm } from "antd";
+import { formStatusType } from "@/constants";
+import dayjs from "dayjs";
+export const waitTimePromise = async (time: number = 90) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(true);
+    }, time);
+  });
+};
 const TenantList = () => {
-  const columns: ProColumns<TenantVO>[] = [
-    {
-      title: "租户编号",
-      dataIndex: "id",
-      tip: "租户编号",
-    },
-    {
-      title: "租户名",
-      dataIndex: "name",
-
-      ellipsis: true, // 超长省略
-      tip: "租户名", // 提示信息
-    },
-    {
-      title: "状态",
-      dataIndex: "status",
-      valueType: "select",
-      valueEnum: {
-        all: { text: "全部", status: "Default" },
-        open: { text: "未解决", status: "Error" },
-        closed: { text: "已解决", status: "Success" },
-      },
-    },
-    {
-      title: "创建时间",
-      dataIndex: "created_at",
-      valueType: "dateTime",
-      hideInSearch: true, // 在搜索表单中隐藏
-    },
-  ];
-
+  const configurableDrawerRef = useRef<ConfigurableDrawerFormRef>(null);
+  const tableRef = useRef<ActionType>(null);
+  const [type, setType] = useState<"create" | "update">("create");
+  const [id, setId] = useState<number>(0);
   const onFetch = async (
     params: TenantPageReqVO & {
       pageSize?: number;
       current?: number;
     }
   ) => {
+    await waitTimePromise();
     const data = await getTenantPage({
+      ...params,
       pageNo: params.current,
       pageSize: params.pageSize,
     });
-    console.log(data);
     return {
       data: data.list,
       success: true,
@@ -70,39 +51,89 @@ const TenantList = () => {
     };
   };
 
-  const { actionRef, selectedRowKeys, selectedRows, actions } =
-    useEnhancedTable<TenantVO>({
-      onEdit: (record) => {
-        console.log("编辑订单:", record);
-      },
-      onDelete: async (record) => {
-        await deleteTenant(record.id);
-        return true;
-      },
-    });
-  const tableActions = createCommonActions<TenantVO>({
-    onView: actions.view,
-    onEdit: actions.edit,
-    onDelete: actions.delete,
-  });
+  const handleSubmit = useCallback(
+    async (values: TenantVO) => {
+      if (type === "create") {
+        await createTenant(values);
+      } else {
+        await updateTenant({
+          ...values,
+          id,
+          expireTime: dayjs(values.expireTime).valueOf(),
+        });
+      }
+      tableRef.current?.reload();
+      return true;
+    },
+    [type]
+  );
 
-  const toolbarActions = createCommonToolbarActions({
-    onExport: actions.export,
-  });
+  const handleAdd = () => {
+    setType("create");
+    configurableDrawerRef.current?.open({});
+  };
+  const handleEdit = (record: TenantVO) => {
+    setType("update");
+    setId(record.id);
+
+    configurableDrawerRef.current?.open(record);
+  };
+  const toolbarActions: ToolbarAction[] = [
+    {
+      key: "add",
+      label: "新建",
+      type: "primary",
+      icon: <PlusOutlined />,
+      onClick: handleAdd,
+    },
+  ];
+
+  const actionColumns: ProColumns<TenantVO> = {
+    title: "操作",
+    dataIndex: "option",
+    valueType: "option",
+    fixed: "right",
+    width: 120,
+    render: (text: React.ReactNode, record: TenantVO, _: any, action: any) => [
+      <a key="editable" onClick={() => handleEdit(record)}>
+        编辑
+      </a>,
+      <Popconfirm
+        title="是否删除?"
+        key="delete"
+        onConfirm={async () => {
+          await deleteTenant(record.id);
+          action?.reload();
+        }}
+        okText="是"
+        cancelText="否"
+      >
+        <a>删除</a>
+      </Popconfirm>,
+    ],
+  };
+  const columns = [...baseTenantColumns, actionColumns];
   return (
-    <div>
+    <>
       <EnhancedProTable<TenantVO>
+        ref={tableRef}
         columns={columns}
         request={onFetch}
-        actions={tableActions}
         toolbarActions={toolbarActions}
-        headerTitle="订单管理"
+        headerTitle="租户列表"
         showIndex={false}
-        // showSelection
+        showSelection={false}
         showActions
         maxActionCount={3}
       />
-    </div>
+
+      <ConfigurableDrawerForm
+        ref={configurableDrawerRef}
+        title={formStatusType[type]}
+        columns={formColumns}
+        onSubmit={handleSubmit}
+      />
+    </>
   );
 };