test: 暂存

src/pages/container/edit/List.tsx

@@ -1,4 +1,3 @@
-import { query } from '@/modules';
 import { Button, Input, message, Modal, Table } from 'antd';
 import { useEffect, useState } from 'react';
 import { TextArea } from '../components/TextArea';
@@ -14,6 +13,7 @@ const FormModal = () => {
         showEdit: state.showEdit,
         setShowEdit: state.setShowEdit,
         formData: state.formData,
+        updateData: state.updateData,
       };
     }),
   );
@@ -21,15 +21,16 @@ const FormModal = () => {
     const open = containerStore.showEdit;
     if (open) {
       form.setFieldsValue(containerStore.formData || {});
+    } else {
+      form.resetFields();
     }
   }, [containerStore.showEdit]);
   const onFinish = async (values: any) => {
-    console.log(values);
-    onClose();
+    containerStore.updateData(values);
   };
   const onClose = () => {
     containerStore.setShowEdit(false);
-    form.setFieldsValue({});
+    form.resetFields();
   };
   const isEdit = containerStore.formData.id;
   return (
@@ -39,13 +40,16 @@ const FormModal = () => {
       onClose={() => containerStore.setShowEdit(false)}
       destroyOnClose
       footer={false}
+      width={800}
       onCancel={onClose}>
       <Form
         form={form}
         onFinish={onFinish}
         labelCol={{
           span: 4,
-          offset: 2,
+        }}
+        wrapperCol={{
+          span: 20,
         }}>
         <Form.Item name='id' hidden>
           <Input />
@@ -60,7 +64,7 @@ const FormModal = () => {
           <Button type='primary' htmlType='submit'>
             Submit
           </Button>
-          <Button htmlType='reset' onClick={onClose}>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
             Cancel
           </Button>
         </Form.Item>
@@ -75,7 +79,9 @@ export const ContainerList = () => {
         setFormData: state.setFormData,
         setShowEdit: state.setShowEdit,
         list: state.list,
+        deleteData: state.deleteData,
         getList: state.getList,
+        loading: state.loading,
       };
     }),
   );
@@ -84,10 +90,10 @@ export const ContainerList = () => {
   }, []);
 
   const columns = [
-    {
-      title: 'ID',
-      dataIndex: 'id',
-    },
+    // {
+    //   title: 'ID',
+    //   dataIndex: 'id',
+    // },
     {
       title: 'Title',
       dataIndex: 'title',
@@ -95,6 +101,7 @@ export const ContainerList = () => {
     {
       title: 'Code',
       dataIndex: 'code',
+      width: '40%',
       render: (text: string, record: any) => {
         return <TextArea value={text} readonly />;
       },
@@ -117,14 +124,20 @@ export const ContainerList = () => {
               }}>
               Edit
             </Button>
-            <Button danger>Delete</Button>
+            <Button
+              danger
+              onClick={() => {
+                containerStore.deleteData(record.id);
+              }}>
+              Delete
+            </Button>
           </div>
         );
       },
     },
   ];
   return (
-    <div className='w-full h-full '>
+    <div className='w-full h-full flex flex-col'>
       <div className='mb-2 w-full p-2 bg-white rounded-lg'>
         <Button
           className='w-20 '
@@ -136,7 +149,19 @@ export const ContainerList = () => {
           Add
         </Button>
       </div>
-      <Table dataSource={containerStore.list} rowKey='id' columns={columns} />
+      <div className='flex-grow overflow-scroll'>
+        <Table
+          pagination={false}
+          scroll={{
+            y: 600,
+          }}
+          loading={containerStore.loading}
+          dataSource={containerStore.list}
+          rowKey='id'
+          columns={columns}
+        />
+      </div>
+      <div className='h-2'></div>
       <FormModal />
     </div>
   );