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

feat(qc): 新增理化检验相关功能及优化质检流程

Browse Source 
1. 新增化学成分明细和物理性能明细的API与管理页面
2. 在钢卷详情页添加检验信息展示模块
3. 优化质保书预览的签章显示逻辑，仅审批通过后显示
4. 重构质保书列表为表格形式，新增审批流程功能
5. 优化质保书选择弹窗的钢卷查询条件
6. 新增批量新增质保书明细时自动填充理化数据功能
This commit is contained in:
砂糖
2026-05-18 17:54:12 +08:00
parent a705c6a4a9
commit 1bd55b12ec
8 changed files with 1177 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

370
klp-ui/src/views/mes/qc/certificate/book.vue
View File

@@ -49,6 +49,14 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="审批状态" prop="approveStatus">
<el-select v-model="queryParams.approveStatus" placeholder="请选择审批状态" clearable>
<el-option label="待审批" value="PENDING" />
<el-option label="审批中" value="APPROVING" />
<el-option label="已通过" value="PASSED" />
<el-option label="已驳回" value="REJECTED" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -88,65 +96,58 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<div v-loading="loading" class="certificate-list">
<div
v-for="item in certificateList"
:key="item.certificateId"
class="certificate-card"
:class="{ 'certificate-card-selected': selectedIds.includes(item.certificateId) }"
@click="handleCardClick(item)"
>
<div class="card-top-bar"></div>
<div class="card-title-row">
<span class="card-doc-type">质量保证书</span>
<span class="card-sep">|</span>
<span class="card-env">MES-QC-{{ item.certificateNo || '' }}</span>
</div>
<div class="card-cert-no">
<span class="card-cert-no-label">No.</span>
<span class="card-cert-no-value">{{ item.certificateNo }}</span>
</div>
<div class="card-info-grid">
<div class="card-info-item">
<span class="card-info-label">合同号</span>
<span class="card-info-value">{{ item.contractNo || '-' }}</span>
<el-table
v-loading="loading"
:data="certificateList"
@selection-change="handleSelectionChange"
border
class="certificate-table"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="证明书号" align="center" prop="certificateNo">
<template #default="scope">
<span class="cert-no">{{ scope.row.certificateNo || '-' }}</span>
</template>
</el-table-column>
<el-table-column label="合同号" align="center" prop="contractNo" />
<el-table-column label="产品名称" align="center" prop="productName" />
<el-table-column label="执行标准" align="center" prop="standard" />
<el-table-column label="收货单位" align="center" prop="consignee" />
<el-table-column label="生产厂家" align="center" prop="manufacturer" />
<el-table-column label="签发日期" align="center" prop="issueDate">
<template #default="scope">
{{ parseTime(scope.row.issueDate, '{y}-{m}-{d}') }}
</template>
</el-table-column>
<el-table-column label="签发状态" align="center" prop="approveStatus" width="180">
<template #default="scope">
<el-tag :type="getStatusType(scope.row.approveStatus)" size="small">
{{ getStatusText(scope.row.approveStatus) }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="审批信息" align="center" width="220">
<template #default="scope">
<div v-if="(scope.row.approveStatus || 'PENDING') === 'PASSED' || (scope.row.approveStatus || 'PENDING') === 'REJECTED'">
<div>审批人: {{ scope.row.approveBy || '-' }}</div>
<div>审批时间: {{ parseTime(scope.row.approveTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
</div>
<div class="card-info-item">
<span class="card-info-label">产品名称</span>
<span class="card-info-value">{{ item.productName || '-' }}</span>
</div>
<div class="card-info-item">
<span class="card-info-label">执行标准</span>
<span class="card-info-value">{{ item.standard || '-' }}</span>
</div>
<div class="card-info-item">
<span class="card-info-label">收货单位</span>
<span class="card-info-value">{{ item.consignee || '-' }}</span>
</div>
<div class="card-info-item">
<span class="card-info-label">生产厂家</span>
<span class="card-info-value">{{ item.manufacturer || '-' }}</span>
</div>
<div class="card-info-item">
<span class="card-info-label">签发日期</span>
<span class="card-info-value">{{ parseTime(item.issueDate, '{y}-{m}-{d}') }}</span>
</div>
</div>
<div class="card-footer">
<div class="card-stamp-placeholder">质检专用</div>
<div class="card-actions">
<el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(item)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(item)">删除</el-button>
<el-button size="mini" type="text" icon="el-icon-view" @click.stop="handlePreview(item)">预览</el-button>
<el-button size="mini" type="text" icon="el-icon-printer" @click.stop="handlePrint(item)">打印</el-button>
</div>
</div>
</div>
</div>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="220">
<template #default="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" :disabled="(scope.row.approveStatus || 'PENDING') === 'APPROVING' || (scope.row.approveStatus || 'PENDING') === 'PASSED'">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
<el-button size="mini" type="text" icon="el-icon-view" @click="handlePreview(scope.row)">预览</el-button>
<el-button size="mini" type="text" icon="el-icon-printer" @click="handlePrint(scope.row)">打印</el-button>
<el-button v-if="(scope.row.approveStatus || 'PENDING') === 'PENDING' || (scope.row.approveStatus || 'PENDING') === 'REJECTED'" size="mini" type="text" icon="el-icon-upload" @click="handleSubmit(scope.row)">提交审批</el-button>
<el-button v-hasPermi="['qc:certificate:approve']" v-if="(scope.row.approveStatus || 'PENDING') === 'APPROVING'" size="mini" type="text" icon="el-icon-check" @click="handleApprove(scope.row, 'PASSED')">通过</el-button>
<el-button v-hasPermi="['qc:certificate:approve']" v-if="(scope.row.approveStatus || 'PENDING') === 'APPROVING'" size="mini" type="text" icon="el-icon-close" @click="handleApprove(scope.row, 'REJECTED')">驳回</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
@@ -269,6 +270,18 @@ export default {
},
form: {},
rules: {
},
statusMap: {
'PENDING': '待提交',
'APPROVING': '审批中',
'PASSED': '已通过',
'REJECTED': '已驳回'
},
statusTypeMap: {
'PENDING': 'info',
'APPROVING': 'warning',
'PASSED': 'success',
'REJECTED': 'danger'
}
};
},
@@ -276,6 +289,17 @@ export default {
this.getList();
},
methods: {
getStatusText(status) {
const actualStatus = status || 'PENDING';
return this.statusMap[actualStatus] || '未知';
},
getStatusType(status) {
const actualStatus = status || 'PENDING';
return this.statusTypeMap[actualStatus] || 'info';
},
getActualStatus(status) {
return status || 'PENDING';
},
/** 查询质量证明书主列表 */
getList() {
this.loading = true;
@@ -321,29 +345,8 @@ export default {
this.resetForm("queryForm");
this.handleQuery();
},
handleCardClick(item) {
const index = this.selectedIds.indexOf(item.certificateId);
if (index > -1) {
this.selectedIds.splice(index, 1);
} else {
this.selectedIds.push(item.certificateId);
}
this.updateSelectionStatus();
},
handleCheckboxChange(certificateId, event) {
if (event.target.checked) {
if (!this.selectedIds.includes(certificateId)) {
this.selectedIds.push(certificateId);
}
} else {
const index = this.selectedIds.indexOf(certificateId);
if (index > -1) {
this.selectedIds.splice(index, 1);
}
}
this.updateSelectionStatus();
},
updateSelectionStatus() {
handleSelectionChange(val) {
this.selectedIds = val.map(item => item.certificateId);
this.ids = [...this.selectedIds];
this.single = this.selectedIds.length !== 1;
this.multiple = this.selectedIds.length === 0;
@@ -380,7 +383,8 @@ export default {
this.buttonLoading = false;
});
} else {
addCertificate(this.form).then(response => {
const newForm = { ...this.form, approveStatus: 'PENDING' };
addCertificate(newForm).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
@@ -391,6 +395,43 @@ export default {
}
});
},
/** 提交审批 */
handleSubmit(row) {
this.$modal.confirm('确认提交审批？').then(() => {
this.loading = true;
const params = {
certificateId: row.certificateId,
approveStatus: 'APPROVING'
};
updateCertificate(params).then(response => {
this.$modal.msgSuccess("提交成功");
this.getList();
}).catch(() => {
}).finally(() => {
this.loading = false;
});
});
},
/** 审批操作 */
handleApprove(row, status) {
const statusText = status === 'PASSED' ? '通过' : '驳回';
this.$modal.confirm(`确认${statusText}该审批？`).then(() => {
this.loading = true;
const params = {
certificateId: row.certificateId,
approveStatus: status,
approveBy: this.$store.getters.name,
approveTime: this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
};
updateCertificate(params).then(response => {
this.$modal.msgSuccess(`${statusText}成功`);
this.getList();
}).catch(() => {
}).finally(() => {
this.loading = false;
});
});
},
/** 删除按钮操作 */
handleDelete(row) {
const certificateIds = row.certificateId || this.ids;
@@ -482,176 +523,19 @@ export default {
</script>
<style scoped>
.certificate-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 18px;
padding: 10px;
}
.preview-content-wrapper {
display: flex;
justify-content: center;
padding: 20px;
}
.certificate-card {
background: #fcf9f2;
border: 1px solid #d6cfc0;
border-radius: 2px;
padding: 18px 20px 14px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
.certificate-table {
width: 100%;
}
.card-top-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #3a3a3a 0%, #7a7a7a 50%, #3a3a3a 100%);
}
.certificate-card:hover {
border-color: #b8ad98;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}
.certificate-card-selected {
border-color: #7a6f5e;
border-width: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
}
.card-checkbox {
position: absolute;
top: 14px;
right: 14px;
z-index: 1;
}
.card-title-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.card-doc-type {
font-size: 15px;
font-weight: 700;
color: #2a2a2a;
letter-spacing: 2px;
font-family: "SimSun", "Songti SC", "Noto Serif SC", serif;
}
.card-sep {
color: #c0b8a8;
font-size: 14px;
font-weight: 200;
}
.card-env {
font-size: 10px;
color: #9a9080;
letter-spacing: 0.5px;
.cert-no {
font-family: "Courier New", monospace;
}
.card-cert-no {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 14px;
padding-bottom: 12px;
border-bottom: 1px solid #ddd6c8;
}
.card-cert-no-label {
font-size: 11px;
color: #8a8070;
font-style: italic;
font-family: "Times New Roman", serif;
}
.card-cert-no-value {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
letter-spacing: 1px;
font-family: "Courier New", "Times New Roman", monospace;
}
.card-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 16px;
}
.card-info-item {
display: flex;
align-items: baseline;
padding: 5px 0;
border-bottom: 1px dotted #e6dfd0;
}
.card-info-item:nth-last-child(-n+2) {
border-bottom: none;
}
.card-info-label {
font-size: 11px;
color: #8a8270;
min-width: 58px;
flex-shrink: 0;
}
.card-info-value {
font-size: 13px;
color: #222;
color: #1f79b9;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid #ddd6c8;
}
.card-stamp-placeholder {
width: 44px;
height: 44px;
border: 1.5px solid #9a8a7a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #9a8a7a;
font-size: 9px;
font-weight: bold;
text-align: center;
line-height: 1.2;
font-family: "SimSun", serif;
}
.card-actions {
display: flex;
gap: 6px;
}
.card-actions .el-button {
padding: 3px 6px;
font-size: 12px;
}
</style>