档口管理、刷卡机管理接口调用

src/pages/card/gate/index.jsx

@@ -1,9 +1,10 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import styles from "./index.less";
 import { PageContainer } from '@ant-design/pro-layout';
 import { PlusOutlined } from '@ant-design/icons';
 import ProTable from '@ant-design/pro-table';
-import { Button, Form, Input, Modal, Select, Popconfirm } from 'antd';
+import { Button, Form, Input, Modal, Select, Popconfirm, message } from 'antd';
+import cardAPI from "../service";
 
 /**
  * 档口管理
@@ -11,9 +12,13 @@ import { Button, Form, Input, Modal, Select, Popconfirm } from 'antd';
  */
 const Gate = () => {
     const actionRef = useRef();
-    const modalForm = Form.useForm();
+    const [modalForm] = Form.useForm();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [currentOption, setCurrentOption] = useState({ id: '' });
+    const [storeList, setStoreList] = useState([]);
+    const [selectedStore, setSelectedStore] = useState('');
+    const [current, setCurrent] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
 
     /**
      * 点击编辑按钮
@@ -22,7 +27,7 @@ const Gate = () => {
     const onEditTableRow = (record) => {
         setCurrentOption(record);
         setIsModalOpen(true);
-        // modalForm.setFieldsValue(record);
+        modalForm.setFieldsValue(record);
     }
 
     /**
@@ -30,6 +35,7 @@ const Gate = () => {
      */
     const onCreateTableRow = () => {
         setIsModalOpen(true);
+        modalForm.resetFields();
     }
 
     /**
@@ -43,21 +49,29 @@ const Gate = () => {
     /**
      * 提交表单
      */
-    const onFinish = (values) => {
-        console.log('value', values);
+    const onFinish = async (values) => {
         if (values.id) {
-            console.log('更新')
+            const response = await cardAPI.UpdateGateInfo(values);
+            if (response.statusCode === 200) {
+                message.success('更新档口成功！');
+                setIsModalOpen(false);
+                actionRef.current.reload();
+            } else {
+                message.error(response.errors || '更新档口失败');
+            }
         } else {
-            console.log('创建')
+            const response = await cardAPI.AddGate(values);
+            if (response.statusCode === 200) {
+                message.success('新增档口成功！');
+                setIsModalOpen(false);
+                actionRef.current.reload();
+            } else {
+                message.error(response.errors || '新增档口失败');
+            }
         }
     }
 
     const columns = [
-        {
-            title: 'ID',
-            dataIndex: 'id',
-            ellipsis: true,
-        },
         {
             title: '档口名称',
             dataIndex: 'name',
@@ -66,6 +80,12 @@ const Gate = () => {
         {
             title: '归属门店',
             dataIndex: 'storeId',
+            render: (_, record) => {
+                const find = storeList.find(item => item.id === record.storeId);
+                if (find) {
+                    return <div>{find.store_Name}</div>
+                }
+            }
         },
         {
             title: '属性',
@@ -107,26 +127,35 @@ const Gate = () => {
         },
         {
             title: '大屏横幅',
-            dataIndex: 'remark',
+            dataIndex: 'remaek',
         },
         {
             title: '操作',
             valueType: 'option',
             key: 'option',
             render: (text, record, _, action) => [
-                <a onClick={() => onEditTableRow(record)}>编辑</a>,
-                <Popconfirm
-                    title="你确定要删除此条数据吗？"
-                    onConfirm={() => onDeleteTableRow(record)}
-                    okText="确定"
-                    cancelText="取消"
-                >
-                    <a href="#">删除</a>
-                </Popconfirm>
+                <a onClick={() => onEditTableRow(record)}>编辑</a>
             ],
         },
     ];
 
+    /**
+     * 获取店铺列表
+     */
+    const onFetchStoreList = async () => {
+        const response = await cardAPI.GetAllStore();
+        if (response.isSuccess) {
+            setStoreList(response.data);
+            setSelectedStore(response.data[0].id);
+            actionRef.current.reload();
+        } else {
+            message.error(response.msg || '获取店铺列表失败');
+        }
+    }
+
+    useEffect(() => {
+        onFetchStoreList();
+    }, []);
 
     return (
         <PageContainer>
@@ -135,31 +164,16 @@ const Gate = () => {
                     columns={columns}
                     actionRef={actionRef}
                     request={
-                        () => {
-                            const data = [
-                                {
-                                    id: '1008611',
-                                    name: '100546549568',
-                                    storeId: '1008611-100111',
-                                    mode: 1,
-                                    price: 999,
-                                    status: 0,
-                                    remark: '111111111111111'
-                                },
-                                {
-                                    id: '10086112',
-                                    name: '100546549568222',
-                                    storeId: '1022208611-100111',
-                                    mode: 1,
-                                    price: 199,
-                                    status: 0,
-                                    remark: '111111111111111'
-                                },
-                            ]
-                            return {
-                                data: data,
-                                success: true,
-                                total: 2,
+                        async () => {
+                            if (selectedStore) {
+                                const response = await cardAPI.GetGateListByStorePage(selectedStore, current, pageSize);
+                                if (response.statusCode === 200) {
+                                    return {
+                                        data: response.data.data,
+                                        success: true,
+                                        total: response.data.total
+                                    }
+                                }
                             }
                         }
                     }
@@ -168,30 +182,44 @@ const Gate = () => {
                         type: 'multiple',
                     }}
                     rowKey="id"
-                    search={{
-                        labelWidth: 'auto',
-                    }}
+                    search={false}
                     options={{
                         setting: {
                             listsHeight: 400,
                         },
                     }}
                     pagination={{
-                        pageSize: 5,
-                        onChange: (page) => console.log(page),
+                        pageSize: pageSize,
+                        onChange: (page) => setCurrent(page),
                     }}
                     dateFormatter="string"
                     headerTitle="储值卡账户管理"
                     toolBarRender={() => [
+                        <div className={styles.table_search_item}>
+                            <div>
+                                当前门店：
+                            </div>
+                            <Select style={{ width: 300 }} value={selectedStore} onChange={(value) => {
+                                setSelectedStore(value);
+                                actionRef.current.reload();
+                            }}>
+                                {
+                                    storeList.map(item => {
+                                        return <Option value={item.id} key={item.id}>{item.store_Name}</Option>
+                                    })
+                                }
+                            </Select>
+                        </div>,
                         <Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}>
                             新建
                         </Button>
                     ]}
                 />
-                <Modal width={600} title={currentOption.id ? '编辑会员' : '添加会员'} visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
+                <Modal width={600} title={currentOption.id ? '编辑档口' : '添加档口'} visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
                     <Form
                         name="basic"
                         onFinish={onFinish}
+                        form={modalForm}
                     >
 
                         <Form.Item
@@ -225,7 +253,15 @@ const Gate = () => {
                                 },
                             ]}
                         >
-                            <Input />
+                            <Select>
+                                {
+                                    storeList.map(store => {
+                                        return (
+                                            <Select.Option key={store.id} value={store.id}>{store.store_Name}</Select.Option>
+                                        )
+                                    })
+                                }
+                            </Select>
                         </Form.Item>
 
                         <Form.Item
@@ -276,7 +312,7 @@ const Gate = () => {
 
                         <Form.Item
                             label="大屏横幅"
-                            name="remark"
+                            name="remaek"
                             rules={[
                                 {
                                     required: true,

src/pages/card/gate/index.less

@@ -0,0 +1,4 @@
+.table_search_item {
+    display: flex;
+    align-items: center;
+}

src/pages/card/machine/index.jsx

@@ -1,9 +1,10 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import styles from "./index.less";
 import { PageContainer } from '@ant-design/pro-layout';
 import { PlusOutlined } from '@ant-design/icons';
 import ProTable from '@ant-design/pro-table';
-import { Button, Form, Input, Modal, Select, Popconfirm } from 'antd';
+import { Button, Form, Input, Modal, Select, Popconfirm, message } from 'antd';
+import cardAPI from "../service";
 
 /**
  * 刷卡机管理
@@ -11,9 +12,15 @@ import { Button, Form, Input, Modal, Select, Popconfirm } from 'antd';
  */
 const Machine = () => {
     const actionRef = useRef();
-    const modalForm = Form.useForm();
+    const [modalForm] = Form.useForm();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [currentOption, setCurrentOption] = useState({ id: '' });
+    const [storeList, setStoreList] = useState([]);
+    const [selectedStore, setSelectedStore] = useState('');
+    const [gateList, setGateList] = useState([]);
+    const [selectedGate, setSelectedGate] = useState('');
+    const [current, setCurrent] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
 
     /**
      * 点击编辑按钮
@@ -22,7 +29,7 @@ const Machine = () => {
     const onEditTableRow = (record) => {
         setCurrentOption(record);
         setIsModalOpen(true);
-        // modalForm.setFieldsValue(record);
+        modalForm.setFieldsValue(record);
     }
 
     /**
@@ -30,6 +37,7 @@ const Machine = () => {
      */
     const onCreateTableRow = () => {
         setIsModalOpen(true);
+        modalForm.resetFields();
     }
 
     /**
@@ -43,12 +51,25 @@ const Machine = () => {
     /**
      * 提交表单
      */
-    const onFinish = (values) => {
-        console.log('value', values);
+    const onFinish = async (values) => {
         if (values.id) {
-            console.log('更新')
+            const response = await cardAPI.UpdatePayCardInfo(values);
+            if (response.statusCode === 200) {
+                setIsModalOpen(false);
+                message.success('更新成功！');
+                actionRef.current.reload();
+            } else {
+                message.error(response.error || '更新设备失败');                
+            }
         } else {
-            console.log('创建')
+            const response = await cardAPI.PayCardAdd(values);
+            if (response.statusCode === 200) {
+                setIsModalOpen(false);
+                message.success('新增成功！');
+                actionRef.current.reload();
+            } else {
+                message.error(response.error || '新增设备失败');                
+            }
         }
     }
 
@@ -88,26 +109,50 @@ const Machine = () => {
         },
         {
             title: '间隔时间',
-            dataIndex: 'steepTime',
+            dataIndex: 'sleepTime',
         },
         {
             title: '操作',
             valueType: 'option',
             key: 'option',
             render: (text, record, _, action) => [
-                <a onClick={() => onEditTableRow(record)}>编辑</a>,
-                <Popconfirm
-                    title="你确定要删除此条数据吗？"
-                    onConfirm={() => onDeleteTableRow(record)}
-                    okText="确定"
-                    cancelText="取消"
-                >
-                    <a href="#">删除</a>
-                </Popconfirm>
+                <a onClick={() => onEditTableRow(record)}>编辑</a>
             ],
         },
     ];
 
+    /**
+     * 获取店铺列表
+     */
+    const onFetchStoreList = async () => {
+        const response = await cardAPI.GetAllStore();
+        if (response.isSuccess) {
+            setStoreList(response.data);
+            setSelectedStore(response.data[0].id);
+            onFetchGateList(response.data[0].id);
+        } else {
+            message.error(response.msg || '获取店铺列表失败');
+        }
+    }
+
+    /**
+     * 根据门店ID获取档口列表
+     */
+    const onFetchGateList = async (storeId) => {
+        const response = await cardAPI.GetGateListByStoreList(storeId);
+        if (response.statusCode === 200) {
+            setGateList(response.data);
+            setSelectedGate(response.data[0].id);
+            actionRef.current.reload();
+        } else {
+            message.error(response.error || '获取档口列表失败');
+        }
+    }
+
+    useEffect(() => {
+        onFetchStoreList();
+    }, []);
+
 
     return (
         <PageContainer>
@@ -116,27 +161,17 @@ const Machine = () => {
                     columns={columns}
                     actionRef={actionRef}
                     request={
-                        () => {
-                            const data = [
-                                {
-                                    id: '1008611',
-                                    name: '设备名称1',
-                                    gateId: '1008611-100111',
-                                    status: 0,
-                                    steepTime: 10
-                                },
-                                {
-                                    id: '10086112222',
-                                    name: '设备名称2222',
-                                    gateId: '1008611-100111',
-                                    status: 0,
-                                    steepTime: 20
-                                },
-                            ]
-                            return {
-                                data: data,
-                                success: true,
-                                total: 2,
+                        async () => {
+                            console.log('selectedGate', selectedGate);
+                            if (selectedGate) {
+                                const response = await cardAPI.PayCardByGateId(selectedGate, current, pageSize);
+                                if (response.statusCode === 200) {
+                                    return {
+                                        data: response.data.data,
+                                        success: true,
+                                        total: response.data.total,
+                                    }
+                                }
                             }
                         }
                     }
@@ -145,30 +180,60 @@ const Machine = () => {
                         type: 'multiple',
                     }}
                     rowKey="id"
-                    search={{
-                        labelWidth: 'auto',
-                    }}
+                    search={false}
                     options={{
                         setting: {
                             listsHeight: 400,
                         },
                     }}
                     pagination={{
-                        pageSize: 5,
-                        onChange: (page) => console.log(page),
+                        pageSize: pageSize,
+                        onChange: (page) => setCurrent(page)
                     }}
                     dateFormatter="string"
                     headerTitle="储值卡账户管理"
                     toolBarRender={() => [
+                        <div className={styles.table_search_item}>
+                            <div>
+                                当前门店：
+                            </div>
+                            <Select style={{ width: 300 }} value={selectedStore} onChange={(value) => {
+                                setSelectedStore(value);
+                                onFetchGateList(value);
+                                actionRef.current.reload();
+                            }}>
+                                {
+                                    storeList.map(item => {
+                                        return <Option value={item.id} key={item.id}>{item.store_Name}</Option>
+                                    })
+                                }
+                            </Select>
+                        </div>,
+                        <div className={styles.table_search_item}>
+                            <div>
+                                当前档口：
+                            </div>
+                            <Select style={{ width: 300 }} value={selectedGate} onChange={(value) => {
+                                setSelectedGate(value);
+                                actionRef.current.reload();
+                            }}>
+                                {
+                                    gateList.map(item => {
+                                        return <Option value={item.id} key={item.id}>{item.name}</Option>
+                                    })
+                                }
+                            </Select>
+                        </div>,
                         <Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}>
                             新建
                         </Button>
                     ]}
                 />
-                <Modal width={600} title={currentOption.id ? '编辑会员' : '添加会员'} visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
+                <Modal width={600} title={currentOption.id ? '编辑刷卡机' : '添加刷卡机'} visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
                     <Form
                         name="basic"
                         onFinish={onFinish}
+                        form={modalForm}
                     >
 
                         <Form.Item
@@ -202,7 +267,17 @@ const Machine = () => {
                                 },
                             ]}
                         >
-                            <Input />
+                            <Select>
+                                {
+                                    gateList.map(item => {
+                                        return (
+                                            <Select.Option key={item.id} value={item.id}>
+                                                {item.name}
+                                            </Select.Option>
+                                        )
+                                    })
+                                }
+                            </Select>
                         </Form.Item>
 
                         <Form.Item
@@ -224,7 +299,7 @@ const Machine = () => {
 
                         <Form.Item
                             label="保护间隔时间"
-                            name="steepTime"
+                            name="sleepTime"
                             rules={[
                                 {
                                     required: true,

src/pages/card/machine/index.less

@@ -0,0 +1,4 @@
+.table_search_item {
+    display: flex;
+    align-items: center;
+}

src/pages/card/service.js

@@ -0,0 +1,85 @@
+import { request } from 'umi';
+
+export default {
+    //获取所有门店
+    GetAllStore() {
+		return request('/kitchen/api/StoreHelper/GetAllStore', {
+			method: 'GET'
+		});
+	},
+
+    /** 档口管理：Start */
+    // 新增档口
+    AddGate(data) {
+        return request(`/kitchen/api/GateInfo/add`, {
+            method: 'POST',
+            data
+        });
+    },
+
+    //档口状态修改
+    EnableGate(data) {
+        return request(`/kitchen/api/GateInfo/Enable`, {
+            method: 'POST',
+            data
+        });
+    },
+
+    //根据门店ID查询 档口分页列表
+    GetGateListByStorePage(StoreId, Current, PageSize) {
+        return request(`/kitchen/api/GateInfo/gatelist?StoreId=${StoreId}&Current=${Current}&PageSize=${PageSize}`, {
+            method: 'GET'
+        });
+    },
+
+    //根据门店ID查询 档口列表
+    GetGateListByStoreList(StoreId) {
+        return request(`/kitchen/api/GateInfo/gatealllist?StoreId=${StoreId}`, {
+            method: 'GET'
+        });
+    },
+
+    //更新档口信息
+    UpdateGateInfo(data) {
+        return request(`/kitchen/api/GateInfo/Update`, {
+            method: 'POST',
+            data
+        });
+    },
+
+    /** 档口管理：End */
+
+    /** 刷卡机管理：Start */
+    //  新增刷卡机
+    PayCardAdd(data) {
+        return request(`/kitchen/api/PayCard/add`, {
+            method: 'POST',
+            data
+        });
+    },
+
+    //刷卡机状态更改
+    PayCardEnable(data) {
+        return request(`/kitchenapi/PayCard/enable`, {
+            method: 'POST',
+            data
+        });
+    },
+
+    //根据档口信息查询刷卡机列表
+    PayCardByGateId(GateId, Current, PageSize) {
+        return request(`/kitchen/api/PayCard/gateList?GateId=${GateId}&Current=${Current}&PageSize=${PageSize}`, {
+            method: 'GET'
+        });
+    },
+
+    //更新刷卡机信息
+    UpdatePayCardInfo(data) {
+        return request(`/kitchen/api/PayCard/update`, {
+            method: 'POST',
+            data
+        });
+    },
+    /** 刷卡机管理：End */
+
+}