<template>
|
<div>
|
<el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
|
:title="operationType === 'edit' ? '编辑' : operationType === 'view' ? '详情' : '新增'"
|
v-model="formDia"
|
width="90%" @close="closeDia">
|
<div v-if="operationType === 'edit'" style="text-align: right">
|
<el-button :disabled="form.confirmDate" size="small" type="primary" @click="validation">验证确认</el-button>
|
</div>
|
<fieldset :disabled="operationType === 'view'" class="view-fieldset">
|
<table border="1" cellspacing="10" class="tables">
|
<tr>
|
<td>
|
<p>标准方法</p>
|
</td>
|
<td>
|
<p>验证原因</p>
|
</td>
|
<td>
|
<p>主要技术变化</p>
|
</td>
|
<td>
|
<p>涉及方面</p>
|
</td>
|
<td>
|
<p>标准要求</p>
|
</td>
|
<td>
|
<p>准备情况</p>
|
</td>
|
<td>
|
<p>是否满足</p>
|
</td>
|
<td>
|
<p>备注</p>
|
</td>
|
</tr>
|
<tr>
|
<td rowspan="9">
|
<el-input v-model="form.methodName" :rows="6"
|
placeholder="请输入内容"
|
size="small"
|
type="textarea">
|
</el-input>
|
</td>
|
<td rowspan="9">
|
<el-input v-model="form.verifyReason" :rows="6"
|
placeholder="请输入内容"
|
size="small"
|
type="textarea">
|
</el-input>
|
</td>
|
<td rowspan="9">
|
<el-input v-model="form.technologyChange" :rows="6"
|
placeholder="请输入内容"
|
size="small"
|
type="textarea">
|
</el-input>
|
</td>
|
</tr>
|
<tr>
|
<td>人：</td>
|
<td>
|
<el-input v-model="form.personRequirements" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-input v-model="form.personReadiness" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-radio-group v-model="form.personIsSatisfied">
|
<el-radio :value="0">否</el-radio>
|
<el-radio :value="1">是</el-radio>
|
</el-radio-group>
|
</td>
|
<td>
|
<el-link type="primary" @click="viewWorkPermit">查看上岗证</el-link>
|
</td>
|
</tr>
|
<tr>
|
<td>机：</td>
|
<td>
|
<el-input v-model="form.machineRequirements" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-input v-model="form.machineReadiness" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-radio-group v-model="form.machineIsSatisfied">
|
<el-radio :value="0">否</el-radio>
|
<el-radio :value="1">是</el-radio>
|
</el-radio-group>
|
</td>
|
<td>
|
<el-link type="primary" @click="viewDevice">查看设备</el-link>
|
</td>
|
</tr>
|
<tr>
|
<td>料：</td>
|
<td>
|
<el-input v-model="form.materialRequirements" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-input v-model="form.materialReadiness" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-radio-group v-model="form.materialIsSatisfied">
|
<el-radio :value="0">否</el-radio>
|
<el-radio :value="1">是</el-radio>
|
</el-radio-group>
|
</td>
|
<td>
|
<el-input v-model="form.materialRemark" size="small"></el-input>
|
</td>
|
</tr>
|
<tr>
|
<td>法：</td>
|
<td>
|
<el-input v-model="form.methodRequirements" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-input v-model="form.methodReadiness" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-radio-group v-model="form.methodIsSatisfied">
|
<el-radio :value="0">否</el-radio>
|
<el-radio :value="1">是</el-radio>
|
</el-radio-group>
|
</td>
|
<td>
|
<el-link type="primary" @click="viewTestRecord">查看检测记录</el-link>
|
</td>
|
</tr>
|
<tr>
|
<td>环：</td>
|
<td>
|
<el-input v-model="form.environmentRequirements" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-input v-model="form.environmentReadiness" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-radio-group v-model="form.environmentIsSatisfied">
|
<el-radio :value="0">否</el-radio>
|
<el-radio :value="1">是</el-radio>
|
</el-radio-group>
|
</td>
|
<td>
|
<el-input v-model="form.traceabilityRemark" size="small"></el-input>
|
</td>
|
</tr>
|
<tr>
|
<td>测量溯源性：</td>
|
<td>
|
<el-input v-model="form.traceabilityRequirements" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-input v-model="form.traceabilityReadiness" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-radio-group v-model="form.traceabilityIsSatisfied">
|
<el-radio :value="0">否</el-radio>
|
<el-radio :value="1">是</el-radio>
|
</el-radio-group>
|
</td>
|
<td>
|
<el-link type="primary" @click="viewCalibrationsFileDia">查看校准证书</el-link>
|
</td>
|
</tr>
|
<tr>
|
<td>样品管理需求：</td>
|
<td>
|
<el-input v-model="form.managementRequirements" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-input v-model="form.managementReadiness" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-radio-group v-model="form.managementIsSatisfied">
|
<el-radio :value="0">否</el-radio>
|
<el-radio :value="1">是</el-radio>
|
</el-radio-group>
|
</td>
|
<td>
|
<el-input v-model="form.managementRemark" size="small"></el-input>
|
</td>
|
</tr>
|
<tr>
|
<td>其他：</td>
|
<td>
|
<el-input v-model="form.otherRequirements" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-input v-model="form.otherReadiness" size="small" type="textarea"></el-input>
|
</td>
|
<td>
|
<el-radio-group v-model="form.otherIsSatisfied">
|
<el-radio :value="0">否</el-radio>
|
<el-radio :value="1">是</el-radio>
|
</el-radio-group>
|
</td>
|
<td>
|
<el-input v-model="form.otherRemark" size="small"></el-input>
|
</td>
|
</tr>
|
<tr>
|
<td>数据处理</td>
|
<td colspan="7">
|
<el-input v-model="form.dataProcessing" :rows="2" placeholder="请输入内容" size="small" type="textarea"></el-input>
|
</td>
|
</tr>
|
<tr>
|
<td>质量控制方法</td>
|
<td colspan="7">
|
<el-input v-model="form.qualityControlMethod" :rows="2" placeholder="请输入内容" size="small" type="textarea"></el-input>
|
</td>
|
</tr>
|
<tr>
|
<td>方法结果验证</td>
|
<td colspan="7">
|
<el-input v-model="form.methodResultVerification" :rows="2" placeholder="请输入内容" size="small" type="textarea"></el-input>
|
</td>
|
</tr>
|
<tr>
|
<td>验证结论</td>
|
<td colspan="7">
|
<el-input v-model="form.verificationConclusion" :rows="2" placeholder="请输入内容" size="small" type="textarea"></el-input>
|
</td>
|
</tr>
|
<tr>
|
<td>评审意见</td>
|
<td colspan="7">
|
<div class="opinion-box">
|
<div class="opinion-checks">
|
<el-checkbox :model-value="form.reviewResult === '同意使用'"
|
@change="toggleReview('同意使用', $event)">同意使用</el-checkbox>
|
<el-checkbox :model-value="form.reviewResult === '不能使用'"
|
@change="toggleReview('不能使用', $event)">不能使用</el-checkbox>
|
<el-checkbox :model-value="form.reviewResult === '限制使用'"
|
@change="toggleReview('限制使用', $event)">限制使用</el-checkbox>
|
</div>
|
<div class="opinion-sign">
|
<span>评审人员：</span>
|
<el-input v-model="form.reviewPerson" placeholder="请输入" size="small" style="width: 160px"></el-input>
|
<el-date-picker v-model="form.reviewDate" format="YYYY年MM月DD日" placeholder="选择日期" size="small"
|
type="date" value-format="YYYY-MM-DD" style="width: 170px"></el-date-picker>
|
</div>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td>审批意见</td>
|
<td colspan="7">
|
<div class="opinion-box">
|
<div class="opinion-checks">
|
<el-checkbox :model-value="form.approvalResult === '同意使用'"
|
@change="toggleApproval('同意使用', $event)">同意使用</el-checkbox>
|
<el-checkbox :model-value="form.approvalResult === '不能使用'"
|
@change="toggleApproval('不能使用', $event)">不能使用</el-checkbox>
|
<el-checkbox :model-value="form.approvalResult === '限制使用'"
|
@change="toggleApproval('限制使用', $event)">限制使用</el-checkbox>
|
</div>
|
<div class="opinion-sign">
|
<span>技术负责人：</span>
|
<el-input v-model="form.approvalPerson" placeholder="请输入" size="small" style="width: 160px"></el-input>
|
<el-date-picker v-model="form.approvalDate" format="YYYY年MM月DD日" placeholder="选择日期" size="small"
|
type="date" value-format="YYYY-MM-DD" style="width: 170px"></el-date-picker>
|
</div>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td colspan="3">
|
<p>是否引用此标准开展检测:</p>
|
</td>
|
<td colspan="3">可以引用此标准开展检测</td>
|
<td>
|
<p>确认时间:</p>
|
</td>
|
<td>{{form.confirmDate}}</td>
|
</tr>
|
<tr>
|
<td colspan="3">
|
<p>参加确认人签名:</p>
|
</td>
|
<td colspan="5">
|
<el-select v-model="form.confirmUser" :disabled="operationType === 'view'" multiple placeholder="请选择" size="small" style="width: 100%" :multiple-limit="5">
|
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</td>
|
</tr>
|
</table>
|
</fieldset>
|
<template #footer><span class="dialog-footer">
|
<el-button @click="closeDia">取 消</el-button>
|
<el-button v-if="operationType !== 'view'" :loading="editLoad" type="primary" @click="handleEdit">提 交</el-button>
|
</span></template>
|
</el-dialog>
|
<ViewDeviceDialog v-if="viewDeviceDialog" ref="viewDeviceDialog" @closDeviceDia="closDeviceDia" @handleDeviceInfo="handleDeviceInfo"></ViewDeviceDialog>
|
<ViewTestRecord v-if="viewTestRecordDialog" ref="viewTestRecordDialog"></ViewTestRecord>
|
<ViewWorkPermitDia v-if="viewWorkPermitDia" ref="viewWorkPermitDia"></ViewWorkPermitDia>
|
<calibrations-file-dia v-if="calibrationsFileDia" ref="calibrationsFileDia"></calibrations-file-dia>
|
</div>
|
</template>
|
|
<script>
|
import { dateFormat } from '@/utils/date'
|
import ViewDeviceDialog from './ViewDeviceDialog.vue';
|
import ViewTestRecord from './ViewTestRecord.vue';
|
import ViewWorkPermitDia from './viewWorkPermitDia.vue';
|
import CalibrationsFileDia from './calibrationsFileDia.vue';
|
import {
|
addMethodVerify,
|
getMethodVerifyOne,
|
methodVerifyAffirm,
|
updateMethodVerify
|
} from '@/api/cnas/process/method/methodVerification'
|
import { selectUserCondition } from '@/api/cnas/process/method/methodVerification'
|
export default {
|
name: 'formDIa',
|
// import 引入的组件需要注入到对象中才能使用
|
components: { CalibrationsFileDia, ViewWorkPermitDia, ViewTestRecord, ViewDeviceDialog },
|
props: {
|
operationType: {
|
type: String,
|
default: () => ''
|
}
|
},
|
data() {
|
// 这里存放数据
|
return {
|
formDia: false,
|
form: {
|
methodName: '',
|
verifyReason: '',
|
technologyChange: '',
|
personRequirements: '',
|
personReadiness: '',
|
personIsSatisfied: '',
|
personRemark: '',
|
machineRequirements: '',
|
machineReadiness: '',
|
machineIsSatisfied: '',
|
materialRequirements: '',
|
materialReadiness: '',
|
materialIsSatisfied: '',
|
materialRemark: '',
|
methodRequirements: '',
|
methodReadiness: '',
|
methodIsSatisfied: '',
|
environmentRequirements: '',
|
environmentReadiness: '',
|
environmentIsSatisfied: '',
|
traceabilityRequirements: '',
|
traceabilityReadiness: '',
|
traceabilityIsSatisfied: '',
|
traceabilityRemark: '',
|
managementRequirements: '',
|
managementReadiness: '',
|
managementIsSatisfied: '',
|
managementRemark: '',
|
otherRequirements: '',
|
otherReadiness: '',
|
otherIsSatisfied: '',
|
otherRemark: '',
|
dataProcessing: '',
|
qualityControlMethod: '',
|
methodResultVerification: '',
|
verificationConclusion: '',
|
reviewResult: '',
|
reviewPerson: '',
|
reviewDate: '',
|
approvalResult: '',
|
approvalPerson: '',
|
approvalDate: '',
|
machineAttachmentList: []
|
},
|
editLoad: false,
|
info: {
|
methodVerifyId: ''
|
},
|
userList: [],
|
viewDeviceDialog: false,
|
viewTestRecordDialog: false,
|
viewWorkPermitDia: false,
|
calibrationsFileDia: false,
|
};
|
},
|
// 方法集合
|
methods: {
|
openDia(row) {
|
this.formDia = true
|
this.info = row
|
this.getUserList()
|
if (this.operationType === 'edit' || this.operationType === 'view') {
|
this.searchInfo(row)
|
}
|
},
|
// 查询详情信息
|
searchInfo (row) {
|
getMethodVerifyOne({methodVerifyId:row.methodVerifyId}).then(res => {
|
if (res.code === 200){
|
this.form = {...res.data}
|
if (this.form.confirmUser) {
|
this.form.confirmUser = this.form.confirmUser.split(',').map(Number)
|
}
|
}
|
}).catch(err => {
|
console.log('err---', err);
|
})
|
},
|
// 提交
|
handleEdit() {
|
this.editLoad = true
|
const processMethodSearchNews = this.HaveJson(this.form)
|
processMethodSearchNews.confirmUser = processMethodSearchNews.confirmUser && processMethodSearchNews.confirmUser.join(',')
|
processMethodSearchNews.operationType = 1
|
if (this.operationType === 'edit') {
|
this.editInfo(processMethodSearchNews)
|
} else {
|
this.addInfo(processMethodSearchNews)
|
}
|
},
|
// 评审意见勾选（三选一，再点一次取消）
|
toggleReview (value, checked) {
|
this.form.reviewResult = checked ? value : ''
|
},
|
// 审批意见勾选（三选一，再点一次取消）
|
toggleApproval (value, checked) {
|
this.form.approvalResult = checked ? value : ''
|
},
|
// 查看上岗证
|
viewWorkPermit () {
|
this.viewWorkPermitDia = true
|
this.$nextTick(() => {
|
this.$refs.viewWorkPermitDia.openDia(this.form)
|
})
|
},
|
// 查看校准证书
|
viewCalibrationsFileDia () {
|
this.calibrationsFileDia = true
|
this.$nextTick(() => {
|
this.$refs.calibrationsFileDia.openDia(this.form)
|
})
|
},
|
// 查看设备
|
viewDevice () {
|
this.viewDeviceDialog = true
|
this.$nextTick(() => {
|
this.$refs.viewDeviceDialog.openDia(this.form)
|
})
|
},
|
// 关闭设备弹框
|
closDeviceDia () {
|
this.viewDeviceDialog = false
|
},
|
// 提交设备信息
|
handleDeviceInfo (machineAttachmentList) {
|
this.viewDeviceDialog = false
|
this.form.machineAttachmentList = machineAttachmentList
|
},
|
// 查看检测记录
|
viewTestRecord () {
|
this.viewTestRecordDialog = true
|
this.$nextTick(() => {
|
this.$refs.viewTestRecordDialog.openDia(this.info)
|
})
|
},
|
// 提交编辑
|
editInfo (processMethodSearchNews) {
|
updateMethodVerify(processMethodSearchNews).then(res => {
|
this.editLoad = false
|
if (res.code === 200){
|
this.$message.success('操作成功')
|
this.closeDia()
|
}
|
}).catch(err => {
|
console.log('err---', err);
|
this.editLoad = false
|
})
|
},
|
// 提交新增
|
addInfo (processMethodSearchNews) {
|
addMethodVerify(processMethodSearchNews).then(res => {
|
this.editLoad = false
|
if (res.code === 200){
|
this.$message.success('操作成功')
|
this.closeDia()
|
}
|
}).catch(err => {
|
console.log('err---', err);
|
this.editLoad = false
|
})
|
},
|
// 验证确认
|
validation (){
|
methodVerifyAffirm({methodVerifyId:this.info.methodVerifyId}).then(res => {
|
if (res.code === 200){
|
this.form.confirmDate = dateFormat(new Date())
|
}
|
|
}).catch(err => {
|
console.log('err---', err);
|
})
|
},
|
// 关闭弹框
|
closeDia() {
|
this.formDia = false
|
this.$emit('closeDia');
|
},
|
getUserList(){
|
selectUserCondition().then(res => {
|
if (res.code === 200) {
|
this.userList = res.data
|
}
|
})
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
:deep(.el-dialog) {
|
margin-top: 2vh !important;
|
}
|
:deep(.el-dialog__body) {
|
max-height: 720px;
|
overflow-y: auto;
|
}
|
.tables {
|
table-layout: fixed;
|
width: 100%;
|
margin-top: 10px;
|
}
|
.view-fieldset {
|
border: none;
|
margin: 0;
|
padding: 0;
|
min-width: 0;
|
}
|
.tables td {
|
height: 34px;
|
width: 100px;
|
text-align: center;
|
font-size: 14px;
|
word-wrap: break-word;
|
white-space: normal;
|
padding: 4px;
|
}
|
.opinion-box {
|
border: 1px solid var(--el-border-color);
|
border-radius: 4px;
|
min-height: 72px;
|
padding: 8px 10px;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
gap: 8px;
|
}
|
.opinion-checks {
|
display: flex;
|
justify-content: flex-start;
|
}
|
.opinion-sign {
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
gap: 8px;
|
font-size: 14px;
|
}
|
</style>
|
