@@ -24,11 +24,11 @@ | |||
{ | |||
path: '/base', icon: 'SettingOutlined', name: '工厂数据管理', | |||
routes: [ | |||
// { path: '/base/stock', name: '料仓管理', component: './stock/index' }, | |||
// { path: '/base/dict', name: '码表管理', component: './dict/index' }, | |||
{ path: '/base/process', name: '工艺流程', component: './plantModel/process' }, | |||
{ path: '/base/materials', name: '原料管理', component: './materials/index' }, | |||
{ path: '/base/final', name: '成品管理', component: './final/index' }, | |||
{ path: '/base/manufacturing', name: '产线管理', component: './manufacturing/index' }, | |||
// { path: '/base/dict', name: '数据字典', component: './dict/index' }, | |||
{ path: '/base/line', name: '产线管理', component: './productLine/line' }, | |||
] | |||
}, | |||
@@ -51,6 +51,7 @@ | |||
"@ant-design/charts": "^1.4.2", | |||
"@ant-design/icons": "^4.8.0", | |||
"@ant-design/pro-components": "^2.3.44", | |||
"@ant-design/pro-flow": "^1.3.11", | |||
"@ant-design/pro-layout": "^7.8.3", | |||
"@ant-design/use-emotion-css": "1.0.4", | |||
"@jiaminghi/data-view-react": "^1.2.5", | |||
@@ -68,8 +69,10 @@ | |||
"react": "^18.2.0", | |||
"react-dev-inspector": "^1.8.3", | |||
"react-dom": "^18.2.0", | |||
"react-flow-editor": "^0.6.1", | |||
"react-flow-renderer": "^10.3.17", | |||
"react-helmet-async": "^1.3.0", | |||
"uuid": "^9.0.0" | |||
"uuid": "^10.0.0" | |||
}, | |||
"devDependencies": { | |||
"@ant-design/pro-cli": "^2.1.5", | |||
@@ -0,0 +1,71 @@ | |||
declare namespace processType { | |||
/** | |||
* 基类 | |||
*/ | |||
type base_dto = { | |||
/** | |||
* 编码 | |||
*/ | |||
name?: null | string; | |||
/** | |||
* 描述 | |||
*/ | |||
processType?: null | string; | |||
/** | |||
* 名称 | |||
*/ | |||
des?: null | string; | |||
/** | |||
* 创建时间 | |||
*/ | |||
createTime:Date | |||
} | |||
/** | |||
* 增加输入参数 | |||
*/ | |||
type addInput = base_dto | |||
/** | |||
* 更新输入参数 | |||
*/ | |||
interface updateInput extends base_dto { | |||
/** | |||
* 主键 | |||
*/ | |||
id: string | |||
} | |||
/** | |||
* 删除输入参数 | |||
*/ | |||
interface delInput { | |||
/** | |||
* 主键 | |||
*/ | |||
id: string | |||
} | |||
/** | |||
* 查询输入参数 | |||
*/ | |||
interface queryParms { | |||
/** | |||
* 名称 | |||
*/ | |||
name?: null | string; | |||
} | |||
/** | |||
* 查询分页输入参数 | |||
*/ | |||
interface queryPage { | |||
pageIndex: number, | |||
pageSize: number, | |||
name:string | |||
} | |||
/** | |||
* 查询输出参数 | |||
*/ | |||
interface output extends base_dto { | |||
/** | |||
* 主键 | |||
*/ | |||
id: string | |||
} | |||
} |
@@ -0,0 +1,90 @@ | |||
import { request } from '@umijs/max'; | |||
export default { | |||
/** | |||
* 新增 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Add(parms: processType.addInput) { | |||
return request('/api/process/add', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 删除 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Del(parms: processType.delInput) { | |||
return request(`/api/process/del`, { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 修改 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Update(parms: processType.updateInput) { | |||
return request('/api/process/update', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 详情 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Detail(id: string) { | |||
return request(`/api/process/detail?id=${id}`, { | |||
method: 'GET' | |||
}); | |||
}, | |||
/** | |||
* 获取列表 | |||
* @param parms | |||
* @returns | |||
*/ | |||
List(parms: processType.queryParms) { | |||
return request('/api/process/list', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 分页查询 | |||
* @param parms | |||
* @returns | |||
*/ | |||
PagedList(parms: processType.queryPage) { | |||
return request('/api/process/pagedlist', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
// 下拉 | |||
Selectlist() { | |||
return request('/api/process/selectlist', { | |||
method: 'GET' | |||
} | |||
) | |||
} | |||
} | |||
@@ -0,0 +1,71 @@ | |||
declare namespace productlineInfoTypes { | |||
/** | |||
* 基类 | |||
*/ | |||
type base_dto = { | |||
/** | |||
* 描述 | |||
*/ | |||
describe: string | undefined | |||
/** | |||
* 产线名称 | |||
*/ | |||
name: string, | |||
/** | |||
* 增加输入参数 | |||
*/ | |||
id: string, | |||
/** | |||
* 时间 | |||
*/ | |||
createTime:Date | |||
} | |||
/** | |||
* 增加输入参数 | |||
*/ | |||
type addInput = base_dto | |||
/** | |||
* 更新输入参数 | |||
*/ | |||
interface updateInput extends base_dto { | |||
/** | |||
* 主键 | |||
*/ | |||
id: string | |||
} | |||
/** | |||
* 删除输入参数 | |||
*/ | |||
interface delInput { | |||
/** | |||
* 主键 | |||
*/ | |||
id: string | |||
} | |||
/** | |||
* 查询输入参数 | |||
*/ | |||
interface queryParms { | |||
/** | |||
* 名称 | |||
*/ | |||
name?: null | string; | |||
} | |||
/** | |||
* 查询分页输入参数 | |||
*/ | |||
interface queryPage { | |||
pageIndex: number, | |||
pageSize: number, | |||
name:string | |||
} | |||
/** | |||
* 查询输出参数 | |||
*/ | |||
interface output extends base_dto { | |||
/** | |||
* 主键 | |||
*/ | |||
id: string | |||
} | |||
} |
@@ -0,0 +1,82 @@ | |||
import { request } from '@umijs/max'; | |||
export default { | |||
/** | |||
* 新增 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Add(parms: productlineInfoTypes.addInput) { | |||
return request('/api/productline/add', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 删除 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Del(parms: productlineInfoTypes.delInput) { | |||
return request(`/api/productline/del`, { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 修改 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Update(parms: productlineInfoTypes.updateInput) { | |||
return request('/api/productline/update', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 详情 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Detail(id: string) { | |||
return request(`/api/productline/detail?id=${id}`, { | |||
method: 'GET' | |||
}); | |||
}, | |||
/** | |||
* 获取列表 | |||
* @param parms | |||
* @returns | |||
*/ | |||
List(parms: productlineInfoTypes.queryParms) { | |||
return request('/api/productline/list', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 分页查询 | |||
* @param parms | |||
* @returns | |||
*/ | |||
PagedList(parms: productlineInfoTypes.queryPage) { | |||
return request('/api/productline/pagedlist', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
} | |||
} | |||
@@ -3,7 +3,7 @@ import { request } from '@umijs/max'; | |||
export default { | |||
//创建产线 | |||
Add(parms: ProductlineTypes.Info) { | |||
Add(parms: productlineInfoTypes.addInput) { | |||
return request('/api/productline/add', { | |||
method: 'POST', | |||
data: { | |||
@@ -12,7 +12,7 @@ export default { | |||
}); | |||
}, | |||
//删除 | |||
Del(parms: ProductlineTypes.Info) { | |||
Del(parms: productlineInfoTypes.delInput) { | |||
return request(`/api/productline/del`, { | |||
method: 'POST', | |||
data: { | |||
@@ -21,7 +21,7 @@ export default { | |||
}); | |||
}, | |||
//修改 | |||
Update(parms: ProductlineTypes.Info) { | |||
Update(parms: productlineInfoTypes.updateInput) { | |||
return request('/api/productline/update', { | |||
method: 'POST', | |||
data: { | |||
@@ -40,7 +40,7 @@ export default { | |||
* @param parms | |||
* @returns | |||
*/ | |||
PagedList(parms: ProductlineTypes.Page) { | |||
PagedList(parms: productlineInfoTypes.output) { | |||
return request('/api/productline/pagedlist', { | |||
method: 'POST', | |||
data: { | |||
@@ -55,70 +55,70 @@ export default { | |||
}); | |||
}, | |||
// 产线添加设备 | |||
adddevice(parms: ProductlineTypes.Productlinedevice) { | |||
return request('/api/productline/adddevice', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
} | |||
}) | |||
}, | |||
// 产线添加料仓 | |||
addstock(parms: ProductlineTypes.Productlinestock) { | |||
return request('/api/productline/addstock', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
} | |||
}) | |||
}, | |||
// 产线设备分页 | |||
devicepagelist(parms: ProductlineTypes.Productionlinepaging) { | |||
return request('/api/productline/devicepagelist', { | |||
method: 'POST', | |||
data: { | |||
...parms | |||
} | |||
}) | |||
}, | |||
// 产线设备列表 | |||
devicelist(parms: ProductlineTypes.ProductionlineQuery) { | |||
return request('/api/productline/devicelist', { | |||
method: 'POST', | |||
data: { | |||
...parms | |||
} | |||
}) | |||
}, | |||
// 产线料仓分页 | |||
stockpagelist(parms: ProductlineTypes.Productionlinestockpaging) { | |||
return request('/api/productline/stockpagelist', { | |||
method: 'POST', | |||
data: { | |||
...parms | |||
} | |||
}) | |||
}, | |||
// 产线删除设备 | |||
// // 产线添加设备 | |||
// adddevice(parms: productlineInfoTypes.Productlinedevice) { | |||
// return request('/api/productline/adddevice', { | |||
// method: 'POST', | |||
// data: { | |||
// ...parms, | |||
// } | |||
// }) | |||
// }, | |||
// // 产线添加料仓 | |||
// addstock(parms: productlineInfoTypes.Productlinestock) { | |||
// return request('/api/productline/addstock', { | |||
// method: 'POST', | |||
// data: { | |||
// ...parms, | |||
// } | |||
// }) | |||
// }, | |||
// // 产线设备分页 | |||
// devicepagelist(parms: productlineInfoTypes.Productionlinepaging) { | |||
// return request('/api/productline/devicepagelist', { | |||
// method: 'POST', | |||
// data: { | |||
// ...parms | |||
// } | |||
// }) | |||
// }, | |||
// // 产线设备列表 | |||
// devicelist(parms: productlineInfoTypes.ProductionlineQuery) { | |||
// return request('/api/productline/devicelist', { | |||
// method: 'POST', | |||
// data: { | |||
// ...parms | |||
// } | |||
// }) | |||
// }, | |||
// // 产线料仓分页 | |||
// stockpagelist(parms: productlineInfoTypes.Productionlinestockpaging) { | |||
// return request('/api/productline/stockpagelist', { | |||
// method: 'POST', | |||
// data: { | |||
// ...parms | |||
// } | |||
// }) | |||
// }, | |||
// // 产线删除设备 | |||
deletedevice(parms: ProductlineTypes.Productionlinedeletiondevice) { | |||
return request('/api/productline/deletedevice', { | |||
method: 'POST', | |||
data: { | |||
...parms | |||
} | |||
}) | |||
}, | |||
// 产线删除料仓 | |||
deletestock(parms: ProductlineTypes.Productionlinedeletstock) { | |||
return request('/api/productline/deletestock', { | |||
method: 'POST', | |||
data: { | |||
...parms | |||
} | |||
}) | |||
} | |||
// deletedevice(parms: productlineInfoTypes.Productionlinedeletiondevice) { | |||
// return request('/api/productline/deletedevice', { | |||
// method: 'POST', | |||
// data: { | |||
// ...parms | |||
// } | |||
// }) | |||
// }, | |||
// // 产线删除料仓 | |||
// deletestock(parms: productlineInfoTypes.Productionlinedeletstock) { | |||
// return request('/api/productline/deletestock', { | |||
// method: 'POST', | |||
// data: { | |||
// ...parms | |||
// } | |||
// }) | |||
// } | |||
} | |||
@@ -0,0 +1,75 @@ | |||
declare namespace productlinestepsTypes { | |||
/** | |||
* 基类 | |||
*/ | |||
type base_dto = { | |||
/** | |||
* 步骤 | |||
*/ | |||
step:number | |||
/** | |||
* 工艺流程主键 | |||
*/ | |||
processId: string, | |||
/** | |||
* Id | |||
*/ | |||
id: string, | |||
/** | |||
* 产线Id | |||
*/ | |||
lineId:string, | |||
/** | |||
* 工艺流程名称 | |||
*/ | |||
processName:string | |||
} | |||
/** | |||
* 增加输入参数 | |||
*/ | |||
type addInput = base_dto | |||
/** | |||
* 更新输入参数 | |||
*/ | |||
interface updateInput extends base_dto { | |||
/** | |||
* 主键 | |||
*/ | |||
id: string | |||
} | |||
/** | |||
* 删除输入参数 | |||
*/ | |||
interface delInput { | |||
/** | |||
* 主键 | |||
*/ | |||
id: string | |||
} | |||
/** | |||
* 查询输入参数 | |||
*/ | |||
interface queryParms { | |||
/** | |||
* 名称 | |||
*/ | |||
lineId:string | |||
} | |||
/** | |||
* 查询分页输入参数 | |||
*/ | |||
interface queryPage { | |||
pageIndex: number, | |||
pageSize: number, | |||
lineId:string | |||
} | |||
/** | |||
* 查询输出参数 | |||
*/ | |||
interface output extends base_dto { | |||
/** | |||
* 主键 | |||
*/ | |||
id: string | |||
} | |||
} |
@@ -0,0 +1,90 @@ | |||
import { request } from '@umijs/max'; | |||
export default { | |||
/** | |||
* 新增 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Add(parms: productlinestepsTypes.addInput) { | |||
return request('/api/productlinesteps/add', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 删除 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Del(parms: productlinestepsTypes.delInput) { | |||
return request(`/api/productlinesteps/del`, { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 修改 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Update(parms: productlinestepsTypes.updateInput) { | |||
return request('/api/productlinesteps/update', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 详情 | |||
* @param parms | |||
* @returns | |||
*/ | |||
Detail(id: string) { | |||
return request(`/api/productlinesteps/detail?id=${id}`, { | |||
method: 'GET' | |||
}); | |||
}, | |||
/** | |||
* 获取列表 | |||
* @param parms | |||
* @returns | |||
*/ | |||
List(parms: productlinestepsTypes.queryParms) { | |||
return request('/api/productlinesteps/list', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
/** | |||
* 分页查询 | |||
* @param parms | |||
* @returns | |||
*/ | |||
PagedList(parms: productlinestepsTypes.queryPage) { | |||
return request('/api/productlinesteps/pagedlist', { | |||
method: 'POST', | |||
data: { | |||
...parms, | |||
}, | |||
}); | |||
}, | |||
//根据批量更新步骤 | |||
BatchUpdateStep(parms :productlinestepsTypes.updateInput[]){ | |||
return request('/api/productlinesteps/batchupdate',{ | |||
method: 'POST', | |||
data: parms | |||
}) | |||
}, | |||
} | |||
@@ -425,8 +425,10 @@ const Index = () => { | |||
} | |||
}} | |||
dragSortKey="step" | |||
onDragSortEnd={(newDataSource: any[]) => { | |||
onDragSortEnd={(beforeIndex: number, afterIndex: number,newDataSource: any[]) => { | |||
console.log('newDataSource',newDataSource); | |||
// 模拟将排序后数据发送到服务器的场景 | |||
// remoteData = newDataSource; | |||
// 请求成功之后刷新列表 | |||
@@ -5,8 +5,8 @@ | |||
*/ | |||
import type { ActionType, ProColumns } from '@ant-design/pro-components'; | |||
import { ProTable } from '@ant-design/pro-components'; | |||
import { Button, Modal, Form, Input, message, Popconfirm, Tag, DatePicker as TDatePicker } from 'antd'; | |||
import { useRef, useState } from 'react'; | |||
import { Button, Modal, Form, Input, message, Popconfirm, Tag, DatePicker as TDatePicker, Select } from 'antd'; | |||
import { useEffect, useRef, useState } from 'react'; | |||
import DeviceInfoAPI from '@/api/DeviceInfo'; | |||
import deviceProductAPI from '@/api/deviceInfo/services/deviceProduct'; | |||
import dayjs from 'dayjs' | |||
@@ -21,6 +21,7 @@ export default () => { | |||
const [modelTitle, setModelTitle] = useState<string>(); | |||
//编辑/新增弹窗 | |||
const [isModalOpen, setIsModalOpen] = useState(false); | |||
const [deviceModelList,setDeviceModelList] = useState<any>([]) | |||
const actionRef = useRef<ActionType>(); | |||
const columns: ProColumns<DeviceTypes.DeviceInfoOutput>[] = [ | |||
{ | |||
@@ -52,13 +53,9 @@ export default () => { | |||
dataIndex: 'deviceType', | |||
ellipsis: true, | |||
hideInSearch: true, | |||
valueType: 'select', | |||
request: async () => { | |||
const b: MyResponse.Content = await deviceProductAPI.SelectList(); | |||
console.log(b); | |||
return b.data; | |||
} | |||
render(dom, entity, index, action, schema) { | |||
return <>{deviceModelList.find((x:any)=>x.key==entity.deviceType)?.value}</> | |||
}, | |||
}, | |||
{ | |||
title: '设备维保日期', | |||
@@ -114,6 +111,15 @@ export default () => { | |||
], | |||
}, | |||
]; | |||
useEffect(()=>{ | |||
deviceProductAPI.SelectList().then((v:MyResponse.Content)=>{ | |||
if (v.statusCode===200) { | |||
setDeviceModelList(v.data) | |||
} | |||
}) | |||
},[]) | |||
/* | |||
*表单提交 | |||
*/ | |||
@@ -239,7 +245,15 @@ export default () => { | |||
<Input /> | |||
</Form.Item> | |||
<Form.Item label="设备类型" name="deviceType" rules={[{ required: true, message: '此项为必填项!' }]} > | |||
<Input /> | |||
<Select placeholder='请选择设备类型' style={{ width: 375 }}> | |||
{ | |||
deviceModelList.map((item: MySelectType.Select) => { | |||
return <Select.Option value={item.key} key={item.key}> | |||
<span>{item.value}</span> | |||
</Select.Option> | |||
}) | |||
} | |||
</Select> | |||
</Form.Item> | |||
{/* name="repairDate" */} | |||
<Form.Item label="设备维保日期" name="repairDate" rules={[{ required: true, message: '此项为必填项!' }]} > | |||
@@ -30,6 +30,8 @@ const final = () => { | |||
// 定义title | |||
// eslint-disable-next-line react-hooks/rules-of-hooks | |||
const [modelTitle, setModelTitle] = useState<string>(); | |||
const [peifangOpen,setPeifangOpen] = useState<boolean>(); | |||
// 定义列表数据 | |||
const columns: ProColumns<FinalTypes.Info>[] = [ | |||
{ | |||
@@ -85,7 +87,18 @@ const final = () => { | |||
> | |||
编辑 | |||
</Button>, | |||
<Button key="peifang" | |||
type="primary" ghost | |||
onClick={async () => { | |||
setPeifangOpen(true); | |||
// const copyFormData = JSON.parse(JSON.stringify(record)); | |||
// copyFormData.state = copyFormData.state === '0'; | |||
// typeForm.setFieldsValue(copyFormData); | |||
}}> | |||
配方设置 | |||
</Button> | |||
, | |||
<Popconfirm | |||
key="del" | |||
title="确定要删除此条数据吗?" | |||
@@ -326,6 +339,31 @@ const final = () => { | |||
</Form.Item> | |||
</Form> | |||
</Modal> | |||
<Modal | |||
maskClosable={false} | |||
key="01" | |||
width={800} | |||
title={'配方设置'} | |||
open={peifangOpen} | |||
onCancel={() => { | |||
setPeifangOpen(false); | |||
}} | |||
footer={[ | |||
<Button | |||
key="back" | |||
onClick={() => { | |||
setPeifangOpen(false); | |||
}} | |||
> | |||
返回 | |||
</Button>, | |||
<Button key="submit" form="finalForm" type="primary" htmlType="submit"> | |||
提交 | |||
</Button>, | |||
]} | |||
> | |||
</Modal> | |||
</> | |||
@@ -0,0 +1,207 @@ | |||
import { PlusOutlined } from '@ant-design/icons'; | |||
import type { | |||
ActionType, | |||
ProColumns, | |||
ProFormInstance, | |||
} from '@ant-design/pro-components'; | |||
import { | |||
ProCard, | |||
ProTable, | |||
} from '@ant-design/pro-components'; | |||
import { Button, message, Popconfirm, Space } from 'antd'; | |||
import { useState, useRef } from 'react'; | |||
//引入接口 | |||
import dayjs from 'dayjs' | |||
import processApi from '@/api/process/service' | |||
export default () => { | |||
const [fromType, setFromType] = useState<any>('table') | |||
const ref = useRef<ProFormInstance>(); | |||
const actionRef = useRef<ActionType>(); | |||
const Reolod = () =>{ | |||
ref.current?.resetFields() | |||
actionRef.current?.reload() | |||
} | |||
const columns: ProColumns<processType.output>[] = [ | |||
{ | |||
title: '主键', | |||
dataIndex: 'id', | |||
width: 160, | |||
hideInForm: true, | |||
hideInSearch:true | |||
}, | |||
{ | |||
title: '名称', | |||
dataIndex: 'name', | |||
ellipsis: true, | |||
width: 120, | |||
formItemProps:{ | |||
rules:[{ required: true, message: '此项为必填项!' }] | |||
} | |||
}, | |||
{ | |||
title: '类型', | |||
hideInDescriptions: true, | |||
dataIndex: 'processType', | |||
width: 120, | |||
search: false, | |||
valueEnum:{ | |||
0: { | |||
text: '人工', | |||
}, | |||
1: { | |||
text: '设备', | |||
}, | |||
}, | |||
formItemProps:{ | |||
rules:[{ required: true, message: '此项为必填项!' }] | |||
} | |||
}, | |||
{ | |||
title: '描述', | |||
dataIndex: 'des', | |||
search: false, | |||
}, | |||
{ | |||
title: '创建时间', | |||
dataIndex: 'createTime', | |||
render: (_, record) => { | |||
return <>{dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")}</> | |||
}, | |||
search: false, | |||
hideInForm:true | |||
}, | |||
{ | |||
title: '操作', | |||
valueType: 'option', | |||
dataIndex: 'id', | |||
render: (text, row) => [ | |||
<Space key={+new Date() + Math.random()}> | |||
<a onClick={() => { | |||
setFromType('form') | |||
ref.current?.setFieldsValue(row) | |||
}} key={+new Date() + Math.random()} target="_blank" rel="noopener noreferrer"> | |||
编辑 | |||
</a> | |||
<Popconfirm | |||
key="del" | |||
title="确定要删除此条数据吗?" | |||
onConfirm={() => { | |||
processApi.Del(row).then((res: MyResponse.Content) => { | |||
if (res.statusCode === 200) { | |||
message.info("删除成功!"); | |||
Reolod() | |||
} else { | |||
message.error(res.errors); | |||
} | |||
}) | |||
}} | |||
onCancel={() => { | |||
message.info('已取消删除'); | |||
}} | |||
okText="确认" | |||
cancelText="关闭" | |||
> | |||
<a> | |||
删除 | |||
</a> | |||
</Popconfirm> | |||
</Space> | |||
], | |||
}, | |||
]; | |||
return ( | |||
<> | |||
{/* {fromType === 'form' ? <Button type='primary' onClick={() =>{ | |||
ref.current?.resetFields(); | |||
setFromType("table")}}>返回</Button> : ""} */} | |||
<ProTable<processType.output> | |||
columns={columns} | |||
type={fromType as 'table'} | |||
formRef={ref} | |||
actionRef={actionRef} | |||
onSubmit={(params: any) => { | |||
console.log(params); | |||
if (fromType === 'form') { | |||
if (params.id) { | |||
processApi.Update(params).then((res: MyResponse.Content) => { | |||
if (res.statusCode === 200) { | |||
message.info("更新成功!"); | |||
setFromType('table') | |||
Reolod() | |||
} else { | |||
message.error(res.errors); | |||
} | |||
}) | |||
} else { | |||
processApi.Add(params).then((res: MyResponse.Content) => { | |||
if (res.statusCode === 200) { | |||
message.info("新增成功!"); | |||
setFromType('table') | |||
Reolod() | |||
} else { | |||
message.error(res.errors); | |||
} | |||
}) | |||
} | |||
} | |||
}} | |||
form={{ignoreRules:true,// 自定义提交按钮的属性 | |||
submitter: { | |||
onReset:()=>{ | |||
ref.current?.resetFields() | |||
setFromType("table") | |||
}, | |||
searchConfig: { resetText: fromType === 'form' ? '返回': '重置'}, } | |||
}} | |||
request={async (params = {}) => { | |||
const jsonData: processType.queryPage = { | |||
pageIndex: params.current || 1, | |||
pageSize: params.pageSize || 10, | |||
name: params.name || '', | |||
}; | |||
const response = await processApi.PagedList(jsonData); | |||
if (response.statusCode === 200) { | |||
return { | |||
data: response.data.items, | |||
success: true, | |||
total: response.data.total, | |||
}; | |||
} else { | |||
return { | |||
data: [], | |||
success: false, | |||
total: 0, | |||
}; | |||
} | |||
}} | |||
pagination={{ | |||
pageSize: 10, | |||
showSizeChanger:false | |||
}} | |||
rowKey="id" | |||
dateFormatter="string" | |||
headerTitle="列表" | |||
toolBarRender={() => [ | |||
<Button key="3" type="primary" onClick={() => { | |||
setFromType('form'); | |||
}}> | |||
<PlusOutlined /> | |||
新建 | |||
</Button>, | |||
]} | |||
/> | |||
</> | |||
); | |||
}; |
@@ -0,0 +1,39 @@ | |||
export const nodes = [ | |||
{ | |||
id: 'a1', | |||
data: { | |||
title: 'XXX_API_a1', | |||
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', | |||
description: 'XXX_XXX_XXX_API', | |||
}, | |||
}, | |||
{ | |||
id: 'a2', | |||
data: { | |||
title: 'XXX_API_a2', | |||
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', | |||
description: 'XXX_XXX_XXX_API', | |||
}, | |||
}, | |||
{ | |||
id: 'a3', | |||
data: { | |||
title: 'XXX_API_a3', | |||
logo: 'https://mdn.alipayobjects.com/huamei_ntgeqc/afts/img/A*kgyiRKi04eUAAAAAAAAAAAAADvuvAQ/original', | |||
description: 'XXX_XXX_XXX_API', | |||
}, | |||
}, | |||
]; | |||
export const edges = [ | |||
{ | |||
id: 'a1-a2', | |||
source: 'a1', | |||
target: 'a2', | |||
}, | |||
{ | |||
id: 'a1-a3', | |||
source: 'a1', | |||
target: 'a3', | |||
type: 'radius', | |||
}, | |||
]; |
@@ -0,0 +1,464 @@ | |||
import { PlusOutlined } from '@ant-design/icons'; | |||
import type { | |||
ActionType, | |||
ProColumns, | |||
ProFormInstance, | |||
} from '@ant-design/pro-components'; | |||
import ReactFlow from 'react-flow-renderer'; | |||
import { | |||
DragSortTable, | |||
ProCard, | |||
ProTable, | |||
} from '@ant-design/pro-components'; | |||
import { Button, Flex, Form, Input, message, Modal, Popconfirm, Select, Space, Steps } from 'antd'; | |||
import { useState, useRef, useEffect } from 'react'; | |||
import { FlowView, SelectType, useFlowViewer, useNodesState } from '@ant-design/pro-flow'; | |||
import { createStyles } from 'antd-style'; | |||
//引入接口 | |||
import dayjs from 'dayjs' | |||
import { v4 as uuid } from 'uuid' | |||
import productlineInfoAPI from '@/api/productlineInfo/service' | |||
import processAPI from '@/api/process/service'; | |||
import productlineInfoStepsAPI from '@/api/productlinesteps/service' | |||
import { edges, nodes as newnodes } from './data'; | |||
export default () => { | |||
const [fromType, setFromType] = useState<any>('table') | |||
const ref = useRef<ProFormInstance>(); | |||
const actionRef = useRef<ActionType>(); | |||
const Reolod = () =>{ | |||
ref.current?.resetFields() | |||
actionRef.current?.reload() | |||
} | |||
const [flowOpen,setFlowOpen] = useState<boolean>(false) | |||
const [flowItemOpen,setFlowItemOpen] = useState<boolean>(false) | |||
const columns: ProColumns<productlineInfoTypes.output>[] = [ | |||
{ | |||
title: '主键', | |||
dataIndex: 'id', | |||
width: 160, | |||
formItemProps: { | |||
hidden:true | |||
}, | |||
hideInSearch:true | |||
}, | |||
{ | |||
title: '名称', | |||
dataIndex: 'name', | |||
ellipsis: true, | |||
width: 120, | |||
formItemProps:{ | |||
rules:[{ required: true, message: '此项为必填项!' }] | |||
} | |||
}, | |||
// { | |||
// title: '类型', | |||
// hideInDescriptions: true, | |||
// dataIndex: 'productlinestepsTypes', | |||
// width: 120, | |||
// search: false, | |||
// valueEnum:{ | |||
// 0: { | |||
// text: '人工', | |||
// }, | |||
// 1: { | |||
// text: '设备', | |||
// }, | |||
// }, | |||
// formItemProps:{ | |||
// rules:[{ required: true, message: '此项为必填项!' }] | |||
// } | |||
// }, | |||
{ | |||
title: '描述', | |||
dataIndex: 'describe', | |||
search: false, | |||
}, | |||
{ | |||
title: '创建时间', | |||
dataIndex: 'createTime', | |||
render: (_, record) => { | |||
return <>{dayjs(record.createTime).format("YYYY-MM-DD HH:mm:ss")}</> | |||
}, | |||
search: false, | |||
hideInForm:true | |||
}, | |||
{ | |||
title: '操作', | |||
valueType: 'option', | |||
render: (text, row) => [ | |||
<Space key={+new Date() + Math.random()}> | |||
<a onClick={() => { | |||
setFromType('form') | |||
ref.current?.setFieldsValue(row) | |||
}} key={+new Date() + Math.random()} target="_blank" rel="noopener noreferrer"> | |||
编辑 | |||
</a> | |||
<a onClick={() => { | |||
setFlowOpen(true) | |||
setStepparams({ lineId: row.id }) | |||
}} key={+new Date() + Math.random()} target="_blank" rel="noopener noreferrer"> | |||
配置工艺流程 | |||
</a> | |||
<Popconfirm | |||
key="del" | |||
title="确定要删除此条数据吗?" | |||
onConfirm={() => { | |||
productlineInfoAPI.Del(row).then((res: MyResponse.Content) => { | |||
if (res.statusCode === 200) { | |||
message.info("删除成功!"); | |||
Reolod() | |||
} else { | |||
message.error(res.errors); | |||
} | |||
}) | |||
}} | |||
onCancel={() => { | |||
message.info('已取消删除'); | |||
}} | |||
okText="确认" | |||
cancelText="关闭" | |||
> | |||
<a> | |||
删除 | |||
</a> | |||
</Popconfirm> | |||
</Space> | |||
], | |||
}, | |||
]; | |||
const useStyles = createStyles(() => { | |||
return { | |||
container: { | |||
width: '100%', | |||
height: '400px', | |||
}, | |||
}; | |||
}); | |||
const [selectLineItem,setSelectLineItem] = useState<any>(); | |||
const [processList,setProcessList] = useState<any[]>(); | |||
const [stepparams, setStepparams] = useState<any>(); | |||
const [dongtaiformRef] = Form.useForm(); | |||
const { styles } = useStyles(); | |||
const { selectNode, selectEdges, selectNodes } = useFlowViewer(); | |||
const [nodes, , onNodesChange] = useNodesState(newnodes); | |||
const [node, setNode] = useState(null); | |||
const sortActionRef = useRef<ActionType>(); | |||
const [proList,setProList] = useState<any[]>([]); | |||
const [form] = Form.useForm(); | |||
useEffect(() => { | |||
processAPI.Selectlist().then((v:MyResponse.Content)=>{ | |||
if (v.statusCode===200) { | |||
console.log('v.data',v.data); | |||
setProList(v.data) | |||
} | |||
}) | |||
}, []) | |||
return ( | |||
<> | |||
<ProTable<productlineInfoTypes.output> | |||
columns={columns} | |||
type={fromType as 'table'} | |||
formRef={ref} | |||
actionRef={actionRef} | |||
onSubmit={(params: any) => { | |||
console.log(params); | |||
if (fromType === 'form') { | |||
if (params.id) { | |||
productlineInfoAPI.Update(params).then((res: MyResponse.Content) => { | |||
if (res.statusCode === 200) { | |||
message.info("更新成功!"); | |||
setFromType('table') | |||
Reolod() | |||
} else { | |||
message.error(res.errors); | |||
} | |||
}) | |||
} else { | |||
productlineInfoAPI.Add(params).then((res: MyResponse.Content) => { | |||
if (res.statusCode === 200) { | |||
message.info("新增成功!"); | |||
setFromType('table') | |||
Reolod() | |||
} else { | |||
message.error(res.errors); | |||
} | |||
}) | |||
} | |||
} | |||
}} | |||
form={{ignoreRules:true,// 自定义提交按钮的属性 | |||
submitter: { | |||
onReset:()=>{ | |||
ref.current?.resetFields() | |||
setFromType("table") | |||
}, | |||
searchConfig: { resetText: fromType === 'form' ? '返回': '重置',submitText: fromType === 'form' ? '提交': '查询'}, } | |||
}} | |||
request={async (params = {}) => { | |||
const jsonData: productlineInfoTypes.queryPage = { | |||
pageIndex: params.current || 1, | |||
pageSize: params.pageSize || 10, | |||
name: params.name || '', | |||
}; | |||
const response = await productlineInfoAPI.PagedList(jsonData); | |||
if (response.statusCode === 200) { | |||
return { | |||
data: response.data.items, | |||
success: true, | |||
total: response.data.total, | |||
}; | |||
} else { | |||
return { | |||
data: [], | |||
success: false, | |||
total: 0, | |||
}; | |||
} | |||
}} | |||
pagination={{ | |||
pageSize: 10, | |||
showSizeChanger:false | |||
}} | |||
rowKey="id" | |||
dateFormatter="string" | |||
headerTitle="列表" | |||
toolBarRender={() => [ | |||
<Button key="3" type="primary" onClick={() => { | |||
setFromType('form'); | |||
}}> | |||
<PlusOutlined /> | |||
新建 | |||
</Button>, | |||
]} | |||
/> | |||
<Modal open={flowOpen} maskClosable={false} footer={null} width={1000} height={1000} title='配置工艺流程' onOk={() => { setFlowOpen(false) }} onCancel={_ => setFlowOpen(false)}> | |||
<Flex vertical={false} justify='space-between' > | |||
<div style={{width:'300px',margin:'auto'}}> | |||
<Steps | |||
progressDot | |||
direction="vertical" | |||
items={ | |||
processList?.map((element:any) => { | |||
return {...element,title : proList.find((x)=>x.key==element.processId)?.value,status: 'finish', } | |||
}) | |||
} | |||
/> | |||
</div> | |||
<div style={{margin:"auto"}}> | |||
<DragSortTable<productlinestepsTypes.base_dto> | |||
style={{width:'600px'}} | |||
toolBarRender={() => [ | |||
<Button | |||
key={new Date().toDateString()} | |||
type="primary" | |||
onClick={() => { | |||
// typeForm.resetFields(); | |||
setFlowItemOpen(true) | |||
}} | |||
> | |||
添加步骤 | |||
</Button>, | |||
]} | |||
actionRef={sortActionRef} | |||
columns={[ | |||
{ | |||
title: '工序', | |||
dataIndex: 'step', | |||
align: 'center', | |||
hideInSearch: true, | |||
render: (dom, rowData, index) => { | |||
return ( | |||
<span className="customRender">{`${index + 1}`}</span> | |||
); | |||
}, | |||
}, | |||
{ | |||
title: '工艺名称', | |||
dataIndex: 'processId', | |||
align: 'center', | |||
hideInSearch: true, | |||
render(dom, entity, index, action, schema) { | |||
return <>{proList.find((x)=>x.key==entity.processId)?.value}</> | |||
}, | |||
}, | |||
{ | |||
title: '操作', | |||
align: 'center', | |||
valueType: 'option', | |||
key: 'option', | |||
render: (_, record, index, action) => [ | |||
<Space key={uuid()} size="middle"> | |||
<Button | |||
key={uuid()} | |||
type='primary' ghost | |||
onClick={async () => { | |||
// setIsModalOpen(true) | |||
const copyFormData = JSON.parse(JSON.stringify(record)); | |||
console.log('copyFormData', copyFormData); | |||
// typeForm.setFieldsValue(copyFormData); | |||
// setIsSetpModalOpen(true); | |||
}} | |||
> | |||
编辑 | |||
</Button> | |||
<Popconfirm | |||
key={uuid()} | |||
title="确定要删除此条数据吗?" | |||
onConfirm={() => { | |||
const delData: productlinestepsTypes.delInput = { | |||
id: record.id, | |||
}; | |||
productlineInfoStepsAPI.Del(delData).then((r) => { | |||
if (r.statusCode === 200) { | |||
message.success(r.statusCode === 200 ? '删除成功' : r.message); | |||
action?.reload(); | |||
} | |||
}); | |||
}} | |||
onCancel={() => { | |||
message.info('已取消删除'); | |||
}} | |||
okText="确认" | |||
cancelText="关闭" | |||
> | |||
<Button type='primary' danger ghost>删除</Button> | |||
</Popconfirm> | |||
</Space> | |||
], | |||
}, | |||
]} | |||
rowKey="step" | |||
search={false} | |||
pagination={{ pageSize: 100,showSizeChanger:false }} | |||
params={stepparams} | |||
request={async (params = {}) => { | |||
// if (!params.lineId) { | |||
// return { | |||
// data: [], | |||
// success: false, | |||
// total: 0, | |||
// }; | |||
// } | |||
const jsonData: productlinestepsTypes.queryParms = { | |||
lineId: params.lineId | |||
}; | |||
const response = await productlineInfoStepsAPI.List(jsonData); | |||
if (response.statusCode === 200) { | |||
setProcessList(response.data) | |||
return { | |||
data: response.data, | |||
success: true, | |||
}; | |||
} else { | |||
return { | |||
data: [], | |||
success: false, | |||
total: 0, | |||
}; | |||
} | |||
}} | |||
dragSortKey="step" | |||
onDragSortEnd={(beforeIndex: number, afterIndex: number,newDataSource: any[]) => { | |||
console.log('newDataSource',newDataSource); | |||
// 模拟将排序后数据发送到服务器的场景 | |||
// remoteData = newDataSource; | |||
// 请求成功之后刷新列表 | |||
newDataSource.map((item, index) => { | |||
item.step = index + 1; | |||
}) | |||
console.log('排序后的数据', newDataSource); | |||
productlineInfoStepsAPI.BatchUpdateStep(newDataSource).then((res: MyResponse.Content) => { | |||
if (res.data) { | |||
sortActionRef.current?.reload(); | |||
message.success('修改列表排序成功'); | |||
} | |||
}); | |||
}} | |||
/> | |||
</div> | |||
</Flex> | |||
</Modal> | |||
<Modal open={flowItemOpen} maskClosable={false} width={500} title='添加步骤' | |||
footer={[ | |||
<Button | |||
key="back" | |||
onClick={() => { | |||
setFlowItemOpen(false) | |||
}} | |||
> | |||
返回 | |||
</Button>, | |||
<Button key="submit" form="addprocessForm" type="primary" htmlType="submit"> | |||
提交 | |||
</Button>, | |||
]} | |||
onOk={() => { setFlowItemOpen(false) }} onCancel={_ => setFlowItemOpen(false)}> | |||
<Form | |||
id='addprocessForm' | |||
form={form} | |||
onFinish={(v)=>{ | |||
console.log(v); | |||
const jsonData:productlinestepsTypes.addInput = { | |||
step: 0, | |||
processId: v.processId, | |||
id: '', | |||
lineId: stepparams.lineId, | |||
processName: '' | |||
} | |||
productlineInfoStepsAPI.Add(jsonData).then((v:MyResponse.Content)=>{ | |||
if (v.statusCode===200) { | |||
setFlowItemOpen(false) | |||
sortActionRef.current?.reload(); | |||
} | |||
}) | |||
}}> | |||
<Form.Item label="主键" | |||
name="id" | |||
hidden={true}> | |||
</Form.Item> | |||
<Form.Item label="工艺" | |||
name="processId" rules={[{ required: true, message: '此项为必填项!' }]} > | |||
<Select placeholder='请选择工艺' style={{ width: 375 }}> | |||
{ | |||
proList.map((item: MySelectType.Select) => { | |||
return <Select.Option value={item.key} key={item.key}> | |||
<span>{item.value}</span> | |||
</Select.Option> | |||
}) | |||
} | |||
</Select> | |||
</Form.Item> | |||
</Form> | |||
</Modal > | |||
</> | |||
); | |||
}; |