KCGL/inventory-web/src/views/outbound/create.vue

<template>
  <div class="app-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>扫码出库作业台</span>
          <el-button type="primary" @click="toggleCamera">
            {{ showCamera ? '关闭摄像头' : '打开摄像头扫码' }}
          </el-button>
        </div>
      </template>

      <div v-if="!currentItem" class="scan-area">
        <div v-if="showCamera" id="reader" class="camera-box"></div>

        <div class="input-box">
          <el-input
              v-model="barcodeInput"
              placeholder="请扫描条码或手动输入后回车"
              @keyup.enter="handleScan"
              clearable
              ref="barcodeRef"
          >
            <template #prefix>
              <el-icon><Scissor /></el-icon>
            </template>
            <template #append>
              <el-button @click="handleScan">确定</el-button>
            </template>
          </el-input>
        </div>
      </div>

      <div v-else class="confirm-area">
        <el-descriptions title="货物信息" border :column="1">
          <el-descriptions-item label="名称">{{ currentItem.name }}</el-descriptions-item>
          <el-descriptions-item label="规格/型号">{{ currentItem.spec_model }}</el-descriptions-item>
          <el-descriptions-item label="当前库存">
            <el-tag :type="currentItem.available_quantity > 0 ? 'success' : 'danger'">
              {{ currentItem.stock_quantity }} (可用: {{ currentItem.available_quantity }})
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="库位">{{ currentItem.warehouse_location || '暂无' }}</el-descriptions-item>
        </el-descriptions>

        <el-form :model="form" ref="formRef" :rules="rules" label-position="top" class="mt-20">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="出库类型" prop="outbound_type">
                <el-select v-model="form.outbound_type" placeholder="请选择">
                  <el-option label="销售出库" value="SALES" />
                  <el-option label="内部领用" value="USE" />
                  <el-option label="调拨" value="TRANSFER" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出库数量" prop="quantity">
                <el-input-number v-model="form.quantity" :min="1" :max="currentItem.available_quantity" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="领用人/客户姓名" prop="consumer_name">
                <el-input v-model="form.consumer_name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作员 (库管)" prop="operator_name">
                <el-select
                    v-model="form.operator_name"
                    filterable
                    allow-create
                    default-first-option
                    placeholder="请选择或输入操作员"
                    style="width: 100%"
                >
                  <el-option
                      v-for="item in operatorOptions"
                      :key="item"
                      :label="item"
                      :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" />
          </el-form-item>

          <el-form-item label="电子签名 (请在下方区域签字)" required>
            <Signature ref="signatureRef" />
          </el-form-item>

          <div class="form-actions">
            <el-button @click="resetScan">取消 / 重新扫码</el-button>
            <el-button type="primary" :loading="loading" @click="submitForm">确认出库</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onUnmounted, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Html5Qrcode, Html5QrcodeSupportedFormats } from 'html5-qrcode'
// 引入接口
import { getStockByBarcode, submitOutbound, getOutboundList, type ScanResult } from '@/api/outbound'
import { uploadFile } from '@/api/common/upload'
// 引入组件
import Signature from '@/components/Signature/index.vue'
// 引入 Store 以获取当前登录用户
import { useUserStore } from '@/stores/user'

// --- 状态定义 ---
const barcodeInput = ref('')
const currentItem = ref<ScanResult | null>(null)
const loading = ref(false)
const showCamera = ref(false)
const html5QrCode = ref<Html5Qrcode | null>(null)
const barcodeRef = ref()
const signatureRef = ref()
const formRef = ref()
const userStore = useUserStore()

// 操作员选项列表
const operatorOptions = ref<string[]>([])

const form = reactive({
  outbound_type: 'SALES',
  quantity: 1,
  consumer_name: '',
  operator_name: '', // 新增字段
  remark: ''
})

const rules = {
  consumer_name: [{ required: true, message: '请输入领用人姓名', trigger: 'blur' }],
  quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
  operator_name: [{ required: true, message: '请指定操作员', trigger: 'change' }]
}

// --- 初始化逻辑 ---
onMounted(() => {
  // 1. 默认操作员为当前登录用户
  if (userStore.username) {
    form.operator_name = userStore.username
    operatorOptions.value.push(userStore.username)
  }
  // 2. 加载历史操作员记录
  loadHistoryOperators()
})

// 加载历史操作员列表 (用于自动补全)
const loadHistoryOperators = async () => {
  try {
    // 获取最近的 50 条出库记录
    const res = await getOutboundList({ page: 1, limit: 50 })
    if (res.data && res.data.items) {
      const names = new Set<string>()
      // 加入当前用户
      if (userStore.username) names.add(userStore.username)

      // 加入历史记录中的操作员
      res.data.items.forEach((item: any) => {
        if (item.operator_name) {
          names.add(item.operator_name)
        }
      })
      operatorOptions.value = Array.from(names)
    }
  } catch (e) {
    console.error('加载历史操作员失败', e)
  }
}

// --- 扫码逻辑 ---
const handleScan = async () => {
  if (!barcodeInput.value) return

  try {
    loading.value = true
    const res = await getStockByBarcode(barcodeInput.value)

    // 1. 成功找到记录
    if (res.data) {
      const item = res.data

      // ★ [逻辑修改] 检查库存状态
      if (item.available_quantity <= 0) {
        ElMessage.warning(`该商品库存不足或已出库！(当前库存: ${item.available_quantity})`)
        // 播放一个错误提示音或清空输入框让用户重新扫，但不进入表单
        barcodeInput.value = ''
        return
      }

      // 库存充足，进入确认界面
      currentItem.value = item

      // 如果开启了摄像头，识别成功后关闭
      if (html5QrCode.value && html5QrCode.value.isScanning) {
        await stopCamera()
      }
    }
  } catch (error: any) {
    // 2. 处理 404 未找到 (即没有入库记录)
    if (error.response && error.response.status === 404) {
      ElMessage.error(`未找到条码 ${barcodeInput.value} 的入库记录，请先入库！`)
    } else {
      console.error(error)
      ElMessage.error('查询出错，请重试')
    }
  } finally {
    loading.value = false
  }
}

// --- 摄像头控制 ---
const toggleCamera = async () => {
  if (showCamera.value) {
    await stopCamera()
  } else {
    showCamera.value = true
    nextTick(() => {
      startCamera()
    })
  }
}

const startCamera = () => {
  html5QrCode.value = new Html5Qrcode("reader", {
    formatsToSupport: [ Html5QrcodeSupportedFormats.CODE_128 ],
    verbose: false
  })

  html5QrCode.value.start(
      { facingMode: "environment" },
      {
        fps: 10,
        qrbox: { width: 250, height: 150 },
        aspectRatio: 1.0
      },
      (decodedText) => {
        console.log("扫码成功:", decodedText)
        barcodeInput.value = decodedText
        handleScan()
      },
      (errorMessage) => {
        // 忽略扫描过程中的每帧错误
      }
  ).catch(err => {
    ElMessage.error('无法启动摄像头: ' + err)
  })
}

const stopCamera = async () => {
  if (html5QrCode.value) {
    try {
      if (html5QrCode.value.isScanning) {
        await html5QrCode.value.stop()
      }
      html5QrCode.value.clear()
      showCamera.value = false
    } catch (err) {
      console.log('停止摄像头失败', err)
      showCamera.value = false
    }
  }
}

// --- 提交逻辑 ---
const submitForm = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid: boolean) => {
    if (!valid) return

    if (!currentItem.value) return

    const file = await signatureRef.value.generateFile()
    if (!file) {
      ElMessage.error('请先进行电子签名')
      return
    }

    try {
      loading.value = true

      // 1. 上传签名
      const uploadRes = await uploadFile(file)
      const signatureUrl = uploadRes.data.url

      // 2. 提交业务单据
      await submitOutbound({
        sku: currentItem.value.sku,
        source_table: currentItem.value.source_table,
        stock_id: currentItem.value.id,
        barcode: barcodeInput.value,
        outbound_type: form.outbound_type,
        quantity: form.quantity,
        consumer_name: form.consumer_name,
        // ★ 传递操作员信息 (注：需要确保后端接收此字段，否则后端可能仍使用当前JWT用户)
        // 建议在后端 create_outbound 接口中优先使用前端传来的 operator_name
        operator_name: form.operator_name,
        remark: form.remark,
        signature_path: signatureUrl
      })

      ElMessage.success('出库成功')
      resetScan()
      // 提交成功后，刷新一次操作员列表，以便下次能选到新名字
      loadHistoryOperators()

    } catch (error) {
      console.error(error)
    } finally {
      loading.value = false
    }
  })
}

const resetScan = () => {
  currentItem.value = null
  barcodeInput.value = ''
  form.consumer_name = ''
  form.quantity = 1
  form.remark = ''
  // 重置为当前用户，但不清空选项
  if (userStore.username) {
    form.operator_name = userStore.username
  }

  signatureRef.value?.clear()
  nextTick(() => {
    barcodeRef.value?.focus()
  })
}

onUnmounted(() => {
  stopCamera()
})
</script>

<style scoped>
.scan-area {
  text-align: center;
  padding: 20px;
}
.camera-box {
  width: 100%;
  max-width: 400px;
  height: 300px;
  margin: 0 auto 20px;
  background: #000;
  overflow: hidden;
}
.confirm-area {
  max-width: 600px;
  margin: 0 auto;
}
.mt-20 {
  margin-top: 20px;
}
.form-actions {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
</style>