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

feat(异常管理): 重构异常管理界面并新增多选组件

Browse Source 
- 新增MutiSelect组件支持下拉多选和复选框两种模式
- 重构异常管理界面，支持直接在表格中编辑异常记录
- 优化钢卷信息展示，增加刷新功能
- 修改AbnormalForm组件，使用MutiSelect替代原有单选组件
- 确保异常记录列表始终显示至少10行，方便快速添加
This commit is contained in:
砂糖
2026-04-07 17:40:01 +08:00
parent 1bfd3a598a
commit 43f28a4225
4 changed files with 397 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
klp-ui/src/components/MutiSelect/index.vue
View File

@@ -1,10 +1,51 @@
<template>
<el-select v-model="innerValue" multiple placeholder="请选择" filterable clearable :allow-create="allowAdd">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div class="muti-select">
<!-- 下拉选择模式 -->
<el-select
v-if="type === 'select'"
v-model="innerValue"
multiple
:placeholder="placeholder"
:filterable="filterable"
:clearable="clearable"
:allow-create="allowAdd"
:disabled="disabled"
:size="size"
@change="handleChange"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<!-- 复选框模式 -->
<div v-else-if="type === 'checkbox'" class="checkbox-group">
<el-checkbox-group v-model="innerValue" @change="handleCheckboxChange">
<el-checkbox
v-for="item in options"
:key="item.value"
:label="item.value"
:disabled="disabled"
>
{{ item.label }}
</el-checkbox>
</el-checkbox-group>
<!-- <el-button
v-if="showSelectAll && options.length > 0"
type="text"
size="small"
@click="toggleSelectAll"
>
{{ isAllSelected ? '取消全选' : '全选' }}
</el-button> -->
</div>
</div>
</template>
<!-- v-model上床绑定逗号分隔的字符串，可以props配置是否允许新增 -->
<!-- v-model 绑定逗号分隔的字符串，可以 props 配置是否允许新增 -->
<script>
export default {
name: 'MutiSelect',
@@ -20,6 +61,34 @@
allowAdd: {
type: Boolean,
default: false
},
type: {
type: String,
default: 'select' // select or checkbox
},
placeholder: {
type: String,
default: '请选择'
},
filterable: {
type: Boolean,
default: true
},
clearable: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
size: {
type: String,
default: 'default' // large, default, small
},
showSelectAll: {
type: Boolean,
default: true
}
},
// 计算属性捕获实现双向绑定
@@ -29,12 +98,55 @@
if (!this.value) {
return [];
}
return this.value.split(',');
return this.value?.split(',');
},
set(val) {
this.$emit('input', val.join(','));
const newValue = val?.join(',') ?? '';
this.$emit('input', newValue);
this.$emit('change', newValue);
}
},
// 是否全选
isAllSelected() {
return this.options.length > 0 && this.innerValue.length === this.options.length;
}
},
methods: {
// 处理选择变化
handleChange(val) {
this.$emit('change', val.join(','));
},
// 处理复选框变化
handleCheckboxChange(val) {
const newValue = val.join(',');
this.$emit('input', newValue);
this.$emit('change', newValue);
},
// 切换全选/取消全选
toggleSelectAll() {
if (this.isAllSelected) {
this.innerValue = [];
} else {
this.innerValue = this.options.map(item => item.value);
}
}
}
}
</script>
</script>
<style scoped>
.muti-select {
width: 100%;
}
.checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.checkbox-group .el-checkbox {
margin-right: 10px;
}
</style>

2
klp-ui/src/main.js
View File

@@ -46,6 +46,7 @@ import VueMeta from 'vue-meta'
import DictData from '@/components/DictData'
import KLPTable from '@/components/KLPUI/KLPTable/index.vue'
import MemoInput from '@/components/MemoInput/index.vue'
import MutiSelect from '@/components/MutiSelect/index.vue'
import CurrentCoilNo from '@/components/KLPService/Renderer/CurrentCoilNo.vue'
import DictSelect from '@/components/DictSelect'
@@ -81,6 +82,7 @@ Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.component('KLPTable', KLPTable)
Vue.component('MemoInput', MemoInput)
Vue.component('MutiSelect', MutiSelect)
Vue.component('DictSelect', DictSelect)
Vue.component('CurrentCoilNo', CurrentCoilNo)

