From 8f4acc38ac7172c088033190f11db04d53d84be3 Mon Sep 17 00:00:00 2001
From: yangwenhua <1289978696@qq.com>
Date: Tue, 20 Sep 2022 18:24:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BF=AB=E9=80=9F=E5=BC=80=E5=A7=8B=EF=BC=9A?=
=?UTF-8?q?=E5=AE=8C=E6=88=90=E9=97=A8=E5=BA=97=E9=85=8D=E7=BD=AE=E3=80=81?=
=?UTF-8?q?=E8=AE=BE=E5=A4=87=E9=85=8D=E7=BD=AE=E3=80=81=E8=8F=9C=E8=B0=B1?=
=?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/DeviceConfig/index.jsx | 284 ++++++++++++++
.../components/DeviceConfig/index.less | 10 +
.../components/FoodMenuConfig/index.jsx | 43 +++
.../components/FoodMenuConfig/index.less | 0
.../components/StepsButton/index.jsx | 32 ++
.../components/StepsButton/index.less | 5 +
.../components/StoreConfig/index.jsx | 361 ++++++++++++++----
.../components/StoreConfig/index.less | 8 +
src/pages/quickStart/index.jsx | 140 ++++---
src/pages/quickStart/index.less | 6 +-
src/pages/quickStart/service.js | 69 ++++
11 files changed, 805 insertions(+), 153 deletions(-)
create mode 100644 src/pages/quickStart/components/DeviceConfig/index.jsx
create mode 100644 src/pages/quickStart/components/DeviceConfig/index.less
create mode 100644 src/pages/quickStart/components/FoodMenuConfig/index.jsx
create mode 100644 src/pages/quickStart/components/FoodMenuConfig/index.less
create mode 100644 src/pages/quickStart/components/StepsButton/index.jsx
create mode 100644 src/pages/quickStart/components/StepsButton/index.less
create mode 100644 src/pages/quickStart/service.js
diff --git a/src/pages/quickStart/components/DeviceConfig/index.jsx b/src/pages/quickStart/components/DeviceConfig/index.jsx
new file mode 100644
index 0000000..515f402
--- /dev/null
+++ b/src/pages/quickStart/components/DeviceConfig/index.jsx
@@ -0,0 +1,284 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Form, Input, Select, InputNumber, TreeSelect, message, Button, Modal } from 'antd';
+import ProTable from '@ant-design/pro-table';
+import quickAPI from "../../service";
+import StepsButton from "../StepsButton";
+import styles from "./index.less";
+
+
+const DeviceConfig = (props) => {
+ const { Option, OptGroup } = Select;
+ const [addDeviceTypeForm] = Form.useForm();
+
+ //设备类型列表
+ const [deviceTypeList, setDeviceTypeList] = useState([]);
+ //设备分类
+ const [deviceClassList, setDeviceClassList] = useState([]);
+ //组织树
+ const [orgTree, setOrgTree] = useState([]);
+ //设备版本
+ const [deviceVersion, setDeviceVersion] = useState([]);
+ //是否显示设备分类弹窗
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ /**
+ * 提交表单
+ * @param {*} formValues
+ */
+ const onFinishSubmit = (formValues) => {
+ props.onFinishForm('devicConfig', formValues);
+ }
+
+ /**
+ * 获取设备类型列表
+ */
+ const onFetchDeviceTypeList = async () => {
+ const response = await quickAPI.GetDicList('DeviceClientType');
+ if (response.statusCode === 200) {
+ setDeviceTypeList(response.data);
+ } else {
+ message.error(response.errors || '获取设备类型出错');
+ }
+ }
+
+ //获取组织树
+ const onFetchOrgTree = async () => {
+ const response = await quickAPI.getOrgTree();
+ if (response.statusCode === 200) {
+ setOrgTree(response.data);
+ } else {
+ message.error(response.errors || '获取组织架构出错');
+ }
+ }
+
+ /**
+ * 获取设备分类
+ */
+ const onFetchDeviceClass = async () => {
+ const response = await quickAPI.GetDeviceType();
+ if (response.statusCode === 200) {
+ response.data.forEach(item => item.value = item.deviceName);
+ setDeviceClassList(response.data);
+ } else {
+ message.error(response.errors || '获取设备分类出错');
+ }
+ }
+
+ /**
+ * 获取设备版本
+ */
+ const onFetchDeviceVersion = async () => {
+ const response = await quickAPI.GetDeviceVersions();
+ if (response.statusCode === 200) {
+ setDeviceVersion(response.data);
+ } else {
+ message.error(response.errors || '获取设备版本出错');
+ }
+ }
+
+ /**
+ * 添加设备分类
+ */
+ const onSaveDeviceType = async (values) => {
+ const response = await quickAPI.AddDeviceType(values);
+ if (response.data) {
+ message.success('设备分类添加成功!');
+ setIsModalOpen(false);
+ onFetchDeviceClass();
+ } else {
+ message.error(response.errors || '添加设备分类出错');
+ }
+ }
+
+ const actionRef = useRef();
+ const [selectedRowsState, setSelectedRows] = useState([]);
+ const columns = [
+ {
+ title: '主键',
+ dataIndex: 'id',
+ hideInSearch: true,
+ hideInTable: true,
+ tip: '规则名称是唯一的 key',
+ },
+ {
+ title: '设备名称',
+ dataIndex: 'deviceName',
+ valueType: 'textarea',
+ },
+ {
+ title: '设备类型',
+ dataIndex: 'deviceTypeKey',
+ valueEnum: deviceTypeList,
+ hideInSearch: true,
+ },
+ {
+ title: '设备分类',
+ dataIndex: 'deviceTypeId',
+ valueEnum: deviceClassList,
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ valueEnum: {
+ 0: { text: '正常', status: 'Processing' },
+ 1: { text: '停用', status: 'Success' },
+ },
+ hideInSearch: true,
+ }
+ ];
+
+ useEffect(() => {
+ onFetchOrgTree();
+ onFetchDeviceClass();
+ onFetchDeviceTypeList();
+ onFetchDeviceVersion();
+ }, []);
+
+ return <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ prevValues.deviceTypeKey !== currentValues.deviceTypeKey}
+ >
+ {({ getFieldValue }) =>
+ getFieldValue('deviceTypeKey') === 'TMC' ? (
+
+
+
+ ) : null
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ let data = [];
+ let total = 0;
+ await quickAPI.GetDeviceInfoPage(params).then((r) => {
+ data = r.data.data;
+ total = r.data.total;
+ });
+ return {
+ data: data,
+ success: true,
+ total: total,
+ };
+ }}
+ columns={columns}
+ rowSelection={{
+ onChange: (_, selectedRows) => {
+ setSelectedRows(selectedRows);
+ },
+ }}
+ />
+
+ setIsModalOpen(false)}>
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+}
+
+export default DeviceConfig;
\ No newline at end of file
diff --git a/src/pages/quickStart/components/DeviceConfig/index.less b/src/pages/quickStart/components/DeviceConfig/index.less
new file mode 100644
index 0000000..104755a
--- /dev/null
+++ b/src/pages/quickStart/components/DeviceConfig/index.less
@@ -0,0 +1,10 @@
+.add_row_content {
+ position: relative;
+}
+
+.add_row_btn {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: -100px
+}
\ No newline at end of file
diff --git a/src/pages/quickStart/components/FoodMenuConfig/index.jsx b/src/pages/quickStart/components/FoodMenuConfig/index.jsx
new file mode 100644
index 0000000..73ea69e
--- /dev/null
+++ b/src/pages/quickStart/components/FoodMenuConfig/index.jsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Select, InputNumber, TreeSelect, message, Button, Modal } from 'antd';
+import quickAPI from "../../service";
+import StepsButton from "../StepsButton";
+import styles from "./index.less";
+
+
+const FoodMenuConfig = (props) => {
+
+ /**
+ * 提交表单
+ * @param {*} formValues
+ */
+ const onFinishSubmit = (formValues) => {
+ props.onFinishForm('foodMenuConfig', formValues);
+ }
+
+ return <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+}
+
+export default FoodMenuConfig;
\ No newline at end of file
diff --git a/src/pages/quickStart/components/FoodMenuConfig/index.less b/src/pages/quickStart/components/FoodMenuConfig/index.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/quickStart/components/StepsButton/index.jsx b/src/pages/quickStart/components/StepsButton/index.jsx
new file mode 100644
index 0000000..00cad05
--- /dev/null
+++ b/src/pages/quickStart/components/StepsButton/index.jsx
@@ -0,0 +1,32 @@
+import { Button } from 'antd';
+import styles from "./index.less";
+
+
+const StepsButton = (props) => {
+ return
+ {props.current > 0 && (
+
+ )}
+
+ {props.current < props.steps.length - 1 && (
+
+ )}
+
+ {props.current === props.steps.length - 1 && (
+
+ )}
+
+}
+
+export default StepsButton;
\ No newline at end of file
diff --git a/src/pages/quickStart/components/StepsButton/index.less b/src/pages/quickStart/components/StepsButton/index.less
new file mode 100644
index 0000000..1216f7b
--- /dev/null
+++ b/src/pages/quickStart/components/StepsButton/index.less
@@ -0,0 +1,5 @@
+.steps_btns {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/src/pages/quickStart/components/StoreConfig/index.jsx b/src/pages/quickStart/components/StoreConfig/index.jsx
index 6028f3d..928b959 100644
--- a/src/pages/quickStart/components/StoreConfig/index.jsx
+++ b/src/pages/quickStart/components/StoreConfig/index.jsx
@@ -1,91 +1,292 @@
-import React, { useState } from 'react';
-import { Modal, Form, Input, Button, Select, InputNumber, TreeSelect } from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
+import { Form, Input, Select, InputNumber, TreeSelect, message, Radio } from 'antd';
+import { ProTable } from '@ant-design/pro-table';
+import StepsButton from "../StepsButton";
+import quickAPI from "../../service";
+import styles from "./index.less";
const StoreConfig = (props) => {
const { TextArea } = Input;
const { Option, OptGroup } = Select;
+ const [storeForm] = Form.useForm();
+ //组织树
+ const [orgTree, setOrgTree] = useState([]);
+ //支付方式列表
+ const [payTypeList, setPayTypeList] = useState([]);
- return <>
-
-
-
-
-
-
-
-
-
-
-
-
+ //提交表单
+ const onFinishSubmit = (formValues) => {
+ props.onFinishForm('storeConfig', formValues, true);
+ }
-
-
-
- {
+ storeForm.resetFields();
+ setIsCreateStore(value);
+ if (value) {
+ let emptyStore = {
+ id: "",
+ code: "",
+ name: "",
+ pid: "",
+ type: 0,
+ payTemplateId: "",
+ store_Addr: "",
+ store_Loc: "",
+ tel: "",
+ sort: 1,
+ remark: ""
+ }
+ props.onFinishForm('storeConfig', emptyStore);
+ storeForm.setFieldsValue(emptyStore);
+ setSelectedRows([])
+ }
+ }
+
+ const actionRef = useRef();
+
+ //获取组织树
+ const onFetchOrgTree = async () => {
+ const response = await quickAPI.getOrgTree();
+ if (response.statusCode === 200) {
+ const org = [
+ {
+ key: '0',
+ parentId: '0',
+ title: '顶级',
+ value: '0',
+ children: response.data || [],
+ }
+ ]
+ setOrgTree(org);
+ } else {
+ message.error(response.errors || '获取组织架构出错');
+ }
+ }
+
+ //获取支付配置
+ const getPayTemplateList = async () => {
+ const response = await quickAPI.getPayTemplateList();
+ if (response.statusCode === 200) {
+ setPayTypeList(response.data.data);
+ } else {
+ message.error(response.errors || '获取获取支付方式出错');
+ }
+ }
+
+ //组织列表
+ const columns = [
+ {
+ title: '主键',
+ dataIndex: 'id',
+ tip: 'key',
+ hideInSearch: true,
+ hideInTable: true,
+ },
+ {
+ title: '组织名称',
+ dataIndex: 'name',
+ },
+ {
+ title: '组织类型',
+ dataIndex: 'type',
+ valueEnum: {
+ 0: {
+ text: '机构',
+ },
+ 1: {
+ text: '配送中心',
+ },
+ 2: {
+ text: '直营店',
+ },
+ 3: {
+ text: '加盟店',
+ },
+ },
+ }
+ ];
+
+ const [selectedRows, setSelectedRows] = useState(props.storeConfig.id ? [props.storeConfig.id] : []);
+
+ /**
+ * 选择组织
+ */
+ const rowSelection = {
+ onChange: (selectedRowKeys, selectedRows) => {
+ if (selectedRows.length > 0) {
+ props.onFinishForm('storeConfig', selectedRows[0]);
+ storeForm.setFieldsValue(selectedRows[0]);
+ setSelectedRows(selectedRows);
+ } else {
+ let emptyStore = {
+ id: "",
+ code: "",
+ name: "",
+ pid: "",
+ type: 0,
+ payTemplateId: "",
+ store_Addr: "",
+ store_Loc: "",
+ tel: "",
+ sort: 1,
+ remark: ""
+ }
+ props.onFinishForm('storeConfig', emptyStore);
+ storeForm.setFieldsValue(emptyStore);
+ setSelectedRows([])
+ }
+ },
+ selectedRowKeys: selectedRows
+ };
+
+ useEffect(() => {
+ onFetchOrgTree();
+ getPayTemplateList();
+ }, []);
+
+ return
}
export default StoreConfig;
\ No newline at end of file
diff --git a/src/pages/quickStart/components/StoreConfig/index.less b/src/pages/quickStart/components/StoreConfig/index.less
index e69de29..142a91d 100644
--- a/src/pages/quickStart/components/StoreConfig/index.less
+++ b/src/pages/quickStart/components/StoreConfig/index.less
@@ -0,0 +1,8 @@
+.store_config_container {
+ display: flex;
+ align-items: flex-start;
+}
+
+.choose_store_state {
+ margin-bottom: 20px;
+}
\ No newline at end of file
diff --git a/src/pages/quickStart/index.jsx b/src/pages/quickStart/index.jsx
index ae93171..5d311cb 100644
--- a/src/pages/quickStart/index.jsx
+++ b/src/pages/quickStart/index.jsx
@@ -1,97 +1,93 @@
-import { Button, message, Steps, Card } from 'antd';
-import React, { useState } from 'react';
+import { Steps, Card } from 'antd';
+import React, { useState, useEffect } from 'react';
import styles from "./index.less";
-import StoreConfig from './components/StoreConfig';
import { PageContainer } from '@ant-design/pro-layout';
+import StoreConfig from './components/StoreConfig';
+import DeviceConfig from './components/DeviceConfig';
+import FoodMenuConfig from './components/FoodMenuConfig';
const { Step } = Steps;
-const steps = [
- {
- title: '门店配置',
- content: ,
- },
- {
- title: '设备配置',
- content:
- 设备配置
-
,
- },
- {
- title: '菜谱配置',
- content:
- 菜谱配置
-
,
- },
- {
- title: '商品配置',
- content:
- 商品配置
-
,
- },
- {
- title: '配方配置',
- content:
- 配方配置
-
,
- },
- {
- title: '物料配置',
- content:
- 物料配置
-
,
- },
- {
- title: '确认配置',
- content:
- 确认配置
-
,
- }
-];
const QuickStart = () => {
const [current, setCurrent] = useState(0);
+ const [quickStartObj, setQuickStartObj] = useState({
+ storeConfig: {
+ id: "",
+ code: "",
+ name: "",
+ pid: "",
+ type: 0,
+ payTemplateId: "",
+ store_Addr: "",
+ store_Loc: "",
+ tel: "",
+ sort: 1,
+ remark: ""
+ },
+ devicConfig: {
+ deviceName: "",
+ deviceTypeKey: "",
+ orgId: "",
+ deviceTypeId: "",
+ deviceLoc: "",
+ status: 0,
+ materialQuantity: 1,
+ deviceAddr: ""
+ },
+ foodMenuConfig: {
+ code: "111",
+ name: ""
+ }
+ });
+
+ //每个页面点击下一步时触发
+ const onFinishForm = (configType, payload, isNext = false) => {
+ const tempQuick = JSON.parse(JSON.stringify(quickStartObj));
+ const findKey = Object.keys(tempQuick).find(item => item === configType);
+ if (findKey) {
+ tempQuick[findKey] = payload;
+ setQuickStartObj(tempQuick);
+ if (isNext) {
+ next();
+ }
+ }
+ }
+ //下一步
const next = () => {
setCurrent(current + 1);
};
+ //上一步
const prev = () => {
setCurrent(current - 1);
};
- return
-
+ const stepsText = ['门店配置', '设备配置', '菜谱配置', '商品配置', '配方配置', '物料配置', '确认配置'];
+
+ const stepsContent = [
+ ,
+ ,
+ ,
+ 商品配置
,
+ 配方配置
,
+ 物料配置
,
+ 确认配置
+ ];
+ useEffect(() => {
+ console.log('对象更新啦', quickStartObj);
+ }, [quickStartObj]);
+ return
+
- {steps.map((item) => (
-
+ {stepsText.map((item) => (
+
))}
- {steps[current].content}
-
- {current < steps.length - 1 && (
-
- )}
- {current === steps.length - 1 && (
-
- )}
- {current > 0 && (
-
- )}
-
+ {stepsContent[current]}
}
diff --git a/src/pages/quickStart/index.less b/src/pages/quickStart/index.less
index 938cc74..815d9db 100644
--- a/src/pages/quickStart/index.less
+++ b/src/pages/quickStart/index.less
@@ -1,3 +1,7 @@
.steps_content {
- margin: 20px 0;
+ margin: 40px 0 20px 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
\ No newline at end of file
diff --git a/src/pages/quickStart/service.js b/src/pages/quickStart/service.js
new file mode 100644
index 0000000..f4439c1
--- /dev/null
+++ b/src/pages/quickStart/service.js
@@ -0,0 +1,69 @@
+import { request } from 'umi';
+
+export default {
+ //获取组织树
+ getOrgTree() {
+ return request('/kitchen/api/sysOrg/tree', {
+ method: 'GET'
+ });
+ },
+
+ //获取支付配置
+ getPayTemplateList() {
+ return request(`/kitchen/api/paytemplate/getPayTemplatePageList`, {
+ method: 'post',
+ data: { current: 1, pageSize: 100 },
+ });
+ },
+
+ /** 获取设备类型 */
+ GetDicList(TypeCode) {
+ return request(`/kitchen/api/dict-data/dic-list/${TypeCode}`, {
+ method: 'Get',
+ });
+ },
+
+ /** 获取所有设备类型 */
+ GetDeviceType() {
+ return request(`/kitchen/api/Device/GetDeviceType`, {
+ method: 'GET',
+ });
+ },
+
+ /** 获取所有设备版本 */
+ GetDeviceVersions() {
+ return request(`/kitchen/api/Device/GetDeviceVersions`, {
+ method: 'post',
+ });
+ },
+
+ /** 添加设备类型 */
+ AddDeviceType(data) {
+ return request(`/kitchen/api/Device/AddDeviceType`, {
+ method: 'POST',
+ data: data,
+ });
+ },
+
+ GetDeviceInfoPage(data) {
+ return request(`/kitchen/api/Device/GetDeviceInfoPage`, {
+ method: 'POST',
+ data: data,
+ });
+ },
+
+ /**
+ * 获取组织架构分页
+ * @param {*} params
+ * @param {*} options
+ * @returns
+ */
+ getpage(params, options) {
+ return request('/kitchen/api/sysOrg/page', {
+ method: 'GET',
+ params: {
+ ...params,
+ },
+ });
+ }
+}
\ No newline at end of file