✨ feat(mes): 更新条码组件和表单逻辑，优化数据处理

src/api/mes/wm/barcode/index.ts

@@ -12,7 +12,7 @@ export interface WmBarcodeVO {
   bizName?: string
   status: number
   remark: string
-  createTime?: string
+  createTime?: Date
 }
 
 // MES 条码 API

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

@@ -1,9 +1,15 @@
+<template>
+  <div v-loading="loading" class="inline-block" :style="wrapStyle">
+    <canvas v-if="isQRCode" ref="canvasRef" class="block max-w-full"></canvas>
+    <!--suppress RequiredAttributes：JsBarcode 需要原生图片 -->
+    <img v-else ref="imgRef" alt="barcode" class="block max-w-full" />
+  </div>
+</template>
 <script lang="ts" setup>
 import { computed, nextTick, ref, unref, watch } from 'vue'
 import QRCode, { QRCodeRenderersOptions } from 'qrcode'
 import JsBarcode from 'jsbarcode'
 import { propTypes } from '@/utils/propTypes'
-import { useDesign } from '@/hooks/web/useDesign'
 import { BarcodeFormatEnum, BARCODE_FORMAT_MAP } from '@/views/mes/utils/constants'
 
 defineOptions({ name: 'Barcode' })
@@ -18,15 +24,10 @@ const props = defineProps({
 
 const emit = defineEmits(['done'])
 
-const { getPrefixCls } = useDesign()
+const loading = ref(true) // 加载状态
-const prefixCls = getPrefixCls('barcode')
+const canvasRef = ref<Nullable<HTMLCanvasElement>>(null) // 二维码的 Canvas 引用
-
+const imgRef = ref<Nullable<HTMLImageElement>>(null) // 一维码的图片引用
-const loading = ref(true)
-const canvasRef = ref<Nullable<HTMLCanvasElement>>(null)
-const imgRef = ref<Nullable<HTMLImageElement>>(null)
-
 const isQRCode = computed(() => props.format === BarcodeFormatEnum.QR_CODE) // 判断是否为二维码
-
 const wrapStyle = computed(() => {
   if (isQRCode.value) {
     return {
@@ -101,11 +102,3 @@ defineExpose({
   getImageBase64
 })
 </script>
-
-<template>
-  <div v-loading="loading" :class="[prefixCls, 'inline-block']" :style="wrapStyle">
-    <canvas v-if="isQRCode" ref="canvasRef" class="block max-w-full"></canvas>
-    <!--suppress RequiredAttributes：JsBarcode 需要原生图片 -->
-    <img v-else ref="imgRef" alt="barcode" class="block max-w-full" />
-  </div>
-</template>

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

@@ -1,5 +1,5 @@
 <template>
-  <Dialog title="查看条码" v-model="dialogVisible" width="500px" :close-on-click-modal="false">
+  <Dialog title="查看条码" v-model="dialogVisible" width="500px">
     <div>
       <!-- 条码显示区域 -->
       <div class="flex justify-center items-center min-h-200px p-20px bg-[#f5f7fa] rounded mb-20px">
@@ -47,13 +47,13 @@
         </el-descriptions-item>
         <el-descriptions-item label="状态" label-align="left" align="left">
           <dict-tag
-            v-if="barcodeData.status"
+            v-if="barcodeData.status !== undefined"
             :type="DICT_TYPE.COMMON_STATUS"
             :value="barcodeData.status"
           />
         </el-descriptions-item>
         <el-descriptions-item label="创建时间" label-align="left" align="left">
-          {{ formatDate(barcodeData?.createTime) }}
+          {{ formatDate(barcodeData.createTime) }}
         </el-descriptions-item>
       </el-descriptions>
     </div>
@@ -90,15 +90,7 @@ const message = useMessage()
 
 const dialogVisible = ref(false)
 const barcodeRef = ref<InstanceType<typeof Barcode>>()
-const barcodeData = ref<Partial<WmBarcodeVO>>({
+const barcodeData = ref<Partial<WmBarcodeVO>>({})
-  format: undefined,
-  bizType: undefined,
-  content: '',
-  bizCode: '',
-  bizName: '',
-  status: undefined,
-  createTime: undefined
-})
 
 /** 打开弹窗 - 方式 1：直接传入数据 */
 const open = (row: Partial<WmBarcodeVO>) => {
@@ -125,14 +117,13 @@ const openByBusiness = async (bizId: number, bizType: number) => {
 
 defineExpose({ open, openByBusiness })
 
-// DONE @AI：【晚点弄】打印可以在当前界面么？（AI 未修复原因：打印功能标注为后续处理，当前实现使用新窗口打印已可用）
 /** 打印条码 */
+// TODO @芋艿（目前暂时不处理）：后续支持打印的自定义；
 const handlePrint = () => {
   if (!barcodeRef.value) {
     message.warning('条码组件未加载')
     return
   }
-
   const base64 = barcodeRef.value.getImageBase64?.()
   if (!base64) {
     message.warning('条码生成失败，无法打印')
@@ -176,7 +167,6 @@ const handlePrint = () => {
     </div>
   </body>
 </html>`
-
     printWindow.document.write(html)
     printWindow.document.close()
 
@@ -204,12 +194,8 @@ const handleDownload = () => {
     return
   }
 
-  // DONE @AI：已封装 download.base64Image 方法，复用 download 工具类
   try {
-    download.base64Image(
+    download.base64Image(base64, `barcode_${barcodeData.value.bizCode || 'unknown'}_${Date.now()}`)
-      base64,
-      `barcode_${barcodeData.value.bizCode || 'unknown'}_${Date.now()}`
-    )
     message.success('下载成功')
   } catch (error) {
     console.error('下载失败:', error)
@@ -218,7 +204,6 @@ const handleDownload = () => {
 }
 
 /** 生成条码（当无条码数据时） */
-// DONE @AI：现在就搞！你看看接口都 ready 的！
 const handleGenerate = async () => {
   const { bizType, bizId, bizCode, bizName } = barcodeData.value
   if (!bizType || !bizId) {

src/views/mes/wm/barcode/config/BarcodeConfigForm.vue

@@ -8,7 +8,7 @@
       v-loading="formLoading"
     >
       <el-form-item label="条码格式" prop="format">
-        <el-select v-model="formData.format" placeholder="请选择条码格式" class="!w-240px">
+        <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"
@@ -21,7 +21,7 @@
         <el-select
           v-model="formData.bizType"
           placeholder="请选择业务类型"
-          class="!w-240px"
+          class="!w-1/1"
           :disabled="formType === 'update'"
         >
           <el-option
@@ -36,15 +36,11 @@
         <el-input
           v-model="formData.contentFormat"
           placeholder="支持{BUSINESSCODE}占位符，如：WH-{BUSINESSCODE}"
-          class="!w-400px"
+          class="!w-1/1"
         />
       </el-form-item>
       <el-form-item label="内容样例" prop="contentExample">
-        <el-input
+        <el-input v-model="formData.contentExample" placeholder="如：WH-WH001" class="!w-1/1" />
-          v-model="formData.contentExample"
-          placeholder="如：WH-WH001"
-          class="!w-400px"
-        />
       </el-form-item>
       <el-form-item label="自动生成" prop="autoGenerateFlag">
         <el-switch v-model="formData.autoGenerateFlag" />
@@ -76,17 +72,20 @@
 
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
-import { WmBarcodeConfigApi as BarcodeConfigApi, WmBarcodeConfigVO as BarcodeConfigVO } from '@/api/mes/wm/barcode/config'
+import {
+  WmBarcodeConfigApi as BarcodeConfigApi,
+  WmBarcodeConfigVO as BarcodeConfigVO
+} from '@/api/mes/wm/barcode/config'
 
 defineOptions({ name: 'BarcodeConfigForm' })
 
-const { t } = useI18n()
+const { t } = useI18n() // 国际化
-const message = useMessage()
+const message = useMessage() // 消息弹窗
 
-const dialogVisible = ref(false)
+const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('')
+const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false)
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('')
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
   id: undefined,
   format: undefined,
@@ -104,7 +103,7 @@ const formRules = reactive({
   contentFormat: [{ required: true, message: '内容格式模板不能为空', trigger: 'blur' }],
   autoGenerateFlag: [{ required: true, message: '是否自动生成不能为空', trigger: 'blur' }]
 })
-const formRef = ref()
+const formRef = ref() // 表单 Ref
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -121,12 +120,14 @@ const open = async (type: string, id?: number) => {
     }
   }
 }
-defineExpose({ open })
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
-const emit = defineEmits(['success'])
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
+  // 校验表单
   await formRef.value.validate()
+  // 提交请求
   formLoading.value = true
   try {
     const data = formData.value as unknown as BarcodeConfigVO

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

@@ -56,20 +56,37 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
-      <el-table-column label="编号" align="center" prop="id" />
+      :show-overflow-tooltip="true"
-      <el-table-column label="条码格式" align="center" prop="format">
+      <el-table-column label="编号" align="center" key="id" prop="id" width="100" />
+      <el-table-column label="条码格式" align="center" key="format" prop="format" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.MES_WM_BARCODE_FORMAT" :value="scope.row.format" />
         </template>
       </el-table-column>
-      <el-table-column label="业务类型" align="center" prop="bizType">
+      <el-table-column label="业务类型" align="center" key="bizType" prop="bizType" width="100">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE" :value="scope.row.bizType" />
         </template>
       </el-table-column>
-      <el-table-column label="内容格式" align="center" prop="contentFormat" show-overflow-tooltip />
+      <el-table-column
-      <el-table-column label="内容样例" align="center" prop="contentExample" />
+        label="内容格式"
-      <el-table-column label="自动生成" align="center" prop="autoGenerateFlag">
+        align="center"
+        prop="contentFormat"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="内容样例"
+        align="center"
+        prop="contentExample"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="自动生成"
+        align="center"
+        key="autoGenerateFlag"
+        prop="autoGenerateFlag"
+        width="100"
+      >
         <template #default="scope">
           <el-switch
             v-model="scope.row.autoGenerateFlag"
@@ -77,8 +94,7 @@
           />
         </template>
       </el-table-column>
-      <el-table-column label="默认打印模板" align="center" prop="defaultTemplate" />
+      <el-table-column label="状态" align="center" key="status" prop="status" width="100">
-      <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
         </template>
@@ -88,9 +104,9 @@
         align="center"
         prop="createTime"
         :formatter="dateFormatter"
-        width="180px"
+        width="180"
       />
-      <el-table-column label="操作" align="center" width="150px" fixed="right">
+      <el-table-column label="操作" align="center" width="150" fixed="right">
         <template #default="scope">
           <el-button
             link
@@ -198,6 +214,7 @@ const handleAutoGenerateChange = async (row: any) => {
   }
 }
 
+/** 初始化 */
 onMounted(() => {
   getList()
 })

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

@@ -101,11 +101,9 @@
       </el-table-column>
       <el-table-column label="条码格式" align="center" prop="format">
         <template #default="scope">
-          <!-- DONE @AI：MES_BARCODE_FORMAT => MES_WM_BARCODE_FORMAT -->
           <dict-tag :type="DICT_TYPE.MES_WM_BARCODE_FORMAT" :value="scope.row.format" />
         </template>
       </el-table-column>
-      <!-- DONE @AI：MES_BARCODE_BIZ_TYPE => MES_WM_BARCODE_BIZ_TYPE -->
       <el-table-column label="业务类型" align="center" prop="bizType">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE" :value="scope.row.bizType" />
@@ -120,7 +118,6 @@
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" width="180px" fixed="right">
-        <!-- DONE @AI：使用数据库，检查下相关的权限标识，是不是加入了；（AI 未修复原因：需在数据库 system_menu 表中手动检查/插入 mes:wm-barcode:create、mes:wm-barcode:update、mes:wm-barcode:delete、mes:wm-barcode:query、mes:wm-barcode-config:query 权限标识，非代码层面修改） -->
         <template #default="scope">
           <el-button
             link
@@ -245,12 +242,10 @@ const handleView = (row: any) => {
 
 /** 条码设置 */
 const handleConfig = () => {
-  // DONE @AI：已改成 name 路由跳转
   push({ name: 'MesWmBarcodeConfig' })
 }
 
 onMounted(() => {
   getList()
 })
-// DONE @AI：下面的 scss 已使用 unocss 替代
 </script>