WEB/src/pages/Product/Strength/index.tsx

import {
  productcontrollerCreatestrength,
  productcontrollerDeletestrength,
  productcontrollerGetstrength,
} from '@/servers/api/product';
import { PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  DrawerForm,
  PageContainer,
  ProColumns,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import { App, Button, Popconfirm } from 'antd';
import { useRef } from 'react';

const List: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const { message } = App.useApp();
  const columns: ProColumns<API.Category>[] = [
    {
      title: '名称',
      dataIndex: 'name',
      tip: '名称是唯一的 key',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '名称为必填项',
          },
        ],
      },
    },
    {
      title: '标识',
      dataIndex: 'unique_key',
      hideInSearch: true,
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          {/* <UpdateForm tableRef={actionRef} values={record} />
          <Divider type="vertical" /> */}
          <Popconfirm
            title="删除"
            description="确认删除？"
            onConfirm={async () => {
              try {
                const { success, message: errMsg } =
                  await productcontrollerDeletestrength({ id: record.id });
                if (!success) {
                  throw new Error(errMsg);
                }
                actionRef.current?.reload();
              } catch (error: any) {
                message.error(error.message);
              }
            }}
          >
            <Button type="primary" danger>
              删除
            </Button>
          </Popconfirm>
        </>
      ),
    },
  ];

  return (
    <PageContainer header={{ title: '强度列表' }}>
      <ProTable<API.Category>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={() => [<CreateForm tableRef={actionRef} />]}
        request={async (params) => {
          const { data, success } = await productcontrollerGetstrength(params);
          return {
            total: data?.total || 0,
            data: data?.items || [],
            success,
          };
        }}
        columns={columns}
      />
    </PageContainer>
  );
};

const CreateForm: React.FC<{
  tableRef: React.MutableRefObject<ActionType | undefined>;
}> = ({ tableRef }) => {
  const { message } = App.useApp();
  return (
    <DrawerForm<API.CreateCategoryDTO>
      title="新建"
      trigger={
        <Button type="primary">
          <PlusOutlined />
          新建
        </Button>
      }
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      onFinish={async (values) => {
        try {
          const { success, message: errMsg } =
            await productcontrollerCreatestrength(values);
          if (!success) {
            throw new Error(errMsg);
          }
          tableRef.current?.reload();
          message.success('提交成功');
          return true;
        } catch (error: any) {
          message.error(error.message);
        }
      }}
    >
      <ProFormText
        name="name"
        width="md"
        label="强度名称"
        placeholder="请输入名称"
        rules={[{ required: true, message: '请输入名称' }]}
      />
      <ProFormText
        name="unique_key"
        width="md"
        label="Key"
        placeholder="请输入Key"
        rules={[{ required: true, message: '请输入Key' }]}
      />
    </DrawerForm>
  );
};

// const UpdateForm: React.FC<{
//   tableRef: React.MutableRefObject<ActionType | undefined>;
//   values: API.Category;
// }> = ({ tableRef, values: initialValues }) => {
//   const { message } = App.useApp();
//   return (
//     <DrawerForm<API.UpdateCategoryDTO>
//       title="编辑"
//       initialValues={initialValues}
//       trigger={
//         <Button type="primary">
//           <EditOutlined />
//           编辑
//         </Button>
//       }
//       autoFocusFirstInput
//       drawerProps={{
//         destroyOnClose: true,
//       }}
//       onFinish={async (values) => {
//         try {
//           const { success, message: errMsg } =
//             await productcontrollerUpdatestrength(
//               { id: initialValues.id },
//               values,
//             );
//           if (!success) {
//             throw new Error(errMsg);
//           }
//           message.success('提交成功');
//           tableRef.current?.reload();
//           return true;
//         } catch (error: any) {
//           message.error(error.message);
//         }
//       }}
//     >
//       <ProForm.Group>
//         <ProFormText
//           name="name"
//           width="md"
//           label="强度名称"
//           placeholder="请输入名称"
//           rules={[{ required: true, message: '请输入名称' }]}
//         />
//       </ProForm.Group>
//     </DrawerForm>
//   );
// };

export default List;