555 lines
15 KiB
JavaScript
555 lines
15 KiB
JavaScript
|
import React, {
|
|||
|
useCallback,
|
|||
|
useEffect,
|
|||
|
useImperativeHandle,
|
|||
|
useRef,
|
|||
|
useState,
|
|||
|
} from "react";
|
|||
|
import { Modal, Row, Col, Form, Input, Select, message } from "antd";
|
|||
|
import { Button } from "../Button";
|
|||
|
import { request } from "../utils";
|
|||
|
|
|||
|
const ModalClient = React.memo((props) => {
|
|||
|
const {
|
|||
|
visible = false,
|
|||
|
title,
|
|||
|
onOk = () => {},
|
|||
|
onCancel = () => {},
|
|||
|
children,
|
|||
|
} = props;
|
|||
|
return (
|
|||
|
<Modal
|
|||
|
className="modalClient"
|
|||
|
destroyOnClose
|
|||
|
visible={visible}
|
|||
|
closable={false}
|
|||
|
footer={null}
|
|||
|
width={536}
|
|||
|
bodyStyle={{ padding: "32px" }}
|
|||
|
>
|
|||
|
<div className="modalClient-header">{title}</div>
|
|||
|
<div className="modalClient-body">{children}</div>
|
|||
|
<div className="modalClient-footer">
|
|||
|
<Button title="确认" size="large" onClick={onOk} />
|
|||
|
<Button
|
|||
|
title="取消"
|
|||
|
type="default"
|
|||
|
size="large"
|
|||
|
ghost
|
|||
|
onClick={onCancel}
|
|||
|
/>
|
|||
|
</div>
|
|||
|
<style jsx>{`
|
|||
|
.modalClient-header {
|
|||
|
height: 32px;
|
|||
|
font-size: 28px;
|
|||
|
color: rgb(0 0 0/0.85);
|
|||
|
letter-spacing: 0px;
|
|||
|
line-height: 32px;
|
|||
|
margin-bottom: 42px;
|
|||
|
}
|
|||
|
.modalClient-footer {
|
|||
|
text-align: right;
|
|||
|
padding-top: 32px;
|
|||
|
}
|
|||
|
`}</style>
|
|||
|
<style jsx global>{`
|
|||
|
.modalClient .ant-form-item-label {
|
|||
|
text-align: left;
|
|||
|
}
|
|||
|
.modalClient .ant-form-item-label > label {
|
|||
|
font-size: 24px;
|
|||
|
}
|
|||
|
.modalClient .ant-form-large .ant-form-item-control-input {
|
|||
|
min-height: 56px;
|
|||
|
}
|
|||
|
.modalClient
|
|||
|
.ant-select-single.ant-select-lg:not(.ant-select-customize-input)
|
|||
|
.ant-select-selector::after,
|
|||
|
.modalClient
|
|||
|
.ant-select-single.ant-select-lg:not(.ant-select-customize-input)
|
|||
|
.ant-select-selector
|
|||
|
.ant-select-selection-item,
|
|||
|
.modalClient
|
|||
|
.ant-select-single.ant-select-lg:not(.ant-select-customize-input)
|
|||
|
.ant-select-selector
|
|||
|
.ant-select-selection-placeholder {
|
|||
|
line-height: 56px;
|
|||
|
}
|
|||
|
.modalClient .ant-form-large .ant-form-item-label > label,
|
|||
|
.modalClient
|
|||
|
.ant-select-single.ant-select-lg:not(.ant-select-customize-input)
|
|||
|
.ant-select-selector {
|
|||
|
height: 56px;
|
|||
|
}
|
|||
|
.modalClient .ant-input-lg {
|
|||
|
line-height: 54px;
|
|||
|
padding: 0 11px;
|
|||
|
}
|
|||
|
.modalClient p,
|
|||
|
.modalClient .ant-input-lg,
|
|||
|
.modalClient .ant-select-lg {
|
|||
|
font-size: 24px;
|
|||
|
}
|
|||
|
.modalClient .item-line {
|
|||
|
text-align: center;
|
|||
|
line-height: 56px;
|
|||
|
}
|
|||
|
.modalClient.ant-select-item {
|
|||
|
font-size: 18px;
|
|||
|
line-height: 32px;
|
|||
|
}
|
|||
|
`}</style>
|
|||
|
</Modal>
|
|||
|
);
|
|||
|
});
|
|||
|
|
|||
|
// 设置
|
|||
|
export const ModelSetting = React.forwardRef((props, ref) => {
|
|||
|
const {} = props;
|
|||
|
const callbackRef = useRef(() => {});
|
|||
|
const [form] = Form.useForm();
|
|||
|
const [visible, setVisible] = useState(false);
|
|||
|
|
|||
|
const handleCancel = useCallback(() => setVisible(false), []);
|
|||
|
|
|||
|
const [equipList, setEquipList] = useState([]);
|
|||
|
const [operationList, setOperationList] = useState([]);
|
|||
|
const [workShopList, setWorkShopList] = useState([]);
|
|||
|
|
|||
|
// 查询包装机
|
|||
|
const getEquip = useCallback((gid) => {
|
|||
|
if (gid) {
|
|||
|
request({
|
|||
|
method: "POST",
|
|||
|
url: `${window.config.mesUrl}/mdgeneric/md/bmWorkCenter/getEquipByOperationGid?operationGid=${gid}`,
|
|||
|
}).then(({ data, success } = {}) => {
|
|||
|
if (!success) data = [];
|
|||
|
setEquipList(data);
|
|||
|
});
|
|||
|
}
|
|||
|
}, []);
|
|||
|
|
|||
|
// 工序变化
|
|||
|
const onOperationChange = useCallback(
|
|||
|
(code, a, data) => {
|
|||
|
if (!data) data = operationList;
|
|||
|
// console.log("val", key, value, data);
|
|||
|
let {gid: operationGid, name} = data.find((item) => item.code === code) || {};
|
|||
|
getEquip(operationGid);
|
|||
|
form.setFieldsValue({
|
|||
|
operationName: name,
|
|||
|
operationCode: code,
|
|||
|
equipName: undefined,
|
|||
|
equipCode: undefined,
|
|||
|
});
|
|||
|
setEquipList([]);
|
|||
|
},
|
|||
|
[operationList, form, getEquip]
|
|||
|
);
|
|||
|
|
|||
|
// 查询工序
|
|||
|
const getOperation = useCallback(
|
|||
|
(gid, callback) => {
|
|||
|
if (gid) {
|
|||
|
request({
|
|||
|
method: "POST",
|
|||
|
url: `${window.config.mesUrl}/mdgeneric/md/bmWorkCenter/getOpByWorkCenter?workCenterGid=${gid}`,
|
|||
|
}).then(({ data, success } = {}) => {
|
|||
|
if (!success) data = [];
|
|||
|
setOperationList(data);
|
|||
|
if (callback) {
|
|||
|
callback(data);
|
|||
|
} else if (data.length) {
|
|||
|
let { name, code } = data[0];
|
|||
|
form.setFieldsValue({
|
|||
|
operationName: name,
|
|||
|
equipName: code,
|
|||
|
});
|
|||
|
onOperationChange(code,undefined, data)
|
|||
|
}
|
|||
|
});
|
|||
|
} else setOperationList([]);
|
|||
|
},
|
|||
|
[onOperationChange]
|
|||
|
);
|
|||
|
|
|||
|
// 车间变化
|
|||
|
const onWorkShopChange = useCallback(
|
|||
|
(key = {}) => {
|
|||
|
let { gid: workShopGid, name: value } = workShopList.find(({ code }) => code === key) || {};
|
|||
|
getOperation(workShopGid);
|
|||
|
form.setFieldsValue({
|
|||
|
workCenterCode: key,
|
|||
|
workCenterName: value,
|
|||
|
operationName: undefined,
|
|||
|
operationCode: undefined,
|
|||
|
equipName: undefined,
|
|||
|
equipCode: undefined,
|
|||
|
});
|
|||
|
setOperationList([]);
|
|||
|
setEquipList([]);
|
|||
|
},
|
|||
|
[workShopList, form, getOperation]
|
|||
|
);
|
|||
|
|
|||
|
// 查询车间
|
|||
|
const getWorkShop = useCallback((callback) => {
|
|||
|
request({
|
|||
|
method: "POST",
|
|||
|
url: `${window.config.mesUrl}/mdgeneric/md/bmWorkCenter/findAllWithPage`,
|
|||
|
bodys: {
|
|||
|
// removePermission: true,
|
|||
|
page: -1,
|
|||
|
pageSize: -1,
|
|||
|
sorted: "createTime desc",
|
|||
|
filter: "type eq 'workshop'",
|
|||
|
},
|
|||
|
}).then(({ data, success } = {}) => {
|
|||
|
if (!success) data = [];
|
|||
|
setWorkShopList(data);
|
|||
|
callback && callback(data);
|
|||
|
});
|
|||
|
}, []);
|
|||
|
|
|||
|
// 设备变化
|
|||
|
const onEquipChange = useCallback(
|
|||
|
(key) => {
|
|||
|
let { name: value} = equipList.find(({ code }) => code === key) || {}
|
|||
|
form.setFieldsValue({
|
|||
|
equipName: value,
|
|||
|
equipCode: key,
|
|||
|
});
|
|||
|
},
|
|||
|
[form, equipList]
|
|||
|
);
|
|||
|
|
|||
|
// 初始化
|
|||
|
const init = useCallback(
|
|||
|
(data, callback) => {
|
|||
|
setVisible(true);
|
|||
|
form.resetFields();
|
|||
|
form.setFieldsValue(data);
|
|||
|
callbackRef.current = callback;
|
|||
|
let { workCenterCode, operationCode } = data;
|
|||
|
getWorkShop((res) => {
|
|||
|
if (workCenterCode) {
|
|||
|
let gid = res.find(({ code }) => code === workCenterCode)?.gid;
|
|||
|
getOperation(gid, (res) => {
|
|||
|
if (operationCode) {
|
|||
|
let gid = res.find(({ code }) => code === operationCode)?.gid;
|
|||
|
getEquip(gid);
|
|||
|
}
|
|||
|
});
|
|||
|
}
|
|||
|
});
|
|||
|
},
|
|||
|
[form, getWorkShop, getOperation, getEquip]
|
|||
|
);
|
|||
|
|
|||
|
const handleOk = useCallback(() => {
|
|||
|
let formData = form.getFieldValue();
|
|||
|
if (["", null, undefined].includes(formData.workCenterCode))
|
|||
|
return message.error("请完善车间!");
|
|||
|
if (["", null, undefined].includes(formData.equipCode))
|
|||
|
return message.error("请完善包装机!");
|
|||
|
if (["", null, undefined].includes(formData.bagWeight))
|
|||
|
return message.error("请完善包装袋重量!");
|
|||
|
if (["", null, undefined].includes(formData.packSpecs))
|
|||
|
return message.error("请完包装规格!");
|
|||
|
if (["", null, undefined].includes(formData.upperLimit))
|
|||
|
return message.error("请完善上限值!");
|
|||
|
if (["", null, undefined].includes(formData.lowerLimit))
|
|||
|
return message.error("请完善下限值!");
|
|||
|
// console.log("form", formData);
|
|||
|
return new Promise((resolve, reject) => {
|
|||
|
request({
|
|||
|
url: `${window.config.mesUrl}/prodexec/prodexec/packageEquipment/setPackInfo`,
|
|||
|
bodys: formData,
|
|||
|
}).then((res) => {
|
|||
|
handleCancel();
|
|||
|
callbackRef.current();
|
|||
|
})
|
|||
|
.finally(() => {
|
|||
|
resolve();
|
|||
|
});
|
|||
|
});
|
|||
|
}, [handleCancel, form, workShopList, equipList]);
|
|||
|
|
|||
|
useImperativeHandle(
|
|||
|
ref,
|
|||
|
() => ({
|
|||
|
show: init,
|
|||
|
}),
|
|||
|
[init]
|
|||
|
);
|
|||
|
return (
|
|||
|
<ModalClient
|
|||
|
visible={visible}
|
|||
|
title="设置"
|
|||
|
onCancel={handleCancel}
|
|||
|
onOk={handleOk}
|
|||
|
>
|
|||
|
<Form
|
|||
|
form={form}
|
|||
|
labelCol={{ span: 8 }}
|
|||
|
wrapperCol={{ span: 16 }}
|
|||
|
// onFieldsChange={ onFieldsChange }
|
|||
|
autoComplete="off"
|
|||
|
size="large"
|
|||
|
>
|
|||
|
<Form.Item label="车间" name="workCenterName">
|
|||
|
<Select
|
|||
|
placeholder="选择车间"
|
|||
|
onSelect={onWorkShopChange}
|
|||
|
// labelInValue
|
|||
|
>
|
|||
|
{workShopList.map(({ code, name }) => (
|
|||
|
<Select.Option value={code} key={code} className="modalClient">
|
|||
|
{name}
|
|||
|
</Select.Option>
|
|||
|
))}
|
|||
|
</Select>
|
|||
|
</Form.Item>
|
|||
|
<Form.Item label="工序" name="operationName">
|
|||
|
<Select
|
|||
|
placeholder="选择工序"
|
|||
|
onSelect={onOperationChange}
|
|||
|
// labelInValue
|
|||
|
>
|
|||
|
{operationList.map(({ code, name }) => (
|
|||
|
<Select.Option value={code} key={code} className="modalClient">
|
|||
|
{name}
|
|||
|
</Select.Option>
|
|||
|
))}
|
|||
|
</Select>
|
|||
|
</Form.Item>
|
|||
|
<Form.Item label="包装机" name="equipName">
|
|||
|
<Select
|
|||
|
placeholder="选择包装机"
|
|||
|
onSelect={onEquipChange}
|
|||
|
// labelInValue
|
|||
|
>
|
|||
|
{equipList.map(({ code, name }) => (
|
|||
|
<Select.Option value={code} key={code} className="modalClient">
|
|||
|
{name}
|
|||
|
</Select.Option>
|
|||
|
))}
|
|||
|
</Select>
|
|||
|
</Form.Item>
|
|||
|
<Form.Item label="包装袋重量" name="bagWeight">
|
|||
|
<Input addonAfter="KG" placeholder="填写包装袋重量" />
|
|||
|
</Form.Item>
|
|||
|
<Form.Item label="包装规格" name="packSpecs">
|
|||
|
<Input addonAfter="KG" placeholder="填写包装规格" />
|
|||
|
</Form.Item>
|
|||
|
<Form.Item label="上限-下限">
|
|||
|
<Input.Group>
|
|||
|
<Row gutter={8}>
|
|||
|
<Col span={11}>
|
|||
|
<Form.Item name={"upperLimit"} noStyle>
|
|||
|
<Input addonAfter="KG" placeholder="上限" />
|
|||
|
</Form.Item>
|
|||
|
</Col>
|
|||
|
<Col span={2}>
|
|||
|
<div className="item-line">-</div>
|
|||
|
</Col>
|
|||
|
<Col span={11}>
|
|||
|
<Form.Item name={"lowerLimit"} noStyle>
|
|||
|
<Input addonAfter="KG" placeholder="下限" />
|
|||
|
</Form.Item>
|
|||
|
</Col>
|
|||
|
</Row>
|
|||
|
</Input.Group>
|
|||
|
</Form.Item>
|
|||
|
</Form>
|
|||
|
</ModalClient>
|
|||
|
);
|
|||
|
});
|
|||
|
|
|||
|
// 中断
|
|||
|
export const ModelBreak = React.forwardRef((props, ref) => {
|
|||
|
const {} = props;
|
|||
|
const callbackRef = useRef(() => {});
|
|||
|
const [form] = Form.useForm();
|
|||
|
const [visible, setVisible] = useState(false);
|
|||
|
|
|||
|
const handleCancel = useCallback(() => setVisible(false), []);
|
|||
|
|
|||
|
const handleOk = useCallback(() => {
|
|||
|
let formData = form.getFieldValue();
|
|||
|
if (["", null, undefined].includes(formData.reason))
|
|||
|
return message.error("请完善中断原因!");
|
|||
|
return new Promise((resolve, reject) => {
|
|||
|
request({
|
|||
|
url: `${window.config.mesUrl}/prodexec/prodexec/packageEquipment/interruptPack`,
|
|||
|
bodys: {
|
|||
|
gid: formData.gid,
|
|||
|
},
|
|||
|
})
|
|||
|
.then((res) => {
|
|||
|
if (res.success) {
|
|||
|
handleCancel();
|
|||
|
callbackRef.current();
|
|||
|
} else message.error(res.message || "操作失败!");
|
|||
|
})
|
|||
|
.finally(() => {
|
|||
|
resolve();
|
|||
|
});
|
|||
|
});
|
|||
|
}, [handleCancel]);
|
|||
|
useImperativeHandle(
|
|||
|
ref,
|
|||
|
() => ({
|
|||
|
show() {
|
|||
|
setVisible(true);
|
|||
|
},
|
|||
|
show: (data, callback) => {
|
|||
|
setVisible(true);
|
|||
|
form.resetFields();
|
|||
|
form.setFieldsValue(data);
|
|||
|
callbackRef.current = callback;
|
|||
|
},
|
|||
|
}),
|
|||
|
[form]
|
|||
|
);
|
|||
|
return (
|
|||
|
<ModalClient
|
|||
|
visible={visible}
|
|||
|
title="中断原因"
|
|||
|
onCancel={handleCancel}
|
|||
|
onOk={handleOk}
|
|||
|
>
|
|||
|
<Form autoComplete="off" size="large" form={form}>
|
|||
|
<Form.Item name="reason">
|
|||
|
<Input.TextArea placeholder="填写设备故障原因" rows={4} />
|
|||
|
</Form.Item>
|
|||
|
</Form>
|
|||
|
</ModalClient>
|
|||
|
);
|
|||
|
});
|
|||
|
|
|||
|
// 结束
|
|||
|
export const ModelFinish = React.forwardRef((props, ref) => {
|
|||
|
const {} = props;
|
|||
|
const [form, setForm] = useState([]);
|
|||
|
const callbackRef = useRef(() => {});
|
|||
|
const [visible, setVisible] = useState(false);
|
|||
|
const handleCancel = useCallback(() => setVisible(false), []);
|
|||
|
const handleOk = useCallback(() => {
|
|||
|
return new Promise((resolve, reject) => {
|
|||
|
request({
|
|||
|
url: `${window.config.mesUrl}/prodexec/prodexec/packageEquipment/endPack`,
|
|||
|
bodys: form,
|
|||
|
})
|
|||
|
.then((res) => {
|
|||
|
if (res.success) {
|
|||
|
handleCancel();
|
|||
|
callbackRef.current();
|
|||
|
message.success("包装完成!");
|
|||
|
} else message.error(res.message || "操作失败!");
|
|||
|
})
|
|||
|
.finally(() => {
|
|||
|
resolve();
|
|||
|
});
|
|||
|
});
|
|||
|
}, [handleCancel, form]);
|
|||
|
useImperativeHandle(
|
|||
|
ref,
|
|||
|
() => ({
|
|||
|
show: (data, callback) => {
|
|||
|
setVisible(true);
|
|||
|
setForm(data);
|
|||
|
callbackRef.current = callback;
|
|||
|
},
|
|||
|
}),
|
|||
|
[]
|
|||
|
);
|
|||
|
return (
|
|||
|
<ModalClient
|
|||
|
visible={visible}
|
|||
|
title="结束"
|
|||
|
onCancel={handleCancel}
|
|||
|
onOk={handleOk}
|
|||
|
>
|
|||
|
<p>是否确认结束?</p>
|
|||
|
</ModalClient>
|
|||
|
);
|
|||
|
});
|
|||
|
|
|||
|
// 超产
|
|||
|
export const ModelOverproductionBatch = React.forwardRef((props, ref) => {
|
|||
|
const { } = props;
|
|||
|
const [form] = Form.useForm();
|
|||
|
const codeRef = useRef();
|
|||
|
const callbackRef = useRef(() => {});
|
|||
|
const [visible, setVisible] = useState(false);
|
|||
|
const handleCancel = useCallback(() => setVisible(false), []);
|
|||
|
const handleOk = useCallback(() => {
|
|||
|
let formData = form.getFieldValue();
|
|||
|
if (codeRef.current && codeRef.current === formData.outBatch) {
|
|||
|
message.error("超产批号不能与原单号一致!");
|
|||
|
} else {
|
|||
|
callbackRef.current && callbackRef.current(formData.outBatch);
|
|||
|
handleCancel();
|
|||
|
};
|
|||
|
}, [handleCancel, form]);
|
|||
|
useImperativeHandle(
|
|||
|
ref,
|
|||
|
() => ({
|
|||
|
show(code, callback) {
|
|||
|
codeRef.current = code;
|
|||
|
callbackRef.current = callback;
|
|||
|
setVisible(true);
|
|||
|
},
|
|||
|
}),
|
|||
|
[]
|
|||
|
);
|
|||
|
return (
|
|||
|
<ModalClient
|
|||
|
visible={visible}
|
|||
|
title="超产批号"
|
|||
|
onCancel={handleCancel}
|
|||
|
onOk={handleOk}
|
|||
|
>
|
|||
|
<Form autoComplete="off" size="large" form={form}>
|
|||
|
<Form.Item name="outBatch">
|
|||
|
<Input placeholder="填写超产批号" allowClear/>
|
|||
|
</Form.Item>
|
|||
|
</Form>
|
|||
|
</ModalClient>
|
|||
|
);
|
|||
|
});
|
|||
|
|
|||
|
// 超量打印
|
|||
|
export const ModelOverPrint = React.forwardRef((props, ref) => {
|
|||
|
const {} = props;
|
|||
|
const [form, setForm] = useState("");
|
|||
|
const callbackRef = useRef(() => {});
|
|||
|
const [visible, setVisible] = useState(false);
|
|||
|
const handleCancel = useCallback(() => setVisible(false), []);
|
|||
|
const handleOk = useCallback(() => {
|
|||
|
return callbackRef.current(handleCancel);
|
|||
|
}, [handleCancel, form]);
|
|||
|
useImperativeHandle(
|
|||
|
ref,
|
|||
|
() => ({
|
|||
|
show: (data, callback) => {
|
|||
|
setVisible(true);
|
|||
|
setForm(data);
|
|||
|
callbackRef.current = callback;
|
|||
|
},
|
|||
|
}),
|
|||
|
[]
|
|||
|
);
|
|||
|
return (
|
|||
|
<ModalClient
|
|||
|
visible={visible}
|
|||
|
title="确认打印"
|
|||
|
onCancel={handleCancel}
|
|||
|
onOk={handleOk}
|
|||
|
>
|
|||
|
<p>{ form }</p>
|
|||
|
</ModalClient>
|
|||
|
);
|
|||
|
});
|