270 lines
9.7 KiB
Vue
270 lines
9.7 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 :span="8">
|
|
<el-card>
|
|
<el-table :data="tableData1" :row-class-name="tableRowClassName" style="height: 670px" highlight-current-row border>
|
|
<el-table-column align="center" label="工序名" width="110">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.工艺名称 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作者" width="100">
|
|
<template slot-scope="scope">
|
|
<!--{{ scope.row.员工姓名 === '超级管理员' && scope.row.工序状态 !== 4 ? '' : scope.row.员工姓名 }}-->
|
|
{{ scope.row.工序间是否外协 === 2 ? '外协' : (scope.row.员工姓名 === '超级管理员' && scope.row.工序状态 !== 4 ? '' : 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-column align="center" label="工序状态" show-overflow-tooltip min-width="90">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.工序状态 >= 4">已完成</span>
|
|
<span v-else>未完成</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<el-card>
|
|
<div :style="{background:MachineColor}" style="color: white;margin-top: 5px">{{ 机床图号 }} {{ 机床名称 }}</div>
|
|
<div style="margin: 10px 0 0 20px;height: 650px;overflow: auto">
|
|
<el-tree
|
|
:data="departmentData"
|
|
:props="defaultProps"
|
|
:indent="50"
|
|
:expand-on-click-node="false"
|
|
:render-content="renderContent"
|
|
node-key="机床流水号"
|
|
class="selectTree"
|
|
@node-click="onClick"/>
|
|
</div>
|
|
</el-card>
|
|
<el-card v-if="false" 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, getMachinesStatue, getGroups, selectParts, selectProcedure } from '@/api/ManufacturingCenter/CompletionOfWorkshopComponents'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
MachineColor: '',
|
|
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
|
|
getMachinesStatue(this.MachineValue).then(res => {
|
|
if (res.data[0].是否发货 === 0) {
|
|
this.MachineColor = 'rgb(126,172,237)'
|
|
} else {
|
|
this.MachineColor = 'green'
|
|
}
|
|
})
|
|
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].组件流水号,
|
|
组件完成状态: 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].零件名称 : '无零件名称') + (response.data[j].零件类型 === 1 ? '' : '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0外购'),
|
|
value: response.data[j].工艺计划流水号,
|
|
考核状态: response.data[j].考核状态,
|
|
采购状态: response.data[j].采购状态,
|
|
零件类型: response.data[j].零件类型,
|
|
father: false
|
|
})
|
|
}
|
|
})
|
|
})
|
|
}).then(() => {
|
|
this.departmentData = this.option
|
|
})
|
|
},
|
|
onClick(num) {
|
|
this.tableData1 = []
|
|
this.tableData2 = []
|
|
if (num.father === false) {
|
|
if (num.零件类型 === 1) {
|
|
selectProcedure(num.value).then(response => {
|
|
this.tableData1 = response.data
|
|
})
|
|
}
|
|
}
|
|
// 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 }) {
|
|
if (node.data.father === false) {
|
|
if (node.data.零件类型 === 1) { // 自制
|
|
if (parseInt(node.data.考核状态) > 6) {
|
|
return (<span class='treeNotesComplate'>{node.label}</span>)
|
|
} else {
|
|
return (<span class='treeNotesUnComplate'>{node.label}</span>)
|
|
}
|
|
} else { // 外购
|
|
if (node.data.采购状态 === '已完成') {
|
|
return (<span class='treeNotesComplate'>{node.label}</span>)
|
|
} else {
|
|
return (<span class='treeNotesUnComplate'>{node.label}</span>)
|
|
}
|
|
}
|
|
} else {
|
|
if (node.data.组件完成状态 === '已完成') {
|
|
return (<span class='treeNotesComplate'>{node.label}</span>)
|
|
} else {
|
|
return (<span class='treeNotesUnComplate'>{node.label}</span>)
|
|
}
|
|
}
|
|
},
|
|
searchTable1(row) {
|
|
this.tableData1 = []
|
|
selectProcedure(row.工艺计划流水号).then(response => {
|
|
this.tableData1 = response.data
|
|
})
|
|
},
|
|
tableRowClassName({ row, rowIndex }) {
|
|
if (row.工序状态 >= 4) {
|
|
return 'cjzuwcqk_complet'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.el-table .cjzuwcqk_complet {
|
|
background: #67C23A;
|
|
}
|
|
</style>
|
|
<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;
|
|
}
|
|
}
|
|
.treeNotesComplate {
|
|
color: black;
|
|
background-color: #67C23A;
|
|
}
|
|
.treeNotesUnComplate {
|
|
color: black;
|
|
}
|
|
</style>
|