feat:工艺画布scFlow更名xtFlow;工艺包产品常驻画布为终点节点可直接连线;节点按物料真实类型着色;fix:拖线新增setData覆盖params_json致排一次棒表单报错;perf:vue-flow分包prefetch预取+查看器合并重复布局;style:route_show查看页卡片化紧凑布局
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
parent
f7fee89290
commit
dea337b632
|
|
@ -10,7 +10,7 @@
|
|||
<script>
|
||||
import { Handle, Position } from "@vue-flow/core";
|
||||
|
||||
// 物料节点卡片：scFlowEditor（编辑）与 scFlowViewer（查看）共用，保证两端视觉一致
|
||||
// 物料节点卡片：xtFlowEditor（编辑）与 xtFlowViewer（查看）共用，保证两端视觉一致
|
||||
export default {
|
||||
name: "MaterialNode",
|
||||
components: { Handle },
|
||||
|
|
|
|||
|
|
@ -1,147 +0,0 @@
|
|||
<template>
|
||||
<div class="sc-flow-viewer">
|
||||
<VueFlow
|
||||
:id="flowId"
|
||||
:min-zoom="0.2"
|
||||
:max-zoom="2"
|
||||
:nodes-draggable="false"
|
||||
:nodes-connectable="false"
|
||||
:elements-selectable="false"
|
||||
@nodes-initialized="onNodesInit"
|
||||
>
|
||||
<template #node-material="{ data }">
|
||||
<material-node :data="data" />
|
||||
</template>
|
||||
<Background :gap="18" pattern-color="#e6e9ef" />
|
||||
<Controls :show-interactive="false" />
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueFlow, useVueFlow } from "@vue-flow/core";
|
||||
import { Background } from "@vue-flow/background";
|
||||
import { Controls } from "@vue-flow/controls";
|
||||
import MaterialNode from "./flow/MaterialNode.vue";
|
||||
import { layoutGraph } from "./flow/dagreLayout";
|
||||
import "@vue-flow/core/dist/style.css";
|
||||
import "@vue-flow/core/dist/theme-default.css";
|
||||
import "@vue-flow/controls/dist/style.css";
|
||||
|
||||
// 每个实例分配唯一 flowId，避免 Vue Flow 全局 store 按固定 id 缓存导致多实例互相覆盖
|
||||
let viewerSeq = 0;
|
||||
|
||||
/**
|
||||
* 工艺路线只读流程图（Vue Flow 版），与 scFlowEditor 共用节点样式与布局。
|
||||
* props 与 scDegra 对齐：nodes [{id,label}]、edges [{id,source,target,label}]
|
||||
*/
|
||||
export default {
|
||||
name: "scFlowViewer",
|
||||
components: { VueFlow, Background, Controls, MaterialNode },
|
||||
props: {
|
||||
nodes: { type: Array, default: () => [] },
|
||||
edges: { type: Array, default: () => [] },
|
||||
rankdir: { type: String, default: "TB" },
|
||||
},
|
||||
setup() {
|
||||
const flowId = "sc-flow-viewer-" + ++viewerSeq;
|
||||
const { fitView, setNodes, setEdges } = useVueFlow(flowId);
|
||||
return { flowId, fitView, setNodes, setEdges };
|
||||
},
|
||||
watch: {
|
||||
nodes() {
|
||||
this.rebuild();
|
||||
},
|
||||
edges() {
|
||||
this.rebuild();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.rebuild();
|
||||
},
|
||||
methods: {
|
||||
/** nodes/edges -> Vue Flow 图；节点类型按出入度推断（无入边=原料，无出边=成品） */
|
||||
rebuild() {
|
||||
const sourceIds = new Set();
|
||||
const targetIds = new Set();
|
||||
const rawEdges = (this.edges || [])
|
||||
.filter((e) => e.source != null && e.target != null)
|
||||
.map((e) => {
|
||||
const sid = String(e.source);
|
||||
const tid = String(e.target);
|
||||
sourceIds.add(sid);
|
||||
targetIds.add(tid);
|
||||
return {
|
||||
id: e.id != null ? String(e.id) : sid + "-" + tid,
|
||||
source: sid,
|
||||
target: tid,
|
||||
label: e.label || "",
|
||||
type: "smoothstep",
|
||||
markerEnd: "arrowclosed",
|
||||
style: { stroke: "#409eff", strokeWidth: 2 },
|
||||
labelStyle: { fill: "#5b6370", fontSize: "12px", fontWeight: 500 },
|
||||
labelBgStyle: { fill: "#ffffff", stroke: "#e4e7ed", strokeWidth: 1 },
|
||||
labelBgPadding: [7, 4],
|
||||
labelBgBorderRadius: 6,
|
||||
};
|
||||
});
|
||||
const vNodes = (this.nodes || [])
|
||||
.filter((n) => n.id != null && n.label)
|
||||
.map((n) => {
|
||||
const id = String(n.id);
|
||||
const isSrc = sourceIds.has(id);
|
||||
const isTgt = targetIds.has(id);
|
||||
let kind = "mid";
|
||||
if (isTgt && !isSrc) kind = "final";
|
||||
else if (isSrc && !isTgt) kind = "raw";
|
||||
return { id, type: "material", data: { label: n.label, kind }, position: { x: 0, y: 0 } };
|
||||
});
|
||||
const nodeIds = new Set(vNodes.map((n) => n.id));
|
||||
const vEdges = rawEdges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
|
||||
|
||||
this.setEdges([]);
|
||||
this.setNodes(layoutGraph(vNodes, vEdges, { rankdir: this.rankdir }));
|
||||
this.setEdges(vEdges);
|
||||
this.doFit();
|
||||
},
|
||||
onNodesInit() {
|
||||
this.doFit();
|
||||
},
|
||||
doFit() {
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
this.fitView({ padding: 0.2, maxZoom: 1, duration: 200 });
|
||||
} catch (e) {
|
||||
/* noop */
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sc-flow-viewer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 320px;
|
||||
border: 1px solid #eef1f6;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fbfcfe;
|
||||
}
|
||||
/* 只读视图：隐藏连接点 */
|
||||
.sc-flow-viewer :deep(.vue-flow__handle) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.sc-flow-viewer .vue-flow__controls {
|
||||
box-shadow: 0 2px 10px rgba(31, 45, 61, 0.12);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flow-tip" v-if="!readonly">
|
||||
从左侧拖入原料作为起点 → 从节点圆点拉线到空白处生成下一道工序；单击线条编辑，右键线条删工序 / 右键节点移除物料
|
||||
从左侧拖入原料作为起点 → 节点间拉线新建工序，拉到空白处自动生成半成品，连到产品节点收尾；单击线条编辑，右键线条删工序 / 右键节点移除物料
|
||||
</div>
|
||||
<div class="flow-tip flow-tip--ro" v-else>当前状态不可编辑（仅创建中的工艺可编辑）</div>
|
||||
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
@edge-context-menu="onEdgeContextMenu"
|
||||
@node-context-menu="onNodeContextMenu"
|
||||
>
|
||||
<!-- 自定义物料节点（与 scFlowViewer 共用） -->
|
||||
<!-- 自定义物料节点（与 xtFlowViewer 共用） -->
|
||||
<template #node-material="{ data }">
|
||||
<material-node :data="data" />
|
||||
</template>
|
||||
|
|
@ -114,11 +114,14 @@ import "@vue-flow/controls/dist/style.css";
|
|||
let flowSeq = 0;
|
||||
|
||||
export default {
|
||||
name: "scFlowEditor",
|
||||
name: "xtFlowEditor",
|
||||
components: { VueFlow, Background, Controls, routeForm, MaterialNode },
|
||||
props: {
|
||||
// 工艺包 id
|
||||
routepack: { type: String, default: "" },
|
||||
// 工艺包产品：常驻画布作为终点节点，可从其他节点拉线连入
|
||||
productId: { type: [String, Number], default: "" },
|
||||
productName: { type: String, default: "" },
|
||||
// 是否只读（非“创建中”状态）
|
||||
readonly: { type: Boolean, default: false },
|
||||
},
|
||||
|
|
@ -163,6 +166,9 @@ export default {
|
|||
routepack() {
|
||||
this.reload();
|
||||
},
|
||||
productId() {
|
||||
if (this.routepack) this.reload();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loadMaterials();
|
||||
|
|
@ -198,7 +204,15 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
/** 节点类型：起点原料 / 终点成品 / 中间半成品 */
|
||||
/** 物料真实类型 → 节点配色：10成品 30原料 其余半成品 */
|
||||
kindOfType(t) {
|
||||
const s = String(t);
|
||||
if (s === "10") return "final";
|
||||
if (s === "30") return "raw";
|
||||
return "mid";
|
||||
},
|
||||
|
||||
/** 拓扑推断兜底（后端未返回物料类型时用）：起点原料 / 终点成品 / 中间半成品 */
|
||||
kindOf(id, targetIds) {
|
||||
const isSrc = this.routes.some((r) => String(r.material_in) === id);
|
||||
const isTgt = targetIds.has(id);
|
||||
|
|
@ -210,6 +224,7 @@ export default {
|
|||
/** 由 routes 构建 物料节点 + 工序边，并用 dagre 自动布局；合并未落库的种子节点 */
|
||||
buildGraph() {
|
||||
const matMap = {};
|
||||
const matKind = {};
|
||||
const targetIds = new Set();
|
||||
const edges = [];
|
||||
|
||||
|
|
@ -219,6 +234,8 @@ export default {
|
|||
const tid = String(r.material_out);
|
||||
if (!matMap[sid]) matMap[sid] = r.material_in_name || sid;
|
||||
if (!matMap[tid]) matMap[tid] = r.material_out_name || tid;
|
||||
if (r.material_in_type != null) matKind[sid] = this.kindOfType(r.material_in_type);
|
||||
if (r.material_out_type != null) matKind[tid] = this.kindOfType(r.material_out_type);
|
||||
targetIds.add(tid);
|
||||
|
||||
const locked = !!r.from_route;
|
||||
|
|
@ -245,12 +262,24 @@ export default {
|
|||
const routeNodes = Object.keys(matMap).map((id) => ({
|
||||
id,
|
||||
type: "material",
|
||||
data: { label: matMap[id], kind: this.kindOf(id, targetIds) },
|
||||
data: { label: matMap[id], kind: matKind[id] || this.kindOf(id, targetIds) },
|
||||
position: { x: 0, y: 0 },
|
||||
}));
|
||||
|
||||
// 工艺包产品常驻画布作为终点节点（尚未被任何工序引用时也显示）
|
||||
const pid = this.productId ? String(this.productId) : "";
|
||||
if (pid && !matMap[pid]) {
|
||||
routeNodes.push({
|
||||
id: pid,
|
||||
type: "material",
|
||||
data: { label: this.productName || "产品", kind: "final" },
|
||||
position: { x: 0, y: 0 },
|
||||
});
|
||||
}
|
||||
|
||||
// 已落库的物料从种子集合中剔除，其余种子保留在画布上
|
||||
const routeNodeIds = new Set(Object.keys(matMap));
|
||||
if (pid) routeNodeIds.add(pid);
|
||||
this.seedNodes = this.seedNodes.filter((s) => !routeNodeIds.has(s.id));
|
||||
|
||||
this.edges = edges;
|
||||
|
|
@ -293,14 +322,14 @@ export default {
|
|||
/* ============ 左侧面板拖拽入画布 ============ */
|
||||
onDragStart(evt, mat) {
|
||||
evt.dataTransfer.setData(
|
||||
"application/scflow",
|
||||
JSON.stringify({ id: mat.id, name: mat.full_name })
|
||||
"application/xtflow",
|
||||
JSON.stringify({ id: mat.id, name: mat.full_name, type: this.matType })
|
||||
);
|
||||
evt.dataTransfer.effectAllowed = "move";
|
||||
},
|
||||
onDrop(evt) {
|
||||
if (this.readonly) return;
|
||||
const raw = evt.dataTransfer.getData("application/scflow");
|
||||
const raw = evt.dataTransfer.getData("application/xtflow");
|
||||
if (!raw) return;
|
||||
let mat;
|
||||
try {
|
||||
|
|
@ -332,7 +361,7 @@ export default {
|
|||
const node = {
|
||||
id,
|
||||
type: "material",
|
||||
data: { label: mat.name, kind: "raw" },
|
||||
data: { label: mat.name, kind: this.kindOfType(mat.type) },
|
||||
position,
|
||||
};
|
||||
this.seedNodes.push(node);
|
||||
|
|
@ -423,6 +452,10 @@ export default {
|
|||
if (this.readonly) return;
|
||||
const node = evt.node || evt;
|
||||
const nid = node.id;
|
||||
if (this.productId && nid === String(this.productId)) {
|
||||
this.$message.warning("产品节点为工艺终点，不可移除");
|
||||
return;
|
||||
}
|
||||
const inUse = this.routes.some(
|
||||
(r) => String(r.material_in) === nid || String(r.material_out) === nid
|
||||
);
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
<template>
|
||||
<div class="xt-flow-viewer">
|
||||
<!-- 顶部工具栏：与 xtFlowEditor 视觉一致 -->
|
||||
<div class="flow-toolbar">
|
||||
<div class="flow-toolbar__left">
|
||||
<el-button icon="el-icon-full-screen" size="small" round @click="doFit">适应画布</el-button>
|
||||
</div>
|
||||
<div class="flow-legend">
|
||||
<span class="lg lg--raw">原料</span>
|
||||
<span class="lg lg--mid">半成品</span>
|
||||
<span class="lg lg--final">成品</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flow-canvas">
|
||||
<VueFlow
|
||||
:id="flowId"
|
||||
:min-zoom="0.2"
|
||||
:max-zoom="2"
|
||||
:nodes-draggable="false"
|
||||
:nodes-connectable="false"
|
||||
:elements-selectable="false"
|
||||
@nodes-initialized="onNodesInit"
|
||||
>
|
||||
<template #node-material="{ data }">
|
||||
<material-node :data="data" />
|
||||
</template>
|
||||
<Background :gap="18" pattern-color="#e6e9ef" />
|
||||
<Controls :show-interactive="false" />
|
||||
</VueFlow>
|
||||
<div v-if="isEmpty" class="flow-empty">
|
||||
<i class="el-icon-warning-outline flow-empty__icon"></i>
|
||||
<div>暂无工艺图数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueFlow, useVueFlow } from "@vue-flow/core";
|
||||
import { Background } from "@vue-flow/background";
|
||||
import { Controls } from "@vue-flow/controls";
|
||||
import MaterialNode from "./flow/MaterialNode.vue";
|
||||
import { layoutGraph } from "./flow/dagreLayout";
|
||||
import "@vue-flow/core/dist/style.css";
|
||||
import "@vue-flow/core/dist/theme-default.css";
|
||||
import "@vue-flow/controls/dist/style.css";
|
||||
|
||||
// 每个实例分配唯一 flowId，避免 Vue Flow 全局 store 按固定 id 缓存导致多实例互相覆盖
|
||||
let viewerSeq = 0;
|
||||
|
||||
/**
|
||||
* 工艺路线只读流程图（Vue Flow 版），与 xtFlowEditor 共用节点样式与布局。
|
||||
* props 与 scDegra 对齐：nodes [{id,label}]、edges [{id,source,target,label}]
|
||||
*/
|
||||
export default {
|
||||
name: "xtFlowViewer",
|
||||
components: { VueFlow, Background, Controls, MaterialNode },
|
||||
props: {
|
||||
nodes: { type: Array, default: () => [] },
|
||||
edges: { type: Array, default: () => [] },
|
||||
rankdir: { type: String, default: "TB" },
|
||||
},
|
||||
setup() {
|
||||
const flowId = "xt-flow-viewer-" + ++viewerSeq;
|
||||
const { fitView, setNodes, setEdges } = useVueFlow(flowId);
|
||||
return { flowId, fitView, setNodes, setEdges };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 首次 fit 不带动画，避免打开时视图跳动
|
||||
hasFitted: false,
|
||||
rebuildPending: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isEmpty() {
|
||||
return !(this.nodes || []).length;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
nodes() {
|
||||
this.scheduleRebuild();
|
||||
},
|
||||
edges() {
|
||||
this.scheduleRebuild();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.rebuild();
|
||||
},
|
||||
methods: {
|
||||
/** nodes/edges 通常被先后赋值，用微任务合并成一次 rebuild，避免双次 dagre 布局 */
|
||||
scheduleRebuild() {
|
||||
if (this.rebuildPending) return;
|
||||
this.rebuildPending = true;
|
||||
Promise.resolve().then(() => {
|
||||
this.rebuildPending = false;
|
||||
this.rebuild();
|
||||
});
|
||||
},
|
||||
/** nodes/edges -> Vue Flow 图；节点类型按出入度推断（无入边=原料，无出边=成品） */
|
||||
rebuild() {
|
||||
const sourceIds = new Set();
|
||||
const targetIds = new Set();
|
||||
const rawEdges = (this.edges || [])
|
||||
.filter((e) => e.source != null && e.target != null)
|
||||
.map((e) => {
|
||||
const sid = String(e.source);
|
||||
const tid = String(e.target);
|
||||
sourceIds.add(sid);
|
||||
targetIds.add(tid);
|
||||
return {
|
||||
id: e.id != null ? String(e.id) : sid + "-" + tid,
|
||||
source: sid,
|
||||
target: tid,
|
||||
label: e.label || "",
|
||||
type: "smoothstep",
|
||||
markerEnd: "arrowclosed",
|
||||
style: { stroke: "#409eff", strokeWidth: 2 },
|
||||
labelStyle: { fill: "#5b6370", fontSize: "12px", fontWeight: 500 },
|
||||
labelBgStyle: { fill: "#ffffff", stroke: "#e4e7ed", strokeWidth: 1 },
|
||||
labelBgPadding: [7, 4],
|
||||
labelBgBorderRadius: 6,
|
||||
};
|
||||
});
|
||||
const vNodes = (this.nodes || [])
|
||||
.filter((n) => n.id != null && n.label)
|
||||
.map((n) => {
|
||||
const id = String(n.id);
|
||||
const isSrc = sourceIds.has(id);
|
||||
const isTgt = targetIds.has(id);
|
||||
let kind = "mid";
|
||||
if (isTgt && !isSrc) kind = "final";
|
||||
else if (isSrc && !isTgt) kind = "raw";
|
||||
return { id, type: "material", data: { label: n.label, kind }, position: { x: 0, y: 0 } };
|
||||
});
|
||||
const nodeIds = new Set(vNodes.map((n) => n.id));
|
||||
const vEdges = rawEdges.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target));
|
||||
|
||||
this.setEdges([]);
|
||||
this.setNodes(layoutGraph(vNodes, vEdges, { rankdir: this.rankdir }));
|
||||
this.setEdges(vEdges);
|
||||
// 首次挂载交给 nodes-initialized（尺寸测量完成）再 fit；数据更新时尺寸已就绪，直接 fit
|
||||
if (this.hasFitted) this.doFit();
|
||||
},
|
||||
onNodesInit() {
|
||||
this.doFit();
|
||||
},
|
||||
doFit() {
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
this.fitView({ padding: 0.2, maxZoom: 1, duration: this.hasFitted ? 200 : 0 });
|
||||
this.hasFitted = true;
|
||||
} catch (e) {
|
||||
/* noop */
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.xt-flow-viewer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 320px;
|
||||
gap: 6px;
|
||||
}
|
||||
.flow-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
background: #f7f9fc;
|
||||
border: 1px solid #eef1f6;
|
||||
border-radius: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flow-toolbar__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flow-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.lg {
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
}
|
||||
.lg::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid;
|
||||
}
|
||||
.lg--raw::before {
|
||||
background: #fdf6ec;
|
||||
border-color: #e6a23c;
|
||||
}
|
||||
.lg--mid::before {
|
||||
background: #ecf5ff;
|
||||
border-color: #409eff;
|
||||
}
|
||||
.lg--final::before {
|
||||
background: #f0f9eb;
|
||||
border-color: #67c23a;
|
||||
}
|
||||
.flow-canvas {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 280px;
|
||||
border: 1px solid #eef1f6;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fbfcfe;
|
||||
}
|
||||
.flow-empty {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #a8abb2;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.flow-empty__icon {
|
||||
font-size: 34px;
|
||||
color: #c8ccd4;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/* 只读视图：隐藏连接点 */
|
||||
.xt-flow-viewer :deep(.vue-flow__handle) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.xt-flow-viewer .vue-flow__controls {
|
||||
box-shadow: 0 2px 10px rgba(31, 45, 61, 0.12);
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scFlowViewer :nodes="nodes" :edges="edges"></scFlowViewer>
|
||||
<xtFlowViewer :nodes="nodes" :edges="edges"></xtFlowViewer>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
<script>
|
||||
import { defineAsyncComponent } from "vue";
|
||||
// 异步加载：Vue Flow 单独分包
|
||||
const scFlowViewer = defineAsyncComponent(() => import("@/components/scFlowViewer.vue"));
|
||||
const xtFlowViewer = defineAsyncComponent(() => import(/* webpackPrefetch: true */ "@/components/xtFlowViewer.vue"));
|
||||
const defaultForm = {
|
||||
process: null,
|
||||
sort: 1,
|
||||
|
|
@ -135,7 +135,7 @@ const defaultForm = {
|
|||
};
|
||||
export default {
|
||||
name: "route",
|
||||
components: { scFlowViewer },
|
||||
components: { xtFlowViewer },
|
||||
data() {
|
||||
return {
|
||||
apiObj: null,
|
||||
|
|
|
|||
|
|
@ -485,16 +485,18 @@ export default {
|
|||
Object.assign(that.form, data);
|
||||
that.routeId = data.id;
|
||||
that.addTemplate.route = data.id;
|
||||
that.params_json=that.form.params_json;
|
||||
// 画布拖线新增(prefill)或后端数据无params_json时保留默认值,避免undefined导致模板取值报错
|
||||
if (that.form.params_json) {
|
||||
that.params_json = Object.assign({}, that.params_json, that.form.params_json);
|
||||
}
|
||||
if((this.project_code=='bxerp'||this.project_code=='tcerp')&&this.form.material_out_tracking==null){
|
||||
this.form.material_out_tracking = 20;
|
||||
}
|
||||
if(data.process_name=='捆棒'){
|
||||
that.params_json2=that.form.params_json;
|
||||
if(data.process_name=='捆棒'&&that.form.params_json){
|
||||
that.params_json2 = Object.assign({}, that.params_json2, that.form.params_json);
|
||||
}
|
||||
if(data.process_name=='排一次棒'){
|
||||
that.fileIds= [];
|
||||
that.params_json=that.form.params_json;
|
||||
if(that.params_json.fileurl&&that.params_json.fileurl!=="[]"){
|
||||
let fileurl = JSON.parse(that.params_json.fileurl);
|
||||
fileurl.forEach((item)=>{
|
||||
|
|
|
|||
|
|
@ -1,70 +1,69 @@
|
|||
<template>
|
||||
<el-container v-loading="loading">
|
||||
<el-container class="rs-page" v-loading="loading">
|
||||
<el-main class="nopadding rs-main">
|
||||
<!-- 基本信息条 -->
|
||||
<div class="rs-card rs-head">
|
||||
<div class="rs-card__title">基本信息</div>
|
||||
<div class="rs-head__items">
|
||||
<div class="rs-head__item">
|
||||
<span class="rs-lbl">工艺名称</span>
|
||||
<span class="rs-val">{{ form.name || "-" }}</span>
|
||||
</div>
|
||||
<div class="rs-head__item">
|
||||
<span class="rs-lbl">物料名称</span>
|
||||
<span class="rs-val">{{ form.material_name || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-main class="nopadding" style="padding-right: 1px;">
|
||||
<el-container>
|
||||
<el-header style="height: 80px;display: block;padding:0">
|
||||
<el-card shadow="hover">
|
||||
<el-descriptions :column="3" title="基本信息">
|
||||
<el-descriptions-item label="工艺名称:">{{
|
||||
form.name
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="物料名称:">{{
|
||||
form.material_name
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-container>
|
||||
<el-aside style="width: 50%;overflow: hidden;display: flex;flex-direction: column;">
|
||||
<div
|
||||
style="font-weight: 600;color: #303133;font-size: 16px;padding: 10px 0;">
|
||||
工艺路线流程图</div>
|
||||
<el-tabs v-if="tabsTitle.length > 1" v-model="activeName" :tab-position="'top'"
|
||||
@tab-click="tabshandleClick">
|
||||
<el-tab-pane :label="item" v-for="item in tabsTitle" :key="item"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<scFlowViewer v-if="limitedWatch" :nodes="nodes" :edges="edges"
|
||||
style="flex: 1;min-height: 0;">
|
||||
</scFlowViewer>
|
||||
</el-aside>
|
||||
<el-main class="padding: 1px">
|
||||
<scTable ref="tables" :data="tableData" row-key="id" hidePagination hideDo stripe border>
|
||||
<el-table-column label="排序" prop="sort" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column label="工序" prop="process_name">
|
||||
</el-table-column>
|
||||
<el-table-column label="输入" prop="material_in_name">
|
||||
</el-table-column>
|
||||
<el-table-column label="输出" prop="material_out_name">
|
||||
</el-table-column>
|
||||
<el-table-column label="追踪方式">
|
||||
<template #default="scope">
|
||||
<span>{{ tracking_[scope.row.material_out_tracking] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="出材率" prop="out_rate">
|
||||
</el-table-column>
|
||||
<el-table-column label="切分融合数量" prop="div_number">
|
||||
</el-table-column>
|
||||
<el-table-column label="工时" prop="hour_work">
|
||||
</el-table-column>
|
||||
<el-table-column label="批次校验" v-if="project_code !== 'bxerp'">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.batch_bind" type="success">是</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<div class="rs-body">
|
||||
<!-- 流程图卡 -->
|
||||
<div class="rs-card rs-flow">
|
||||
<div class="rs-card__title">工艺路线流程图</div>
|
||||
<el-tabs v-if="tabsTitle.length > 1" v-model="activeName" class="rs-tabs"
|
||||
@tab-click="tabshandleClick">
|
||||
<el-tab-pane :label="item" v-for="item in tabsTitle" :key="item"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<xtFlowViewer v-if="limitedWatch" :nodes="nodes" :edges="edges" class="rs-flow__canvas"
|
||||
style="min-height: 0">
|
||||
</xtFlowViewer>
|
||||
</div>
|
||||
|
||||
</el-main>
|
||||
|
||||
|
||||
</el-container>
|
||||
<!-- 工序表格卡 -->
|
||||
<div class="rs-card rs-steps">
|
||||
<div class="rs-card__title">工序步骤</div>
|
||||
<div class="rs-steps__table">
|
||||
<scTable ref="tables" :data="tableData" row-key="id" hidePagination hideDo stripe border>
|
||||
<el-table-column label="排序" prop="sort" width="50">
|
||||
</el-table-column>
|
||||
<el-table-column label="工序" prop="process_name">
|
||||
</el-table-column>
|
||||
<el-table-column label="输入" prop="material_in_name">
|
||||
</el-table-column>
|
||||
<el-table-column label="输出" prop="material_out_name">
|
||||
</el-table-column>
|
||||
<el-table-column label="追踪方式" width="80">
|
||||
<template #default="scope">
|
||||
<span>{{ tracking_[scope.row.material_out_tracking] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="出材率" prop="out_rate" width="70">
|
||||
</el-table-column>
|
||||
<el-table-column label="切分融合数量" prop="div_number" width="80">
|
||||
</el-table-column>
|
||||
<el-table-column label="工时" prop="hour_work" width="60">
|
||||
</el-table-column>
|
||||
<el-table-column label="批次校验" width="80" v-if="project_code !== 'bxerp'">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.batch_bind" type="success">是</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-aside width="20%" v-if="form.ticket">
|
||||
<el-aside width="20%" v-if="form.ticket" class="rs-aside">
|
||||
<ticketd :ticket_="form.ticket_"></ticketd>
|
||||
</el-aside>
|
||||
</el-container>
|
||||
|
|
@ -73,10 +72,10 @@
|
|||
import { defineAsyncComponent } from "vue";
|
||||
import ticketd from '@/views/wf/ticketd.vue'
|
||||
// 异步加载：Vue Flow 单独分包，仅打开详情时才下载
|
||||
const scFlowViewer = defineAsyncComponent(() => import("@/components/scFlowViewer.vue"));
|
||||
const xtFlowViewer = defineAsyncComponent(() => import(/* webpackPrefetch: true */ "@/components/xtFlowViewer.vue"));
|
||||
export default {
|
||||
emits: ["success", "closed"],
|
||||
components: { ticketd, scFlowViewer },
|
||||
components: { ticketd, xtFlowViewer },
|
||||
props: {
|
||||
t_id: { type: String, default: null },
|
||||
},
|
||||
|
|
@ -181,7 +180,99 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-transfer {
|
||||
--el-transfer-panel-width: 345px !important;
|
||||
/* 页面底色：浅灰承托白卡 */
|
||||
.rs-page {
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.rs-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 统一卡片语言 */
|
||||
.rs-card {
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 2px rgba(31, 45, 61, 0.04);
|
||||
padding: 12px 14px;
|
||||
}
|
||||
.rs-card__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.rs-card__title::before {
|
||||
content: "";
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
background: var(--el-color-primary, #409eff);
|
||||
}
|
||||
/* 基本信息条：单行轻量 */
|
||||
.rs-head {
|
||||
flex-shrink: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.rs-head .rs-card__title {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.rs-head__items {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.rs-lbl {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.rs-val {
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
/* 主体：流程图 + 工序表 两卡并排 */
|
||||
.rs-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.rs-flow {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.rs-flow__canvas {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
.rs-tabs :deep(.el-tabs__header) {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.rs-steps {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.rs-steps__table {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
/* 右侧工单/审批面板：与主体同底色，间距交给 ticketd 自身的内边距 */
|
||||
.rs-aside {
|
||||
background: #f5f7fa;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -94,12 +94,14 @@
|
|||
<el-main class="nopadding" v-if="active === 1">
|
||||
<el-container>
|
||||
<el-aside class="nopadding" style="width: 55%;overflow: hidden;padding-right: 6px;">
|
||||
<scFlowEditor
|
||||
<xtFlowEditor
|
||||
ref="flowEditor"
|
||||
:routepack="routepack"
|
||||
:product-id="form.material || ''"
|
||||
:product-name="form.material_name || ''"
|
||||
:readonly="!!(form.state && form.state !== 10)"
|
||||
@changed="handleEditorChanged"
|
||||
></scFlowEditor>
|
||||
></xtFlowEditor>
|
||||
</el-aside>
|
||||
<el-main class="nopadding" style="width: 45%;overflow: auto;">
|
||||
<el-container>
|
||||
|
|
@ -195,10 +197,10 @@ import { defineAsyncComponent } from "vue";
|
|||
import saveDialog from "./route_form.vue";
|
||||
import ticketd_b from "@/views/wf/ticketd_b.vue";
|
||||
// 异步加载：Vue Flow + dagre 单独分包，仅打开工艺编辑器时才下载，首屏零影响
|
||||
const scFlowEditor = defineAsyncComponent(() => import("@/components/scFlowEditor.vue"));
|
||||
const xtFlowEditor = defineAsyncComponent(() => import(/* webpackPrefetch: true */ "@/components/xtFlowEditor.vue"));
|
||||
export default {
|
||||
name: "routepack_form",
|
||||
components: { saveDialog, ticketd_b, scFlowEditor },
|
||||
components: { saveDialog, ticketd_b, xtFlowEditor },
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
|
|
|
|||
Loading…
Reference in New Issue