BPA_MES
/
BPA.FINAL.MES
4
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

整改

master
Yanko 4 months ago
parent
13ab75234f
commit
34c0512da9
16 changed files with 1329 additions and 83 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -3
      frontend/config/routes.ts
  2. +4
    -1
      frontend/package.json
  3. +71
    -0
      frontend/src/api/process/dto.d.ts
  4. +90
    -0
      frontend/src/api/process/service.ts
  5. +71
    -0
      frontend/src/api/productlineInfo/dto.d.ts
  6. +82
    -0
      frontend/src/api/productlineInfo/service.ts
  7. +67
    -67
      frontend/src/api/productlineService.ts
  8. +75
    -0
      frontend/src/api/productlinesteps/dto.d.ts
  9. +90
    -0
      frontend/src/api/productlinesteps/service.ts
  10. +3
    -1
      frontend/src/pages/craftInfo/pot.tsx
  11. +24
    -10
      frontend/src/pages/deviceInfo/index.tsx
  12. +39
    -1
      frontend/src/pages/final/index.tsx
  13. +0
    -0
     
  14. +207
    -0
      frontend/src/pages/plantModel/process.tsx
  15. +39
    -0
      frontend/src/pages/productLine/data.ts
  16. +464
    -0
      frontend/src/pages/productLine/line.tsx

+ 3
- 3
frontend/config/routes.ts View File

@@ -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' },
]
},


+ 4
- 1
frontend/package.json View File

@@ -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",


+ 71
- 0
frontend/src/api/process/dto.d.ts View File

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

+ 90
- 0
frontend/src/api/process/service.ts View File

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

}


+ 71
- 0
frontend/src/api/productlineInfo/dto.d.ts View File

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

+ 82
- 0
frontend/src/api/productlineInfo/service.ts View File

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


+ 67
- 67
frontend/src/api/productlineService.ts View File

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



+ 75
- 0
frontend/src/api/productlinesteps/dto.d.ts View File

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

+ 90
- 0
frontend/src/api/productlinesteps/service.ts View File

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

}


+ 3
- 1
frontend/src/pages/craftInfo/pot.tsx View File

@@ -425,8 +425,10 @@ const Index = () => {
}
}}
dragSortKey="step"
onDragSortEnd={(newDataSource: any[]) => {
onDragSortEnd={(beforeIndex: number, afterIndex: number,newDataSource: any[]) => {

console.log('newDataSource',newDataSource);
// 模拟将排序后数据发送到服务器的场景
// remoteData = newDataSource;
// 请求成功之后刷新列表


+ 24
- 10
frontend/src/pages/deviceInfo/index.tsx View File

@@ -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: '此项为必填项!' }]} >


+ 39
- 1
frontend/src/pages/final/index.tsx View File

@@ -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
View File


+ 207
- 0
frontend/src/pages/plantModel/process.tsx View File

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

+ 39
- 0
frontend/src/pages/productLine/data.ts View File

@@ -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',
},
];

+ 464
- 0
frontend/src/pages/productLine/line.tsx View File

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

Write Preview
Loading…
Cancel
Save