From 5960e0102f8e74af8e7985d2ebad3dcff1c8c2d7 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 6 Mar 2026 00:09:34 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(mes):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=BC=96=E7=A0=81=E8=A7=84=E5=88=99=E5=88=86=E6=AE=B5=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=9F=A5=E8=AF=A2=20API?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mes/wm/barcode/index.ts               |  98 +++++++++
 .../mes/wm/barcode/components/Barcode.vue     | 122 +++++++++++
 .../wm/barcode/components/BarcodeWithApi.vue  | 181 +++++++++++++++
 src/views/mes/wm/barcode/components/index.ts  |   2 +
 .../mes/wm/barcode/config/BarcodeConfig.vue   | 206 ++++++++++++++++++
 .../wm/barcode/config/BarcodeConfigForm.vue   | 162 ++++++++++++++
 6 files changed, 771 insertions(+)
 create mode 100644 src/api/mes/wm/barcode/index.ts
 create mode 100644 src/views/mes/wm/barcode/components/Barcode.vue
 create mode 100644 src/views/mes/wm/barcode/components/BarcodeWithApi.vue
 create mode 100644 src/views/mes/wm/barcode/components/index.ts
 create mode 100644 src/views/mes/wm/barcode/config/BarcodeConfig.vue
 create mode 100644 src/views/mes/wm/barcode/config/BarcodeConfigForm.vue

