✨ feat(barcode): 添加条码详情弹窗功能

在多个表单中新增查看条码的按钮，允许用户在详情模式下查看条码信息。此功能提升了用户体验，使得条码信息的访问更加便捷。

- 在 `MachineryForm.vue`、`MdItemForm.vue`、`WorkshopForm.vue` 等文件中添加了条码详情弹窗组件
- 实现了 `handleBarcode` 方法以处理条码查看逻辑

src/views/mes/dv/machinery/MachineryForm.vue

@@ -107,12 +107,17 @@
       </el-tab-pane>
     </el-tabs>
     <template #footer>
-      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading"
-        >确 定</el-button
-      >
+      <el-button v-if="isDetail && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
+      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
+        确 定
+      </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
@@ -122,8 +127,9 @@ import DvMachineryTypeSelect from '@/views/mes/dv/machinery/type/components/DvMa
 import MachineryCheckRecordList from './MachineryCheckRecordList.vue'
 import MachineryMaintenRecordList from './MachineryMaintenRecordList.vue'
 import MachineryRepairList from './MachineryRepairList.vue'
-import { MesDvMachineryStatusEnum, MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
+import { MesDvMachineryStatusEnum, MesAutoCodeRuleCode, BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'MachineryForm' })
 
@@ -164,6 +170,14 @@ const formRules = reactive({
   status: [{ required: true, message: '设备状态不能为空', trigger: 'change' }]
 })
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
+
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!, BarcodeBizTypeEnum.MACHINERY, formData.value.code, formData.value.name
+  )
+}
 
 /** 生成设备编码 */
 const generateCode = async () => {

src/views/mes/md/item/MdItemForm.vue

@@ -120,12 +120,17 @@
       </el-tab-pane>
     </el-tabs>
     <template #footer>
+      <el-button v-if="isDetail && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
       <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
         确 定
       </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
@@ -138,7 +143,8 @@ import MdProductSipForm from './MdProductSipForm.vue'
 import MdUnitMeasureSelect from '@/views/mes/md/unitmeasure/components/MdUnitMeasureSelect.vue'
 import MdItemTypeSelect from '@/views/mes/md/item/type/components/MdItemTypeSelect.vue'
 import { CommonStatusEnum } from '@/utils/constants'
-import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
+import { MesAutoCodeRuleCode, BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 /** MES 物料产品 表单 */
 defineOptions({ name: 'MdItemForm' })
@@ -183,6 +189,7 @@ const formRules = reactive({
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
 const currentItemOrProduct = computed(() => formData.value.itemOrProduct || '') // 物料/产品的标签
 
 /** 生成物料编码 */
@@ -195,6 +202,16 @@ const handleItemTypeChange = (type: any) => {
   formData.value.itemOrProduct = type?.itemOrProduct
 }
 
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!,
+    BarcodeBizTypeEnum.ITEM,
+    formData.value.code,
+    formData.value.name
+  )
+}
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true

src/views/mes/md/workstation/WorkstationForm.vue

@@ -129,12 +129,17 @@
       </el-tab-pane>
     </el-tabs>
     <template #footer>
+      <el-button v-if="isDetail && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!isDetail">
         确 定
       </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
@@ -146,11 +151,12 @@ import { WmWarehouseVO } from '@/api/mes/wm/warehouse'
 import { WmWarehouseLocationApi, WmWarehouseLocationVO } from '@/api/mes/wm/warehouse/location'
 import { WmWarehouseAreaApi, WmWarehouseAreaVO } from '@/api/mes/wm/warehouse/area'
 import { CommonStatusEnum } from '@/utils/constants'
-import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
+import { MesAutoCodeRuleCode, BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import WorkstationMachineList from './WorkstationMachineList.vue'
 import WorkstationToolList from './WorkstationToolList.vue'
 import WorkstationWorkerList from './WorkstationWorkerList.vue'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'WorkstationForm' })
 
@@ -186,6 +192,14 @@ const formRules = reactive({
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 }) // 表单校验规则
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
+
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!, BarcodeBizTypeEnum.WORKSTATION, formData.value.code, formData.value.name
+  )
+}
 
 /** 生成工作站编码 */
 const generateCode = async () => {

src/views/mes/md/workstation/workshop/WorkshopForm.vue

@@ -78,20 +78,26 @@
       </el-row>
     </el-form>
     <template #footer>
-      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading"
-        >确 定</el-button
-      >
+      <el-button v-if="isDetail && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
+      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
+        确 定
+      </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { MdWorkshopApi, MdWorkshopVO } from '@/api/mes/md/workstation/workshop'
 import { CommonStatusEnum } from '@/utils/constants'
-import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
+import { MesAutoCodeRuleCode, BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import * as UserApi from '@/api/system/user'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'WorkshopForm' })
 
