<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 @blur="blurCode" 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-autocomplete v-if="detailId == null" class="inline-input" v-model="scope.row.name"
|
:fetch-suggestions="querySearch" placeholder="请输入项目名称" @select="handleSelect(scope.row)"
|
@blur="handleSelect(scope.row)"></el-autocomplete>
|
<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">{{ null }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="detailId !== null" label="操作" width="120">
|
<template>
|
<el-button type="text" size="small" @click="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))
|
];
|
return [conclusion];
|
}
|
},
|
data() {
|
return {
|
// 添加列
|
empiricalValueAdd: 1,
|
// 编辑时存储最长的列数字，做删除判断
|
empiricalValueAddMaxNumber: 0,
|
// 设备选择树显示
|
centerDialogVisible: false,
|
// 详情页就是详情信息
|
detailInfo: {},
|
//产品信息
|
ifsInfo: {},
|
// 表格
|
projectTable: [],
|
// 新建检验单参数对象
|
rawInsParams: {},
|
// 项目名称options
|
specificationOptions: [],
|
filterText: "",
|
materialOptions: [], // 树数据
|
defaultProps: {
|
// 设备树数据设置
|
children: "children",
|
label: "name"
|
},
|
nodeData: "", // node点击保存当前点击数据
|
clickSelectDevice: {
|
index: "", // 点击选择存储当前行索引
|
rpId: "" // 点击选择存储当前行项目Id
|
},
|
restaurants: []
|
};
|
},
|
watch: {
|
filterText(val) {
|
this.$refs.tree.filter(val);
|
}
|
},
|
methods: {
|
blurCode() {
|
// this.detailId=10
|
let data = {
|
code: this.detailInfo.code
|
}
|
console.log(data);
|
this.$axios.post(
|
this.$api.url.rawInspectChooseIFS, {
|
code: this.detailInfo.code
|
}
|
).then(res => {
|
this.ifsInfo = res.data
|
console.log("ifs", this.ifsInfo);
|
this.$set(this.detailInfo, "formTime", this.ifsInfo.formTime)
|
this.detailInfo.formTime = this.ifsInfo.formTime
|
this.detailInfo.name = this.ifsInfo.name
|
this.detailInfo.supplier = this.ifsInfo.supplier
|
this.detailInfo.unit = this.ifsInfo.unit
|
this.detailInfo.userName = this.ifsInfo.userName
|
this.detailInfo.number = this.ifsInfo.number
|
this.detailInfo.specifications = this.ifsInfo.specifications
|
this.restaurants = JSON.parse(JSON.stringify(this.ifsInfo.rawInsProducts))
|
this.restaurants.forEach(item => {
|
this.$set(item, "value", item.name)
|
})
|
console.log("restaurants", this.restaurants);
|
})
|
},
|
querySearch(queryString, cb) {
|
var restaurants = this.restaurants;
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
// 调用 callback 返回建议列表的数据
|
cb(results);
|
},
|
createFilter(queryString) {
|
return (restaurant) => {
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
handleSelect(row) {
|
let select = this.restaurants.filter(item => {
|
return item.name === row.name
|
})[0]
|
if (select != undefined) {
|
this.$set(row, "internal", select.internal)
|
this.$set(row, "required", select.required)
|
this.$set(row, "unit", select.unit)
|
//检验值
|
}
|
},
|
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 => {
|
console.log(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(); //重新刷新信息数据
|
}
|
},
|
submitSave() {
|
let pro = this.projectTable.filter(item => {
|
return item.testState === 0;
|
})
|
if (pro.length > 0) {
|
this.$prompt('请输入不合格数量', '不合格数量', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
inputPattern: /^\d+$/,
|
inputErrorMessage: '请输入正确数字格式'
|
}).then(({ value }) => {
|
this.$axios.post(
|
this.$api.url.updateRawInspectsById+`${this.detailId}`, {"number": value }
|
).then(res => {
|
this.$message.success("提交成功");
|
this.getDetailInfo();
|
this.goBack()
|
});
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '取消输入'
|
});
|
});
|
}else{
|
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>
|
