From 67d42a761ea34624cfb2de3cbb38f37a319d2631 Mon Sep 17 00:00:00 2001
From: xwt <2740516069@qq.com>
Date: 星期四, 25 九月 2025 19:16:23 +0800
Subject: [PATCH] SJ,XJ,RKJ优化
---
pages/QC/XJ/Add.vue | 230 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 228 insertions(+), 2 deletions(-)
diff --git a/pages/QC/XJ/Add.vue b/pages/QC/XJ/Add.vue
index 92453e0..ddfd852 100644
--- a/pages/QC/XJ/Add.vue
+++ b/pages/QC/XJ/Add.vue
@@ -127,7 +127,7 @@
</button>
<button class="action-btn secondary" v-if="!isUpdate && !isShowTable" @click="viewAttachmentInfo">鏌ョ湅闄勪欢淇℃伅</button>
- <button class="action-btn danger" v-if="!isUpdate && !formData.fcheckResu && !isShowTable && formData.fsubmit !== 1" @click="removeXJ">鍒犻櫎鍗曟嵁</button>
+ <button class="action-btn danger" v-if="!isUpdate && !formData.fcheckResu && !isShowTable && formData.fsubmit !== 1" @click="showDeleteConfirmDialog">鍒犻櫎鍗曟嵁</button>
<button class="action-btn warning" v-if="!isUpdate && !isShowTable && formData.fsubmit !== 1" @click="saveRemarks">娣诲姞涓嶅悎鏍兼弿杩�</button>
<!-- 妫�楠岄」鐩鐞嗘寜閽� -->
@@ -372,6 +372,32 @@
</view>
</view>
+ <!-- 鍒犻櫎纭寮圭獥 -->
+ <view v-if="showDeleteConfirm" class="overlay">
+ <view class="popup delete-confirm-popup">
+ <h3 class="delete-confirm-title">鈿狅笍 纭鍒犻櫎</h3>
+ <div class="delete-confirm-divider"></div>
+ <div class="delete-confirm-content">
+ <view class="delete-warning-icon">馃棏锔�</view>
+ <view class="delete-warning-text">鎮ㄧ‘瀹氳鍒犻櫎姝ゆ楠屽崟鍚楋紵</view>
+ <view class="delete-warning-detail">鍒犻櫎鍚庡皢鏃犳硶鎭㈠锛岃璋ㄦ厧鎿嶄綔锛�</view>
+ <view class="delete-countdown">
+ <view class="countdown-text">纭鎸夐挳灏嗗湪 <text class="countdown-number">{{ deleteCountdown }}</text> 绉掑悗鍙敤</view>
+ <view class="countdown-progress">
+ <view class="countdown-bar" :style="{ width: countdownProgress + '%' }"></view>
+ </view>
+ </view>
+ </div>
+ <div class="delete-confirm-actions">
+ <button class="delete-confirm-btn cancel-btn" @click="cancelDelete">鍙栨秷</button>
+ <button class="delete-confirm-btn confirm-btn"
+ :disabled="deleteCountdown > 0"
+ :class="{ 'disabled': deleteCountdown > 0 }"
+ @click="confirmDelete">纭鍒犻櫎</button>
+ </div>
+ </view>
+ </view>
+
</view>
</template>
@@ -446,7 +472,13 @@
previewTitle: '',
previewContent: '',
previewType: '',
- previewFileUrl: ''
+ previewFileUrl: '',
+
+ // 鍒犻櫎纭鐩稿叧鏁版嵁
+ showDeleteConfirm: false,
+ deleteCountdown: 5,
+ countdownProgress: 0,
+ deleteTimer: null
};
},
@@ -520,6 +552,53 @@
} else {
return '妫�楠岄」鐩鎯�';
}
+ },
+
+ // 鏄剧ず鍒犻櫎纭寮圭獥
+ showDeleteConfirmDialog() {
+ this.showDeleteConfirm = true;
+ this.deleteCountdown = 5;
+ this.countdownProgress = 0;
+ this.startDeleteCountdown();
+ },
+
+ // 寮�濮嬪�掕鏃�
+ startDeleteCountdown() {
+ this.deleteTimer = setInterval(() => {
+ this.deleteCountdown--;
+ this.countdownProgress = ((5 - this.deleteCountdown) / 5) * 100;
+
+ if (this.deleteCountdown <= 0) {
+ clearInterval(this.deleteTimer);
+ this.deleteTimer = null;
+ }
+ }, 1000);
+ },
+
+ // 鍙栨秷鍒犻櫎
+ cancelDelete() {
+ this.showDeleteConfirm = false;
+ if (this.deleteTimer) {
+ clearInterval(this.deleteTimer);
+ this.deleteTimer = null;
+ }
+ this.deleteCountdown = 5;
+ this.countdownProgress = 0;
+ },
+
+ // 纭鍒犻櫎
+ confirmDelete() {
+ if (this.deleteCountdown > 0) {
+ return;
+ }
+
+ this.showDeleteConfirm = false;
+ if (this.deleteTimer) {
+ clearInterval(this.deleteTimer);
+ this.deleteTimer = null;
+ }
+
+ this.removeXJ();
},
removeXJ() {
@@ -1689,6 +1768,11 @@
display: flex;
align-items: center;
justify-content: center;
+ white-space: nowrap;
+ flex-shrink: 0;
+ min-width: 80px;
+ max-width: 120px;
+ flex: 1;
}
.action-btn:hover {
@@ -2400,6 +2484,7 @@
padding: 8px 10px;
font-size: 11px;
min-height: 40px;
+ flex: 1;
}
.action-btn.small {
@@ -2489,4 +2574,145 @@
font-size: 28px;
}
}
+
+ /* 鍒犻櫎纭寮圭獥鏍峰紡 */
+ .delete-confirm-popup {
+ width: 90vw;
+ max-width: 400px;
+ max-height: 70vh;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .delete-confirm-title {
+ font-size: 20px;
+ font-weight: 700;
+ color: #e74c3c;
+ margin-bottom: 8px;
+ text-align: center;
+ letter-spacing: 1px;
+ }
+
+ .delete-confirm-divider {
+ height: 2px;
+ background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
+ margin-bottom: 20px;
+ }
+
+ .delete-confirm-content {
+ text-align: center;
+ margin-bottom: 20px;
+ }
+
+ .delete-warning-icon {
+ font-size: 48px;
+ margin-bottom: 16px;
+ animation: shake 0.5s ease-in-out infinite alternate;
+ }
+
+ @keyframes shake {
+ 0% { transform: translateX(-2px); }
+ 100% { transform: translateX(2px); }
+ }
+
+ .delete-warning-text {
+ font-size: 18px;
+ font-weight: 600;
+ color: #2c3e50;
+ margin-bottom: 8px;
+ }
+
+ .delete-warning-detail {
+ font-size: 14px;
+ color: #7f8c8d;
+ margin-bottom: 20px;
+ line-height: 1.4;
+ }
+
+ .delete-countdown {
+ background: #f8f9fa;
+ border-radius: 8px;
+ padding: 16px;
+ margin: 16px 0;
+ border: 1px solid #e9ecef;
+ }
+
+ .countdown-text {
+ font-size: 14px;
+ color: #495057;
+ margin-bottom: 8px;
+ text-align: center;
+ }
+
+ .countdown-number {
+ font-weight: 700;
+ color: #e74c3c;
+ font-size: 16px;
+ }
+
+ .countdown-progress {
+ width: 100%;
+ height: 6px;
+ background: #e9ecef;
+ border-radius: 3px;
+ overflow: hidden;
+ }
+
+ .countdown-bar {
+ height: 100%;
+ background: linear-gradient(90deg, #e74c3c, #c0392b);
+ border-radius: 3px;
+ transition: width 1s ease;
+ }
+
+ .delete-confirm-actions {
+ display: flex;
+ gap: 12px;
+ justify-content: center;
+ }
+
+ .delete-confirm-btn {
+ padding: 12px 24px;
+ border: none;
+ border-radius: 8px;
+ font-size: 16px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 120px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ .delete-confirm-btn.cancel-btn {
+ background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+ color: white;
+ }
+
+ .delete-confirm-btn.cancel-btn:hover {
+ background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+ }
+
+ .delete-confirm-btn.confirm-btn {
+ background: linear-gradient(135deg, #e74c3c, #c0392b);
+ color: white;
+ }
+
+ .delete-confirm-btn.confirm-btn:hover:not(.disabled) {
+ background: linear-gradient(135deg, #c0392b, #a93226);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+ }
+
+ .delete-confirm-btn.disabled {
+ background: #bdc3c7;
+ color: #7f8c8d;
+ cursor: not-allowed;
+ transform: none;
+ box-shadow: none;
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3