✨ feat(mes): 添加编码规则分段详情查询 API
YunaiV
parent
c12d7616f2
commit
5960e0102f
|
|
@ -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 })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export { default as Barcode } from './Barcode.vue'
|
||||||
|
export { default as BarcodeWithApi } from './BarcodeWithApi.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>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue