From 3f6ab3e607d56ac915040c4158690a568b1c5d78 Mon Sep 17 00:00:00 2001
From: dxc <duxingchen@iris-rs.cn>
Date: Thu, 5 Feb 2026 15:51:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=87=BA=E5=BA=93=E7=AD=BE?=
 =?UTF-8?q?=E5=90=8D=E9=80=BB=E8=BE=91=EF=BC=8C=E5=AF=B9=E7=AD=BE=E5=AD=97?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E5=8D=95=E7=8B=AC=E5=B1=8F=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 inventory-web/src/views/outbound/create.vue | 400 +++++++++++++++++---
 1 file changed, 355 insertions(+), 45 deletions(-)

diff --git a/inventory-web/src/views/outbound/create.vue b/inventory-web/src/views/outbound/create.vue
index 49e811a..e28444c 100644
--- a/inventory-web/src/views/outbound/create.vue
+++ b/inventory-web/src/views/outbound/create.vue
@@ -12,6 +12,9 @@
 
       <div v-if="!currentItem" class="scan-area">
         <div v-if="showCamera" id="reader" class="camera-box"></div>
+        <div v-if="isHttpAndNotLocal" class="http-warning">
+          注意：当前为 HTTP 环境，摄像头可能无法启动。请使用 HTTPS 或 localhost，或配置浏览器安全白名单。
+        </div>
 
         <div class="input-box">
           <el-input
@@ -92,8 +95,16 @@
             <el-input v-model="form.remark" type="textarea" />
           </el-form-item>
 
-          <el-form-item label="电子签名 (请在下方区域签字)" required>
-            <Signature ref="signatureRef" />
+          <el-form-item label="电子签名" required>
+            <div class="signature-display-area">
+              <div v-if="signaturePreviewUrl" class="signed-image-box">
+                <img :src="signaturePreviewUrl" alt="电子签名" />
+                <el-button type="text" @click="openSignatureDialog">重新签名</el-button>
+              </div>
+              <el-button v-else type="primary" plain @click="openSignatureDialog" icon="EditPen">
+                点击进行全屏签名
+              </el-button>
+            </div>
           </el-form-item>
 
           <div class="form-actions">
@@ -103,19 +114,51 @@
         </el-form>
       </div>
     </el-card>
+
+    <el-dialog
+        v-model="showSignatureDialog"
+        fullscreen
+        destroy-on-close
+        :show-close="false"
+        class="fullscreen-signature-dialog"
+        @opened="initCanvas"
+    >
+      <div class="signature-wrapper">
+        <div class="signature-canvas-container" ref="canvasContainerRef">
+          <canvas
+              ref="nativeCanvasRef"
+              class="native-canvas"
+              @mousedown="startDrawing"
+              @mousemove="draw"
+              @mouseup="stopDrawing"
+              @mouseleave="stopDrawing"
+              @touchstart="startDrawing"
+              @touchmove="draw"
+              @touchend="stopDrawing"
+          ></canvas>
+        </div>
+
+        <div class="signature-sidebar">
+          <div class="sidebar-title">请在此区域书写</div>
+          <div class="sidebar-actions">
+            <el-button type="warning" @click="clearCanvas">重置</el-button>
+            <el-button @click="handleSignCancel">取消</el-button>
+            <el-button type="success" class="confirm-btn" @click="handleSignConfirm">确认</el-button>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, nextTick, onUnmounted, onMounted } from 'vue'
+import { ref, reactive, nextTick, onUnmounted, onMounted, computed } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Html5Qrcode, Html5QrcodeSupportedFormats } from 'html5-qrcode'
-// 引入接口
+import { Scissor, EditPen } from '@element-plus/icons-vue'
 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'
 
 // --- 状态定义 ---
