bpa
/
BPA.KitChen.Web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

优化设备配置、门店配置、菜单配置

tags/小炒逻辑变更前
yangwenhua 2 years ago
parent
8f4acc38ac
commit
d9b8e17c8b
7 changed files with 362 additions and 153 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +192
    -121
      src/pages/quickStart/components/DeviceConfig/index.jsx
  2. +1
    -1
      src/pages/quickStart/components/DeviceConfig/index.less
  3. +133
    -24
      src/pages/quickStart/components/FoodMenuConfig/index.jsx
  4. +7
    -2
      src/pages/quickStart/components/StoreConfig/index.jsx
  5. +5
    -3
      src/pages/quickStart/index.jsx
  6. +12
    -2
      src/pages/quickStart/index.less
  7. +12
    -0
      src/pages/quickStart/service.js

+ 192
- 121
src/pages/quickStart/components/DeviceConfig/index.jsx View File

@@ -1,14 +1,16 @@
import React, { useState, useEffect, useRef } from 'react';
import { Form, Input, Select, InputNumber, TreeSelect, message, Button, Modal } from 'antd';
import { Form, Input, Select, InputNumber, TreeSelect, message, Button, Modal, Radio } from 'antd';
import ProTable from '@ant-design/pro-table';
import quickAPI from "../../service";
import StepsButton from "../StepsButton";
import styles from "./index.less";
import indexStyles from "../../index.less";


