300 lines
9.5 KiB
Vue
300 lines
9.5 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<el-card style="margin-bottom: 10px;width: 100%;">
|
||
<span style="margin-left: 10px">工位号：</span>
|
||
<el-select
|
||
v-model="stationNumberValue"
|
||
placeholder="请选择工位号"
|
||
clearable
|
||
filterable
|
||
size="small"
|
||
style="width: 200px; margin-left: 13px">
|
||
<el-option
|
||
v-for="item in stationNumber"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
size="mini" />
|
||
</el-select>
|
||
<span style="margin-left: 10px">基本机型：</span>
|
||
<el-select
|
||
v-model="bigEngine"
|
||
placeholder="请选择基本机型"
|
||
clearable
|
||
filterable
|
||
size="small"
|
||
style="width: 200px; margin-left: 13px"
|
||
@change="selectBigEngine">
|
||
<el-option
|
||
v-for="item in bigEngineList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
size="mini" />
|
||
</el-select>
|
||
|
||
<el-select v-model="EngineName1" placeholder="请选择比对零件号" filterable size="small">
|
||
<el-option
|
||
v-for="item in smallEngineList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
size="mini" />
|
||
</el-select>
|
||
<el-button size="small" type="distribution" style="margin: 0 2vw;" @click="searchBomList()">比对零件号差异</el-button>
|
||
<el-select v-model="EngineName2" placeholder="请选择比对零件号" filterable size="small">
|
||
<el-option
|
||
v-for="item in smallEngineList"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
size="mini" />
|
||
</el-select>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<!-- <el-card style="margin-bottom: 10px">
|
||
<el-button size="small" type="distribution">创建一级菜单</el-button>
|
||
</el-card> -->
|
||
<el-card>
|
||
<el-table
|
||
ref="multipleTableLeft"
|
||
:data="tableData"
|
||
:cell-class-name="cellClassName"
|
||
stripe
|
||
size="mini"
|
||
height="700"
|
||
style="height:calc(100vh - 330px);">
|
||
<el-table-column type="index" width="60" label="序号" align="center" />
|
||
<el-table-column align="center" label="工位号">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.工位号 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="零件号">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.零件号 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="零件编号">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.零件编号 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="零件名称">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.零件名称 }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="center" label="数量">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.数量 }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
|
||
<el-card>
|
||
<el-table
|
||
ref="multipleTableRight"
|
||
:data="tableData"
|
||
:cell-class-name="cellClassName"
|
||
stripe
|
||
size="mini"
|
||
height="700"
|
||
style="height:calc(100vh - 330px);">
|
||
<el-table-column type="index" width="60" label="序号" align="center" />
|
||
<el-table-column align="center" label="工位号">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.工位号2 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="零件号">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.零件号2 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="零件编号">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.零件编号2 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="零件名称">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.零件名称2 }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column align="center" label="数量">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.数量2 }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'MenuManagement',
|
||
data() {
|
||
return {
|
||
tableData: [],
|
||
EngineName1: '',
|
||
EngineName2: '',
|
||
rules1: {
|
||
moduleName: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||
},
|
||
rules2: {
|
||
moduleName: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||
},
|
||
smallEngineList: [],
|
||
dom1: null,
|
||
dom2: null,
|
||
stationNumber: [], // 工位号
|
||
stationNumberValue: '',
|
||
bigEngine: '',
|
||
bigEngineList: []
|
||
}
|
||
},
|
||
created() {
|
||
this.getSmallEngine()
|
||
this.getStationNumber()
|
||
this.getEndStation()
|
||
setTimeout(() => {
|
||
this.dom1 = this.$refs.multipleTableLeft.bodyWrapper
|
||
this.dom2 = this.$refs.multipleTableRight.bodyWrapper
|
||
this.listenerScroll()
|
||
}, 500)
|
||
},
|
||
methods: {
|
||
listenerScroll() {
|
||
this.dom2.addEventListener('scroll', () => {
|
||
// 横滚
|
||
this.dom1.scrollLeft = this.dom2.scrollLeft
|
||
// 竖滚
|
||
this.dom1.scrollTop = this.dom2.scrollTop
|
||
})
|
||
|
||
this.dom1.addEventListener('scroll', () => {
|
||
// 横滚
|
||
this.dom2.scrollLeft = this.dom1.scrollLeft
|
||
// 竖滚
|
||
this.dom2.scrollTop = this.dom1.scrollTop
|
||
})
|
||
},
|
||
// 工位号
|
||
getStationNumber() {
|
||
this.stationNumber = []
|
||
var param = []
|
||
var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.stationNumber.push({
|
||
label: response.data[i].工位号,
|
||
value: response.data[i].工位号
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 查询零件号数据
|
||
searchBomList() {
|
||
this.tableData = []
|
||
|
||
let stationNumberValue_check
|
||
|
||
this.stationNumberValue ? stationNumberValue_check = 1 : (stationNumberValue_check = 0, this.stationNumberValue = '')
|
||
|
||
var param = []
|
||
param[0] = ['零件号1', this.EngineName1]
|
||
param[1] = ['零件号2', this.EngineName2]
|
||
param[2] = ['工位号_ischeck', stationNumberValue_check]
|
||
param[3] = ['工位号', this.stationNumberValue]
|
||
var Data = this.CreateData('11', '北汽福田_BOM_零件差异查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
console.log(response, 66)
|
||
if (response.data.length !== 0) {
|
||
this.tableData = response.data
|
||
}
|
||
// this.loading = false
|
||
})
|
||
},
|
||
// 选择大机型触发事件
|
||
selectBigEngine() {
|
||
this.EngineName1 = ''
|
||
this.EngineName2 = ''
|
||
this.getSmallEngine()
|
||
},
|
||
// 获取大机型
|
||
getEndStation() {
|
||
this.bigEngine = ''
|
||
this.bigEngineList = []
|
||
var param = []
|
||
var Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.bigEngineList.push({
|
||
label: response.data[i].发动机型号,
|
||
value: response.data[i].发动机型号,
|
||
labelName: response.data[i].发动机机型标志
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 获取小机型
|
||
getSmallEngine() {
|
||
this.smallEngineList = []
|
||
var param = []
|
||
this.bigEngine ? param[0] = ['基本型号', this.bigEngine] : ''
|
||
var Data = this.CreateData('11', '北汽福田_BOM_零件号查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.smallEngineList.push({
|
||
label: response.data[i].零件号,
|
||
value: response.data[i].零件号
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 根据差异来决定该行颜色
|
||
cellClassName({ row, column }) {
|
||
let isNoEqual = false
|
||
row.工位号 !== row.工位号2 ? isNoEqual = true : ''
|
||
// row.零件号 !== row.零件号2 ? isNoEqual = true : ''
|
||
row.零件编号 !== row.零件编号2 ? isNoEqual = true : ''
|
||
row.零件名称 !== row.零件名称2 ? isNoEqual = true : ''
|
||
row.数量 !== row.数量2 ? isNoEqual = true : ''
|
||
|
||
if (isNoEqual) {
|
||
return 'NoEqual-row'
|
||
}
|
||
return ''
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.custom-tree-node {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
padding-right: 8px;
|
||
}
|
||
|
||
/deep/.el-table .el-table__body .NoEqual-row {
|
||
background: rgba(255, 255, 0, 0.5) !important;
|
||
/* color: #fff !important; */
|
||
}
|
||
</style>
|