import React, { useEffect, useRef, useReducer } from "react";
import {
Button,
Tooltip,
Row,
Divider,
Drawer,
Table,
Col,
Steps,
Card,
} from "antd";
import AutoTable from "@/components/AutoTable";
import getPrem from "@/utils/getPrem"; //权限判断fn
import { useRequest } from "umi";
import defaultFields from "./fields";
import { doFetch } from "@/utils/doFetch";
import Details from "@/components/Details";
import { gongyiDetail } from "@/utils/detailTotalCard";
import Coltext from "@/components/Coltext";
import InitForm from "@/components/InitForm";
import styles from "./index.less";
import {
PlusSquareOutlined,
MinusSquareOutlined,
MinusCircleOutlined,
ArrowDownOutlined,
ArrowUpOutlined,
} from "@ant-design/icons";
const { Step } = Steps;
const initState = {
vs: false,
fields: {},
iftype: {},
curitem: {},
detail: {
dataSource: {},
totalCard: [],
},
visible: false,
process: [],
rightSelectedRows: [],
current: 0,
stepData: [
{
processLineStepProcedureList: [],
stepSort: 0,
},
],
detailStepData: [],
},
otherBasic = {
workingProcedureNames: "步骤工序",
};
function reducer(state, action) {
let { type } = action,
newState = {};
switch (type) {
case "add":
newState = {
...state,
vs: true,
iftype: {
title: "新增工艺路线",
val: type,
},
fields: { ...action.fields },
};
break;
case "edit":
newState = {
...state,
vs: true,
iftype: {
title: "编辑工艺路线",
val: type,
},
fields: { ...action.fields },
curitem: action.curitem,
};
break;
case "design":
newState = {
...state,
vs: true,
iftype: {
title: "工艺设计",
val: type,
},
fields: {},
curitem: action.curitem,
process: action.process,
stepData: action.stepData,
};
break;
case "see":
newState = {
...state,
detail: {
dataSource: action.dataSource,
totalCard: [...gongyiDetail],
},
detailStepData: action.detailStepData,
visible: true,
};
break;
case "changeProcess":
newState = {
...state,
process: action.process,
};
break;
case "changeRightSelect":
newState = {
...state,
rightSelectedRows: action.rightSelectedRows,
};
break;
case "changeCurrent":
newState = {
...state,
current: action.current,
};
break;
case "changeStep":
newState = {
...state,
stepData: action.stepData,
};
break;
case "close":
newState = {
vs: false,
fields: {},
iftype: {},
curitem: {},
detail: {
dataSource: {},
totalCard: [],
},
visible: false,
process: [],
rightSelectedRows: [],
current: 0,
stepData: [
{
processLineStepProcedureList: [],
stepSort: 0,
},
],
detailStepData: [],
};
break;
}
return newState;
}
const Gongyi = (props) => {
let actionRef = useRef(),
ChildRef = null;
function reload() {
actionRef?.current?.reload();
ChildRef?.onRefresh();
}
const { run, loading } = useRequest(doFetch, {
manual: true,
formatResult: (res) => res,
onSuccess: (result, params) => {
if (result.code == "0000") {
reload();
dispatch({ type: "close" });
}
},
}),
[state, dispatch] = useReducer(reducer, initState),
{
vs,
fields,
iftype,
curitem,
detail,
visible,
process,
rightSelectedRows,
current,
stepData,
detailStepData,
} = state,
columns = [
{
title: "工艺路线编号",
dataIndex: "processLineCode",
key: "processLineCode",
},
{
title: "工艺路线名称",
dataIndex: "processLineName",
key: "processLineName",
render: (_, row) => {
return (
<Tooltip title={row.processLineName}>
<a
className="table-cell"
onClick={() => {
doFetch({
url: "/ngic-workmanship/pmProcessLine/queryDetailById",
params: { id: row.id },
}).then((res) => {
if (res.code == "0000") {
let dataSource = res?.data?.data ?? {};
dispatch({
type: "see",
dataSource,
detailStepData:
dataSource?.processLineStepDtoList ?? [],
});
}
});
}}
>
{row.processLineName}
</a>
</Tooltip>
);
},
},
{
title: "所属工厂",
dataIndex: "factoryName",
key: "factoryName",
},
{
title: "所属车间",
dataIndex: "shopName",
key: "shopName",
},
{
title: "工艺路线类型",
dataIndex: "processLineTypeName",
key: "processLineTypeName",
options: [
{
label: "常规",
value: 1,
},
{
label: "返工",
value: 2,
},
],
valueType: "select",
formItemProps: {
name: "processLineType",
},
},
{
title: "能力",
dataIndex: "capacity",
key: "capacity",
search: false,
},
{
title: "描述",
dataIndex: "remark",
key: "remark",
search: false,
},
{
title: "操作",
dataIndex: "option_dataindex",
key: "option_dataindex",
valueType: "option",
width: 255,
render: (text, row, _, action) => extraAction(text, row, _, action),
},
],
columnsc = [
{
title: "工序编号",
dataIndex: "workingProcedureCode",
key: "workingProcedureCode",
search: false,
ellipsis: true,
},
{
title: "工序名称",
dataIndex: "workingProcedureName",
key: "workingProcedureName",
search: false,
ellipsis: true,
},
{
title: "工序类型",
dataIndex: "workingProcedureTypeName",
key: "workingProcedureTypeName",
search: false,
ellipsis: true,
},
{
title: "采集方式",
dataIndex: "collectionModeName",
key: "collectionModeName",
search: false,
ellipsis: true,
},
];
function extraAction(text, record, _, action) {
return [
getPrem("sysDepartment_save", action, "修改", () => {
doFetch({
url: "/ngic-workmanship/pmProcessLine/queryDetailById",
params: { id: record.id },
}).then((res) => {
if (res.code == "0000") {
let data = res?.data?.data ?? {};
for (let i in defaultFields) {
defaultFields[i].value = record[i];
if (i == "factoryId" || i == "shopId") {
if (data?.processLineStepDtoList?.length > 0) {
defaultFields[i].disabled = true;
} else {
defaultFields[i].disabled = false;
}
}
}
let newData =
data?.processLineStepDtoList?.map((it) => {
let itemProcessLineStepProcedure =
it.processLineStepProcedureList.map((item) => {
return item.workingProcedureName;
});
return itemProcessLineStepProcedure.join(",");
}) ?? [],
workingProcedureNames = newData.join("—>");
dispatch({
type: "edit",
fields: defaultFields,
curitem: { ...data, workingProcedureNames },
});
}
});
}),
getPrem("sysDepartment_save", action, "工艺设计", () => {
let all = async () => {
let detail = await doFetch({
url: "/ngic-workmanship/pmProcessLine/queryDetailById",
params: { id: record.id },
}),
table = await doFetch({
url: "/ngic-workmanship/workingProcedure/querySelectedList",
params: { shopId: record.shopId, processLineId: record.id },
});
return {
detailData: detail?.data?.data ?? {},
tableData: table?.data?.dataList ?? [],
};
};
all().then((res) => {
let data = res?.detailData ?? {};
dispatch({
type: "design",
curitem: record,
process: res?.tableData,
stepData: data?.processLineStepDtoList ?? [
{
processLineStepProcedureList: [],
stepSort: 0,
},
],
});
});
}),
getPrem("sysDepartment_deleteById", action, "删除", null, {
title: "确认删除该工艺路线？",
onConfirm: () => {
run({
url: "/ngic-workmanship/pmProcessLine/deleteById",
params: { id: record.id },
});
},
}),
];
}
let saveData = (values, fn) => {
let params, url;
if (iftype.val == "design") {
let processLineStepList = [];
stepData?.map((it) => {
if (it.processLineStepProcedureList.length > 0) {
let el = {
stepSort: it.stepSort,
lineStepProcedureList: it.processLineStepProcedureList.map(
(item) => item.id
),
};
processLineStepList.push(el);
}
});
for (let i = 0; i < processLineStepList.length; i++) {
processLineStepList[i].stepSort = i;
}
url = "/ngic-workmanship/pmProcessLineStep/save";
params = {
processLineId: curitem.id,
processLineStepList,
};
} else {
let newfields = JSON.parse(JSON.stringify(values)),
difrid = iftype.val == "edit" ? { id: curitem.id } : {};
url = "/ngic-workmanship/pmProcessLine/save";
params = {
...newfields,
...difrid,
};
}
run({ url, params });
};
let extrarender = [
<Button
disabled={!getPrem("sysDepartment_save", "ifs")}
type="primary"
onClick={() => {
for (let i in defaultFields) {
defaultFields[i].value = null;
defaultFields[i].disabled = false;
}
dispatch({ type: "add", fields: defaultFields });
}}
>
新增
</Button>,
];
return (
<div>
<AutoTable
pagetitle={props.route.name} //页面标题
pageextra={extrarender} //页面操作 新增or批量删除
columns={columns}
path="/ngic-workmanship/pmProcessLine/queryList"
actionRef={actionRef}
onRef={(node) => (ChildRef = node)}
></AutoTable>
{vs && iftype.val == "design" && (
<div>
<Button
type="primary"
size="large"
loading={loading || !vs}
style={{
position: "absolute",
left: 14,
bottom: 6,
zIndex: 9999,
width: "52%",
}}
onClick={() => {
saveData();
}}
>
提交
</Button>
<div
style={{
position: "absolute",
right: 14,
bottom: 0,
zIndex: 9999,
width: "45%",
border: "1px solid #1890ff",
padding: 10,
}}
>
<div
style={{
marginBottom: 12,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
}}
>
<span>工序</span>
<Button
onClick={() => {
let newStep = JSON.parse(JSON.stringify(stepData)),
rightSelectedRowsIds = rightSelectedRows?.map(
(item) => item.id
);
for (let i = 0; i < newStep.length; i++) {
let it = newStep[i];
if (it.stepSort == current) {
it.processLineStepProcedureList =
it?.processLineStepProcedureList
.filter(
(item) =>
rightSelectedRowsIds.indexOf(item.id) == -1
)
.concat(rightSelectedRows);
}
}
let newProcess = process.filter(
(it) => rightSelectedRowsIds.indexOf(it.id) == -1
);
dispatch({ type: "changeStep", stepData: newStep });
dispatch({ type: "changeProcess", process: newProcess });
dispatch({
type: "changeRightSelect",
rightSelectedRows: [],
});
}}
disabled={
process.length == 0 ||
rightSelectedRows.length == 0 ||
stepData.length == 0
}
type="primary"
>
添加到工艺工序
</Button>
</div>
<Table
columns={columnsc}
dataSource={process}
pagination={false}
rowSelection={{
selectedRowKeys: rightSelectedRows.map((it) => it.id),
onChange: (selectedRowKeys, selectedRows) => {
dispatch({
type: "changeRightSelect",
rightSelectedRows: selectedRows,
});
},
}}
rowKey="id"
scroll={{
y: 700,
}}
/>
</div>
</div>
)}
<Drawer
title={iftype.title}
visible={vs}
onClose={() => dispatch({ type: "close" })}
footer={false}
destroyOnClose={true}
width={"100%"}
style={{ position: "absolute" }}
getContainer={false}
maskClosable={false}
>
{iftype.val == "edit" && (
<>
<Row gutter={[16, 10]}>
{Object.keys(otherBasic).map((it) => {
return (
<Coltext
label={otherBasic[it]}
value={curitem[it]}
key={it}
col={{ span: 24 }}
/>
);
})}
</Row>
<Divider />
</>
)}
{iftype.val == "design" ? (
<div style={{ height: "95%", width: "52%" }}>
<div className="gongyiStep">
<Steps
direction="vertical"
current={current}
onChange={(c) => {
dispatch({ type: "changeCurrent", current: c });
}}
>
{stepData?.map((it, i) => {
return (
<Step
key={i}
title={
<div style={{ width: "100%", display: "flex" }}>
<div className={styles.stepTitle}>
<Tooltip title={`步骤${i + 1}`}>
<span>{`步骤${i + 1}`}</span>
</Tooltip>
</div>
<Tooltip title="增加步骤">
<Button
onClick={(event) => {
event.stopPropagation();
let newStepData = JSON.parse(
JSON.stringify(stepData)
),
addIndex = newStepData
.map((el) => el.stepSort)
.indexOf(i);
let addata = [
{
processLineStepProcedureList: [],
stepSort: i + 1,
},
],
newCurrent = i + 1;
let firstArr = newStepData.slice(
0,
addIndex + 1
),
lastArr = newStepData.slice(
addIndex + 1,
newStepData.length
);
if (lastArr.length) {
for (let j = 0; j < lastArr.length; j++) {
lastArr[j].stepSort =
lastArr[j].stepSort + 1;
}
}
let allArr = firstArr
.concat(addata)
.concat(lastArr);
dispatch({
type: "changeStep",
stepData: allArr,
});
dispatch({
type: "changeCurrent",
current: newCurrent,
});
}}
type="link"
icon={<PlusSquareOutlined />}
></Button>
</Tooltip>
{it?.processLineStepProcedureList?.length == 0 && (
<Tooltip title="删除步骤">
<Button
onClick={(event) => {
event.stopPropagation();
let newStepData = stepData.filter(
(it) => it.stepSort != i
);
let newStepArr = newStepData.map(
(el, index) => {
el.stepSort = index;
return el;
}
),
newCurrent = i > 1 ? i - 1 : 0;
dispatch({
type: "changeStep",
stepData: newStepArr,
});
dispatch({
type: "changeCurrent",
current: newCurrent,
});
}}
type="link"
icon={<MinusSquareOutlined />}
></Button>
</Tooltip>
)}
{i != 0 &&
it?.processLineStepProcedureList?.length != 0 && (
<Tooltip title="升序">
<Button
onClick={(event) => {
event.stopPropagation();
let el = stepData[i];
el.stepSort = el.stepSort - 1;
stepData[i - 1].stepSort =
stepData[i - 1].stepSort + 1;
stepData?.sort((a, b) => {
return a.stepSort - b.stepSort;
});
dispatch({
type: "changeStep",
stepData: stepData,
});
dispatch({
type: "changeCurrent",
current: el.stepSort,
});
}}
type="link"
icon={<ArrowUpOutlined />}
></Button>
</Tooltip>
)}
{i != stepData.length - 1 &&
it?.processLineStepProcedureList?.length != 0 && (
<Tooltip title="降序">
<Button
onClick={(event) => {
event.stopPropagation();
let el = stepData[i];
el.stepSort = el.stepSort + 1;
stepData[i + 1].stepSort =
stepData[i + 1].stepSort - 1;
stepData?.sort((a, b) => {
return a.stepSort - b.stepSort;
});
dispatch({
type: "changeStep",
stepData: stepData,
});
dispatch({
type: "changeCurrent",
current: el.stepSort,
});
}}
type="link"
icon={<ArrowDownOutlined />}
></Button>
</Tooltip>
)}
</div>
}
description={
it?.processLineStepProcedureList && (
<div style={{ width: "100%" }}>
<Row gutter={[12, 12]}>
{it?.processLineStepProcedureList?.map(
(item, j) => {
return (
<Col span={8} key={j}>
<div
style={{
padding: 8,
border: "1px solid #d9d9d9",
overflow: "hidden",
width: "100%",
}}
>
<div
style={{ width: 30, float: "right" }}
>
<Tooltip title="删除工序">
<Button
onClick={(event) => {
event.stopPropagation();
let newProcessLineStepProcedureList =
it.processLineStepProcedureList?.filter(
(el) => el.id != item.id
);
let newStepData = stepData.map(
(el) => {
if (el.stepSort == i) {
el.processLineStepProcedureList =
newProcessLineStepProcedureList;
}
return el;
}
);
dispatch({
type: "changeStep",
stepData: newStepData,
});
dispatch({
type: "changeProcess",
process: [...process, item],
});
dispatch({
type: "changeCurrent",
current: i,
});
}}
type="link"
icon={<MinusCircleOutlined />}
></Button>
</Tooltip>
</div>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
float: "none",
}}
>
<Tooltip
title={`工序编号：${item.workingProcedureCode}`}
>
<div
className={styles.one}
style={{ marginBottom: 12 }}
>
工序编号：
{item.workingProcedureCode}
</div>
</Tooltip>
<Tooltip
title={`工序名称：${item.workingProcedureName}`}
>
<div className={styles.one}>
工序名称：
{item.workingProcedureName}
</div>
</Tooltip>
</div>
</div>
</Col>
);
}
)}
</Row>
</div>
)
}
/>
);
})}
</Steps>
</div>
</div>
) : (
<InitForm
fields={fields}
submitData={(values, fn) => {
saveData(values, fn);
}}
onChange={(changedValues, allValues) => {}}
submitting={loading || !vs}
></InitForm>
)}
</Drawer>
<Details
title="工艺路线详情"
visible={visible}
onClose={() => dispatch({ type: "close" })}
footer={false}
destroyOnClose={true}
width={"100%"}
bottomNode={
<Card
title="工艺工序"
bordered={false}
style={{ marginBottom: 16 }}
bodyStyle={{ padding: "16px 10px" }}
>
<div className="gongyiStep">
<Steps direction="vertical">
{detailStepData?.map((it, i) => {
return (
<Step
disabled={true}
key={i}
title={
<div style={{ width: "100%", display: "flex" }}>
<div className={styles.stepTitle}>
<Tooltip title={`步骤${i + 1}`}>
<span>{`步骤${i + 1}`}</span>
</Tooltip>
</div>
</div>
}
description={
it?.processLineStepProcedureList && (
<div style={{ width: "100%" }}>
<Row gutter={[12, 12]}>
{it?.processLineStepProcedureList?.map(
(item, j) => {
return (
<Col span={8} key={j}>
<div
style={{
padding: 12,
border: "1px solid #d9d9d9",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
}}
>
<Tooltip
title={`工序编号：${item.workingProcedureCode}`}
>
<div
className={styles.one}
style={{ marginBottom: 12 }}
>
工序编号：
{item.workingProcedureCode}
</div>
</Tooltip>
<Tooltip
title={`工序名称：${item.workingProcedureName}`}
>
<div className={styles.one}>
工序名称：
{item.workingProcedureName}
</div>
</Tooltip>
</div>
</div>
</Col>
);
}
)}
</Row>
</div>
)
}
/>
);
})}
</Steps>
</div>
</Card>
}
{...detail}
></Details>
</div>
);
};
export default Gongyi;