<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">扫描条码：</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">检验标准：</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;">检验人员：</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="tableDataRef"
|
: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"
|
>
|
<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="{row}">
|
<el-input v-if="row.isVisible===1" v-model="row.stepcheckitem_desc" placeholder="请输入" />
|
<div v-else> {{ row.stepcheckitem_desc }}</div>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="reslut"
|
label="检验结果"
|
>
|
<template slot-scope="{row}">
|
<el-radio-group v-model="row.reslut" size="small" @change="a=>changeRadioValue(a,row)">
|
<el-radio-button style="box-shadow: none" :label="0" @click.native.prevent="clickRadio(0,row)">
|
合格
|
</el-radio-button>
|
<el-radio-button style="box-shadow: none" :label="1" @click.native.prevent="clickRadio(1,row)">
|
不良
|
</el-radio-button>
|
</el-radio-group>
|
</template>
|
</el-table-column>
|
|
<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">检验结果：</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">首检保存</el-button>
|
<el-button type="primary" style="margin-left: 50px">巡检保存</el-button>
|
<el-button type="primary" style="margin-left: 50px">完工检保存</el-button>
|
<el-button type="info" style="margin-left: 50px">取消</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,
|
StepCheckItemSelect
|
} from '@/api/zlgl'
|
import { MesOrderSelectUser } from '@/api/scgl'
|
|
export default {
|
name: 'QXDY',
|
// components: {
|
// Pagination
|
// },
|
data() {
|
return {
|
mainHeight: 0,
|
tableHeight: 0,
|
form: { // 工序
|
orderstepqrcode: 'MO-2022-07-0001_1;001', // 扫描的二维码信息
|
wo_code: '', // 工单编码
|
partcode: '', // 产品编码
|
partname: '', // 产品名称
|
partspec: '', // 产品规格
|
stepcode: '', // 工序编码
|
stepname: ''// 工序名称
|
},
|
checkStandard: '', // 检验标准
|
checkStandardSelect: [], // 检验标准下拉数组
|
checkUser: '', // 检验人员
|
checkUserSelect: [], // 检验人员下拉数组
|
checkResult: '', // 检验结果
|
checkResultSelect: [
|
{ code: 'OK', name: '合格' },
|
{ code: 'NG', name: '不良' }
|
], // 检验结果下拉数组
|
checkdescr: '', // 检验备注（描述）
|
|
JYTableData: [], // 检验项信息表格
|
JYSelectArr: [], // 检验下拉数组
|
JYSelectedArr: [] // 已选检验项目数组
|
// checkresultArr:[
|
// {''}
|
// ]
|
}
|
},
|
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.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.reslut = 0 // 0合格 1不良
|
|
item.isVisible = 0
|
item.number = number
|
this.JYSelectedArr.push(item.code)
|
})
|
},
|
changeRadioValue(val, row) {
|
console.log(val, row)
|
},
|
clickRadio(e, row) {
|
console.log(e, row, 1)
|
row.reslut = row.reslut === 0 ? 1 : 0
|
// this.JYTableData.forEach(item => {
|
// if (row.code === item.code) {
|
// item.reslut = row.reslut === 0 ? 1 : 0
|
// }
|
// })
|
// e === row.reslut ? row.reslut = null : row.reslut = e
|
// this.$nextTick(() => {
|
// row.reslut = row.reslut === 0 ? 1 : 0
|
// })
|
//
|
// this.$forceUpdate()
|
|
// this.$refs.tableDataRef.toggleRowSelection(row, false)
|
},
|
|
reslutChange(val, row) {
|
|
},
|
xxxx(val) {
|
console.log(val)
|
},
|
changeSelect(val, row) {
|
console.log(val, row)
|
},
|
changSwitch(val, row) {
|
console.log(val)
|
// row.result = val
|
// this.JYTableData.forEach(item => {
|
// if (row.code === item.code) {
|
// item.reslut = val === 'NG' ? 'OK' : 'NG'
|
// }
|
// })
|
|
// row.reslut = !row.reslut
|
// this.handleValue(row)
|
},
|
handleValue(row) {
|
this.JYTableData.forEach(item => {
|
if (item.code === row.code) {
|
item.reslut = item.reslut === 'OK' ? 'NG' : 'OK'
|
}
|
})
|
},
|
//
|
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 = { code: '', name: '', stepcheckitem_desc: '', isVisible: 1, number }
|
this.JYTableData.push(data)
|
},
|
|
// 确认
|
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
|
this.JYTableData.splice(index, 1, {
|
number: row.number,
|
code: row.code,
|
name: row.name,
|
isVisible: 0,
|
reslut: row.reslut,
|
stepcheckitem_desc: row.stepcheckitem_desc
|
})
|
}
|
})
|
|
console.log(this.JYTableData)
|
},
|
// 取消
|
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)
|
}
|
})
|
},
|
// 获取页面高度
|
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>
|
