bpa
/
BPA.KitChen.Web
1
0
Förgrening 0
Kod Ärenden 0 Pull-förfrågningar 0 Släpp 1 Wiki Aktiviteter
Bläddra i källkod

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

tags/小炒逻辑变更前
yangwenhua 2 år sedan
förälder
7077123ca1
incheckning
0f84473208
5 ändrade filer med 307 tillägg och 103 borttagningar
Delad Vy
Diff Options
Show Stats Download Patch File Download Diff File
  1. +92
    -56
      src/pages/card/gate/index.jsx
  2. +4
    -0
      src/pages/card/gate/index.less
  3. +122
    -47
      src/pages/card/machine/index.jsx
  4. +4
    -0
      src/pages/card/machine/index.less
  5. +85
    -0
      src/pages/card/service.js

+ 92
- 56
src/pages/card/gate/index.jsx Visa fil

@@ -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,


+ 4
- 0
src/pages/card/gate/index.less Visa fil

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

+ 122
- 47
src/pages/card/machine/index.jsx Visa fil

@@ -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,


+ 4
- 0
src/pages/card/machine/index.less Visa fil

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

+ 85
- 0
src/pages/card/service.js Visa fil

@@ -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 */

}

Skriv Förhandsgranska
Laddar…
Avbryt
Spara