浏览代码

重构 店铺打印机管理

dev
yangwenhua 1年前
父节点
当前提交
e5e2e20c21
共有 4 个文件被更改,包括 714 次插入326 次删除
  1. +142
    -0
      src/pages/store/printer/Printer/components/PrinterFormModal/index.jsx
  2. +349
    -0
      src/pages/store/printer/Printer/index delete.jsx
  3. +222
    -325
      src/pages/store/printer/Printer/index.jsx
  4. +1
    -1
      src/pages/sys/company/index.jsx

+ 142
- 0
src/pages/store/printer/Printer/components/PrinterFormModal/index.jsx 查看文件

@@ -0,0 +1,142 @@
import { message, Modal, Form, Input, Select, Col, Row, Checkbox } from 'antd';
import { useEffect } from 'react';
import { AddPrinter, UpdatePrinter } from '../../service';

const PrinterFormModal = (props) => {
const [formRef] = Form.useForm();


/**
* 创建/更新打印机
*/
const handleOk = async () => {
const formData = await formRef.validateFields();
if (formData.id) {
const response = await UpdatePrinter(formData);
if (response.statusCode === 200) {
message.success('打印机更新成功!');
props.onOk();
} else {
message.error(response.errors || '打印机更新失败!');
}
} else {
formData.storeId = props.currentStore.storeId
const response = await AddPrinter(formData);
if (response.statusCode === 200) {
message.success('打印机创建成功!');
props.onOk();
} else {
message.error(response.errors || '打印机创建失败!');
}
}
}

useEffect(() => {
formRef.setFieldsValue(props.printer);
}, []);

return <Modal title={`【${props.printer?.name || '新建'}】打印机`} destroyOnClose width={900} visible={props.isModalOpen} onOk={handleOk} onCancel={props.onCancel}>
<Form
name="basic"
labelCol={{ span: 8 }}
autoComplete="off"
form={formRef}
>
<Form.Item
name="id"
hidden
>
<Input />
</Form.Item>

<Row>
<Col span={12}>
<Form.Item
name="name" label="打印机名称" placeholder="请输入打印机名称"
rules={[{ required: true, message: '请输入打印机名称!' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="applicationId" label="应用ID" placeholder="请输入应用ID"
rules={[{ required: true, message: '请输入应用ID!' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="applicationkey" label="应用秘钥" placeholder="请输入应用秘钥"
rules={[{ required: true, message: '请输入应用秘钥!' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="terminalId" label="终端ID" placeholder="终端ID"
rules={[{ required: true, message: '请输入终端ID!' }]}
>
<Input />
</Form.Item>

</Col>
<Col span={12}>
<Form.Item
name="terminalKey" label="终端秘钥" placeholder="终端秘钥"
rules={[{ required: true, message: '请输入终端秘钥!' }]}
>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
name="templaterId"
label="打印机模板"
rules={[
{
required: true,
message: '请选择打印机模板!'
}
]}
>
<Select
placeholder="请选择打印机模板!"
allowClear
>
{
props.printerTemplaterList.map(item => {
return <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>
})
}
</Select>
</Form.Item>
</Col>
</Row>
<Form.Item name="goodsIdList" label="商品" labelCol={{ span: 3 }}>
<Checkbox.Group>
<Row>
{
props.storeFoodMenuAll.map(item => {
return <Col span={8} key={item.foodId}>
<Checkbox
value={item.foodId}
style={{
lineHeight: '32px',
}}
>
{item.foodName}
</Checkbox>
</Col>
})
}
</Row>
</Checkbox.Group>
</Form.Item>
</Form>
</Modal>
};

export default PrinterFormModal;

+ 349
- 0
src/pages/store/printer/Printer/index delete.jsx 查看文件

@@ -0,0 +1,349 @@
import { Form, Select, Tabs, Card, Pagination, Table, message, Button, Modal, Progress, Tag, Descriptions, Popconfirm } from 'antd';
const { TabPane } = Tabs;
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import React, { useState, useRef, useEffect } from 'react';
import { GetStoreInfos, AddPrinter, GetPrinter, UpdatePrinter, SetPrinterHost, DelPrinter, GetPrinterTemplater, GetStoreFoodMenu } from './service';
import ProList from '@ant-design/pro-list';
import { ProFormRadio } from '@ant-design/pro-form';
import Field from '@ant-design/pro-field';
import ProForm, { ProFormText, ModalForm } from '@ant-design/pro-form';
import { deDEIntl } from '@ant-design/pro-provider';
import { PlusOutlined } from '@ant-design/icons';
const PrinterInfo = () => {
const actionRef = useRef();
const formRef = useRef();
const [cardActionProps, setCardActionProps] = useState('actions');
const [storeInfoList, setStoreInfoList] = useState([]);
const [tabTotal, SetTabTotal] = useState(0);
const [printerHtml, SetPrinterHtml] = useState([]);
const [currentPrinter, setCurrentPrinter] = useState({});
const [currentStoreid, setCurrentStoreid] = useState("");
const [storeFoodMenuAll, setStoreFoodMenuAll] = useState([]);
const [modalVisit, setModalVisit] = useState(false);
const [printerTemplaterList, setPrinterTemplaterList] = useState([]);

// 打印机店铺商品

useEffect(async () => {
GetStoreInfoList(1);
//获取模板
GetPrinterTemplater().then((re) => {
setPrinterTemplaterList(re.data);
});
}, [])





//获取店铺
const GetStoreInfoList = async (page) => {
try {
await GetStoreInfos({ current: page, pageSize: 10 }).then((r) => {
SetTabTotal(r.data.total);
console.log('我是店铺信息', r.data.data);
setStoreInfoList(r.data.data);
});
} catch {
setStoreInfoList([]);
}
}

//获取打印机
const GetprinterList = async (storeid) => {
var list = [];
var data = await GetPrinter(storeid).then((re) => {
re?.data.forEach(item => {
if (item.id == currentPrinter?.id) {
var obj = currentPrinter;
obj.state = obj.state == "read" ? "edit" : "read";
item.state = obj.state;
setCurrentPrinter(obj);
} else {
item.state = "read";
}
list.push(item);
})
});
return list;
}




///获取店铺的打印机(Html)
const GetHtml = async (key) => {
// debugger


//打印机
var printerList = await GetprinterList(key);
//商品信息
let storeFoodMenuList = await GetStoreFoodMenu(key);
setStoreFoodMenuAll(storeFoodMenuList.data);

const printerListHtml = printerList?.map((item) => ({
title: item.name,
subTitle: item.isHost ? (<Tag color="#5BD8A6">主打印机</Tag>) : (""),
actions: [
<a key="run" onClick={async () => {
await SetPrinterHost(key, item.id).then((re) => {
if (re.data) {
actionRef.current.reload();
message.success('设置成功');
} else {
message.success('设置失败');
}
})
}} >设为主机</a>,
<Popconfirm
type="primary"
key="primary"
title="确认删除吗?"
okText="是"
cancelText="否"
onConfirm={async () => {
await DelPrinter([item.id]).then((re) => {
if (re.data) {
actionRef.current.reload();
message.success('删除成功');
} else {
message.success('删除失败');
}
})
}}
onCancel={() => { }} >
<a href="#">删除</a>
</Popconfirm>,
<a key="delete"
onClick={async () => {
console.log('sssssss', currentPrinter);
actionRef.current.reload();
console.log('formRef', formRef.current.getFieldValue());

// formRef?.current.setFieldsValue(currentPrinter);
if (item.state == "edit") {
formRef.current.submit();
}
}} >{item.state == "edit" ? "保存" : "编辑"}</a>],
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
info: item,
content: (
<div style={{ flex: 1, width: '100%' }} >
<div style={{ overflow: 'auto', height: '555px', float: 'left', width: '100%' }}>
<ProForm
labelCol={{ span: 5 }}
style={{ float: 'left', width: '80%', margin: '10px' }}
onFinish={async (values) => {
console.log('接口', values, currentPrinter);
var result = await UpdatePrinter(values);
if (result.data) {
actionRef.current.reload();
message.success('编辑成功');
} else {
message.success('编辑失败');
}
}}
formRef={formRef}
submitter={false}
layout={'horizontal'}
initialValues={{
id: item.id,
state: item.state,
name: item.name,
applicationId: item.applicationId,
applicationkey: item.applicationkey,
terminalId: item.terminalId,
terminalKey: item.terminalKey,
templaterId: item.templaterId,
goodsIdList: item.goodsIdList
}}
autoFocusFirstInput>

<ProForm.Item name="id" hidden={true} >
<Field mode={item.state} />
</ProForm.Item>
<ProForm.Item name="applicationId" label="应用ID" placeholder="请输入应用ID">
<Field mode={item.state} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="applicationkey" label="应用秘钥" placeholder="请输入应用秘钥">
<Field valueType="password" mode={item.state} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="terminalId" label="终端ID" placeholder="请输入终端ID">
<Field mode={item.state} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="terminalKey" label="终端秘钥" placeholder="请输入终端秘钥">
<Field valueType="password" mode={item.state} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="name" label="打印机名称" placeholder="请输入打印机名称" hidden={item.state != "edit" ? true : false} >
<Field mode={item.state} />
</ProForm.Item>
<ProFormText
mode={item.state}
name="templaterId"
label="模板"
placeholder="模板"
request={() => {
let list = [];
printerTemplaterList?.map((item, index) => {
list.push({ label: item.title, value: item.id });
});
return list;
}}
/>
<div style={{ overflow: 'auto', width: '100%', float: 'left', textAlign: 'left', margin: '5px', padding: '5px' }}>
<ProFormText
mode={item.state}
name="goodsIdList"
valueType="checkbox"
label="商品"
request={() => {
let list = [];
storeFoodMenuList?.data.map((item, index) => {
list.push({ label: item.foodName, value: item.foodId });
});
return list;
}}
/>
</div>
</ProForm>
</div>
</div>
),
}));

printerListHtml.push({
info: {},
content: (
<div style={{ flex: 1, }} >
<div style={{ height: 195, textAlign: 'center' }}
onClick={() => {
setModalVisit(true);
setCurrentStoreid(key);
}} >
<PlusOutlined style={{ fontSize: '50px', color: '#08c', marginTop: '60px' }} />
</div>
</div>
)
});
return printerListHtml;
}


return (
<PageContainer>
<Card ></Card>
<Card headStyle={{ border: '0px ' }} title="店铺打印机" style={{ marginTop: '17px' }}>
<Tabs defaultActiveKey="1" tabPosition="left" onChange={async (key) => { }}>
{storeInfoList?.map((item) => (

<TabPane tab={item.storeName} key={item.storeId}>

<ProList
params={{ 'storeid': item.storeId }}
actionRef={actionRef}
pagination={false}
showActions="hover"
rowSelection={{}}
grid={{ gutter: 8, column: 3 }}
onItem={(record) => {
return {
onMouseEnter: () => {
setCurrentPrinter(record.info);
},
onClick: () => {
setCurrentPrinter(record.info);
},
};
}}
metas={{ title: {}, subTitle: {}, type: {}, avatar: {}, content: {}, actions: { cardActionProps, }, }}
headerTitle="打印机"

request={async (params) => {
return {
data: await GetHtml(params.storeid),
success: true,
};
}}
/>
</TabPane>
))}


</Tabs>
</Card>
{/* 弹框 */}
<ModalForm
labelCol={{ span: 4 }}
visible={modalVisit}
modalProps={{
onCancel: () => setModalVisit(false),
}}
onFinish={async (values) => {
values.storeId = currentStoreid;
var result = await AddPrinter(values);
if (result.data) {
actionRef.current.reload();
setModalVisit(false)
message.success('添加成功');
} else {
message.success('添加失败');
}
}}
formRef={formRef}
layout={'horizontal'}
autoFocusFirstInput>
<div style={{ width:'98%' }} >
<ProFormText style={{ marginTop: '-10px', }} name="applicationId" label="应用ID" placeholder="请输入应用ID">
<Field mode={'edit'} />
</ProFormText>
<ProForm.Item style={{ marginTop: '-10px' }} name="applicationkey" label="应用秘钥" placeholder="请输入应用秘钥">
<Field valueType="password" mode={'edit'} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="terminalId" label="终端ID" placeholder="终端ID">
<Field mode={'edit'} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="terminalKey" label="终端秘钥" placeholder="终端秘钥">
<Field valueType="password" mode={'edit'} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="name" label="打印机名称" placeholder="请输入打印机名称" >
<Field mode={'edit'} />
</ProForm.Item>

<ProFormText
mode={'edit'}
name="templaterId"
label="模板"
placeholder="模板"
style={{ marginTop: '-10px' }}
request={() => {
var list = [];
printerTemplaterList?.map((item, index) => {
list.push({ label: item.title, value: item.id });
});
return list;
}}
/>

<ProFormText
mode={'edit'}
name="goodsIdList"
valueType="checkbox"
label="商品"
placeholder="商品"
request={() => {
var list = [];
storeFoodMenuAll?.map((item, index) => {
list.push({ label: item.foodName, value: item.foodId });
});
return list;

}}
/>
</div>
</ModalForm>
</PageContainer>
);
};

export default PrinterInfo;

+ 222
- 325
src/pages/store/printer/Printer/index.jsx 查看文件

@@ -1,344 +1,241 @@
import { Form, Select, Tabs, Card, Pagination, Table, message, Button, Modal, Progress, Tag, Descriptions, Popconfirm } from 'antd';
const { TabPane } = Tabs;
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { TableDropdown } from '@ant-design/pro-table';
import { GetStoreInfos, GetPrinter, SetPrinterHost, DelPrinter, GetPrinterTemplater, GetStoreFoodMenu } from './service';
import React, { useState, useRef, useEffect } from 'react';
import { GetStoreInfos, AddPrinter, GetPrinter, UpdatePrinter, SetPrinterHost, DelPrinter, GetPrinterTemplater, GetStoreFoodMenu } from './service';
import ProList from '@ant-design/pro-list';
import { ProFormRadio } from '@ant-design/pro-form';
import Field from '@ant-design/pro-field';
import ProForm, { ProFormText, ModalForm } from '@ant-design/pro-form';
import { deDEIntl } from '@ant-design/pro-provider';
import { message, Button, Tag, Popconfirm } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
const PrinterInfo = () => {
const actionRef = useRef();
const formRef = useRef();
const [cardActionProps, setCardActionProps] = useState('actions');
const [storeInfoList, setStoreInfoList] = useState([]);
const [tabTotal, SetTabTotal] = useState(0);
const [printerHtml, SetPrinterHtml] = useState([]);
const [currentPrinter, setCurrentPrinter] = useState({});
const [currentStoreid, setCurrentStoreid] = useState("");
const [storeFoodMenuAll, setStoreFoodMenuAll] = useState([]);
const [modalVisit, setModalVisit] = useState(false);
const [printerTemplaterList, setPrinterTemplaterList] = useState([]);

// 打印机店铺商品

useEffect(async () => {
GetStoreInfoList(1);
//获取模板
GetPrinterTemplater().then((re) => {
setPrinterTemplaterList(re.data);
});
}, [])





//获取店铺
const GetStoreInfoList = async (page) => {
try {
await GetStoreInfos({ current: page, pageSize: 10 }).then((r) => {
SetTabTotal(r.data.total);
console.log('我是店铺信息', r.data.data);
setStoreInfoList(r.data.data);
});
} catch {
setStoreInfoList([]);
import PrinterFormModal from "./components/PrinterFormModal";

const Printer = () => {
const actionRef = useRef();
//当前选中的店铺
const [currentStore, setCurrentStore] = useState(null);
//店铺列表
const [storeInfoList, setStoreInfoList] = useState([]);
//打印机模板列表
const [printerTemplaterList, setPrinterTemplaterList] = useState([]);
//创建/更新打印机弹窗
const [showModal, setShowModal] = useState(false);
//当前选中的打印机
const [currentPrinter, setCurrentPrinter] = useState(null);
//所有商品信息
const [storeFoodMenuAll, setStoreFoodMenuAll] = useState([]);


//获取店铺
const GetStoreInfoList = async () => {
try {
const response = await GetStoreInfos({ current: 1, pageSize: 999 });
if (response.statusCode === 200) {
response.data.data.forEach(item => {
item.value = item.storeId;
item.label = item.storeName;
});
setCurrentStore(response.data.data[0]);
setStoreInfoList(response.data.data);
} else {
message.error(response.errors || '获取店铺列表失败');
}
} catch {
setStoreInfoList([]);
}
}
}

//获取打印机
const GetprinterList = async (storeid) => {
var list = [];
var data = await GetPrinter(storeid).then((re) => {
re?.data.forEach(item => {
if (item.id == currentPrinter?.id) {
var obj = currentPrinter;
obj.state = obj.state == "read" ? "edit" : "read";
item.state = obj.state;
setCurrentPrinter(obj);
/**
* 获取打印机模板列表
*/
const onFetchPrinterTempList = async () => {
const response = await GetPrinterTemplater();
if (response.statusCode === 200) {
response.data?.forEach(item => {
item.value = item.id;
item.label = item.title;
});
setPrinterTemplaterList(response.data);
} else {
item.state = "read";
message.error(response.errors || '获取打印机模板列表失败');
}
list.push(item);
})
});
return list;
}



}

///获取店铺的打印机(Html)
const GetHtml = async (key) => {
// debugger
/**
* 获取当前门店的所有商品
*/
const onFetchFoods = async () => {
if (currentStore) {
const response = await GetStoreFoodMenu(currentStore.storeId);
if (response.statusCode === 200) {
setStoreFoodMenuAll(response.data);
}
}
}

/**
* 设置主打印机
*/
const onSetHostPrinter = async (printerId) => {
const response = await SetPrinterHost(currentStore.storeId, printerId);
if (response.statusCode === 200) {
message.success('设置主打印机成功!');
actionRef.current?.reload();
} else {
message.error(response.errors || '设置主打印机出错');
}
}

//打印机
var printerList = await GetprinterList(key);
//商品信息
let storeFoodMenuList = await GetStoreFoodMenu(key);
setStoreFoodMenuAll(storeFoodMenuList.data);
/**
* 删除打印机
*/
const onDeletePrinter = async (printerId) => {
const response = await DelPrinter([printerId]);
if (response.statusCode === 200) {
message.success('删除成功!');
actionRef.current?.reload();
} else {
message.error(message.error || '删除失败');
}
}

const printerListHtml = printerList?.map((item) => ({
title: item.name,
subTitle: item.isHost ? (<Tag color="#5BD8A6">主打印机</Tag>) : (""),
actions: [
<a key="run" onClick={async () => {
await SetPrinterHost(key, item.id).then((re) => {
if (re.data) {
actionRef.current.reload();
message.success('设置成功');
} else {
message.success('设置失败');
const columns = [
{
title: '门店',
valueType: 'select',
hideInTable: true,
fieldProps: {
options: storeInfoList,
value: currentStore?.storeId,
onChange: selectValue => {
const findStore = storeInfoList.find(item => item.storeId === selectValue);
if (findStore) {
setCurrentStore(findStore);
}
}
}
})
}} >设为主机</a>,
<Popconfirm
type="primary"
key="primary"
title="确认删除吗?"
okText="是"
cancelText="否"
onConfirm={async () => {
await DelPrinter([item.id]).then((re) => {
if (re.data) {
actionRef.current.reload();
message.success('删除成功');
} else {
message.success('删除失败');
}
})
}}
onCancel={() => { }} >
<a href="#">删除</a>
</Popconfirm>,
<a key="delete"
onClick={async () => {
actionRef.current.reload();
if (item.state == "edit") {
formRef.current.submit();
},
{
title: '打印机名称',
dataIndex: 'name',
key: 'name',
render: (_, record) => [
record.isHost ? (<div>{record.name}<Tag style={{ marginLeft: '5px' }} color="#87d068">主打印机</Tag></div>) : record.name
],
hideInSearch: true
},
{
title: '应用ID',
dataIndex: 'applicationId',
key: 'applicationId',
hideInSearch: true
},
{
title: '终端ID',
dataIndex: 'terminalId',
key: 'terminalId',
hideInSearch: true
},
{
title: '模板',
dataIndex: 'templaterId',
key: 'templaterId',
valueType: 'select',
hideInSearch: true,
fieldProps: {
options: printerTemplaterList
}
}} >{item.state == "edit" ? "保存" : "编辑"}</a>],
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg',
info: item,
content: (
<div style={{ flex: 1, width: '100%' }} >
<div style={{ overflow: 'auto', height: '555px', float: 'left', width: '100%' }}>
<ProForm
labelCol={{ span: 5 }}
style={{ float: 'left', width: '80%', margin: '10px' }}
onFinish={async (values) => {
var result = await UpdatePrinter(values);
if (result.data) {
actionRef.current.reload();
message.success('编辑成功');
},
{
title: '操作',
valueType: 'option',
key: 'option',
render: (text, record, _, action) => [
<a key="edit" onClick={() => {
setCurrentPrinter(record);
setShowModal(true);
}}>编辑</a>,
<Popconfirm
key="confirm"
title={`确定要将【${record.name}】设为主打印机吗?`}
onConfirm={() => onSetHostPrinter(record.id)}
okText="确定"
cancelText="取消"
>
<a href="#">主打印机</a>
</Popconfirm>,
<Popconfirm
key="delete"
title={`确定要将【${record.name}】删除吗?`}
onConfirm={() => onDeletePrinter(record.id)}
okText="确定"
cancelText="取消"
>
<a href="#">删除</a>
</Popconfirm>
],
},
];

useEffect(() => {
GetStoreInfoList();
onFetchPrinterTempList();
}, []);

useEffect(() => {
actionRef.current?.reload();
onFetchFoods();
}, [currentStore]);

return <PageContainer>
<ProTable
columns={columns}
actionRef={actionRef}
cardBordered
request={async (params = {}, sort, filter) => {
if (currentStore) {
const response = await GetPrinter(currentStore.storeId);
if (response.statusCode === 200) {
return {
data: response.data,
success: true
}
} else {
message.error(response.errors || '获取打印机列表出错');
}
} else {
message.success('编辑失败');
return [];
}
}}
formRef={formRef}
submitter={false}
layout={'horizontal'}
initialValues={{
id: item.id,
state: item.state,
name: item.name,
applicationId: item.applicationId,
applicationkey: item.applicationkey,
terminalId: item.terminalId,
terminalKey: item.terminalKey,
templaterId: item.templaterId,
goodsIdList: item.goodsIdList
}}
autoFocusFirstInput>

<ProForm.Item name="id" hidden={true} >
<Field mode={item.state} />
</ProForm.Item>
<ProForm.Item name="applicationId" label="应用ID" placeholder="请输入应用ID">
<Field mode={item.state} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="applicationkey" label="应用秘钥" placeholder="请输入应用秘钥">
<Field valueType="password" mode={item.state} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="terminalId" label="终端ID" placeholder="请输入终端ID">
<Field mode={item.state} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="terminalKey" label="终端秘钥" placeholder="请输入终端秘钥">
<Field valueType="password" mode={item.state} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="name" label="打印机名称" placeholder="请输入打印机名称" hidden={item.state != "edit" ? true : false} >
<Field mode={item.state} />
</ProForm.Item>
<ProFormText
mode={item.state}
name="templaterId"
label="模板"
placeholder="模板"
request={() => {
let list = [];
printerTemplaterList?.map((item, index) => {
list.push({ label: item.title, value: item.id });
});
return list;
}}
/>
<div style={{ overflow: 'auto', width: '100%', float: 'left', textAlign: 'left', margin: '5px', padding: '5px' }}>
<ProFormText
mode={item.state}
name="goodsIdList"
valueType="checkbox"
label="商品"
request={() => {
let list = [];
storeFoodMenuList?.data.map((item, index) => {
list.push({ label: item.foodName, value: item.foodId });
});
return list;
}}
/>
</div>
</ProForm>
</div>
</div>
),
}));

printerListHtml.push({
info: {},
content: (
<div style={{ flex: 1, }} >
<div style={{ height: 195, textAlign: 'center' }}
onClick={() => {
setModalVisit(true);
setCurrentStoreid(key);
}} >
<PlusOutlined style={{ fontSize: '50px', color: '#08c', marginTop: '60px' }} />
</div>
</div>
)
});
return printerListHtml;
}


return (
<PageContainer>
<Card ></Card>
<Card headStyle={{ border: '0px ' }} title="店铺打印机" style={{ marginTop: '17px' }}>
<Tabs defaultActiveKey="1" tabPosition="left" onChange={async (key) => { }}>
{storeInfoList?.map((item) => (

<TabPane tab={item.storeName} key={item.storeId}>

<ProList
params={{ 'storeid': item.storeId }}
actionRef={actionRef}
pagination={false}
showActions="hover"
rowSelection={{}}
grid={{ gutter: 8, column: 3 }}
onItem={(record) => {
return {
onMouseEnter: () => {
setCurrentPrinter(record.info);
},
onClick: () => {
setCurrentPrinter(record.info);
},
};
}}
rowKey="id"
dateFormatter="string"
headerTitle="打印机列表"
toolBarRender={() => [
<Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => {
setCurrentPrinter(null);
setShowModal(true);
}}>
新建
</Button>
]}
/>

{
showModal && <PrinterFormModal
storeFoodMenuAll={storeFoodMenuAll}
currentStore={currentStore}
isModalOpen={showModal}
onOk={() => {
setShowModal(false);
actionRef.current?.reload();
}}
metas={{ title: {}, subTitle: {}, type: {}, avatar: {}, content: {}, actions: { cardActionProps, }, }}
headerTitle="打印机"

request={async (params) => {
return {
data: await GetHtml(params.storeid),
success: true,
};
onCancel={() => {
setShowModal(false);
setCurrentPrinter(null);
}}
/>
</TabPane>
))}


</Tabs>
</Card>
{/* 弹框 */}
<ModalForm
labelCol={{ span: 4 }}
visible={modalVisit}
modalProps={{
onCancel: () => setModalVisit(false),
}}
onFinish={async (values) => {
values.storeId = currentStoreid;
var result = await AddPrinter(values);
if (result.data) {
actionRef.current.reload();
setModalVisit(false)
message.success('添加成功');
} else {
message.success('添加失败');
}
}}
formRef={formRef}
layout={'horizontal'}
autoFocusFirstInput>
<div style={{ width:'98%' }} >
<ProFormText style={{ marginTop: '-10px', }} name="applicationId" label="应用ID" placeholder="请输入应用ID">
<Field mode={'edit'} />
</ProFormText>
<ProForm.Item style={{ marginTop: '-10px' }} name="applicationkey" label="应用秘钥" placeholder="请输入应用秘钥">
<Field valueType="password" mode={'edit'} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="terminalId" label="终端ID" placeholder="终端ID">
<Field mode={'edit'} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="terminalKey" label="终端秘钥" placeholder="终端秘钥">
<Field valueType="password" mode={'edit'} />
</ProForm.Item>
<ProForm.Item style={{ marginTop: '-10px' }} name="name" label="打印机名称" placeholder="请输入打印机名称" >
<Field mode={'edit'} />
</ProForm.Item>
printerTemplaterList={printerTemplaterList}
printer={currentPrinter}
>

<ProFormText
mode={'edit'}
name="templaterId"
label="模板"
placeholder="模板"
style={{ marginTop: '-10px' }}
request={() => {
var list = [];
printerTemplaterList?.map((item, index) => {
list.push({ label: item.title, value: item.id });
});
return list;
}}
/>

<ProFormText
mode={'edit'}
name="goodsIdList"
valueType="checkbox"
label="商品"
placeholder="商品"
request={() => {
var list = [];
storeFoodMenuAll?.map((item, index) => {
list.push({ label: item.foodName, value: item.foodId });
});
return list;

}}
/>
</div>
</ModalForm>
</PrinterFormModal>
}
</PageContainer>
);
};
}

export default PrinterInfo;
export default Printer;

+ 1
- 1
src/pages/sys/company/index.jsx 查看文件

@@ -373,7 +373,7 @@ const companyManage = () => {
actionRef.current.reload();
}
}
actionRef.current.reload();
actionRef.current?.reload();
}}
onCancel={() => {
handleModalVisible(false);


正在加载...
取消
保存