@@ -125,18 +168,29 @@ 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 showSignatureDialog = ref(false)
+const signaturePreviewUrl = ref('')
+const signatureFile = ref<File | null>(null)
+
+// 原生 Canvas 相关
+const nativeCanvasRef = ref<HTMLCanvasElement | null>(null)
+const canvasContainerRef = ref<HTMLElement | null>(null)
+const ctx = ref<CanvasRenderingContext2D | null>(null)
+const isDrawing = ref(false)
+const lastX = ref(0)
+const lastY = ref(0)
+
 const operatorOptions = ref<string[]>([])
 
 const form = reactive({
   outbound_type: 'SALES',
   quantity: 1,
   consumer_name: '',
-  operator_name: '', // 新增字段
+  operator_name: '',
   remark: ''
 })
 
@@ -146,28 +200,27 @@ const rules = {
   operator_name: [{ required: true, message: '请指定操作员', trigger: 'change' }]
 }
 
+const isHttpAndNotLocal = computed(() => {
+  const isHttps = window.location.protocol === 'https:'
+  const isLocal = ['localhost', '127.0.0.1'].includes(window.location.hostname)
+  return !isHttps && !isLocal
+})
+
 // --- 初始化逻辑 ---
 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)
@@ -180,6 +233,117 @@ const loadHistoryOperators = async () => {
   }
 }
 
