From e5e2e20c21b0aae1dec5f6298c0c19fee7e0ce42 Mon Sep 17 00:00:00 2001 From: yangwenhua <1289978696@qq.com> Date: Fri, 17 Mar 2023 16:02:45 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20=E5=BA=97=E9=93=BA?= =?UTF-8?q?=E6=89=93=E5=8D=B0=E6=9C=BA=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/PrinterFormModal/index.jsx | 142 +++++ .../store/printer/Printer/index delete.jsx | 349 +++++++++++ src/pages/store/printer/Printer/index.jsx | 547 +++++++----------- src/pages/sys/company/index.jsx | 2 +- 4 files changed, 714 insertions(+), 326 deletions(-) create mode 100644 src/pages/store/printer/Printer/components/PrinterFormModal/index.jsx create mode 100644 src/pages/store/printer/Printer/index delete.jsx diff --git a/src/pages/store/printer/Printer/components/PrinterFormModal/index.jsx b/src/pages/store/printer/Printer/components/PrinterFormModal/index.jsx new file mode 100644 index 0000000..9e10bdd --- /dev/null +++ b/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 +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + props.storeFoodMenuAll.map(item => { + return + + {item.foodName} + + + }) + } + + + +
+ +}; + +export default PrinterFormModal; \ No newline at end of file diff --git a/src/pages/store/printer/Printer/index delete.jsx b/src/pages/store/printer/Printer/index delete.jsx new file mode 100644 index 0000000..8347008 --- /dev/null +++ b/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 ? (主打印机) : (""), + actions: [ + { + await SetPrinterHost(key, item.id).then((re) => { + if (re.data) { + actionRef.current.reload(); + message.success('设置成功'); + } else { + message.success('设置失败'); + } + }) + }} >设为主机, + { + await DelPrinter([item.id]).then((re) => { + if (re.data) { + actionRef.current.reload(); + message.success('删除成功'); + } else { + message.success('删除失败'); + } + }) + }} + onCancel={() => { }} > + 删除 + , + { + 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" ? "保存" : "编辑"}], + avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg', + info: item, + content: ( +
+
+ { + 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> + + + + + + + + + + + + + + + + { + let list = []; + printerTemplaterList?.map((item, index) => { + list.push({ label: item.title, value: item.id }); + }); + return list; + }} + /> +
+ { + let list = []; + storeFoodMenuList?.data.map((item, index) => { + list.push({ label: item.foodName, value: item.foodId }); + }); + return list; + }} + /> +
+ +
+
+ ), + })); + + printerListHtml.push({ + info: {}, + content: ( +
+
{ + setModalVisit(true); + setCurrentStoreid(key); + }} > + +
+
+ ) + }); + return printerListHtml; + } + + + return ( + + + + { }}> + {storeInfoList?.map((item) => ( + + + + { + 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, + }; + }} + /> + + ))} + + + + + {/* 弹框 */} + 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> +
+ + + + + + + + + + + + + + + + + { + var list = []; + printerTemplaterList?.map((item, index) => { + list.push({ label: item.title, value: item.id }); + }); + return list; + }} + /> + + { + var list = []; + storeFoodMenuAll?.map((item, index) => { + list.push({ label: item.foodName, value: item.foodId }); + }); + return list; + + }} + /> +
+ + + ); +}; + +export default PrinterInfo; diff --git a/src/pages/store/printer/Printer/index.jsx b/src/pages/store/printer/Printer/index.jsx index b8e4b29..0d06a1f 100644 --- a/src/pages/store/printer/Printer/index.jsx +++ b/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 ? (主打印机) : (""), - actions: [ - { - 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); + } + } } - }) - }} >设为主机, - { - await DelPrinter([item.id]).then((re) => { - if (re.data) { - actionRef.current.reload(); - message.success('删除成功'); - } else { - message.success('删除失败'); - } - }) - }} - onCancel={() => { }} > - 删除 - , - { - actionRef.current.reload(); - if (item.state == "edit") { - formRef.current.submit(); + }, + { + title: '打印机名称', + dataIndex: 'name', + key: 'name', + render: (_, record) => [ + record.isHost ? (
{record.name}主打印机
) : 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" ? "保存" : "编辑"}], - avatar: 'https://gw.alipayobjects.com/zos/antfincdn/UCSiy1j6jx/xingzhuang.svg', - info: item, - content: ( -
-
- { - var result = await UpdatePrinter(values); - if (result.data) { - actionRef.current.reload(); - message.success('编辑成功'); + }, + { + title: '操作', + valueType: 'option', + key: 'option', + render: (text, record, _, action) => [ + { + setCurrentPrinter(record); + setShowModal(true); + }}>编辑, + onSetHostPrinter(record.id)} + okText="确定" + cancelText="取消" + > + 主打印机 + , + onDeletePrinter(record.id)} + okText="确定" + cancelText="取消" + > + 删除 + + ], + }, + ]; + + useEffect(() => { + GetStoreInfoList(); + onFetchPrinterTempList(); + }, []); + + useEffect(() => { + actionRef.current?.reload(); + onFetchFoods(); + }, [currentStore]); + + return + { + 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> - - - - - - - - - - - - - - - - { - let list = []; - printerTemplaterList?.map((item, index) => { - list.push({ label: item.title, value: item.id }); - }); - return list; - }} - /> -
- { - let list = []; - storeFoodMenuList?.data.map((item, index) => { - list.push({ label: item.foodName, value: item.foodId }); - }); - return list; - }} - /> -
- -
-
- ), - })); - - printerListHtml.push({ - info: {}, - content: ( -
-
{ - setModalVisit(true); - setCurrentStoreid(key); - }} > - -
-
- ) - }); - return printerListHtml; - } - - - return ( - - - - { }}> - {storeInfoList?.map((item) => ( - - - - { - return { - onMouseEnter: () => { - setCurrentPrinter(record.info); - }, - onClick: () => { - setCurrentPrinter(record.info); - }, - }; + }} + rowKey="id" + dateFormatter="string" + headerTitle="打印机列表" + toolBarRender={() => [ + + ]} + /> + + { + showModal && { + 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); }} - /> - - ))} - - - - - {/* 弹框 */} - 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> -
- - - - - - - - - - - - - - - + printerTemplaterList={printerTemplaterList} + printer={currentPrinter} + > - { - var list = []; - printerTemplaterList?.map((item, index) => { - list.push({ label: item.title, value: item.id }); - }); - return list; - }} - /> - - { - var list = []; - storeFoodMenuAll?.map((item, index) => { - list.push({ label: item.foodName, value: item.foodId }); - }); - return list; - - }} - /> -
- + + } - ); -}; +} -export default PrinterInfo; +export default Printer; \ No newline at end of file diff --git a/src/pages/sys/company/index.jsx b/src/pages/sys/company/index.jsx index 710f0c7..2230237 100644 --- a/src/pages/sys/company/index.jsx +++ b/src/pages/sys/company/index.jsx @@ -373,7 +373,7 @@ const companyManage = () => { actionRef.current.reload(); } } - actionRef.current.reload(); + actionRef.current?.reload(); }} onCancel={() => { handleModalVisible(false);