60
klp-ui/src/views/wms/coil/components/AbnormalForm.vue
View File

@@ -4,20 +4,18 @@
<coil-selector v-model="formData.coilId"></coil-selector>
</el-form-item>
<el-form-item label="上下板面" prop="plateSurface">
<el-radio-group v-model="formData.plateSurface">
<el-radio-button key="top" label="上">
上板面
</el-radio-button>
<el-radio-button key="bottom" label="下">
下板面
</el-radio-button>
</el-radio-group>
<muti-select v-model="formData.plateSurface" :options="[
{label: '上板面', value: '上'},
{label: '下板面', value: '下'}]" type="checkbox">
</muti-select>
<!-- <el-checkbox-group v-model="formData.plateSurface">
<el-checkbox key="top" label="上">上板面</el-checkbox>
<el-checkbox key="bottom" label="下">下板面</el-checkbox>
</el-checkbox-group> -->
</el-form-item>
<el-form-item label="断面位置" prop="position">
<el-radio-group v-model="formData.position">
<el-radio-button v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{
dict.label }}</el-radio-button>
</el-radio-group>
<muti-select v-model="formData.position" :options="dict.type.coil_abnormal_position" type="checkbox">
</muti-select>
</el-form-item>
<el-form-item>
<el-alert title="异常位置为内圈算起" type="info" :closable="false" show-icon size="small" />
@@ -84,7 +82,12 @@ export default {
return {
rules: {
position: [
{ required: true, message: '请选择位置', trigger: 'change' }
{ required: true, message: '请选择位置', trigger: 'change' },
{ validator: this.validateArray, trigger: 'change' }
],
plateSurface: [
{ required: true, message: '请选择上下板面', trigger: 'change' },
{ validator: this.validateArray, trigger: 'change' }
],
startPosition: [
{ required: true, message: '请输入开始位置', trigger: ['blur', 'change'] },
@@ -106,10 +109,26 @@ export default {
computed: {
formData: {
get() {
return this.value || {};
const data = this.value || {};
// 接收时将CSV字符串解析成数组
// if (data.plateSurface && typeof data.plateSurface === 'string') {
// data.plateSurface = data.plateSurface?.split(',') ?? [];
// }
// if (data.position && typeof data.position === 'string') {
// data.position = data.position?.split(',') ?? [];
// }
return data;
},
set(newVal) {
this.$emit('input', { ...newVal });
// 发送时将数组转为CSV
const data = { ...newVal };
// if (data.plateSurface && Array.isArray(data.plateSurface)) {
// data.plateSurface = data.plateSurface?.join(',') ?? '';
// }
// if (data.position && Array.isArray(data.position)) {
// data.position = data.position?.join(',') ?? '';
// }
this.$emit('input', data);
}
}
},
@@ -129,7 +148,8 @@ export default {
this.formData = {
abnormalId: undefined,
coilId: currentCoilId,
position: undefined,
position: [],
plateSurface: [],
startPosition: undefined,
endPosition: undefined,
length: undefined,
@@ -161,6 +181,14 @@ export default {
} else {
callback();
}
},
/** 校验数组 */
validateArray(rule, value, callback) {
if (!value || value.length === 0) {
callback(new Error('请至少选择一个选项'));
} else {
callback();
}
}
}
};

277
klp-ui/src/views/wms/coil/components/ExceptionManager.vue
View File

@@ -1,43 +1,14 @@
<template>
<div class="exception-container" v-loading="abnormalLoading">
<div class="exception-section">
<h4 class="section-title">异常记录</h4>
<el-table :data="abnormalList" style="width: 100%">
<el-table-column label="开始位置" prop="startPosition"></el-table-column>
<el-table-column label="结束位置" prop="endPosition"></el-table-column>
<el-table-column label="长度" prop="length"></el-table-column>
<el-table-column label="上下版面" prop="plateSurface"></el-table-column>
<el-table-column label="断面位置" prop="position"></el-table-column>
<el-table-column label="是否为主缺陷" prop="mainMark">
<template slot-scope="scope">
<el-tag v-if="scope.row.mainMark" type="success">是</el-tag>
<el-tag v-else type="danger">否</el-tag>
</template>
</el-table-column>
<el-table-column label="缺陷代码" prop="defectCode">
<template slot-scope="scope">
<dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
</template>
</el-table-column>
<el-table-column label="程度" prop="degree">
<template slot-scope="scope">
<dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
</template>
</el-table-column>
<el-table-column label="产线" prop="productionLine"></el-table-column>
<el-table-column label="备注" prop="remark"></el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<el-button type="danger" plain size="mini" :loading="buttonLoading"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="exception-section">
<h4 class="section-title">钢卷信息</h4>
<el-descriptions :column="5">
<div class="section-header">
<h4 class="section-title">钢卷信息</h4>
<el-button type="default" icon="el-icon-refresh" plain size="mini" @click="refreshCoilInfo"
:loading="coilInfoLoading">
刷新
</el-button>
</div>
<el-descriptions :column="5" v-loading="coilInfoLoading">
<el-descriptions-item label="入场钢卷号">{{ coilInfo.enterCoilNo || '-' }}</el-descriptions-item>
<el-descriptions-item label="当前钢卷号">{{ coilInfo.currentCoilNo || '-' }}</el-descriptions-item>
<el-descriptions-item label="厂家原料卷号">{{ coilInfo.supplierCoilNo || '-' }}</el-descriptions-item>
@@ -70,6 +41,10 @@
<el-descriptions-item label="毛重">{{ coilInfo.grossWeight || '-' }} t</el-descriptions-item>
<el-descriptions-item label="净重">{{ coilInfo.netWeight || '-' }} t</el-descriptions-item>
<el-descriptions-item label="生产开始时间">{{ coilInfo.productionStartTime || '-'
}}</el-descriptions-item>
<el-descriptions-item label="生产结束时间">{{ coilInfo.productionEndTime || '-'
}}</el-descriptions-item>
<el-descriptions-item label="调制度">{{ coilInfo.temperGrade || '-' }}</el-descriptions-item>
<el-descriptions-item label="镀层种类">{{ coilInfo.coatingType || '-' }}</el-descriptions-item>
<el-descriptions-item label="钢卷表面处理">{{ coilInfo.coilSurfaceTreatment || '-' }}</el-descriptions-item>
@@ -78,6 +53,100 @@
</div>
<div class="exception-section">
<div class="section-header">
<h4 class="section-title">异常记录</h4>
<el-button type="default" icon="el-icon-refresh" plain size="mini" @click="refreshAbnormalList"
:loading="abnormalLoading">
刷新
</el-button>
</div>
<el-table :data="abnormalList" style="width: 100%" border>
<el-table-column label="开始位置" prop="startPosition" width="80">
<template slot-scope="scope">
<el-input :controls="false" v-model="scope.row.startPosition" placeholder="请输入开始位置" />
</template>
</el-table-column>
<el-table-column label="结束位置" prop="endPosition" width="80">
<template slot-scope="scope">
<el-input :controls="false" v-model="scope.row.endPosition" placeholder="请输入结束位置" />
</template>
</el-table-column>
<el-table-column label="长度" prop="length" width="80">
<template slot-scope="scope">
{{ scope.row.endPosition - scope.row.startPosition }}
</template>
</el-table-column>
<el-table-column label="上下版面" prop="plateSurface">
<template slot-scope="scope">
<muti-select v-model="scope.row.plateSurface" :options="[
{ label: '上板面', value: '上' },
{ label: '下板面', value: '下' }]" type="checkbox">
</muti-select>
<!-- <el-checkbox-group v-model="scope.row.plateSurface">
<el-checkbox key="top" label="上">上板面</el-checkbox>
<el-checkbox key="bottom" label="下">下板面</el-checkbox>
</el-checkbox-group> -->
</template>
</el-table-column>
<el-table-column label="断面位置" prop="position">
<template slot-scope="scope">
<muti-select v-model="scope.row.position" :options="dict.type.coil_abnormal_position" type="checkbox">
</muti-select>
<!-- <el-checkbox-group v-model="scope.row.position">
<el-checkbox v-for="dict in dict.type.coil_abnormal_position" :key="dict.value" :label="dict.value">{{ dict.label }}</el-checkbox>
</el-checkbox-group> -->
</template>
</el-table-column>
<el-table-column label="主缺陷" prop="mainMark" width="60">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.mainMark" :true-label="1" :false-label="0"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="缺陷代码" prop="defectCode">
<template slot-scope="scope">
<el-select v-model="scope.row.defectCode" placeholder="请选择缺陷代码">
<el-option v-for="dict in dict.type.coil_abnormal_code" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="程度" prop="degree">
<template slot-scope="scope">
<el-select v-model="scope.row.degree" placeholder="请选择程度">
<el-option v-for="dict in dict.type.coil_abnormal_degree" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="产线" prop="productionLine">
<template slot-scope="scope">
<el-select v-model="scope.row.productionLine" placeholder="请选择产线">
<el-option v-for="dict in dict.type.sys_lines" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark">
<template slot-scope="scope">
<el-input v-model="scope.row.remark" placeholder="请输入备注" />
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope">
<el-button v-if="!scope.row.abnormalId" type="primary" plain size="mini" :loading="buttonLoading"
@click="handleSave(scope.row)">新增</el-button>
<template v-else>
<el-button type="primary" plain size="mini" :loading="buttonLoading"
@click="handleSave(scope.row)">变更</el-button>
<el-button type="danger" plain size="mini" :loading="buttonLoading"
@click="handleDelete(scope.row)">删除</el-button>
</template>
</template>
</el-table-column>
</el-table>
</div>
<!-- <div class="exception-section">
<h4 class="section-title">新增异常</h4>
<div class="form-container">
<abnormal-form ref="abnormalForm" v-model="exceptionForm" :show-coil-selector="false"></abnormal-form>
@@ -86,12 +155,12 @@
<el-button @click="resetExceptionForm" :loading="buttonLoading">重置表单</el-button>
</div>
</div>
</div>
</div> -->
</div>
</template>
<script>
import { addCoilAbnormal, listCoilAbnormal, delCoilAbnormal } from '@/api/wms/coilAbnormal'
import { addCoilAbnormal, listCoilAbnormal, delCoilAbnormal, updateCoilAbnormal } from '@/api/wms/coilAbnormal'
import { getMaterialCoil } from '@/api/wms/coil'
import AbnormalForm from './AbnormalForm'
@@ -100,7 +169,7 @@ export default {
components: {
AbnormalForm
},
dicts: ['coil_abnormal_code', 'coil_abnormal_degree'],
dicts: ['coil_abnormal_code', 'coil_abnormal_degree', 'coil_abnormal_position', 'sys_lines'],
props: {
coilId: {
type: String,
@@ -123,6 +192,7 @@ export default {
coilInfo: {},
abnormalList: [],
abnormalLoading: false,
coilInfoLoading: false,
buttonLoading: false,
}
},
@@ -143,7 +213,7 @@ export default {
this.buttonLoading = true
addCoilAbnormal({
...this.exceptionForm,
length: this.exceptionForm.endPosition - this.exceptionForm.startPosition
// length: this.exceptionForm.endPosition - this.exceptionForm.startPosition
}).then(response => {
this.$message.success('异常记录添加成功')
this.resetExceptionForm()
@@ -172,21 +242,122 @@ export default {
},
loadAbnormalList() {
if (!this.coilId) {
// 确保至少10个空行
this.abnormalList = this.generateEmptyRows(10)
return
}
this.abnormalLoading = true
listCoilAbnormal({
coilId: this.coilId
}).then(response => {
this.abnormalList = response.rows || []
let rows = response.rows || []
// 确保至少10个条目
if (rows.length < 10) {
const emptyRows = this.generateEmptyRows(10 - rows.length)
rows = [...rows, ...emptyRows]
}
this.abnormalList = rows
}).catch(error => {
console.error('查询异常记录失败:', error)
this.$message.error('查询异常记录失败: ' + (error.message || error))
// 失败时也要确保至少10个空行
this.abnormalList = this.generateEmptyRows(10)
}).finally(() => {
this.abnormalLoading = false
})
},
generateEmptyRows(count) {
const emptyRows = []
for (let i = 0; i < count; i++) {
emptyRows.push({
coilId: this.coilId,
position: '',
plateSurface: '',
startPosition: 0,
endPosition: 0,
length: 0,
mainMark: 0,
productionLine: null,
defectCode: null,
degree: null,
remark: null
})
}
return emptyRows
},
handleSave(row) {
// 验证数据
if (!row.startPosition || !row.endPosition) {
this.$message.error('请填写开始位置和结束位置')
return
}
if (row.startPosition > row.endPosition) {
this.$message.error('开始位置必须小于结束位置')
return
}
if (!row.position || row.position.length === 0) {
this.$message.error('请选择断面位置')
return
}
if (!row.plateSurface || row.plateSurface.length === 0) {
this.$message.error('请选择上下板面')
return
}
if (!row.defectCode) {
this.$message.error('请选择缺陷代码')
return
}
if (!row.degree) {
this.$message.error('请选择程度')
return
}
this.buttonLoading = true
const saveData = {
...row,
// length: row.endPosition - row.startPosition,
coilId: this.coilId
}
if (row.abnormalId) {
// 调用修改接口
updateCoilAbnormal(saveData).then(response => {
this.$message.success('异常记录更新成功')
}).catch(error => {
console.error('异常记录更新失败:', error)
this.$message.error('异常记录更新失败: ' + (error.message || error))
}).finally(() => {
this.buttonLoading = false
})
} else {
// 调用新增接口
addCoilAbnormal(saveData).then(response => {
this.$message.success('异常记录添加成功')
// 重新加载列表以获取新的 abnormalId
this.loadAbnormalList()
}).catch(error => {
console.error('异常记录添加失败:', error)
this.$message.error('异常记录添加失败: ' + (error.message || error))
}).finally(() => {
this.buttonLoading = false
})
}
},
handleDelete(row) {
if (!row.abnormalId) {
// 如果没有 abnormalId，直接从列表中移除
const index = this.abnormalList.indexOf(row)
if (index > -1) {
this.abnormalList.splice(index, 1)
// 确保列表始终有10个条目
if (this.abnormalList.length < 10) {
const emptyRows = this.generateEmptyRows(10 - this.abnormalList.length)
this.abnormalList = [...this.abnormalList, ...emptyRows]
}
this.$message.success('空行已移除')
}
return
}
this.$modal.confirm('确认删除异常记录吗？', '删除确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@@ -204,15 +375,24 @@ export default {
})
})
},
refreshAbnormalList() {
this.loadAbnormalList()
},
refreshCoilInfo() {
this.loadCoilInfo()
},
loadCoilInfo() {
if (!this.coilId) {
return
}
this.coilInfoLoading = true
getMaterialCoil(this.coilId).then(response => {
this.coilInfo = response.data || {}
}).catch(error => {
console.error('查询钢卷信息失败:', error)
this.$message.error('查询钢卷信息失败: ' + (error.message || error))
}).finally(() => {
this.coilInfoLoading = false
})
}
}
@@ -234,13 +414,20 @@ export default {
border: 1px solid #e4e7ed;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid #e4e7ed;
}
.section-title {
margin: 0 0 16px 0;
margin: 0;
font-size: 14px;
font-weight: 600;
color: #303133;
padding-bottom: 8px;
border-bottom: 1px solid #e4e7ed;
}
.exception-section:first-child {