<template>
|
<div>
|
<el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" :close-on-click-modal="false"
|
@close="handleClose">
|
<div class="approval-dialog">
|
<!-- 内容区域 -->
|
<div class="approval-content">
|
<Card class="approval-content-card">
|
<div class="header-title" style="width: 100%;">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>所属项目组</div>
|
</div>
|
</div>
|
<Table :height="null" :data="tableData" :queryForm="queryForm" :total="0">
|
<template>
|
<el-table-column prop="teamName" label="项目组名称" />
|
<el-table-column prop="personCharge" label="项目负责人" />
|
<el-table-column prop="staffName" label="项目组成员">
|
<template #default="{ row }">
|
<span>{{row.staffs.map(item => item.nickName).join(',')}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建时间" />
|
</template>
|
</Table>
|
|
<el-form ref="form" :model="form" :rules="rules" inline label-position="top"
|
style="margin-top: 38px">
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item prop="itemName" label="检测项名称">
|
<el-input v-model="form.itemName" style="width: 100%;" placeholder="请输入检测项名称"
|
:disabled="true" />
|
</el-form-item>
|
<el-form-item prop="itemCode" label="检测项编号" style="margin-left: 100px;">
|
<el-input v-model="form.itemCode" style="width: 100%;" placeholder="请输入检测项编号"
|
:disabled="true" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<div class="notice">备注内容</div>
|
|
<div prop="remark" style="margin-top: 18px">
|
<el-input v-model="form.remark" type="textarea" :rows="4" style="width: 100%;"
|
placeholder="请输入备注内容" :disabled="true" />
|
</div>
|
|
<div class="notice" style="margin: 18px 0;">报告列表</div>
|
|
<div class="table-setting">
|
<div class="flex a-center">
|
<div class="table-title active">
|
项目检测项、检验包列表
|
</div>
|
</div>
|
</div>
|
|
<Table :data="reportTableData" :total="reportTotal" row-key="id" :height="null">
|
<el-table-column prop="reportContent" label="报告内容">
|
<template #default="{ row }">
|
<span>{{ getReportContentText(row.reportContent) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="developPerson" label="制订人" />
|
<el-table-column prop="developDate" label="制订日期" />
|
<el-table-column prop="auditPersonId" label="审批人" />
|
<el-table-column prop="auditTime" label="审批时间" />
|
<el-table-column prop="status" label="状态">
|
<template #default="{ row }">
|
<el-tag v-if="row.status == 1" type="info" color="#fff">待审核</el-tag>
|
<el-tag v-if="row.status == 2" type="success" color="#fff">已通过</el-tag>
|
<el-tag v-if="row.status == 3" type="danger">已驳回</el-tag>
|
<el-tag v-if="row.status == 4" type="danger">已撤销</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="操作">
|
<template #default="{ row }">
|
<el-button type="text" @click="openDetail(row)">详情</el-button>
|
</template>
|
</el-table-column>
|
</Table>
|
</el-form>
|
</Card>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">关 闭</el-button>
|
</div>
|
</el-dialog>
|
<ApprovalDetail :visible="showApprovalDetail" @close="showApprovalDetail = false" :data="rowData" type="view" />
|
</div>
|
</template>
|
|
<script>
|
import ApprovalDetail from './approval/index.vue'
|
import { getDetail } from '../service'
|
|
export default {
|
name: "ApprovalDialog",
|
components: {
|
ApprovalDetail
|
},
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
id: {
|
type: [String, Number],
|
default: ''
|
}
|
},
|
data() {
|
return {
|
form: {
|
id: "",
|
itemCode: "",
|
itemName: "",
|
remark: "",
|
teamId: ""
|
},
|
rowId:'',
|
rowData:{},
|
tableData: [],
|
reportTableData: [],
|
reportTotal: 0,
|
queryForm: {},
|
showApprovalDetail:false,
|
rules: {
|
itemName: [
|
{ required: true, message: '请输入检测项名称', trigger: 'blur' }
|
],
|
itemCode: [
|
{ required: true, message: '请输入检测项编号', trigger: 'blur' }
|
]
|
}
|
};
|
},
|
computed: {
|
dialogTitle() {
|
return "项目检测项，检验包详情";
|
},
|
},
|
watch: {
|
visible(val) {
|
if (val && this.id) {
|
this.getDetail()
|
}
|
}
|
},
|
methods: {
|
getDetail() {
|
getDetail(this.id).then(res => {
|
if (res) {
|
this.form = res
|
if (res.projectTeamVO) {
|
this.tableData = [{
|
...res.projectTeamVO,
|
}]
|
}
|
if (res.qaTestItemReportList && res.qaTestItemReportList.length > 0) {
|
this.reportTableData = res.qaTestItemReportList
|
}
|
} else {
|
this.$message.error(res.msg || '获取详情失败')
|
}
|
}).catch(err => {
|
console.error('获取详情失败:', err)
|
this.$message.error('获取详情失败')
|
})
|
},
|
handleClose() {
|
this.$emit("close");
|
this.form = {
|
id: "",
|
itemCode: "",
|
itemName: "",
|
remark: "",
|
teamId: ""
|
};
|
this.tableData = [];
|
this.reportTableData = [];
|
},
|
getReportContentText(value) {
|
const contentMap = {
|
'1': '国家标准',
|
'2': '分析方法开发',
|
'3': '方法验证报告',
|
'4': '方法确认',
|
'5': '操作规程',
|
'6': '方法转移记录清单'
|
};
|
return contentMap[value] || value;
|
},
|
openDetail(row) {
|
// this.rowId = row.id;
|
this.rowData={
|
id:row.id,
|
itemId:this.form.id
|
}
|
this.showApprovalDetail = true;
|
}
|
}
|
};
|
</script>
|
|
<style scoped lang="less">
|
.notice {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
}
|
|
.table-setting {
|
display: flex;
|
padding-bottom: 20px;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.flex {
|
display: flex;
|
align-items: center;
|
}
|
|
.table-title {
|
width: 220px;
|
height: 50px;
|
background: #fafafc;
|
border-radius: 8px 8px 0px 0px;
|
border: 1px solid #dcdfe6;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: bold;
|
font-size: 18px;
|
color: #606266;
|
line-height: 27px;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
|
&.active {
|
color: #049c9a;
|
background: #ffffff;
|
border: 1px solid #049c9a;
|
}
|
}
|
|
.table-tit {
|
width: 166px;
|
height: 50px;
|
background: #fafafc;
|
border-radius: 8px 8px 0px 0px;
|
border: 1px solid #dcdfe6;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-family: SourceHanSansCN, SourceHanSansCN;
|
font-weight: bold;
|
font-size: 18px;
|
color: #606266;
|
line-height: 27px;
|
margin-left: 16px;
|
cursor: pointer;
|
transition: all 0.3s ease;
|
|
&.active {
|
color: #049c9a;
|
background: #ffffff;
|
border: 1px solid #049c9a;
|
}
|
}
|
|
::v-deep .el-dialog__header {
|
border-bottom: 1px solid #e4e7ed;
|
}
|
|
.approval-dialog {
|
display: flex;
|
height: 40vh;
|
|
.approval-content {
|
flex: 3;
|
margin-right: 20px;
|
background: #ffffff;
|
box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
|
border-radius: 10px;
|
}
|
|
.approval-flow {
|
padding: 40px 20px;
|
// width: 405px;
|
flex: 2;
|
background: #ffffff;
|
box-shadow: 0px 4px 12px 4px rgba(0, 0, 0, 0.08);
|
border-radius: 10px;
|
|
.flow-title {
|
font-size: 16px;
|
font-weight: bold;
|
margin-bottom: 20px;
|
color: #303133;
|
}
|
|
.flow-content {
|
height: calc(100% - 40px);
|
overflow-y: auto;
|
|
.el-form--inline .el-form-item {
|
margin-right: 83px;
|
}
|
}
|
}
|
}
|
|
.approval-content-card {
|
height: calc(100% - 100px) !important;
|
box-shadow: none !important;
|
}
|
|
.header-title {
|
// display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
margin-bottom: 20px;
|
gap: 13px;
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
margin-top: 38px;
|
|
img {
|
width: 12px;
|
height: 19px;
|
}
|
|
div {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
|
&:before {
|
content: "*";
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
}
|
|
span {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
}
|
}
|
|
.header-title-left :first-child {
|
margin-top: 0;
|
}
|
}
|
|
.header-title:first-child {
|
.header-title-left {
|
margin-top: 0;
|
}
|
}
|
|
.item-title {
|
padding-left: 25px;
|
|
span {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 14px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
margin: 18px 0;
|
|
&:before {
|
content: "*";
|
color: #f56c6c;
|
margin-right: 4px;
|
}
|
}
|
}
|
|
.approval-dialog-approve {
|
padding: 38px 20px;
|
// display: flex;
|
align-content: center;
|
|
.status {
|
margin-right: 40px;
|
max-width: 60%;
|
}
|
|
// align-items: center;
|
.status-title {
|
color: #222222;
|
font-family: "SourceHanSansCN-Medium";
|
line-height: 14px;
|
margin-bottom: 16px;
|
}
|
|
.status-content {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
gap: 16px;
|
background: #ffffff;
|
border-radius: 10px;
|
border: 1px solid rgba(4, 156, 154, 0.5);
|
|
.resolve {
|
border-radius: 10px;
|
flex: 1;
|
font-size: 16px;
|
// padding: 5px 55px;
|
font-weight: 400;
|
color: #333333;
|
cursor: pointer;
|
line-height: 32px;
|
display: flex;
|
align-items: center;
|
justify-content: center
|
}
|
|
.reject {
|
flex: 1;
|
border-radius: 10px;
|
font-size: 16px;
|
line-height: 32px;
|
// padding: 5px 55px;
|
font-weight: 400;
|
color: #333333;
|
cursor: pointer;
|
display: flex;
|
align-items: center;
|
justify-content: center
|
}
|
|
.activeStatus {
|
background: #ebfefd;
|
color: #049c9a;
|
box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25);
|
border-radius: 10px;
|
}
|
}
|
|
.remark-title {
|
color: #222222;
|
font-family: "SourceHanSansCN-Medium";
|
line-height: 14px;
|
margin-bottom: 16px;
|
}
|
}
|
|
.dialog-footer {
|
align-items: center;
|
display: flex;
|
justify-content: center;
|
gap: 20px;
|
|
button {
|
width: 150px;
|
}
|
}
|
</style>
|
