zhaoy 10 months ago
parent
commit
17cf599bb6
4 changed files with 250 additions and 37 deletions
  1. +145
    -0
      src/pages/database/bom/components/CreateBom.jsx
  2. +81
    -37
      src/pages/database/bom/index.jsx
  3. +22
    -0
      src/pages/database/bom/services.js
  4. +2
    -0
      src/pages/database/goods/goodsInfo/components/CreateBom.jsx

+ 145
- 0
src/pages/database/bom/components/CreateBom.jsx View File

@@ -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;

+ 81
- 37
src/pages/database/bom/index.jsx View File

@@ -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>
);
};


+ 22
- 0
src/pages/database/bom/services.js View File

@@ -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 || {}),
});
}


+ 2
- 0
src/pages/database/goods/goodsInfo/components/CreateBom.jsx View File

@@ -214,6 +214,8 @@ const GoodsbomFrom = (props) => {
</Select>
</Form.Item>
</Form>

<span><span style={{color:'red',marginRight: 3}}>*</span>商品属性</span>
{
props.goodsAttriburteData == undefined ? '' :(


Loading…
Cancel
Save