269 lines
10 KiB
Vue
269 lines
10 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">
|
||
{{ scope.row.完成日期 ? scope.row.完成日期.split(' ')[0] : '' }}
|
||
</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自制：' + response.data[j].考核状态名称 : (response.data[j].零件类型 === 2 ? '\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制造采购' : '\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外购：' + response.data[j].采购状态)),
|
||
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>
|