From 1b8ed4768feeb6433cef55ea8e7c4ad7070c151c Mon Sep 17 00:00:00 2001
From: 啊鑫 <t2856754968@163.com>
Date: 星期三, 16 七月 2025 13:42:13 +0800
Subject: [PATCH] OQC检验
---
pages/QC/XJ/Add.vue | 497 ++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 416 insertions(+), 81 deletions(-)
diff --git a/pages/QC/XJ/Add.vue b/pages/QC/XJ/Add.vue
index c6c9383..5a89300 100644
--- a/pages/QC/XJ/Add.vue
+++ b/pages/QC/XJ/Add.vue
@@ -1,6 +1,7 @@
<template>
- <view>
- <view class="form-container">
+ <view class="page-container">
+ <!-- 琛ㄥ崟瀹瑰櫒 - 楂樼骇鍗＄墖璁捐 -->
+ <view class="form-card">
<form :modelValue="formData">
<view class="form-group">
<label class="form-label">妫�楠屽崟鍙�:</label>
@@ -58,12 +59,13 @@
</form>
</view>
- <view class="list-container">
+ <!-- 琛ㄦ牸瀹瑰櫒 - 楂樼骇鍗＄墖璁捐 -->
+ <view class="table-card">
<uni-table ref="table" border emptyText="鏆傛棤鏇村鏁版嵁">
<uni-tr>
- <uni-th align="center" class="th" style="color: #FFFFFF;">妫�楠岄」鐩�</uni-th>
- <uni-th align="center" class="th" style="color: #FFFFFF">鏄惁鍚堟牸</uni-th>
- <uni-th align="center" class="th" style="color: #FFFFFF">璁板綍(鐐瑰嚮)</uni-th>
+ <uni-th align="center" class="th">妫�楠岄」鐩�</uni-th>
+ <uni-th align="center" class="th">鏄惁鍚堟牸</uni-th>
+ <uni-th align="center" class="th">璁板綍(鐐瑰嚮)</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td align="center">
@@ -74,10 +76,10 @@
</uni-td>
<uni-td>
<view class="uni-group">
- <button v-if="item.isCheck >=item.levelNum" type="default" @click="toDetail(item)">
+ <button v-if="item.isCheck >= item.levelNum" type="default" @click="toDetail(item)" class="record-btn success">
{{ item.levelNum + '/' + item.isCheck }}
</button>
- <button v-else type="warn" @click="toDetail(item)">
+ <button v-else type="warn" @click="toDetail(item)" class="record-btn warning">
{{ item.levelNum + '/' + item.isCheck }}
</button>
</view>
@@ -86,39 +88,56 @@
</uni-table>
</view>
- <view class="plus-button">
- <button type="warn" v-if="isUpdate && !isShowTable" @click="getItem">鍒涘缓妫�楠屽崟骞剁敓鎴愰儴鍒嗛粯璁ゅ��</button>
- </view>
- <view class="plus-button">
- <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage">涓婁紶/鏌ョ湅鍥剧墖</button>
- </view>
- <view class="plus-button">
- <button type="warn" v-if="!isUpdate && !formData.fcheckResu && !isShowTable" @click="removeXJ">鍒犻櫎鍗曟嵁</button>
- </view>
- <view class="plus-button">
- <button type="warn" v-if="!isUpdate && !isShowTable" @click="saveRemarks">娣诲姞涓嶅悎鏍兼弿杩�</button>
+ <!-- 鎿嶄綔鎸夐挳缁� - 浼樺寲甯冨眬 -->
+ <view class="action-buttons">
+ <view class="button-group">
+ <button type="warn" v-if="!isUpdate && !isShowTable" @click="submit" class="action-btn primary">
+ 瀹℃牳鍗曟嵁
+ </button>
+ <button type="warn" v-if="isUpdate && !isShowTable" @click="getItem" class="action-btn secondary">
+ 鍒涘缓妫�楠屽崟骞剁敓鎴愰儴鍒嗛粯璁ゅ��
+ </button>
+ </view>
+ <view class="button-group">
+ <button type="warn" v-if="!isUpdate && !isShowTable" @click="toImage" class="action-btn secondary">
+ 涓婁紶/鏌ョ湅鍥剧墖
+ </button>
+ </view>
+ <view class="button-group">
+ <button type="warn" v-if="!isUpdate && !isShowTable" @click="saveRemarks" class="action-btn secondary">
+ 娣诲姞涓嶅悎鏍兼弿杩�
+ </button>
+ </view>
+ <view class="button-group">
+ <button type="warn" v-if="isShowTable" @click="getTable" class="action-btn secondary">
+ 鑾峰彇妫�楠岄」鐩�
+ </button>
+ </view>
+ <view class="button-group">
+ <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable" class="action-btn secondary">
+ 鐢熸垚妫�楠岄」鐩�
+ </button>
+ </view>
</view>
- <view class="plus-button">
- <button type="warn" v-if="isShowTable" @click="getTable">鑾峰彇妫�楠岄」鐩�</button>
- </view>
- <view class="plus-button">
- <button type="warn" v-if="isShowTable && isUpdate" @click="saveTable">鐢熸垚妫�楠岄」鐩�</button>
- </view>
+ <!-- 寮瑰嚭灞� - 甯﹀姩鐢绘晥鏋� -->
<view v-if="remarksPopup" class="overlay">
- <view class="popup">
+ <view class="popup" :class="{ 'popup-animate': remarksPopup }">
<h3>淇敼涓嶅悎鏍兼弿杩�</h3>
<form>
<view class="form-group">
<label class="form-label">涓嶅悎鏍兼弿杩�:</label>
<input class="form-input" type="text" v-model="remarks"/>
</view>
- <button type="warn" @click="editRemarks">淇敼</button>
- <button @click="remarksPopup = !remarksPopup">鍙栨秷</button>
+ <button type="warn" @click="editRemarks" class="action-btn primary">
+ 淇敼
+ </button>
+ <button @click="remarksPopup = !remarksPopup" class="action-btn cancel">
+ 鍙栨秷
+ </button>
</form>
</view>
</view>
-
</view>
</template>
@@ -142,7 +161,7 @@
planQty: "",
mocode: "",
boardStyle: "",
- itemId: "",
+ itemId: "",
},
DAA020List: [],
@@ -174,7 +193,6 @@
},
onLoad(options) {
//options涓寘鍚簡url闄勫甫鐨勫弬鏁�
-
let params = options;
if (params["id"]) {
@@ -224,7 +242,6 @@
}
},
getItem() {
-
if (this.isSubmit) {
this.$showMessage("姝ょ墿鏂欐棤鍚敤鐨勬楠岄」鐩紝璇风淮鎶�!");
return;
@@ -331,6 +348,27 @@
});
});
},
+ submit() {
+ this.$post({
+ url: "/XJ/XJQaSubmit",
+ data: {
+ userNo: this.$loginInfo.account,
+ gid: this.formData.id
+ }
+ }).then(res => {
+ //2024-11-28 kyy 鏍￠獙鍚堟牸鎻愪氦澧炲姞鎻愮ず
+ console.log("Status Code鐨勫��:", res.statusCode);
+ if (res.statusCode === 200) {
+ this.$showMessage("鎴愬姛鎻愪氦妫�楠�");
+ // 浣跨敤setTimeout鍦�7绉掑悗闅愯棌娑堟伅
+ setTimeout(() => {
+ this.hideCustomMessage();
+ }, 7000); // 7000姣绛変簬7绉�
+ } else {
+ this.$showMessage(res.data.message);
+ }
+ })
+ },
init() {
this.$post({
url: "/XJ/getPage",
@@ -378,11 +416,11 @@
});
} else {
uni.navigateTo({
- url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData
- .id
+ url: 'detail?id=' + item.id + '&billNo=' + this.formData.billNo + '&gid=' + this.formData.id
});
}
- }, saveRemarks() {
+ },
+ saveRemarks() {
this.remarksPopup = !this.remarksPopup;
this.remarks = this.formData.remarks;
},
@@ -455,65 +493,308 @@
}
};
</script>
-<style>
+
+<style lang="scss">
+/* 鍏ㄥ眬鏍峰紡 - 鑾叞杩壊绯� */
+:root {
+ --primary: #5B6EF4; /* 涓昏壊璋� - 鐏拌摑鑹� */
+ --primary-light: #E8EBFF; /* 涓昏壊娴呰壊 */
+ --secondary: #86909C; /* 娆¤鑹� - 娴呯伆鑹� */
+ --success: #00B42A; /* 鎴愬姛鑹� - 姗勬缁� */
+ --warning: #F7BA1E; /* 璀﹀憡鑹� - 鐞ョ弨榛� */
+ --danger: #F53F3F; /* 鍗遍櫓鑹� - 鐝婄憵绾� */
+ --text-primary: #1D2129; /* 涓绘枃鏈壊 */
+ --text-secondary: #4E5969; /* 娆℃枃鏈壊 */
+ --bg-primary: #F2F3F5; /* 鑳屾櫙鑹� */
+ --bg-card: #FFFFFF; /* 鍗＄墖鑳屾櫙 */
+ --border-color: #E5E6EB; /* 杈规鑹� */
+}
+
+page {
+ background-color: var(--bg-primary);
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ box-sizing: border-box;
+}
+
+/* 椤甸潰瀹瑰櫒 */
+.page-container {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+/* 鍗＄墖鏍峰紡 - 楂樼骇璁捐 */
+.form-card, .table-card {
+ background: var(--bg-card);
+ border-radius: 20px;
+ box-shadow: 0 8px 30px rgba(91, 110, 244, 0.12);
+ padding: 28px;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.form-card::before, .table-card::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 6px;
+ height: 100%;
+ background: linear-gradient(to bottom, var(--primary), #8A94FF);
+ border-radius: 20px 0 0 20px;
+}
+
+.form-card:hover, .table-card:hover {
+ box-shadow: 0 12px 40px rgba(91, 110, 244, 0.18);
+ transform: translateY(-5px);
+}
+
+/* 琛ㄥ崟缁勬牱寮� */
.form-group {
display: flex;
align-items: center;
- border-bottom: 1px solid #c9c9c9;
+ padding: 16px 0;
+ border-bottom: 1px solid var(--border-color);
+ transition: all 0.2s ease;
}
+
+.form-group:last-child {
+ border-bottom: none;
+}
+
+.form-group:hover {
+ background-color: var(--primary-light);
+ border-radius: 12px;
+}
+
.form-label {
- margin-bottom: 0;
- padding: 5px;
+ min-width: 120px;
+ color: var(--text-primary);
+ font-weight: 500;
+ margin-right: 18px;
+ font-size: 15px;
}
+
.form-input {
flex: 1;
- margin-bottom: 0;
- padding: 5px;
+ padding: 14px 20px;
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ background-color: var(--bg-card);
+ color: var(--text-primary);
+ font-size: 15px;
+ transition: all 0.2s ease;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
-.picker {
- flex: 1;
- margin-bottom: 0;
- padding: 5px;
- font-size: 12px;
+
+.form-input:focus {
+ border-color: var(--primary);
+ box-shadow: 0 0 0 3px rgba(91, 110, 244, 0.2);
+ outline: none;
}
+
+/* 涓嬫媺閫夋嫨鍣ㄦ牱寮� */
.uni-form-item {
display: flex;
- border-bottom: 1px solid #c9c9c9;
+ align-items: center;
+ padding: 16px 0;
+ border-bottom: 1px solid var(--border-color);
+ transition: all 0.2s ease;
}
+
+.uni-form-item:last-child {
+ border-bottom: none;
+}
+
+.uni-form-item:hover {
+ background-color: var(--primary-light);
+ border-radius: 12px;
+}
+
+.picker {
+ flex: 1;
+ padding: 14px 20px;
+ border: 1px solid var(--border-color);
+ border-radius: 12px;
+ background-color: var(--bg-card);
+ color: var(--text-primary);
+ font-size: 15px;
+ appearance: none;
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.picker::after {
+ content: "鈻�";
+ position: absolute;
+ right: 20px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-secondary);
+ pointer-events: none;
+ font-size: 14px;
+}
+
.edit {
- background-color: white;
+ background-color: var(--bg-card);
}
-/* 榛樿鏍峰紡 */
+
+/* 琛ㄦ牸鏍峰紡 */
.list-container {
- height: 60vh;
- /* 璁剧疆鍒楄〃瀹瑰櫒鐨勯珮搴︿负鍓╀綑绌洪棿锛屽苟鍑忓幓琛ㄥ崟瀹瑰櫒鐨勯珮搴� */
overflow-y: auto;
- /* 鍏佽鍒楄〃瀹瑰櫒鍨傜洿婊氬姩 */
- padding: 10px;
- /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇鍒楄〃鍐呭鏇寸編瑙� */
}
-/* 鍦ㄥ皬灞忓箷璁惧涓婏紝閲嶇疆楂樺害涓洪�傚簲灞忓箷 */
-@media (max-width: 768px) {
- .list-container {
- height: calc(100vh - 376px);
- /* 閫傚綋璋冩暣楂樺害 */
- }
-}
-.form-container {
- padding: 10px;
- /* 鍙�夛細娣诲姞涓�浜涘唴杈硅窛锛屼娇琛ㄥ崟鍐呭鏇寸編瑙� */
-}
+
.th {
- background-color: lightskyblue;
- color: #FFFFFF;
+ background-color: var(--primary);
+ color: white;
+ font-weight: 600;
+ padding: 16px 20px;
+ font-size: 15px;
+ border-radius: 12px 12px 0 0;
}
-.plus-button {
- line-height: 59px;
- font-size: 24px;
- cursor: pointer;
- z-index: 1000;
- margin-bottom: 10px;
+
+.uni-tr {
+ border-bottom: 1px solid var(--border-color);
+ transition: all 0.2s ease;
}
+
+.uni-tr:last-child {
+ border-bottom: none;
+}
+
+.uni-tr:hover {
+ background-color: var(--primary-light);
+}
+
+.uni-td {
+ padding: 16px 20px;
+ border-bottom: 1px solid var(--border-color);
+ font-size: 15px;
+ color: var(--text-primary);
+}
+
+.uni-td:last-child {
+ border-right: none;
+}
+
+/* 璁板綍鎸夐挳鏍峰紡 */
+.record-btn {
+ padding: 8px 16px;
+ border-radius: 20px;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ height: 36px;
+ border: none;
+ font-size: 14px;
+ min-width: 80px;
+}
+
+.success {
+ background-color: rgba(0, 180, 42, 0.1);
+ color: var(--success);
+ border: 1px solid rgba(0, 180, 42, 0.2);
+}
+
+.success:hover {
+ background-color: rgba(0, 180, 42, 0.2);
+}
+
+.warning {
+ background-color: rgba(247, 186, 30, 0.1);
+ color: var(--warning);
+ border: 1px solid rgba(247, 186, 30, 0.2);
+}
+
+.warning:hover {
+ background-color: rgba(247, 186, 30, 0.2);
+}
+
+/* 鎿嶄綔鎸夐挳缁� */
+.action-buttons {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 18px;
+ margin-top: 10px;
+}
+
+.button-group {
+ flex: 1;
+ min-width: 140px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.action-btn {
+ padding: 14px 20px;
+ border-radius: 24px;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 56px;
+ border: none;
+ font-size: 15px;
+ box-shadow: 0 4px 12px rgba(91, 110, 244, 0.15);
+ position: relative;
+ overflow: hidden;
+}
+
+.action-btn::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+ transform: translateX(-100%);
+ transition: transform 0.6s ease;
+}
+
+.action-btn:hover::before {
+ transform: translateX(100%);
+}
+
+.action-btn:active {
+ transform: scale(0.96);
+ box-shadow: 0 2px 8px rgba(91, 110, 244, 0.1);
+}
+
+.primary {
+ background: linear-gradient(135deg, var(--primary), #7B88FF);
+ color: white;
+}
+
+.secondary {
+ background-color: white;
+ color: var(--primary);
+ border: 1px solid var(--border-color);
+}
+
+.secondary:hover {
+ background-color: var(--primary-light);
+}
+
+.cancel {
+ background-color: #F2F3F5;
+ color: var(--text-secondary);
+ border: 1px solid var(--border-color);
+}
+
+.cancel:hover {
+ background-color: #E5E6EB;
+}
+
+/* 寮瑰嚭灞傛牱寮� */
.overlay {
position: fixed;
top: 0;
@@ -524,15 +805,69 @@
display: flex;
justify-content: center;
align-items: center;
+ z-index: 1000;
+ animation: fadeIn 0.3s ease;
}
+
.popup {
- background-color: #fff;
- padding: 20px;
- border: 1px solid #ccc;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
- width: 68vw;
- /* 璁剧疆瀹藉害涓鸿鍙ｅ搴︾殑80% */
- height: 25vh;
- /* 璁剧疆楂樺害涓鸿鍙ｉ珮搴︾殑80% */
+ background-color: white;
+ border-radius: 24px;
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+ padding: 32px;
+ width: 90%;
+ max-width: 560px;
+ position: relative;
+ opacity: 0;
+ transform: translateY(30px);
+ transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.popup-animate {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.popup h3 {
+ color: var(--text-primary);
+ font-size: 20px;
+ font-weight: 600;
+ margin-bottom: 24px;
+ border-bottom: 1px solid var(--border-color);
+ padding-bottom: 18px;
+}
+
+/* 鍝嶅簲寮忚璁� */
+@media (max-width: 768px) {
+ .form-card, .table-card {
+ padding: 20px;
+ }
+
+ .action-buttons {
+ flex-direction: column;
+ }
+
+ .button-group {
+ min-width: 100%;
+ }
+
+ .form-label {
+ min-width: 90px;
+ font-size: 14px;
+ }
+
+ .form-input, .picker {
+ padding: 12px 16px;
+ font-size: 14px;
+ }
+}
+
+/* 鍔ㄧ敾鏁堟灉 */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3