<template>
|
<div class="app-container">
|
<el-row :gutter="5">
|
<el-col :span="6">
|
<el-card class="box-card">
|
<div class="card-item">
|
<span class="label">工位编号:</span>
|
<el-select v-model="locationCode" placeholder="请选择" class="content-item" @change="handleLocationChange">
|
<el-option
|
v-for="item in locationCodeOptions"
|
:key="item.locationCode"
|
:label="item.locationCode"
|
:value="item.locationCode">
|
</el-option>
|
</el-select>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="6">
|
<el-card class="box-card">
|
<div class="card-item">
|
<span class="label">样机编号:</span>
|
<span class="content-item">{{prototypeNumber}}</span>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="12">
|
<el-card class="box-card">
|
<div class="card-item">
|
<span class="label">物料编号:</span>
|
<el-input class="content-item" v-model="materialCode" placeholder="请输入物料编号" @keyup.enter.native="handleMaterialCodeEnter"></el-input>
|
<el-button @click="test1" type="primary">主要按钮</el-button>
|
<el-button type="success">成功按钮</el-button>
|
</div>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-card class="box-card">
|
<el-table
|
ref="formulaTable"
|
:data="sortedFormulaData"
|
height="350"
|
style="width: 100%"
|
:row-class-name="tableRowClassName"
|
>
|
<el-table-column show-overflow-tooltip label="工位编号" align="center" prop="locationCode" />
|
<el-table-column show-overflow-tooltip label="产品编号" align="center" prop="productCode" />
|
<el-table-column show-overflow-tooltip label="操作内容" align="center" prop="operationContent" />
|
<el-table-column show-overflow-tooltip label="物料编码" align="center" prop="materialCode" />
|
<el-table-column show-overflow-tooltip label="采集值" align="center" prop="collectData" />
|
<el-table-column show-overflow-tooltip label="结果" align="center" prop="results" />
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-card class="box-card">
|
<span>缺陷记录:</span>
|
<el-input style="width: 70%" v-model="defectInformation" placeholder="请输入缺陷记录"></el-input>
|
</el-card>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import { listLocationInfo, getLocationInfo, delLocationInfo, addLocationInfo, updateLocationInfo } from "@/api/main/bs/locationInfo";
|
import {addInfo, delInfo, getInfo, listInfo, updateCollectData, updateInfo} from "@/api/main/bs/formulaChildinfo";
|
|
export default {
|
name: "workstationOperation",
|
data() {
|
return {
|
printInfoData: {
|
softwareVersion: 'SW001.001', //软件版本号
|
hardwareVersion: 'HW001.001', //硬件版本号
|
printModel: 'H2155D', //型号
|
partNumber: '0', //零部件号
|
supplierCode: '993983', //供应商编码
|
},
|
locationCode: '',
|
prototypeNumber: '',
|
materialCode: '',
|
defectInformation: '',
|
locationCodeOptions: [],
|
formulaTableData: [],
|
isFirstEnter: true
|
}
|
},
|
created() {
|
this.initLocationOptions()
|
},
|
computed: {
|
sortedFormulaData() {
|
// 对数据进行排序，OK的放在前面
|
return [...this.formulaTableData].sort((a, b) => {
|
if (a.results === 'OK' && b.results !== 'OK') return -1;
|
if (a.results !== 'OK' && b.results === 'OK') return 1;
|
return 0;
|
});
|
}
|
},
|
methods: {
|
async initLocationOptions() {
|
try {
|
const res = await listLocationInfo()
|
this.locationCodeOptions = res.rows
|
} catch (error) {
|
this.$message.error('获取工位列表失败')
|
}
|
},
|
handleLocationChange(value) {
|
if (!value) {
|
this.prototypeNumber = ''
|
this.materialCode = ''
|
this.formulaTableData = []
|
return
|
}
|
this.isFirstEnter = true
|
this.prototypeNumber = ''
|
this.materialCode = ''
|
this.formulaTableData = []
|
},
|
async handleMaterialCodeEnter() {
|
if (!this.locationCode) {
|
this.$message.warning('请先选择工位')
|
return
|
}
|
|
if (this.isFirstEnter) {
|
this.prototypeNumber = this.materialCode
|
this.materialCode = ''
|
this.isFirstEnter = false
|
|
try {
|
const res = await listInfo({
|
locationCode: this.locationCode,
|
pageFlag: true,
|
})
|
console.log(res)
|
this.formulaTableData = res.rows
|
} catch (error) {
|
this.$message.error('获取配方数据失败')
|
}
|
} else {
|
try {
|
const res = await updateCollectData({
|
locationCode: this.locationCode,
|
inputValue: this.materialCode
|
})
|
|
if (res.code === 200) {
|
this.formulaTableData = res.data
|
this.$message.success('更新成功')
|
this.materialCode = '' // 清空输入框
|
|
// 在数据更新后，滚动到合适的位置
|
this.$nextTick(() => {
|
const table = this.$refs.formulaTable;
|
const completedCount = this.sortedFormulaData.filter(item => item.results === 'OK').length;
|
const totalCount = this.sortedFormulaData.length;
|
|
if (completedCount < totalCount) {
|
// 计算需要滚动的位置：将第一个未完成的行显示在中间
|
const rowHeight = 40; // 预估的行高
|
const scrollPosition = completedCount * rowHeight - (table.$el.clientHeight / 2) + rowHeight;
|
|
// 设置表格的滚动位置
|
table.bodyWrapper.scrollTop = Math.max(0, scrollPosition);
|
}
|
});
|
} else {
|
this.$message.warning(res.msg)
|
}
|
} catch (error) {
|
this.$message.error('更新失败')
|
}
|
}
|
},
|
|
// 添加行样式方法
|
tableRowClassName({row}) {
|
if (row.results === 'OK') {
|
return 'success-row'
|
}
|
return ''
|
},
|
|
test1(){
|
let scanValue = '0RSMB05A132E3AF3V0000001'
|
if(scanValue.includes("0RSMB")){
|
this.$message.warning("成功"+scanValue)
|
}else {
|
this.$message.error('扫码识别错误的产品序列号'+scanValue+'请重新扫码');
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.app-container {
|
padding: 20px;
|
}
|
|
/* 修改成功行的样式，添加 hover 状态 */
|
/deep/ .el-table .success-row {
|
background-color: #5ce013 !important;
|
}
|
|
/deep/ .el-table .success-row:hover > td {
|
background-color: #5ce311 !important;
|
}
|
|
.el-row {
|
margin-bottom: 20px;
|
}
|
|
.box-card {
|
/*margin-bottom: 20px;*/
|
}
|
|
.card-item {
|
display: flex;
|
align-items: center;
|
min-height: 40px;
|
}
|
|
.label {
|
min-width: 80px;
|
margin-right: 10px;
|
color: #606266;
|
line-height: 40px;
|
}
|
|
.content-item {
|
flex: 1;
|
line-height: 40px;
|
}
|
|
.content-item:not(.el-select):not(.el-input) {
|
height: 40px;
|
display: flex;
|
align-items: center;
|
}
|
|
.el-select {
|
width: 100%;
|
}
|
|
.el-input {
|
width: 100%;
|
}
|
|
/* 添加平滑滚动效果 */
|
/deep/ .el-table__body-wrapper {
|
scroll-behavior: smooth;
|
}
|
</style>
|
