快速开始 接口调用

src/pages/quickStart/components/ConfirmConfig/index.jsx

@@ -1,121 +1,86 @@
 import React, { useState, useEffect, useRef } from 'react';
-
+import ReactDOM from 'react-dom';
+import { OrganizationGraph } from '@ant-design/graphs';
+import { nanoid } from 'nanoid'
 import quickAPI from "../../service";
 import indexStyles from "../../index.less";
 import { message } from 'antd';
 
 
-
 /**
  * 确认配置
  * @returns 
  */
 const ConfirmConfig = (props) => {
 
-    const data = {
-        id: 'root',
+    const [orgData, setOrgData] = useState({
+        // 门店
+        id: props.storeConfig.id,
         value: {
-            name: '股东会',
+            name: props.storeConfig.name,
         },
+        // 设备
         children: [
             {
-                id: 'joel',
+                id: props.deviceConfig.id,
                 value: {
-                    name: 'Joel Alan',
+                    name: props.deviceConfig.deviceName,
                 },
-                children: [
-                    {
-                        id: 'c1',
-                        value: {
-                            name: 'c1',
-                        },
-                        children: [
-                            {
-                                id: 'c1-1',
-                                value: {
-                                    name: 'c1-1',
-                                },
-                            },
-                            {
-                                id: 'c1-2',
-                                value: {
-                                    name: 'c1-2',
-                                },
-                                children: [
-                                    {
-                                        id: 'c1-2-1',
-                                        value: {
-                                            name: 'c1-2-1',
-                                        },
-                                    },
-                                    {
-                                        id: 'c1-2-2',
-                                        value: {
-                                            name: 'c1-2-2',
-                                        },
-                                    },
-                                ],
-                            },
-                        ],
-                    },
-                    {
-                        id: 'c2',
-                        value: {
-                            name: 'c2',
-                        },
+                //菜谱
+                children: []
+            }
+        ]
+    });
+
+
+    const initOrgData = () => {
+        const tempData = JSON.parse(JSON.stringify(orgData));
+        props.foodMenuConfig.forEach((foodMenu, foodMenuIndex) => {
+            tempData.children[0].children[foodMenuIndex] = {
+                id: nanoid(),
+                value: {
+                    name: foodMenu.name,
+                },
+                children: []
+            }
+            foodMenu?.goodsConfig.forEach((foodItem, foodIndex) => {
+                tempData.children[0].children[foodMenuIndex].children[foodIndex] = {
+                    id: nanoid(),
+                    value: {
+                        name: foodItem.name,
                     },
-                    {
-                        id: 'c3',
+                    children: []
+                }
+                foodItem?.bomConfig.forEach((bomItem, bomIndex) => {
+                    tempData.children[0].children[foodMenuIndex].children[foodIndex].children[bomIndex] = {
+                        id: nanoid(),
                         value: {
-                            name: 'c3',
+                            name: bomItem.name,
                         },
-                        children: [
-                            {
-                                id: 'c3-1',
-                                value: {
-                                    name: 'c3-1',
-                                },
-                            },
-                            {
-                                id: 'c3-2',
-                                value: {
-                                    name: 'c3-2',
-                                },
-                                children: [
-                                    {
-                                        id: 'c3-2-1',
-                                        value: {
-                                            name: 'c3-2-1',
-                                        },
-                                    },
-                                    {
-                                        id: 'c3-2-2',
-                                        value: {
-                                            name: 'c3-2-2',
-                                        },
-                                    },
-                                    {
-                                        id: 'c3-2-3',
-                                        value: {
-                                            name: 'c3-2-3',
-                                        },
-                                    },
-                                ],
-                            },
-                            {
-                                id: 'c3-3',
-                                value: {
-                                    name: 'c3-3',
-                                },
-                            },
-                        ],
-                    },
-                ],
-            },
-        ],
-    };
+                        children: []
+                    }
+                    bomItem?.materialConfig.forEach((materialItem, materialIndex) => {
+                        tempData.children[0].children[foodMenuIndex].children[foodIndex].children[bomIndex].children[materialIndex] = {
+                            id: nanoid(),
+                            value: {
+                                name: materialItem.name,
+                            }
+                        }
+                    });
+                });
+            });
+        });
+        setOrgData(tempData);
+    }
+
+    useEffect(() => {
+        initOrgData();
+    }, []);
+
+
 
     return <>
+        <OrganizationGraph style={{ width: '100%', height: 'auto' }} data={orgData} behaviors={['drag-canvas', 'zoom-canvas']} nodeCfg={{ autoWidth: true }} />
     </>
 }
 

src/pages/quickStart/components/StepsButton/index.jsx

@@ -1,6 +1,8 @@
 import { Button } from 'antd';
 import styles from "./index.less";
 import { notification } from 'antd';
