Browse Source

feat(inspection): 优化检验排程界面功能

- 为QC表格添加最大高度限制
- 扩展排程按钮显示条件,支持已排程状态下显示修改按钮
- 根据表格行数动态计算QC表格高度
- 优化界面样式,调整卡片高度、内边距和字体大小
- 实现已排程数据的回显功能,支持修改现有排程信息
master
qiankanghui 3 weeks ago
parent
commit
28b121a4f7
  1. 54
      src/views/modules/inspection/com_inspectionScheduleView.vue

54
src/views/modules/inspection/com_inspectionScheduleView.vue

@ -12,17 +12,18 @@
@current-change="handleQcSelect"
@row-click="handleQcSelect"
style="width: 100%;"
:max-height="qcTableHeight"
class="qc-table">
<el-table-column prop="qcName" label="姓名" width="80" align="center" />
<el-table-column prop="region" label="负责区域" min-width="90" show-overflow-tooltip />
<el-table-column label="操作" width="80" align="center" fixed="right">
<template slot-scope="scope">
<!-- 只有当主表选中了数据且状态为已下达时才显示排程按钮 -->
<!-- 只有当主表选中了数据且状态为已下达或已排程时才显示排程按钮 -->
<el-link
v-if="hasSelectedData && currentStatusDb === 'Audited'"
v-if="hasSelectedData && (currentStatusDb === 'Audited' || currentStatusDb === 'Scheduled')"
type="primary"
style="cursor: pointer;"
@click.stop="openScheduleDialog(null, scope.row)">排程</el-link>
@click.stop="openScheduleDialog(null, scope.row)">{{ currentStatusDb === 'Scheduled' ? '修改' : '排程' }}</el-link>
</template>
</el-table-column>
</el-table>
@ -106,6 +107,7 @@ export default {
selectedQc: null,
scheduleDays: [],
loading: false,
qcTableHeight: 500,
scheduleDialogVisible: false,
scheduleForm: {
qcOperator: '',
@ -144,8 +146,22 @@ export default {
console.log('[排程视图] 组件已挂载')
// QC
this.loadQcList()
// QC
this.$nextTick(() => {
this.calculateQcTableHeight()
})
},
methods: {
// QC
calculateQcTableHeight() {
// 10
// Element UI mini40px
const rowHeight = 40
const headerHeight = 45 //
const rowCount = 10 // 10
this.qcTableHeight = (rowHeight * rowCount) + headerHeight + 2 // 2px
},
// QC
forceRefresh() {
console.log('[排程视图] forceRefresh 被调用')
@ -226,6 +242,14 @@ export default {
planEndDate: '',
remark: ''
}
//
if (this.currentStatusDb === 'Scheduled' && this.currentRow && this.currentRow.planStartDate) {
this.scheduleForm.planStartDate = this.currentRow.planStartDate || ''
this.scheduleForm.planEndDate = this.currentRow.planEndDate || this.currentRow.planStartDate || ''
this.scheduleForm.remark = this.currentRow.remark || ''
}
this.scheduleDialogVisible = true
},
@ -434,17 +458,17 @@ export default {
background: #fff;
display: flex;
flex-direction: column;
height: 220px;
height: 280px;
width: 100%;
.card-header {
padding: 8px 10px;
padding: 10px 12px;
background: #f5f7fa;
border-bottom: 2px solid #dcdfe6;
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
height: 45px;
flex-shrink: 0;
.date-label {
@ -460,11 +484,11 @@ export default {
}
.card-body {
padding: 8px;
padding: 10px;
display: flex;
flex-direction: column;
gap: 6px;
height: calc(100% - 40px);
gap: 8px;
height: calc(100% - 45px);
overflow-y: auto;
&::-webkit-scrollbar {
@ -483,7 +507,7 @@ export default {
}
.task-item {
padding: 8px;
padding: 10px;
background: #f5f7fa;
border: 1px solid #dcdfe6;
border-radius: 3px;
@ -498,20 +522,20 @@ export default {
}
.task-no {
font-size: 12px;
font-size: 13px;
font-weight: bold;
color: #409eff;
margin-bottom: 4px;
margin-bottom: 5px;
}
.task-supplier {
font-size: 11px;
font-size: 12px;
color: #606266;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
line-height: 1.4;
margin-bottom: 3px;
line-height: 1.5;
margin-bottom: 4px;
}
.task-address {

Loading…
Cancel
Save