通用界面，不良功能搬运至平板程序

wbc

2025-12-08 983dddd66ab8a999544272089e8c0fc12370f356

 pages/QC/XJ/detail.vue

@@ -66,11 +66,6 @@
          </view>
        </view>

        <view v-if="formData.result != null" class="result-preview">
          <view class="info-label">预览结果</view>
          <view class="info-value">{{formData.result}}</view>
        </view>

        <view v-if="formData.remarks != null" class="result-ng">
          <view class="info-label">不合格描述</view>
          <view class="info-value danger">{{formData.remarks}}</view>
@@ -82,23 +77,19 @@
    <view class="section">
      <view class="section-header">检验结果录入</view>
      <view class="section-body">
        <view class="inspection-hint">
          <view class="hint-text">没有最大值和最小值时填写0（未通过检验）或1（通过检验）</view>
        </view>
        
        <!-- 不合格检验项目提示 -->
        <view class="validation-hint" v-if="isUnqualifiedResult()">
        <!-- 验证提示 -->
        <view v-if="isUnqualifiedResult()" class="validation-hint">
          <view class="validation-icon">⚠️</view>
          <view class="validation-text">
            <view class="validation-title">检验项目不合格，必须完成以下操作：</view>
            <view class="validation-requirements">
              <view class="requirement-item" :class="{ 'completed': hasImage(), 'required': !hasImage() }">
                <text class="requirement-icon">{{ hasImage() ? '✅' : '❌' }}</text>
                <text class="requirement-text">上传图片</text>
              <view class="requirement-item" :class="{ 'completed': hasImage() }">
                <view class="requirement-icon">{{ hasImage() ? '✅' : '❌' }}</view>
                <view class="requirement-text">上传图片</view>
              </view>
              <view class="requirement-item" :class="{ 'completed': hasRemarks(), 'required': !hasRemarks() }">
                <text class="requirement-icon">{{ hasRemarks() ? '✅' : '❌' }}</text>
                <text class="requirement-text">填写不良描述</text>
              <view class="requirement-item" :class="{ 'completed': hasRemarks() }">
                <view class="requirement-icon">{{ hasRemarks() ? '✅' : '❌' }}</view>
                <view class="requirement-text">填写不良描述</view>
              </view>
            </view>
          </view>
@@ -108,9 +99,9 @@
          <view class="input-wrapper">
            <input v-if="tableData.length < formData.levelNum"
              v-model="formData.fcheckResu"
              type="number"
              type="text"
              class="result-input"
              placeholder="请输入检验结果"
              placeholder="没有最大值和最小值时填写0（未通过检验）或1（通过检验）"
              placeholder-class="placeholder" />
            <button v-if="(tableData.length < formData.levelNum)"
              style="margin: 0px;background-color: #3498db;color:#ffffff ;" class="btn primary-btn"
@@ -163,8 +154,18 @@

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="action-btn warning" @click="saveRemarks">添加不合格描述</button>
      <button class="action-btn primary" @click="viewAttachmentInfo">查看附件信息</button>
      <button class="btn upload-btn" @click="saveRemarks">
        <view class="btn-content">
          <uni-icons type="compose" size="16" color="#fff"></uni-icons>
          <view class="btn-text">添加不合格描述</view>
        </view>
      </button>
      <button class="btn attachment-btn" @click="viewAttachmentInfo">
        <view class="btn-content">
          <uni-icons type="folder" size="16" color="#fff"></uni-icons>
          <view class="btn-text">查看附件信息</view>
        </view>
      </button>
      <button class="action-btn success tablet-upload-btn" @click="uploadImage">
        <view class="btn-content">
          <view class="btn-icon">📷</view>
@@ -1256,19 +1257,6 @@
  color: #721c24;
}

/* 检验输入区 */
.inspection-hint {
  background-color: #fff3cd;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.hint-text {
  font-size: 12px;
  color: #856404;
}

/* 验证提示样式 */
.validation-hint {
  background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
@@ -1310,19 +1298,16 @@
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  border: 1px solid rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
}

.requirement-item.completed {
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.requirement-item.required {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  background: rgba(46, 204, 113, 0.1);
  border-color: rgba(46, 204, 113, 0.3);
}

.requirement-icon {
@@ -1332,29 +1317,30 @@

.requirement-text {
  font-size: 13px;
  font-weight: 500;
  color: #2c3e50;
  font-weight: 500;
}

.requirement-item.completed .requirement-text {
  color: #27ae60;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  margin: 16px 0;
}

.input-wrapper {
  display: flex;
  gap: 12px;
  width: 100%;
}

.result-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  height: 45px;
  padding: 0 12px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}

.btn {
@@ -1450,80 +1436,133 @@

/* 操作按钮 */
.action-buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}

.action-btn {
  padding: 12px 20px;
  padding: 8px 20px;
  border-radius: 4px;

  &.primary-btn {
    background-color: #3498db;
    color: #fff;
  }

  &.cancel-btn {
    background-color: #95a5a6;
    color: #fff;
  }

  &.success {
    background-color: #2ecc71;
    color: #fff;
  }
}

.btn {
  padding: 8px 20px;
  border-radius: 4px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn.primary {
  background-color: #3498db;
  color: white;
}
  &.upload-btn {
    background-color: #f39c12;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    min-height: 48px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
  }

.action-btn.secondary {
  background-color: #95a5a6;
  color: white;
}
  &.upload-btn:hover {
    background-color: #e67e22;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(243, 156, 18, 0.4);
  }

.action-btn.warning {
  background-color: #f39c12;
  color: white;
}
  &.attachment-btn {
    background-color: #17a2b8;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    min-height: 48px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.3);
  }

.action-btn.success {
  background-color: #2ecc71;
  color: white;
  &.attachment-btn:hover {
    background-color: #138496;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(23, 162, 184, 0.4);
  }
}

/* 平板上传按钮样式 */
.tablet-upload-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
}

.tablet-upload-btn:hover {
  background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
}

.tablet-upload-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.3);
  box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
}

.btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
}

.btn-icon {
  font-size: 24px;
  line-height: 1;
  font-size: 18px;
}

.btn-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

/* 弹出框样式 */
@@ -1617,39 +1656,6 @@

/* 平板优化样式 */
@media (min-width: 768px) and (max-width: 1024px) {
  .action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
  }
  
  .action-btn {
    padding: 20px 16px;
    font-size: 16px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .tablet-upload-btn {
    min-height: 100px;
  }
  
  .btn-content {
    gap: 12px;
    padding: 12px;
  }
  
  .btn-icon {
    font-size: 32px;
  }
  
  .btn-text {
    font-size: 16px;
  }
  
  .info-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
@@ -1679,36 +1685,6 @@

/* 大屏平板优化 */
@media (min-width: 1024px) {
  .action-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
  }
  
  .action-btn {
    padding: 25px 20px;
    font-size: 18px;
    min-height: 100px;
  }
  
  .tablet-upload-btn {
    min-height: 120px;
  }
  
  .btn-content {
    gap: 15px;
    padding: 15px;
  }
  
  .btn-icon {
    font-size: 36px;
  }
  
  .btn-text {
    font-size: 18px;
  }
  
  .info-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;