|
|
@@ -8,6 +8,8 @@ import '@wangeditor/editor/dist/css/style.css' |
|
|
|
import { Editor, Toolbar } from '@wangeditor/editor-for-react' |
|
|
|
import axios from 'axios'; |
|
|
|
import cardAPI from "../service"; |
|
|
|
import GateSetUp from './components/gateSetUp'; |
|
|
|
import SetGateFood from './components/setGateFood'; |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
@@ -15,392 +17,427 @@ import cardAPI from "../service"; |
|
|
|
* @returns |
|
|
|
*/ |
|
|
|
const Gate = () => { |
|
|
|
const actionRef = useRef(); |
|
|
|
const [modalForm] = Form.useForm(); |
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false); |
|
|
|
const [currentOption, setCurrentOption] = useState({ id: '' }); |
|
|
|
const [storeList, setStoreList] = useState([]); |
|
|
|
const [selectedStore, setSelectedStore] = useState(''); |
|
|
|
const [current, setCurrent] = useState(1); |
|
|
|
const [pageSize, setPageSize] = useState(10); |
|
|
|
const actionRef = useRef(); |
|
|
|
const [modalForm] = Form.useForm(); |
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false); |
|
|
|
const [currentOption, setCurrentOption] = useState({ id: '' }); |
|
|
|
const [GateSetUpIsVisible, GateSetUpVisible] = useState(false); |
|
|
|
const [SetGateFoodIsVisible, setGateFoodVisible] = useState(false); |
|
|
|
const [storeList, setStoreList] = useState([]); |
|
|
|
const [selectedStore, setSelectedStore] = useState(''); |
|
|
|
const [current, setCurrent] = useState(1); |
|
|
|
const [pageSize, setPageSize] = useState(10); |
|
|
|
|
|
|
|
// editor 实例 |
|
|
|
const [editor, setEditor] = useState(null); |
|
|
|
// 编辑器内容 |
|
|
|
const [html, setHtml] = useState(''); |
|
|
|
// 工具栏配置 |
|
|
|
const toolbarConfig = {}; |
|
|
|
// 编辑器配置 |
|
|
|
const editorConfig = { |
|
|
|
placeholder: '请输入大屏横幅...', |
|
|
|
MENU_CONF: { |
|
|
|
fontSize: { |
|
|
|
fontSizeList: [ |
|
|
|
'10px', '20px', '40px', '60px', '80px', '100px', '150px', '180px', '200px', |
|
|
|
] |
|
|
|
}, |
|
|
|
uploadImage: { |
|
|
|
async customUpload(file, insertFn) { |
|
|
|
// file 即选中的文件 |
|
|
|
// 自己实现上传,并得到图片 url alt href |
|
|
|
//覆盖action 上传之前获取上传地址 |
|
|
|
let index = file.name.lastIndexOf("."); |
|
|
|
let ext = file.name.substr(index + 1); |
|
|
|
let fileData = null; |
|
|
|
cardAPI.GetCosRequestURL({ directory: "kitchen", fileExtension: ext, method: "PUT" }).then((r) => { |
|
|
|
const action = r.allUrl; |
|
|
|
const reader = new FileReader(); |
|
|
|
reader.readAsArrayBuffer(file); |
|
|
|
reader.onload = (e) => { |
|
|
|
fileData = e.target.result; |
|
|
|
axios.put(action, fileData).then(response => { |
|
|
|
if (response.status == 200 || response.statusText == 'OK') { |
|
|
|
// 最后插入图片 |
|
|
|
insertFn(r.seeUrl, r.seeUrl, r.seeUrl); |
|
|
|
message.success('上传成功!'); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
}); |
|
|
|
// editor 实例 |
|
|
|
const [editor, setEditor] = useState(null); |
|
|
|
// 编辑器内容 |
|
|
|
const [html, setHtml] = useState(''); |
|
|
|
// 工具栏配置 |
|
|
|
const toolbarConfig = {}; |
|
|
|
// 编辑器配置 |
|
|
|
const editorConfig = { |
|
|
|
placeholder: '请输入大屏横幅...', |
|
|
|
MENU_CONF: { |
|
|
|
fontSize: { |
|
|
|
fontSizeList: [ |
|
|
|
'10px', '20px', '40px', '60px', '80px', '100px', '150px', '180px', '200px', |
|
|
|
] |
|
|
|
}, |
|
|
|
uploadImage: { |
|
|
|
async customUpload(file, insertFn) { |
|
|
|
// file 即选中的文件 |
|
|
|
// 自己实现上传,并得到图片 url alt href |
|
|
|
//覆盖action 上传之前获取上传地址 |
|
|
|
let index = file.name.lastIndexOf("."); |
|
|
|
let ext = file.name.substr(index + 1); |
|
|
|
let fileData = null; |
|
|
|
cardAPI.GetCosRequestURL({ directory: "kitchen", fileExtension: ext, method: "PUT" }).then((r) => { |
|
|
|
const action = r.allUrl; |
|
|
|
const reader = new FileReader(); |
|
|
|
reader.readAsArrayBuffer(file); |
|
|
|
reader.onload = (e) => { |
|
|
|
fileData = e.target.result; |
|
|
|
axios.put(action, fileData).then(response => { |
|
|
|
if (response.status == 200 || response.statusText == 'OK') { |
|
|
|
// 最后插入图片 |
|
|
|
insertFn(r.seeUrl, r.seeUrl, r.seeUrl); |
|
|
|
message.success('上传成功!'); |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 及时销毁 editor ,重要! |
|
|
|
useEffect(() => { |
|
|
|
return () => { |
|
|
|
if (editor == null) return |
|
|
|
editor.destroy() |
|
|
|
setEditor(null) |
|
|
|
} |
|
|
|
}, [editor]) |
|
|
|
// 及时销毁 editor ,重要! |
|
|
|
useEffect(() => { |
|
|
|
return () => { |
|
|
|
if (editor == null) return |
|
|
|
editor.destroy() |
|
|
|
setEditor(null) |
|
|
|
} |
|
|
|
}, [editor]) |
|
|
|
|
|
|
|
/** |
|
|
|
* 点击编辑按钮 |
|
|
|
* @param {*} record |
|
|
|
*/ |
|
|
|
const onEditTableRow = (record) => { |
|
|
|
setCurrentOption(record); |
|
|
|
setIsModalOpen(true); |
|
|
|
setHtml(record.remaek); |
|
|
|
modalForm.setFieldsValue(record); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 点击编辑按钮 |
|
|
|
* @param {*} record |
|
|
|
*/ |
|
|
|
const onEditTableRow = (record) => { |
|
|
|
setCurrentOption(record); |
|
|
|
setIsModalOpen(true); |
|
|
|
setHtml(record.remaek); |
|
|
|
modalForm.setFieldsValue(record); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 设置界面显示 |
|
|
|
* @param {*} record |
|
|
|
*/ |
|
|
|
const onGateSet = (record) => { |
|
|
|
setCurrentOption(record); |
|
|
|
GateSetUpVisible(true); |
|
|
|
} |
|
|
|
const setGateFood = (record) => { |
|
|
|
setCurrentOption(record); |
|
|
|
setGateFoodVisible(true); |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
* 点击新建 |
|
|
|
*/ |
|
|
|
const onCreateTableRow = () => { |
|
|
|
setIsModalOpen(true); |
|
|
|
editor.setHtml(''); |
|
|
|
setHtml(''); |
|
|
|
modalForm.resetFields(); |
|
|
|
} |
|
|
|
/** |
|
|
|
* 点击新建 |
|
|
|
*/ |
|
|
|
const onCreateTableRow = () => { |
|
|
|
setIsModalOpen(true); |
|
|
|
if (editor) { |
|
|
|
editor.setHtml(''); |
|
|
|
} |
|
|
|
setHtml(''); |
|
|
|
modalForm.resetFields(); |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
* 提交表单 |
|
|
|
*/ |
|
|
|
const onFinish = async (values) => { |
|
|
|
if (values.id) { |
|
|
|
values.remaek = html; |
|
|
|
const response = await cardAPI.UpdateGateInfo(values); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
message.success('更新档口成功!'); |
|
|
|
setIsModalOpen(false); |
|
|
|
actionRef.current.reload(); |
|
|
|
} else { |
|
|
|
message.error(response.errors || '更新档口失败'); |
|
|
|
} |
|
|
|
} else { |
|
|
|
values.remaek = html; |
|
|
|
const response = await cardAPI.AddGate(values); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
message.success('新增档口成功!'); |
|
|
|
setIsModalOpen(false); |
|
|
|
actionRef.current.reload(); |
|
|
|
} else { |
|
|
|
message.error(response.errors || '新增档口失败'); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
* 提交表单 |
|
|
|
*/ |
|
|
|
const onFinish = async (values) => { |
|
|
|
if (values.id) { |
|
|
|
values.remaek = html; |
|
|
|
const response = await cardAPI.UpdateGateInfo(values); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
message.success('更新档口成功!'); |
|
|
|
setIsModalOpen(false); |
|
|
|
actionRef.current.reload(); |
|
|
|
} else { |
|
|
|
message.error(response.errors || '更新档口失败'); |
|
|
|
} |
|
|
|
} else { |
|
|
|
values.remaek = html; |
|
|
|
const response = await cardAPI.AddGate(values); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
message.success('新增档口成功!'); |
|
|
|
setIsModalOpen(false); |
|
|
|
actionRef.current.reload(); |
|
|
|
} else { |
|
|
|
message.error(response.errors || '新增档口失败'); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: '档口名称', |
|
|
|
dataIndex: 'name', |
|
|
|
ellipsis: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '归属门店', |
|
|
|
dataIndex: 'storeId', |
|
|
|
render: (_, record) => { |
|
|
|
const find = storeList.find(item => item.id === record.storeId); |
|
|
|
if (find) { |
|
|
|
return <div>{find.store_Name}</div> |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '属性', |
|
|
|
dataIndex: 'mode', |
|
|
|
valueType: 'select', |
|
|
|
valueEnum: { |
|
|
|
1: { |
|
|
|
text: '固定', |
|
|
|
status: 'Success', |
|
|
|
}, |
|
|
|
2: { |
|
|
|
text: '自由设定', |
|
|
|
status: 'Success', |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '金额', |
|
|
|
dataIndex: 'price', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '状态', |
|
|
|
dataIndex: 'status', |
|
|
|
valueType: 'select', |
|
|
|
valueEnum: { |
|
|
|
0: { |
|
|
|
text: '正常', |
|
|
|
status: 'Success', |
|
|
|
}, |
|
|
|
1: { |
|
|
|
text: '禁用', |
|
|
|
status: 'Error', |
|
|
|
}, |
|
|
|
2: { |
|
|
|
text: '删除', |
|
|
|
status: 'Error', |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
valueType: 'option', |
|
|
|
key: 'option', |
|
|
|
render: (text, record, _, action) => [ |
|
|
|
<a onClick={() => onEditTableRow(record)}>更新</a> |
|
|
|
], |
|
|
|
}, |
|
|
|
]; |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: '档口名称', |
|
|
|
dataIndex: 'name', |
|
|
|
ellipsis: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '归属门店', |
|
|
|
dataIndex: 'storeId', |
|
|
|
render: (_, record) => { |
|
|
|
const find = storeList.find(item => item.id === record.storeId); |
|
|
|
if (find) { |
|
|
|
return <div>{find.store_Name}</div> |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '属性', |
|
|
|
dataIndex: 'mode', |
|
|
|
valueType: 'select', |
|
|
|
valueEnum: { |
|
|
|
1: { |
|
|
|
text: '固定', |
|
|
|
status: 'Success', |
|
|
|
}, |
|
|
|
2: { |
|
|
|
text: '自由设定', |
|
|
|
status: 'Success', |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '金额', |
|
|
|
dataIndex: 'price', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '状态', |
|
|
|
dataIndex: 'status', |
|
|
|
valueType: 'select', |
|
|
|
valueEnum: { |
|
|
|
0: { |
|
|
|
text: '正常', |
|
|
|
status: 'Success', |
|
|
|
}, |
|
|
|
1: { |
|
|
|
text: '禁用', |
|
|
|
status: 'Error', |
|
|
|
}, |
|
|
|
2: { |
|
|
|
text: '删除', |
|
|
|
status: 'Error', |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
valueType: 'option', |
|
|
|
key: 'option', |
|
|
|
render: (text, record, _, action) => [ |
|
|
|
<a onClick={() => onEditTableRow(record)}>更新</a>, |
|
|
|
<a onClick={() => setGateFood(record)}>设置菜品</a>, |
|
|
|
<a onClick={() => onGateSet(record)}>设置屏幕显示</a> |
|
|
|
], |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|
/** |
|
|
|
* 获取店铺列表 |
|
|
|
*/ |
|
|
|
const onFetchStoreList = async () => { |
|
|
|
const response = await cardAPI.GetAllStore(); |
|
|
|
if (response.isSuccess) { |
|
|
|
setStoreList(response.data); |
|
|
|
setSelectedStore(response.data[0].id); |
|
|
|
actionRef.current.reload(); |
|
|
|
} else { |
|
|
|
message.error(response.msg || '获取店铺列表失败'); |
|
|
|
} |
|
|
|
} |
|
|
|
/** |
|
|
|
* 获取店铺列表 |
|
|
|
*/ |
|
|
|
const onFetchStoreList = async () => { |
|
|
|
const response = await cardAPI.GetAllStore(); |
|
|
|
if (response.isSuccess) { |
|
|
|
setStoreList(response.data); |
|
|
|
setSelectedStore(response.data[0].id); |
|
|
|
actionRef.current.reload(); |
|
|
|
} else { |
|
|
|
message.error(response.msg || '获取店铺列表失败'); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
onFetchStoreList(); |
|
|
|
}, []); |
|
|
|
useEffect(() => { |
|
|
|
onFetchStoreList(); |
|
|
|
}, []); |
|
|
|
|
|
|
|
return ( |
|
|
|
<PageContainer> |
|
|
|
<div className={styles.member_card_container}> |
|
|
|
<ProTable |
|
|
|
columns={columns} |
|
|
|
actionRef={actionRef} |
|
|
|
request={ |
|
|
|
async () => { |
|
|
|
if (selectedStore) { |
|
|
|
const response = await cardAPI.GetGateListByStorePage(selectedStore, current, pageSize); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
return { |
|
|
|
data: response.data.data, |
|
|
|
success: true, |
|
|
|
total: response.data.total |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
cardBordered |
|
|
|
editable={{ |
|
|
|
type: 'multiple', |
|
|
|
}} |
|
|
|
rowKey="id" |
|
|
|
search={false} |
|
|
|
options={{ |
|
|
|
setting: { |
|
|
|
listsHeight: 400, |
|
|
|
}, |
|
|
|
}} |
|
|
|
pagination={{ |
|
|
|
pageSize: pageSize, |
|
|
|
onChange: (page) => setCurrent(page), |
|
|
|
}} |
|
|
|
dateFormatter="string" |
|
|
|
headerTitle="档口管理" |
|
|
|
toolBarRender={() => [ |
|
|
|
<div className={styles.table_search_item}> |
|
|
|
<div> |
|
|
|
当前门店: |
|
|
|
</div> |
|
|
|
<Select style={{ width: 300 }} value={selectedStore} onChange={(value) => { |
|
|
|
setSelectedStore(value); |
|
|
|
actionRef.current.reload(); |
|
|
|
}}> |
|
|
|
{ |
|
|
|
storeList.map(item => { |
|
|
|
return <Option value={item.id} key={item.id}>{item.store_Name}</Option> |
|
|
|
}) |
|
|
|
} |
|
|
|
</Select> |
|
|
|
</div>, |
|
|
|
<Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}> |
|
|
|
新建 |
|
|
|
</Button> |
|
|
|
]} |
|
|
|
/> |
|
|
|
<Drawer destroyOnClose width='100%' title={currentOption.id ? '编辑档口' : '添加档口'} visible={isModalOpen} onClose={() => setIsModalOpen(false)}> |
|
|
|
<Form |
|
|
|
name="basic" |
|
|
|
onFinish={onFinish} |
|
|
|
form={modalForm} |
|
|
|
labelCol={{ span: 4 }} |
|
|
|
> |
|
|
|
<Form.Item |
|
|
|
label="id" |
|
|
|
name="id" |
|
|
|
hidden={true} |
|
|
|
> |
|
|
|
<Input size="large" /> |
|
|
|
</Form.Item> |
|
|
|
return ( |
|
|
|
<PageContainer> |
|
|
|
<div className={styles.member_card_container}> |
|
|
|
<ProTable |
|
|
|
columns={columns} |
|
|
|
actionRef={actionRef} |
|
|
|
request={ |
|
|
|
async () => { |
|
|
|
if (selectedStore) { |
|
|
|
const response = await cardAPI.GetGateListByStorePage(selectedStore, current, pageSize); |
|
|
|
if (response.statusCode === 200) { |
|
|
|
return { |
|
|
|
data: response.data.data, |
|
|
|
success: true, |
|
|
|
total: response.data.total |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
cardBordered |
|
|
|
editable={{ |
|
|
|
type: 'multiple', |
|
|
|
}} |
|
|
|
rowKey="id" |
|
|
|
search={false} |
|
|
|
options={{ |
|
|
|
setting: { |
|
|
|
listsHeight: 400, |
|
|
|
}, |
|
|
|
}} |
|
|
|
pagination={{ |
|
|
|
pageSize: pageSize, |
|
|
|
onChange: (page) => setCurrent(page), |
|
|
|
}} |
|
|
|
dateFormatter="string" |
|
|
|
headerTitle="档口管理" |
|
|
|
toolBarRender={() => [ |
|
|
|
<div className={styles.table_search_item}> |
|
|
|
<div> |
|
|
|
当前门店: |
|
|
|
</div> |
|
|
|
<Select style={{ width: 300 }} value={selectedStore} onChange={(value) => { |
|
|
|
setSelectedStore(value); |
|
|
|
actionRef.current.reload(); |
|
|
|
}}> |
|
|
|
{ |
|
|
|
storeList.map(item => { |
|
|
|
return <Option value={item.id} key={item.id}>{item.store_Name}</Option> |
|
|
|
}) |
|
|
|
} |
|
|
|
</Select> |
|
|
|
</div>, |
|
|
|
<Button key="button" icon={<PlusOutlined />} type="primary" onClick={onCreateTableRow}> |
|
|
|
新建 |
|
|
|
</Button> |
|
|
|
]} |
|
|
|
/> |
|
|
|
<Drawer destroyOnClose width='100%' title={currentOption.id ? '编辑档口' : '添加档口'} visible={isModalOpen} onClose={() => setIsModalOpen(false)}> |
|
|
|
<Form |
|
|
|
name="basic" |
|
|
|
onFinish={onFinish} |
|
|
|
form={modalForm} |
|
|
|
labelCol={{ span: 4 }} |
|
|
|
> |
|
|
|
<Form.Item |
|
|
|
label="id" |
|
|
|
name="id" |
|
|
|
hidden={true} |
|
|
|
> |
|
|
|
<Input size="large" /> |
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
<Row> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
<Form.Item |
|
|
|
label="档口名称" |
|
|
|
name="name" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入档口名称!', |
|
|
|
}, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Input size="large" /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
<Form.Item |
|
|
|
label="归属门店" |
|
|
|
name="storeId" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入归属门店!', |
|
|
|
}, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Select size="large"> |
|
|
|
{ |
|
|
|
storeList.map(store => { |
|
|
|
return ( |
|
|
|
<Select.Option key={store.id} value={store.id}>{store.store_Name}</Select.Option> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
</Select> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
<Form.Item |
|
|
|
label="属性" |
|
|
|
name="mode" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入选择属性!', |
|
|
|
}, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Select size="large"> |
|
|
|
<Select.Option value={1}>固定金额</Select.Option> |
|
|
|
<Select.Option value={2}>自由设定</Select.Option> |
|
|
|
</Select> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
<Row> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
<Form.Item |
|
|
|
label="档口名称" |
|
|
|
name="name" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入档口名称!', |
|
|
|
}, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Input size="large" /> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
<Form.Item |
|
|
|
label="归属门店" |
|
|
|
name="storeId" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入归属门店!', |
|
|
|
}, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Select size="large"> |
|
|
|
{ |
|
|
|
storeList.map(store => { |
|
|
|
return ( |
|
|
|
<Select.Option key={store.id} value={store.id}>{store.store_Name}</Select.Option> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
</Select> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
<Form.Item |
|
|
|
label="属性" |
|
|
|
name="mode" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入选择属性!', |
|
|
|
}, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Select size="large"> |
|
|
|
<Select.Option value={1}>固定金额</Select.Option> |
|
|
|
<Select.Option value={2}>自由设定</Select.Option> |
|
|
|
</Select> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
|
|
|
|
<Form.Item |
|
|
|
noStyle |
|
|
|
shouldUpdate={(prevValues, currentValues) => |
|
|
|
prevValues.mode !== currentValues.mode |
|
|
|
} > |
|
|
|
{({ getFieldValue }) => |
|
|
|
(getFieldValue('mode') == '1') ? ( |
|
|
|
<Form.Item |
|
|
|
label="金额" |
|
|
|
name="price" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入金额!', |
|
|
|
}, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Input size="large" /> |
|
|
|
</Form.Item> |
|
|
|
<Form.Item |
|
|
|
noStyle |
|
|
|
shouldUpdate={(prevValues, currentValues) => |
|
|
|
prevValues.mode !== currentValues.mode |
|
|
|
} > |
|
|
|
{({ getFieldValue }) => |
|
|
|
(getFieldValue('mode') == '1') ? ( |
|
|
|
<Form.Item |
|
|
|
label="金额" |
|
|
|
name="price" |
|
|
|
rules={[ |
|
|
|
{ |
|
|
|
required: true, |
|
|
|
message: '请输入金额!', |
|
|
|
}, |
|
|
|
]} |
|
|
|
> |
|
|
|
<Input size="large" /> |
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
) : null |
|
|
|
} |
|
|
|
</Form.Item> |
|
|
|
) : null |
|
|
|
} |
|
|
|
</Form.Item> |
|
|
|
|
|
|
|
</Col> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
<Form.Item |
|
|
|
label="状态" |
|
|
|
name="status" |
|
|
|
</Col> |
|
|
|
<Col xs={12} sm={12} md={12} lg={12} xl={12}> |
|
|
|
<Form.Item |
|
|
|
label="状态" |
|
|
|
name="status" |
|
|
|
|
|
|
|
> |
|
|
|
<Select size="large" defaultValue={1}> |
|
|
|
<Option value={0}>正常</Option> |
|
|
|
<Option value={1}>禁用</Option> |
|
|
|
</Select> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<div style={{ border: '1px solid #ccc', zIndex: 100 }}> |
|
|
|
<Toolbar |
|
|
|
editor={editor} |
|
|
|
defaultConfig={toolbarConfig} |
|
|
|
mode="default" |
|
|
|
style={{ borderBottom: '1px solid #ccc' }} |
|
|
|
/> |
|
|
|
<Editor |
|
|
|
defaultConfig={editorConfig} |
|
|
|
value={html} |
|
|
|
onCreated={setEditor} |
|
|
|
onChange={editor => setHtml(editor.getHtml())} |
|
|
|
mode="default" |
|
|
|
style={{ height: '500px', overflowY: 'hidden' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<Form.Item> |
|
|
|
<Button type="primary" htmlType="submit" style={{ marginTop: '10px' }}> |
|
|
|
确定 |
|
|
|
</Button> |
|
|
|
</Form.Item> |
|
|
|
</Form> |
|
|
|
</Drawer> |
|
|
|
</div> |
|
|
|
</PageContainer> |
|
|
|
) |
|
|
|
> |
|
|
|
<Select size="large" defaultValue={1}> |
|
|
|
<Option value={0}>正常</Option> |
|
|
|
<Option value={1}>禁用</Option> |
|
|
|
</Select> |
|
|
|
</Form.Item> |
|
|
|
</Col> |
|
|
|
</Row> |
|
|
|
<div style={{ border: '1px solid #ccc', zIndex: 100 }}> |
|
|
|
<Toolbar |
|
|
|
editor={editor} |
|
|
|
defaultConfig={toolbarConfig} |
|
|
|
mode="default" |
|
|
|
style={{ borderBottom: '1px solid #ccc' }} |
|
|
|
/> |
|
|
|
<Editor |
|
|
|
defaultConfig={editorConfig} |
|
|
|
value={html} |
|
|
|
onCreated={setEditor} |
|
|
|
onChange={editor => setHtml(editor.getHtml())} |
|
|
|
mode="default" |
|
|
|
style={{ height: '500px', overflowY: 'hidden' }} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<Form.Item> |
|
|
|
<Button type="primary" htmlType="submit" style={{ marginTop: '10px' }}> |
|
|
|
确定 |
|
|
|
</Button> |
|
|
|
</Form.Item> |
|
|
|
</Form> |
|
|
|
</Drawer> |
|
|
|
<GateSetUp |
|
|
|
shows={GateSetUpIsVisible} |
|
|
|
values={currentOption} |
|
|
|
actionRef={actionRef} |
|
|
|
onCancel={() => { |
|
|
|
GateSetUpVisible(false); |
|
|
|
}} |
|
|
|
/> |
|
|
|
<SetGateFood |
|
|
|
shows={SetGateFoodIsVisible} |
|
|
|
values={currentOption} |
|
|
|
actionRef={actionRef} |
|
|
|
onCancel={() => { |
|
|
|
setGateFoodVisible(false); |
|
|
|
}} |
|
|
|
/> |
|
|
|
|
|
|
|
</div> |
|
|
|
</PageContainer> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
export default Gate; |