klp-oa/klp-ui/src/views/wms/print/read.vue

<template>
  <div class="qr-parser-container">
    
    <div class="card">
      <el-alert title="请将当前输入法切换到英文输入后再进行扫码操作" type="warning"></el-alert>
      <div class="card-header">
        <h2 class="title">二维码解析器</h2>
        <p class="subtitle">扫描或输入二维码内容进行解析</p>
      </div>
      
      <div class="input-section">
        <el-input 
          v-model="text" 
          @change="handleChange" 
          @blur="handleBlur" 
          ref="textarea"
          placeholder="请扫描二维码或粘贴二维码文本内容..." 
          :rows="3"
          type="textarea"
          :class="{ 'invalid-input': !isValid && text.length > 0 }"
        />
        <div class="input-hint">
          <i class="el-icon-info-circle"></i>
          <span>{{ inputHint }}</span>
        </div>
      </div>
      
      <!-- 加载状态 -->
      <el-loading 
        v-if="isLoading" 
        text="正在解析数据..." 
        class="loading-overlay"
      ></el-loading>
      
      <!-- 二维码解析结果 - 只有数据有效时才显示 -->
      <div v-if="isValid" class="result-section fade-in">
        <div class="result-header">
          <h3>解析结果</h3>
          <el-tag 
            :type="result.ioType === 'in' ? 'success' : 'warning'"
            size="small"
          >
            {{ result.ioType === 'in' ? '入库' : '出库' }}
          </el-tag>
        </div>
        
        <el-descriptions :column="1" border class="result-table">
          <el-descriptions-item label="出入库类型" :span="1">
            {{ result.ioType === 'in' ? '入库' : '出库' }}
          </el-descriptions-item>
          <el-descriptions-item label="物料类型" :span="1">
            {{ formatItemType(result.itemType) }}
          </el-descriptions-item>
          <el-descriptions-item label="物料信息" :span="1">
            <ProductInfo v-if="result.itemType === 'product' || result.itemType === 'semi'" :productId="result.itemId" />
            <RawMaterialInfo v-else-if="result.itemType === 'raw_material'" :materialId="result.itemId" />
            <el-input v-else disabled v-model="result.itemId" placeholder="未知物料" :disabled="true" style="width: 100%;" />
          </el-descriptions-item>
          <el-descriptions-item label="数量" :span="1">
            {{ result.quantity }}
          </el-descriptions-item>
          <el-descriptions-item label="计量单位" :span="1">
            {{ result.unit }}
          </el-descriptions-item>
        </el-descriptions>
        
        <div class="action-buttons">
          <el-button 
            type="primary" 
            @click="handleSubmit"
            :loading="isSubmitting"
            icon="el-icon-check"
          >
            确认执行
          </el-button>
          <el-button 
            type="default" 
            @click="handleReset"
            icon="el-icon-refresh-right"
          >
            重置
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProductInfo from '@/components/KLPService/Renderer/ProductInfo';
import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo';
import { addStockIoDetail } from '@/api/wms/stockIoDetail';

export default {
  data() {
    return {
      text: '',
      isLoading: false,
      isSubmitting: false,
      inputHint: '请输入二维码内容，系统将自动解析',
    };
  },
  components: {
    ProductInfo,
    RawMaterialInfo,
  },
  computed: {
    result() {
      try {
        return JSON.parse(this.text);
      } catch (error) {
        return {};
      }
    },
    // 验证数据是否有效
    isValid() {
      const requiredFields = ['ioType', 'itemType', 'itemId', 'quantity', 'unit'];
      // 检查是否包含所有必要字段
      const hasAllFields = requiredFields.every(field => this.result.hasOwnProperty(field));
      // 检查出入库类型是否有效
      const isIoTypeValid = this.result.ioType === 'in' || this.result.ioType === 'out';
      // 检查物料类型是否有效
      const isItemTypeValid = ['product', 'semi', 'raw_material'].includes(this.result.itemType);
      // 检查数量是否为有效数字
      const isQuantityValid = !isNaN(Number(this.result.quantity)) && Number(this.result.quantity) > 0;
      
      return hasAllFields && isIoTypeValid && isItemTypeValid && isQuantityValid;
    }
  },
  methods: {
    handleChange(value) {
      if (!value) {
        this.inputHint = '请输入二维码内容，系统将自动解析';
        return;
      }
      
      this.isLoading = true;
      
      // 模拟解析延迟，提升用户体验
      setTimeout(() => {
        try {
          const parsed = JSON.parse(value);
          if (this.isValid) {
            this.inputHint = '数据解析成功，可以提交操作';
            this.$message.success({
              message: '数据解析成功',
              duration: 1500
            });
            // 解析成功后禁用输入框
            this.handleSubmit();
            // this.$refs.textarea.disabled = true;
            console.log(this.$refs.textarea.disabled, '禁用输入框');
          } else {
            this.inputHint = '解析的数据格式不完整，请检查二维码是否正确';
            this.$message.warning({
              message: '数据格式不完整',
              duration: 2000
            });
          }
        } catch (error) {
          this.inputHint = '无法解析数据，请确保输入的是有效的二维码内容';
          this.$message.error({
            message: '解析失败，请检查输入内容',
            duration: 2000
          });
        } finally {
          this.isLoading = false;
        }
      }, 500);
    },
    handleBlur() {
      // 自动重新聚焦，方便连续扫描
      this.$nextTick(() => {
        this.$refs.textarea.focus();
      });
    },
    handleSubmit() {
      if (!this.isValid) return;
      
      this.isSubmitting = true;
      
      addStockIoDetail(this.result)
        .then(res => {
          this.$message.success({
            message: '操作成功',
            duration: 2000
          });
        })
        .catch(err => {
          this.$message.error({
            message: '操作失败: ' + (err.message || '未知错误'),
            duration: 3000
          });
        })
        .finally(() => {
          this.isSubmitting = false;
          // 提交成功后重置表单，方便下一次操作
          this.handleReset();
        });
    },
    handleReset() {
      this.text = '';
      this.inputHint = '请输入二维码内容，系统将自动解析';
      // 重置后重新聚焦
      this.$nextTick(() => {
        this.$refs.textarea.focus();
      });
    },
    // 格式化物料类型显示文本
    formatItemType(type) {
      const typeMap = {
        'product': '成品',
        'semi': '半成品',
        'raw_material': '原材料'
      };
      return typeMap[type] || '未知类型';
    }
  },
  mounted() {
    // 确保组件挂载后自动聚焦
    this.$nextTick(() => {
      this.$refs.textarea.focus();
    });
  }
}
</script>

<style scoped>
.qr-parser-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.card {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
}

.title {
  margin: 0;
  font-size: 20px;
  color: #1f2329;
  font-weight: 600;
}

.subtitle {
  margin: 5px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.input-section {
  padding: 24px;
}

.el-input {
  transition: all 0.3s ease;
}

.el-input.invalid-input .el-textarea__inner {
  border-color: #f56c6c;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
}

.input-hint {
  margin-top: 8px;
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
}

.input-hint i {
  margin-right: 4px;
  font-size: 14px;
}

.result-section {
  padding: 0 24px 24px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.result-header h3 {
  margin: 0;
  font-size: 16px;
  color: #1f2329;
  font-weight: 500;
}

.result-table {
  margin-bottom: 24px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* 淡入动画 */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>