DeXun/klp-oa
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(qc/inspection): 修复产品检验入场卷号校验逻辑

Browse Source 
1. 移除表单内置的入场卷号校验规则，改为手动校验
2. 添加失焦校验和实时错误提示
3. 优化两个页面的卷号选择表单结构
This commit is contained in:
砂糖
2026-06-02 16:49:13 +08:00
parent fe24426f59
commit 715c1b9728
2 changed files with 43 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
klp-ui/src/components/KLPService/SchemeSelect/index.vue
View File

@@ -63,22 +63,19 @@
<el-form-item label="任务编号" prop="taskCode" :rules="[{ required: true, message: '请输入任务编号', trigger: 'blur' }]">
<el-input v-model="form.taskCode" placeholder="请输入任务编号" style="width: 280px;" />
</el-form-item>
</el-form>
<el-form :model="form" ref="taskForm" label-width="80px" size="small">
<el-form-item label="任务类型" prop="taskType" :rules="[{ required: true, message: '请选择任务类型', trigger: 'blur' }]">
<el-select v-model="form.taskType" placeholder="请选择任务类型" style="width: 280px;">
<el-option label="内控检验" value="内控检验" />
<el-option label="产品检验" value="产品检验" />
</el-select>
</el-form-item>
</el-form>
<el-form :model="form" ref="taskForm" label-width="80px" size="small" v-if="form.taskType === '产品检验'">
<div style="background: #f5f7fa; border: 1px solid #e4e7ed; border-radius: 6px; padding: 12px 16px 8px 16px; margin-bottom: 4px;">
<div style="font-size: 12px; color: #909399; margin-bottom: 8px; line-height: 1.6;">
<i class="el-icon-info" style="margin-right: 4px;"></i>
可输入入场卷号或厂家卷号，两者互通匹配
</div>
<el-form-item label="入场卷号" prop="enterCoilNos" :rules="[{ required: true, message: '请输入入场卷号', trigger: 'blur' }]">
<template v-if="form.taskType === '产品检验'">
<div style="background: #f5f7fa; border: 1px solid #e4e7ed; border-radius: 6px; padding: 12px 16px 8px 16px; margin-bottom: 4px;">
<div style="font-size: 12px; color: #909399; margin-bottom: 8px; line-height: 1.6;">
<i class="el-icon-info" style="margin-right: 4px;"></i>
可输入入场卷号或厂家卷号，两者互通匹配
</div>
<el-form-item label="入场卷号">
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;">
<el-tag
v-for="(coilNo, index) in selectedEnterCoilNos"
@@ -98,8 +95,12 @@
clearable
style="width: 280px;"
@select="handleSelectCoilNo"
@blur="validateEnterCoilNos"
/>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;" v-if="selectedSupplierCoilNos.length > 0">
<div v-if="enterCoilNoError" class="el-form-item__error" style="position: static; padding-top: 0;">请输入入场卷号</div>
</el-form-item>
<el-form-item label="厂家卷号">
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;" v-if="selectedSupplierCoilNos.length > 0">
<el-tag
v-for="(coilNo, index) in selectedSupplierCoilNos"
:key="'supplier-' + index"
@@ -113,32 +114,18 @@
<el-autocomplete
v-model="tempSupplierCoilNo"
:fetch-suggestions="querySupplierCoilNo"
placeholder="或输入厂家卷号自动匹配"
placeholder="输入厂家卷号自动匹配"
:loading="supplierCoilNoLoading"
:trigger-on-focus="false"
clearable
size="small"
style="width: 280px; margin-top: 6px;"
style="width: 280px;"
@select="handleSelectSupplierCoilNo"
/>
</el-form-item>
</div>
</template>
</el-form>
<!-- <div style="margin-bottom: 8px;">
<CoilSelector use-trigger multiple @confirm="handleCoilConfirm">
<el-button type="primary" plain icon="el-icon-plus" size="small">选择钢卷</el-button>
</CoilSelector>
<span v-if="selectedCoils.length > 0" style="margin-left: 8px; font-size: 13px; color: #67c23a;">
已选 {{ selectedCoils.length }} 卷
</span>
<el-button v-if="selectedCoils.length > 0" type="text" size="small" style="margin-left: 4px; color: #f56c6c;" @click="selectedCoils = []">清除</el-button>
</div>
<div v-if="selectedCoils.length > 0" style="display: flex; flex-wrap: wrap; gap: 8px;">
<div v-for="(coil, index) in selectedCoils" :key="coil.coilId || index" style="display: flex; align-items: center; gap: 4px;">
<CurrentCoilNo @click.native="handleClickCoil(coil)" :currentCoilNo="coil.currentCoilNo || coil.coilNo || ''" />
<el-button type="text" icon="el-icon-close" size="mini" @click="selectedCoils.splice(index, 1)"></el-button>
</div>
</div> -->
</div>
<div slot="footer" class="dialog-footer">
@@ -234,6 +221,7 @@ export default {
selectedSupplierCoilNos: [],
tempSupplierCoilNo: '',
supplierCoilNoLoading: false,
enterCoilNoError: false,
};
},
computed: {
@@ -256,6 +244,7 @@ export default {
this.tempEnterCoilNo = '';
this.selectedSupplierCoilNos = [];
this.tempSupplierCoilNo = '';
this.enterCoilNoError = false;
this.getList();
}
}
@@ -302,7 +291,12 @@ export default {
handleClickCoil(coil) {
this.$router.push('/wms/coil/' + coil.coilId);
},
validateEnterCoilNos() {
this.enterCoilNoError = this.form.taskType === '产品检验' && this.selectedEnterCoilNos.length === 0;
},
handleConfirm() {
this.validateEnterCoilNos();
if (this.enterCoilNoError) return;
this.$refs["taskForm"].validate(valid => {
if (valid && this.selectedTemplate) {
const coilIds = this.selectedCoils.map(c => c.coilId).join(",");
@@ -362,12 +356,13 @@ export default {
if (!this.selectedEnterCoilNos.includes(item.value)) {
this.selectedEnterCoilNos.push(item.value);
}
this.tempEnterCoilNo = '';
this.form.enterCoilNos = this.selectedEnterCoilNos.join(',');
this.validateEnterCoilNos();
},
removeEnterCoilNo(index) {
this.selectedEnterCoilNos.splice(index, 1);
this.form.enterCoilNos = this.selectedEnterCoilNos.join(',');
this.validateEnterCoilNos();
},
querySupplierCoilNo(queryString, cb) {
if (!queryString || queryString.length < 2) {
@@ -398,9 +393,9 @@ export default {
if (item.enterCoilNo && !this.selectedEnterCoilNos.includes(item.enterCoilNo)) {
this.selectedEnterCoilNos.push(item.enterCoilNo);
this.form.enterCoilNos = this.selectedEnterCoilNos.join(',');
this.$refs["taskForm"].validateField('enterCoilNos');
}
this.tempSupplierCoilNo = '';
this.validateEnterCoilNos();
},
removeSupplierCoilNo(index) {
this.selectedSupplierCoilNos.splice(index, 1);

28
klp-ui/src/views/mes/qc/inspection/task.vue
View File

@@ -265,7 +265,7 @@
<i class="el-icon-info" style="margin-right: 4px;"></i>
可输入入场卷号或厂家卷号，两者互通匹配
</div>
<el-form-item label="入场卷号" prop="enterCoilNos">
<el-form-item label="入场卷号">
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;">
<el-tag
v-for="(coilNo, index) in selectedEnterCoilNos"
@@ -284,8 +284,12 @@
:trigger-on-focus="false"
clearable
@select="handleSelectEnterCoilNo"
@blur="validateEnterCoilNos"
/>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;" v-if="selectedSupplierCoilNos.length > 0">
<div v-if="enterCoilNoError" class="el-form-item__error" style="position: static; padding-top: 0;">请输入入场卷号</div>
</el-form-item>
<el-form-item label="厂家卷号">
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;" v-if="selectedSupplierCoilNos.length > 0">
<el-tag
v-for="(coilNo, index) in selectedSupplierCoilNos"
:key="'s-' + index"
@@ -299,13 +303,12 @@
<el-autocomplete
v-model="tempSupplierCoilNo"
:fetch-suggestions="querySupplierCoilNo"
placeholder="或输入厂家卷号自动匹配"
placeholder="输入厂家卷号自动匹配"
:loading="supplierCoilNoLoading"
:trigger-on-focus="false"
clearable
size="small"
@select="handleSelectSupplierCoilNo"
style="margin-top: 6px;"
/>
</el-form-item>
</div>
@@ -527,14 +530,12 @@ export default {
attachmentLoading: false,
attachmentTaskRow: null,
attachmentFiles: '',
enterCoilNoError: false,
};
},
computed: {
taskRules() {
return {
...this.baseTaskRules,
enterCoilNos: [{ required: this.taskForm.taskType === '产品检验', message: '请输入入场卷号', trigger: 'blur' }],
};
return { ...this.baseTaskRules };
},
itemReadonly() {
if (!this.readonly) return false;
@@ -629,7 +630,12 @@ export default {
this.taskTitle = "修改检验任务";
});
},
validateEnterCoilNos() {
this.enterCoilNoError = this.taskForm.taskType === '产品检验' && this.selectedEnterCoilNos.length === 0;
},
submitTaskForm() {
this.validateEnterCoilNos();
if (this.enterCoilNoError) return;
this.$refs["taskForm"].validate(valid => {
if (valid) {
this.buttonLoading = true;
@@ -794,12 +800,13 @@ export default {
if (!this.selectedEnterCoilNos.includes(item.value)) {
this.selectedEnterCoilNos.push(item.value);
}
this.tempEnterCoilNo = '';
this.taskForm.enterCoilNos = this.selectedEnterCoilNos.join(',');
this.validateEnterCoilNos();
},
removeEnterCoilNo(index) {
this.selectedEnterCoilNos.splice(index, 1);
this.taskForm.enterCoilNos = this.selectedEnterCoilNos.join(',');
this.validateEnterCoilNos();
},
querySupplierCoilNo(queryString, cb) {
if (!queryString || queryString.length < 2) {
@@ -830,9 +837,9 @@ export default {
if (item.enterCoilNo && !this.selectedEnterCoilNos.includes(item.enterCoilNo)) {
this.selectedEnterCoilNos.push(item.enterCoilNo);
this.taskForm.enterCoilNos = this.selectedEnterCoilNos.join(',');
this.$refs["taskForm"].validateField('enterCoilNos');
}
this.tempSupplierCoilNo = '';
this.validateEnterCoilNos();
},
removeSupplierCoilNo(index) {
this.selectedSupplierCoilNos.splice(index, 1);
@@ -870,6 +877,7 @@ export default {
this.tempEnterCoilNo = '';
this.selectedSupplierCoilNos = [];
this.tempSupplierCoilNo = '';
this.enterCoilNoError = false;
this.resetForm("taskForm");
},