212 lines
7.2 KiB
Vue
212 lines
7.2 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card>
|
||
<el-select v-model="MachineValue" filterable size="small" style="margin:0px 10px 0px 10px;width: 180px;" placeholder="机床号" @change="getTreeData">
|
||
<el-option
|
||
v-for="item in Machine"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
<div style="float: left">{{ item.label }}</div>
|
||
<div style="float: right; color: #8492a6; font-size: 13px">{{ item.value2 }}</div>
|
||
</el-option>
|
||
</el-select>
|
||
<el-select v-show="false" v-model="Complete" size="small" clearable placeholder="是否完成" style="margin:0px 10px;width: 120px;">
|
||
<el-option
|
||
v-for="item in Completes"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"/>
|
||
</el-select>
|
||
</el-card>
|
||
<el-row>
|
||
<el-col style="width: 450px">
|
||
<el-card>
|
||
<el-table :data="tableData1" style="height: 670px" highlight-current-row border>
|
||
<el-table-column type="index" label="序号" width="50"/>
|
||
<el-table-column align="center" label="工序名" width="150">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.工艺名称 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="操作者" width="120">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.员工姓名 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="数量" show-overflow-tooltip min-width="90">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.投产数量 }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col style="width:600px">
|
||
<el-card>
|
||
<span>机床图号：{{ 机床图号 }} 机床名称：{{ 机床名称 }}</span>
|
||
<div style="margin: 10px 0 0 50px;height: 300px;overflow: auto">
|
||
<el-tree
|
||
:data="departmentData"
|
||
:props="defaultProps"
|
||
:indent="80"
|
||
:expand-on-click-node="false"
|
||
:render-content="renderContent"
|
||
node-key="机床流水号"
|
||
class="selectTree"
|
||
default-expand-all
|
||
@node-click="onClick"/>
|
||
</div>
|
||
</el-card>
|
||
<el-card style="height: 350px">
|
||
<el-table :data="tableData2" height="300" highlight-current-row border @row-click="searchTable1">
|
||
<el-table-column type="index" label="序号" width="50"/>
|
||
<el-table-column align="center" label="图号及规格" width="220">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.零件图号 + '\xa0\xa0\xa0\xa0\xa0' + scope.row.规格 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="制品名称" width="200">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.零件名称 }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" label="数量" min-width="90">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.投产总数量 }}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getMachines, getGroups, selectParts, selectProcedure } from '@/api/ManufacturingCenter/CompletionOfWorkshopComponents'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
MachineValue: '', // 机床号
|
||
Machine: [],
|
||
option: [], // 组号
|
||
tableData1: [],
|
||
tableData2: [],
|
||
Complete: 2,
|
||
Completes: [{
|
||
value: 1,
|
||
label: '完成'
|
||
}, {
|
||
value: 2,
|
||
label: '在制'
|
||
}],
|
||
机床图号: '',
|
||
机床名称: '',
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'label'
|
||
},
|
||
departmentData: [] // 树状数据
|
||
}
|
||
},
|
||
created() {
|
||
this.getMachine()
|
||
},
|
||
methods: {
|
||
getMachine() {
|
||
this.MachineValue = ''
|
||
this.Machine = []
|
||
getMachines().then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.Machine.push({
|
||
label: response.data[i].机床图号,
|
||
value: response.data[i].机床流水号,
|
||
value2: response.data[i].机床名称
|
||
})
|
||
}
|
||
}).then(() => {
|
||
this.MachineValue = this.Machine[0].value
|
||
this.getTreeData()
|
||
})
|
||
},
|
||
// 获取树状数据
|
||
getTreeData() {
|
||
this.tableData1 = []
|
||
this.tableData2 = []
|
||
for (let i = 0; i < this.Machine.length; i++) {
|
||
if (this.MachineValue === this.Machine[i].value) {
|
||
this.机床图号 = this.Machine[i].label
|
||
this.机床名称 = this.Machine[i].value2
|
||
}
|
||
}
|
||
this.option = []
|
||
getGroups(this.MachineValue).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.option.push({
|
||
isLeaf: false,
|
||
label: response.data[i].组号 + '\xa0\xa0\xa0' + (response.data[i].组件名称 ? response.data[i].组件名称 : ''),
|
||
value: response.data[i].组件流水号,
|
||
father: true,
|
||
children: []
|
||
})
|
||
}
|
||
}).then(() => {
|
||
this.option.map(firstLevel => {
|
||
// 根据分组查零件
|
||
selectParts(1, firstLevel.value, 0, 0).then(response => {
|
||
firstLevel.children = []
|
||
for (let j = 0; j < response.data.length; j++) {
|
||
firstLevel.children.push({
|
||
label: (response.data[j].零件图号 ? response.data[j].零件图号 : '无零件图号') + '\xa0\xa0\xa0\xa0\xa0\xa0' + (response.data[j].规格 ? response.data[j].规格 : '') + '\xa0\xa0\xa0\xa0\xa0\xa0' + (response.data[j].投产总数量 ? response.data[j].投产总数量 : '') + '..........' + (response.data[j].零件名称 ? response.data[j].零件名称 : '无零件名称'),
|
||
value: response.data[j].工艺计划流水号,
|
||
father: false
|
||
})
|
||
}
|
||
})
|
||
})
|
||
}).then(() => {
|
||
this.departmentData = this.option
|
||
})
|
||
},
|
||
onClick(num) {
|
||
this.tableData1 = []
|
||
this.tableData2 = []
|
||
if (num.father === true) {
|
||
selectParts(1, num.value, 0, 0).then(response => {
|
||
this.tableData2 = response.data
|
||
})
|
||
} else {
|
||
selectParts(0, 0, 1, num.value).then(response => {
|
||
this.tableData2 = response.data
|
||
})
|
||
}
|
||
},
|
||
renderContent(h, { node, data, store }) {
|
||
return (<span class='treeNotes'>{node.label}</span>)
|
||
},
|
||
searchTable1(row) {
|
||
this.tableData1 = []
|
||
selectProcedure(row.工艺计划流水号).then(response => {
|
||
this.tableData1 = response.data
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.selectTree{
|
||
.el-tree-node__content>.el-tree-node__expand-icon{
|
||
display: inline !important;
|
||
}
|
||
.el-tree-node:focus > .el-tree-node__content {
|
||
background-color: #ccc !important;
|
||
}
|
||
}
|
||
.treeNotes {
|
||
background-color: green;
|
||
}
|
||
</style>
|