feat: 添加container列表

2024-09-17 23:56:47 +08:00
parent 596c50cd0b
commit a36a390d25
16 changed files with 969 additions and 15 deletions
--- a/src/pages/container/edit/List.tsx
+++ b/src/pages/container/edit/List.tsx
@@ -0,0 +1,143 @@
+import { query } from '@/modules';
+import { Button, Input, message, Modal, Table } from 'antd';
+import { useEffect, useState } from 'react';
+import { TextArea } from '../components/TextArea';
+import { useContainerStore } from '../store';
+import { useShallow } from 'zustand/react/shallow';
+import { Form } from 'antd';
+
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const containerStore = useContainerStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = containerStore.showEdit;
+    if (open) {
+      form.setFieldsValue(containerStore.formData || {});
+    }
+  }, [containerStore.showEdit]);
+  const onFinish = async (values: any) => {
+    console.log(values);
+    onClose();
+  };
+  const onClose = () => {
+    containerStore.setShowEdit(false);
+    form.setFieldsValue({});
+  };
+  const isEdit = containerStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={containerStore.showEdit}
+      onClose={() => containerStore.setShowEdit(false)}
+      destroyOnClose
+      footer={false}
+      onCancel={onClose}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        labelCol={{
+          span: 4,
+          offset: 2,
+        }}>
+        <Form.Item name='id' hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name='title' label='title'>
+          <Input />
+        </Form.Item>
+        <Form.Item name='code' label='code'>
+          <TextArea value={containerStore.formData.code} />
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Submit
+          </Button>
+          <Button htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+export const ContainerList = () => {
+  const containerStore = useContainerStore(
+    useShallow((state) => {
+      return {
+        setFormData: state.setFormData,
+        setShowEdit: state.setShowEdit,
+        list: state.list,
+        getList: state.getList,
+      };
+    }),
+  );
+  useEffect(() => {
+    containerStore.getList();
+  }, []);
+
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+    },
+    {
+      title: 'Title',
+      dataIndex: 'title',
+    },
+    {
+      title: 'Code',
+      dataIndex: 'code',
+      render: (text: string, record: any) => {
+        return <TextArea value={text} readonly />;
+      },
+    },
+    {
+      title: 'Source',
+      dataIndex: 'source',
+    },
+    {
+      title: 'Operation',
+      dataIndex: 'operation',
+      render: (text: string, record: any) => {
+        return (
+          <div className='flex gap-2'>
+            <Button
+              type='primary'
+              onClick={() => {
+                containerStore.setFormData(record);
+                containerStore.setShowEdit(true);
+              }}>
+              Edit
+            </Button>
+            <Button danger>Delete</Button>
+          </div>
+        );
+      },
+    },
+  ];
+  return (
+    <div className='w-full h-full '>
+      <div className='mb-2 w-full p-2 bg-white rounded-lg'>
+        <Button
+          className='w-20 '
+          type='primary'
+          onClick={() => {
+            containerStore.setFormData({});
+            containerStore.setShowEdit(true);
+          }}>
+          Add
+        </Button>
+      </div>
+      <Table dataSource={containerStore.list} rowKey='id' columns={columns} />
+      <FormModal />
+    </div>
+  );
+};