diff --git a/src/api/mes/wm/barcode/index.ts b/src/api/mes/wm/barcode/index.ts
new file mode 100644
index 000000000..62e338e99
--- /dev/null
+++ b/src/api/mes/wm/barcode/index.ts
@@ -0,0 +1,98 @@
+import request from '@/config/axios'
+
+// MES 条码清单 VO
+// TODO @AI：拆分成 index.ts，和 config/index.ts；
+// TODO @AI：WM 前缀，类似别的模块，要添加下；
+export interface BarcodeVO {
+  id: number
+  configId: number
+  format: number
+  bizType: number
+  content: string
+  bizId: number
+  bizCode: string
+  bizName: string
+  status: number
+  remark: string
+  createTime: string
+}
+
+// MES 条码配置 VO
+// TODO @AI：WM 前缀，类似别的模块，要添加下；
+export interface BarcodeConfigVO {
+  id: number
+  format: number
+  bizType: number
+  contentFormat: string
+  contentExample: string
+  autoGenerateFlag: boolean
+  defaultTemplate: string
+  status: number
+  remark: string
+  createTime: string
+}
+
+// MES 条码 API
+// TODO @AI：WM 前缀，类似别的模块，要添加下；
+export const BarcodeApi = {
+  // 查询条码分页
+  getBarcodePage: async (params: any) => {
+    return await request.get({ url: '/mes/wm/barcode/page', params })
+  },
+
+  // 查询条码详情
+  getBarcode: async (id: number) => {
+    return await request.get({ url: '/mes/wm/barcode/get?id=' + id })
+  },
+
+  // 根据业务对象获取条码
+  getBarcodeByBusiness: async (bizType: number, bizId: number) => {
+    return await request.get({
+      url: '/mes/wm/barcode/get-by-business',
+      params: { bizType, bizId }
+    })
+  },
+
+  // 新增条码
+  createBarcode: async (data: BarcodeVO) => {
+    return await request.post({ url: '/mes/wm/barcode/create', data })
+  },
+
+  // 修改条码
+  updateBarcode: async (data: BarcodeVO) => {
+    return await request.put({ url: '/mes/wm/barcode/update', data })
+  },
+
+  // 删除条码
+  deleteBarcode: async (id: number) => {
+    return await request.delete({ url: '/mes/wm/barcode/delete?id=' + id })
+  }
+}
+
+// MES 条码配置 API
+export const BarcodeConfigApi = {
+  // 查询条码配置分页
+  getBarcodeConfigPage: async (params: any) => {
+    return await request.get({ url: '/mes/wm/barcode-config/page', params })
+  },
+
+  // 查询条码配置详情
+  getBarcodeConfig: async (id: number) => {
+    return await request.get({ url: '/mes/wm/barcode-config/get?id=' + id })
+  },
+
+  // 新增条码配置
+  createBarcodeConfig: async (data: BarcodeConfigVO) => {
+    return await request.post({ url: '/mes/wm/barcode-config/create', data })
+  },
+
+  // 修改条码配置
+  updateBarcodeConfig: async (data: BarcodeConfigVO) => {
+    return await request.put({ url: '/mes/wm/barcode-config/update', data })
+  },
+
+  // 删除条码配置
+  deleteBarcodeConfig: async (id: number) => {
+    return await request.delete({ url: '/mes/wm/barcode-config/delete?id=' + id })
+  }
+}
diff --git a/src/views/mes/wm/barcode/components/Barcode.vue b/src/views/mes/wm/barcode/components/Barcode.vue
new file mode 100644
index 000000000..ffc89dbbd
--- /dev/null
+++ b/src/views/mes/wm/barcode/components/Barcode.vue
@@ -0,0 +1,122 @@
+<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/wm/barcode/constants/BarcodeConstants'
+
+defineOptions({ name: 'Barcode' })
+
+const props = defineProps({
+  content: propTypes.string.def(''), // 条码内容
+  format: propTypes.number.def(BarcodeFormatEnum.QR_CODE), // 条码格式: 1=QR_CODE, 2=EAN13, 3=CODE39, 4=UPC_A；TODO @AI：这里 @对应枚举就 ok 了；
+  width: propTypes.number.def(200), // 宽度
+  height: propTypes.number.def(100), // 高度（仅一维码使用）
+  displayValue: propTypes.bool.def(true) // 是否显示文本
+})
+
+const emit = defineEmits(['done'])
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('barcode')
+
+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 {
+      width: props.width + 'px',
+      height: props.width + 'px'
+    }
+  }
+  return {
+    width: props.width + 'px'
+  }
+})
+
+const generateBarcode = async () => {
+  if (!props.content) {
+    loading.value = false
+    return
+  }
+
+  await nextTick()
+  loading.value = true
+  try {
+    if (isQRCode.value) {
+      // 生成二维码
+      const options: QRCodeRenderersOptions = {
+        errorCorrectionLevel: 'M',
+        width: props.width
+      }
+      await QRCode.toCanvas(unref(canvasRef) as HTMLCanvasElement, props.content, options)
+      emit('done', (unref(canvasRef) as HTMLCanvasElement).toDataURL())
+    } else {
+      // 生成一维码
+      const format = BARCODE_FORMAT_MAP[props.format] || 'CODE39'
+      JsBarcode(unref(imgRef) as HTMLImageElement, props.content, {
+        format: format,
+        width: 2,
+        height: props.height,
+        displayValue: props.displayValue,
+        margin: 10
+      })
+      emit('done', (unref(imgRef) as HTMLImageElement).src)
+    }
+  } catch (error) {
+    console.error('生成条码失败:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+  () => [props.content, props.format],
+  () => {
+    if (props.content) {
+      generateBarcode()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+/** 获取条码 Base64 数据 */
+const getImageBase64 = (): string => {
+  if (isQRCode.value) {
+    return (unref(canvasRef) as HTMLCanvasElement)?.toDataURL() || ''
+  } else {
+    return (unref(imgRef) as HTMLImageElement)?.src || ''
+  }
+}
+
+// TODO @AI：下面的 scss 尽量（最大化）使用 unocss
+defineExpose({
+  getImageBase64
+})
+</script>
+
+<template>
+  <div v-loading="loading" :class="[prefixCls, 'inline-block']" :style="wrapStyle">
+    <canvas v-if="isQRCode" ref="canvasRef" ></canvas>
+    <img v-else ref="imgRef" alt="barcode" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+$prefix-cls: #{$namespace}-barcode;
+
+.#{$prefix-cls} {
+  canvas,
+  img {
+    display: block;
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/src/views/mes/wm/barcode/components/BarcodeWithApi.vue b/src/views/mes/wm/barcode/components/BarcodeWithApi.vue
new file mode 100644
index 000000000..91dbddd07
--- /dev/null
+++ b/src/views/mes/wm/barcode/components/BarcodeWithApi.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { useMessage } from '@/hooks/web/useMessage'
+import { propTypes } from '@/utils/propTypes'
+import Barcode from './Barcode.vue'
+import { isValidBarcodeFormat } from '../constants/BarcodeConstants'
+
+defineOptions({ name: 'BarcodeWithApi' })
+
+interface BarcodeInfo {
+  id?: number
+  format: number // 条码格式
+  content: string // 条码内容
+  bizType?: number
+  bizCode?: string
+  bizName?: string
+  status?: number
+}
+
+const props = defineProps({
+  businessType: propTypes.string.isRequired, // 业务类型
+  businessId: propTypes.number.isRequired, // 业务 ID
+  width: propTypes.number.def(200), // 宽度
+  height: propTypes.number.def(100), // 高度
+  autoLoad: propTypes.bool.def(true) // 是否自动加载
+})
+
+const emit = defineEmits<{
+  loaded: [data: BarcodeInfo] // 条码加载完成
+  error: [error: Error] // 加载失败
+}>()
+
+const message = useMessage()
+const barcodeRef = ref()
+const barcodeData = ref<BarcodeInfo | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+// 是否已加载
+const isLoaded = computed(() => !!barcodeData.value)
+
+/**
+ * 加载条码数据
+ */
+const loadBarcode = async () => {
+  if (!props.businessType || !props.businessId) {
+    error.value = '业务类型或业务 ID 不能为空'
+    return
+  }
+
+  loading.value = true
+  error.value = null
+
+  try {
+    // TODO: 调用后端 API 获取条码数据
+    // const response = await getBarcodeByBusinessApi({
+    //   type: props.businessType,
+    //   businessId: props.businessId
+    // })
+
+    // 临时模拟数据
+    const response: BarcodeInfo = {
+      format: 1,
+      content: `${props.businessType}-${props.businessId}`,
+      bizType: 101,
+      bizCode: `CODE-${props.businessId}`,
+      bizName: `业务-${props.businessId}`,
+      status: 0
+    }
+
+    if (!response || !isValidBarcodeFormat(response.format)) {
+      throw new Error('条码数据无效')
+    }
+
+    barcodeData.value = response
+    emit('loaded', response)
+  } catch (err) {
+    const errorMsg = err instanceof Error ? err.message : '加载条码失败'
+    error.value = errorMsg
+    console.error('加载条码失败:', err)
+    emit('error', err instanceof Error ? err : new Error(errorMsg))
+    message.error(errorMsg)
+  } finally {
+    loading.value = false
+  }
+}
+
+/**
+ * 重新加载条码
+ */
+const reload = async () => {
+  await loadBarcode()
+}
+
+/**
+ * 获取条码 Base64
+ */
+const getImageBase64 = (): string => {
+  return barcodeRef.value?.getImageBase64?.() || ''
+}
+
+// 监听业务 ID 变化，自动加载
+watch(
+  () => props.businessId,
+  () => {
+    if (props.autoLoad) {
+      loadBarcode()
+    }
+  }
+)
+
+// 组件挂载时加载
+onMounted(() => {
+  if (props.autoLoad) {
+    loadBarcode()
+  }
+})
+
+// 暴露方法
+defineExpose({
+  loadBarcode,
+  reload,
+  getImageBase64,
+  isLoaded
+})
+</script>
+
+<template>
+  <div class="barcode-with-api">
+    <!-- 加载中 -->
+    <el-skeleton v-if="loading" :rows="3" animated />
+
+    <!-- 错误状态 -->
+    <el-alert
+      v-else-if="error"
+      :title="error"
+      type="error"
+      :closable="false"
+      class="mb-12px"
+    />
+
+    <!-- 条码显示 -->
+    <div v-else-if="isLoaded && barcodeData" class="barcode-content">
+      <Barcode
+        ref="barcodeRef"
+        :content="barcodeData.content"
+        :format="barcodeData.format"
+        :width="width"
+        :height="height"
+      />
+    </div>
+
+    <!-- 空状态 -->
+    <el-empty v-else description="暂无条码数据" />
+
+    <!-- 操作按钮 -->
+    <div v-if="isLoaded" class="barcode-actions mt-12px">
+      <el-button size="small" @click="reload">
+        <Icon icon="ep:refresh" class="mr-4px" /> 刷新
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.barcode-with-api {
+  .barcode-content {
+    display: flex;
+    justify-content: center;
+    padding: 12px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+  }
+
+  .barcode-actions {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+  }
+}
+</style>
diff --git a/src/views/mes/wm/barcode/components/index.ts b/src/views/mes/wm/barcode/components/index.ts
new file mode 100644
index 000000000..f852f4c19
--- /dev/null
+++ b/src/views/mes/wm/barcode/components/index.ts
@@ -0,0 +1,2 @@
+export { default as Barcode } from './Barcode.vue'
+export { default as BarcodeWithApi } from './BarcodeWithApi.vue'
diff --git a/src/views/mes/wm/barcode/config/BarcodeConfig.vue b/src/views/mes/wm/barcode/config/BarcodeConfig.vue
new file mode 100644
index 000000000..e5b850dc1
--- /dev/null
+++ b/src/views/mes/wm/barcode/config/BarcodeConfig.vue
@@ -0,0 +1,206 @@
+<!-- TODO @AI：将 /Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/mes/wm/barcode/BarcodeConfig.vue
+/Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/mes/wm/barcode/BarcodeConfigForm.vue 挪到 /Users/yunai/Java/yudao-all-in-one/yudao-ui-admin-vue3/src/views/mes/wm/barcode/config；注意，入口应该是 index.vue -->
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="条码格式" prop="format">
+        <el-select
+          v-model="queryParams.format"
+          placeholder="请选择条码格式"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.MES_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="queryParams.bizType"
+          placeholder="请选择业务类型"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.MES_BARCODE_BIZ_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['mes:wm-barcode-config:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="条码格式" align="center" prop="format">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.MES_BARCODE_FORMAT" :value="scope.row.format" />
+        </template>
+      </el-table-column>
+      <el-table-column label="业务类型" align="center" prop="bizType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.MES_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 label="内容样例" align="center" prop="contentExample" />
+      <el-table-column label="自动生成" align="center" prop="autoGenerateFlag">
+        <template #default="scope">
+          <el-switch
+            v-model="scope.row.autoGenerateFlag"
+            @change="handleAutoGenerateChange(scope.row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="默认打印模板" align="center" prop="defaultTemplate" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" width="150px" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['mes:wm-barcode-config:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['mes:wm-barcode-config:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <BarcodeConfigForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { BarcodeConfigApi } from '@/api/mes/wm/barcode'
+import BarcodeConfigForm from './BarcodeConfigForm.vue'
+
+defineOptions({ name: 'MesWmBarcodeConfig' })
+
+const message = useMessage()
+const { t } = useI18n()
+
+const loading = ref(true)
+const list = ref([])
+const total = ref(0)
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  format: undefined,
+  bizType: undefined
+})
+const queryFormRef = ref()
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await BarcodeConfigApi.getBarcodeConfigPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    await message.delConfirm()
+    await BarcodeConfigApi.deleteBarcodeConfig(id)
+    message.success(t('common.delSuccess'))
+    await getList()
+  } catch {}
+}
+
+/** 自动生成开关变更 */
+const handleAutoGenerateChange = async (row: any) => {
+  const text = row.autoGenerateFlag ? '启用' : '停用'
+  try {
+    await message.confirm(`确认要${text}自动生成吗？`)
+    await BarcodeConfigApi.updateBarcodeConfig(row)
+    message.success(`${text}成功`)
+  } catch {
+    row.autoGenerateFlag = !row.autoGenerateFlag
+  }
+}
+
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/mes/wm/barcode/config/BarcodeConfigForm.vue b/src/views/mes/wm/barcode/config/BarcodeConfigForm.vue
new file mode 100644
index 000000000..06de38e86
--- /dev/null
+++ b/src/views/mes/wm/barcode/config/BarcodeConfigForm.vue
@@ -0,0 +1,162 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="条码格式" prop="format">
+        <el-select v-model="formData.format" placeholder="请选择条码格式" class="!w-240px">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.MES_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-240px"
+          :disabled="formType === 'update'"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.MES_BARCODE_BIZ_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="内容格式模板" prop="contentFormat">
+        <el-input
+          v-model="formData.contentFormat"
+          placeholder="支持{BUSINESSCODE}占位符，如：WH-{BUSINESSCODE}"
+          class="!w-400px"
+        />
+      </el-form-item>
+      <el-form-item label="内容样例" prop="contentExample">
+        <el-input
+          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" />
+      </el-form-item>
+      <el-form-item label="默认打印模板" prop="defaultTemplate">
+        <el-input v-model="formData.defaultTemplate" placeholder="请输入默认打印模板" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { BarcodeConfigApi, BarcodeConfigVO } from '@/api/mes/wm/barcode'
+
+defineOptions({ name: 'BarcodeConfigForm' })
+
+const { t } = useI18n()
+const message = useMessage()
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const formLoading = ref(false)
+const formType = ref('')
+const formData = ref({
+  id: undefined,
+  format: undefined,
+  bizType: undefined,
+  contentFormat: '',
+  contentExample: '',
+  autoGenerateFlag: true,
+  defaultTemplate: '',
+  status: 0,
+  remark: ''
+})
+const formRules = reactive({
+  format: [{ required: true, message: '条码格式不能为空', trigger: 'change' }],
+  bizType: [{ required: true, message: '业务类型不能为空', trigger: 'change' }],
+  contentFormat: [{ required: true, message: '内容格式模板不能为空', trigger: 'blur' }],
+  autoGenerateFlag: [{ required: true, message: '是否自动生成不能为空', trigger: 'blur' }]
+})
+const formRef = ref()
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = type === 'create' ? '新增条码配置' : '修改条码配置'
+  formType.value = type
+  resetForm()
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await BarcodeConfigApi.getBarcodeConfig(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open })
+
+/** 提交表单 */
+const emit = defineEmits(['success'])
+const submitForm = async () => {
+  await formRef.value.validate()
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as BarcodeConfigVO
+    if (formType.value === 'create') {
+      await BarcodeConfigApi.createBarcodeConfig(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await BarcodeConfigApi.updateBarcodeConfig(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    format: undefined,
+    bizType: undefined,
+    contentFormat: '',
+    contentExample: '',
+    autoGenerateFlag: true,
+    defaultTemplate: '',
+    status: 0,
+    remark: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>