const DeviceConfig = (props) => {
const { Option, OptGroup } = Select;
const [addDeviceTypeForm] = Form.useForm();
const [editDeviceForm] = Form.useForm();

//设备类型列表
const [deviceTypeList, setDeviceTypeList] = useState([]);
@@ -26,7 +28,7 @@ const DeviceConfig = (props) => {
* @param {*} formValues
*/
const onFinishSubmit = (formValues) => {
props.onFinishForm('devicConfig', formValues);
props.onFinishForm('deviceConfig', formValues, true);
}

/**
@@ -57,7 +59,7 @@ const DeviceConfig = (props) => {
const onFetchDeviceClass = async () => {
const response = await quickAPI.GetDeviceType();
if (response.statusCode === 200) {
response.data.forEach(item => item.value = item.deviceName);
response.data.forEach(item => { item.value = item.name; item.code = item.name });
setDeviceClassList(response.data);
} else {
message.error(response.errors || '获取设备分类出错');
@@ -91,7 +93,8 @@ const DeviceConfig = (props) => {
}

const actionRef = useRef();
const [selectedRowsState, setSelectedRows] = useState([]);
const [selectedRowsState, setSelectedRows] = useState(props.deviceConfig.id ? [props.deviceConfig] : []);
const [selectedRowKeys, setSelectRowKeys] = useState(props.deviceConfig.id ? [props.deviceConfig.id] : []);
const columns = [
{
title: '主键',
@@ -111,11 +114,11 @@ const DeviceConfig = (props) => {
valueEnum: deviceTypeList,
hideInSearch: true,
},
{
title: '设备分类',
dataIndex: 'deviceTypeId',
valueEnum: deviceClassList,
},
// {
// title: '设备分类',
// dataIndex: 'deviceTypeId',
// valueEnum: deviceClassList,
// },
{
title: '状态',
dataIndex: 'status',
@@ -127,6 +130,38 @@ const DeviceConfig = (props) => {
}
];

const optionsWithDisabled = [
{
label: '新建设备',
value: true,
},
{
label: '选择设备',
value: false,
}
];

const [isCreate, setIsCreate] = useState(props.deviceConfig.id ? false : true);

const onChangeState = ({ target: { value } }) => {
setIsCreate(value);
let emptyObj = {
id: "",
deviceName: "",
deviceTypeKey: "",
orgId: "",
deviceTypeId: "",
deviceLoc: "",
status: 0,
materialQuantity: 1,
deviceAddr: ""
}
props.onFinishForm('deviceConfig', emptyObj);
editDeviceForm.setFieldsValue(emptyObj);
setSelectRowKeys([]);
setSelectedRows([]);
}

useEffect(() => {
onFetchOrgTree();
onFetchDeviceClass();
@@ -135,128 +170,164 @@ const DeviceConfig = (props) => {
}, []);

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>
<div className={indexStyles.choose_change_state}>
<Radio.Group
options={optionsWithDisabled}
onChange={onChangeState}
value={isCreate}
optionType="button"
buttonStyle="solid"
/>
</div>
<div className={indexStyles.common_row}>
<Form
layout="Horizontal"
labelCol={{ span: 6 }}
preserve={false}
initialValues={props.deviceConfig}
form={editDeviceForm}
onFinish={onFinishSubmit}
style={{ width: '600px', marginRight: '30px' }}
>
<Form.Item name="id" hidden={true}>
<Input />
</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>
<Form.Item label={'设备名称'} name="deviceName" rules={[{ required: true, max: 50 }]}>
<Input disabled={!isCreate || props.deviceConfig.id} />
</Form.Item>

<div className={styles.add_row_content}>
<Form.Item label={'设备分类'} name="deviceTypeId" rules={[{ required: true }]}>
<Select>
{deviceClassList.map((item, index) => {
<Form.Item label={'设备类型'} name="deviceTypeKey" rules={[{ required: true }]}>
<Select disabled={!isCreate || props.deviceConfig.id}>
{deviceTypeList.map((item, index) => {
return (
<Select.Option index={index} value={item.id} key={item.id}>
{item.name}
<Select.Option index={index} value={item.code} key={item.code}>
{item.value}
</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>
<Form.Item name="orgId" label="归属门店" rules={[{ required: true }]}>
<TreeSelect
disabled={!isCreate || props.deviceConfig.id}
style={{ width: '100%' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
treeData={orgTree}
placeholder="归属门店"
treeDefaultExpandAll
/>
</Form.Item>

<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);
},
}}
/>
<div className={styles.add_row_content}>
<Form.Item label={'设备分类'} name="deviceTypeId" rules={[{ required: true }]} >
<Select style={{ width: '75%' }} disabled={!isCreate || props.deviceConfig.id}>
{deviceClassList.map((item, index) => {
return (
<Select.Option index={index} value={item.id} key={item.id}>
{item.name}
</Select.Option>
);
})}
</Select>
</Form.Item>
<Button disabled={!isCreate || props.deviceConfig.id} 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 disabled={!isCreate || props.deviceConfig.id}>
{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" disabled={!isCreate || props.deviceConfig.id} />
</Form.Item>
<Form.Item label={'状态'} name="status" rules={[{ required: true }]}>
<Select placeholder="请选择状态" disabled={!isCreate || props.deviceConfig.id}>
<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%' }} disabled={!isCreate || props.deviceConfig.id}/>
</Form.Item>
<Form.Item label={'设备详细地址'} name="deviceAddr">
<Input placeholder="成都市武侯区桂溪街道环球中心N5-9111C" disabled={!isCreate || props.deviceConfig.id}/>
</Form.Item>
<Form.Item>
<StepsButton current={props.current} steps={props.steps} prev={props.prev}></StepsButton>
</Form.Item>
</Form>

{
!isCreate && <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={{
type: 'radio',
onChange: (selectedRowKeys, selectedRows) => {
setSelectRowKeys(selectedRowKeys);
setSelectedRows(selectedRows);
if (selectedRows.length > 0) {
props.onFinishForm('deviceConfig', selectedRows[0]);
editDeviceForm.setFieldsValue(selectedRows[0]);
} else {
let emptyObj = {
id: "",
deviceName: "",
deviceTypeKey: "",
orgId: "",
deviceTypeId: "",
deviceLoc: "",
status: 0,
materialQuantity: 1,
deviceAddr: ""
}
editDeviceForm.setFieldsValue(emptyObj);
props.onFinishForm('deviceConfig', emptyObj);
}
},
selectedRowKeys: selectedRowKeys
}}
/>
}
</div>

<Modal title="添加设备分类" visible={isModalOpen} footer={false} onCancel={() => setIsModalOpen(false)}>
<Form


+ 1
- 1
src/pages/quickStart/components/DeviceConfig/index.less View File

@@ -6,5 +6,5 @@
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -100px
right: 0px
}

+ 133
- 24
src/pages/quickStart/components/FoodMenuConfig/index.jsx View File

@@ -1,42 +1,151 @@
import React, { useState, useEffect } from 'react';
import { Form, Input, Select, InputNumber, TreeSelect, message, Button, Modal } from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { Form, Input, Select, InputNumber, TreeSelect, message, Button, Modal, Radio } from 'antd';
import quickAPI from "../../service";
import StepsButton from "../StepsButton";
import styles from "./index.less";
import indexStyles from "../../index.less";

const FoodMenuConfig = (props) => {

const [ editFoodMenuForm ] = Form.useForm();

/**
* 提交表单
* @param {*} formValues
*/
const onFinishSubmit = (formValues) => {
props.onFinishForm('foodMenuConfig', formValues);
props.onFinishForm('foodMenuConfig', formValues, true);
}

const [selectedRowsState, setSelectedRows] = useState(props.foodMenuConfig.id ? [props.foodMenuConfig] : []);
const [selectedRowKeys, setSelectRowKeys] = useState(props.foodMenuConfig.id ? [props.foodMenuConfig.id] : []);

const optionsWithDisabled = [
{
label: '新建菜谱',
value: true,
},
{
label: '选择菜谱',
value: false,
}
];

const [isCreate, setIsCreate] = useState(props.foodMenuConfig.id ? false : true);

const onChangeState = ({ target: { value } }) => {
setIsCreate(value);
let emptyObj = {
id: "",
code: "",
name: ""
}
props.onFinishForm('foodMenuConfig', emptyObj);
editFoodMenuForm.setFieldsValue(emptyObj);
setSelectRowKeys([]);
setSelectedRows([]);
}
const actionRef = useRef();
const columns = [
{
title: '主键',
dataIndex: 'id',
hideInSearch: true,
hideInTable: true,
tip: '规则名称是唯一的 key'
},
{
title: '菜谱编码',
dataIndex: 'code',
valueType: 'textarea',
},
{
title: '菜谱名称',
dataIndex: 'name',
valueType: 'textarea',
}
]

return <>
<Form
layout="Horizontal"
preserve={false}
initialValues={props.foodMenuConfig}
onFinish={onFinishSubmit}
style={{ width: '600px' }}
<div className={indexStyles.choose_change_state}>
<Radio.Group
options={optionsWithDisabled}
onChange={onChangeState}
value={isCreate}
optionType="button"
buttonStyle="solid"
/>
</div>
<div className={indexStyles.common_row}>
<Form
form={editFoodMenuForm}
layout="Horizontal"
preserve={false}
initialValues={props.foodMenuConfig}
onFinish={onFinishSubmit}
style={{ width: '600px', marginRight: '30px' }}
>
<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>
<Form.Item name="id" hidden={true}>
<Input />
</Form.Item>
<Form.Item label={"菜谱编码"} name="code" rules={[{ required: true, max: 20 }]}>
<Input disabled={!isCreate || props.foodMenuConfig.id} />
</Form.Item>
<Form.Item label={"菜谱名称"} name="name" rules={[{ required: true, max: 20 }]} >
<Input disabled={!isCreate || props.foodMenuConfig.id} />
</Form.Item>

<Form.Item>
<StepsButton current={props.current} steps={props.steps} prev={props.prev}></StepsButton>
</Form.Item>
</Form>
{
!isCreate && <ProTable
headerTitle="菜谱列表"
actionRef={actionRef}
rowKey="id"
search={{
labelWidth: 120,
}}
request={async (params) => {
let data = [];
let total = 0;
await quickAPI.GetFoodMenuInfoPage(params).then((r) => {
data = r.data.data;
total = r.data.total;
});
return {
data: data,
success: true,
total: total,
};
}}
columns={columns}
rowSelection={{
type: 'radio',
onChange: (selectedRowKeys, selectedRows) => {
setSelectRowKeys(selectedRowKeys);
setSelectedRows(selectedRows);
if (selectedRows.length > 0) {
props.onFinishForm('foodMenuConfig', selectedRows[0]);
editFoodMenuForm.setFieldsValue(selectedRows[0]);
} else {
let emptyObj = {
id: "",
code: "",
name: ""
}
editFoodMenuForm.setFieldsValue(emptyObj);
props.onFinishForm('foodMenuConfig', emptyObj);
}
},
selectedRowKeys: selectedRowKeys
}}
/>
}
</div>

</>
}


+ 7
- 2
src/pages/quickStart/components/StoreConfig/index.jsx View File

@@ -36,6 +36,8 @@ const StoreConfig = (props) => {
const onChangeState = ({ target: { value } }) => {
storeForm.resetFields();
setIsCreateStore(value);
setSelectedRows([])
setSelectRowKeys([]);
if (value) {
let emptyStore = {
id: "",
@@ -120,7 +122,8 @@ const StoreConfig = (props) => {
}
];

const [selectedRows, setSelectedRows] = useState(props.storeConfig.id ? [props.storeConfig.id] : []);
const [selectedRows, setSelectedRows] = useState(props.storeConfig.id ? [props.storeConfig] : []);
const [selectedRowKeys, setSelectRowKeys] = useState(props.storeConfig.id ? [props.storeConfig.id] : []);

/**
* 选择组织
@@ -131,6 +134,7 @@ const StoreConfig = (props) => {
props.onFinishForm('storeConfig', selectedRows[0]);
storeForm.setFieldsValue(selectedRows[0]);
setSelectedRows(selectedRows);
setSelectRowKeys(selectedRowKeys);
} else {
let emptyStore = {
id: "",
@@ -148,9 +152,10 @@ const StoreConfig = (props) => {
props.onFinishForm('storeConfig', emptyStore);
storeForm.setFieldsValue(emptyStore);
setSelectedRows([])
setSelectRowKeys([]);
}
},
selectedRowKeys: selectedRows
selectedRowKeys: selectedRowKeys
};

useEffect(() => {


+ 5
- 3
src/pages/quickStart/index.jsx View File

@@ -25,7 +25,8 @@ const QuickStart = () => {
sort: 1,
remark: ""
},
devicConfig: {
deviceConfig: {
id: "",
deviceName: "",
deviceTypeKey: "",
orgId: "",
@@ -36,7 +37,8 @@ const QuickStart = () => {
deviceAddr: ""
},
foodMenuConfig: {
code: "111",
id: "",
code: "",
name: ""
}
});
@@ -68,7 +70,7 @@ const QuickStart = () => {

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>,
<DeviceConfig deviceConfig={quickStartObj.deviceConfig} 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>,


+ 12
- 2
src/pages/quickStart/index.less View File

@@ -2,6 +2,16 @@
margin: 40px 0 20px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: flex-start;
}

.common_row {
display: flex;
align-items: flex-start;
}

.choose_change_state {
display: flex;
justify-content: flex-start;
margin-bottom: 20px;
}

+ 12
- 0
src/pages/quickStart/service.js View File

@@ -65,5 +65,17 @@ export default {
...params,
},
});
},

/**
* 获取菜谱列表
* @param {*} data
* @returns
*/
GetFoodMenuInfoPage(data) {
return request(`/kitchen/api/FoodMenu/GetFoodMenuInfoPage`, {
method: 'POST',
data: data,
});
}
}

Write Preview
Loading…
Cancel
Save