yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

pull/871/MERGE
YunaiV 2026-03-07 09:10:07 +08:00
parent 184009380d
commit c7f9d41e07
6 changed files with 63 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/mes/wm/barcode/index.ts
View File

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

27
src/views/mes/wm/barcode/components/Barcode.vue
View File

@ -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 prefixCls = getPrefixCls('barcode')
const loading = ref(true)
const canvasRef = ref<Nullable<HTMLCanvasElement>>(null)
const imgRef = ref<Nullable<HTMLImageElement>>(null)
const loading = ref(true) // 加载状态
const canvasRef = ref<Nullable<HTMLCanvasElement>>(null) // 二维码的 Canvas 引用
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>

27
src/views/mes/wm/barcode/components/BarcodeDetail.vue
View File

@ -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>>({
format: undefined,
bizType: undefined,
content: '',
bizCode: '',
bizName: '',
status: undefined,
createTime: undefined
})
const barcodeData = ref<Partial<WmBarcodeVO>>({})
/** 打开弹窗 - 方式 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(
base64,
`barcode_${barcodeData.value.bizCode || 'unknown'}_${Date.now()}`
)
download.base64Image(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) {

37
src/views/mes/wm/barcode/config/BarcodeConfigForm.vue
View File

@ -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
v-model="formData.contentExample"
placeholder="如：WH-WH001"
class="!w-400px"
/>
<el-input v-model="formData.contentExample" placeholder="如：WH-WH001" class="!w-1/1" />
</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 message = useMessage()
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formLoading = ref(false)
const formType = ref('')
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
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

37
src/views/mes/wm/barcode/config/index.vue
View File

@ -56,20 +56,37 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="条码格式" align="center" prop="format">
:show-overflow-tooltip="true"
<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 label="内容样例" align="center" prop="contentExample" />
<el-table-column label="自动生成" align="center" prop="autoGenerateFlag">
<el-table-column
label="内容格式"
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" prop="status">
<el-table-column label="状态" align="center" key="status" prop="status" width="100">
<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()
})

5
src/views/mes/wm/barcode/index.vue
View File

@ -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>