+// --- 签名逻辑 ---
+
+const openSignatureDialog = () => {
+  showSignatureDialog.value = true
+}
+
+const initCanvas = async () => {
+  await nextTick()
+  const canvas = nativeCanvasRef.value
+  const container = canvasContainerRef.value
+
+  if (canvas && container) {
+    // 强制设置宽高，确保在手机横屏竖屏切换后也能占满
+    canvas.width = container.clientWidth
+    canvas.height = container.clientHeight
+
+    ctx.value = canvas.getContext('2d')
+    if (ctx.value) {
+      ctx.value.lineWidth = 4
+      ctx.value.lineCap = 'round'
+      ctx.value.lineJoin = 'round'
+      ctx.value.strokeStyle = '#000000'
+      // 填充白色背景
+      ctx.value.fillStyle = '#ffffff'
+      ctx.value.fillRect(0, 0, canvas.width, canvas.height)
+    }
+  }
+}
+
+// 获取坐标（兼容鼠标和触摸）
+const getPos = (e: MouseEvent | TouchEvent) => {
+  if (!nativeCanvasRef.value) return { x: 0, y: 0 }
+
+  const rect = nativeCanvasRef.value.getBoundingClientRect()
+  let clientX, clientY
+
+  if (e.type.startsWith('touch')) {
+    clientX = (e as TouchEvent).touches[0].clientX
+    clientY = (e as TouchEvent).touches[0].clientY
+  } else {
+    clientX = (e as MouseEvent).clientX
+    clientY = (e as MouseEvent).clientY
+  }
+
+  return {
+    x: clientX - rect.left,
+    y: clientY - rect.top
+  }
+}
+
+const startDrawing = (e: MouseEvent | TouchEvent) => {
+  e.preventDefault()
+  isDrawing.value = true
+  const { x, y } = getPos(e)
+  lastX.value = x
+  lastY.value = y
+
+  if(ctx.value) {
+    ctx.value.beginPath()
+    ctx.value.moveTo(x, y)
+    ctx.value.lineTo(x, y)
+    ctx.value.stroke()
+  }
+}
+
+const draw = (e: MouseEvent | TouchEvent) => {
+  e.preventDefault()
+  if (!isDrawing.value || !ctx.value) return
+
+  const { x, y } = getPos(e)
+
+  ctx.value.beginPath()
+  ctx.value.moveTo(lastX.value, lastY.value)
+  ctx.value.lineTo(x, y)
+  ctx.value.stroke()
+
+  lastX.value = x
+  lastY.value = y
+}
+
+const stopDrawing = () => {
+  isDrawing.value = false
+  if (ctx.value) ctx.value.beginPath()
+}
+
+const clearCanvas = () => {
+  if (!ctx.value || !nativeCanvasRef.value) return
+  ctx.value.clearRect(0, 0, nativeCanvasRef.value.width, nativeCanvasRef.value.height)
+  ctx.value.fillStyle = '#ffffff'
+  ctx.value.fillRect(0, 0, nativeCanvasRef.value.width, nativeCanvasRef.value.height)
+}
+
+const handleSignConfirm = () => {
+  if (!nativeCanvasRef.value) return
+
+  nativeCanvasRef.value.toBlob((blob) => {
+    if (blob) {
+      const file = new File([blob], `signature_${Date.now()}.png`, { type: 'image/png' })
+      signatureFile.value = file
+      signaturePreviewUrl.value = URL.createObjectURL(file)
+      showSignatureDialog.value = false
+    } else {
+      ElMessage.error('生成签名失败')
+    }
+  }, 'image/png')
+}
+
+const handleSignCancel = () => {
+  showSignatureDialog.value = false
+}
+
 // --- 扫码逻辑 ---
 const handleScan = async () => {
   if (!barcodeInput.value) return
@@ -188,28 +352,19 @@ const handleScan = async () => {
     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 {
@@ -226,6 +381,9 @@ const toggleCamera = async () => {
   if (showCamera.value) {
     await stopCamera()
   } else {
+    if (isHttpAndNotLocal.value) {
+      ElMessage.error('浏览器安全限制：摄像头仅支持 HTTPS 或 localhost。请检查地址栏或配置 Chrome Flags。')
+    }
     showCamera.value = true
     nextTick(() => {
       startCamera()
@@ -247,15 +405,19 @@ const startCamera = () => {
         aspectRatio: 1.0
       },
       (decodedText) => {
-        console.log("扫码成功:", decodedText)
         barcodeInput.value = decodedText
         handleScan()
       },
-      (errorMessage) => {
-        // 忽略扫描过程中的每帧错误
-      }
+      (errorMessage) => { }
   ).catch(err => {
-    ElMessage.error('无法启动摄像头: ' + err)
+    let msg = '无法启动摄像头'
+    if (err.toString().includes('Permission')) {
+      msg = '摄像头权限被拒绝，请检查浏览器设置'
+    } else if (err.toString().includes('Secure Context')) {
+      msg = '摄像头需要 HTTPS 环境'
+    }
+    ElMessage.error(`${msg}: ${err}`)
+    showCamera.value = false
   })
 }
 
@@ -268,7 +430,6 @@ const stopCamera = async () => {
       html5QrCode.value.clear()
       showCamera.value = false
     } catch (err) {
-      console.log('停止摄像头失败', err)
       showCamera.value = false
     }
   }
@@ -280,23 +441,19 @@ const submitForm = async () => {
 
   await formRef.value.validate(async (valid: boolean) => {
     if (!valid) return
-
     if (!currentItem.value) return
 
-    const file = await signatureRef.value.generateFile()
-    if (!file) {
-      ElMessage.error('请先进行电子签名')
+    if (!signatureFile.value) {
+      ElMessage.error('请进行电子签名')
       return
     }
 
     try {
       loading.value = true
 
-      // 1. 上传签名
-      const uploadRes = await uploadFile(file)
+      const uploadRes = await uploadFile(signatureFile.value)
       const signatureUrl = uploadRes.data.url
 
-      // 2. 提交业务单据
       await submitOutbound({
         sku: currentItem.value.sku,
         source_table: currentItem.value.source_table,
@@ -305,8 +462,6 @@ const submitForm = async () => {
         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
@@ -314,7 +469,6 @@ const submitForm = async () => {
 
       ElMessage.success('出库成功')
       resetScan()
-      // 提交成功后，刷新一次操作员列表，以便下次能选到新名字
       loadHistoryOperators()
 
     } catch (error) {
@@ -331,12 +485,11 @@ const resetScan = () => {
   form.consumer_name = ''
   form.quantity = 1
   form.remark = ''
-  // 重置为当前用户，但不清空选项
   if (userStore.username) {
     form.operator_name = userStore.username
   }
-
-  signatureRef.value?.clear()
+  signatureFile.value = null
+  signaturePreviewUrl.value = ''
   nextTick(() => {
     barcodeRef.value?.focus()
   })
@@ -344,10 +497,14 @@ const resetScan = () => {
 
 onUnmounted(() => {
   stopCamera()
+  if (signaturePreviewUrl.value) {
+    URL.revokeObjectURL(signaturePreviewUrl.value)
+  }
 })
 </script>
 
 <style scoped>
+/* 原有样式保持不变 */
 .scan-area {
   text-align: center;
   padding: 20px;
@@ -360,6 +517,14 @@ onUnmounted(() => {
   background: #000;
   overflow: hidden;
 }
+.http-warning {
+  color: #e6a23c;
+  background: #fdf6ec;
+  padding: 10px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  font-size: 12px;
+}
 .confirm-area {
   max-width: 600px;
   margin: 0 auto;
@@ -372,4 +537,149 @@ onUnmounted(() => {
   display: flex;
   justify-content: space-between;
 }
+
+.signature-display-area {
+  border: 1px dashed #dcdfe6;
+  border-radius: 4px;
+  padding: 10px;
+  text-align: center;
+  background: #fafafa;
+  min-height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.signed-image-box {
+  text-align: center;
+}
+.signed-image-box img {
+  max-height: 100px;
+  max-width: 100%;
+  display: block;
+  margin-bottom: 5px;
+  border: 1px solid #eee;
+}
+
+/* --- 响应式全屏弹窗样式 --- */
+:deep(.fullscreen-signature-dialog .el-dialog__body) {
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+}
+
+/* 默认布局（电脑/平板）：左右结构 */
+.signature-wrapper {
+  display: flex;
+  width: 100%;
+  height: 100%; /* 使用 100% 适应弹窗 body */
+  background-color: #fff;
+}
+
+.signature-canvas-container {
+  flex: 1;
+  position: relative;
+  background-color: #fff;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.native-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+/* 右侧边栏（默认） */
+.signature-sidebar {
+  width: 150px;
+  background: #333;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 10px;
+  gap: 30px;
+  color: #fff;
+  z-index: 10;
+  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
+}
+
+.sidebar-title {
+  writing-mode: vertical-rl;
+  letter-spacing: 4px;
+  font-size: 18px;
+  font-weight: bold;
+  opacity: 0.8;
+}
+
+.sidebar-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.sidebar-actions .el-button {
+  width: 100%;
+  margin-left: 0;
+  height: 50px;
+}
+
+.confirm-btn {
+  margin-top: 20px;
+  font-weight: bold;
+}
+
+/* --- ★ 手机端适配 (屏幕宽度小于 768px) --- */
+@media screen and (max-width: 768px) {
+  /* 1. 改为上下布局：画布在上，按钮在下 */
+  .signature-wrapper {
+    flex-direction: column;
+  }
+
+  /* 2. 画布区域自动填充剩余空间 */
+  .signature-canvas-container {
+    flex: 1;
+    height: auto; /* 高度自适应 */
+  }
+
+  /* 3. 底部工具栏样式重写 */
+  .signature-sidebar {
+    width: 100%; /* 宽度占满 */
+    height: auto; /* 高度由内容撑开 */
+    flex-direction: row; /* 内容横向排列 */
+    padding: 15px; /* 增加内边距 */
+    gap: 10px;
+    /* 放在底部 */
+    order: 2;
+  }
+
+  /* 4. 隐藏竖排文字标题，节省空间 */
+  .sidebar-title {
+    display: none;
+  }
+
+  /* 5. 按钮组改为横向排列 */
+  .sidebar-actions {
+    flex-direction: row;
+    gap: 10px;
+    width: 100%;
+  }
+
+  /* 6. 按钮大小调整，均匀分布 */
+  .sidebar-actions .el-button {
+    flex: 1; /* 三个按钮平分宽度 */
+    height: 44px; /* 适合手指点击的高度 */
+    font-size: 14px;
+  }
+
+  /* 去掉确认按钮原本的顶部外边距 */
+  .confirm-btn {
+    margin-top: 0;
+  }
+}
 </style>
\ No newline at end of file