feat(coil): 添加钢卷号校验功能并优化表单验证

- 新增检查钢卷号是否合法的API接口
- 在基础信息和入库表单中添加钢卷号格式和重复校验
- 实现根据前缀自动获取最大钢卷号功能
- 优化表单组件布局和样式
This commit is contained in:
砂糖
2026-01-12 16:53:58 +08:00
parent 53dd97a1c0
commit 06411166b5
3 changed files with 157 additions and 18 deletions

View File

@@ -98,7 +98,8 @@
<el-table-column label="更新时间" align="center" prop="updateTime" />
<el-table-column label="发货时间" align="center" v-if="showExportTime" prop="exportTime" width="160">
<template slot-scope="scope">
<el-date-picker @change="handleExportTimeChange(scope.row)" v-if="canEditExportTime" style="width: 90%" v-model="scope.row.exportTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择发货时间" />
<el-date-picker @change="handleExportTimeChange(scope.row)" v-if="canEditExportTime" style="width: 90%"
v-model="scope.row.exportTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择发货时间" />
<div v-else>{{ scope.row.exportTime }}</div>
</template>
</el-table-column>
@@ -181,7 +182,7 @@
clearable />
</el-form-item>
<el-form-item label="班组" prop="team">
<el-select v-model="form.team" placeholder="请选择班组" style="width: 100%" >
<el-select v-model="form.team" placeholder="请选择班组" style="width: 100%">
<el-option key="甲" label="甲" value="甲" />
<el-option key="乙" label="乙" value="乙" />
</el-select>
@@ -286,15 +287,17 @@
</template>
<script>
import {
listMaterialCoil,
getMaterialCoil,
delMaterialCoil,
addMaterialCoil,
updateMaterialCoilSimple,
getMaterialCoilTrace,
import {
listMaterialCoil,
getMaterialCoil,
delMaterialCoil,
addMaterialCoil,
updateMaterialCoilSimple,
getMaterialCoilTrace,
exportCoil,
cancelExportCoil } from "@/api/wms/coil";
cancelExportCoil,
checkCoilNo
} from "@/api/wms/coil";
import WarehouseSelect from "@/components/KLPService/WarehouseSelect";
import QRCode from "../../print/components/QRCode.vue";
import * as XLSX from 'xlsx'
@@ -451,10 +454,55 @@ export default {
// 表单校验
rules: {
enterCoilNo: [
{ required: true, message: "入场钢卷号不能为空", trigger: "blur" }
{ required: true, message: "入场钢卷号不能为空", trigger: "blur" },
// 自定义校验必须是8位的阿拉伯数字
{
validator: (rule, value, callback) => {
if (!/^\d{8}$/.test(value)) {
callback(new Error('入场钢卷号必须是8位的阿拉伯数字'));
} else {
callback();
}
}, trigger: 'blur'
},
// 远程校验,检查钢卷号是否存在
{
validator: (rule, value, callback) => {
checkCoilNo({ enterCoilNo: value }).then(res => {
const { duplicateType } = res.data;
if (duplicateType === 'enter' || duplicateType === 'both') {
// alert('入场钢卷号重复,请重新输入');
callback(new Error('入场钢卷号重复,请重新输入'));
} else {
callback();
}
})
}, trigger: 'blur'
},
],
currentCoilNo: [
{ required: true, message: "当前钢卷号不能为空", trigger: "blur" }
{ required: true, message: "当前钢卷号不能为空", trigger: "blur" },
// 仅在新增的时候校验
{
validator: (rule, value, callback) => {
if (this.form.coilId) {
// 修改时会有coilId不触发校验
console.log('修改时会有coilId不触发校验');
callback();
} else {
// 没有coilId则为新增 触发校验
checkCoilNo({ currentCoilNo: value }).then(res => {
const { duplicateType } = res.data;
if (duplicateType === 'current' || duplicateType === 'both') {
// alert('当前钢卷号重复,请重新输入');
callback(new Error('当前钢卷号重复,请重新输入'));
} else {
callback();
}
})
}
}, trigger: 'blur'
}
],
itemId: [
{ required: true, message: "物品ID不能为空", trigger: "blur" }