<template>
|
<div class="content-main">
|
<div v-if="!showAddPage" class="rawPage">
|
<div class="title">
|
<el-row>
|
<el-col :span="12">过程检验</el-col>
|
<el-col :span="12" style="text-align: right;">
|
<el-button
|
@click="handleAddNew"
|
type="primary"
|
size="mini"
|
icon="el-icon-plus"
|
style="background: #004EA2; "
|
>新增</el-button
|
>
|
<el-button icon="el-icon-download" size="mini">导出</el-button>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="nav">
|
<span>检验状态：</span>
|
<el-select
|
size="small"
|
v-model="search.result"
|
placeholder="请选择检测状态"
|
style="width: 224px;margin-right: 52px;"
|
>
|
<el-option :value="''" label="全部"></el-option>
|
<el-option :value="1" label="已检测"></el-option>
|
<el-option :value="2" label="待检测"></el-option>
|
</el-select>
|
<span>产品名称：</span>
|
<el-input
|
size="small"
|
style="width: 224px;margin-right: 30px;"
|
v-model="search.name"
|
placeholder="请输入产品名称"
|
></el-input>
|
<span>工序：</span>
|
<el-input
|
size="small"
|
style="width: 224px;margin-right: 30px;"
|
v-model="search.techfather"
|
placeholder="请输入工序"
|
></el-input>
|
<el-button size="mini"><span>重 置</span></el-button>
|
<el-button size="mini" type="primary" style="background: #004EA2;"
|
><span>查 询</span></el-button
|
>
|
</div>
|
<div class="content-body">
|
<div class="inspectionTable">
|
<el-table
|
ref="inspectionTable"
|
height="calc(100vh - 320px)"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{
|
border: '0px',
|
background: '#f5f7fa',
|
color: '#606266',
|
boxShadow: 'inset 0 1px 0 #ebeef5',
|
textAlign: 'center'
|
}"
|
border
|
:data="inspectionTable"
|
style="width: 100%"
|
>
|
<el-table-column type="selection" width="50"> </el-table-column>
|
<el-table-column
|
label="序号"
|
type="index"
|
width="60"
|
></el-table-column>
|
<el-table-column
|
prop="order_number"
|
label="订单编号"
|
min-width="90"
|
/>
|
<el-table-column prop="material" label="产品名称" min-width="80" />
|
<el-table-column
|
prop="specifications_model"
|
label="规格型号"
|
min-width="60"
|
/>
|
<el-table-column prop="techfather" label="工序" min-width="70" />
|
<el-table-column prop="techname" label="工艺名称" min-width="70" />
|
<el-table-column prop="unit" label="单位" min-width="50" />
|
<el-table-column prop="quantity" label="数量" min-width="50" />
|
<el-table-column
|
prop="createTime"
|
label="报检日期"
|
min-width="60"
|
/>
|
<el-table-column prop="name" label="报检人" min-width="50" />
|
<el-table-column
|
prop="updateTime"
|
label="检测日期"
|
min-width="60"
|
/>
|
<el-table-column prop="result" label="合格状态" min-width="80">
|
<template slot-scope="scope">
|
<span style="color: #34BD66;" v-if="scope.row.result == 1"
|
>合格</span
|
>
|
<span style="color: #E84738;" v-else-if="scope.row.result == 0"
|
>不合格</span
|
>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="80">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" style="margin-left: 0;"
|
>详情</el-button
|
>
|
<el-button
|
type="text"
|
size="small"
|
@click="handleClick(scope.row)"
|
>查看</el-button
|
>
|
<el-button type="text" size="small" style="margin-left: 0;"
|
>编辑</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 分页器 -->
|
<div class="pagination">
|
<el-pagination
|
:current-page="1"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="inspectionTableTotal"
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="newPage" v-if="showAddPage">
|
<!-- 新增页面 -->
|
<div class="addInspection">
|
<el-row class="header">
|
<el-col :span="12">新增过程检验单</el-col>
|
<el-col :span="12" style="text-align: right;">
|
<!-- 点击返回，当前页面值为false -->
|
<el-button
|
type="primary"
|
size="mini"
|
style="background: #004EA2; "
|
icon="el-icon-circle-plus-outline"
|
>新增</el-button
|
>
|
<el-button
|
@click="showAddPage = false"
|
type="primary"
|
size="mini"
|
icon="el-icon-back"
|
style="background: #004EA2; "
|
>返回</el-button
|
>
|
</el-col>
|
</el-row>
|
<el-form
|
:model="addInspectionform"
|
ref="addInspectionform"
|
class="addInspectionform"
|
label-position="right"
|
label-width="120px"
|
size="small"
|
>
|
<div class="formwrapper">
|
<el-row :gutter="230">
|
<el-col :span="7">
|
<el-form-item label="订单号：">
|
<el-input
|
style="width: 210px;"
|
size="small"
|
v-model="addInspectionform.number"
|
placeholder="请输入订单号"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item label="产品名称：">
|
<el-input
|
style="width: 210px;"
|
size="small"
|
v-model="addInspectionform.code"
|
placeholder="请输入产品编码"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item label="产品编码：">
|
<el-input
|
style="width: 210px;"
|
size="small"
|
disabled
|
v-model="addInspectionform.code"
|
placeholder="请输入产品编码"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="230">
|
<el-col :span="7">
|
<el-form-item label="规格型号：">
|
<el-input
|
style="width: 210px;"
|
size="small"
|
disabled
|
v-model="addInspectionform.number"
|
placeholder="请输入规格型号"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item label="工序名称：">
|
<el-select
|
v-model="value"
|
placeholder="请选择"
|
style="width: 210px;"
|
size="small"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item label="工艺名称：">
|
<el-select
|
v-model="value"
|
placeholder="请选择"
|
style="width: 210px;"
|
size="small"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="230">
|
<el-col :span="7">
|
<el-form-item label="单位：">
|
<el-input
|
style="width: 210px;"
|
size="small"
|
disabled
|
v-model="addInspectionform.quantity"
|
placeholder="请输入单位"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-form-item label="数量：">
|
<el-input
|
style="width: 210px;"
|
size="small"
|
v-model="addInspectionform.quantity"
|
placeholder="请输入数量"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7">
|
<el-button
|
type="primary"
|
style="float: right; font-size: 14px; !important"
|
>生成检验项目</el-button
|
>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
</div>
|
<div class="inspectionProject">
|
<el-row>
|
<el-col :span="12" class="inspectionProject_span">检验项目</el-col>
|
<el-col :span="12" class="inspectionProject_span">
|
<el-button size="mini" @click="clickDeleteInspectionColumn()"
|
>删除检验值列</el-button
|
>
|
<el-button
|
style="margin-right: 30px;"
|
size="mini"
|
@click="clickAddInspectionColumn()"
|
>添加检验值列</el-button
|
>
|
<el-button
|
size="mini"
|
style="margin-right: 30px;"
|
@click="clickAddLine()"
|
>添加检验行</el-button
|
>
|
</el-col>
|
</el-row>
|
<el-table
|
:data="inspectionItems"
|
height="calc(100vh - 550px)"
|
style="width: 100%"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="60"
|
></el-table-column>
|
<el-table-column prop="material" label="项目"></el-table-column>
|
<el-table-column prop="unit" label="单位"></el-table-column>
|
<el-table-column prop="standardVal" label="标准值"></el-table-column>
|
<el-table-column prop="controlVal" label="内测值"></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 label="试验设备">
|
<template slot-scope="scope">
|
{{ scope.row.device }}
|
<el-select
|
v-model="scope.row.device"
|
size="small"
|
slot="append"
|
style="width: 100px;"
|
>
|
<el-option value="选项1"></el-option>
|
<el-option value="选项2"></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column prop="conclusion" label="结论">
|
<template slot-scope="scope">
|
<span style="color: #34BD66;" v-if="scope.row.insState == 1"
|
>合格</span
|
>
|
<span style="color: #E84738;" v-else-if="scope.row.insState == 0"
|
>不合格</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="inspectionResult">
|
<span>检测结果</span>
|
<el-table :data="inspectionResultForm">
|
<el-table-column prop="id" label="物料编号"></el-table-column>
|
<el-table-column prop="name" label="物料名称"></el-table-column>
|
<el-table-column prop="inspecter" label="检验员"></el-table-column>
|
<el-table-column prop="conclusion" label="检验结论"></el-table-column>
|
<el-table-column prop="operation" label="上报"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
search: {
|
countSize: 10,
|
pageSize: 1,
|
result: "", // 检测状态
|
name: "", // 产品名称
|
techfather: "" // 工序
|
},
|
inspectionTable: [],
|
inspectionTableTotal: "",
|
// 添加列
|
empiricalValueAdd: 1,
|
// 编辑时存储最长的列数字，做删除判断
|
empiricalValueAddMaxNumber: 0,
|
showAddPage: false,
|
addInspectionform: [
|
{
|
number: "",
|
username: "",
|
projectname: "",
|
tracenumber: "",
|
code: "",
|
class: "",
|
specificationmodel: "",
|
unit: "",
|
quantity: "",
|
group: "",
|
worker: "",
|
machine: ""
|
}
|
],
|
inspectionItems: [], // 新增检验项目表格
|
inspectionResultForm: [
|
{
|
id: "274024",
|
name: "111",
|
inspecter: "111",
|
conclusion: "",
|
operation: ""
|
}
|
],
|
options: [
|
{
|
value: "选项1",
|
label: "黄金糕"
|
},
|
{
|
value: "选项2",
|
label: "双皮奶"
|
},
|
{
|
value: "选项3",
|
label: "蚵仔煎"
|
},
|
{
|
value: "选项4",
|
label: "龙须面"
|
},
|
{
|
value: "选项5",
|
label: "北京烤鸭"
|
}
|
],
|
value: ""
|
};
|
},
|
methods: {
|
// 每页条数改变时触发 选择一页显示多少行
|
handleSizeChange(val) {
|
this.search.countSize = val;
|
this.defaultInitializationTable();
|
},
|
// 当前页改变时触发 跳转其他页
|
handleCurrentChange(val) {
|
this.search.pageSize = val;
|
this.defaultInitializationTable();
|
},
|
// 显示新增页面
|
handleAddNew() {
|
this.showAddPage = true;
|
},
|
// 表格初始化接口
|
defaultInitializationTable() {
|
this.$axios
|
.post(this.$api.url.selectProcessInspectsList, this.search)
|
.then(res => {
|
this.inspectionTableTotal = res.data.total;
|
this.inspectionTable = res.data.row;
|
});
|
},
|
// 添加行
|
clickAddLine() {
|
let obj = {
|
material: "",
|
materialCode: "",
|
orderNumber: "",
|
quantity: 0,
|
specificationsModel: "",
|
techfather: "",
|
techname: "",
|
technologyId: 0,
|
unit: ""
|
};
|
this.inspectionItems.push(obj);
|
},
|
// 删除行
|
clickDeleteline(scope) {
|
this.inspectionItems.splice(scope.$index, 1);
|
},
|
// 删除检验值列
|
clickDeleteInspectionColumn() {
|
if (this.empiricalValueAdd - 1 === 0) {
|
} else {
|
if (this.empiricalValueAddMaxNumber != this.empiricalValueAdd - 1) {
|
this.empiricalValueAdd = this.empiricalValueAdd - 1;
|
this.inspectionItems.forEach(i => {
|
i.testValueList.splice(this.empiricalValueAdd, 1);
|
});
|
}
|
}
|
},
|
// 添加检验值列
|
clickAddInspectionColumn() {
|
this.empiricalValueAdd = this.empiricalValueAdd + 1;
|
}
|
},
|
created() {
|
this.defaultInitializationTable(); // 初始化表格数据
|
}
|
};
|
</script>
|
|
<style>
|
.nav {
|
display: flex;
|
padding: 20px 20px;
|
align-items: center;
|
background-color: #fff;
|
}
|
.table_header {
|
height: calc(100vh - 550px);
|
}
|
.nav * {
|
font-size: 14px;
|
}
|
.content-body .rawPage {
|
background-color: #fff;
|
overflow: hidden;
|
}
|
.inspectionTable {
|
padding: 20px 20px;
|
}
|
.pagination {
|
float: right;
|
margin-right: 20px;
|
}
|
.newPage {
|
overflow: hidden;
|
}
|
.header {
|
padding: 12px;
|
}
|
.addInspectionform {
|
background-color: #fff;
|
}
|
.addInspectionform .formwrapper {
|
padding: 20px 0px;
|
margin-left: 100px;
|
}
|
.inspectionProject .el-table {
|
background-color: #fff;
|
padding: 10px 12px;
|
}
|
.inspectionResult span {
|
display: block;
|
padding: 5px 0px;
|
}
|
.inspectionResult .el-table {
|
background-color: #fff;
|
padding: 10px 12px;
|
}
|
.inspectionProject_span {
|
line-height: 32px;
|
padding: 10px 20px;
|
}
|
.inspectionProject_span .el-button {
|
float: right;
|
font-size: 13px !important;
|
}
|
</style>
|
