@@ -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 }} /> | |||
</> | |||
} | |||
@@ -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> | |||
)} | |||
@@ -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> | |||
} | |||
@@ -399,6 +399,12 @@ export default { | |||
method: 'POST', | |||
data: data, | |||
}); | |||
} | |||
}, | |||
QuickStartAdd(data) { | |||
return request('/kitchen/api/quickstart/add', { | |||
method: 'POST', | |||
data: data, | |||
}); | |||
} | |||
} |