From 59dc3bbd1fdedab400b56d67a169bcda97dcf75e Mon Sep 17 00:00:00 2001
From: xwt <2740516069@qq.com>
Date: 星期三, 17 十二月 2025 18:51:33 +0800
Subject: [PATCH] SJ,XJ,RKJ优化修改
---
pages/QC/XJ/Add.vue | 415 +++++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 360 insertions(+), 55 deletions(-)
diff --git a/pages/QC/XJ/Add.vue b/pages/QC/XJ/Add.vue
index cc44bef..43b55e2 100644
--- a/pages/QC/XJ/Add.vue
+++ b/pages/QC/XJ/Add.vue
@@ -79,13 +79,15 @@
<table>
<thead>
<tr>
- <th width="20%" style="text-align: center;">妫�楠岄」鐩�</th>
+ <th width="8%" style="text-align: center;">搴忓彿</th>
+ <th width="17%" style="text-align: center;">妫�楠岄」鐩�</th>
<th width="50%" style="text-align: center;">妫�楠屾弿杩�</th>
<th width="15%" style="text-align: center;">璁板綍(鐐瑰嚮)</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableData" :key="index">
+ <td style="text-align: center;">{{ item.forder || (index + 1) }}</td>
<td>{{ item.projName }}</td>
<td>
<view v-if="item.result=='鍚堟牸'" class="watermark approved">
@@ -127,7 +129,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 +374,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 +474,13 @@
previewTitle: '',
previewContent: '',
previewType: '',
- previewFileUrl: ''
+ previewFileUrl: '',
+
+ // 鍒犻櫎纭鐩稿叧鏁版嵁
+ showDeleteConfirm: false,
+ deleteCountdown: 5,
+ countdownProgress: 0,
+ deleteTimer: null
};
},
@@ -520,6 +554,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() {
@@ -776,16 +857,10 @@
pid: this.formData.id
}
}).then(res1 => {
- let tableData = res1.data.tbBillList
- //褰撳凡妫�楠屼釜鏁伴兘涓嶄负绌烘椂鎸夌収妫�娴嬬粨鏋勬帓搴�
+ let tableData = res1.data.tbBillList;
+ // 鎸塅ORDER搴忓彿鎺掑簭
tableData.sort((a, b) => {
- if (a.result === '鏈畬鎴�' && b.result === '鍚堟牸') {
- return -1;
- } else if (a.result === '鍚堟牸' && b.result === '鏈畬鎴�') {
- return 1;
- } else {
- return 0;
- }
+ return (a.forder || 0) - (b.forder || 0);
});
this.tableData = tableData;
if (this.tableData.length === 0) {
@@ -881,10 +956,15 @@
userNo: this.$loginInfo.account
}
}).then(res => {
- if (res.data.tbBillList) {
+ if (res.status === 0 && res.data && res.data.tbBillList) {
this.$showMessage("鎻愪氦鎴愬姛");
this.init();
+ } else {
+ this.$showMessage(res.message || "鎻愪氦澶辫触");
}
+ }).catch(err => {
+ console.error("鎻愪氦妫�楠屽け璐�:", err);
+ this.$showMessage(err.message || "鎻愪氦澶辫触锛岃閲嶈瘯");
});
}
},
@@ -1459,7 +1539,8 @@
<style scoped>
/* 鍩虹鏍峰紡 */
.container {
- padding: 10px;
+ padding: 20px;
+ padding-bottom: 120px; /* 涓哄浐瀹氭寜閽暀鍑烘洿澶氱┖闂达紝閬垮厤閬洊妫�楠岄」鐩� */
background-color: #f5f7fa;
min-height: 100vh;
}
@@ -1565,41 +1646,44 @@
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 25px 0;
}
-
+
.inspection-table table {
width: 100%;
border-collapse: collapse;
}
-
+
.inspection-table th {
- background-color: #f8f9fa;
- color: #34495e;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
padding: 12px 15px;
font-weight: bold;
- text-align: left;
- border: 1px solid #ddd;
+ text-align: center;
+ border: none;
}
-
+
.inspection-table td {
padding: 12px 15px;
text-align: left;
- border: 1px solid #ddd;
+ border: none;
+ vertical-align: middle;
}
-
+
.inspection-table tr:nth-child(even) {
background-color: #f9f9f9;
}
-
+
.inspection-table tr:hover {
background-color: #f1f5f9;
+ transform: translateY(-1px);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* 姘村嵃鏍峰紡 */
.watermark {
position: absolute;
- font-size: 40px;
+ font-size: 32px;
font-weight: bold;
- opacity: 1;
+ opacity: 0.8;
z-index: 1;
pointer-events: none;
transform: rotate(-15deg);
@@ -1609,15 +1693,15 @@
left: 50%;
transform: translate(-50%, -50%) rotate(-15deg);
}
-
+
.watermark.approved {
color: #2ecc71;
}
-
+
.watermark.rejected {
color: #e74c3c;
}
-
+
.watermark.pending {
color: #f39c12;
}
@@ -1631,10 +1715,11 @@
}
/* 璋冩暣琛ㄦ牸鍗曞厓鏍� */
- .inspection-table td:nth-child(2) {
+ .inspection-table td:nth-child(3) {
position: relative;
overflow: hidden;
padding: 0;
+ min-height: 80px;
}
.record-btn {
@@ -1655,55 +1740,111 @@
/* 鎿嶄綔鎸夐挳 */
.action-buttons {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: white;
+ border-top: 1px solid #e9ecef;
+ padding: 12px;
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+ z-index: 1000;
display: flex;
- flex-direction: column;
- gap: 10px;
- margin-bottom: 20px;
+ flex-wrap: wrap;
+ gap: 8px;
+ justify-content: center;
+ align-items: center;
}
.action-btn {
- padding: 12px 20px;
+ background-color: #ecf0f1;
+ color: #34495e;
+ padding: 12px 15px;
border: none;
border-radius: 6px;
- font-size: 14px;
- font-weight: 500;
cursor: pointer;
- transition: all 0.2s;
+ font-size: 12px;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ text-align: center;
+ min-height: 44px;
+ 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 {
+ background-color: #d5dbdb;
+ transform: translateY(-1px);
+ }
+
.action-btn.primary {
background-color: #3498db;
- color: white;
+ color: #fff;
}
-
+
+ .action-btn.primary:hover {
+ background-color: #2980b9;
+ }
+
.action-btn.secondary {
- background-color: #95a5a6;
- color: white;
+ background-color: #ecf0f1;
+ color: #34495e;
}
-
+
+ .action-btn.secondary:hover {
+ background-color: #d5dbdb;
+ }
+
.action-btn.danger {
background-color: #e74c3c;
- color: white;
+ color: #fff;
}
-
+
+ .action-btn.danger:hover {
+ background-color: #c0392b;
+ }
+
.action-btn.warning {
background-color: #f39c12;
- color: white;
+ color: #fff;
}
-
+
+ .action-btn.warning:hover {
+ background-color: #e67e22;
+ }
+
.action-btn.success {
background-color: #2ecc71;
- color: white;
+ color: #fff;
}
-
+
+ .action-btn.success:hover {
+ background-color: #27ae60;
+ }
+
.action-btn.info {
background-color: #17a2b8;
- color: white;
+ color: #fff;
+ }
+
+ .action-btn.info:hover {
+ background-color: #138496;
}
.action-btn.small {
- padding: 6px 12px;
+ padding: 10px 12px;
font-size: 12px;
+ min-height: 44px;
+ white-space: nowrap;
+ flex-shrink: 0;
+ min-width: 80px;
+ max-width: 120px;
}
/* 寮瑰嚭妗嗘牱寮� */
@@ -2324,12 +2465,37 @@
/* 鍝嶅簲寮忚璁� */
@media (max-width: 768px) {
+ .container {
+ padding-bottom: 120px; /* 涓哄浐瀹氭寜閽暀鍑虹┖闂达紝閬垮厤閬洊妫�楠岄」鐩� */
+ }
+
.info-grid {
grid-template-columns: 1fr;
}
.action-buttons {
- flex-direction: column;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ padding: 8px;
+ gap: 6px;
+ }
+
+ .action-btn {
+ min-width: 70px;
+ max-width: 100px;
+ padding: 8px 10px;
+ font-size: 11px;
+ min-height: 40px;
+ flex: 1;
+ }
+
+ .action-btn.small {
+ min-width: 70px;
+ max-width: 100px;
+ padding: 8px 10px;
+ font-size: 11px;
+ min-height: 40px;
}
/* 闄勪欢寮圭獥鍝嶅簲寮� */
@@ -2386,9 +2552,7 @@
.attachment-icon {
font-size: 20px;
}
- }
-
- @media (max-width: 480px) {
+
.attachment-popup-content {
padding: 16px;
}
@@ -2413,4 +2577,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