快速开始：完成门店配置、设备配置、菜谱配置

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 <>
+        <Form
+            layout="Horizontal"
+            labelCol={{ span: 6 }}
+            preserve={false}
+            initialValues={props.deviceInfo}
+            onFinish={onFinishSubmit}
+            style={{ width: '600px' }}
+        >
+            <Form.Item name="id" hidden={true}>
+                <Input />
+            </Form.Item>
+
+            <Form.Item label={'设备名称'} name="deviceName" rules={[{ required: true, max: 50 }]}>
+                <Input />
+            </Form.Item>
+
+            <Form.Item label={'设备类型'} name="deviceTypeKey" rules={[{ required: true }]}>
+                <Select>
+                    {deviceTypeList.map((item, index) => {
+                        return (
+                            <Select.Option index={index} value={item.code} key={item.code}>
+                                {item.value}
+                            </Select.Option>
+                        );
+                    })}
+                </Select>
+            </Form.Item>
+
+            <Form.Item name="orgId" label="归属门店" rules={[{ required: true }]}>
+                <TreeSelect
+                    style={{ width: '100%' }}
+                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                    treeData={orgTree}
+                    placeholder="归属门店"
+                    treeDefaultExpandAll
+                />
+            </Form.Item>
+
+            <div className={styles.add_row_content}>
+                <Form.Item label={'设备分类'} name="deviceTypeId" rules={[{ required: true }]}>
+                    <Select>
+                        {deviceClassList.map((item, index) => {
+                            return (
+                                <Select.Option index={index} value={item.id} key={item.id}>
+                                    {item.name}
+                                </Select.Option>
+                            );
+                        })}
+                    </Select>
+                </Form.Item>
+                <Button type="primary" className={styles.add_row_btn} onClick={() => { setIsModalOpen(true); addDeviceTypeForm.resetFields(); }}>添加分类</Button>
+            </div>
+
+            <Form.Item
+                noStyle
+                shouldUpdate={(prevValues, currentValues) => prevValues.deviceTypeKey !== currentValues.deviceTypeKey}
+            >
+                {({ getFieldValue }) =>
+                    getFieldValue('deviceTypeKey') === 'TMC' ? (
+                        <Form.Item name="deviceVersion" label="设备版本" initialValue="WorryFreeEdition">
+                            <Select>
+                                {deviceVersion.map((item, index) => {
+                                    return (
+                                        <Select.Option index={index} value={item.code} key={item.code}>
+                                            {item.name}
+                                        </Select.Option>
+                                    );
+                                })}
+                            </Select>
+                        </Form.Item>
+                    ) : null
+                }
+            </Form.Item>
+            <Form.Item label={'设备坐标'} name="deviceLoc">
+                <Input placeholder="104.070734,30.575041" />
+            </Form.Item>
+            <Form.Item label={'状态'} name="status" rules={[{ required: true }]}>
+                <Select placeholder="请选择状态">
+                    <OptGroup>
+                        <Select.Option value={0}>正常</Select.Option>
+                        <Select.Option value={1}>停用</Select.Option>
+                    </OptGroup>
+                </Select>
+            </Form.Item>
+            <Form.Item label={'设备物料数量'} name="materialQuantity">
+                <InputNumber style={{ width: '100%' }} />
+            </Form.Item>
+            <Form.Item label={'设备详细地址'} name="deviceAddr">
+                <Input placeholder="成都市武侯区桂溪街道环球中心N5-9111C" />
+            </Form.Item>
+            <Form.Item>
+                <StepsButton current={props.current} steps={props.steps} prev={props.prev}></StepsButton>
+            </Form.Item>
+        </Form>
+
+        <ProTable
+            headerTitle="设备信息"
+            actionRef={actionRef}
+            rowKey="id"
+            search={{
+                labelWidth: 120,
+            }}
+            request={async (params) => {
+                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);
+                },
+            }}
+        />
+
+        <Modal title="添加设备分类" visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
+            <Form
+                layout="vertical"
+                onFinish={onSaveDeviceType}
+                form={addDeviceTypeForm}
+            >
+                <Form.Item name="id" hidden={true}>
+                    <Input />
+                </Form.Item>
+                <Form.Item label={"类型名称"} name="name" rules={[{ required: true, max: 50 }]} >
+                    <Input />
+                </Form.Item>
+
+                <Form.Item>
+                    <Button type="primary" htmlType="submit">
+                        保存
+                    </Button>
+                </Form.Item>
+            </Form>
+        </Modal>
+    </>
+}
+
+export default DeviceConfig;

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
+}

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 <>
+        <Form
+            layout="Horizontal"
+            preserve={false}
+            initialValues={props.foodMenuConfig}
+            onFinish={onFinishSubmit}
+            style={{ width: '600px' }}
+            >
+            <Form.Item name="id" hidden={true}>
+                <Input />
+            </Form.Item>
+            <Form.Item label={"菜谱编码"} name="code" rules={[{ required: true, max: 20 }]} >
+                <Input />
+            </Form.Item>
+            <Form.Item label={"菜谱名称"} name="name" rules={[{ required: true, max: 20 }]} >
+                <Input />
+            </Form.Item>
+
+            <Form.Item>
+                <StepsButton current={props.current} steps={props.steps} prev={props.prev}></StepsButton>
+            </Form.Item>
+        </Form>
+    </>
+}
+
+export default FoodMenuConfig;

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

