fix:工艺画布拉线表单带入残留信息根因修复:禁用VueFlow connectOnClick(单击手柄会挂起待连接状态,之后再点手柄以旧节点为起点触发connect,导致间歇性带入错误输入/输出);预填改为prop挂载时确定;误吸附回起点按拉空白处理;单纯点击手柄不再弹新增表单;节点增减后重新适配视野
This commit is contained in:
parent
494999eb11
commit
a378a39917
|
|
@ -61,6 +61,8 @@
|
|||
:default-viewport="{ zoom: 0.9 }"
|
||||
:min-zoom="0.2"
|
||||
:max-zoom="2"
|
||||
:connection-radius="8"
|
||||
:connect-on-click="false"
|
||||
:nodes-draggable="true"
|
||||
:nodes-connectable="!readonly"
|
||||
:elements-selectable="true"
|
||||
|
|
@ -87,13 +89,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 复用现有单步表单：新增/编辑一条 Route；key 随每次打开递增，强制重建实例杜绝上次内容残留 -->
|
||||
<!-- 复用现有单步表单：新增/编辑一条 Route；key 随每次打开递增强制重建实例，预填走 prop 在挂载时即确定 -->
|
||||
<route-form
|
||||
v-if="dialogVisible"
|
||||
:key="dialogSeq"
|
||||
ref="routeForm"
|
||||
:count="count"
|
||||
:routepack="routepack"
|
||||
:prefill="formPrefill"
|
||||
@success="onFormSuccess"
|
||||
@closed="dialogVisible = false"
|
||||
></route-form>
|
||||
|
|
@ -143,6 +146,7 @@ export default {
|
|||
count: 0,
|
||||
dialogVisible: false,
|
||||
dialogSeq: 0,
|
||||
formPrefill: null,
|
||||
// 左侧物料面板
|
||||
matType: "30",
|
||||
matKeyword: "",
|
||||
|
|
@ -153,6 +157,7 @@ export default {
|
|||
// 连线手势内部状态
|
||||
connectSource: null,
|
||||
connectMade: false,
|
||||
connectStartPos: null,
|
||||
// 仅初次加载自动适配一次，避免编辑时视图跳动
|
||||
hasFitted: false,
|
||||
};
|
||||
|
|
@ -284,9 +289,12 @@ export default {
|
|||
if (pid) routeNodeIds.add(pid);
|
||||
this.seedNodes = this.seedNodes.filter((s) => !routeNodeIds.has(s.id));
|
||||
|
||||
const prevCount = this.nodes.length;
|
||||
this.edges = edges;
|
||||
this.nodes = layoutGraph(routeNodes.concat(this.seedNodes), edges);
|
||||
this.syncStore();
|
||||
// 节点增减后 dagre 会整体重排，重新适配视野，避免“看着是空白其实有节点”导致拉线误吸附
|
||||
if (this.hasFitted && this.nodes.length !== prevCount) this.doFit();
|
||||
},
|
||||
|
||||
/** 把本地 nodes/edges 命令式同步到 Vue Flow store（先节点后边，避免边找不到端点） */
|
||||
|
|
@ -376,11 +384,18 @@ export default {
|
|||
onConnectStart(params) {
|
||||
this.connectSource = (params && (params.nodeId || params.source)) || null;
|
||||
this.connectMade = false;
|
||||
const oe = params && params.event;
|
||||
this.connectStartPos = oe && oe.clientX != null ? { x: oe.clientX, y: oe.clientY } : null;
|
||||
},
|
||||
/** 连到已有节点：新建一条 Route，预填输入/输出物料 */
|
||||
onConnect(conn) {
|
||||
this.connectMade = true;
|
||||
if (this.readonly) return;
|
||||
// 误吸附保护：吸回起点自身或目标无效时，按“拉到空白”处理，只带输入
|
||||
if (!conn.target || conn.target === conn.source) {
|
||||
this.openAddFrom(conn.source);
|
||||
return;
|
||||
}
|
||||
const src = this.nodes.find((n) => n.id === conn.source);
|
||||
const tgt = this.nodes.find((n) => n.id === conn.target);
|
||||
// 注意：id 为雪花大整数，必须保持字符串，切勿 Number() 否则精度丢失
|
||||
|
|
@ -392,16 +407,28 @@ export default {
|
|||
});
|
||||
},
|
||||
/** 拉线到空白处：新建工序，输出物料留空由后端自动生成下一节点 */
|
||||
onConnectEnd() {
|
||||
onConnectEnd(evt) {
|
||||
const src = this.connectSource;
|
||||
const made = this.connectMade;
|
||||
const startPos = this.connectStartPos;
|
||||
this.connectSource = null;
|
||||
this.connectMade = false;
|
||||
this.connectStartPos = null;
|
||||
if (this.readonly || made || !src) return;
|
||||
const node = this.nodes.find((n) => n.id === src);
|
||||
// 单纯点击手柄(几乎无位移)不算拉线，不弹新增表单
|
||||
const oe = evt && evt.clientX != null ? evt : evt && evt.event;
|
||||
if (startPos && oe && oe.clientX != null) {
|
||||
const dist = Math.hypot(oe.clientX - startPos.x, oe.clientY - startPos.y);
|
||||
if (dist < 8) return;
|
||||
}
|
||||
this.openAddFrom(src);
|
||||
},
|
||||
/** 以某节点为输入新建工序：只带输入物料，其余字段一律默认值 */
|
||||
openAddFrom(srcId) {
|
||||
const node = this.nodes.find((n) => n.id === srcId);
|
||||
// id 为雪花大整数，保持字符串
|
||||
this.openForm("add", {
|
||||
material_in: src,
|
||||
material_in: srcId,
|
||||
material_in_name: node ? node.data.label : "",
|
||||
});
|
||||
},
|
||||
|
|
@ -479,13 +506,13 @@ export default {
|
|||
this.openForm("add", null);
|
||||
},
|
||||
|
||||
/** 打开单步表单；prefill 为 null 表示纯新增 */
|
||||
/** 打开单步表单；prefill 为 null 表示纯新增。预填经 prop 传入，在表单挂载 open 时一次性应用 */
|
||||
openForm(mode, prefill) {
|
||||
this.dialogSeq += 1;
|
||||
this.formPrefill = prefill || null;
|
||||
this.dialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
const inst = this.$refs.routeForm.open(mode);
|
||||
if (prefill) inst.setData(prefill);
|
||||
this.$refs.routeForm.open(mode);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -305,6 +305,8 @@ export default {
|
|||
props: {
|
||||
count: { type: Number, default : 0 },
|
||||
routepack: { type: String, default: "" },
|
||||
// 打开时的预填数据(画布拉线传入)：挂载即确定，避免事后setData在任何时序下带入脏数据
|
||||
prefill: { type: Object, default: null },
|
||||
},
|
||||
emits: ["success", "closed"],
|
||||
data() {
|
||||
|
|
@ -503,6 +505,7 @@ export default {
|
|||
let that = this;
|
||||
that.mode = mode;
|
||||
that.resetForm();
|
||||
if (that.prefill) that.setData(that.prefill);
|
||||
that.visible = true;
|
||||
that.$nextTick(() => {
|
||||
// 仅新增时按现有数量预填排序；编辑时保留 setData 带入的原 sort
|
||||
|
|
|
|||
Loading…
Reference in New Issue