From af9bd8d2f33bdac39400a94c46db45f48094d8cc Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期二, 01 九月 2026 23:18:28 +0800
Subject: [PATCH] fix: bom结构支持拖拉拽
---
src/views/productionManagement/productStructure/Detail/index.vue | 213 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 210 insertions(+), 3 deletions(-)
diff --git a/src/views/productionManagement/productStructure/Detail/index.vue b/src/views/productionManagement/productStructure/Detail/index.vue
index 3dcccf7..6899eb0 100644
--- a/src/views/productionManagement/productStructure/Detail/index.vue
+++ b/src/views/productionManagement/productStructure/Detail/index.vue
@@ -22,16 +22,34 @@
border
:preserve-expanded-content="false"
:default-expand-all="true"
- style="width: 100%">
+ style="width: 100%"
+ @expand-change="handleOuterExpandChange">
<el-table-column type="expand">
<template #default="props">
<el-form ref="form"
:model="dataValue">
- <el-table :data="dataValue.dataList"
+ <div v-if="dataValue.isEdit"
+ class="drag-tip">
+ <el-icon><Rank /></el-icon>
+ <span>鎷栧姩鎵嬫焺璋冩暣缁撴瀯:鍚屽眰绾х洿鎺ユ嫋鍔ㄦ帓搴�;鎷栧埌鏌愯姝ｄ笅鏂规垚涓哄叾瀛愮骇;鎷栧埌鍒楄〃鏈�鍓嶆垚涓轰竴绾�</span>
+ </div>
+ <el-table ref="tableRef"
+ :data="dataValue.dataList"
row-key="tempId"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+ @expand-change="handleTreeExpandChange"
style="width: 100%">
+ <el-table-column v-if="dataValue.isEdit"
+ width="44"
+ align="center">
+ <template #default="{ row }">
+ <div class="drag-handle"
+ title="鎷栧姩璋冩暣椤哄簭:鎷栧埌鏌愯姝ｄ笅鏂规垚涓哄叾瀛愮骇,鎷栧埌鍒楄〃鏈�鍓嶆垚涓轰竴绾�">
+ <el-icon><Rank /></el-icon>
+ </div>
+ </template>
+ </el-table-column>
<el-table-column prop="productName"
label="浜у搧" />
<el-table-column prop="model"
@@ -163,9 +181,12 @@
computed,
defineAsyncComponent,
defineComponent,
+ nextTick,
+ onBeforeUnmount,
onMounted,
reactive,
ref,
+ watch,
} from "vue";
import {
queryList,
@@ -175,6 +196,8 @@
import { listAll } from "@/api/productionManagement/productionProcess";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
+ import Sortable from "sortablejs";
+ import { Rank } from "@element-plus/icons-vue";
defineComponent({
name: "StructureEdit",
@@ -191,6 +214,8 @@
);
const emit = defineEmits(["update:router"]);
const form = ref();
+ const tableRef = ref();
+ let tableSortable = null;
const route = useRoute();
const router = useRouter();
@@ -315,6 +340,155 @@
syncDemandedQuantityTree(dataValue.dataList);
};
+
+ // ===== 鎷栨嫿鎺掑簭 =====
+ // 鎸夊綋鍓� DOM 琛岄『搴忓睍寮�鎴愭墎骞冲垪琛�(缂栬緫妯″紡涓嬪己鍒跺叏閮ㄥ睍寮�,淇濊瘉琛岄『搴忎笌鏁版嵁涓�鑷�)
+ const buildFlatTree = () => {
+ const flat = [];
+ const walk = (items, depth, parentNode) => {
+ items.forEach(node => {
+ flat.push({ node, depth, parentArray: items, parentNode });
+ if (Array.isArray(node.children) && node.children.length > 0) {
+ walk(node.children, depth + 1, node);
+ }
+ });
+ };
+ walk(dataValue.dataList, 0, null);
+ return flat;
+ };
+
+ const removeNodeByTempId = (items, tempId) => {
+ for (let i = 0; i < items.length; i++) {
+ if (String(items[i].tempId) === String(tempId)) {
+ items.splice(i, 1);
+ return true;
+ }
+ if (
+ Array.isArray(items[i].children) &&
+ removeNodeByTempId(items[i].children, tempId)
+ ) {
+ return true;
+ }
+ }
+ return false;
+ };
+
+ const updateParentRef = (node, parent) => {
+ node.parentTempId = parent?.tempId ?? "";
+ node.parentId = parent?.id ?? "";
+ };
+
+ const handleSortEnd = evt => {
+ const { oldIndex, newIndex } = evt;
+ if (
+ typeof oldIndex !== "number" ||
+ typeof newIndex !== "number" ||
+ oldIndex === newIndex
+ ) {
+ return;
+ }
+ const flat = buildFlatTree();
+ if (oldIndex < 0 || oldIndex >= flat.length) return;
+ const dragged = flat[oldIndex];
+
+ // 鎷栨斁鍚庝綅浜庤鎷栬涓婃柟涓�琛岀殑鏁版嵁(鎸夋渶缁� DOM 椤哄簭鎹㈢畻鍒板師鎵佸钩鍒楄〃)
+ let aEntry = null;
+ if (newIndex > oldIndex) {
+ aEntry = flat[newIndex];
+ } else if (newIndex > 0) {
+ aEntry = flat[newIndex - 1];
+ }
+
+ if (!aEntry) {
+ // 鎷栧埌鍒楄〃鏈�鍓� 鈫� 鎴愪负涓�绾�
+ removeNodeByTempId(dataValue.dataList, dragged.node.tempId);
+ dataValue.dataList.unshift(dragged.node);
+ updateParentRef(dragged.node, null);
+ } else if (aEntry.depth < dragged.depth) {
+ // 鎷栧埌鏌愯姝ｄ笅鏂� 鈫� 鎴愪负璇ヨ鐨勫瓙绾�
+ removeNodeByTempId(dataValue.dataList, dragged.node.tempId);
+ if (!aEntry.node.children) {
+ aEntry.node.children = [];
+ }
+ aEntry.node.children.push(dragged.node);
+ updateParentRef(dragged.node, aEntry.node);
+ } else {
+ // 鍚岀骇鎻掑叆:鍚戜笂鎵剧涓�涓繁搴︿笉瓒呰繃琚嫋琛岀殑鑺傜偣
+ let i = flat.indexOf(aEntry);
+ while (i >= 0 && flat[i].depth > dragged.depth) {
+ i--;
+ }
+ const eEntry = flat[i];
+ // 鎷栧洖鑷繁鐨勫瓙鏍戝唴 鈫� 涓嶅鐞�(闃叉褰㈡垚寰幆)
+ if (!eEntry || eEntry.node.tempId === dragged.node.tempId) {
+ return;
+ }
+ removeNodeByTempId(dataValue.dataList, dragged.node.tempId);
+ const siblings = eEntry.parentArray;
+ const idx = siblings.indexOf(eEntry.node);
+ siblings.splice(idx + 1, 0, dragged.node);
+ updateParentRef(dragged.node, eEntry.parentNode);
+ }
+
+ recalculateDemandedQuantities();
+ };
+
+ const initSortable = () => {
+ if (!tableRef.value) return;
+ const tbody = tableRef.value.$el.querySelector(".el-table__body tbody");
+ if (!tbody) return;
+ tableSortable?.destroy();
+ tableSortable = new Sortable(tbody, {
+ animation: 150,
+ handle: ".drag-handle",
+ disabled: !dataValue.isEdit,
+ ghostClass: "sortable-ghost",
+ onEnd: handleSortEnd,
+ });
+ };
+
+ const expandAllTree = () => {
+ const table = tableRef.value;
+ if (!table) return;
+ const walk = items => {
+ items.forEach(item => {
+ if (Array.isArray(item.children) && item.children.length > 0) {
+ table.toggleRowExpansion(item, true);
+ walk(item.children);
+ }
+ });
+ };
+ walk(dataValue.dataList);
+ };
+
+ // 缂栬緫妯″紡涓嬩笉鍏佽鎶樺彔,淇濊瘉鎷栨嫿鏃� DOM 琛岄『搴忎笌 dataList 涓�鑷�
+ const handleTreeExpandChange = (row, expanded) => {
+ if (dataValue.isEdit && expanded === false) {
+ nextTick(() => {
+ tableRef.value?.toggleRowExpansion(row, true);
+ });
+ }
+ };
+
+ // 澶栧眰琛屾姌鍙犲悗鍐呭浼氶攢姣�,閲嶆柊灞曞紑鏃堕噸鏂板垵濮嬪寲鎷栨嫿
+ const handleOuterExpandChange = (row, expandedRows) => {
+ if (Array.isArray(expandedRows) && expandedRows.some(r => r === row)) {
+ nextTick(() => initSortable());
+ }
+ };
+
+ watch(
+ () => dataValue.isEdit,
+ val => {
+ tableSortable?.option("disabled", !val);
+ if (val) {
+ nextTick(() => {
+ initSortable();
+ expandAllTree();
+ });
+ }
+ }
+ );
const buildSubmitTree = (items: any[]) => {
return items.map((item: any) => {
@@ -735,5 +909,38 @@
// 鍏堝姞杞藉伐搴忛�夐」锛屽啀鍔犺浇鏁版嵁锛岀‘淇漞l-select鑳藉姝ｇ‘鍥炴樉
await fetchProcessOptions();
await fetchData();
+ await nextTick();
+ initSortable();
});
-</script>
\ No newline at end of file
+
+ onBeforeUnmount(() => {
+ tableSortable?.destroy();
+ tableSortable = null;
+ });
+</script>
+
+<style scoped>
+ .drag-tip {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ margin-bottom: 8px;
+ font-size: 12px;
+ color: #909399;
+ }
+
+ .drag-handle {
+ cursor: move;
+ color: #909399;
+ text-align: center;
+ }
+
+ .drag-handle:hover {
+ color: var(--el-color-primary);
+ }
+
+ :deep(.sortable-ghost) {
+ opacity: 0.6;
+ background-color: #f5f7fa !important;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3