<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="80%"
|
:confirm-working="isWorking"
|
@confirm="confirm"
|
>
|
<div style="min-width:910px;width:100%">
|
<div class="form-data">
|
<el-form :model="form" ref="form" inline :rules="rules" label-suffix="：" label-width="100px">
|
<el-form-item label="物料编码" prop="materialCode">
|
{{ form.materialCode }}
|
</el-form-item>
|
<el-form-item label="物料名称" prop="materialName">
|
{{ form.materialName }}
|
</el-form-item>
|
<el-form-item label="单位" prop="unitName">
|
{{ form.unitName }}
|
</el-form-item>
|
<el-form-item label="版本号" prop="version">
|
{{ form.version }}
|
</el-form-item>
|
<el-form-item label="工艺名称" prop="routeName">
|
{{ form.routeName }}
|
</el-form-item>
|
<el-form-item label="投料工序" prop="routeName">
|
{{ form.procedureName }}
|
</el-form-item>
|
<!-- <el-form-item label="工序数量" prop="routeNum">
|
{{ form.routeNum }}
|
</el-form-item>
|
<el-form-item label="单位数量" prop="unitNum">
|
1
|
</el-form-item> -->
|
<el-form-item label="BOM状态" prop="status">
|
<!-- { name: '待启用', id: '0' },
|
{ name: '启用', id: '1' },
|
{ name: '失效', id: '2' } -->
|
{{ form.status == 0 ? '待启用' : form.status == 1 ? '启用' : '失效' }}
|
</el-form-item>
|
<el-form-item v-if="form.status == 1" label="启用日期" prop="validTime">
|
{{ form.validTime }}
|
</el-form-item>
|
<el-form-item v-if="form.status == 2" label="失效日期" prop="invalidTime">
|
{{ form.invalidTime }}
|
</el-form-item>
|
<el-form-item label="图纸编号" prop="picNum">
|
{{ form.papercode }}
|
</el-form-item>
|
<el-form-item label="模具编号" prop="modelNum">
|
{{ form.mjcode }}
|
</el-form-item>
|
<!-- <el-form-item label="喂料体系" prop="system">
|
{{ form.system }}
|
</el-form-item>
|
<el-form-item label="收缩比" prop="ratio">
|
{{ form.ratio }}
|
</el-form-item> -->
|
</el-form>
|
</div>
|
<!-- 列表 -->
|
<div class="bom-title">
|
<div class="bom-title-inner">
|
<span class="main-title">BOM组成</span>
|
<span class="sub-title">(单位数量1所需要的物料)</span>
|
</div>
|
</div>
|
<div class="main-materail">
|
<div class="left">
|
<!-- <el-tree style="height:100%; overflow: scroll;" :data="materialTypes" :props="defaultProps" accordion @node-click="handleNodeClick"></el-tree> -->
|
<!-- style="height:90%;overflow-y: scroll;" -->
|
<Tree
|
:list="materialTypes"
|
:defaultProps="defaultProps"
|
@callback="callback"
|
></Tree>
|
</div>
|
<div class="right">
|
<el-table
|
v-loading="isSearch"
|
:data="form.bomDetailBeanList"
|
stripe
|
border
|
>
|
<el-table-column align="center" label="序号" type="index" />
|
<el-table-column prop="materialCode" label="物料编码" min-width="100px"></el-table-column>
|
<el-table-column prop="materialName" label="物料名称" min-width="100px"></el-table-column>
|
<el-table-column prop="unitName" label="单位" min-width="50px"></el-table-column>
|
<el-table-column prop="num" label="使用数量" min-width="100px"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" class="window__header">
|
<el-button type="primary" @click="cancel">返回</el-button>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Tree from '@/components/common/Tree'
|
import { findByBomId, bomMaterialTree } from '@/api/ext/bomExt'
|
export default {
|
name: 'OperaBomDetailWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow, Tree },
|
data () {
|
return {
|
// 表单数据
|
form: {
|
id: null,
|
materialCode: '',
|
materialId: '',
|
materialName: '',
|
unitName: '',
|
validTime: '',
|
invalidTime: '',
|
unitId: '',
|
unitNum: 1,
|
version: '',
|
departId: '',
|
routeName: '',
|
routeId: '',
|
routeNum: '',
|
procedureId: '',
|
procedureName: '',
|
status: '',
|
papercode: '',
|
mjcode: '',
|
system: '',
|
ratio: '',
|
bomDetailBeanList: [
|
]
|
// materialId: 'WL0001',
|
// name: '电解液',
|
// unit: '个',
|
// unitNum: '1',
|
// version: '1.0',
|
// routeNum: '4',
|
// routeName: '锂离子电池生产工艺',
|
// status: '已启用',
|
// startDate: '2022-01-20',
|
// endDate: '2023-01-20',
|
// picNum: 'Q/HZ CX-SC-001-2017-003',
|
// modelNum: 'HZ452',
|
// system: '304L-H46',
|
// ratio: '1:14'
|
},
|
// 验证规则
|
rules: {
|
},
|
activeName: 'first',
|
// 选择物料
|
isSelectMaterial: false,
|
isSearch: false,
|
materialTypes: [],
|
defaultProps: {
|
children: 'children',
|
name: 'name',
|
status: 'status',
|
id: 'materialId'
|
}
|
}
|
},
|
created () {
|
this.config({
|
api: '/ext/bomExt',
|
'field.id': 'id'
|
})
|
},
|
methods: {
|
open (title, target) {
|
this.title = title
|
this.visible = true
|
// 编辑
|
this.$nextTick(() => {
|
// console.log('target', target)
|
for (const key in this.form) {
|
this.form[key] = target[key]
|
}
|
this.form.bomDetailBeanList = []
|
this.getMaterialList(this.form.materialId)
|
this.getBomMaterialTree(this.form.id)
|
})
|
},
|
getMaterialList (id) {
|
const query = '?materialId=' + id
|
findByBomId(query)
|
.then(res => {
|
// console.log(res)
|
this.form.bomDetailBeanList = res
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
getBomMaterialTree (bomId) {
|
const query = '?bomId=' + bomId
|
bomMaterialTree(query)
|
.then(res => {
|
this.materialTypes = this.tree([res])
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
// 树数据处理
|
tree (treeArray) {
|
// treeArray.map(e => {
|
// return {
|
// ...item,
|
// status: false,
|
// name: item.materialCode + '/' + item.materialName,
|
// }
|
// })
|
const array = []
|
for (const item of treeArray) {
|
// console.log('item', item)
|
item.status = false
|
item.name = item.materialCode + '/' + item.materialName
|
if (item.bomMaterialBeanList) {
|
item.children = this.tree(item.bomMaterialBeanList)
|
}
|
array.push(item)
|
}
|
return array
|
},
|
handleNodeClick (data) {
|
// console.log('树形选择', data)
|
},
|
cancel () {
|
// console.log('确定')
|
this.visible = false
|
},
|
callback (data) {
|
this.getMaterialList(data.id)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.form-data {
|
::v-deep .el-form-item{
|
width: 30%;
|
margin-right: 3%;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.toolbar {
|
border-bottom: 1px solid #eee;
|
padding-bottom: 10px;
|
li {
|
display: inline-block;
|
margin-right: 6px;
|
}
|
}
|
::v-deep .el-dialog {
|
// height: calc(100% - 190px);
|
height: 100%;
|
min-height: 400px;
|
}
|
::v-deep .el-dialog__footer {
|
padding: 0px;
|
}
|
::v-deep .el-dialog__body {
|
height: calc(100% - 114px);
|
}
|
|
.main-materail {
|
display: flex;
|
justify-content: space-between;
|
height: 100%;
|
.left {
|
width: calc(20% - 20px);
|
height: calc(95% - 20px);
|
border: #eee solid 1px;
|
overflow-y: scroll;
|
padding: 10px;
|
font-size: 18px;
|
}
|
.right {
|
width: calc(80% - 20px);
|
height: calc(95% - 20px);
|
padding: 0, 20px;
|
section {
|
display: inline-block;
|
margin-left: 16px;
|
margin-bottom: 18px;
|
}
|
}
|
}
|
.bom-title {
|
margin-bottom: 20px;
|
.bom-title-inner {
|
padding: 0 10px;
|
display: inline-block;
|
height: 40px;
|
border-bottom: 2px solid #2E68EC;
|
}
|
.main-title {
|
line-height: 40px;
|
font-size: 16px;
|
font-weight: 500;
|
color: #2E68EC;
|
margin-right: 5px;
|
}
|
.sub-title {
|
font-size: 12px;
|
color: #111;
|
}
|
}
|
.bom-title::after {
|
content: '';
|
width: 100%;
|
height: 2px;
|
display: block;
|
margin-top: -2px;
|
background: #d7dde4;
|
}
|
</style>
|
