@@ -0,0 +1,145 @@ | |||
import React, { useState, useRef } from 'react'; | |||
import { Button, Modal, Form, Input, Select, Divider, Space, message } from 'antd'; | |||
import { PlusOutlined } from '@ant-design/icons'; | |||
import { EditableProTable } from '@ant-design/pro-table'; | |||
import { AddBomType } from '../services'; | |||
const App = (props) => { | |||
const [form] = Form.useForm(); | |||
const inputRef = useRef(null); | |||
const [typename, settypename] = useState(''); | |||
const [dataSource, setDataSource] = useState([]); | |||
const [editableKeys, setEditableRowKeys] = useState([]); | |||
const onNameChange = (event) => { | |||
settypename(event.target.value); | |||
} | |||
const columns = [ | |||
{ | |||
title: '物料名称', | |||
dataIndex: 'batchingId', | |||
formItemProps: (form, { rowIndex }) => { | |||
return { | |||
rules: | |||
rowIndex > 1 ? [{ required: true, message: '此项为必填项' }] : [], | |||
}; | |||
}, | |||
valueType: 'select', | |||
fieldProps: { | |||
showSearch: true, | |||
options: props.matedata.map((item, index) => { return { label: item.name, value: item.id } }) | |||
}, | |||
width: '25%', | |||
}, | |||
{ | |||
title: '用量', | |||
dataIndex: 'dosage', | |||
valueType: 'digit', | |||
width: '15%', | |||
}, | |||
{ | |||
title: '操作', | |||
valueType: 'option', | |||
width: '15%', | |||
render: () => { | |||
return null; | |||
}, | |||
}, | |||
] | |||
const addItem = (e) => { | |||
e.preventDefault(); | |||
if (typename.length == 0) { | |||
message.error("请输入名称"); | |||
} else { | |||
var parm = { name: typename } | |||
AddBomType(parm).then((r) => { | |||
if (r.succeeded) { | |||
message.success('添加成功'); | |||
props.initTypeList(); | |||
settypename(''); | |||
} else { | |||
message.error(r.errors); | |||
} | |||
}) | |||
} | |||
} | |||
return ( | |||
<> | |||
<Modal title="Basic Modal" | |||
onCancel={props.onCancel} | |||
open={props.modalVisible} > | |||
<Form layout="horizontal" preserve={false} form={form} > | |||
<Form.Item name="bomName" label="配方名称" rules={[{ required: true, message: '配方名称' }]}> | |||
<Input placeholder="请输入配方名称" /> | |||
</Form.Item> | |||
<Form.Item name="bomTypeList" rules={[{ required: true, message: '配方分类' }]} label="配方分类" > | |||
<Select | |||
style={{ width: '100%' }} | |||
mode="tags" | |||
placeholder="请选配方分类" | |||
options={props.bomTypeData} | |||
dropdownRender={(menu) => ( | |||
<> | |||
{menu} | |||
<Divider style={{ margin: '8px 0' }} /> | |||
<Space style={{ padding: '0 8px 4px' }}> | |||
<Input | |||
placeholder="请输入配方分类" | |||
ref={inputRef} | |||
value={typename} | |||
onChange={onNameChange} | |||
onKeyDown={(e) => e.stopPropagation()} | |||
/> | |||
<Button type="text" icon={<PlusOutlined />} onClick={addItem}> | |||
新增 | |||
</Button> | |||
</Space> | |||
</> | |||
)} | |||
/> | |||
</Form.Item> | |||
</Form> | |||
<EditableProTable | |||
headerTitle={<span><span style={{ color: 'red', marginRight: 3 }}>*</span>配方详情</span>} | |||
columns={columns} | |||
rowKey="id" | |||
value={dataSource} | |||
onChange={setDataSource} | |||
recordCreatorProps={{ | |||
newRecordType: 'dataSource', | |||
record: () => ({ | |||
id: Date.now(), | |||
}), | |||
}} | |||
editable={{ | |||
type: 'multiple', | |||
editableKeys, | |||
actionRender: (row, config, defaultDoms) => { | |||
return [defaultDoms.delete, defaultDoms.Button]; | |||
}, | |||
onValuesChange: (record, recordList) => { | |||
setDataSource(recordList); | |||
}, | |||
onDelete: async (key, row) => { | |||
console.log(key) | |||
console.log(row) | |||
}, | |||
onChange: setEditableRowKeys, | |||
}} /> | |||
</Modal> | |||
</> | |||
); | |||
}; | |||
export default App; |
@@ -1,18 +1,54 @@ | |||
import { PlusOutlined } from '@ant-design/icons'; | |||
import { Button, message, Input, Drawer, Modal, Space, Tag,Popconfirm } from 'antd'; | |||
import { Button, message, Input, Drawer, Modal, Space, Tag, Popconfirm } from 'antd'; | |||
import React, { useState, useRef, useEffect } from 'react'; | |||
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout'; | |||
import ProTable from '@ant-design/pro-table'; | |||
import {bomPage} from './services'; | |||
import { bomPage, getproductpage,GetbomTypelist } from './services'; | |||
import CreateBom from './components/CreateBom'; | |||
const GoodsBomsManage = (props) => { | |||
const actionRef = useRef(); | |||
const [modalVisible, setModalVisible] = useState(false); | |||
const [matedata, setMatedata] = useState([]); | |||
const [bomTypeData,setbomTypeData]= useState([]); | |||
useEffect(() => { | |||
intBatching();//默认原料 | |||
}, []); | |||
function intBatching() { | |||
getproductpage().then((r) => { | |||
setMatedata(r.data); | |||
}); | |||
} | |||
function initTypeList() { | |||
initGetbomType(); | |||
} | |||
function initGetbomType() { | |||
GetbomTypelist().then((r) => { | |||
var list = []; | |||
if (r.data.length > 0) { | |||
r.data.forEach((item) => { | |||
list.push({ text: item.name, value: item.id, label: item.name }); | |||
}); | |||
} | |||
setbomTypeData(list) | |||
}) | |||
} | |||
function initGetbomType(){ | |||
GetbomTypelist().then((r)=>{ | |||
var list = []; | |||
if (r.data.length > 0) { | |||
r.data.forEach((item) => { | |||
list.push({ text: item.name, value: item.id, label: item.name }); | |||
}); | |||
} | |||
setbomTypeData(list) | |||
}) | |||
} | |||
const columns = [ | |||
{ | |||
@@ -76,7 +112,7 @@ const GoodsBomsManage = (props) => { | |||
okText="是" | |||
cancelText="否" | |||
onConfirm={async () => { | |||
}} | |||
onCancel={() => { }} | |||
> | |||
@@ -92,42 +128,50 @@ const GoodsBomsManage = (props) => { | |||
title: '', | |||
breadcrumb: {}, | |||
}}> | |||
<ProTable | |||
columns={columns} | |||
actionRef={actionRef} | |||
rowKey="id" | |||
toolBarRender={() => [ | |||
<Button | |||
type="primary" | |||
key="primary" | |||
onClick={() => { | |||
setModalVisible(true); | |||
}} | |||
> | |||
<PlusOutlined /> 新建 | |||
</Button>, | |||
]} | |||
<ProTable | |||
columns={columns} | |||
actionRef={actionRef} | |||
rowKey="id" | |||
toolBarRender={() => [ | |||
<Button | |||
type="primary" | |||
key="primary" | |||
onClick={() => { | |||
setModalVisible(true); | |||
}} | |||
> | |||
<PlusOutlined /> 新建 | |||
</Button>, | |||
]} | |||
request={async (params) => { | |||
var total = 0; | |||
var data = []; | |||
const res = await bomPage(params); | |||
if (res.statusCode == 200) { | |||
data = res.data.data; | |||
total = res.data.total; | |||
} | |||
return { | |||
data: data, | |||
success: true, | |||
total: total, | |||
}; | |||
}} | |||
rowSelection={{ | |||
onChange: (_, selectedRows) => setSelectedRows(selectedRows), | |||
}} | |||
/> | |||
{/* 新增菜谱 */} | |||
<CreateBom modalVisible={modalVisible} | |||
matedata={matedata} | |||
initTypeList={initTypeList} | |||
onCancel={() => { setModalVisible(false); }} | |||
/> | |||
request={async (params) => { | |||
var total = 0; | |||
var data=[]; | |||
const res = await bomPage(params); | |||
if(res.statusCode==200){ | |||
data=res.data.data; | |||
total=res.data.total; | |||
} | |||
return { | |||
data: data, | |||
success: true, | |||
total: total, | |||
}; | |||
}} | |||
rowSelection={{ | |||
onChange: (_, selectedRows) => setSelectedRows(selectedRows), | |||
}} | |||
/> | |||
</PageContainer> | |||
); | |||
}; | |||
@@ -8,4 +8,26 @@ export async function bomPage(data) { | |||
}); | |||
} | |||
export async function AddBomType (data) { | |||
return request(getDataBaseUrl()+`/api/bom/addbomtype`, { | |||
method: 'Post', | |||
data: data, | |||
// params: { ...params }, | |||
// ...(options || {}), | |||
}); | |||
} | |||
export async function getproductpage(params) { | |||
return request(getDataBaseUrl()+'/api/batching/getbatchingselectlist', { | |||
method: 'Get', | |||
}); | |||
} | |||
export async function GetbomTypelist (data) { | |||
return request(getDataBaseUrl()+`/api/bom/getbomtypelist`, { | |||
method: 'Get', | |||
// params: { ...params }, | |||
// ...(options || {}), | |||
}); | |||
} | |||
@@ -214,6 +214,8 @@ const GoodsbomFrom = (props) => { | |||
</Select> | |||
</Form.Item> | |||
</Form> | |||
<span><span style={{color:'red',marginRight: 3}}>*</span>商品属性</span> | |||
{ | |||
props.goodsAttriburteData == undefined ? '' :( | |||