111

啊鑫

2025-07-21 2b0e70bb88ced210dbc693a4d2ded2d658b1da02

 pages/QC/OQC/ScanCode.vue

@@ -7,30 +7,30 @@
               <view class="form-group col-2">
                  <label class="form-label">物料条码:</label>
                  <view class="input-with-scan">
                     <input class="form-input scan-input" type="text" v-model="formData.ItemBarcode" 
                        @confirm="addItemBarCode"
                        placeholder="输入后离开或按回车" />
              <input v-model="formData.ItemBarcode" class="form-input scan-input" placeholder="输入后离开或按回车"
                     type="text"
                     @confirm="addItemBarCode"/>
                     <view class="scan-button" @tap="startScan">
                        <uni-icons type="scan" size="24" color="#007bff"></uni-icons>
                <uni-icons color="#007bff" size="24" type="scan"></uni-icons>
                        <text class="scan-text">扫码</text>
                     </view>
                  </view>
               </view>
               <view class="form-group col-2">
                  <label class="form-label">产品名称:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.itemName" />
            <input v-model="formData.itemName" class="form-input" disabled="true" type="text"/>
               </view>
               <view class="form-group col-2">
                  <label class="form-label">产品编码:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.itemNo" />
            <input v-model="formData.itemNo" class="form-input" disabled="true" type="text"/>
               </view>
               <view class="form-group col-2">
                  <label class="form-label">订单编号:</label>
                  <input class="form-input" disabled="true" type="text" v-model="formData.taskNo" />
            <input v-model="formData.taskNo" class="form-input" disabled="true" type="text"/>
               </view>
               <view class="form-group col-2">
                  <label class="form-label">已扫数量:</label>
                  <input class="form-input" disabled="true" type="text" v-model="quantity" />
            <input v-model="quantity" class="form-input" disabled="true" type="text"/>
               </view>
            </view>
         </form>
@@ -46,7 +46,7 @@
         </view>
         <view class="table-wrapper">
            <scroll-view class="table-scroll" scroll-x="true" show-scrollbar="true">
               <uni-table ref="table" border emptyText="暂无更多数据" class="custom-table">
          <uni-table ref="table" border class="custom-table" emptyText="暂无更多数据">
                  <uni-tr class="table-header-row">
                     <uni-th align="center" class="th" width="80">序号</uni-th>
                     <uni-th align="center" class="th" width="160">物料条码</uni-th>
@@ -54,7 +54,7 @@
                     <uni-th align="center" class="th" width="140">产品编码</uni-th>
                     <uni-th align="center" class="th" width="160">产品名称</uni-th>
                     <uni-th align="center" class="th" width="100">条码数量</uni-th>
                     <uni-th align="center" class="th" width="80">　</uni-th>
              <uni-th align="center" class="th" width="80">删除</uni-th>
                  </uni-tr>
                  <uni-tr v-for="(item, index) in tableData" :key="index" class="table-row">
                     <uni-td align="center" width="80">
@@ -70,38 +70,25 @@
                        <view class="cell-content">{{ item.itemNo }}</view>
                     </uni-td>
                     <uni-td align="center" width="160">
                        <view class="cell-content" :title="item.itemName">{{ item.itemName }}</view>
                <view :title="item.itemName" class="cell-content">{{ item.itemName }}</view>
                     </uni-td>
                     <uni-td align="center" width="100">
                        <view class="cell-content quantity">{{ item.quantity }}</view>
                     </uni-td>
                     <uni-td align="center" width="80">
                        <view class="cell-content">　</view>
                <view class="delete-icon" @click="deleteItem(index)">
                  <uni-icons size="24" type="trash"></uni-icons>
                </view>
                     </uni-td>
                  </uni-tr>
               </uni-table>
            </scroll-view>
				
            <!-- 右固定悬浮删除按钮列 -->
            <view class="fixed-delete-column">
               <view class="fixed-header">
                  <text class="fixed-header-text">操作</text>
               </view>
               <view class="fixed-content">
                  <view v-for="(item, index) in tableData" :key="index" class="fixed-delete-item" 
                     :class="{ 'even': index % 2 === 1 }">
                     <view @click="deleteItem(index)" class="delete-icon">
                        <uni-icons type="trash" size="24"></uni-icons>
                     </view>
                  </view>
               </view>
            </view>
         </view>
      </view>

      <!-- 操作按钮区域 -->
      <view class="action-buttons-container button-group">
         <view class="plus-button" :class="{ 'submitting': isSubmitting }" @tap="handleSubmit">
      <view :class="{ 'submitting': isSubmitting }" class="plus-button" @tap="handleSubmit">
            <text>{{ isSubmitting ? '提交中...' : '生成OQC检验单' }}</text>
         </view>
      </view>
