<template>
|
<div>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
<div style="margin-left: 10px;margin-top:10px;display: flex;flex-direction: column">
|
<div style="margin-bottom: 15px;font-size: 14px">
|
<i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />扫码信息
|
</div>
|
<div style="display: flex;align-items: center">
|
<div style="width: 90px;display: flex"><div style="color: red;width:10px">*</div>扫描条码：</div>
|
<el-input
|
v-model="form.orderstepqrcode"
|
name="GXproduceCode"
|
style="width: 300px"
|
@keyup.enter.native="val=>enterNative(val,'GXproduceCode')"
|
/>
|
</div>
|
<!-- 六项信息 -->
|
<div style="display:flex;margin-top: 10px;align-items: center; line-height: 50px">
|
<div style="display: flex;">
|
<div style="display: flex;margin-right: 50px">
|
<div style="width: 90px">工单编码：</div>
|
<div style="width: 200px">{{ form.wo_code }}</div>
|
</div>
|
<div style="display: flex;">
|
<div style="width: 90px">产品编码：</div>
|
<div style="width: 100px">{{ form.partcode }}</div>
|
</div>
|
</div>
|
<div style="display: flex;margin-left: 30px;">
|
<div style="display: flex;margin-right: 50px">
|
<div style="width: 90px">产品名称：</div>
|
<div style="width: 100px">{{ form.partname }}</div>
|
</div>
|
<div style="display: flex;">
|
<div style="width: 90px">产品规格：</div>
|
<div style="width: 100px">{{ form.partspec }}</div>
|
</div>
|
</div>
|
<div style=" display: flex;margin-left: 30px;">
|
<div style="display: flex;margin-right: 50px">
|
<div style="width: 90px">工序编码：</div>
|
<div>{{ form.stepcode }}</div>
|
</div>
|
<div style="display: flex;">
|
<div style="width: 90px">工序名称：</div>
|
<div>{{ form.stepname }}</div>
|
</div>
|
</div>
|
</div>
|
<div style="margin: 15px 0;font-size: 14px">
|
<i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />检验标准信息
|
</div>
|
<div style="display: flex;align-items: center">
|
<div style="width: 90px;display: flex"><div style="color: red;width:10px">*</div>检验标准：</div>
|
<el-select
|
v-model="checkStandard"
|
style="width: 200px;"
|
placeholder="请选择"
|
filterable
|
@change="changeCheckStandard"
|
>
|
<el-option
|
v-for="item in checkStandardSelect"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
<div style="width: 90px;margin-left: 50px;display: flex"><div style="color: red;width:10px">*</div>检验人员：</div>
|
<el-select
|
v-model="checkUser"
|
style="width: 200px;"
|
placeholder="请选择"
|
filterable
|
>
|
<el-option
|
v-for="item in checkUserSelect"
|
:key="item.usercode"
|
:label="item.username"
|
:value="item.usercode"
|
/>
|
</el-select>
|
</div>
|
<div style="margin: 15px 0;font-size: 14px">
|
<i class="el-icon-s-operation" style="color:#42b983; margin-right: 5px" />检验项信息
|
</div>
|
<div>
|
<el-button type="primary" @click="add">新增</el-button>
|
</div>
|
<div style="margin-top: 10px">
|
<el-table
|
ref="multipleTable"
|
:data="JYTableData"
|
:height="(tableHeight-195)+'px'"
|
border
|
stripe
|
:style="{width: 100+'%',height:tableHeight+'px',}"
|
highlight-current-row
|
:header-cell-style="this.$headerCellStyle"
|
:cell-style="this.$cellStyle"
|
:row-class-name="tableRowClassName"
|
@selection-change="handleSelectionChange"
|
@cell-dblclick="cellDblclick"
|
>
|
<el-table-column
|
type="index"
|
label="序号"
|
width="100"
|
/>
|
<!-- <el-table-column-->
|
<!-- prop="code"-->
|
<!-- label="检验项目编码"-->
|
<!-- sortable="custom"-->
|
<!-- />-->
|
<el-table-column
|
prop="code"
|
label="检验项目编码(名称)"
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.isVisible===0" style="display: flex;">
|
<div>{{ row.code }}</div>
|
<div style="margin-left: 10px">{{ row.name }}</div>
|
</div>
|
|
<el-select
|
v-if="row.isVisible===1"
|
v-model="row.code"
|
filterable
|
style="width: 400px;"
|
placeholder="请选择"
|
@change="val=>changeCode(val,row)"
|
>
|
<el-option
|
v-for="item in JYSelectArr"
|
:key="item.code"
|
:label="item.code+''+item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="stepcheckitem_desc"
|
label="检验标准描述"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-if="scope.row.isVisible===1||scope.row.index === tabClickIndex && tabClickLabel === '检验标准描述'"
|
v-model="scope.row.stepcheckitem_desc"
|
placeholder="请输入"
|
@keyup.enter.native="val=>keyUpEnterNative(val,scope.row)"
|
/>
|
<div
|
v-else
|
> {{ scope.row.stepcheckitem_desc }}</div>
|
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="result"
|
label="检验结果"
|
width="100"
|
>
|
<template slot-scope="{row}">
|
<div v-if="row.result==='OK'">合格</div>
|
<div v-if="row.result==='NG'">不良</div>
|
</template>
|
|
<!-- <template slot-scope="{row}">-->
|
<!-- <el-radio-group-->
|
<!-- v-model="row.result"-->
|
<!-- size="small"-->
|
<!-- @change="a=>changeRadioValue(a,row)"-->
|
<!-- >-->
|
<!-- <el-radio-->
|
<!-- :label="0"-->
|
<!-- @change="clickRadio(0,row)"-->
|
<!-- >-->
|
<!-- 合格-->
|
<!-- </el-radio>-->
|
<!-- <el-radio-->
|
<!-- :label="1"-->
|
<!-- @change="clickRadio(1,row)"-->
|
<!-- >-->
|
<!-- 不良-->
|
<!-- </el-radio>-->
|
<!-- </el-radio-group>-->
|
<!-- </template>-->
|
|
</el-table-column>
|
|
<el-table-column
|
type="selection"
|
width="55"
|
/>
|
|
<el-table-column
|
label="操作"
|
>
|
<template slot-scope="{row}">
|
<div class="operationClass">
|
<el-button v-if="row.isVisible===0" type="text" @click="del(row)">删除</el-button>
|
<el-button v-if="row.isVisible===1" type="text" @click="confirm(row)">确认</el-button>
|
<el-button v-if="row.isVisible===1" type="text" @click="cancel(row)">取消</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- 检验结果 和 检验备注 -->
|
<div style="display: flex;margin-top: 20px;align-items: center">
|
|
<div style="display: flex;margin-right: 50px;align-items: center">
|
<div style="width: 90px;display: flex"><div style="color: red;width:10px">*</div>检验结果：</div>
|
<el-select
|
v-model="checkResult"
|
style="width: 200px;"
|
placeholder="请选择"
|
filterable
|
>
|
<el-option
|
v-for="item in checkResultSelect"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</div>
|
<div style="display: flex;align-items: center">
|
<div style="width: 90px">检验备注：</div>
|
<el-input v-model="checkdescr" style="width: 300px" placeholder="请输入" />
|
</div>
|
|
</div>
|
|
<div style="display: flex;margin: 30px 0;align-items: center">
|
<el-button type="primary" @click="submitButton('FirstCheck')">首检保存</el-button>
|
<el-button type="primary" style="margin-left: 50px" @click="submitButton('PatroCheck')">巡检保存</el-button>
|
<el-button type="primary" style="margin-left: 50px" @click="submitButton('EndCheck')">完工检保存</el-button>
|
<el-button type="info" style="margin-left: 50px" @click="submitButton('Cancel')">取消</el-button>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
// import Pagination from '@/components/Pagination'
|
|
// const SER_HZ = /^[\u4e00-\u9fa5]+$/
|
import $ from 'jquery'
|
import {
|
MesOrderStepCheckItemList,
|
MesOrderStepCheckSearch,
|
MesOrderStepCheckSelect, SaveMesOrderStepCheckItem,
|
StepCheckItemSelect
|
} from '@/api/zlgl'
|
import { MesOrderSelectUser } from '@/api/scgl'
|
|
export default {
|
name: 'QXDY',
|
// components: {
|
// Pagination
|
// },
|
data() {
|
return {
|
mainHeight: 0,
|
tableHeight: 0,
|
form: { // 工序
|
// MO-2022-07-0001_1;001
|
orderstepqrcode: '', // 扫描的二维码信息
|
wo_code: '', // 工单编码
|
partcode: '', // 产品编码
|
partname: '', // 产品名称
|
partspec: '', // 产品规格
|
stepcode: '', // 工序编码
|
stepname: ''// 工序名称
|
},
|
checkStandard: '', // 检验标准
|
checkStandardSelect: [], // 检验标准下拉数组
|
checkUser: '', // 检验人员
|
checkUserSelect: [], // 检验人员下拉数组
|
checkResult: '', // 检验结果
|
checkResultSelect: [
|
{ code: 'OK', name: '合格' },
|
{ code: 'NG', name: '不良' }
|
], // 检验结果下拉数组
|
checkdescr: '', // 检验备注（描述）
|
|
JYTableData: [], // 检验项信息表格
|
JYSelectArr: [], // 检验下拉数组
|
JYSelectedArr: [], // 已选检验项目数组
|
multipleSelection: [], // 表格多选框
|
tabClickIndex: null, // 点击的单元格
|
tabClickLabel: '', // 当前点击的列名
|
isCancel: false// 是否点击取消按钮
|
}
|
},
|
created() {
|
this.getMesOrderStepCheckSelect()
|
this.getMesOrderSelectUser()
|
this.getJYSelectArr()
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
|
this.getFocus()
|
},
|
methods: {
|
// 获取聚焦
|
getFocus() {
|
this.$nextTick(() => {
|
$("input[name='GXproduceCode']")[0].focus()
|
})
|
},
|
// 获取检验标准下拉数组
|
async getMesOrderStepCheckSelect() {
|
const { data: res } = await MesOrderStepCheckSelect()
|
this.checkStandardSelect = res
|
},
|
// 获取检验人员下拉
|
async getMesOrderSelectUser() {
|
const { data: res } = await MesOrderSelectUser()
|
this.checkUserSelect = res
|
},
|
// 获取检验项下拉数组
|
async getJYSelectArr() {
|
const { data: res } = await StepCheckItemSelect()
|
this.JYSelectArr = res
|
},
|
// 检验标准下拉值改变
|
async changeCheckStandard(val) {
|
this.isCancel = false
|
this.JYSelectedArr = []
|
const { data: res } = await MesOrderStepCheckItemList({ checkstandcode: val })
|
this.JYTableData = res
|
|
this.JYTableData.forEach(item => {
|
let number = Math.random() * Math.random()// 作为删除时的标识符
|
number = number === 0 ? (10 + Math.random()) : number
|
|
// item.result = 0 // 0合格 1不良
|
item.result = 'OK'
|
|
item.isVisible = 0
|
item.number = number
|
this.JYSelectedArr.push(item.code)
|
})
|
this.$refs.multipleTable.toggleAllSelection()
|
},
|
// changeRadioValue(val, row) {
|
// console.log(val, row.result, 20000)
|
// },
|
// clickRadio(e, row) {
|
// console.log(e, row.result, 10000)
|
// row.result = e
|
// },
|
handleSelectionChange(val) {
|
this.multipleSelection = val
|
const arr = this.multipleSelection.map(i => i.number)
|
this.JYTableData.forEach(it => {
|
if (arr.includes(it.number)) {
|
it.result = 'OK'
|
} else {
|
it.result = 'NG'
|
}
|
})
|
|
if (this.multipleSelection.length > 0 && this.multipleSelection.length === this.JYTableData.length) {
|
this.checkResult = 'OK'
|
} else {
|
this.checkResult = 'NG'
|
}
|
if (this.isCancel) {
|
this.checkResult = ''
|
}
|
},
|
// 检验项目编码（名称）
|
changeCode(val, row) {
|
row.stepcheckitem_desc = this.JYSelectArr.find(it => it.code === val).descr
|
row.name = this.JYSelectArr.find(it => it.code === val).name
|
},
|
// 扫码键盘回车事件
|
async enterNative(val, belong) {
|
if (belong === 'GXproduceCode') {
|
const res = await MesOrderStepCheckSearch({ orderstepqrcode: this.form.orderstepqrcode })
|
this.form.wo_code = res.data[0].wo_code
|
this.form.partcode = res.data[0].partcode
|
this.form.partname = res.data[0].partname
|
this.form.partspec = res.data[0].partspec
|
this.form.stepcode = res.data[0].stepcode
|
this.form.stepname = res.data[0].stepname
|
}
|
},
|
|
// 新增
|
add() {
|
if (this.JYTableData.length > 0 && this.JYTableData[this.JYTableData.length - 1].isVisible === 1) {
|
return this.$message.info('请先确定或取消本条记录！')
|
}
|
|
let number = Math.random() * Math.random()// 作为删除时的标识符
|
number = number === 0 ? (10 + Math.random()) : number
|
const data = { result: 'OK', code: '', name: '', stepcheckitem_desc: '', isVisible: 1, number }
|
this.JYTableData.push(data)
|
this.$refs.multipleTable.toggleRowSelection(data, true)
|
},
|
|
// 确认
|
confirm(row) {
|
if (row.code === '') {
|
return this.$message.info('检验项目编码(名称)不能为空！')
|
}
|
|
if (this.JYSelectedArr.find(item => item === row.code) !== undefined) {
|
return this.$message.info('检验项目编码(名称)不能重复！')
|
} else {
|
this.JYSelectedArr.push(row.code)
|
}
|
this.JYTableData.forEach((item, index) => {
|
if (item.number === row.number) {
|
item.isVisible = 0
|
item.code = row.code
|
item.name = row.name
|
item.result = row.result
|
item.stepcheckitem_desc = row.stepcheckitem_desc
|
}
|
})
|
|
if (this.multipleSelection.length > 0 && this.multipleSelection.length === this.JYTableData.length) {
|
this.checkResult = 'OK'
|
} else {
|
this.checkResult = 'NG'
|
}
|
},
|
// 取消
|
cancel(row) {
|
this.JYTableData.forEach((item, index) => {
|
if (item.number === row.number) {
|
this.JYTableData.splice(index, 1)
|
}
|
})
|
|
this.JYSelectedArr.forEach((item, index) => {
|
if (item === row.code) {
|
this.JYSelectedArr.splice(index, 1)
|
}
|
})
|
},
|
|
// 删除
|
del(row) {
|
this.JYTableData.forEach((item, index) => {
|
if (item.number === row.number) {
|
this.JYTableData.splice(index, 1)
|
}
|
})
|
|
this.JYSelectedArr.forEach((item, index) => {
|
if (item === row.code) {
|
this.JYSelectedArr.splice(index, 1)
|
}
|
})
|
},
|
// 提交
|
submitButton(val) {
|
if (val !== 'Cancel') {
|
if (this.form.orderstepqrcode.length < 1) {
|
return this.$message.info('扫描条码不能为空！')
|
}
|
if (this.checkStandard.length < 1) {
|
return this.$message.info('检验标准不能为空！')
|
}
|
if (this.checkUser.length < 1) {
|
return this.$message.info('检验人员不能为空！')
|
}
|
if (this.JYTableData.length < 1) {
|
return this.$message.info('检验项信息不能为空！')
|
}
|
if (this.checkResult.length < 1) {
|
return this.$message.info('检验结果不能为空！')
|
}
|
|
const text = val === 'FirstCheck' ? '首检保存' : (val === 'PatroCheck' ? '巡检保存' : '完工检保存')
|
this.$confirm('是否确认' + text + '?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const arr = []
|
this.JYTableData.forEach((item, index) => {
|
arr.push({
|
code: item.code,
|
name: item.name,
|
seq: (index + 1),
|
descr: item.stepcheckitem_desc,
|
checkresult: item.result
|
})
|
})
|
const data = {
|
'mesordercode': this.form.wo_code, // 工单编号
|
'partcode': this.form.partcode, // 产品编码
|
'stepcode': this.form.stepcode, // 工序编码
|
'checkstanedcode': this.checkStandard, // 检验标准编码
|
'checkusercode': this.checkUser, // 检验人员编码
|
'checktypecode': val, // 检验类型编码
|
'checkresult': this.checkResult, // 检验结果(OK(合格) NG(不良))
|
'checkdescr': this.checkdescr, // 检验描述
|
'data': arr
|
}
|
SaveMesOrderStepCheckItem(data).then(res => {
|
if (res.code === '200') {
|
this.$message.success(text + '成功！')
|
this.clearContent()
|
this.getFocus()
|
}
|
})
|
}).catch(() => {
|
this.$message.info('已取消保存')
|
})
|
} else {
|
this.clearContent()
|
this.getFocus()
|
}
|
},
|
// 清空页面内容
|
clearContent() {
|
this.JYTableData = []
|
this.multipleSelection = []
|
this.JYSelectedArr = []
|
this.checkdescr = ''
|
this.checkUser = ''
|
this.checkResult = ''
|
this.checkStandard = ''
|
this.form.orderstepqrcode = ''
|
this.form.wo_code = ''
|
this.form.partcode = ''
|
this.form.partname = ''
|
this.form.partspec = ''
|
this.form.stepcode = ''
|
this.form.stepname = ''
|
|
this.isCancel = true
|
},
|
|
// 单元格被点击时
|
cellDblclick(row, column, cell, event) {
|
console.log(row, column, cell, event)
|
console.log(column.label)
|
console.log(row.index)
|
switch (column.label) {
|
case '检验标准描述':
|
this.tabClickIndex = row.index
|
this.tabClickLabel = column.label
|
break
|
// case '判责金额(元)':
|
// this.tabClickIndex = row.index
|
// this.tabClickLabel = column.label
|
// break
|
default: return
|
}
|
},
|
// 回车事件
|
keyUpEnterNative(val, row) {
|
this.tabClickLabel = ''
|
},
|
|
tableRowClassName({ row, rowIndex }) {
|
// 把每一行的索引放进row
|
row.index = rowIndex
|
},
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 250
|
this.tableHeight = this.mainHeight - 100
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
::v-deep .el-button--primary {
|
background-color: $main_color !important;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
//border: 1px solid $main_color;
|
border: none;
|
padding: 0 20px;
|
}
|
|
::v-deep .el-button--primary:hover {
|
border: none;
|
}
|
|
::v-deep .el-button--info {
|
height: 30px;
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
}
|
|
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
|
background-color: $main_color !important;
|
}
|
|
::v-deep .el-dialog__footer {
|
display: flex;
|
justify-content: flex-end;
|
}
|
|
.footerButton {
|
display: flex;
|
justify-content: end;
|
}
|
|
::v-deep .el-button--default {
|
background-color: #ffffff !important;
|
height: 30px;
|
display: flex;
|
align-items: center;
|
padding: 0 20px;
|
}
|
|
::v-deep .el-button--default:hover {
|
color: #606266;
|
}
|
|
::v-deep .el-dialog__body {
|
padding: 20px 100px !important;
|
}
|
|
::v-deep .el-radio__input.is-checked .el-radio__inner {
|
background-color: $main_color;
|
border-color: $main_color;
|
}
|
|
::v-deep .el-radio__input.is-checked + .el-radio__label {
|
color: $main_color !important;
|
}
|
|
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
|
border-color: $main_color;
|
background-color: $main_color;
|
}
|
|
::v-deep .el-input__inner {
|
height: 30px;
|
line-height: 30px;
|
}
|
|
::v-deep .el-input__inner:focus {
|
border-color: $main_color;
|
}
|
|
::v-deep .el-table .caret-wrapper {
|
transform: scale(0.8);
|
}
|
|
::v-deep .cell {
|
display: flex !important;
|
align-items: center !important;
|
justify-content: space-between !important;
|
}
|
|
::v-deep .el-button--text {
|
color: $main_color;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
|
.operationClass {
|
height: 23px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.el-icon-share {
|
color: $main_color;
|
cursor: pointer;
|
}
|
|
.el-checkbox.is-bordered.is-checked {
|
border-color: $main_color;
|
}
|
|
::v-deep .el-radio__input.is-checked .el-radio__inner {
|
border-color: $main_color;
|
background: $main_color;
|
}
|
|
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
border-color: $main_color;
|
background: $main_color;
|
}
|
|
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
|
color: $main_color !important;
|
}
|
|
::v-deep .el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
margin: 10px 30px 0px 0;
|
}
|
|
::v-deep .el-radio__input.is-checked + .el-radio__label {
|
color: $main_color;
|
}
|
|
::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
|
margin: 10px 30px 0px 0;
|
}
|
|
.body ::v-deep .el-divider {
|
border: 1px solid #eee;
|
width: 99%;
|
margin: 10px auto;
|
}
|
|
.body ::v-deep .el-form-item {
|
margin-bottom: 0;
|
}
|
|
::v-deep .el-input__inner:focus {
|
border-color: $main_color;
|
}
|
|
::v-deep .el-select .el-input__inner:focus {
|
border-color: $main_color;
|
}
|
|
::v-deep .el-select-dropdown__item.selected {
|
color: $main_color;
|
}
|
|
::v-deep .el-checkbox__inner:hover {
|
border-color: $main_color;
|
}
|
|
::v-deep .el-textarea__inner:focus {
|
border-color: $main_color;
|
}
|
|
::v-deep .el-select .el-input .el-select__caret {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
</style>
|
