✨ feat(mes): 添加条码详情查看功能及相关逻辑

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

@@ -113,8 +113,7 @@
             :formatter="dateFormatter"
             width="180px"
           />
-          <el-table-column label="操作" align="center" width="130">
+          <el-table-column label="操作" align="center" width="170">
-            <!-- TODO @芋艿：标签打印 -->
             <template #default="scope">
               <el-button
                 link
@@ -132,6 +131,14 @@
               >
                 删除
               </el-button>
+              <el-button
+                link
+                type="primary"
+                @click="handleBarcode(scope.row)"
+                v-hasPermi="['mes:dv-machinery:query']"
+              >
+                条码
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -150,6 +157,8 @@
   <MachineryForm ref="formRef" @success="getList" />
   <!-- 设备导入对话框 -->
   <MachineryImportForm ref="importFormRef" @success="getList" />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -161,6 +170,8 @@ import MachineryForm from './MachineryForm.vue'
 import MachineryTypeTree from './MachineryTypeTree.vue'
 import MachineryImportForm from './MachineryImportForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
+import { BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'MesDvMachinery' })
 
@@ -233,6 +244,17 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+/** 查看设备条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: DvMachineryVO) => {
+  await barcodeDetailRef.value.openByBusiness(
+    row.id,
+    BarcodeBizTypeEnum.MACHINERY,
+    row.code,
+    row.name
+  )
+}
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {

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

@@ -116,7 +116,7 @@
             :formatter="dateFormatter"
             width="180px"
           />
-          <el-table-column label="操作" align="center" width="110">
+          <el-table-column label="操作" align="center" width="160">
             <template #default="scope">
               <el-button
                 link
@@ -134,6 +134,14 @@
               >
                 删除
               </el-button>
+              <el-button
+                link
+                type="primary"
+                @click="handleBarcode(scope.row)"
+                v-hasPermi="['mes:md-item:query']"
+              >
+                条码
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -152,6 +160,8 @@
   <MdItemForm ref="formRef" @success="getList" />
   <!-- 物料导入对话框 -->
   <MdItemImportForm ref="importFormRef" @success="getList" />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -162,7 +172,8 @@ import { MdItemApi, MdItemVO } from '@/api/mes/md/item'
 import MdItemForm from './MdItemForm.vue'
 import MdItemImportForm from './MdItemImportForm.vue'
 import ItemTypeTree from './ItemTypeTree.vue'
-import { getItemOrProductLabel } from '@/views/mes/utils/constants'
+import { getItemOrProductLabel, BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'MesMdItem' })
 
@@ -239,6 +250,17 @@ const handleImport = () => {
   importFormRef.value.open()
 }
 
+/** 查看物料条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: MdItemVO) => {
+  await barcodeDetailRef.value.openByBusiness(
+    row.id,
+    BarcodeBizTypeEnum.ITEM,
+    row.code,
+    row.name
+  )
+}
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {

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

@@ -83,9 +83,8 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="150">
+      <el-table-column label="操作" align="center" width="190">
         <template #default="scope">
-          <!-- TODO @芋艿：【标签打印】 -->
           <el-button
             link
             type="primary"
@@ -102,6 +101,14 @@
           >
             删除
           </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleBarcode(scope.row)"
+            v-hasPermi="['mes:md-workstation:query']"
+          >
+            条码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -116,6 +123,8 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <WorkstationForm ref="formRef" @success="getList" />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -125,6 +134,8 @@ import { MdWorkstationApi, MdWorkstationVO } from '@/api/mes/md/workstation'
 import MdWorkshopSelect from './components/MdWorkshopSelect.vue'
 import WorkstationForm from './WorkstationForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
+import { BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'MesMdWorkstation' })
 
@@ -185,6 +196,17 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+/** 查看工位条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: MdWorkstationVO) => {
+  await barcodeDetailRef.value.openByBusiness(
+    row.id,
+    BarcodeBizTypeEnum.WORKSTATION,
+    row.code,
+    row.name
+  )
+}
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {

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

@@ -248,7 +248,15 @@
           >
             详情
           </el-button>
-          <!-- TODO @芋艿：预览（打印） -->
+          <!-- 工单条码 -->
+          <el-button
+            link
+            type="primary"
+            @click="handleBarcode(scope.row)"
+            v-hasPermi="['mes:pro-work-order:query']"
+          >
+            条码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -263,6 +271,8 @@
 
   <!-- 表单弹窗：添加/修改 -->
   <WorkOrderForm ref="formRef" @success="getList" />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -272,9 +282,10 @@ import { handleTree } from '@/utils/tree'
 import { ProWorkOrderApi, ProWorkOrderVO } from '@/api/mes/pro/workorder'
 import WorkOrderForm from './WorkOrderForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { MesProWorkOrderStatusEnum, MesProWorkOrderTypeEnum } from '@/views/mes/utils/constants'
+import { MesProWorkOrderStatusEnum, MesProWorkOrderTypeEnum, BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
 import MdClientSelect from '@/views/mes/md/client/components/MdClientSelect.vue'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
 
 defineOptions({ name: 'MesProWorkOrder' })
 
@@ -375,6 +386,17 @@ const handleCancel = async (id: number) => {
   } catch {}
 }
 
+/** 查看工单条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: ProWorkOrderVO) => {
+  await barcodeDetailRef.value.openByBusiness(
+    row.id,
+    BarcodeBizTypeEnum.WORKORDER,
+    row.code,
+    row.name
+  )
+}
+
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {

src/views/mes/wm/barcode/BarcodeForm.vue

@@ -7,16 +7,6 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="条码格式" prop="format">
-        <el-select v-model="formData.format" placeholder="请选择条码格式" class="!w-1/1">
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.MES_WM_BARCODE_FORMAT)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
       <el-form-item label="业务类型" prop="bizType">
         <el-select v-model="formData.bizType" placeholder="请选择业务类型" class="!w-1/1">
           <el-option
@@ -218,7 +208,6 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref<WmBarcodeVO>({
   id: undefined,
-  format: undefined,
   bizType: undefined,
   bizId: undefined,
   bizCode: undefined,
@@ -228,7 +217,6 @@ const formData = ref<WmBarcodeVO>({
   remark: ''
 })
 const formRules = reactive({
-  format: [{ required: true, message: '条码格式不能为空', trigger: 'change' }],
   bizType: [{ required: true, message: '业务类型不能为空', trigger: 'change' }],
   bizId: [{ required: true, message: '业务编号不能为空', trigger: 'blur' }],
   bizCode: [{ required: true, message: '业务编码不能为空', trigger: 'blur' }],
@@ -327,7 +315,9 @@ watch(
   () => formData.value.bizType,
   () => {
     // 加载数据时不清空字段
-    if (isLoadingData.value) return
+    if (isLoadingData.value) {
+      return
+    }
 
     formData.value.bizId = undefined
     formData.value.bizCode = undefined
@@ -386,7 +376,6 @@ const submitForm = async () => {
 const resetForm = () => {
   formData.value = {
     id: undefined,
-    format: undefined,
     bizType: undefined,
     bizId: undefined,
     bizCode: undefined,

src/views/mes/wm/barcode/components/BarcodeDetail.vue

@@ -99,18 +99,23 @@ const open = (row: Partial<WmBarcodeVO>) => {
 }
 
 /** 打开弹窗 - 方式 2：通过 bizId + bizType 加载 */
