| | |
| | | </view> |
| | | |
| | | <!-- 检验项目表格 --> |
| | | <view class="inspection-table" v-if="tableData.length > 0"> |
| | | <table> |
| | | <view class="inspection-table"> |
| | | <table v-if="tableData.length > 0"> |
| | | <thead> |
| | | <tr> |
| | | <th width="20%" style="text-align: center;">检验项目</th> |
| | |
| | | </tr> |
| | | </tbody> |
| | | </table> |
| | | <!-- 空状态显示 --> |
| | | <view v-else class="empty-state"> |
| | | <view class="empty-icon">📋</view> |
| | | <view class="empty-text">暂无检验项目</view> |
| | | <view class="empty-desc">该检验单还没有检验项目</view> |
| | | </view> |
| | | </view> |
| | | <!-- 表单上方操作按钮区 --> |
| | | <view class="top-action-buttons"> |
| | |
| | | }); |
| | | |
| | | if (this.tableData.length <= 0) { |
| | | this.isShowTable = true; |
| | | this.isShowTable = true; // 没有检验项目时显示生成按钮 |
| | | } else { |
| | | this.isShowTable = false; // 有检验项目时直接进入填写阶段 |
| | | this.isUpdate = false; // 设置为非更新状态,可以直接填写 |
| | | } |
| | | }) |
| | | } |
| | |
| | | if (res.data.tbBillList.length > 0) { |
| | | this.tableData = res.data.tbBillList; // 在箭头函数中,this 指向外层作用域的 this |
| | | this.isSubmit = false; |
| | | // 注意:这里不自动保存,因为还没有创建检验单,需要先调用save()创建检验单 |
| | | this.isShowTable = false; // 直接进入填写阶段 |
| | | this.isUpdate = false; // 设置为非更新状态,可以直接填写 |
| | | } else { |
| | | this.$showMessage("此物料没有启用的检验项目,请维护!"); |
| | | this.isSubmit = true; |
| | | this.tableData = []; |
| | | this.isShowTable = true; // 没有检验项目时显示生成按钮 |
| | | } |
| | | }); |
| | | |
| | |
| | | }).then(res => { |
| | | if (res.data.tbBillList.length > 0) { |
| | | this.tableData = res.data.tbBillList; // 在箭头函数中,this 指向外层作用域的 this |
| | | this.isShowTable = true; |
| | | this.isUpdate = true; |
| | | // 自动保存检验项目到数据库 |
| | | this.saveTable(); |
| | | } else { |
| | | this.$showMessage("此物料没有启用的检验项目,请维护!"); |
| | | this.isShowTable = true; |
| | |
| | | if (genRes.data.result === 0) { |
| | | this.$showMessage("获取检验项目成功"); |
| | | this.init(); |
| | | // 获取成功后直接进入填写阶段 |
| | | this.isShowTable = false; |
| | | this.isUpdate = false; |
| | | } else { |
| | | this.$showMessage(genRes.data.message || "获取失败"); |
| | | } |
| | |
| | | if (genRes.data.result === 0) { |
| | | this.$showMessage("获取检验项目成功"); |
| | | this.init(); |
| | | // 获取成功后直接进入填写阶段 |
| | | this.isShowTable = false; |
| | | this.isUpdate = false; |
| | | } else { |
| | | this.$showMessage(genRes.data.message || "获取失败"); |
| | | } |
| | |
| | | <style scoped> |
| | | /* 基础样式 */ |
| | | .inspection-sheet { |
| | | font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif; |
| | | max-width: 1000px; |
| | | margin: 0 auto; |
| | | padding: 20px 20px 100px 20px; /* 底部增加内边距为固定按钮留空间 */ |
| | | background-color: #fff; |
| | | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
| | | min-height: 100vh; |
| | | position: relative; |
| | | transition: all 0.3s ease; |
| | | padding: 10px; |
| | | background-color: #f5f7fa; |
| | | min-height: 100vh; |
| | | padding-bottom: 120px; /* 为底部固定按钮留出空间 */ |
| | | } |
| | | |
| | | /* 头部样式 */ |
| | | .sheet-header { |
| | | text-align: center; |
| | | margin-bottom: 20px; |
| | | padding-bottom: 15px; |
| | | border-bottom: 2px solid #e0e0e0; |
| | | background-color: white; |
| | | padding: 20px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .sheet-header h1 { |
| | | color: #2c3e50; |
| | | font-size: 24px; |
| | | margin-bottom: 5px; |
| | | font-size: 24px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .inspection-number { |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: #3498db; |
| | | font-size: 16px; |
| | | color: #3498db; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 基本信息区样式 */ |
| | | .basic-info, |
| | | .material-info { |
| | | margin-bottom: 20px; |
| | | /* 基本信息区 */ |
| | | .basic-info { |
| | | background-color: white; |
| | | padding: 20px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .info-row { |
| | | display: flex; |
| | | margin-bottom: 10px; |
| | | flex-wrap: wrap; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 15px; |
| | | } |
| | | |
| | | .info-label { |
| | | font-weight: bold; |
| | | color: #34495e; |
| | | min-width: 80px; |
| | | margin-right: 5px; |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | margin-right: 10px; |
| | | min-width: 80px; |
| | | } |
| | | |
| | | .info-value { |
| | | color: #2c3e50; |
| | | margin-right: 20px; |
| | | font-size: 14px; |
| | | color: #2c3e50; |
| | | margin-right: 20px; |
| | | } |
| | | |
| | | .info-picker { |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | margin-right: 20px; |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | margin-right: 20px; |
| | | } |
| | | |
| | | /* 物料信息区样式 */ |
| | | /* 物料信息区 */ |
| | | .material-info { |
| | | border: 1px solid #eee; |
| | | padding: 15px; |
| | | border-radius: 5px; |
| | | background-color: white; |
| | | padding: 20px; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .info-block { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 10px; |
| | | flex-wrap: wrap; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-bottom: 15px; |
| | | } |
| | | |
| | | .info-block .info-label { |
| | | min-width: 100px; |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | min-width: 100px; |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .info-block .info-value { |
| | | font-size: 14px; |
| | | color: #2c3e50; |
| | | flex: 1; |
| | | font-size: 14px; |
| | | color: #2c3e50; |
| | | flex: 1; |
| | | } |
| | | |
| | | .info-picker-input { |
| | | flex: 1; |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | flex: 1; |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .info-input { |
| | | flex: 1; |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | flex: 1; |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .highlight { |
| | | font-weight: bold; |
| | | color: #e74c3c; |
| | | font-weight: 600; |
| | | color: #e74c3c; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | /* 表格样式 */ |
| | | /* 检验项目表格 */ |
| | | .inspection-table { |
| | | margin: 25px 0; |
| | | margin: 25px 0; |
| | | border-radius: 8px; |
| | | overflow: hidden; |
| | | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
| | | background: #fff; |
| | | } |
| | | |
| | | .inspection-table table { |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | width: 100%; |
| | | border-collapse: collapse; |
| | | } |
| | | |
| | | .inspection-table th, |
| | | .inspection-table td { |
| | | padding: 12px 15px; |
| | | border: 1px solid #ddd; |
| | | text-align: left; |
| | | .inspection-table th, .inspection-table td { |
| | | padding: 16px 20px; |
| | | border: none; |
| | | text-align: left; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | .inspection-table th { |
| | | background-color: #f8f9fa; |
| | | font-weight: bold; |
| | | color: #34495e; |
| | | background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| | | font-weight: 600; |
| | | color: #fff; |
| | | font-size: 14px; |
| | | letter-spacing: 0.5px; |
| | | position: relative; |
| | | } |
| | | |
| | | .inspection-table tr:nth-child(even) { |
| | | background-color: #f9f9f9; |
| | | .inspection-table tbody tr { |
| | | transition: all 0.3s ease; |
| | | border-left: 4px solid transparent; |
| | | } |
| | | |
| | | .inspection-table tr:hover { |
| | | background-color: #f1f5f9; |
| | | .inspection-table tbody tr:nth-child(even) { |
| | | background-color: #f8fafc; |
| | | } |
| | | |
| | | .inspection-table tbody tr:hover { |
| | | background-color: #e8f4fd; |
| | | border-left-color: #3498db; |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15); |
| | | } |
| | | |
| | | /* 检验描述列特殊样式 */ |
| | | .inspection-table td:nth-child(2) { |
| | | position: relative; |
| | | min-height: 80px; |
| | | vertical-align: top; |
| | | padding: 16px 20px; |
| | | } |
| | | |
| | | /* 水印样式 */ |
| | | .watermark { |
| | | position: absolute; |
| | | font-size: 40px; |
| | | font-weight: bold; |
| | | opacity: 1; |
| | | z-index: 1; |
| | | pointer-events: none; |
| | | transform: rotate(-15deg); |
| | | width: 100%; |
| | | text-align: center; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%) rotate(-15deg); |
| | | position: absolute; |
| | | font-size: 32px; |
| | | font-weight: bold; |
| | | opacity: 0.4; |
| | | z-index: 3; |
| | | pointer-events: none; |
| | | top: 50%; |
| | | left: 50%; |
| | | transform: translate(-50%, -50%) rotate(-15deg); |
| | | text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); |
| | | min-width: 60px; |
| | | text-align: center; |
| | | } |
| | | |
| | | .watermark.approved { |
| | | color: #2ecc71; |
| | | /* 绿色 */ |
| | | color: #27ae60; /* 更淡的绿色 */ |
| | | } |
| | | |
| | | .watermark.rejected { |
| | | color: #e74c3c; |
| | | /* 红色 */ |
| | | color: #e67e22; /* 更淡的红色 */ |
| | | } |
| | | |
| | | .watermark.pending { |
| | | color: #f39c12; |
| | | /* 橙色 */ |
| | | color: #f39c12; /* 橙色 */ |
| | | } |
| | | |
| | | /* 描述文本容器 */ |
| | | /* 描述文本样式 */ |
| | | .description-text { |
| | | position: relative; |
| | | z-index: 2; |
| | | padding: 25px; |
| | | background-color: rgba(255, 255, 255, 0.7); |
| | | position: relative; |
| | | z-index: 2; |
| | | padding: 12px 16px; |
| | | background: transparent; |
| | | line-height: 1.6; |
| | | font-size: 14px; |
| | | color: #555; |
| | | margin: 0; |
| | | word-wrap: break-word; |
| | | word-break: break-word; |
| | | max-width: 100%; |
| | | /* 确保文字不会太长遮挡水印 */ |
| | | padding-right: 80px; |
| | | min-height: 20px; |
| | | display: block; |
| | | } |
| | | |
| | | /* 调整表格单元格 */ |
| | | .inspection-table td:nth-child(2) { |
| | | position: relative; |
| | | overflow: hidden; |
| | | padding: 0; |
| | | .record-btn { |
| | | padding: 8px 16px; |
| | | background: linear-gradient(135deg, #3498db, #2980b9); |
| | | color: #fff; |
| | | border: none; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | transition: all 0.3s ease; |
| | | font-weight: 500; |
| | | font-size: 13px; |
| | | box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3); |
| | | } |
| | | |
| | | .record-btn:hover { |
| | | background: linear-gradient(135deg, #2980b9, #1f618d); |
| | | transform: translateY(-1px); |
| | | box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4); |
| | | } |
| | | |
| | | .record-btn:active { |
| | | transform: translateY(0); |
| | | } |
| | | |
| | | /* 表单上方操作按钮区样式 */ |
| | | .top-action-buttons { |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | gap: 10px; |
| | | margin: 20px 0; |
| | | padding: 15px; |
| | | background-color: #f8f9fa; |
| | | border-radius: 8px; |
| | | border: 1px solid #e9ecef; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | gap: 10px; |
| | | margin: 20px 0; |
| | | padding: 15px; |
| | | background-color: #f8f9fa; |
| | | border-radius: 8px; |
| | | border: 1px solid #e9ecef; |
| | | } |
| | | |
| | | /* 表单下方操作按钮区样式 */ |
| | | .bottom-action-buttons { |
| | | display: flex; |
| | | justify-content: center; |
| | | gap: 8px; |
| | | padding: 12px; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | position: fixed; /* 固定在屏幕底部 */ |
| | | bottom: 0; /* 距离底部0px */ |
| | | left: 0; /* 距离左边0px */ |
| | | right: 0; /* 距离右边0px */ |
| | | background-color: #fff; /* 背景色 */ |
| | | border-top: 1px solid #e9ecef; /* 顶部边框 */ |
| | | z-index: 1000; /* 确保在最上层 */ |
| | | box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 顶部阴影 */ |
| | | display: flex; |
| | | justify-content: center; |
| | | gap: 8px; |
| | | padding: 12px; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | position: fixed; /* 固定在屏幕底部 */ |
| | | bottom: 0; /* 距离底部0px */ |
| | | left: 0; /* 距离左边0px */ |
| | | right: 0; /* 距离右边0px */ |
| | | background-color: #fff; /* 背景色 */ |
| | | border-top: 1px solid #e9ecef; /* 顶部边框 */ |
| | | z-index: 1000; /* 确保在最上层 */ |
| | | box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 顶部阴影 */ |
| | | } |
| | | |
| | | .action-btn { |
| | | background-color: #ecf0f1; |
| | | color: #34495e; |
| | | padding: 12px 15px; |
| | | border: none; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | font-size: 14px; |
| | | font-weight: 500; |
| | | transition: all 0.3s ease; |
| | | text-align: center; |
| | | min-height: 44px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background-color: #ecf0f1; |
| | | color: #34495e; |
| | | padding: 12px 15px; |
| | | border: none; |
| | | border-radius: 6px; |
| | | cursor: pointer; |
| | | font-size: 14px; |
| | | font-weight: 500; |
| | | transition: all 0.3s ease; |
| | | text-align: center; |
| | | min-height: 44px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .action-btn:hover { |
| | | background-color: #d5dbdb; |
| | | transform: translateY(-1px); |
| | | background-color: #d5dbdb; |
| | | transform: translateY(-1px); |
| | | } |
| | | |
| | | .action-btn.primary { |
| | | background-color: #3498db; |
| | | color: #fff; |
| | | background-color: #3498db; |
| | | color: #fff; |
| | | } |
| | | |
| | | .action-btn.primary:hover { |
| | | background-color: #2980b9; |
| | | background-color: #2980b9; |
| | | } |
| | | |
| | | /* 小尺寸按钮样式 */ |
| | | .action-btn.small { |
| | | padding: 10px 12px; |
| | | font-size: 14px; |
| | | min-height: 44px; |
| | | white-space: nowrap; |
| | | flex-shrink: 0; |
| | | min-width: 80px; |
| | | max-width: 120px; |
| | | flex: 1; |
| | | padding: 10px 12px; |
| | | font-size: 14px; |
| | | min-height: 44px; |
| | | white-space: nowrap; |
| | | flex-shrink: 0; |
| | | min-width: 80px; |
| | | max-width: 120px; |
| | | flex: 1; |
| | | } |
| | | |
| | | /* 原有按钮样式保持兼容 */ |
| | | .action-buttons { |
| | | display: flex; |
| | | gap: 10px; |
| | | margin: 15px 0; |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | .record-btn { |
| | | padding: 6px 12px; |
| | | background-color: #f8f9fa; |
| | | border: 1px solid #ddd; |
| | | /* border-radius: 3px; */ |
| | | cursor: pointer; |
| | | transition: all 0.2s; |
| | | } |
| | | |
| | | .record-btn:hover { |
| | | background-color: #e9ecef; |
| | | display: flex; |
| | | gap: 10px; |
| | | margin: 15px 0; |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | .overlay { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: rgba(0, 0, 0, 0.5); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 1000; /* 提高层级,确保在固定按钮上方 */ |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: rgba(0, 0, 0, 0.5); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 1000; /* 提高层级,确保在固定按钮上方 */ |
| | | } |
| | | |
| | | /* 弹窗整体美化 */ |
| | | .popup { |
| | | background: #fff; |
| | | border-radius: 16px; |
| | | box-shadow: 0 8px 32px rgba(60,60,60,0.18); |
| | | padding: 28px 28px 18px 28px; |
| | | border: none; |
| | | position: relative; |
| | | min-width: 260px; |
| | | z-index: 1001; /* 确保弹窗内容在最上层 */ |
| | | max-height: 80vh; /* 限制最大高度,避免被底部按钮遮挡 */ |
| | | overflow-y: auto; /* 内容过多时可滚动 */ |
| | | background: #fff; |
| | | border-radius: 16px; |
| | | box-shadow: 0 8px 32px rgba(60,60,60,0.18); |
| | | padding: 28px 28px 18px 28px; |
| | | border: none; |
| | | position: relative; |
| | | min-width: 260px; |
| | | z-index: 1001; /* 确保弹窗内容在最上层 */ |
| | | max-height: 80vh; /* 限制最大高度,避免被底部按钮遮挡 */ |
| | | overflow-y: auto; /* 内容过多时可滚动 */ |
| | | } |
| | | |
| | | .popup-header { |
| | | padding: 20px; |
| | | border-bottom: 1px solid #eee; |
| | | padding: 20px; |
| | | border-bottom: 1px solid #eee; |
| | | } |
| | | |
| | | .popup-header h3 { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin: 0; |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | margin: 0; |
| | | } |
| | | |
| | | .popup-content { |
| | | padding: 20px; |
| | | padding: 20px; |
| | | } |
| | | |
| | | .popup-actions { |
| | | padding: 20px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 10px; |
| | | justify-content: flex-end; |
| | | padding: 20px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 10px; |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | /* 空状态样式 */ |
| | | .empty-state { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | padding: 60px 20px; |
| | | text-align: center; |
| | | background-color: #fafafa; |
| | | border-radius: 8px; |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | .empty-icon { |
| | | font-size: 48px; |
| | | margin-bottom: 16px; |
| | | opacity: 0.6; |
| | | } |
| | | |
| | | .empty-text { |
| | | font-size: 18px; |
| | | font-weight: 600; |
| | | color: #666; |
| | | margin-bottom: 8px; |
| | | } |
| | | |
| | | .empty-desc { |
| | | font-size: 14px; |
| | | color: #999; |
| | | line-height: 1.5; |
| | | } |
| | | |
| | | /* 响应式设计 */ |
| | | @media (max-width: 500px) { |
| | | .inspection-sheet { |
| | | padding-bottom: 100px; /* 小屏幕设备上减少底部内边距 */ |
| | | } |
| | | |
| | | .info-row, |
| | | .info-block { |