From 0f844732081be03f09fae06b9f016787f013aec4 Mon Sep 17 00:00:00 2001 From: yangwenhua <1289978696@qq.com> Date: Mon, 12 Sep 2022 17:02:48 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E5=8F=A3=E7=AE=A1=E7=90=86=E3=80=81?= =?UTF-8?q?=E5=88=B7=E5=8D=A1=E6=9C=BA=E7=AE=A1=E7=90=86=E6=8E=A5=E5=8F=A3?= =?UTF-8?q?=E8=B0=83=E7=94=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/card/gate/index.jsx | 148 ++++++++++++++++---------- src/pages/card/gate/index.less | 4 + src/pages/card/machine/index.jsx | 169 +++++++++++++++++++++--------- src/pages/card/machine/index.less | 4 + src/pages/card/service.js | 85 +++++++++++++++ 5 files changed, 307 insertions(+), 103 deletions(-) create mode 100644 src/pages/card/service.js diff --git a/src/pages/card/gate/index.jsx b/src/pages/card/gate/index.jsx index 51c64d1..8d298ec 100644 --- a/src/pages/card/gate/index.jsx +++ b/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
{find.store_Name}
+ } + } }, { title: '属性', @@ -107,26 +127,35 @@ const Gate = () => { }, { title: '大屏横幅', - dataIndex: 'remark', + dataIndex: 'remaek', }, { title: '操作', valueType: 'option', key: 'option', render: (text, record, _, action) => [ - onEditTableRow(record)}>编辑, - onDeleteTableRow(record)} - okText="确定" - cancelText="取消" - > - 删除 - + onEditTableRow(record)}>编辑 ], }, ]; + /** + * 获取店铺列表 + */ + 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 ( @@ -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={() => [ +
+
+ 当前门店： +
+ +
, ]} /> - setIsModalOpen(false)}> + setIsModalOpen(false)}>
{ }, ]} > - + { { 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) => [ - onEditTableRow(record)}>编辑, - onDeleteTableRow(record)} - okText="确定" - cancelText="取消" - > - 删除 - + onEditTableRow(record)}>编辑 ], }, ]; + /** + * 获取店铺列表 + */ + 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 ( @@ -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={() => [ +
+
+ 当前门店： +
+ +
, +
+
+ 当前档口： +
+ +
, ]} /> - setIsModalOpen(false)}> + setIsModalOpen(false)}> { }, ]} > - + {