@@ -21,6 +21,12 @@ export default [ | |||||
}, | }, | ||||
], | ], | ||||
}, | }, | ||||
{ | |||||
name: '快速开始', | |||||
icon: 'PlayCircleOutlined', | |||||
path: '/quickStart', | |||||
component: './quickStart', | |||||
}, | |||||
{ | { | ||||
name: '系统管理', | name: '系统管理', | ||||
icon: 'SettingOutlined', | icon: 'SettingOutlined', | ||||
@@ -39,7 +39,12 @@ export async function getInitialState() { | |||||
const queryMenuData = async () => { | const queryMenuData = async () => { | ||||
try { | try { | ||||
const data = [ | const data = [ | ||||
{ | |||||
name: '快速开始', | |||||
icon: 'PlayCircleOutlined', | |||||
path: '/quickStart', | |||||
component: './quickStart', | |||||
}, | |||||
{ | { | ||||
code: 'device', | code: 'device', | ||||
name: '设备管理', | name: '设备管理', | ||||
@@ -0,0 +1,91 @@ | |||||
import React, { useState } from 'react'; | |||||
import { Modal, Form, Input, Button, Select, InputNumber, TreeSelect } from 'antd'; | |||||
const StoreConfig = (props) => { | |||||
const { TextArea } = Input; | |||||
const { Option, OptGroup } = Select; | |||||
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> | |||||
<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="支付方式" | |||||
> | |||||
<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> | |||||
</> | |||||
} | |||||
export default StoreConfig; |
@@ -0,0 +1,99 @@ | |||||
import { Button, message, Steps, Card } from 'antd'; | |||||
import React, { useState } from 'react'; | |||||
import styles from "./index.less"; | |||||
import StoreConfig from './components/StoreConfig'; | |||||
import { PageContainer } from '@ant-design/pro-layout'; | |||||
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 next = () => { | |||||
setCurrent(current + 1); | |||||
}; | |||||
const prev = () => { | |||||
setCurrent(current - 1); | |||||
}; | |||||
return <PageContainer> | |||||
<Card> | |||||
<Steps current={current}> | |||||
{steps.map((item) => ( | |||||
<Step key={item.title} title={item.title} /> | |||||
))} | |||||
</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> | |||||
</Card> | |||||
</PageContainer> | |||||
} | |||||
export default QuickStart; |
@@ -0,0 +1,3 @@ | |||||
.steps_content { | |||||
margin: 20px 0; | |||||
} |