326 lines
8.3 KiB
Vue
326 lines
8.3 KiB
Vue
<template>
|
||
<VueScrollbar :class="$style.content">
|
||
<div :class="$style['flaw-detail']">
|
||
<div :class="$style['flaw-title']">
|
||
设备名称
|
||
</div>
|
||
<div :class="$style['flaw-title']">
|
||
配方名称
|
||
</div>
|
||
<div :class="$style['flaw-title']">
|
||
物料bom
|
||
</div>
|
||
<div :class="$style['flaw-title']">
|
||
工艺类型
|
||
</div>
|
||
<div :class="$style['flaw-title']">
|
||
描述
|
||
</div>
|
||
<div :class="$style['flaw-title']">
|
||
备注
|
||
</div>
|
||
<div :class="$style['flaw-btns']">
|
||
<el-button
|
||
type="success"
|
||
icon="el-icon-plus"
|
||
circle
|
||
@click="flawAdd()"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-for="(item, index) in process.processFlowEquipmentParams"
|
||
:key="index"
|
||
:class="$style['flaw-detail']"
|
||
>
|
||
<el-select
|
||
v-model="item.equipmentId"
|
||
:class="$style['flaw-select']"
|
||
filterable
|
||
clearable
|
||
placeholder="请选择"
|
||
@change="equipmentChange($event, item)"
|
||
>
|
||
<el-option
|
||
v-for="equipment in equipmentList"
|
||
:key="equipment.id"
|
||
:label="equipment.name"
|
||
:value="equipment.id"
|
||
/>
|
||
</el-select>
|
||
<el-select
|
||
v-model="item.equipmentRecipeId"
|
||
:class="$style['flaw-select']"
|
||
filterable
|
||
clearable
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="param in item.params"
|
||
:key="param.id"
|
||
:label="param.name"
|
||
:value="param.id"
|
||
/>
|
||
</el-select>
|
||
<el-select
|
||
v-model="item.equipmentBomId"
|
||
:class="$style['flaw-select']"
|
||
filterable
|
||
clearable
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="bom in item.boms"
|
||
:key="bom.id"
|
||
:label="bom.name"
|
||
:value="bom.id"
|
||
/>
|
||
</el-select>
|
||
<el-select
|
||
v-model="item.nodeType"
|
||
:class="$style['flaw-select']"
|
||
filterable
|
||
clearable
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="nodeType in nodeTypes"
|
||
:key="nodeType.value"
|
||
:label="nodeType.label"
|
||
:value="nodeType.value"
|
||
/>
|
||
</el-select>
|
||
<el-input v-model="item.description" :class="$style['flaw-select']" />
|
||
<el-input v-model="item.remark" :class="$style['flaw-select']" />
|
||
<el-button
|
||
type="success"
|
||
icon="el-icon-plus"
|
||
circle
|
||
@click="flawAdd(item)"
|
||
/>
|
||
<el-button
|
||
type="danger"
|
||
icon="el-icon-delete"
|
||
circle
|
||
@click="flawDel(item)"
|
||
/>
|
||
<el-button
|
||
type="info"
|
||
icon="el-icon-document"
|
||
circle
|
||
@click="$emit('on-detail', item)"
|
||
/>
|
||
</div>
|
||
</VueScrollbar>
|
||
</template>
|
||
<script>
|
||
import {
|
||
listAllEquipmentBom,
|
||
listAllEquipmentRecipe,
|
||
addProcessFlows,
|
||
listProcessFlowNode
|
||
} from '@/api/art-manage/art.js'
|
||
import { listEquipment } from '@/api/material-manage/material'
|
||
import remove from 'lodash/remove.js'
|
||
import findIndex from 'lodash/findIndex.js'
|
||
import VueScrollbar from 'vue-perfect-scrollbar'
|
||
export default {
|
||
name: 'ProcessTable',
|
||
components: { VueScrollbar },
|
||
props: {
|
||
processFlowId: {
|
||
type: String,
|
||
default: null
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
defaultFlaws: [],
|
||
process: {
|
||
processFlowId: this.processFlowId,
|
||
processFlowEquipmentParams: [
|
||
{
|
||
equipmentId: null,
|
||
equipmentRecipeId: null,
|
||
equipmentBomId: null,
|
||
nodeType: null,
|
||
processFlowId: this.processFlowId,
|
||
remark: null,
|
||
description: null,
|
||
boms: [],
|
||
params: []
|
||
}
|
||
]
|
||
},
|
||
currentFlawRow: {},
|
||
productDetBarcode: '',
|
||
warehouseBarcode: '',
|
||
equipmentList: [],
|
||
equipmentBomList: [],
|
||
equipmentParamList: [],
|
||
// 1、上片设备，2、加工设备，3、下片设备
|
||
nodeTypes: [
|
||
{
|
||
value: '1',
|
||
label: '上片设备'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '加工设备'
|
||
},
|
||
{
|
||
value: '3',
|
||
label: '下片设备'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
this.init()
|
||
this.$bus.on('on-process-save', this.save)
|
||
},
|
||
beforeDestroy() {
|
||
this.$bus.off('on-process-save', this.save)
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
flawAdd(item) {
|
||
const mid = [
|
||
{
|
||
equipmentId: null,
|
||
equipmentRecipeId: null,
|
||
equipmentBomId: null,
|
||
nodeType: null,
|
||
processFlowId: this.processFlowId,
|
||
remark: null,
|
||
description: null,
|
||
boms: [],
|
||
params: []
|
||
}
|
||
]
|
||
if (!item) {
|
||
this.process.processFlowEquipmentParams = mid.concat(
|
||
this.process.processFlowEquipmentParams
|
||
)
|
||
return
|
||
}
|
||
const index = findIndex(
|
||
this.process.processFlowEquipmentParams,
|
||
f => f === item
|
||
)
|
||
console.log(index)
|
||
const { length } = this.process.processFlowEquipmentParams
|
||
const beg = this.process.processFlowEquipmentParams.slice(0, index + 1)
|
||
const end = this.process.processFlowEquipmentParams.slice(
|
||
index + 1,
|
||
length
|
||
)
|
||
|
||
this.process.processFlowEquipmentParams = [].concat(beg, mid, end)
|
||
},
|
||
flawDel(item) {
|
||
console.log(item)
|
||
remove(this.process.processFlowEquipmentParams, f => f === item)
|
||
console.log(this.process.processFlowEquipmentParams)
|
||
this.process.processFlowEquipmentParams = this.process.processFlowEquipmentParams.concat(
|
||
[]
|
||
)
|
||
},
|
||
focusFlaw(item) {
|
||
console.log(item)
|
||
this.currentFlawRow = item
|
||
},
|
||
setFlaw(flaw) {
|
||
console.log(flaw)
|
||
this.currentFlawRow.description = flaw.defectName
|
||
this.currentFlawRow.fabricId = flaw.id
|
||
},
|
||
reset() {
|
||
console.log(this.defaultFlaws)
|
||
this.process.processFlowEquipmentParams = JSON.parse(
|
||
JSON.stringify(this.defaultFlaws)
|
||
)
|
||
},
|
||
save() {
|
||
const vm = this
|
||
console.log(JSON.stringify(vm.process))
|
||
if (vm.process.processFlowEquipmentParams.length === 0) {
|
||
vm.$alert('工艺节点为空，您确定要保存吗？', '[温馨提示]', {
|
||
confirmButtonText: '确定',
|
||
callback: action => {
|
||
console.log('保存')
|
||
addProcessFlows(vm.process)
|
||
}
|
||
})
|
||
} else {
|
||
addProcessFlows(vm.process)
|
||
}
|
||
},
|
||
async init() {
|
||
const allBomRes = await listAllEquipmentBom()
|
||
this.equipmentBomList = allBomRes.data
|
||
const allRecipeRes = await listAllEquipmentRecipe()
|
||
this.equipmentParamList = allRecipeRes.data
|
||
const allEquipmentRes = await listEquipment()
|
||
this.equipmentList = allEquipmentRes.data
|
||
const allNodeRes = await listProcessFlowNode({ processFlowId: this.processFlowId })
|
||
console.log(allNodeRes)
|
||
const allNodes = allNodeRes.data
|
||
console.log(allNodes)
|
||
if (allNodes && allNodes.length === 0) {
|
||
return
|
||
}
|
||
this.process.processFlowEquipmentParams = allNodes.map(m => {
|
||
return {
|
||
...m,
|
||
nodeType: null,
|
||
processFlowId: this.processFlowId,
|
||
boms: this.equipmentBomList.filter(f => f.equipmentId === m.equipmentId),
|
||
params: this.equipmentParamList.filter(f => f.equipmentId === m.equipmentId),
|
||
id: null
|
||
}
|
||
})
|
||
console.log(this.process.processFlowEquipmentParams)
|
||
},
|
||
equipmentChange(val, item) {
|
||
console.log(val, item)
|
||
item.boms = this.equipmentBomList.filter(f => f.equipmentId === val)
|
||
item.params = this.equipmentParamList.filter(f => f.equipmentId === val)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" module>
|
||
$colWidth: 200px;
|
||
.content {
|
||
padding: 16px;
|
||
margin: 16px;
|
||
position: relative;
|
||
height: calc(100vh - 150px);
|
||
.flaw-detail {
|
||
width: 1400px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
.flaw-title {
|
||
position: relative;
|
||
width: $colWidth;
|
||
text-align: center;
|
||
border: 1px solid #ccc;
|
||
background-color: #eee;
|
||
padding: 8px;
|
||
}
|
||
.flaw-btns {
|
||
position: relative;
|
||
width: $colWidth;
|
||
text-align: left;
|
||
}
|
||
.flaw-select {
|
||
position: relative;
|
||
width: $colWidth;
|
||
height: 40px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|