<template>
|
<div style="height: 100%">
|
<div class="page-header">
|
<div class="header-left">
|
<a @click="$router.go(-1)"><i class="icon-btn-back"></i></a>
|
<h2 v-if="resultVal=='' || resultVal==null">编辑-包装检验</h2>
|
<h2 v-else>查看-包装检验</h2>
|
</div>
|
<div class="btn-group header-right">
|
</div>
|
</div>
|
<div class="page-main">
|
<div class="packageInspect-basic">
|
<el-form
|
:model="dataForm"
|
:rules="dataRule"
|
ref="dataForm"
|
style="width: 100%"
|
class="l-mes"
|
label-width="110px">
|
<el-row>
|
<el-col :span="6">
|
<el-form-item label="包装检验编号" prop="packInsNo">
|
<el-input v-model="dataForm.packInsNo" disabled>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="包装编号" prop="packageNo">
|
<el-input v-model="dataForm.packageNo" disabled></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item prop="projectName" label="项目名称" >
|
<el-tooltip :disabled="dataForm.projectName==null" :content="dataForm.projectName">
|
<el-input v-model="dataForm.projectName" disabled ></el-input>
|
</el-tooltip>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="客户名称" prop="customerName">
|
<el-input v-model="dataForm.customerName" disabled />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="6">
|
<el-form-item label="合同号" prop="contractNo">
|
<el-input v-model="dataForm.contractNo" disabled></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="报检日期" prop="createTime">
|
<el-input v-model="dataForm.createTime" disabled />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="报检人" prop="createUser">
|
<el-input v-model="dataForm.createUser" disabled />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="packageInspect-detail">
|
<el-row :gutter="10" style="width:100%;z-index: 10;height:50px;">
|
<el-col :span="20">检验项目</el-col>
|
<el-col :span="2">
|
<el-button v-if="resultVal=='' || resultVal==null" style="width:100%" size="small" @click="clickAddLine()">添加检验项目</el-button>
|
</el-col>
|
<el-col :span="2">
|
<el-button v-if="resultVal=='' || resultVal==null" style="width:100%" type="primary" size="small"
|
@click="savePackIns()">保存</el-button>
|
</el-col>
|
</el-row>
|
<el-row style="width:100%;">
|
<el-col :span="24">
|
<el-table
|
:header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}"
|
:cell-style="{textAlign:'center'}"
|
ref="table"
|
:data="list"
|
border
|
style="width: 100%;"
|
height="400"
|
row-key="randomId" class="l-mes"
|
default-expand-all
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
|
<el-table-column type="index" label="序号" width="60">
|
</el-table-column>
|
<el-table-column prop="name" label="项目" width="260">
|
<template slot-scope="scope">
|
<el-input :readonly="resultVal!=null" v-if="scope.row.children" class="inline-input" style="width:90%;" v-model="scope.row.name"
|
placeholder="请输入项目名称"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="required" label="要求" width="260">
|
<template slot-scope="scope">
|
<div v-if="!scope.row.children">
|
<el-input :readonly="resultVal!=null" v-model="scope.row.required"
|
placeholder="请输入要求"></el-input>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="note" label="检验描述" width="260" >
|
<template slot-scope="scope">
|
<div v-if="!scope.row.children">
|
<el-input :readonly="resultVal!=null" v-model="scope.row.note" placeholder="检验描述"></el-input>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="testState" label="结论" min-width="150">
|
<template slot-scope="scope">
|
<el-select style="width:100%" :disabled="resultVal!=null" @change="changeResult" v-model="scope.row.result" v-if="!scope.row.children">
|
<el-option label="合格" value="合格"></el-option>
|
<el-option label="不合格" value="不合格"></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column v-if="resultVal=='' || resultVal==null" fixed="right" style="background-color: white;" label="操作" width="200">
|
<template slot-scope="scope">
|
<el-button v-if="scope.row.children" icon="el-icon-circle-plus-outline" type="text" @click="clickAddChildren(scope.row,scope.$index)">添加行</el-button>
|
<el-button v-if="!scope.row.children" icon="el-icon-circle-close" type="text"
|
@click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">取消</el-button>
|
<el-button v-if="scope.row.children" icon="el-icon-circle-close" type="text"
|
@click="clickDelLine(scope.row,scope.$index,scope.row.children!=null)">删除项目</el-button>
|
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="packageInspect-result">
|
<el-row>
|
<el-col :span="24">检验结论</el-col>
|
</el-row>
|
<el-row style="width:100%">
|
<el-col :span="24">
|
<el-table class="l-mes" border height="90" :data="conclusionTable" ref="conclusion" v-model="conclusion"
|
:header-cell-style="{textAlign:'center',color:'black',backgroundColor:'#fafafa'}"
|
:cell-style="{textAlign:'center'}">
|
<el-table-column prop="packageNo" label="包装编号"></el-table-column>
|
<el-table-column prop="userName" label="检验员"></el-table-column>
|
<el-table-column prop="result" label="检验结论">
|
<template slot-scope="scope">
|
<el-select :disabled="resultVal!=null" style="width:100%" v-model="scope.row.result">
|
<el-option label="合格" value="合格"></el-option>
|
<el-option label="不合格" value="不合格"></el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template>
|
<el-button type="text" :disabled="resultVal!=null" @click="submitSave()" size="small">上报</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
<el-dialog
|
title="提示"
|
:visible.sync="dialogVisible"
|
width="30%">
|
<el-form :model="submitData" ref="form" label-width="100px" >
|
<el-form-item label="请输入行号" prop="lineNo" :rules="{required:true,message:'行号不能为空',trigger:'blur'}">
|
<el-input v-model="submitData.lineNo" />
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="confirmSubmit(submitData,false)">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
fetchListById,
|
updatePackageInsProduct,
|
updatePackageInspectById,
|
getCustomer,
|
} from '@/api/quality/packageInspect'
|
export default {
|
computed:{},
|
components:{
|
},
|
data(){
|
return{
|
submitData: {
|
id:null,
|
result: null,
|
lineNo: null,
|
},
|
dialogVisible: false,
|
loading: false,
|
resultVal: null,
|
dataForm:{
|
id: null,
|
packInsNo: null,
|
packageNo: '',
|
contractNo: '',
|
projectName: '',
|
customerName: '',
|
packageInsProductS: [{
|
deviceId: 0,
|
father:'',
|
name: '',
|
required: '',
|
testValue: '',
|
unit: '',
|
testValueList: []
|
}]
|
},
|
form: null,
|
list:[],
|
conclusion: null,
|
conclusionTable: [{
|
packageNo: '',
|
userName: '',
|
result: ''
|
}],
|
dataRule: {},
|
}
|
},
|
beforeUpdate(){
|
this.$nextTick(()=>{
|
this.$refs.table.doLayout();
|
})
|
},
|
created(){
|
this.dataForm.id = this.$route.query.id
|
this.resultVal = this.$route.params.resultVal
|
if(!this.resultVal){
|
let val = sessionStorage.getItem("packIns-resultVal-"+this.dataForm.id)
|
if(val){
|
this.resultVal=val
|
}
|
}
|
this.init()
|
},
|
watch:{
|
dialogVisible(newVal){
|
if(!newVal){
|
this.$refs.form.resetFields();
|
}
|
}
|
},
|
methods:{
|
changeResult(){
|
let result = ''
|
let data = this.list
|
if(data){
|
result='合格'
|
data.forEach(item=>{
|
if(item.children){
|
item.children.forEach(ele=>{
|
if(ele.result=='不合格'){
|
result='不合格'
|
}
|
})
|
}
|
})
|
}
|
this.conclusionTable[0].result = result
|
},
|
//上报
|
submitSave(){
|
const _than = this
|
this.$confirm('上报前，请确认检验项目是否已保存!', '提示', {
|
confirmButtonText: '确认上报',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
_than.submitData.id = _than.dataForm.id,
|
_than.submitData.result = _than.conclusionTable[0].result,
|
getCustomer(_than.dataForm.id).then(res=>{
|
if(res.status===200){
|
_than.confirmSubmit(_than.submitData,true)
|
}
|
}).catch(error=>{
|
_than.dialogVisible = true
|
})
|
|
}).catch(() => {})
|
},
|
confirmSubmit(data,isOtc){
|
const _than = this
|
let isSubmit = false
|
if(isOtc){
|
isSubmit = true
|
}else{
|
_than.$refs.form.validate(valid=>{
|
if(valid){
|
isSubmit = true
|
_than.dialogVisible = false
|
}
|
})
|
}
|
if(isSubmit){
|
updatePackageInspectById(data).then(res => {
|
if(res.data.code === 0){
|
_than.resultVal = res.data.data
|
sessionStorage.setItem("packIns-resultVal-"+_than.dataForm.id,res.data.data)
|
_than.$message.success("上报成功");
|
}else{
|
_than.$message.error("上报失败",res.data.data);
|
}
|
})
|
}
|
},
|
// 添加行
|
clickAddLine() {
|
this.list.push({
|
name: '',
|
randomId: Math.random(),
|
children: [{
|
name: '',
|
note: '',
|
required: '',
|
result: '',
|
randomId: Math.random(),
|
}]
|
})
|
},
|
//添加子级
|
clickAddChildren(row,index){
|
row.children.push({
|
name: row.name,
|
note: '',
|
required: '',
|
result: '',
|
randomId: Math.random(),
|
})
|
},
|
// 删除行
|
clickDelLine(row,index,isParent) {
|
if(isParent){
|
let parentIndex = this.list.findIndex(el =>{
|
return el.randomId == row.randomId
|
})
|
this.list.splice(parentIndex,1)
|
}else{
|
let i = this.list.findIndex(el =>{
|
return el.children.find(ele => ele.randomId == row.randomId)
|
})
|
let childrenIndex = this.list[i].children.findIndex(el =>{
|
return el.randomId == row.randomId
|
})
|
this.list[i].children.splice(childrenIndex,1)
|
}
|
this.changeResult()
|
},
|
//保存检查项
|
savePackIns(){
|
if(this.list.length==0){
|
this.$message.error("检验项目为空!")
|
return
|
}else{
|
let dataList = []
|
this.list.forEach(item=>{
|
if(item.children){
|
item.children.forEach(ele=>{
|
let obj = {
|
id: ele.pid || null,
|
name: item.name,
|
note: ele.note,
|
packageInspectId: this.dataForm.id,
|
required: ele.required,
|
result: ele.result,
|
}
|
dataList.push(obj)
|
})
|
}
|
})
|
updatePackageInsProduct(dataList).then(res=>{
|
if(res.status===200){
|
this.$message.success("保存成功")
|
this.init()
|
}
|
}).catch(error=>{
|
console.log(error);
|
this.$message.error("保存失败")
|
})
|
}
|
},
|
init(){
|
if(this.dataForm.id){
|
fetchListById(this.dataForm.id).then(res=>{
|
let data = res.data.data
|
this.dataForm.packInsNo = data.packInsNo
|
this.dataForm.packageNo = data.packageNo
|
this.dataForm.contractNo = data.contractNo
|
this.dataForm.customerName = data.customerName
|
this.dataForm.projectName = data.projectName
|
this.dataForm.createTime = data.createTime
|
this.dataForm.createUser = data.createUser
|
this.list = []
|
let userNameList = []
|
data.packageInsProductS.forEach(item => {
|
if (item.children) {
|
let ele = {
|
randomId: Math.random(),
|
name: null,
|
children: []
|
}
|
ele.name = item.name
|
item.children.forEach(obj => {
|
if(obj.userName){
|
userNameList.push(obj.userName)
|
}
|
let o = {
|
name: item.name,
|
randomId: Math.random(),
|
required: obj.required,
|
pid: obj.pid,
|
note: obj.note?obj.note:'',
|
result: obj.presult
|
}
|
ele.children.push(o)
|
})
|
this.list.push(ele)
|
}
|
})
|
this.conclusionTable = [{
|
packageNo: data.packageNo,
|
userName: Array.from(new Set(userNameList)).join(','),
|
result: null
|
}]
|
this.$nextTick(()=>{
|
if(this.list.length>0){
|
this.changeResult()
|
}
|
})
|
}).catch(error=>{
|
this.$message.error("获取失败",error)
|
})
|
}else{
|
this.conclusionTable = []
|
}
|
},
|
},
|
}
|
</script>
|
|
<style>
|
.packageInspect-detail {
|
width: 100%;
|
height: 490px;
|
padding: 10px 20px;
|
display: flex;
|
border: 1px solid #ddd;
|
background-color: #fff;
|
margin-top: 10px;
|
box-sizing: border-box;
|
flex-wrap: wrap;
|
}
|
|
.packageInspect-result {
|
width: 100%;
|
height: 150px;
|
padding: 10px 20px;
|
display: flex;
|
border: 1px solid #ddd;
|
background-color: #fff;
|
margin-top: 10px;
|
box-sizing: border-box;
|
flex-wrap: wrap;
|
}
|
|
.packageInspect-basic {
|
background-color: #fff;
|
height: 120px;
|
display: flex;
|
flex-wrap: wrap;
|
padding: 10px 20px;
|
border: 1px solid #ddd;
|
box-sizing: border-box;
|
}
|
|
.packageInspect-related-stock-part {
|
background-color: #fff;
|
width: 100%;
|
height: 220px;
|
border: 1px solid #ddd;
|
padding: 10px 20px 0px 20px;
|
box-sizing: border-box;
|
}
|
|
.packageInspect-bom {
|
background-color: #fff;
|
width: 100%;
|
height: 499px;
|
border: 1px solid #ddd;
|
padding: 10px 20px;
|
box-sizing: border-box;
|
}
|
|
.packageInspect-bom .el-card__header {
|
padding: 1px 20px;
|
border-bottom: 0px solid #ebeef5;
|
}
|
|
.packageInspect-bom .el-card__body {
|
height: calc(100% - 22px);
|
}
|
|
.packageInspect-bom .el-card__body .el-collapse {
|
height: 100%;
|
overflow: auto;
|
}
|
|
.packageInspect-technology-params {
|
background-color: #fff;
|
width: calc(52% - 20px);
|
float: left;
|
height: 719px;
|
border: 1px solid #ddd;
|
padding: 10px 20px;
|
margin-left: 20px;
|
}
|
|
.packageInspect-structure {
|
background-color: #fff;
|
width: 35%;
|
float: left;
|
height: 719px;
|
border: 1px solid #ddd;
|
padding: 10px 20px;
|
box-sizing: border-box;
|
}
|
|
.packageInspect-flow {
|
background-color: #fff;
|
width: calc(65% - 20px);
|
float: left;
|
height: 719px;
|
border: 1px solid #ddd;
|
padding: 10px 20px;
|
margin-left: 20px;
|
box-sizing: border-box;
|
}
|
|
/*自定义disabled状态下checkbox的样式*/
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled.is-checked
|
.el-checkbox__inner {
|
background-color: #006eff;
|
border-color: #006eff;
|
}
|
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled.is-checked
|
+ span.el-checkbox__label {
|
color: #006eff;
|
border-color: #006eff;
|
}
|
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled
|
.el-checkbox__inner {
|
background-color: #ffffff;
|
cursor: pointer;
|
}
|
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled
|
+ span.el-checkbox__label {
|
color: #606266;
|
cursor: pointer;
|
}
|
|
.completeproductstructure-checkout .el-checkbox__inner::after {
|
border: 1px solid #fff !important;
|
border-left: 0 !important;
|
border-top: 0 !important;
|
cursor: pointer !important;
|
}
|
|
.packageInspect-bom-div {
|
width: 100%;
|
margin-bottom: 5px;
|
}
|
|
.packageInspect-technology-div {
|
width: 100%;
|
margin-bottom: 5px;
|
margin-right: 10px;
|
}
|
|
.packageInspect-technology-div .el-collapse {
|
border-top: 0px;
|
border-bottom: 0px;
|
}
|
|
.structure-detail-table th.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.structure-detail-table colgroup.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.final-product-checkout .el-card__header {
|
padding: 0px 20px;
|
border-bottom: 0px;
|
}
|
|
.final-product-checkout .el-card__body {
|
padding: 0px 20px 20px;
|
}
|
|
.orimaterial-quantity .el-card__header {
|
padding: 0px 20px;
|
border-bottom: 0px;
|
}
|
|
.orimaterial-quantity .el-card__body {
|
padding: 0px 20px 20px;
|
}
|
|
.packageInspect-materialcost-table th.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.packageInspect-materialcost-table colgroup.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.GooFlow .ico .ico_start:before {
|
color: red;
|
}
|
.highlight-tab-class {
|
color: #006eff;
|
background: #e4e7ed;
|
border-top: 1px solid #006eff;
|
}
|
.unhighlight-tab-class {
|
border: 1px solid #e4e7ed;
|
border-bottom: none;
|
}
|
.avue-crud__menu{
|
min-height: 0px;
|
}
|
</style>
|