@@ -0,0 +1,32 @@
+import { Button } from 'antd';
+import styles from "./index.less";
+
+
+const StepsButton = (props) => {
+    return <div className={styles.steps_btns}>
+        {props.current > 0 && (
+            <Button
+                style={{
+                    margin: '0 8px',
+                }}
+                onClick={props.prev}
+            >
+                上一步：{props.steps[props.current - 1]}
+            </Button>
+        )}
+
+        {props.current < props.steps.length - 1 && (
+            <Button type="primary" htmlType="submit">
+                下一步：{props.steps[props.current + 1]}
+            </Button>
+        )}
+
+        {props.current === props.steps.length - 1 && (
+            <Button type="primary">
+                创建配置
+            </Button>
+        )}
+    </div>
+}
+
+export default StepsButton;

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

@@ -0,0 +1,5 @@
+.steps_btns {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

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 <>
-        <Form
-            layout="horizontal"
-            preserve={false}
-            labelCol={{
-                span: 4,
-            }}
-            initialValues={props.values}
-            onFinish={props.onFinish}
-        >
-            <Form.Item name="id" hidden={true}>
-                <Input />
-            </Form.Item>
-            <Form.Item name="code" label="组织编码" rules={[{ required: true, max: 64 }]}>
-                <Input placeholder="请输入组织编码" />
-            </Form.Item>
-            <Form.Item name="name" label="组织名称" rules={[{ required: true, max: 64 }]}>
-                <Input placeholder="请输入名称" />
-            </Form.Item>
-            <Form.Item name="pid" label="上级名称" rules={[{ required: true }]}>
-                <TreeSelect
-                    style={{ width: '100%' }}
-                    dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                    treeData={props.treeDatas}
-                    placeholder="请选择上级名称"
-                    treeDefaultExpandAll
-                />
-            </Form.Item>
+    //提交表单
+    const onFinishSubmit = (formValues) => {
+        props.onFinishForm('storeConfig', formValues, true);
+    }
 
-            <Form.Item
-                name="type"
-                label="组织类型"
-                rules={[{ required: true, message: '请选择组织类型' }]}
-            >
-                <Select placeholder="请选择机构类型">
-                    <OptGroup>
-                        <Select.Option value={0}>机构</Select.Option>
-                        <Select.Option value={1}>配送中心</Select.Option>
-                        <Select.Option value={2}>直营店</Select.Option>
-                        <Select.Option value={3}>加盟店</Select.Option>
-                    </OptGroup>
-                </Select>
-            </Form.Item>
-            <Form.Item
-                name="payTemplateId"
-                label="支付方式"
+    const [isCreateStore, setIsCreateStore] = useState(props.storeConfig.id ? false : true);
+
+    const optionsWithDisabled = [
+        {
+            label: '新建组织',
+            value: true,
+        },
+        {
+            label: '选择组织',
+            value: false,
+        }
+    ];
+
+    const onChangeState = ({ target: { value } }) => {
+        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 <div>
+        <div className={styles.choose_store_state}>
+            <Radio.Group
+                options={optionsWithDisabled}
+                onChange={onChangeState}
+                value={isCreateStore}
+                optionType="button"
+                buttonStyle="solid"
+            />
+        </div>
+
+        <div className={styles.store_config_container}>
+            <Form
+                form={storeForm}
+                layout="horizontal"
+                preserve={false}
+                labelCol={{
+                    span: 4,
+                }}
+                initialValues={props.storeConfig}
+                style={{ width: '600px', marginRight: '50px' }}
+                onFinish={onFinishSubmit}
             >
-                <Select placeholder="请选择支付方式">
-                    {
-                        props.payTemplateList?.map(item => {
-                            return <Option value={item.id} key={item.id}>{item.name}</Option>
-                        })
-                    }
-                </Select>
-            </Form.Item>
-            <Form.Item label={'店铺地址'} name="store_Addr" rules={[{ required: true, max: 100 }]}>
-                <Input placeholder="成都市武侯区桂溪街道环球中心N5-9111C" />
-            </Form.Item>
-            <Form.Item label={'店铺坐标'} name="store_Loc" rules={[{
-                required: true, max: 100, pattern: /^[-\+]?\d+(\.\d+)\,[-\+]?\d+(\.\d+)$/,
-                message: '经纬度格式不对'
-            }]}>
-                <Input placeholder="104.070734,30.575041" />
-            </Form.Item>
-            <Form.Item name="tel" label="电话" rules={[{ max: 20 }]}>
-                <Input placeholder="请输入联系电话" />
-            </Form.Item>
-            <Form.Item name="sort" label="排序">
-                <InputNumber min={1} step={1} precision={0} />
-            </Form.Item>
-            <Form.Item name="remark" label="备注">
-                <TextArea rows={4} rules={[{ max: 500 }]} />
-            </Form.Item>
-            <Form.Item>
-                <Button type="primary" htmlType="submit">
-                    保存
-                </Button>
-            </Form.Item>
-        </Form>
-    </>
+                <Form.Item name="id" hidden={true}>
+                    <Input disabled={props.storeConfig.id || !isCreateStore} />
+                </Form.Item>
+
+                <Form.Item name="code" label="组织编码" rules={[{ required: true, max: 64 }]}>
+                    <Input placeholder="请输入组织编码" disabled={props.storeConfig.id || !isCreateStore} />
+                </Form.Item>
+
+                <Form.Item name="name" label="组织名称" rules={[{ required: true, max: 64 }]}>
+                    <Input placeholder="请输入名称" disabled={props.storeConfig.id || !isCreateStore} />
+                </Form.Item>
+
+                <Form.Item name="pid" label="上级名称" rules={[{ required: true }]}>
+                    <TreeSelect
+                        style={{ width: '100%' }}
+                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                        treeData={orgTree}
+                        placeholder="请选择上级名称"
+                        treeDefaultExpandAll
+                        disabled={props.storeConfig.id || !isCreateStore}
+                    />
+                </Form.Item>
+
+                <Form.Item
+                    name="type"
+                    label="组织类型"
+                    rules={[{ required: true, message: '请选择组织类型' }]}
+                >
+                    <Select placeholder="请选择机构类型" disabled={props.storeConfig.id || !isCreateStore}>
+                        <OptGroup>
+                            <Select.Option value={0}>机构</Select.Option>
+                            <Select.Option value={1}>配送中心</Select.Option>
+                            <Select.Option value={2}>直营店</Select.Option>
+                            <Select.Option value={3}>加盟店</Select.Option>
+                        </OptGroup>
+                    </Select>
+                </Form.Item>
+
+                <Form.Item
+                    name="payTemplateId"
+                    label="支付方式"
+                >
+                    <Select placeholder="请选择支付方式" disabled={props.storeConfig.id || !isCreateStore}>
+                        {
+                            payTypeList?.map(item => {
+                                return <Option value={item.id} key={item.id}>{item.name}</Option>
+                            })
+                        }
+                    </Select>
+                </Form.Item>
+
+                <Form.Item label={'店铺地址'} name="store_Addr" rules={[{ required: true, max: 100 }]}>
+                    <Input placeholder="成都市武侯区桂溪街道环球中心N5-9111C" disabled={props.storeConfig.id || !isCreateStore} />
+                </Form.Item>
+
+                <Form.Item label={'店铺坐标'} name="store_Loc" rules={[{
+                    required: true, max: 100, pattern: /^[-\+]?\d+(\.\d+)\,[-\+]?\d+(\.\d+)$/,
+                    message: '经纬度格式不对'
+                }]}>
+                    <Input placeholder="104.070734,30.575041" disabled={props.storeConfig.id || !isCreateStore} />
+                </Form.Item>
+
+                <Form.Item name="tel" label="电话" rules={[{ max: 20 }]}>
+                    <Input placeholder="请输入联系电话" disabled={props.storeConfig.id || !isCreateStore} />
+                </Form.Item>
+
+                <Form.Item name="sort" label="排序">
+                    <InputNumber min={1} step={1} precision={0} disabled={props.storeConfig.id || !isCreateStore} />
+                </Form.Item>
+
+                <Form.Item name="remark" label="备注">
+                    <TextArea rows={4} rules={[{ max: 500 }]} disabled={props.storeConfig.id || !isCreateStore} />
+                </Form.Item>
+
+                <Form.Item>
+                    <StepsButton current={props.current} steps={props.steps}></StepsButton>
+                </Form.Item>
+            </Form>
+            {
+                !isCreateStore && <ProTable
+                    headerTitle="组织列表"
+                    actionRef={actionRef}
+                    rowKey="id"
+                    style={{ width: '600px' }}
+                    rowSelection={{
+                        type: 'radio',
+                        ...rowSelection,
+                    }}
+                    request={async (params) => {
+                        let UserData = [];
+                        let total = 0;
+                        await quickAPI.getpage(params).then((r) => {
+                            UserData = r.data.data;
+                            total = r.data.total;
+                        });
+                        return {
+                            data: UserData,
+                            success: true,
+                            total: total,
+                        };
+                    }}
+                    columns={columns}
+                />
+            }
+        </div>
+    </div>
 }
 
 export default StoreConfig;

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;
+}

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: <StoreConfig></StoreConfig>,
-    },
-    {
-        title: '设备配置',
-        content: <h1>
-            设备配置
-        </h1>,
-    },
-    {
-        title: '菜谱配置',
-        content: <h1>
-            菜谱配置
-        </h1>,
-    },
-    {
-        title: '商品配置',
-        content: <h1>
-            商品配置
-        </h1>,
-    },
-    {
-        title: '配方配置',
-        content: <h1>
-            配方配置
-        </h1>,
-    },
-    {
-        title: '物料配置',
-        content: <h1>
-            物料配置
-        </h1>,
-    },
-    {
-        title: '确认配置',
-        content: <h1>
-            确认配置
-        </h1>,
-    }
-];
 
 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 <PageContainer>
