smartcut-frontend/apps/worker-app/src/views/ScanView.vue

<template>
  <WorkerLayout>
    <div class="scan-view">
      <a-card title="扫码计件">
        <!-- 扫码区域 -->
        <div class="scan-area">
          <a-button
            type="primary"
            size="large"
            block
            @click="startScan"
            :loading="scanning"
            v-if="!scanning"
          >
            <template #icon><ScanOutlined /></template>
            开始扫描
          </a-button>

          <div v-if="scanning" class="scanning">
            <a-spin tip="正在扫描..." />
            <a-button @click="stopScan" class="mt-3">停止扫描</a-button>
          </div>
        </div>

        <!-- 手动输入二维码 -->
        <a-divider>或手动输入</a-divider>
        <a-input
          v-model:value="qrCode"
          placeholder="请输入二维码内容"
          size="large"
          @pressEnter="handleQrCode"
        />
      </a-card>

      <!-- 计件表单 -->
      <a-card title="计件信息" class="mt-3" v-if="bundleInfo">
        <a-descriptions :column="1" size="small">
          <a-descriptions-item label="扎号">{{ bundleInfo.bundle_no }}</a-descriptions-item>
          <a-descriptions-item label="尺码">{{ bundleInfo.size }}</a-descriptions-item>
          <a-descriptions-item label="数量">{{ bundleInfo.quantity }}</a-descriptions-item>
          <a-descriptions-item label="工单">{{ bundleInfo.order_no }}</a-descriptions-item>
          <a-descriptions-item label="款号">{{ bundleInfo.style_name }}</a-descriptions-item>
        </a-descriptions>

        <a-form layout="vertical" class="mt-3">
          <a-form-item label="工序" required>
            <a-select v-model:value="processId" placeholder="请选择工序" size="large">
              <a-select-option v-for="p in processes" :key="p.id" :value="p.id">
                {{ p.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="数量" required>
            <a-input-number
              v-model:value="quantity"
              :min="1"
              :max="bundleInfo.quantity"
              size="large"
              style="width: 100%"
            />
          </a-form-item>

          <a-button
            type="primary"
            size="large"
            block
            @click="handleSubmit"
            :loading="submitting"
          >
            确认计件
          </a-button>
        </a-form>
      </a-card>
    </div>
  </WorkerLayout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { ScanOutlined } from '@ant-design/icons-vue';
import WorkerLayout from '@/components/WorkerLayout.vue';
import { RecordApi, ProcessApi, createApiClient } from '@smartcut/api-client';
import { STORAGE_KEYS } from '@smartcut/shared-utils';
import { getApiBaseUrl } from '@/apiConfig';
import type { Process } from '@smartcut/types';

const scanning = ref(false);
const qrCode = ref('');
const bundleInfo = ref<any>(null);
const processes = ref<Process[]>([]);
const processId = ref<number | null>(null);
const quantity = ref(1);
const submitting = ref(false);

const apiClient = createApiClient({
  baseURL: getApiBaseUrl(),
  tokenKey: STORAGE_KEYS.WORKER_TOKEN
});

const recordApi = new RecordApi(apiClient);
const processApi = new ProcessApi(apiClient);

onMounted(async () => {
  try {
    processes.value = await processApi.getProcesses();
  } catch (error) {
    message.error('加载工序列表失败');
  }
});

async function startScan() {
  scanning.value = true;
  // 实际项目中这里调用摄像头扫码API
  // 由于浏览器限制,需要HTTPS环境
  message.info('扫码功能需要在HTTPS环境下使用,请手动输入二维码');
  scanning.value = false;
}

function stopScan() {
  scanning.value = false;
}

async function handleQrCode() {
  if (!qrCode.value) {
    message.error('请输入二维码内容');
    return;
  }

  try {
    // 解析二维码获取扎号信息
    const response = await apiClient.get('/worker/bundle-info', {
      params: { qr_code: qrCode.value }
    });
    bundleInfo.value = response.data.data;
    quantity.value = bundleInfo.value.quantity;
    message.success('已识别扎号');
  } catch (error: any) {
    message.error(error.response?.data?.msg || '二维码无效');
  }
}

async function handleSubmit() {
  if (!processId.value) {
    message.error('请选择工序');
    return;
  }
  if (!bundleInfo.value) {
    message.error('请先扫描或输入二维码');
    return;
  }

  submitting.value = true;
  try {
    await recordApi.scanPiece({
      qr_code: qrCode.value,
      process_id: processId.value,
      quantity: quantity.value
    });
    message.success('计件成功');

    // 重置表单
    qrCode.value = '';
    bundleInfo.value = null;
    processId.value = null;
    quantity.value = 1;
  } catch (error: any) {
    message.error(error.response?.data?.msg || '计件失败');
  } finally {
    submitting.value = false;
  }
}
</script>

<style scoped lang="postcss">
.scan-view { padding: 0; }
.scan-area {
  text-align: center;
  padding: 20px 0;
}
.scanning {
  text-align: center;
  padding: 40px 0;
}
.mt-3 {
  margin-top: 12px;
}
</style>