From 5eea45a45c48e44e2d6b2fc6818332cd62aef7f5 Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期日, 04 一月 2026 16:11:10 +0800
Subject: [PATCH] 修改工艺路线拖拽排序
---
src/views/productionManagement/processRoute/ItemsForm.vue | 113 ++++++++++++++++++++++++++++----------------------------
1 files changed, 57 insertions(+), 56 deletions(-)
diff --git a/src/views/productionManagement/processRoute/ItemsForm.vue b/src/views/productionManagement/processRoute/ItemsForm.vue
index 5538b2c..ac0cd10 100644
--- a/src/views/productionManagement/processRoute/ItemsForm.vue
+++ b/src/views/productionManagement/processRoute/ItemsForm.vue
@@ -85,31 +85,28 @@
</el-table-column>
</el-table>
- <!-- 绠�鍖栧鍣ㄧ粨鏋勶紝鐩存帴缁檈l-steps鍔爎ef -->
- <el-steps
+ <!-- 浣跨敤鏅�歞iv鏇夸唬el-steps -->
+ <div
v-else
ref="stepsContainer"
class="mb5 custom-steps"
- :active="routeItems.length"
- align-center
- style="padding: 10px 0;"
+ style="padding: 10px 0; display: flex; flex-wrap: nowrap; gap: 20px; align-items: flex-start;"
>
- <!-- 鍏抽敭锛氱粰el-step娣诲姞data-id锛岃�岄潪鍐呴儴鍗＄墖 -->
- <el-step
+ <div
v-for="(item, index) in routeItems"
:key="item.id"
class="custom-step draggable-step"
:data-id="item.id"
- style="cursor: move;"
+ style="cursor: move; flex: 0 0 auto; min-width: 220px;"
>
- <template #title>
- <div class="step-content">
- <div class="step-number">{{ index + 1 }}</div>
- <el-card
- :header="item.productName"
- class="step-card"
- style="cursor: move;"
- >
+ <div class="step-content">
+ <div class="step-number">{{ index + 1 }}</div>
+ <el-card
+ :header="item.productName"
+ class="step-card"
+ style="cursor: move;"
+ >
+ <div class="step-card-content">
<p>{{ item.model }}</p>
<p>{{ item.unit }}</p>
<el-select
@@ -124,14 +121,16 @@
:value="process.id"
/>
</el-select>
- <template #footer>
+ </div>
+ <template #footer>
+ <div class="step-card-footer">
<el-button type="danger" link size="small" @click.stop="removeItemByID(item.id)">鍒犻櫎</el-button>
- </template>
- </el-card>
- </div>
- </template>
- </el-step>
- </el-steps>
+ </div>
+ </template>
+ </el-card>
+ </div>
+ </div>
+ </div>
<template #footer>
<div class="dialog-footer">
@@ -244,8 +243,10 @@
processId: undefined
}));
+ console.log('閫夋嫨浜у搧鍓嶆暟缁�:', routeItems.value);
routeItems.value.push(...newData);
routeItems.value = [...routeItems.value];
+ console.log('閫夋嫨浜у搧鍚庢暟缁�:', routeItems.value);
// 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
nextTick(() => {
@@ -359,34 +360,31 @@
} else {
if (!stepsContainer.value) return;
- // 鍏抽敭淇1锛氱簿鍑嗗畾浣嶆楠ゆ潯鍒楄〃瀹瑰櫒锛堝吋瀹笶lement Plus涓嶅悓鐗堟湰锛�
- const stepsList = stepsContainer.value.$el.querySelector('.el-steps__items') ||
- stepsContainer.value.$el ||
- stepsContainer.value;
+ // 淇敼锛氱洿鎺ヤ娇鐢╯tepsContainer.value浣滀负鎷栨嫿瀹瑰櫒
+ const stepsList = stepsContainer.value;
if (!stepsList) {
console.warn('鏈壘鍒版楠ゆ潯鎷栨嫿瀹瑰櫒');
return;
}
- // 鍏抽敭淇2锛氭斁瀹芥嫋鎷借Е鍙戞潯浠讹紝鎭㈠鎷栨嫿鍔熻兘
+ // 淇敼锛氱畝鍖栨嫋鎷介厤缃�
stepsSortable = new Sortable(stepsList, {
animation: 150,
ghostClass: 'sortable-ghost',
- draggable: '.draggable-step', // 鍙嫋鎷藉厓绱狅細el-step
- handle: '.draggable-step, .step-card', // 鎷栨嫿鎵嬫焺锛歴tep鏈韩 + 鍗＄墖锛堟墿澶цЕ鍙戝尯鍩燂級
- filter: '.el-button, .el-select, .el-input', // 杩囨护鎸夐挳/閫夋嫨鍣紝閬垮厤璇Е鍙�
- forceFallback: true, // 寮哄埗浣跨敤fallback妯″紡锛岄伩鍏嶅師鐢熸嫋鎷藉啿绐�
+ draggable: '.draggable-step', // 鍙嫋鎷藉厓绱�
+ handle: '.draggable-step, .step-card', // 鎷栨嫿鎵嬫焺
+ filter: '.el-button, .el-select, .el-input', // 杩囨护鎸夐挳/閫夋嫨鍣�
+ forceFallback: true,
fallbackClass: 'sortable-fallback',
- preventOnFilter: true, // 杩囨护鍏冪礌闃绘鎷栨嫿
+ preventOnFilter: true,
scroll: true,
scrollSensitivity: 30,
scrollSpeed: 10,
bubbleScroll: true,
- // 缁熶竴浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭锛屼笌琛ㄦ牸妯″紡淇濇寔涓�鑷�
onEnd: (evt) => {
if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex]) return;
- // 浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭锛屼笌琛ㄦ牸妯″紡淇濇寔涓�鑷�
+ // 浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭
const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
routeItems.value.splice(evt.newIndex, 0, moveItem);
routeItems.value = [...routeItems.value];
@@ -447,32 +445,33 @@
justify-content: space-between;
}
-/* 鍏抽敭淇锛氫紭鍖栨楠ゆ潯鎷栨嫿鏍峰紡锛岀‘淇濆彲鐐瑰嚮鍖哄煙 */
-:deep(.el-steps__items) {
+/* 淇敼锛氳嚜瀹氫箟姝ラ鏉″鍣ㄦ牱寮� */
+.custom-steps {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 20px;
- min-height: 100px; /* 纭繚瀹瑰櫒鏈夐珮搴� */
+ min-height: 100px;
}
-:deep(.draggable-step) {
- cursor: move !important; /* 寮哄埗鏄剧ず鎷栨嫿鍏夋爣 */
+/* 淇敼锛氳嚜瀹氫箟姝ラ椤规牱寮� */
+.custom-step {
+ cursor: move !important;
padding: 8px;
position: relative;
transition: all 0.2s ease;
flex: 0 0 auto;
min-width: 220px;
- touch-action: none; /* 绂佺敤瑙︽懜鍔ㄤ綔锛岄伩鍏嶇Щ鍔ㄧ鍐茬獊 */
+ touch-action: none;
}
/* 鎷栨嫿鎮诞鏍峰紡锛屾彁绀哄彲鎷栨嫿 */
-:deep(.draggable-step:hover) {
+.custom-step:hover {
background-color: rgba(64, 158, 255, 0.05);
transform: translateY(-2px);
}
-:deep(.sortable-ghost) {
+.sortable-ghost {
opacity: 0.4;
background-color: #f5f7fa !important;
border: 2px dashed #409eff;
@@ -480,7 +479,7 @@
transform: scale(1.02);
}
-:deep(.sortable-fallback) {
+.sortable-fallback {
opacity: 0.9;
background-color: #f5f7fa;
border: 1px solid #409eff;
@@ -489,17 +488,17 @@
margin: 10px;
}
-:deep(.step-card) {
+.step-card {
cursor: move !important;
transition: box-shadow 0.2s ease;
user-select: none;
-webkit-user-select: none;
- pointer-events: auto; /* 纭繚鍗＄墖鍙Е鍙戦紶鏍囦簨浠� */
+ pointer-events: auto;
margin: 10px;
- height: 300px;
+ height: 240px;
}
-:deep(.step-card:hover) {
+.step-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@@ -508,14 +507,17 @@
user-select: none;
}
-/* 绂佺敤姝ラ鏉￠粯璁ょ殑澶撮儴鏍峰紡骞叉壈 */
-:deep(.el-step__head) {
- display: none; /* 闅愯棌榛樿鐨勬楠ゅ渾鍦堝拰搴忓彿 */
+.step-card-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-/* 闅愯棌Element Plus鑷姩鐢熸垚鐨勮繛鎺ョ嚎 */
-:deep(.el-step__main::before) {
- display: none; /* 闅愯棌杩炴帴绾� */
+.step-card-footer {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 10px;
}
/* 鑷畾涔夊簭鍙锋牱寮忎紭鍖� */
@@ -531,5 +533,4 @@
border-radius: 50%;
font-size: 14px;
}
-
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3