feat(mine+defect): 新增钢卷异常管理页面及相关功能

1. 个人中心页面新增钢卷异常入口
2. 实现钢卷异常列表页:支持按状态筛选、缺陷代码/程度统计
3. 新增异常新增/编辑弹窗,完善表单校验和字段展示
4. 优化列表项UI展示,新增主缺陷标识和元信息展示
This commit is contained in:
2026-06-05 14:50:47 +08:00
parent ef873f242f
commit c17b60dbe0
2 changed files with 320 additions and 88 deletions

View File

@@ -32,6 +32,20 @@
<text class="form-label-optional">逻辑库区</text>
<klp-warehouse-picker v-model="searchForm.warehouseId" placeholder="请选择逻辑库区" />
</view>
<view class="form-item">
<text class="form-label-optional">钢卷状态</text>
<view class="status-picker">
<view
v-for="s in statusOptions"
:key="s.value"
class="status-option"
:class="{ 'status-active': searchForm.status === s.value }"
@click="searchForm.status = s.value"
>
<text>{{ s.label }}</text>
</view>
</view>
</view>
</view>
<!-- 查询悬浮按钮 -->
@@ -97,30 +111,34 @@
</view>
</view>
<!-- 异常级别统计卡片 -->
<view class="stats-card" v-if="defectList.length > 0">
<view class="stat-item" v-for="stat in defectStats" :key="stat.label">
<text class="stat-num" :style="{ color: stat.color }">{{ stat.count }}</text>
<text class="stat-label">{{ stat.label }}</text>
</view>
</view>
<view v-if="defectList.length === 0" class="empty-list">
<text>该钢卷暂无异常记录</text>
</view>
<view v-for="(item, index) in defectList" :key="item.abnormalId || index" class="defect-card">
<view class="defect-card-top">
<text class="defect-level" :class="'level-' + (item.abnormalLevel || 'C')">{{ item.abnormalLevel || 'C' }}</text>
<view class="defect-card-top-left">
<text class="defect-code-badge">{{ item.defectCode || '-' }}</text>
<text class="defect-degree-badge">{{ item.degree || '-' }}</text>
<text class="defect-main-badge" v-if="item.mainMark == 1">主缺陷</text>
</view>
<view class="defect-actions">
<text class="action-btn edit-btn" @click="editDefect(item)">编辑</text>
<text class="action-btn del-btn" @click="deleteDefect(item)">删除</text>
</view>
</view>
<view class="defect-desc">{{ item.abnormalDesc || '暂无描述' }}</view>
<view class="defect-desc">{{ item.remark || '暂无描述' }}</view>
<view class="defect-meta">
<text class="meta-item" v-if="item.plateSurface">板面: {{ item.plateSurface }}</text>
<text class="meta-item" v-if="item.position">断面: {{ item.position }}</text>
<text class="meta-item" v-if="item.startPosition || item.endPosition">
区间: {{ item.startPosition || '?' }}~{{ item.endPosition || '?' }}
<text class="meta-unit" v-if="item.length"> ( {{ item.length }})</text>
</text>
</view>
<!-- 展示图片 -->
<view class="defect-images" v-if="item.imgUrl">
<image v-for="(url, i) in item.imgUrl.split(',')" :key="i" :src="url" class="defect-img" mode="aspectFill" @click="previewImage(url)"></image>
<view class="defect-images" v-if="item.attachmentFiles">
<image v-for="(url, i) in item.attachmentFiles.split(',')" :key="i" :src="url" class="defect-img" mode="aspectFill" @click="previewImage(url)"></image>
</view>
<view class="defect-time">{{ item.createTime || '' }}</view>
</view>
@@ -151,32 +169,56 @@
<input v-model="defectForm.coilNo" class="form-input form-input-disabled" disabled placeholder="自动关联" />
</view>
<!-- 异常描述 -->
<!-- 缺陷描述 -->
<view class="form-item">
<text class="form-label">异常描述 <text class="required">*</text></text>
<textarea v-model="defectForm.abnormalDesc" placeholder="请输入异常描述" class="form-textarea" />
<text class="form-label">缺陷描述 <text class="required">*</text></text>
<textarea v-model="defectForm.remark" placeholder="请输入缺陷描述" class="form-textarea" />
</view>
<!-- 异常级别 -->
<!-- 上下板面 -->
<view class="form-item">
<text class="form-label">异常级别 <text class="required">*</text></text>
<view class="level-picker">
<view
v-for="level in levelOptions"
:key="level.value"
class="level-option"
:class="{ 'level-active': defectForm.abnormalLevel === level.value }"
:style="{ borderColor: level.value === defectForm.abnormalLevel ? level.color : '#e8e8e8', color: level.value === defectForm.abnormalLevel ? level.color : '#666' }"
@click="defectForm.abnormalLevel = level.value"
>
<text>{{ level.label }}</text>
</view>
<text class="form-label">上下板面</text>
<uni-data-checkbox multiple v-model="defectForm.plateSurface" :localdata="plateSurfaceOptions" />
</view>
<!-- 断面位置 -->
<view class="form-item">
<text class="form-label">断面位置</text>
<uni-data-checkbox multiple v-model="defectForm.position" :localdata="positionOptions" />
<view class="form-tip">异常位置为内圈算起</view>
</view>
<!-- 异常区间 -->
<view class="form-item">
<text class="form-label">异常区间 <text class="required">*</text></text>
<view class="range-row">
<input v-model="defectForm.startPosition" type="number" placeholder="开始位置" class="form-input range-input" @blur="calculateLength" />
<text class="range-separator">~</text>
<input v-model="defectForm.endPosition" type="number" placeholder="结束位置" class="form-input range-input" @blur="calculateLength" />
</view>
</view>
<!-- 图片上传 -->
<!-- 缺陷代码 -->
<view class="form-item">
<text class="form-label">现场照片</text>
<text class="form-label">缺陷代码 <text class="required">*</text></text>
<uni-data-checkbox v-model="defectForm.defectCode" :localdata="defectCodeOptions" />
</view>
<!-- 程度 -->
<view class="form-item">
<text class="form-label">程度 <text class="required">*</text></text>
<uni-data-checkbox v-model="defectForm.degree" :localdata="degreeOptions" />
</view>
<!-- 主缺陷 -->
<view class="form-item">
<text class="form-label">主缺陷</text>
<uni-data-checkbox multiple v-model="mainMarkBind" :localdata="[{text: '是否为主缺陷', value: '1'}]" />
</view>
<!-- 缺陷图片仅主缺陷时显示 -->
<view class="form-item" v-if="defectForm.mainMark === 1">
<text class="form-label">缺陷图片</text>
<view class="upload-area">
<!-- 已上传图片预览 -->
<view v-for="(url, i) in uploadedImages" :key="i" class="upload-preview">
@@ -190,12 +232,6 @@
</view>
</view>
</view>
<!-- 备注 -->
<view class="form-item">
<text class="form-label-optional">备注</text>
<input v-model="defectForm.remark" placeholder="选填备注" class="form-input" />
</view>
</scroll-view>
<view class="popup-footer">
@@ -225,9 +261,19 @@ export default {
itemName: '',
itemSpecification: '',
itemMaterial: '',
warehouseId: ''
warehouseId: '',
status: '',
netWeightStart: '',
netWeightEnd: ''
},
// 状态选项
statusOptions: [
{ label: '全部', value: '' },
{ label: '在库', value: '0' },
{ label: '已出库', value: '1' }
],
// 分页
pager: {
pageNum: 1,
@@ -242,22 +288,31 @@ export default {
// 缺陷列表
defectList: [],
// 缺陷级别选项
levelOptions: [
{ value: 'A', label: 'A级(严重)', color: '#ff4d4f' },
{ value: 'B', label: 'B级(较重)', color: '#fa8c16' },
{ value: 'C', label: 'C级(一般)', color: '#fadb14' },
{ value: 'D', label: 'D级(轻微)', color: '#52c41a' }
// 缺陷代码选项(从字典加载)
defectCodeOptions: [],
// 断面位置选项(从字典加载)
positionOptions: [],
// 程度选项(从字典加载)
degreeOptions: [],
// 上下板面选项
plateSurfaceOptions: [
{ text: '上板面', value: '上' },
{ text: '下板面', value: '下' }
],
// 缺陷表单
defectForm: {
coilId: '',
coilNo: '',
abnormalDesc: '',
abnormalLevel: 'C',
imgUrl: '',
remark: ''
remark: '',
plateSurface: [],
position: [],
startPosition: undefined,
endPosition: undefined,
defectCode: '',
degree: '',
mainMark: 0,
attachmentFiles: ''
},
formMode: 'add', // add | edit
editingId: null,
@@ -275,19 +330,31 @@ export default {
if (this.total === 0) return 0
return Math.ceil(this.total / this.pager.pageSize)
},
// 异常统计
// 缺陷代码统计
defectStats() {
const stats = {}
this.levelOptions.forEach(lo => {
stats[lo.value] = { label: lo.label, color: lo.color, count: 0 }
this.defectCodeOptions.forEach(dco => {
stats[dco.value] = { label: dco.label, count: 0 }
})
this.defectList.forEach(d => {
const key = d.abnormalLevel || 'C'
const key = d.defectCode || ''
if (stats[key]) stats[key].count++
})
return Object.values(stats)
},
/** 主缺陷双向绑定uni-data-checkbox multiple 模式需要数组) */
mainMarkBind: {
get() {
return this.defectForm.mainMark === 1 ? ['1'] : []
},
set(val) {
this.defectForm.mainMark = val.length > 0 ? 1 : 0
}
}
},
created() {
this.loadDicts()
},
methods: {
// ========== 钢卷搜索 ==========
async searchCoil() {
@@ -367,10 +434,15 @@ export default {
this.defectForm = {
coilId: this.selectedCoil.coilId || '',
coilNo: this.selectedCoil.currentCoilNo || '',
abnormalDesc: '',
abnormalLevel: 'C',
imgUrl: '',
remark: ''
remark: '',
plateSurface: [],
position: [],
startPosition: undefined,
endPosition: undefined,
defectCode: '',
degree: '',
mainMark: 0,
attachmentFiles: ''
}
this.uploadedImages = []
this.$refs.defectPopup.open()
@@ -382,12 +454,17 @@ export default {
this.defectForm = {
coilId: item.coilId || this.selectedCoil.coilId,
coilNo: this.selectedCoil.currentCoilNo || '',
abnormalDesc: item.abnormalDesc || '',
abnormalLevel: item.abnormalLevel || 'C',
imgUrl: item.imgUrl || '',
remark: item.remark || ''
remark: item.remark || '',
plateSurface: item.plateSurface ? item.plateSurface.split(',') : [],
position: item.position ? item.position.split(',') : [],
startPosition: item.startPosition,
endPosition: item.endPosition,
defectCode: item.defectCode || '',
degree: item.degree || '',
mainMark: item.mainMark !== undefined ? item.mainMark : 0,
attachmentFiles: item.attachmentFiles || ''
}
this.uploadedImages = item.imgUrl ? item.imgUrl.split(',').filter(u => u.trim()) : []
this.uploadedImages = item.attachmentFiles ? item.attachmentFiles.split(',').filter(u => u.trim()) : []
this.$refs.defectPopup.open()
},
@@ -470,9 +547,56 @@ export default {
},
// ========== 提交缺陷表单 ==========
/** 计算缺陷长度 */
calculateLength() {
// 可在 submit 中自动计算
},
/** 加载字典数据 */
loadDicts() {
this.getDicts('coil_abnormal_code').then(res => {
this.defectCodeOptions = (res.data || []).map(item => ({
text: item.dictLabel,
value: item.dictValue
}))
})
this.getDicts('coil_abnormal_position').then(res => {
this.positionOptions = (res.data || []).map(item => ({
text: item.dictLabel,
value: item.dictValue
}))
})
this.getDicts('coil_abnormal_degree').then(res => {
this.degreeOptions = (res.data || []).map(item => ({
text: item.dictLabel,
value: item.dictValue
}))
})
},
async submitDefectForm() {
if (!this.defectForm.abnormalDesc) {
uni.showToast({ title: '请输入异常描述', icon: 'none' })
if (!this.defectForm.remark) {
uni.showToast({ title: '请输入缺陷描述', icon: 'none' })
return
}
if (!this.defectForm.defectCode) {
uni.showToast({ title: '请选择缺陷代码', icon: 'none' })
return
}
if (!this.defectForm.degree) {
uni.showToast({ title: '请选择程度', icon: 'none' })
return
}
if (this.defectForm.startPosition === undefined || this.defectForm.startPosition === '') {
uni.showToast({ title: '请输入开始位置', icon: 'none' })
return
}
if (this.defectForm.endPosition === undefined || this.defectForm.endPosition === '') {
uni.showToast({ title: '请输入结束位置', icon: 'none' })
return
}
if (parseInt(this.defectForm.startPosition) > parseInt(this.defectForm.endPosition)) {
uni.showToast({ title: '开始位置必须小于结束位置', icon: 'none' })
return
}
@@ -480,10 +604,16 @@ export default {
try {
const formData = {
coilId: this.defectForm.coilId,
abnormalDesc: this.defectForm.abnormalDesc,
abnormalLevel: this.defectForm.abnormalLevel,
imgUrl: this.uploadedImages.join(','),
remark: this.defectForm.remark
remark: this.defectForm.remark,
plateSurface: this.defectForm.plateSurface.join(','),
position: this.defectForm.position.join(','),
startPosition: this.defectForm.startPosition,
endPosition: this.defectForm.endPosition,
length: this.defectForm.endPosition - this.defectForm.startPosition,
defectCode: this.defectForm.defectCode,
degree: this.defectForm.degree,
mainMark: this.defectForm.mainMark,
attachmentFiles: this.uploadedImages.join(',')
}
if (this.formMode === 'add') {
@@ -612,13 +742,33 @@ export default {
}
}
// ========== 级别选择器 ==========
.level-picker {
// ========== uni-data-checkbox 适配 ==========
.uni-data-checklist {
width: 100%;
}
// ========== 范围输入行 ==========
.range-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16rpx;
.level-option {
.range-input {
flex: 1;
}
.range-separator {
font-size: 28rpx;
color: #999;
}
}
// ========== 状态选择器 ==========
.status-picker {
display: flex;
gap: 16rpx;
.status-option {
padding: 14rpx 28rpx;
border: 2rpx solid #e8e8e8;
border-radius: 12rpx;
@@ -626,9 +776,77 @@ export default {
color: #666;
background: #f8f9fa;
&.level-active {
background: #fff;
font-weight: 600;
&.status-active {
background: #e6f7ff;
border-color: #1890ff;
color: #1890ff;
font-weight: 500;
}
}
}
// ========== 提示文字 ==========
.form-tip {
font-size: 24rpx;
color: #999;
margin-top: 8rpx;
}
// ========== 缺陷代码标识 ==========
.defect-code-badge {
display: inline-block;
padding: 4rpx 16rpx;
background: #e6f7ff;
border-radius: 8rpx;
font-size: 24rpx;
color: #1890ff;
font-weight: 500;
}
.defect-degree-badge {
display: inline-block;
padding: 4rpx 16rpx;
background: #f6ffed;
border-radius: 8rpx;
font-size: 24rpx;
color: #52c41a;
font-weight: 500;
margin-left: 8rpx;
}
.defect-main-badge {
display: inline-block;
padding: 4rpx 16rpx;
background: #fff7e6;
border-radius: 8rpx;
font-size: 22rpx;
color: #fa8c16;
font-weight: 500;
margin-left: 8rpx;
}
.defect-card-top-left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6rpx;
}
.defect-meta {
display: flex;
flex-wrap: wrap;
gap: 12rpx;
margin-bottom: 12rpx;
.meta-item {
font-size: 24rpx;
color: #666;
background: #f8f9fa;
padding: 4rpx 14rpx;
border-radius: 6rpx;
.meta-unit {
color: #999;
}
}
}
@@ -639,16 +857,16 @@ export default {
right: 30rpx;
bottom: 60rpx;
z-index: 9999;
width: 120rpx;
height: 120rpx;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 28rpx;
font-weight: 500;
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.15);
font-size: 32rpx;
font-weight: 600;
box-shadow: 0 8rpx 28rpx rgba(0, 0, 0, 0.2);
&:active {
transform: scale(0.95);
@@ -659,12 +877,15 @@ export default {
.search-btn { background: linear-gradient(135deg, #007aff 0%, #0051d5 100%); }
.back-btn { background: linear-gradient(135deg, #666 0%, #333 100%); }
.add-btn { background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%); }
.add-btn {
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
font-size: 60rpx;
}
.back-small-btn {
right: 180rpx;
width: 90rpx;
height: 90rpx;
font-size: 36rpx;
right: 210rpx;
width: 100rpx;
height: 100rpx;
font-size: 48rpx;
background: rgba(0,0,0,0.5);
}
@@ -841,12 +1062,13 @@ export default {
.defect-actions {
display: flex;
gap: 16rpx;
gap: 20rpx;
.action-btn {
font-size: 24rpx;
padding: 4rpx 16rpx;
border-radius: 8rpx;
font-size: 28rpx;
padding: 12rpx 28rpx;
border-radius: 10rpx;
font-weight: 500;
}
.edit-btn { background: #e6f7ff; color: #1890ff; }
@@ -942,7 +1164,7 @@ export default {
.popup-wrap {
background: #fff;
border-radius: 24rpx 24rpx 0 0;
max-height: 80vh;
max-height: 92vh;
display: flex;
flex-direction: column;
}

View File

@@ -40,6 +40,13 @@
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleToAb">
<view class="menu-item-box">
<view class="iconfont icon-setting menu-icon"></view>
<view>钢卷异常</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleLogout">
<view class="menu-item-box">
<view class="iconfont icon-setting menu-icon"></view>
@@ -74,6 +81,9 @@
handleToEqp() {
this.$tab.navigateTo('/pages/eqp/eqp')
},
handleToAb() {
this.$tab.navigateTo('/pages/defect/coil-defect')
},
handleLogout() {
this.$modal.confirm('确定注销并退出系统吗?').then(() => {
this.$store.dispatch('LogOut').then(() => {}).finally(() => {