init
This commit is contained in:
325
src/views/art/components/process-table.vue
Normal file
325
src/views/art/components/process-table.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user