-        <Card>
+    const stepsText = ['门店配置', '设备配置', '菜谱配置', '商品配置', '配方配置', '物料配置', '确认配置'];
+
+    const stepsContent = [
+        <StoreConfig storeConfig={quickStartObj.storeConfig} current={current} steps={stepsText} onFinishForm={onFinishForm}></StoreConfig>,
+        <DeviceConfig devicConfig={quickStartObj.devicConfig} current={current} steps={stepsText} onFinishForm={onFinishForm} prev={prev}></DeviceConfig>,
+        <FoodMenuConfig foodMenuConfig={quickStartObj.foodMenuConfig} current={current} steps={stepsText} onFinishForm={onFinishForm} prev={prev}></FoodMenuConfig>,
+        <h1>商品配置</h1>,
+        <h1>配方配置</h1>,
+        <h1>物料配置</h1>,
+        <h1>确认配置</h1>
+    ];
 
+    useEffect(() => {
+        console.log('对象更新啦', quickStartObj);
+    }, [quickStartObj]);
 
+    return <PageContainer>
+        <Card>
             <Steps current={current}>
-                {steps.map((item) => (
-                    <Step key={item.title} title={item.title} />
+                {stepsText.map((item) => (
+                    <Step key={item} title={item} />
                 ))}
             </Steps>
-            <div className={styles.steps_content}>{steps[current].content}</div>
-            <div className="steps-action">
-                {current < steps.length - 1 && (
-                    <Button type="primary" onClick={() => next()}>
-                        Next
-                    </Button>
-                )}
-                {current === steps.length - 1 && (
-                    <Button type="primary" onClick={() => message.success('Processing complete!')}>
-                        Done
-                    </Button>
-                )}
-                {current > 0 && (
-                    <Button
-                        style={{
-                            margin: '0 8px',
-                        }}
-                        onClick={() => prev()}
-                    >
-                        Previous
-                    </Button>
-                )}
-            </div>
+            <div className={styles.steps_content}>{stepsContent[current]}</div>
         </Card>
     </PageContainer>
 }

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;
 }

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,
+            },
+        });
+    }
+}