✨ 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