@@ -126,6 +132,14 @@ const formRules = reactive({
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
+
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!, BarcodeBizTypeEnum.WORKSHOP, formData.value.code, formData.value.name
+  )
+}
 
 /** 生成车间编码 */
 const generateCode = async () => {

src/views/mes/pro/card/CardForm.vue

@@ -93,9 +93,14 @@
       <el-button v-if="isFinish" @click="handleFinish" type="success" :disabled="formLoading">
         完 成
       </el-button>
+      <el-button v-if="formType === 'detail' && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
       <el-button @click="dialogVisible = false">关 闭</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -107,8 +112,10 @@ import CardProcessList from './CardProcessList.vue'
 import {
   MesProCardStatusEnum,
   MesProWorkOrderStatusEnum,
-  MesAutoCodeRuleCode
+  MesAutoCodeRuleCode,
+  BarcodeBizTypeEnum
 } from '@/views/mes/utils/constants'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'CardForm' })
 const emit = defineEmits(['success'])
@@ -147,8 +154,16 @@ const formRules = reactive({
   transferedQuantity: [{ required: true, message: '流转数量不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
 const originalFormData = ref<string>('') // 原始表单数据快照，用于脏检查
 
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!, BarcodeBizTypeEnum.PROCARD, formData.value.code
+  )
+}
+
 /** 生成流转卡编码 */
 const generateCode = async () => {
   formData.value.code = await AutoCodeRecordApi.generateAutoCode(MesAutoCodeRuleCode.PRO_CARD_CODE)

src/views/mes/pro/workorder/WorkOrderForm.vue

@@ -187,9 +187,14 @@
       <el-button v-if="isFinish" @click="handleFinish" type="success" :disabled="formLoading">
         完 成
       </el-button>
+      <el-button v-if="formType === 'detail' && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
       <el-button @click="dialogVisible = false">关 闭</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -205,8 +210,10 @@ import {
   MesProWorkOrderSourceTypeEnum,
   MesProWorkOrderTypeEnum,
   MesProWorkOrderStatusEnum,
-  MesAutoCodeRuleCode
+  MesAutoCodeRuleCode,
+  BarcodeBizTypeEnum
 } from '@/views/mes/utils/constants'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'WorkOrderForm' })
 const emit = defineEmits(['success'])
@@ -262,8 +269,16 @@ const formRules = reactive({
   requestDate: [{ required: true, message: '需求日期不能为空', trigger: 'change' }]
 })
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
 const originalFormData = ref<string>('') // 原始表单数据快照，用于脏检查
 
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!, BarcodeBizTypeEnum.WORKORDER, formData.value.code, formData.value.name
+  )
+}
+
 /** 生成工单编码 */
 const generateCode = async () => {
   formData.value.code = await AutoCodeRecordApi.generateAutoCode(

src/views/mes/tm/tool/ToolForm.vue

@@ -133,14 +133,18 @@
         </el-col>
       </el-row>
     </el-form>
-    <!-- TODO @AI：条码相关，先忽略，后续加 -->
     <template #footer>
-      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading"
-        >确 定</el-button
-      >
+      <el-button v-if="isDetail && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
+      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
+        确 定
+      </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
@@ -151,8 +155,10 @@ import TmToolTypeSelect from '@/views/mes/tm/tool/type/components/TmToolTypeSele
 import {
   MesToolStatusEnum,
   MesMaintenTypeEnum,
-  MesAutoCodeRuleCode
+  MesAutoCodeRuleCode,
+  BarcodeBizTypeEnum
 } from '@/views/mes/utils/constants'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'ToolForm' })
 
@@ -193,8 +199,16 @@ const formRules = reactive({
   quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
 const selectedToolType = ref<TmToolTypeVO>() // 当前选中的工具类型
 
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!, BarcodeBizTypeEnum.TOOL, formData.value.code, formData.value.name
+  )
+}
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true

src/views/mes/wm/warehouse/WarehouseForm.vue

@@ -73,19 +73,25 @@
       </el-row>
     </el-form>
     <template #footer>
-      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading"
-        >确 定</el-button
-      >
+      <el-button v-if="isDetail && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
+      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
+        确 定
+      </el-button>
       <el-button @click="dialogVisible = false">{{ isDetail ? '关 闭' : '取 消' }}</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
 import { WmWarehouseApi, WmWarehouseVO } from '@/api/mes/wm/warehouse'
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import * as UserApi from '@/api/system/user'
-import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
+import { MesAutoCodeRuleCode, BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'WarehouseForm' })
 
@@ -129,6 +135,14 @@ const formRules = reactive({
   frozen: [{ required: true, message: '是否冻结不能为空', trigger: 'change' }]
 }) // 表单校验规则
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
+
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!, BarcodeBizTypeEnum.WAREHOUSE, formData.value.code, formData.value.name
+  )
+}
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {

src/views/mes/wm/warehouse/area/AreaForm.vue

@@ -154,13 +154,17 @@
       </el-row>
     </el-form>
     <template #footer>
-      <!-- TODO @芋艿：barcodeimg -->
+      <el-button v-if="isDetail && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
       <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
         确 定
       </el-button>
       <el-button @click="dialogVisible = false">{{ isDetail ? '关 闭' : '取 消' }}</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -170,7 +174,8 @@ import { WmWarehouseAreaApi, WmWarehouseAreaVO } from '@/api/mes/wm/warehouse/ar
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { CommonStatusEnum } from '@/utils/constants'
-import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
+import { MesAutoCodeRuleCode, BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'AreaForm' })
 
@@ -224,6 +229,14 @@ const formRules = reactive({
   allowBatchMixing: [{ required: true, message: '批次混放开关不能为空', trigger: 'change' }]
 })
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
+
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!, BarcodeBizTypeEnum.AREA, formData.value.code, formData.value.name
+  )
+}
 
 /** 加载库区列表 */
 const loadLocationList = async (warehouseId?: number) => {

src/views/mes/wm/warehouse/location/LocationForm.vue

@@ -97,13 +97,17 @@
       </template>
     </el-form>
     <template #footer>
-      <!-- TODO @芋艿：barcodeimg -->
-      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading"
-        >确 定</el-button
-      >
+      <el-button v-if="isDetail && formData.id" type="primary" plain @click="handleBarcode">
+        查看条码
+      </el-button>
+      <el-button v-if="!isDetail" @click="submitForm" type="primary" :disabled="formLoading">
+        确 定
+      </el-button>
       <el-button @click="dialogVisible = false">{{ isDetail ? '关 闭' : '取 消' }}</el-button>
     </template>
   </Dialog>
+  <!-- 条码详情弹窗（详情模式下展示） -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -111,7 +115,8 @@ import { WmWarehouseApi, WmWarehouseVO } from '@/api/mes/wm/warehouse'
 import { WmWarehouseLocationApi, WmWarehouseLocationVO } from '@/api/mes/wm/warehouse/location'
 import { AutoCodeRecordApi } from '@/api/mes/md/autocode/record'
 import { CommonStatusEnum } from '@/utils/constants'
-import { MesAutoCodeRuleCode } from '@/views/mes/utils/constants'
+import { MesAutoCodeRuleCode, BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'LocationForm' })
 
@@ -148,6 +153,14 @@ const formRules = reactive({
   frozen: [{ required: true, message: '是否冻结不能为空', trigger: 'change' }]
 })
 const formRef = ref() // 表单 Ref
+const barcodeDetailRef = ref() // 条码详情弹窗 Ref
+
+/** 查看条码 */
+const handleBarcode = () => {
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id!, BarcodeBizTypeEnum.LOCATION, formData.value.code, formData.value.name
+  )
+}
 
 /** 生成库区编码 */
 const generateCode = async () => {