import React, { useEffect, useMemo, useRef, useState } from "react";
import { Dropdown, Menu, Button, message, Table, Select } from "antd";
import AutoTable from "@/components/AutoTable";
// import defaultFields from "./fields";
import { doFetch } from "@/utils/doFetch";
import DrawInitForm from "@/components/DrawInitForm";
import getPrem from "@/utils/getPrem"; //权限判断fn
import { useReactToPrint } from "react-to-print";
import { useModel } from "umi";
import PrintDom from "./printdom";
import { PrintQrCode } from "@/components/PrintCode";
import { EditableProTable } from "@ant-design/pro-table";
const keytoval = {
one: 1,
two: 2,
three: 3,
four: 4,
},
items = [
{
key: "one",
label: <a>生产领料出库</a>,
},
{
key: "two",
label: <a>销售出库</a>,
},
{
key: "three",
label: <a>报废出库</a>,
},
{
key: "four",
label: <a>其他出库</a>,
},
],
itemz = {
one: "生产领料出库",
two: "销售出库",
three: "报废出库",
four: "其他出库",
};
const MySelect = ({ record, value, onChange }) => {
const { storeId } = useModel("useGlobal");
console.log(storeId);
const [inputValue, setInputValue] = useState("");
const [options, setoptions] = useState([]);
const rref = useRef();
const createSelectOptions = async (row, storeId) => {
let res = await doFetch({
url: "/ngic-workmanship/wmsMaterieInventory/query/selectbox",
params: { storeId, materieId: row?.materieId },
});
setoptions(res?.data?.dataList ?? []);
};
const handleSelectChange = (e) => {
setInputValue(e);
onChange(e);
console.log(value);
};
useEffect(() => {
createSelectOptions(record, storeId);
}, []);
return (
<Select
ref={rref}
onChange={handleSelectChange}
allowClear={true}
value={inputValue}
placeholder="请选择批次号"
style={{ width: "100%" }}
options={options}
/>
);
};
const defaultFields = {
four: {
materieOutstoreNo: {
value: null,
type: "input",
title: "出库单号",
name: ["materieOutstoreNo"],
required: false,
placeholder: "不填写系统自动生成",
},
storeId: {
value: null,
type: "select",
title: "出库仓库",
name: ["storeId"],
required: true,
options: {
database: () =>
doFetch({
url: "/ngic-auth/sysStore/selectionBox",
params: { factoryIdList: [] },
}),
params: {},
},
},
remark: {
value: null,
type: "textarea",
title: "备注",
name: ["remark"],
required: false,
col: {
span: 24,
},
},
materialList: {
value: [],
title: "物料信息",
type: "table",
col: { span: 24 },
name: ["materialList"],
required: true,
linkconfig: {
urlchangeval: {
//根据url接口 改变某个value
database: (params) =>
doFetch({
url: "/ngic-workmanship/pmMaterie/queryById",
params,
}),
params: { materieId: "linked" },
effectresult: {
specificationModel: "specificationModel", //key 为列表更新值 value为response 返回值
ironLoss: "ironLoss",
usableNum: "usableNum",
outstroeNum: "outstroeNum",
},
},
},
columns: [
{
title: (
<span>
物料编码-名称 <b style={{ color: "red" }}>*</b>
</span>
),
dataIndex: "materieId",
key: "materieId",
valueType: "select",
width: 160,
fieldProps: {
allowClear: true,
showSearch: true,
},
formItemProps: () => {
return {
rules: [{ required: true, message: "此项为必填项" }],
};
},
editable: true,
},
{
title: <span>规格型号</span>,
dataIndex: "specificationModel",
key: "specificationModel",
readonly: "specificationModel",
},
{
title: "铁损",
dataIndex: "ironLoss",
key: "ironLoss",
readonly: "ironLoss",
},
{
title: "片厚",
dataIndex: "sheetThickness",
key: "sheetThickness",
// readonly: "sheetThickness",
},
{
title: "牌号",
dataIndex: "shopSign",
key: "shopSign",
readonly: "shopSign",
},
{
title: (
<span>
出库数量<b style={{ color: "red" }}>*</b>
</span>
),
dataIndex: "outstroeNum",
key: "outstroeNum",
formItemProps: () => {
return {
rules: [{ required: true, message: "此项为必填项" }],
};
},
valueType: "digit",
},
{
title: "可用库存",
dataIndex: "usableNum",
key: "usableNum",
readonly: "usableNum",
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
readonly: "productionUnitName",
},
{
title: "操作",
valueType: "option",
width: 70,
render: (text, record, _, action) => [
<a key="delete" onClick={() => {}}>
删除
</a>,
],
},
],
rowKey: "id",
},
},
detail: (setselected, dom) => ({
totalCard: [
//物料详情
{
cardTitle: "基本信息",
itemData: [
{
title: "出库单号",
key: "materieOutstoreNo",
},
{
title: "出库类型",
key: "outstoreTypeName",
},
{
title: "出库仓库",
key: "storeName",
},
{
title: "相关单号",
key: "businessNo",
},
{
title: "创建人",
key: "createUserName",
},
{
title: "创建时间",
key: "createTime",
},
{
title: "状态",
key: "statusName",
},
{
title: "完成时间",
key: "finishTime",
},
{
title: "备注",
key: "remark",
noshow: "100%",
},
{
title: "工单条形码",
key: "qrCodeUrl",
type: "img",
noshow: true,
width: 100,
},
],
},
{
cardTitle: "物料信息列表",
extraContent: "",
itemData: [
{
key: "materialList",
type: "table",
col: { span: 24 },
columns: [
{
title: "物料编码 - 名称",
dataIndex: "materieName",
key: "materieName",
search: false,
render: (dom, row) => {
return (
(row.materieCode ?? "") + " - " + (row.materieName ?? "")
);
},
},
{
title: "出库数量",
dataIndex: "outstroeNum",
key: "outstroeNum",
search: false,
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
search: false,
},
{
title: "未下架数量",
dataIndex: "remainderNums",
key: "remainderNums",
search: false,
},
],
pagination: "false",
rowKey: "id",
expandable: {
expandedRowRender: (record) => (
<Table
style={{ marginLeft: 48 }}
columns={[
{
title: "库位名称",
dataIndex: "storePositionName",
key: "storePositionName",
search: false,
formItemProps: () => {
return {
rules: [{ required: true, message: "此项为必填项" }],
};
},
},
{
title: "批次号/SN号",
dataIndex: "materieControlNo",
key: "materieControlNo",
search: false,
},
{
title: "供应商编号-名称",
dataIndex: "supplierNo",
key: "supplierNo",
search: false,
render: (dom, row) => {
return (
(row?.supplierNo ?? "") +
" - " +
(row?.supplierName ?? "")
);
},
},
{
title: "下架数量",
dataIndex: "outstroeNum",
key: "outstroeNum",
search: false,
},
]}
dataSource={record.downloadList}
pagination={false}
/>
),
},
rowSelection: {
onChange: (selectedRowKeys, selectedRows) => {
setselected(selectedRows);
},
},
},
],
},
{
cardTitle: "强制关单信息",
itemData: [
{
title: "关单人",
key: "closeUserName",
},
{
title: "关单时间",
key: "closeTime",
},
],
},
{
cardTitle: "下架明细",
noPrint: true,
itemData: [
{
key: "materialDownloadList",
type: "table",
col: { span: 24 },
columns: [
{
title: "物料编码 - 名称",
dataIndex: "materieName",
key: "materieName",
search: false,
render: (dom, row) => {
return (
(row.materieCode ?? "") + " - " + (row.materieName ?? "")
);
},
},
{
title: "出库数量",
dataIndex: "outstroeNum",
key: "outstroeNum",
search: false,
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
search: false,
},
],
expandable: {
defaultExpandAllRows: true,
expandedRowRender: (record) => (
<Table
style={{ marginLeft: 48 }}
columns={[
{
title: "库位名称",
dataIndex: "storePositionName",
key: "storePositionName",
search: false,
formItemProps: () => {
return {
rules: [{ required: true, message: "此项为必填项" }],
};
},
},
{
title: "批次号/SN号",
dataIndex: "materieControlNo",
key: "materieControlNo",
search: false,
},
{
title: "供应商编号 - 名称",
dataIndex: "supplierNo",
key: "supplierNo",
search: false,
render: (dom, row) => {
return (
(row.supplierNo ?? "") +
" - " +
(row.supplierName ?? "")
);
},
},
{
title: "下架数量",
dataIndex: "outstroeNum",
key: "outstroeNum",
search: false,
},
{
title: "备注",
dataIndex: "remark",
key: "remark",
search: false,
},
{
title: "操作人",
dataIndex: "downloadUserName",
key: "downloadUserName",
search: false,
},
{
title: "操作时间",
dataIndex: "downloadTime",
key: "downloadTime",
search: false,
},
]}
dataSource={record.downloadList}
pagination={false}
/>
),
},
pagination: "false",
},
],
},
],
}),
};
function Outstore(props) {
const { initialState, setInitialState } = useModel("@@initialState");
const [activeTabKey, onTabChange] = useState("1");
const [selectKeys, setSelectKeys] = useState([]);
let [drawprops, setdrawprops] = useState({
title: "",
visible: false,
onClose: () => {
setdrawprops((s) => ({
...s,
visible: false,
fields: {},
}));
},
fields: {},
width: 1200,
}),
actionRef = useRef(),
ChildRef = null,
printRef = useRef(),
mutiPrintRef = useRef();
const { storeId, setStoreIdFn } = useModel("useGlobal");
const outStoreFields = useMemo(() => {
const mystoreId = storeId;
return {
materieOutstoreNo: {
value: null,
type: "input",
title: "出库单号",
name: ["materieOutstoreNo"],
required: false,
placeholder: "不填写系统自动生成",
disabled: true,
},
outstoreTypeName: {
value: null,
title: "出库类型",
type: "input",
name: ["outstoreTypeName"],
required: true,
disabled: true,
},
storeCode: {
value: null,
title: "出库仓库",
type: "input",
name: ["storeCode"],
required: true,
disabled: true,
},
remark: {
value: null,
type: "textarea",
title: "备注",
name: ["remark"],
required: false,
col: {
span: 24,
},
disabled: true,
},
materialList: {
value: [],
title: "物料信息",
type: "Linktable",
col: { span: 24 },
name: ["materialList"],
recordCreatorProps: "false",
required: true,
linkconfig: {
urlchangeval: {
//根据url接口 改变某个value
database: (params) =>
doFetch({
url: "/ngic-workmanship/wmsMaterieInventory/queryByMaterieControlNo",
params,
}),
params: { materieControlNo: "linked" },
effectresult: {
usableNum: "usableNum",
length: "length",
width: "width",
weight: "weight",
holdNum: "holdNum",
storePositionName: "storePositionName",
},
},
},
columns: [
{
title: (
<span>
物料编码-名称 <b style={{ color: "red" }}>*</b>
</span>
),
dataIndex: "materieCode",
key: "materieCode",
valueType: "select",
readonly: true,
width: 180,
renderFormItem: ({ entry }) => {
return (
<span>
{entry?.materieCode}-{entry?.materieName}
</span>
);
},
},
{
title: (
<span>
批次号
{/* 批次号 <b style={{ color: "red" }}>*</b> */}
</span>
),
dataIndex: "materieControlNo",
key: "materieControlNo",
width: 220,
// render: () => {
// return <div>123123</div>
// },
// request: async (_) => {
// console.log(_);
// let res = await doFetch({
// url: "/ngic-workmanship/wmsMaterieInventory/query/selectbox",
// params: { storeId: drawprops?.storeId },
// });
// return res?.data?.dataList;
// },
fieldProps: {
allowClear: true,
showSearch: true,
},
// formItemProps: () => {
// return {
// rules: [{ required: true, message: "此项为必填项" }],
// };
// },
renderFormItem: ({ entry }) => {
if (entry?.isCollect) {
return <span>{entry?.materieControlNo}</span>;
} else {
return <MySelect record={entry} />;
}
// return storeId;
},
},
{
title: "库位名称",
dataIndex: "storePositionName",
key: "storePositionName",
readonly: true,
},
{
title: "米数",
dataIndex: "length",
key: "length",
readonly: "length",
},
{
title: "宽度",
dataIndex: "width",
key: "width",
readonly: "width",
},
{
title: "下架数量",
dataIndex: "usableNum",
key: "usableNum",
readonly: "usableNum",
},
{
title: "出库数量",
dataIndex: "outstroeNum",
key: "outstroeNum",
readonly: "outstroeNum",
},
{
title: "可用库存",
dataIndex: "usableNum",
key: "usableNum",
readonly: "usableNum",
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
readonly: "productionUnitName",
},
],
rowKey: "id",
},
};
}, [drawprops]);
//操作完成后刷新
function reload() {
actionRef.current.reload();
ChildRef?.onRefresh();
message.success("操作成功");
setdrawprops((s) => ({
...s,
visible: false,
fields: {},
}));
}
const columns = useMemo(() => {
if (activeTabKey == "1") {
return [
{
title: "出库单号",
dataIndex: "materieOutstoreNo",
key: "materieOutstoreNo",
render: (dom, record) => {
return (
<a
onClick={() => {
const detail = defaultFields.detail(
setSelectKeys,
PrintButton
);
setdrawprops((s) => ({
...s,
visible: true,
//查看详情 props
val: "detail",
title: `查看详情`,
...detail,
totalPath:
"/ngic-workmanship/wmsMaterieOutstore/getOutStoreInfoById",
totalParams: { id: record.id },
extra: (
<Button
onClick={async () => {
handlePrint();
}}
>
打印
</Button>
),
}));
}}
>
{dom}
</a>
);
},
},
{
title: "出库类型",
dataIndex: "outstoreTypeName",
key: "outstoreType",
valueType: "select",
search: false,
options: [
{
label: "生产领料出库",
value: "1",
},
{
label: "销售出库",
value: "2",
},
{
label: "报废出库",
value: "3",
},
{
label: "其他出库",
value: "4",
},
],
},
{
title: "出库仓库",
dataIndex: "storeName",
search: false,
key: "storeId",
fieldProps: {
allowClear: true,
showSearch: true,
},
options: {
database: () =>
doFetch({
url: "/ngic-auth/sysStore/selectionBox",
params: { factoryIdList: [] },
}),
params: {},
},
valueType: "select",
},
{
title: "备注",
dataIndex: "remark",
key: "remark",
search: false,
},
{
title: "创建人",
dataIndex: "createUserName",
key: "createUserName",
},
{
title: "创建时间",
dataIndex: "createTime",
key: "createTime",
valueType: "dateRange",
formItemProps: {
name: "createTimeList",
},
},
{
title: "状态",
dataIndex: "statusName",
key: "status",
valueType: "select",
options: [
{
label: "待下架",
value: "0",
},
{
label: "下架中",
value: "1",
},
],
},
{
title: "操作",
valueType: "option",
width: 240,
render: (text, record, _, action) => {
return [
getPrem(
"equipmentCustomer_save",
action,
"下架采集",
async () => {
const details = await doFetch({
url: "/ngic-workmanship/wmsMaterieOutstore/getOutStoreInfoById",
params: {
id: record?.id,
},
});
const detailData = details.data?.data;
if (detailData) {
for (let i in outStoreFields) {
outStoreFields[i].value = detailData[i];
}
}
setStoreIdFn(detailData?.storeId);
setdrawprops((s) => ({
...s,
visible: true,
//查看详情 props
val: "edit",
title: `下架采集`,
fields: outStoreFields,
id: record?.id,
}));
setInitialState((s) => {
return {
...s,
submits: {},
};
});
}
),
getPrem("equipmentCustomer_deleteById", action, "关单", null, {
title: "确认关单？",
onConfirm: () => {
doFetch({
url: "/ngic-workmanship/wmsMaterieOutstore/close",
params: { id: record.id },
}).then((res) => {
if (res.code == "0000") {
reload();
}
});
},
}),
record.status == 0 &&
getPrem("equipmentCustomer_deleteById", action, "删除", null, {
title: "确认删除？",
onConfirm: () => {
doFetch({
url: "/ngic-workmanship/wmsMaterieOutstore/deleteById",
params: { id: record.id },
}).then((res) => {
if (res.code == "0000") {
reload();
}
});
},
}),
];
},
},
];
} else {
return [
{
title: "出库单号",
dataIndex: "materieOutstoreNo",
key: "materieOutstoreNo",
render: (dom, record) => {
return (
<a
onClick={() => {
setdrawprops((s) => ({
...s,
visible: true,
//查看详情 props
val: "detail",
title: `查看详情`,
...defaultFields?.detail,
totalPath:
"/ngic-workmanship/wmsMaterieOutstoreHis/getOutStoreInfoById",
totalParams: { id: record.id },
}));
}}
>
{dom}
</a>
);
},
},
{
title: "出库类型",
dataIndex: "outstoreTypeName",
search: false,
key: "outstoreType",
valueType: "select",
options: [
{
label: "生产领料出库",
value: "1",
},
{
label: "销售出库",
value: "2",
},
{
label: "报废出库",
value: "3",
},
{
label: "其他出库",
value: "4",
},
],
},
{
title: "出库仓库",
search: false,
dataIndex: "storeName",
key: "storeId",
fieldProps: {
allowClear: true,
showSearch: true,
},
options: {
database: () =>
doFetch({
url: "/ngic-auth/sysStore/selectionBox",
params: { factoryIdList: [] },
}),
params: {},
},
valueType: "select",
},
{
title: "备注",
dataIndex: "remark",
key: "remark",
search: false,
},
{
title: "创建人",
dataIndex: "createUserName",
key: "createUserName",
},
{
title: "创建时间",
dataIndex: "createTime",
key: "createTime",
valueType: "dateRange",
formItemProps: {
name: "createTimeList",
},
},
{
title: "完成时间",
dataIndex: "finishTime",
search: false,
key: "finishTime",
valueType: "dateRange",
formItemProps: {
name: "finishTimeList",
},
},
{
title: "状态",
dataIndex: "statusName",
search: false,
key: "status",
},
];
}
}, [activeTabKey]);
const handlePrint = useReactToPrint({
content: () => printRef.current.dom.current,
});
const mutiPrint = useReactToPrint({
content: () => mutiPrintRef.current.dom.current,
});
const PrintButton = (
<Button
disabled={!selectKeys.length}
onClick={() => {
mutiPrint();
}}
>
打印
</Button>
);
useEffect(() => {
const detail = defaultFields.detail(setSelectKeys, PrintButton);
setdrawprops((s) => ({
...s,
...detail,
}));
}, [selectKeys]);
const tableprops = {
...props,
pageextra:
activeTabKey == "1" ? (
<Button
type="primary"
onClick={() => {
setdrawprops((s) => ({
...s,
visible: true,
title: itemz["four"],
fields: defaultFields["four"],
outstoreType: keytoval["four"],
val: "add", //类型
extra: null,
}));
}}
>
新增
</Button>
) : (
"none"
),
tabList: [
{
tab: "未完成",
key: "1",
},
{
tab: "已完成",
key: "2",
},
],
activeTabKey,
onTabChange,
columns,
extraparams: {
outstoreType: 4,
},
path:
activeTabKey == "1"
? "/ngic-workmanship/wmsMaterieOutstore/queryList"
: "/ngic-workmanship/wmsMaterieOutstoreHis/queryList",
};
return (
<div>
<div style={{ position: "fixed", bottom: -100000 }}>
<PrintDom ref={printRef} {...drawprops} />
</div>
<div style={{ display: "none" }}>
<PrintQrCode ref={mutiPrintRef} selectedItems={selectKeys} />
</div>
<AutoTable
{...tableprops}
actionRef={actionRef}
onRef={(node) => (ChildRef = node)}
></AutoTable>
<DrawInitForm
{...drawprops}
submitData={async (value) => {
if (drawprops.val == "add") {
let newfileds = JSON.parse(JSON.stringify(value));
newfileds.materialList = newfileds?.materialList?.map((it) => {
return {
materieId: it?.materieId,
outstroeNum: it?.outstroeNum,
};
});
let res = await doFetch({
url: "/ngic-workmanship/wmsMaterieOutstore/saveOutStore",
params: { ...newfileds, outstoreType: drawprops.outstoreType },
});
if (res.code == "0000") {
reload();
}
} else if (drawprops.val == "edit") {
let newfileds = JSON.parse(JSON.stringify(value));
const materialList = newfileds?.materialList?.map((it) => {
return {
id: it?.id,
materieId: it?.materieId,
materieControlNo: it?.materieControlNo,
};
});
let res = await doFetch({
url: "/ngic-workmanship/wmsMaterieOutstore/download",
params: { id: drawprops.id, materialList },
});
if (res.code == "0000") {
reload();
}
}
}}
onChange={async (changedValues, allValues) => {
for (let i in changedValues) {
if (i == "storeId") {
let res = await doFetch({
url: "/ngic-workmanship/pmMaterie/selectboxByStoreId",
params: { storeId: changedValues["storeId"] },
}),
options = res?.data?.dataList;
setdrawprops((s) => {
let fields = JSON.parse(JSON.stringify(s.fields));
for (let i in fields) {
fields[i].value = allValues[i];
}
fields["materialList"].linkconfig = {
urlchangeval: {
//根据url接口 改变某个value
database: (params) =>
doFetch({
url: "/ngic-workmanship/pmMaterie/queryById",
params,
}),
params: { materieId: "linked" },
effectresult: {
specificationModel: "specificationModel", //key 为列表更新值 value为response 返回值
ironLoss: "ironLoss",
usableNum: "usableNum",
outstroeNum: "outstroeNum",
sheetThickness: "sheetThickness",
shopSign: "shopSign",
usableNum: "usableNum",
productionUnitName: "productionUnitName",
},
},
};
fields["materialList"].columns = [
{
title: (
<span>
物料编码-名称 <b style={{ color: "red" }}>*</b>
</span>
),
dataIndex: "materieId",
key: "materieId",
valueType: "select",
fieldProps: {
allowClear: true,
showSearch: true,
options,
},
formItemProps: () => {
return {
rules: [{ required: true, message: "此项为必填项" }],
};
},
editable: true,
},
{
title: <span>规格型号</span>,
dataIndex: "specificationModel",
key: "specificationModel",
readonly: "specificationModel",
},
{
title: "铁损",
dataIndex: "ironLoss",
key: "ironLoss",
readonly: "ironLoss",
},
{
title: "片厚",
dataIndex: "sheetThickness",
key: "sheetThickness",
readonly: "sheetThickness",
},
{
title: "牌号",
dataIndex: "shopSign",
key: "shopSign",
readonly: "shopSign",
},
{
title: (
<span>
出库数量<b style={{ color: "red" }}>*</b>
</span>
),
dataIndex: "outstroeNum",
key: "outstroeNum",
formItemProps: () => {
return {
rules: [{ required: true, message: "此项为必填项" }],
};
},
valueType: "digit",
},
{
title: "可用库存",
dataIndex: "usableNum",
key: "usableNum",
readonly: "usableNum",
},
{
title: "库存单位",
dataIndex: "productionUnitName",
key: "productionUnitName",
readonly: "productionUnitName",
},
{
title: "操作",
valueType: "option",
width: 70,
render: (text, record, _, action) => [
<a key="delete" onClick={() => {}}>
删除
</a>,
],
},
];
fields["materialList"].value = undefined;
let newfields = {
...fields,
};
console.log("123123123131", newfields);
return {
...s,
fields: newfields,
};
});
}
}
console.log(changedValues, allValues);
}}
reload={reload}
/>
</div>
);
}
export default Outstore;