From 6e9a16a5aa8a5a222369cb6d9989acfe0ce7039f Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 18 十一月 2025 15:56:13 +0800
Subject: [PATCH] fix: 领用单丝删除功能
---
src/pages/production/twist/components/MonofilCard.vue | 152 +++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 142 insertions(+), 10 deletions(-)
diff --git a/src/pages/production/twist/components/MonofilCard.vue b/src/pages/production/twist/components/MonofilCard.vue
index 68268d5..972c910 100644
--- a/src/pages/production/twist/components/MonofilCard.vue
+++ b/src/pages/production/twist/components/MonofilCard.vue
@@ -1,21 +1,153 @@
<template>
- <wd-card>
- <wd-cell-group :border="true">
- <wd-cell title="鍗曚笣缂栧彿" :value="data.monofilamentNumber" />
- <wd-cell title="鐞嗚闀垮害" :value="data.amount + ' (m)'" />
- <wd-cell title="鐢熶骇闀垮害" :value="data.actuallyLength + ' (m)'" />
- <wd-cell title="閲嶉噺" :value="data.actuallyWeight + ' (kg)'" />
- </wd-cell-group>
- </wd-card>
+ <view class="swipe-container">
+ <view
+ class="swipe-content"
+ :style="{ transform: `translateX(${translateX}px)` }"
+ @touchstart="handleTouchStart"
+ @touchmove="handleTouchMove"
+ @touchend="handleTouchEnd"
+ >
+ <wd-card>
+ <wd-cell-group :border="true">
+ <wd-cell title="鍗曚笣缂栧彿" :value="data.monofilamentNumber" />
+ <wd-cell title="鐞嗚闀垮害" :value="data.amount + ' (m)'" />
+ <wd-cell title="鐢熶骇闀垮害" :value="data.actuallyLength + ' (m)'" />
+ <wd-cell title="閲嶉噺" :value="data.actuallyWeight + ' (kg)'" />
+ </wd-cell-group>
+ </wd-card>
+ </view>
+ <view class="swipe-delete" @click="handleDelete">
+ <text class="delete-text">鍒犻櫎</text>
+ </view>
+ </view>
</template>
<script setup lang="ts">
-defineProps({
+import { ref } from "vue";
+
+const props = defineProps({
data: {
type: Object,
default: () => {},
},
});
+
+const emit = defineEmits(["delete", "swipe-open"]);
+
+const translateX = ref(0);
+const startX = ref(0);
+const startY = ref(0);
+const currentX = ref(0);
+const isSwipeOpen = ref(false);
+const deleteWidth = 80; // 鍒犻櫎鎸夐挳瀹藉害
+const isHorizontalSwipe = ref(false);
+
+const handleTouchStart = (e: any) => {
+ startX.value = e.touches[0].clientX;
+ startY.value = e.touches[0].clientY;
+ currentX.value = translateX.value;
+ isHorizontalSwipe.value = false;
+};
+
+const handleTouchMove = (e: any) => {
+ const moveX = e.touches[0].clientX - startX.value;
+ const moveY = e.touches[0].clientY - startY.value;
+
+ // 鍒ゆ柇鏄惁涓烘按骞虫粦鍔紙姘村钩绉诲姩璺濈澶т簬鍨傜洿绉诲姩璺濈锛�
+ if (!isHorizontalSwipe.value && Math.abs(moveX) > Math.abs(moveY) && Math.abs(moveX) > 10) {
+ isHorizontalSwipe.value = true;
+ }
+
+ // 鍙湁姘村钩婊戝姩鏃舵墠澶勭悊鍒犻櫎婊戝姩
+ if (isHorizontalSwipe.value) {
+ e.stopPropagation();
+ const newTranslateX = currentX.value + moveX;
+
+ // 闄愬埗婊戝姩鑼冨洿锛氬彧鑳藉悜宸︽粦鍔紝鏈�澶ф粦鍔ㄨ窛绂讳负鍒犻櫎鎸夐挳瀹藉害
+ if (newTranslateX <= 0 && newTranslateX >= -deleteWidth) {
+ translateX.value = newTranslateX;
+ } else if (newTranslateX < -deleteWidth) {
+ translateX.value = -deleteWidth;
+ } else if (newTranslateX > 0) {
+ translateX.value = 0;
+ }
+ }
+};
+
+const handleTouchEnd = (e: any) => {
+ // 鍙湁姘村钩婊戝姩鏃舵墠澶勭悊缁撴潫閫昏緫
+ if (isHorizontalSwipe.value) {
+ e.stopPropagation();
+ // 鍒ゆ柇鏄惁搴旇鎵撳紑鎴栧叧闂垹闄ゆ寜閽�
+ if (translateX.value < -deleteWidth / 2) {
+ // 婊戝姩瓒呰繃涓�鍗婏紝鎵撳紑鍒犻櫎鎸夐挳
+ translateX.value = -deleteWidth;
+ isSwipeOpen.value = true;
+ emit("swipe-open", props.data);
+ } else {
+ // 婊戝姩涓嶈冻涓�鍗婏紝鍏抽棴鍒犻櫎鎸夐挳
+ translateX.value = 0;
+ isSwipeOpen.value = false;
+ }
+ }
+ isHorizontalSwipe.value = false;
+};
+
+const handleDelete = () => {
+ // 鍏堝叧闂粦鍔�
+ translateX.value = 0;
+ isSwipeOpen.value = false;
+ emit("delete", props.data);
+};
+
+// 鍏抽棴婊戝姩鐨勬柟娉曪紝渚涘閮ㄨ皟鐢�
+const closeSwipe = () => {
+ if (isSwipeOpen.value) {
+ translateX.value = 0;
+ isSwipeOpen.value = false;
+ }
+};
+
+// 鏆撮湶鏂规硶渚涚埗缁勪欢璋冪敤
+defineExpose({
+ closeSwipe,
+ isSwipeOpen,
+});
</script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.swipe-container {
+ position: relative;
+ overflow: hidden;
+ margin-bottom: 8px;
+}
+
+.swipe-content {
+ position: relative;
+ transition: transform 0.3s ease;
+ z-index: 2;
+ background: #fff;
+ touch-action: pan-y;
+}
+
+.swipe-delete {
+ position: absolute;
+ right: 0;
+ top: 12px;
+ bottom: 12px;
+ width: 80px;
+ background: #ff4444;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ border-radius: 4px;
+ box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05);
+
+ .delete-text {
+ color: #fff;
+ font-size: 14px;
+ font-weight: 500;
+ }
+}
+</style>
--
Gitblit v1.9.3