+import quickAPI from "../../service";
+
 const StepsButton = (props) => {
 
     const onClickNext = () => {
@@ -93,6 +95,56 @@ const StepsButton = (props) => {
         }
     }
 
+    const onCreateConfig =  async () => {
+        const jsonData = {
+            storeId: props.storeConfig.id,
+            deviceId: props.deviceConfig.id,
+            foodMenuList: []
+        };
+        props.foodMenuConfig.forEach((foodMenu, foodMenuIndex) => {
+            jsonData.foodMenuList[foodMenuIndex] = {
+                id: foodMenu.id,
+                goodsList: []
+            }
+            foodMenu?.goodsConfig.forEach((foodItem, foodIndex) => {
+                jsonData.foodMenuList[foodMenuIndex].goodsList[foodIndex] = {
+                    id: foodItem.id,
+                    price: foodItem.price,
+                    vipPrice: foodItem.vipPrice,
+                    isdevice: true,
+                    BOMList: []
+                }
+                foodItem?.bomConfig.forEach((bomItem, bomIndex) => {
+                    jsonData.foodMenuList[foodMenuIndex].goodsList[foodIndex].BOMList[bomIndex] = {
+                        id: bomItem.id,
+                        BatchingList: []
+                    }
+                    bomItem?.materialConfig.forEach((materialItem, materialIndex) => {
+                        jsonData.foodMenuList[foodMenuIndex].goodsList[foodIndex].BOMList[bomIndex].BatchingList[materialIndex] = {
+                            id: materialItem.id,
+                            BomQty: 10
+                        }
+                    });
+                });
+            });
+        });
+        const response = await quickAPI.QuickStartAdd(jsonData);
+        if (response.data.isSuccess) {
+            notification.success({
+                message: '快速开始',
+                description: '配置成功！',
+                placement: 'topRight'
+            });
+            props.success();
+        } else {
+            notification.error({
+                message: '快速开始',
+                description: '配置失败！请重试！',
+                placement: 'topRight'
+            });
+        }
+    }
+
     return <div className={styles.steps_btns}>
         {props.current > 0 && (
             <Button
@@ -112,7 +164,7 @@ const StepsButton = (props) => {
         )}
 
         {props.current === props.steps.length - 1 && (
-            <Button type="primary">
+            <Button type="primary" onClick={onCreateConfig}>
                 创建配置
             </Button>
         )}

src/pages/quickStart/index.jsx

@@ -1,4 +1,4 @@
-import { Steps, Card, message } from 'antd';
+import { Steps, Card, Result, Button } from 'antd';
 import React, { useState, useEffect } from 'react';
 import styles from "./index.less";
 import { PageContainer } from '@ant-design/pro-layout';
@@ -14,7 +14,7 @@ import StepsButton from "./components/StepsButton";
 const { Step } = Steps;
 
 const QuickStart = () => {
-
+    const [isSuccess, setIsSuccess] = useState(false);
     const [current, setCurrent] = useState(0);
     const [quickStartObj, setQuickStartObj] = useState({
         storeConfig: {},
@@ -108,18 +108,15 @@ const QuickStart = () => {
     const stepsContent = [
         <StoreConfig storeConfig={quickStartObj.storeConfig} current={current} steps={stepsText} next={next} onSelectedChange={onSelectedChange}></StoreConfig>,
         <DeviceConfig storeConfig={quickStartObj.storeConfig} deviceConfig={quickStartObj.deviceConfig} current={current} steps={stepsText} prev={prev} next={next} onSelectedChange={onSelectedChange} ></DeviceConfig>,
-        <FoodMenuConfig  foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} prev={prev} next={next} onSelectedChange={onSelectedChange}></FoodMenuConfig>,
+        <FoodMenuConfig foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} prev={prev} next={next} onSelectedChange={onSelectedChange}></FoodMenuConfig>,
         <GoodsConfig deviceConfig={quickStartObj.deviceConfig} foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} onAddGoodsToFoodMenu={onAddGoodsToFoodMenu} prev={prev} next={next} ></GoodsConfig>,
         <BomConfig foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} prev={prev} next={next} onBomRelationGoods={onBomRelationGoods}></BomConfig>,
         <MaterialConfig foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} onMaterialRelationBom={onMaterialRelationBom} prev={prev} next={next}></MaterialConfig>,
-        <ConfirmConfig quickStartObj={quickStartObj} current={current} steps={stepsText} prev={prev}></ConfirmConfig>
+        <ConfirmConfig {...quickStartObj} current={current} steps={stepsText} prev={prev} ></ConfirmConfig>
     ];
 
     useEffect(() => {
-        if (current > 4) {
-            console.log('终极JSON对象：', JSON.stringify(quickStartObj));
-        }
-        console.log('JSON对象更新啦', quickStartObj);
+        console.log('对象更新', quickStartObj)
     }, [quickStartObj]);
 
     return <PageContainer>
@@ -133,15 +130,41 @@ const QuickStart = () => {
             </Card>
         </div>
 
-        <Card>
-            <div className={styles.steps_content}>{stepsContent[current]}</div>
-        </Card>
-
-        <div className={styles.steps_navbar_bottom}>
-            <Card>
-                <StepsButton  {...quickStartObj} current={current} steps={stepsText} prev={prev} next={next}></StepsButton>
-            </Card>
-        </div>
+        {
+            isSuccess ?
+                <Card>
+                    <Result
+                        status="success"
+                        title="成功配置所有信息！"
+                        subTitle="欢迎再次使用！"
+                        extra={[
+                            <Button type="primary" key="console" onClick={() => {
+                                setQuickStartObj({
+                                    storeConfig: {},
+                                    deviceConfig: {},
+                                    foodMenuConfig: [],
+                                })
+                                setCurrent(0);
+                                setIsSuccess(false);
+                            }}>
+                                快速开始
+                            </Button>
+                        ]}
+                    />
+                </Card>
+                :
+                <>
+                    <Card>
+                        <div className={styles.steps_content}>{stepsContent[current]}</div>
+                    </Card>
+
+                    <div className={styles.steps_navbar_bottom}>
+                        <Card>
+                            <StepsButton  {...quickStartObj} current={current} steps={stepsText} prev={prev} next={next} success={() => setIsSuccess(true)}></StepsButton>
+                        </Card>
+                    </div>
+                </>
+        }
     </PageContainer>
 
 }

src/pages/quickStart/service.js

@@ -399,6 +399,12 @@ export default {
             method: 'POST',
             data: data,
         });
-    }
+    },
 
+    QuickStartAdd(data) {
+        return request('/kitchen/api/quickstart/add', {
+            method: 'POST',
+            data: data,
+        });
+    }
 }