-const openByBusiness = async (bizId: number, bizType: number) => {
+const openByBusiness = async (
+  bizId: number,
+  bizType: number,
+  bizCode?: string,
+  bizName?: string
+) => {
   dialogVisible.value = true
   try {
     const data = await WmBarcodeApi.getBarcodeByBusiness(bizType, bizId)
     if (data) {
       barcodeData.value = { ...data }
     } else {
-      barcodeData.value = { bizType, bizId, content: '' }
+      barcodeData.value = { bizType, bizId, bizCode, bizName, content: '' }
       message.warning('未找到对应条码数据')
     }
   } catch {
-    barcodeData.value = { bizType, bizId, content: '' }
+    barcodeData.value = { bizType, bizId, bizCode, bizName, content: '' }
     message.error('加载条码数据失败')
   }
 }

src/views/mes/wm/barcode/index.vue

@@ -126,7 +126,7 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="180px" fixed="right">
+      <el-table-column label="操作" align="center" width="220px" fixed="right">
         <template #default="scope">
           <el-button
             link
@@ -152,6 +152,14 @@
           >
             删除
           </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleBarcode(scope.row)"
+            v-hasPermi="['mes:wm-barcode:query']"
+          >
+            条码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -250,6 +258,11 @@ const handleView = (row: any) => {
   viewDialogRef.value.open(row)
 }
 
+/** 查看条码 - 打开详情弹窗 */
+const handleBarcode = (row: any) => {
+  handleView(row)
+}
+
 /** 条码设置 */
 const handleConfig = () => {
   push({ name: 'MesWmBarcodeConfig' })

src/views/mes/wm/productreceipt/ProductReceiptLineList.vue

@@ -37,7 +37,7 @@
         v-if="isUpdate || isStock"
         label="操作"
         align="center"
-        width="160"
+        width="200"
         fixed="right"
       >
         <template #default="scope">
@@ -50,7 +50,9 @@
           <el-button v-if="isStock" link type="success" @click="handleStock(scope.row.id)">
             上架
           </el-button>
-          <!-- TODO @芋艿：【暂不处理】标签打印 -->
+          <el-button link type="primary" @click="handleBarcode(scope.row)">
+            条码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -115,6 +117,8 @@
     :receipt-id="props.receiptId"
     @success="onDetailFormSuccess"
   />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -122,6 +126,8 @@ import { WmProductReceiptLineApi, WmProductReceiptLineVO } from '@/api/mes/wm/pr
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
 import ProductReceiptDetailList from './ProductReceiptDetailList.vue'
 import ProductReceiptDetailForm from './ProductReceiptDetailForm.vue'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
+import { BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'ProductReceiptLineList' })
 
@@ -268,6 +274,18 @@ const onDetailFormSuccess = (lineId: number) => {
   detailListRefs.value[lineId]?.getList()
 }
 
+/** 查看物料条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: WmProductReceiptLineVO) => {
+  // 产品入库使用物料 ID 作为业务 ID
+  await barcodeDetailRef.value.openByBusiness(
+    row.itemId,
+    BarcodeBizTypeEnum.ITEM,
+    row.itemCode,
+    row.itemName
+  )
+}
+
 /** 初始化 */
 onMounted(async () => {
   await getList()

src/views/mes/wm/returnissue/ReturnIssueLineList.vue

@@ -47,7 +47,7 @@
         v-if="isUpdate || isStock"
         label="操作"
         align="center"
-        width="160"
+        width="200"
         fixed="right"
       >
         <template #default="scope">
@@ -60,7 +60,9 @@
           <el-button v-if="isStock" link type="success" @click="handlePicking(scope.row.id)">
             上架
           </el-button>
-          <!-- TODO @芋艿：【标签打印】后续搞的情况下； -->
+          <el-button link type="primary" @click="handleBarcode(scope.row)">
+            条码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -130,6 +132,8 @@
     :issue-id="props.issueId"
     @success="onDetailFormSuccess"
   />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -138,6 +142,8 @@ import { WmReturnIssueLineApi, WmReturnIssueLineVO } from '@/api/mes/wm/returnis
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
 import ReturnIssueDetailList from './ReturnIssueDetailList.vue'
 import ReturnIssueDetailForm from './ReturnIssueDetailForm.vue'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
+import { BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'ReturnIssueLineList' })
 
@@ -290,6 +296,18 @@ const onDetailFormSuccess = (lineId: number) => {
   detailListRefs.value[lineId]?.getList()
 }
 
+/** 查看物料条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: WmReturnIssueLineVO) => {
+  // 退料使用物料 ID 作为业务 ID
+  await barcodeDetailRef.value.openByBusiness(
+    row.itemId,
+    BarcodeBizTypeEnum.ITEM,
+    row.itemCode,
+    row.itemName
+  )
+}
+
 /** 初始化 */
 onMounted(async () => {
   await getList()

src/views/mes/wm/sn/index.vue

@@ -74,7 +74,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="180" fixed="right">
+      <el-table-column label="操作" align="center" width="220" fixed="right">
         <template #default="scope">
           <el-button
             link
@@ -92,6 +92,14 @@
           >
             删除
           </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleBarcode(scope.row)"
+            v-hasPermi="['mes:wm-sn:query']"
+          >
+            条码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -106,6 +114,8 @@
 
   <!-- 表单弹窗：生成 SN 码 -->
   <WmSnGenerateForm ref="formRef" @success="getList" />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -114,6 +124,8 @@ import download from '@/utils/download'
 import * as WmSnApi from '@/api/mes/wm/sn'
 import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
 import WmSnGenerateForm from './WmSnGenerateForm.vue'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
+import { BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'MesWmSn' })
 
@@ -200,6 +212,18 @@ const handleExportDetail = async (uuid: string) => {
   } catch {}
 }
 
+/** 查看 SN 码条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: WmSnApi.WmSnGroupVO) => {
+  // SN 码使用 uuid 作为业务 ID
+  await barcodeDetailRef.value.openByBusiness(
+    row.uuid,
+    BarcodeBizTypeEnum.SN,
+    row.batchCode,
+    row.itemName
+  )
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()

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

@@ -99,7 +99,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="150">
+      <el-table-column label="操作" align="center" width="190">
         <template #default="scope">
           <el-button
             link
@@ -117,6 +117,14 @@
           >
             删除
           </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleBarcode(scope.row)"
+            v-hasPermi="['mes:wm-warehouse:query']"
+          >
+            条码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -129,6 +137,8 @@
   </ContentWrap>
 
   <AreaForm ref="formRef" @success="getList" />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -137,6 +147,8 @@ import { DICT_TYPE } from '@/utils/dict'
 import { WmWarehouseLocationApi } from '@/api/mes/wm/warehouse/location'
 import { WmWarehouseAreaApi, WmWarehouseAreaVO } from '@/api/mes/wm/warehouse/area'
 import AreaForm from './AreaForm.vue'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
+import { BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'MesWmArea' })
 
@@ -224,6 +236,17 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+/** 查看库位条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: WmWarehouseAreaVO) => {
+  await barcodeDetailRef.value.openByBusiness(
+    row.id,
+    BarcodeBizTypeEnum.AREA,
+    row.code,
+    row.name
+  )
+}
+
 /** 初始化 */
 onMounted(async () => {
   await loadLocationContext()

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

@@ -74,7 +74,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="220">
+      <el-table-column label="操作" align="center" width="260">
         <template #default="scope">
           <el-button
             link
@@ -100,6 +100,14 @@
           >
             删除
           </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleBarcode(scope.row)"
+            v-hasPermi="['mes:wm-warehouse:query']"
+          >
+            条码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -112,6 +120,8 @@
   </ContentWrap>
 
   <WarehouseForm ref="formRef" @success="getList" />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -120,6 +130,8 @@ import { DICT_TYPE } from '@/utils/dict'
 import { WmWarehouseApi, WmWarehouseVO } from '@/api/mes/wm/warehouse'
 import * as UserApi from '@/api/system/user'
 import WarehouseForm from './WarehouseForm.vue'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
+import { BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'MesWmWarehouse' })
 
@@ -193,6 +205,17 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+/** 查看仓库条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: WmWarehouseVO) => {
+  await barcodeDetailRef.value.openByBusiness(
+    row.id,
+    BarcodeBizTypeEnum.WAREHOUSE,
+    row.code,
+    row.name
+  )
+}
+
 /** 初始化 */
 onMounted(async () => {
   await Promise.all([loadUserList(), getList()])

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

@@ -66,7 +66,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" width="220">
+      <el-table-column label="操作" align="center" width="260">
         <template #default="scope">
           <el-button
             link
@@ -92,6 +92,14 @@
           >
             删除
           </el-button>
+          <el-button
+            link
+            type="primary"
+            @click="handleBarcode(scope.row)"
+            v-hasPermi="['mes:wm-warehouse:query']"
+          >
+            条码
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -104,6 +112,8 @@
   </ContentWrap>
 
   <LocationForm ref="formRef" @success="getList" />
+  <!-- 条码详情弹窗 -->
+  <BarcodeDetail ref="barcodeDetailRef" />
 </template>
 
 <script setup lang="ts">
@@ -112,6 +122,8 @@ import { DICT_TYPE } from '@/utils/dict'
 import { WmWarehouseApi } from '@/api/mes/wm/warehouse'
 import { WmWarehouseLocationApi, WmWarehouseLocationVO } from '@/api/mes/wm/warehouse/location'
 import LocationForm from './LocationForm.vue'
+import { BarcodeDetail } from '@/views/mes/wm/barcode/components'
+import { BarcodeBizTypeEnum } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'MesWmLocation' })
 
@@ -201,6 +213,17 @@ const handleDelete = async (id: number) => {
   } catch {}
 }
 
+/** 查看库区条码 */
+const barcodeDetailRef = ref()
+const handleBarcode = async (row: WmWarehouseLocationVO) => {
+  await barcodeDetailRef.value.openByBusiness(
+    row.id,
+    BarcodeBizTypeEnum.LOCATION,
+    row.code,
+    row.name
+  )
+}
+
 /** 初始化 */
 onMounted(async () => {
   await loadWarehouseContext()