<div class="process-flow" v-if="activeMaterial">
<div class="process-header">
<h3>工艺流程 - {{ activeMaterial.materialBaseNo }}</h3>
<el-steps :active="currentStep" finish-status="success" align-center>
<el-step title="拍照" description="物料信息采集" />
<el-step title="检测" description="质量检测" />
<el-step title="验证" description="结果验证" />
<el-step title="完成" description="提交结果" />
</el-steps>
</div>
<div class="process-content">
<!-- 第一步：拍照 -->
<div v-if="currentStep === 1" class="step-section">
<div class="step-title">第一步：拍照采集</div>
<div class="camera-area">
<div class="camera-preview">
<img
v-if="activeMaterial.imageUrl"
:src="activeMaterial.imageUrl"
alt="物料照片"
class="preview-image"
/>
<div v-else class="camera-placeholder">
<el-icon :size="60"><Camera /></el-icon>
<p>点击下方按钮进行拍照</p>
</div>
</div>
<div class="camera-controls">
<el-button type="primary" @click="mockTakePhoto">
<el-icon><Camera /></el-icon> 拍照
</el-button>
<el-button @click="mockUploadImage">
<el-icon><Upload /></el-icon> 上传图片
</el-button>
</div>
</div>
<div class="ocr-result" v-if="activeMaterial.materialOCRNo">
<el-tag>识别结果: {{ activeMaterial.materialOCRNo }}</el-tag>
<el-input
v-model="activeMaterial.materialOCRNo"
placeholder="请校验识别结果"
class="ocr-input"
/>
</div>
<div class="step-actions">
<el-button type="primary" @click="nextStep">下一步</el-button>
</div>
</div>
<!-- 第二步：检测 -->
<div v-if="currentStep === 2" class="step-section">
<div class="step-title">第二步：质量检测</div>
<div class="detection-area">
<el-form
label-width="120px">
<el-form-item
label="检测结果">
<el-radio-group v-model="detectionResult">
<el-radio
label="pass" border>合格</el-radio>
<el-radio
label="fail" border>不合格</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="检测说明" v-if="detectionResult === 'fail'">
<el-input
v-model="detectionNotes"
type="
textarea"
:rows="3"
placeholder="请输入不合格原因"
/>
</el-form-item>
<el-form-item
label="检测人员">
<el-input v-model="detectionOperator" placeholder="请输入检测人员姓名" />
</el-form-item>
<el-form-item
label="检测时间">
<el-date-picker
v-model="detectionTime"
type="datetime"
placeholder="选择检测时间"
/>
</el-form-item>
</el-form>
</div>
<div class="step-actions">
<el-button @click="prevStep">上一步</el-button>
<el-button type="primary" @click="nextStep">下一步</el-button>
</div>
</div>
<!-- 第三步：验证 -->
<div v-if="currentStep === 3" class="step-section">
<div class="step-title">第三步：结果验证</div>
<div class="verification-area">
<el-form
label-width="120px">
<el-form-item
label="验证结果">
<el-radio-group v-model="verificationResult">
<el-radio
label="verified" border>验证通过</el-radio>
<el-radio
label="rejected" border>验证驳回</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="验证人员">
<el-input v-model="verificationOperator" placeholder="请输入验证人员姓名" />
</el-form-item>
<el-form-item
label="验证时间">
<el-date-picker
v-model="verificationTime"
type="datetime"
placeholder="选择验证时间"
/>
</el-form-item>
<el-form-item
label="备注信息">
<el-input
v-model="verificationNotes"
type="
textarea"
:rows="3"
placeholder="请输入备注信息"
/>
</el-form-item>
</el-form>
</div>
<div class="step-actions">
<el-button @click="prevStep">上一步</el-button>
<el-button type="primary" @click="nextStep">下一步</el-button>
</div>
</div>
<!-- 第四步：完成 -->
<div v-if="currentStep === 4" class="step-section">
<div class="step-title">第四步：完成提交</div>
<div class="completion-area">
<el-result
icon="success"
title="流程完成"
sub-title="该物料已完成所有工艺步骤"
>
<template #extra>
<div class="summary-info">
<el-descriptions :column="1" border>
<el-descriptions-item
label="物料号">
{{ activeMaterial.materialBaseNo }}
</el-descriptions-item>
<el-descriptions-item
label="工位">
{{ activeStation?.station }}
</el-descriptions-item>
<el-descriptions-item
label="SFC">
{{ activeSfc?.sfcNo }}
</el-descriptions-item>
<el-descriptions-item
label="完成时间">
{{ new Date().toLocaleString() }}
</el-descriptions-item>
</el-descriptions>
</div>
</template>
</el-result>
</div>
<div class="step-actions">
<el-button @click="prevStep">上一步</el-button>
<el-button type="success" @click="completeProcess">确认提交</el-button>
</div>
</div>
</div>
</div> 将横着的进行
竖着放
本文介绍了一个简单的用户注册界面实现方式，仅使用一行代码即可完成基本的用户注册提示文本的显示。
扫一扫
1094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
