<template>
|
<el-dialog :title="dialogTitle" :visible.sync="visible" width="80%" @open="open" po :close-on-click-modal="false"
|
@close="handleClose">
|
<div class="approval-dialog">
|
<!-- 左侧审批内容 -->
|
<div class="approval-content">
|
<template>
|
<el-form ref="form" :model="form" :rules="rules" inline label-position="top">
|
<div style="display: flex;">
|
<div>
|
<div class="header-title" style="width: 100%;">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>报告编号</div>
|
</div>
|
</div>
|
<el-form-item prop="reportCode">
|
<el-input disabled v-model="form.reportCode" style="width: 100%;"
|
placeholder="请输入报告编号" />
|
</el-form-item>
|
</div>
|
<div style="margin-left: 100px;">
|
<div class="header-title" style="width: 100%;">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>报告名称</div>
|
</div>
|
</div>
|
<el-form-item prop="reportName" >
|
<el-input disabled v-model="form.reportName" style="width: 100%;"
|
placeholder="请输入报告名称" />
|
</el-form-item>
|
</div>
|
</div>
|
|
<div class="table">
|
<el-table :data="assessmentTable" border style="width: 100%" :show-summary="true"
|
:span-method="tableSpanMethod" :summary-method="getTableSummary">
|
<el-table-column prop="category" label="菌种实验员专业能力考核项" width="180"></el-table-column>
|
<el-table-column prop="score" label="该项评分" width="120">
|
<template slot-scope="scope">
|
<el-radio-group v-if="scope.row.category !== '5.实验失败'"
|
v-model="scope.row.selectedScore">
|
<el-radio :label="0">0分</el-radio>
|
<el-radio :label="1">1分</el-radio>
|
<el-radio :label="2">2分</el-radio>
|
</el-radio-group>
|
<el-radio-group v-else v-model="scope.row.selectedScore">
|
<el-radio :label="0">否0分</el-radio>
|
<el-radio :label="-3">是-3分</el-radio>
|
</el-radio-group>
|
</template>
|
</el-table-column>
|
<el-table-column prop="criteria" label="该项评分参考标准"></el-table-column>
|
<el-table-column prop="desc" label="评分规则说明">
|
<template slot-scope="scope">
|
<p> 【0分】 实验操作失误或实验方案设计无效导致实验失败、数据不可用。</p>
|
<p> 【1分】存在操作有误及实验过程出现问题，没有严格按照操作规程运行；如实验准备不充分，取样遗漏等。</p>
|
<p> 【2分】完整按照操作规程及实验室管理制度运行，无任何问题。</p>
|
</template>
|
</el-table-column>
|
<el-table-column prop="rule" label="考评规则">
|
<template slot-scope="scope">
|
菌种工程师以分题内容考核菌种实验员。
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
|
|
</el-form>
|
</template>
|
<!-- <SelectMember ref="selectMember" /> -->
|
|
</div>
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="handleApprove" v-if="!obj.isDetail">提交评定结果</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import ApprovalProcess from '@/components/approvalProcess'
|
import AiEditor from '@/components/AiEditor'
|
// import { getDetail } from '../../service';
|
|
|
export default {
|
name: "ApprovalDialog",
|
components: {
|
ApprovalProcess,
|
AiEditor
|
},
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
type: {
|
type: String,
|
default: "approve", // approve-审批，view-查看
|
},
|
obj: {
|
type: Object,
|
default: () => {
|
return {
|
isDetail: false
|
}
|
},
|
},
|
},
|
data() {
|
return {
|
form: {
|
reportCode: "",
|
reportName: "",
|
reportText: "",
|
teamName: "",
|
createBy: "",
|
createTime: "",
|
status: "",
|
approvalComment: "",
|
approver: "",
|
approveTime: "",
|
processData: [],
|
updateBy: "",
|
auditRemark: "",
|
auditPersonName: "",
|
auditTime: ""
|
},
|
assessmentTable: [
|
{
|
category: '1.该分题的菌种专业知识',
|
selectedScore: 0,
|
criteria: '1.1 能讲生物学基础，掌握各类微生物形态特性、生化特性及鉴定方法。1.2 菌种选育技术，了解掌握自然选育、诱变选育、基因工程育种。',
|
desc: '',
|
rule: ''
|
},
|
{
|
category: '2.操作能力',
|
selectedScore: 0,
|
criteria: '1.菌种分离无菌操作规范 2.菌种培养无菌操作规范 3.菌种保存无菌操作规范 4.菌种鉴定无菌操作规范',
|
desc: '',
|
rule: ''
|
},
|
{
|
category: '3.仪器设备使用',
|
selectedScore: 0,
|
criteria: '能正确使用实验仪器，如移液器、恒温箱等，操作规范。',
|
desc: '',
|
rule: ''
|
},
|
{
|
category: '4.实验数据记录与分析',
|
selectedScore: 0,
|
criteria: '实验数据记录及时、准确、完整，能简单分析数据。',
|
desc: '',
|
rule: ''
|
},
|
{
|
category: '5.实验失败',
|
selectedScore: 0,
|
criteria: '无论何种原因，本次实验失败。',
|
desc: '',
|
rule: ''
|
}
|
],
|
tableData: [],
|
rules: {},
|
status: "2",
|
remark: "",
|
};
|
},
|
computed: {
|
dialogTitle() {
|
return this.type === "approve" ? "菌种工程师操作评定" : "菌种工程师操作评定详情";
|
},
|
totalScore() {
|
return this.assessmentTable.reduce((sum, item) => sum + (item.selectedScore || 0), 0);
|
}
|
},
|
methods: {
|
open() {
|
|
|
},
|
handleClose() {
|
this.$emit("close");
|
this.form.approvalComment = "";
|
},
|
tableSpanMethod({ row, column, rowIndex, columnIndex }) {
|
// 评分规则说明（desc）和考评规则（rule）列合并所有行
|
// desc列索引为3，rule列索引为4（从0开始）
|
if (columnIndex === 3 || columnIndex === 4) {
|
if (rowIndex === 0) {
|
return [this.assessmentTable.length, 1]; // 合并所有行
|
} else {
|
return [0, 0]; // 其他行隐藏
|
}
|
}
|
return [1, 1];
|
},
|
getTableSummary(param) {
|
const { columns } = param;
|
const sums = [];
|
columns.forEach((column, index) => {
|
if (index === 0) {
|
sums[index] = '合计';
|
} else if (index === 1) {
|
sums[index] = this.totalScore + '分';
|
} else {
|
sums[index] = '';
|
}
|
});
|
return sums;
|
},
|
handleApprove() {
|
this.$emit("approve", {
|
...this.form,
|
statuss: this.status,
|
remark: this.remark
|
});
|
},
|
|
handleCurrentChange(page) {
|
this.form.pageNum = page
|
this.getList()
|
},
|
handleSizeChange(size) {
|
this.form.pageSize = size
|
this.getList()
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
::v-deep .el-dialog__header {
|
border-bottom: 1px solid #e4e7ed;
|
}
|
|
.approval-dialog {
|
|
.approval-content {
|
background: #ffffff;
|
border-radius: 10px;
|
}
|
|
.approval-flow {
|
padding: 40px 20px;
|
// width: 405px;
|
flex: 2;
|
background: #ffffff;
|
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 {
|
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 {
|
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>
|
