@@ -0,0 +1,147 @@ | |||
import React, { useState,useRef,useEffect } from 'react'; | |||
import { PlusOutlined} from '@ant-design/icons'; | |||
import { Modal, Form, Input, Button, Select,Radio,message,Tag,Divider,Space } from 'antd'; | |||
import { GetByidBomList } from '../services'; | |||
import { | |||
EditableProTable, | |||
ProTable | |||
} from '@ant-design/pro-table'; | |||
const GoodsbomFrom = (props) => { | |||
const { Option, OptGroup } = Select; | |||
const [dataSource, setDataSource] = useState([]); | |||
const [editableKeys, setEditableRowKeys] = useState([]); | |||
const [form] = Form.useForm(); | |||
useEffect(() => { | |||
let soredata=[]; | |||
if(props.BomId){ | |||
GetByidBomList(props.BomId).then((t)=>{ | |||
var data=t.data | |||
if(data.bomEntry.length>0){ | |||
data.bomEntry.map(x=>{ | |||
var item={ | |||
id:x.id, | |||
bomId:x.bomId, | |||
batchingId:x.batchingId, | |||
dosage:x.bomQty | |||
} | |||
console.log("item",item) | |||
soredata.push(item) | |||
}) | |||
} | |||
console.log("soredata",soredata) | |||
if(soredata.length>0){ | |||
setEditableRowKeys(soredata.map((item) => item.id)) | |||
setDataSource(soredata); | |||
} | |||
}) | |||
} | |||
},[props]) | |||
const columns=[ | |||
{ | |||
title: '主键', | |||
dataIndex: 'id', | |||
key: 'id', | |||
hideInTable: true, | |||
hideInSearch: true, | |||
tip: '规则名称是唯一的 key', | |||
}, | |||
{ | |||
title: '配方', | |||
dataIndex: 'bomId', | |||
hideInTable: true, | |||
hideInSearch: true, | |||
}, | |||
{ | |||
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 headleOk=()=>{ | |||
if(dataSource.length==0){ | |||
check=false; | |||
message.error("请选择物料") | |||
}else{ | |||
props.onBomBatchingFinish(dataSource); | |||
//setDataSource([]) | |||
} | |||
} | |||
return ( | |||
<Modal | |||
title={'配方详情'} | |||
width={1040} | |||
visible={props.BomBatchingVisible} | |||
bodyStyle={{ padding: '32px 40px 1px 48px' }} | |||
okText="确认" | |||
cancelText="取消" | |||
onOk={headleOk} | |||
onCancel={() => { | |||
props.onBomBatchingCancel(); | |||
}} | |||
destroyOnClose | |||
> | |||
<EditableProTable | |||
columns={columns} | |||
rowKey="id" | |||
value={dataSource} | |||
onChange={setDataSource} | |||
recordCreatorProps={{ | |||
newRecordType: 'dataSource', | |||
record: () => ({ | |||
id: Date.now(), | |||
bomId:props.BomId | |||
}), | |||
}} | |||
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> | |||
//vessels | |||
); | |||
}; | |||
export default GoodsbomFrom; |
@@ -6,12 +6,11 @@ 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); | |||
} | |||
@@ -69,13 +68,39 @@ const App = (props) => { | |||
} | |||
const headleOk = () => { | |||
props.form.validateFields().then((values) => { | |||
var check = true; | |||
var data = values; | |||
debugger | |||
if (dataSource.length == 0) { | |||
check = false; | |||
message.error("请选择物料") | |||
} else { | |||
data.mate = dataSource.map(x => { return { batchingId: x.batchingId, dosage: x.dosage } }); | |||
} | |||
if (check) { | |||
props.form.resetFields(); | |||
props.onFinish(data); | |||
setDataSource([]) | |||
} | |||
}).catch((info) => { | |||
message.error("请填写必填信息") | |||
}); | |||
} | |||
return ( | |||
<> | |||
<Modal title="Basic Modal" | |||
onCancel={props.onCancel} | |||
open={props.modalVisible} > | |||
<Form layout="horizontal" preserve={false} form={form} > | |||
<Modal title="新增菜谱" | |||
width={600} | |||
onCancel={props.onCancel} | |||
open={props.modalVisible} | |||
okText="确认" | |||
cancelText="取消" | |||
onOk={headleOk}> | |||
<Form layout="horizontal" preserve={false} form={props.form} > | |||
<Form.Item name="bomName" label="配方名称" rules={[{ required: true, message: '配方名称' }]}> | |||
<Input placeholder="请输入配方名称" /> | |||
@@ -0,0 +1,96 @@ | |||
import React, { useState, useEffect, useRef } from 'react'; | |||
import { Modal, Form, Input, Button, Select, Switch, InputNumbe, Divider, Space } from 'antd'; | |||
import { PlusOutlined } from '@ant-design/icons'; | |||
const UpdateBom = (props) => { | |||
const { Option, OptGroup } = Select; | |||
const [typename, settypename] = useState(''); | |||
const inputRef = useRef(null); | |||
const onNameChange = (event) => { | |||
settypename(event.target.value); | |||
} | |||
const addItem = (e) => { | |||
e.preventDefault(); | |||
if (typename == 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); | |||
} | |||
}) | |||
} | |||
} | |||
const headleOk = () => { | |||
props.onUpdateBomSave() | |||
} | |||
return ( | |||
<Modal | |||
title={'编辑'} | |||
width={640} | |||
visible={props.updateModalVisible} | |||
bodyStyle={{ padding: '32px 40px 48px' }} | |||
onCancel={() => { | |||
props.onCancel(); | |||
}} | |||
onOk={headleOk} | |||
destroyOnClose | |||
> | |||
<Form | |||
layout="vertical" | |||
preserve={false} | |||
form={props.form} | |||
// initialValues={props.values} | |||
onFinish={props.onFinish} | |||
> | |||
<Form.Item name="id" hidden={true}> | |||
<Input /> | |||
</Form.Item> | |||
<Form.Item name="name" label="配方名称" > | |||
<Input placeholder="配方名称" /> | |||
</Form.Item> | |||
<Form.Item name="bomTypeList" 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> | |||
</Modal> | |||
); | |||
}; | |||
export default UpdateBom; |
@@ -1,20 +1,31 @@ | |||
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, Form } 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, getproductpage,GetbomTypelist } from './services'; | |||
import { bomPage, getproductpage, GetbomTypelist, AddBom, UpdateBomInfo, UpdateBomBatcing,DelBom } from './services'; | |||
import CreateBom from './components/CreateBom'; | |||
import UpdateBom from './components/UpdateBom'; | |||
import BomBatching from './components/BomBatching' | |||
const GoodsBomsManage = (props) => { | |||
const actionRef = useRef(); | |||
const [modalVisible, setModalVisible] = useState(false); | |||
const [updateModalVisible, setupdateModalVisible] = useState(false); | |||
const [matedata, setMatedata] = useState([]); | |||
const [bomTypeData,setbomTypeData]= useState([]); | |||
const [bomTypeData, setbomTypeData] = useState([]); | |||
const [selectedRowsState, setSelectedRows] = useState([]); | |||
const [BomId, setBomId] = useState(); | |||
const [form] = Form.useForm(); | |||
const [form2] = Form.useForm(); | |||
const [currentRow, setCurrentRow] = useState(); | |||
const [BomBatchingVisible, setBomBatchingVisible] = useState(false); | |||
useEffect(() => { | |||
initGetbomType(); | |||
intBatching();//默认原料 | |||
}, []); | |||
function intBatching() { | |||
@@ -37,8 +48,8 @@ const GoodsBomsManage = (props) => { | |||
}) | |||
} | |||
function initGetbomType(){ | |||
GetbomTypelist().then((r)=>{ | |||
function initGetbomType() { | |||
GetbomTypelist().then((r) => { | |||
var list = []; | |||
if (r.data.length > 0) { | |||
r.data.forEach((item) => { | |||
@@ -47,60 +58,79 @@ const GoodsBomsManage = (props) => { | |||
} | |||
setbomTypeData(list) | |||
}) | |||
} | |||
const columns = [ | |||
{ | |||
title: '主键', | |||
dataIndex: 'id', | |||
key: 'id', | |||
hideInTable: true, | |||
hideInSearch: true, | |||
tip: '规则名称是唯一的 key', | |||
render: (dom, entity) => { | |||
return ( | |||
<a | |||
onClick={() => { | |||
setCurrentRow(entity); | |||
setShowDetail(true); | |||
}} | |||
> | |||
{dom} | |||
</a> | |||
); | |||
}, | |||
}, | |||
{ | |||
title: '配方名称', | |||
key: 'name', | |||
dataIndex: 'name', | |||
valueType: 'textarea', | |||
width: 300, | |||
hideInForm: true, | |||
hideInSearch: false, | |||
}, | |||
{ | |||
title: '配方类型', | |||
dataIndex: 'isMain', | |||
hideInForm: true, | |||
valueEnum: { | |||
false: { | |||
text: '辅料', | |||
status: 'Processing', | |||
}, | |||
true: { | |||
text: '主料', | |||
status: 'Success', | |||
}, | |||
}, | |||
title: '配方分类', | |||
dataIndex: 'bomTypeList', | |||
search: false, | |||
render: (_, record) => ( | |||
<Space> | |||
{ | |||
bomTypeData.filter((x) => { | |||
let findId = record.bomTypeList.find((findItem) => findItem === x.value); | |||
let findBomType = bomTypeData.find((bomItem) => bomItem.value === findId); | |||
return findBomType != null || undefined; | |||
}).map((item) => ( | |||
<Tag color="#87d068" key={item.value}> | |||
{item.text} | |||
</Tag> | |||
))} | |||
</Space> | |||
), | |||
}, | |||
{ | |||
title: '操作', | |||
dataIndex: 'option', | |||
valueType: 'option', | |||
width: 250, | |||
render: (_, record) => [ | |||
<a | |||
key="primary" | |||
key="primary3" | |||
type="primary" | |||
onClick={() => { | |||
setUpdateBomVisible(true); | |||
setBomId(record.bomId) | |||
setCurrentRow(record); | |||
form2.setFieldsValue(record); | |||
setupdateModalVisible(true); | |||
}} | |||
> | |||
更新 | |||
</a>, | |||
<a | |||
key="primary" | |||
key="primary1" | |||
type="primary" | |||
onClick={() => { | |||
setBomBatchingVisible(true); | |||
setBomId(record.bomId) | |||
setBomId(record.id) | |||
}} | |||
> | |||
配方详情 | |||
@@ -108,19 +138,72 @@ const GoodsBomsManage = (props) => { | |||
<Popconfirm | |||
type="primary" | |||
key="primary" | |||
title="确认删除吗?" | |||
title="删除后可能影响商品配方,确认删除吗?" | |||
okText="是" | |||
cancelText="否" | |||
onConfirm={async () => { | |||
const hide = message.loading('正在删除'); | |||
try { | |||
DelBom(record.id); | |||
hide(); | |||
message.success('删除成功,即将刷新'); | |||
actionRef.current.reloadAndRest(); | |||
return true; | |||
} catch (error) { | |||
hide(); | |||
message.error('删除失败,请重试'); | |||
actionRef.current.reloadAndRest(); | |||
return false; | |||
} | |||
}} | |||
onCancel={() => { }} | |||
> | |||
<a href="#">删除</a> | |||
</Popconfirm>, | |||
], | |||
} | |||
] | |||
}, | |||
]; | |||
const onUpdateBomSave = () => { | |||
form2 | |||
.validateFields() | |||
.then((values) => { | |||
console.log(values) | |||
var parm = { id: values.id, name: values.bomName, IsMain: values.bomType == '1' ? true : false, bomTypeIds: values.bomTypeList } | |||
UpdateBomInfo(parm).then((r) => { | |||
if (r.data) { | |||
message.success('修改成功'); | |||
setupdateModalVisible(false); | |||
actionRef.current.reload(); | |||
setBomId('') | |||
} else { | |||
message.error(r.errors || "修改失败"); | |||
} | |||
}) | |||
}) | |||
} | |||
const onBomBatchingCancel = () => { | |||
setBomBatchingVisible(false); | |||
setBomId('') | |||
} | |||
const onBomBatchingFinish = (form) => { | |||
console.log("form", form) | |||
var parm = { bomId: BomId, bomEntry: form }; | |||
UpdateBomBatcing(parm).then((r) => { | |||
if (r.succeeded) { | |||
message.success('修改成功'); | |||
setBomBatchingVisible(false); | |||
actionRef.current.reload(); | |||
setBomId('') | |||
} else { | |||
message.error(r.errors); | |||
} | |||
}) | |||
} | |||
return ( | |||
@@ -167,10 +250,46 @@ const GoodsBomsManage = (props) => { | |||
{/* 新增菜谱 */} | |||
<CreateBom modalVisible={modalVisible} | |||
matedata={matedata} | |||
form={form} | |||
bomTypeData={bomTypeData} | |||
initTypeList={initTypeList} | |||
onCancel={() => { setModalVisible(false); }} | |||
onFinish={async (value) => { | |||
await AddBom(value).then((r) => { | |||
if (r.data) { | |||
message.success("添加成功") | |||
setModalVisible(false); | |||
} else { | |||
message.error("添加失败") | |||
} | |||
actionRef.current.reloadAndRest(); | |||
}) | |||
}} | |||
onCancel={() => { setModalVisible(false); form.resetFields(); }} | |||
/> | |||
{/* 修改菜谱 */} | |||
<UpdateBom | |||
updateModalVisible={updateModalVisible} | |||
onUpdateBomSave={onUpdateBomSave} | |||
values={currentRow || {}} | |||
form={form2} | |||
bomTypeData={bomTypeData} | |||
onFinish={async (value) => { | |||
}} | |||
onCancel={() => { | |||
setupdateModalVisible(false); | |||
setCurrentRow(undefined); | |||
}} | |||
/> | |||
{/* 配方详情 */} | |||
<BomBatching BomBatchingVisible={BomBatchingVisible} | |||
matedata={matedata} | |||
onBomBatchingCancel={onBomBatchingCancel} | |||
BomId={BomId} | |||
onBomBatchingFinish={onBomBatchingFinish} /> | |||
</PageContainer> | |||
); | |||
@@ -7,6 +7,14 @@ export async function bomPage(data) { | |||
data:data, | |||
}); | |||
} | |||
export async function AddBom(data) { | |||
return request(getDataBaseUrl()+'/api/bom/AddBom', { | |||
method: 'POST', | |||
data:data, | |||
}); | |||
} | |||
export async function AddBomType (data) { | |||
return request(getDataBaseUrl()+`/api/bom/addbomtype`, { | |||
@@ -31,3 +39,32 @@ export async function bomPage(data) { | |||
}); | |||
} | |||
export async function GetByidBomList(data) { | |||
return request(getDataBaseUrl()+`/api/bom/getbyidbomlist?bomId=`+data, { | |||
method: 'Get', | |||
}); | |||
} | |||
export async function UpdateBomInfo(data) { | |||
return request(getDataBaseUrl()+`/api/bom/update`, { | |||
method: 'Post', | |||
data: data, | |||
}); | |||
} | |||
export async function UpdateBomBatcing(data) { | |||
return request(getDataBaseUrl()+`/api/bom/updatebombatcing`, { | |||
method: 'Post', | |||
data: data, | |||
}); | |||
} | |||
export async function DelBom (data) { | |||
return request(getDataBaseUrl()+`/api/bom/DelBom?id=${data}`, { | |||
method: 'post', | |||
//data: data, | |||
}); | |||
} | |||
@@ -273,7 +273,7 @@ const handleUpdate = async (fields) => { | |||
onClick={async () => { | |||
await handleRemove(selectedRowsState); | |||
setSelectedRows([]); | |||
actionRef.current?.reloadAndRest?.(); | |||
actionRef.current?.AndRest?.(); | |||
}} | |||
> | |||
删除 | |||
@@ -378,7 +378,7 @@ const GoodsManage = () => { | |||
// cancelText="否" | |||
// onConfirm={() => { | |||
// handleRemove([record.id]); | |||
// actionRef.current?.reloadAndRest(); | |||
// actionRef.current?.AndRest(); | |||
// }} | |||
// onCancel={() => {}} | |||
// > | |||
@@ -444,7 +444,7 @@ const GoodsManage = () => { | |||
onClick={async () => { | |||
await handleRemove(selectedRowsState); | |||
setSelectedRows([]); | |||
actionRef.current?.reloadAndRest?.(); | |||
actionRef.current?.AndRest?.(); | |||
}} | |||
> | |||
删除 | |||