@@ -370,8 +357,8 @@
   .form-container {
     .form-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 24rpx 16rpx;
    grid-template-columns: 1fr;
    gap: 24rpx;
     }
   
     .form-group {
@@ -474,10 +461,12 @@
       border-radius: 8rpx;
       overflow: hidden;
       border: 1rpx solid #dee2e6;
    display: flex;
     }
   
     .table-scroll {
       width: calc(100% - 80rpx); /* 减去固定列宽度 */
    flex: 1;
    overflow-x: auto;
       white-space: nowrap;
     }
   
@@ -492,7 +481,9 @@
           font-size: 26rpx;
           color: #495057;
           font-weight: 600;
           padding: 20rpx 12rpx;
        padding: 0 8rpx;
        height: 68rpx;
        line-height: 68rpx;
           background: transparent !important;
           border-right: 1rpx solid #dee2e6;
           white-space: nowrap;
@@ -516,11 +507,13 @@
         }
   
         .uni-td {
           padding: 16rpx 12rpx;
        padding: 0 8rpx;
        height: 68rpx;
           border-color: #dee2e6 !important;
           border-right: 1rpx solid #dee2e6;
           white-space: nowrap;
           min-width: 80rpx;
        vertical-align: middle;
   
           &:last-child {
             border-right: none;
@@ -529,10 +522,13 @@
           .cell-content {
             font-size: 24rpx;
             color: #495057;
             line-height: 1.4;
          line-height: 68rpx;
             max-width: 100%;
             overflow: hidden;
             text-overflow: ellipsis;
          display: flex;
          align-items: center;
          height: 68rpx;
   
             &.quantity {
               font-weight: 600;
@@ -550,24 +546,26 @@
             font-size: 24rpx;
             color: #6c757d;
             font-weight: 500;
          line-height: 68rpx;
          display: flex;
          align-items: center;
          height: 68rpx;
           }
         }
       }
     }
   
     /* 右固定悬浮删除列 */

     .fixed-delete-column {
       position: absolute;
       top: 0;
       right: 0;
       width: 80rpx;
    flex-shrink: 0;
    width: 100rpx;
       background: #ffffff;
       border-left: 1rpx solid #dee2e6;
       box-shadow: -4rpx 0 8rpx rgba(0, 0, 0, 0.05);
       z-index: 10;
   
       .fixed-header {
         height: 60rpx;
      height: 68rpx;
         background: linear-gradient(135deg, #f8f9fa, #e9ecef);
         display: flex;
         align-items: center;
@@ -583,7 +581,7 @@
   
       .fixed-content {
         .fixed-delete-item {
           height: 48rpx;
        height: 68rpx;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -643,7 +641,9 @@
       max-width: 600rpx;
       height: 96rpx;
       background: linear-gradient(135deg, #007bff, #0056b3);
       border-radius: 48rpx;
    border-radius: 12rpx;
    border: 2rpx solid #007bff;
    cursor: pointer;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -652,9 +652,21 @@
       font-weight: 600;
       box-shadow: 0 8rpx 24rpx rgba(0, 123, 255, 0.3);
       transition: all 0.3s ease;
       border: none;
       position: relative;
       overflow: hidden;
    text-align: center;

    /* 确保按钮可点击 */
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;

    text {
      color: #ffffff;
      font-size: 32rpx;
      font-weight: 600;
      line-height: 1;
    }
   
       &::before {
         content: "";
@@ -683,6 +695,15 @@
         &::before {
           display: none;
         }
    }

    /* 悬停效果 */

    &:hover:not(.submitting) {
      background: linear-gradient(135deg, #0056b3, #004085);
      border-color: #0056b3;
      box-shadow: 0 12rpx 32rpx rgba(0, 123, 255, 0.4);
      transform: translateY(-2rpx);
       }
     }
   }
@@ -742,4 +763,166 @@
     }
   }

/* 手机端响应式优化 */
@media (max-width: 768px) {
  .container {
    padding: 16rpx;
  }

  .card {
    padding: 24rpx;
    margin-bottom: 16rpx;
  }

  .form-container .form-grid {
    grid-template-columns: 1fr;
    gap: 20rpx;
  }

  .form-group .form-label {
    font-size: 26rpx;
  }

  .form-group .form-input {
    height: 84rpx;
    font-size: 26rpx;
    padding: 0 20rpx;
  }

  .scan-button {
    min-width: 100rpx !important;
    height: 84rpx !important;
    padding: 12rpx 16rpx !important;

    .scan-text {
      font-size: 20rpx !important;
    }
  }

  .table-scroll {
    flex: 1;
  }

  .fixed-delete-column {
    width: 80rpx;
    flex-shrink: 0;

    .fixed-header {
      height: 60rpx;

      .fixed-header-text {
        font-size: 22rpx;
      }
    }

    .fixed-content .fixed-delete-item {
      height: 60rpx;
    }
  }

  .custom-table {
    .th {
      font-size: 22rpx;
      padding: 0 6rpx;
      height: 60rpx;
      line-height: 60rpx;
    }

    .uni-td {
      padding: 0 6rpx;
      height: 60rpx;

      .cell-content {
        font-size: 22rpx;
        line-height: 60rpx;
        height: 60rpx;
      }

      .description-text {
        line-height: 60rpx;
        height: 60rpx;
      }
    }
  }

  .delete-icon {
    padding: 8rpx;
    min-width: 40rpx;
    min-height: 40rpx;
  }

  .plus-button {
    height: 88rpx;
    font-size: 30rpx;
    border-radius: 8rpx;

    text {
      font-size: 30rpx;
      color: #ffffff;
    }

    &.submitting text {
      color: #ffffff;
    }
  }
}

/* 强制按钮样式 - 解决手机端显示问题 */
.plus-button {
  background: #007bff !important;
  background: linear-gradient(135deg, #007bff, #0056b3) !important;
  border: 2rpx solid #007bff !important;
  border-radius: 12rpx !important;
  color: #ffffff !important;
  font-size: 32rpx !important;
  font-weight: 600 !important;
  box-shadow: 0 8rpx 24rpx rgba(0, 123, 255, 0.3) !important;
  width: 100% !important;
  max-width: 600rpx !important;
  height: 96rpx !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.plus-button text {
  color: #ffffff !important;
  font-size: 32rpx !important;
  font-weight: 600 !important;
}

.plus-button.submitting {
  background: #6c757d !important;
  background: linear-gradient(135deg, #6c757d, #5a6268) !important;
  border-color: #6c757d !important;
}

.plus-button.submitting text {
  color: #ffffff !important;
}

/* 手机端按钮强制样式 */
@media (max-width: 768px) {
  .plus-button {
    background: #007bff !important;
    background: linear-gradient(135deg, #007bff, #0056b3) !important;
    border: 2rpx solid #007bff !important;
    border-radius: 8rpx !important;
    height: 88rpx !important;
    font-size: 30rpx !important;
  }

  .plus-button text {
    color: #ffffff !important;
    font-size: 30rpx !important;
    font-weight: 600 !important;
  }

  .plus-button.submitting text {
    color: #ffffff !important;
    font-size: 30rpx !important;
  }
}

</style>