<template>
|
<div class="rawInsBox">
|
<div class="title">
|
<el-row>
|
<el-col :span="12" style="line-height: 32px;">原材料检验</el-col>
|
<el-col :span="12" style="text-align: right;">
|
<el-button
|
icon="el-icon-circle-plus-outline"
|
v-show="detailId === null"
|
@click="addNewRawInspect"
|
style="background-color: #004ea2; color: #ffffff;"
|
>提 交</el-button
|
>
|
<el-button
|
icon="el-icon-back"
|
@click="
|
() => {
|
goBack();
|
}
|
"
|
>返 回</el-button
|
>
|
</el-col>
|
</el-row>
|
</div>
|
<div
|
class="raw-detail-info"
|
:class="detailId === null ? 'raw-detail-info-edit' : ''"
|
>
|
<el-form v-model="detailInfo" label-position="right" label-width="120px">
|
<el-row>
|
<el-col :span="7">
|
<el-form-item label="来料日期:">
|
<el-input
|
v-if="detailId !== null"
|
:disabled="detailId !== null"
|
v-model="detailInfo.formTime"
|
></el-input>
|
<el-date-picker
|
v-else
|
type="date"
|
value-format="yyyy-MM-dd"
|
v-model="detailInfo.formTime"
|
placeholder="选择日期"
|
>
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item label="原材料名称:">
|
<el-input
|
v-if="detailId !== null"
|
:disabled="detailId !== null"
|
v-model="detailInfo.name"
|
></el-input>
|
<el-input
|
v-else
|
v-model="detailInfo.name"
|
placeholder="请输入原材料名称"
|
></el-input> </el-form-item
|
></el-col>
|
<el-col :span="7">
|
<el-form-item label="原材料编码:">
|
<el-input
|
v-if="detailId !== null"
|
:disabled="detailId !== null"
|
v-model="detailInfo.code"
|
></el-input>
|
<el-input
|
v-else
|
v-model="detailInfo.code"
|
placeholder="请输入原材料编码"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="7">
|
<el-form-item label="规格型号:">
|
<el-input
|
v-if="detailId !== null"
|
:disabled="detailId !== null"
|
v-model="detailInfo.specifications"
|
></el-input>
|
<el-input
|
v-else
|
v-model="detailInfo.specifications"
|
placeholder="请输入规格型号"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item label="单位:">
|
<el-input
|
v-if="detailId !== null"
|
:disabled="detailId !== null"
|
v-model="detailInfo.runit"
|
></el-input>
|
<el-input
|
v-else
|
placeholder="请输入检验单位"
|
:disabled="detailId !== null"
|
v-model="detailInfo.unit"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item label="数量:">
|
<el-input
|
:placeholder="detailId !== null ? '' : '请输入检验数量'"
|
:disabled="detailId !== null"
|
v-model="detailInfo.number"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="7">
|
<el-form-item label="供应商名称:">
|
<el-input
|
:placeholder="detailId !== null ? '' : '请输入供应商名称'"
|
:disabled="detailId !== null"
|
v-model="detailInfo.supplier"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item v-show="detailId !== null" label="报检日期:">
|
<el-input
|
:disabled="detailId !== null"
|
v-model="detailInfo.creatTime"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item v-show="detailId !== null" label="报检人:">
|
<el-input
|
:disabled="detailId !== null"
|
v-model="detailInfo.userName"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="title">
|
<el-row>
|
<el-col :span="12" style="line-height: 32px;">检验项目</el-col>
|
<el-col :span="12" style="line-height: 32px; padding-top: 6px;">
|
<el-button
|
style="float: right;"
|
@click="clickDeleteInspectionColumn()"
|
>删除检验值列</el-button
|
>
|
<el-button
|
style="float: right;margin-right: 30px;"
|
@click="clickAddInspectionColumn()"
|
>添加检验值列</el-button
|
>
|
<el-button
|
v-if="detailId == null"
|
style="float: right;margin-right: 30px;"
|
@click="clickAddLine()"
|
>添加检验行</el-button
|
>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="raw-project-table">
|
<el-table :data="projectTable" style="width: 100%" height="320">
|
<el-table-column type="index" label="序号" width="60">
|
</el-table-column>
|
<el-table-column prop="rpName" label="项目" width="212">
|
<template slot-scope="scope">
|
<el-input
|
v-if="detailId == null"
|
v-model="scope.row.name"
|
placeholder="请输入项目名称"
|
></el-input>
|
<el-input v-else v-model="scope.row.rpName" disabled></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="unit" label="单位" width="148">
|
<template slot-scope="scope">
|
<el-input
|
v-if="detailId == null"
|
v-model="scope.row.unit"
|
placeholder="请输入单位"
|
></el-input>
|
<el-input v-else v-model="scope.row.rpUnit" disabled></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="required" label="标准值" min-width="150">
|
<template slot-scope="scope">
|
<el-input
|
:disabled="detailId != null"
|
@blur="assertTest(scope.row)"
|
v-model="scope.row.required"
|
placeholder="请输入标准值"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="internal" label="内控值" min-width="150">
|
<template slot-scope="scope">
|
<el-input
|
@blur="assertTest(scope.row)"
|
:disabled="detailId != null"
|
v-model="scope.row.internal"
|
placeholder="请输入内控值"
|
></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="testValue"
|
label="检测值"
|
min-width="150"
|
v-for="(item, index) in empiricalValueAdd"
|
:key="index"
|
>
|
<template slot-scope="scope">
|
<el-tooltip
|
:disabled="scope.row.deviceId != null"
|
class="item"
|
effect="dark"
|
content="请先选择设备！"
|
placement="top-start"
|
>
|
<el-input
|
:disabled="scope.row.deviceId == null"
|
v-model="scope.row.testValueList[index]"
|
@blur="changeState(scope.row, index)"
|
placeholder="请输入检测值"
|
></el-input>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column prop="deviceName" label="试验设备" min-width="100">
|
<template slot-scope="scope">
|
<el-button type="text" @click="clickTableSelect(scope)">{{
|
scope.row.deviceId == null ? "请选择" : scope.row.deviceName
|
}}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
v-if="detailId !== null"
|
prop="testState"
|
label="结论"
|
min-width="100"
|
>
|
<template slot-scope="scope">
|
<span
|
v-show="scope.row.testState != null"
|
:style="{
|
color: scope.row.testState === 1 ? '#67C23A' : '#F56C6C'
|
}"
|
>{{ scope.row.testState === 1 ? "合格" : "不合格" }}</span
|
>
|
<span v-show="scope.row.testState == null">暂未结论</span>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="detailId == null" label="操作" width="100">
|
<template slot-scope="scope">
|
<el-button type="text" @click="clickDeleteline(scope)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="title">
|
<el-row>
|
<el-col :span="12" style="line-height: 32px;">检验结论</el-col>
|
</el-row>
|
</div>
|
<div class="raw-conclusion-table">
|
<el-table :data="conclusionTable" style="100%">
|
<el-table-column prop="code" label="物料编号"> </el-table-column>
|
<el-table-column prop="name" label="物料名称"> </el-table-column>
|
<el-table-column v-if="detailId != null" prop="uName" label="检验员">
|
<template slot-scope="scope">
|
<span
|
v-for="item in scope.row.uName"
|
:key="item && item.uName"
|
:style="{ marginRight: '8px' }"
|
>{{ item }}</span
|
>
|
</template>
|
</el-table-column>
|
<el-table-column prop="testState" label="检验结论">
|
<template slot-scope="scope">
|
<span
|
v-show="scope.row.testState != null"
|
:style="{
|
color: scope.row.testState === 1 ? '#67C23A' : '#F56C6C'
|
}"
|
>{{ scope.row.testState === 1 ? "合格" : "不合格" }}</span
|
>
|
<span v-show="scope.row.testState == null">暂未结论</span>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="detailId !== null" label="操作" width="120">
|
<template>
|
<el-button type="text" size="small" @click.once="submitSave"
|
>上报</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-dialog
|
title="请选择设备"
|
:visible.sync="centerDialogVisible"
|
width="20%"
|
>
|
<div class="div_device_dialog">
|
<el-input
|
placeholder="输入关键字进行过滤"
|
v-model="filterText"
|
style="margin-bottom: 6px;"
|
>
|
</el-input>
|
<el-tree
|
class="filter-tree"
|
:data="materialOptions"
|
:props="defaultProps"
|
default-expand-all
|
highlight-current
|
@node-click="nodeClick"
|
:filter-node-method="filterNode"
|
ref="tree"
|
>
|
<div class="custom-tree-node" slot-scope="{ data }">
|
<span
|
><i
|
:class="
|
`node_i ${
|
data.children ? 'el-icon-folder-opened' : 'el-icon-tickets'
|
}`
|
"
|
></i>
|
{{ data.name }}</span
|
>
|
</div>
|
</el-tree>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="clickNodeSure()">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { triggerRef } from "vue";
|
import RawIns from "./raw-ins.vue";
|
export default {
|
components: { RawIns },
|
props: ["goBack", "detailId"],
|
created() {
|
// 清空
|
this.detailInfo = {};
|
if (this.detailId) {
|
this.getDetailInfo();
|
}
|
this.getOptions();
|
},
|
mounted() {},
|
computed: {
|
conclusionTable() {
|
const conclusion = {};
|
conclusion.name = this.detailInfo.name;
|
conclusion.code = this.detailInfo.code;
|
conclusion.uName = [
|
...new Set(this.projectTable.map(item => item.uName))
|
];
|
if (
|
this.projectTable.filter(item => item.testState === null).length ===
|
this.projectTable.length
|
) {
|
conclusion.testState = null;
|
return [conclusion];
|
}
|
if (this.projectTable.filter(item => item.testState === 0).length > 0) {
|
conclusion.testState = 0;
|
} else {
|
conclusion.testState = 1;
|
}
|
console.log([conclusion]);
|
return [conclusion];
|
}
|
},
|
data() {
|
return {
|
// 添加列
|
empiricalValueAdd: 1,
|
// 编辑时存储最长的列数字，做删除判断
|
empiricalValueAddMaxNumber: 0,
|
// 设备选择树显示
|
centerDialogVisible: false,
|
// 详情页就是详情信息
|
detailInfo: {},
|
// 表格
|
projectTable: [],
|
// 新建检验单参数对象
|
rawInsParams: {},
|
// 项目名称options
|
specificationOptions: [],
|
filterText: "",
|
materialOptions: [], // 树数据
|
defaultProps: {
|
// 设备树数据设置
|
children: "children",
|
label: "name"
|
},
|
nodeData: "", // node点击保存当前点击数据
|
clickSelectDevice: {
|
index: "", // 点击选择存储当前行索引
|
rpId: "" // 点击选择存储当前行项目Id
|
}
|
};
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
}
|
},
|
methods: {
|
assertTest(row){
|
let fuArr=['>', '<', '=']
|
if(!fuArr.includes(row.required[0])){
|
this.$message({
|
message: "标准值["+row.required+"]格式首位应包含>,<或者=",
|
type: 'warning'
|
});
|
return
|
}
|
if(!fuArr.includes(row.internal[0])){
|
this.$message({
|
message: "内控值["+row.internal+"]格式首位应包含>,<或者=",
|
type: 'warning'
|
});
|
return
|
}
|
},
|
// 设备树过滤搜索
|
filterNode(value, data) {
|
if (!value) return true;
|
return data.name.indexOf(value) !== -1;
|
},
|
|
// 获取报检单详情信息
|
async getDetailInfo() {
|
await this.$axios
|
.get(this.$api.url.selectRawInspectsListById + `${this.detailId}`, {
|
params: { id: this.detailId }
|
})
|
.then(res => {
|
this.detailInfo = res.data;
|
this.projectTable = res.data.children;
|
this.projectTable.forEach(i => {
|
// 解决重新赋值无法编辑操作
|
if (i.testValue == null) {
|
this.$set(i, "testValueList", []);
|
} else {
|
this.$set(i, "testValueList", i.testValue.split(","));
|
}
|
// 取最长的列表数
|
if (i.testValueList.length > this.empiricalValueAdd) {
|
this.empiricalValueAdd = i.testValueList.length;
|
this.empiricalValueAddMaxNumber = i.testValueList.length - 1;
|
}
|
});
|
});
|
},
|
// 新增检验单
|
async addNewRawInspect() {
|
//TODO:
|
console.log(this.projectTable);
|
if(this.projectTable.length>0){
|
let filterTable= this.projectTable.filter(item=>{
|
return item.required===''||item.internal===''||
|
item.required===null||item.internal===null||item.name===''
|
})
|
if(filterTable.length>0) {
|
this.$message({
|
message: "项目名称，标准值和内控值不能为空！",
|
type: 'warning'
|
});
|
return
|
}
|
}
|
this.projectTable.forEach(i => {
|
// 将列表转换为字符串
|
i.testValue = i.testValueList.join(",");
|
});
|
this.detailInfo.rawInsProducts = this.projectTable;
|
this.$axios.post(
|
this.$api.url.addRawInspects,
|
{ ...this.detailInfo },
|
{ headers: { "Content-Type": "application/json" } }
|
).then(res=>{
|
console.log(res);
|
if(res.code=="201"){
|
this.$message({
|
message: res.message,
|
type: 'warning'
|
});
|
return
|
}else{
|
// this.detailId = res.data;
|
// this.getDetailInfo();
|
// // this.$message.success(res.message);
|
// this.goBack();
|
}
|
});
|
},
|
|
// 修改项目的检测值改变结论
|
async changeState(row, index) {
|
if (this.detailId !== null) {
|
const res = await this.$axios.post(this.$api.url.updaterawInsProduct, {
|
DevId: row.deviceId,
|
rpId: row.rpId,
|
testValue: row.testValueList.join(",")
|
});
|
this.$message.success("提交成功");
|
this.getDetailInfo(); //重新刷新信息数据
|
}
|
},
|
async submitSave() {
|
const res = await this.$axios.post(
|
this.$api.url.updateRawInspectsById + `${this.detailId}`
|
).then(res=>{
|
this.$message.success("提交成功");
|
this.getDetailInfo();
|
this.goBack()
|
});
|
},
|
// 获取设备树内容
|
getOptions() {
|
this.$axios.get(this.$api.url.rawSelectDevice).then(res => {
|
this.materialOptions = res.data;
|
});
|
},
|
// 添加行
|
clickAddLine() {
|
let obj = {
|
deviceId: null,
|
deviceName: "",
|
internal: "",
|
name: "",
|
required: "",
|
textValue: "",
|
testState:null,
|
testValueList: [],
|
unit: ""
|
};
|
this.projectTable.push(obj);
|
},
|
// 删除行
|
clickDeleteline(scope) {
|
this.projectTable.splice(scope.$index, 1);
|
},
|
// 点击设备树保存点击记录
|
nodeClick(data) {
|
if (data.id != undefined) this.nodeData = data;
|
},
|
// 点击表格选择触发
|
clickTableSelect(scope) {
|
this.centerDialogVisible = true;
|
this.clickSelectDevice.index = scope.$index;
|
this.clickSelectDevice.rpId = scope.row.rpId;
|
},
|
// 点击树里面的确定
|
clickNodeSure() {
|
if (this.detailId == null) {
|
this.projectTable[
|
this.clickSelectDevice.index
|
].deviceId = this.nodeData.id;
|
this.projectTable[
|
this.clickSelectDevice.index
|
].deviceName = this.nodeData.name;
|
this.centerDialogVisible = false;
|
} else {
|
this.$axios
|
.post(this.$api.url.updateDevByRpId, {
|
rpId: this.clickSelectDevice.rpId,
|
devId: this.nodeData.id
|
})
|
.then(res => {
|
this.getDetailInfo();
|
this.centerDialogVisible = false;
|
});
|
}
|
},
|
// 删除检验值列
|
clickDeleteInspectionColumn() {
|
if (this.empiricalValueAdd - 1 === 0) {
|
} else {
|
if (this.empiricalValueAddMaxNumber != this.empiricalValueAdd - 1) {
|
this.empiricalValueAdd = this.empiricalValueAdd - 1;
|
this.projectTable.forEach(i => {
|
i.testValueList.splice(this.empiricalValueAdd, 1);
|
});
|
}
|
}
|
},
|
// 添加检验值列
|
clickAddInspectionColumn() {
|
this.empiricalValueAdd = this.empiricalValueAdd + 1;
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.node_i {
|
color: orange;
|
}
|
.div_device_dialog {
|
min-height: 400px;
|
overflow: auto;
|
}
|
.rawInsBox {
|
height: 100%;
|
width: 100%;
|
overflow-y: scroll;
|
display: flex;
|
flex-direction: column;
|
}
|
.el-table__fixed-body-wrapper {
|
top: 48px;
|
}
|
.rawInsBox .title .el-button {
|
height: 32px;
|
border: 1px solid rgba(190, 190, 190, 0.44);
|
box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
|
padding: 0 12px;
|
}
|
.rawInsBox .title {
|
margin-bottom: 10px;
|
padding: 0 20px;
|
}
|
/* 检验详情 */
|
.raw-detail-info {
|
background: #fff;
|
padding: 26px 0px 11px 80px;
|
}
|
.raw-detail-info >>> .el-form-item__label {
|
color: rgb(51, 51, 51);
|
font-family: 微软雅黑;
|
font-size: 16px;
|
font-weight: 400;
|
letter-spacing: 0px;
|
}
|
.raw-detail-info .el-input {
|
width: auto;
|
}
|
.raw-detail-info.raw-detail-info-edit >>> .el-input__inner {
|
background: #fff;
|
}
|
.raw-detail-info >>> .el-input__inner {
|
width: 224px;
|
height: 32px;
|
box-sizing: border-box;
|
background: rgb(238, 238, 238);
|
border: 1px solid rgb(221, 221, 221);
|
border-radius: 4px;
|
}
|
.raw-detail-info .el-form-item {
|
margin-bottom: 24px;
|
}
|
.raw-detail-info .el-form-item .el-button {
|
height: 32px;
|
border: 1px solid rgba(190, 190, 190, 0.44);
|
box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
|
padding: 0 12px;
|
}
|
|
/* 检验项目 */
|
.raw-project-table {
|
padding: 24px 14px;
|
background: #fff;
|
flex: 1;
|
/* max-height: 360px; */
|
/* overflow-y: hidden; */
|
}
|
/* 检验结论 */
|
.raw-conclusion-table {
|
padding: 9px 14px;
|
background: #fff;
|
}
|
</style>
|
