klp-mono/apps/hand-factory/pages/todo/components/relabel-popup.vue

<template>
  <uni-popup ref="popup" type="center" :safe-area="true">
    <view class="popup-container">
      <view class="popup-header">
        <text class="popup-title">重贴标签</text>
        <text class="popup-close" @click="close">✕</text>
      </view>
      
      <view class="popup-content">
        <!-- 钢卷信息展示 -->
        <view class="coil-info">
          <view class="info-row">
            <text class="label">入场钢卷号：</text>
            <text class="value">{{ coilInfo.enterCoilNo || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">当前钢卷号：</text>
            <text class="value highlight">{{ coilInfo.currentCoilNo || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="label">产品名称：</text>
            <text class="value">{{ coilInfo.itemName || '-' }}</text>
          </view>
        </view>
        
        <!-- 操作人信息 -->
        <view class="operator-info">
          <text class="label">操作人：</text>
          <text class="value">{{ operatorName }}</text>
        </view>
      </view>
      
      <view class="popup-footer">
        <button class="btn btn-cancel" @click="close">取消</button>
        <button class="btn btn-confirm" @click="handleConfirm" :disabled="loading">
          {{ loading ? '提交中...' : '确认重贴' }}
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import { relabelCoil, completeTodoAction } from '@/api/wms/todo'

export default {
  name: 'RelabelPopup',
  data() {
    return {
      loading: false,
      coilInfo: {}
    }
  },
  computed: {
    operatorName() {
      return this.$store.state.user.nickName || this.$store.state.user.name || '未知'
    }
  },
  methods: {
    open(coilInfo) {
      this.coilInfo = coilInfo
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
    },
    async handleConfirm() {
      this.loading = true
      try {
        // 1. 提交重贴标签操作
        await relabelCoil({
          coilId: this.coilInfo.coilId,
          currentCoilNo: this.coilInfo.currentCoilNo,
          operator: this.operatorName,
          operateTime: new Date().toISOString()
        })
        
        // 2. 完成待办操作
        if (this.coilInfo.actionId) {
          await completeTodoAction(this.coilInfo.actionId)
        }
        
        uni.showToast({
          title: '重贴标签成功',
          icon: 'success'
        })
        
        this.close()
        this.$emit('success')
      } catch (error) {
        console.error('重贴标签失败:', error)
        uni.showToast({
          title: '操作失败，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.popup-container {
  background: #ffffff;
  border-radius: 16rpx;
  width: 80vw;
  max-width: 600rpx;
  overflow: hidden;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
    }
    
    .popup-close {
      font-size: 36rpx;
      color: #999999;
      padding: 10rpx;
    }
  }
  
  .popup-content {
    padding: 30rpx;
    
    .coil-info {
      background: #f8f8f8;
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 30rpx;
      
      .info-row {
        display: flex;
        margin-bottom: 16rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .label {
          font-size: 26rpx;
          color: #666666;
          width: 160rpx;
          flex-shrink: 0;
        }
        
        .value {
          font-size: 26rpx;
          color: #333333;
          flex: 1;
          
          &.highlight {
            color: #1a73e8;
            font-weight: 500;
          }
        }
      }
    }
    
    .operator-info {
      display: flex;
      align-items: center;
      padding-top: 20rpx;
      border-top: 1rpx solid #f0f0f0;
      
      .label {
        font-size: 26rpx;
        color: #666666;
      }
      
      .value {
        font-size: 26rpx;
        color: #333333;
        font-weight: 500;
      }
    }
  }
  
  .popup-footer {
    display: flex;
    padding: 20rpx 30rpx 40rpx;
    gap: 20rpx;
    
    .btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      border-radius: 8rpx;
      font-size: 30rpx;
      border: none;
      
      &::after {
        border: none;
      }
      
      &.btn-cancel {
        background: #f5f5f5;
        color: #666666;
      }
      
      &.btn-confirm {
        background: #1a73e8;
        color: #ffffff;
        
        &:disabled {
          opacity: 0.6;
        }
      }
    }
  }
}
</style>