<template>
|
<div style="height: 100%">
|
<div class="page-header">
|
<div class="header-left">
|
<a @click="$router.go(-1)"><i class="icon-btn-back"></i></a>
|
<h2 v-if="editable">编辑-完整产品结构</h2>
|
<h2 v-if="!editable">查看-完整产品结构</h2>
|
</div>
|
<div class="btn-group header-right" v-if="editable">
|
<el-button :disabled="isSubmit" v-thinclick="`dataFormSubmit`"
|
>保存</el-button
|
>
|
</div>
|
</div>
|
<div class="page-main">
|
<div class="completeProductStructure-basic">
|
<el-form
|
:inline="true"
|
:model="treeForm"
|
style="width: 100%"
|
class="l-mes"
|
:disabled="!editable"
|
:rules="dataRule"
|
>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="BOM编号">
|
<el-input v-model="treeForm.number" placeholder="BOM编号">
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="零件号" prop="partNo">
|
<el-input v-model="treeForm.partNo" placeholder="零件" readonly>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
@click="showProductStructure = true"
|
></el-button>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="零件名" prop="partName">
|
<el-input
|
v-model="treeForm.partName"
|
placeholder="零件名"
|
style="width: 300px"
|
disabled
|
>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="类型" prop="bomTypeDb">
|
<el-select
|
v-model="treeForm.bomTypeDb"
|
placeholder="请选择类型"
|
style="width:100%"
|
@visible-change="bomTypeDbChange"
|
>
|
<el-option
|
v-for="(item, index) in bomTypeDbOptions"
|
:label="item.label"
|
:value="item.value"
|
:key="index"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="版本号" prop="version">
|
<el-input
|
v-model="treeForm.version"
|
placeholder="版本号"
|
disabled
|
>
|
</el-input>
|
</el-form-item>
|
<!--
|
<el-form-item label="替代号" prop="alternativeNo">
|
<el-input
|
v-model="treeForm.alternativeNo"
|
placeholder="替代号"
|
disabled
|
>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="替代描述" prop="alternativeDesc">
|
<el-input
|
v-model="treeForm.alternativeDesc"
|
placeholder="替代描述"
|
disabled
|
>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item label="绝缘颜色">
|
<el-input
|
v-model="treeForm.insulationColor"
|
placeholder="绝缘颜色"
|
>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="护套颜色">
|
<el-input v-model="treeForm.sheathColor" placeholder="护套颜色">
|
</el-input>
|
</el-form-item>
|
<el-form-item label="特性1">
|
<el-input
|
v-model="treeForm.characteristicOne"
|
placeholder="特性1"
|
>
|
</el-input>
|
</el-form-item> -->
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
<div class="completeProductStructure-detail">
|
<div class="completeProductStructure-design">
|
<div class="completeProductStructure-design-title">构建BOM</div>
|
<el-table
|
class="tree-select-table"
|
ref="tableRef"
|
:data="tableData"
|
style="width: 100%;"
|
row-key="id"
|
border
|
height="740"
|
default-expand-all
|
@expand-change="expandChange"
|
@selection-change="selectionChange"
|
@select="rowSelect"
|
:row-class-name="tableRowClassName"
|
>
|
<el-table-column type="selection" width="55"> </el-table-column>
|
<el-table-column prop="partName" label="零件名" width="430">
|
</el-table-column>
|
<el-table-column prop="partNo" label="零件号" width="120">
|
</el-table-column>
|
<el-table-column
|
prop="originalQpa"
|
label="单位父节点零件所需数量"
|
width="100"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="qpa"
|
label="单位根节点零件所需数量"
|
width="100"
|
>
|
</el-table-column>
|
<el-table-column prop="unit" label="单位" width="100">
|
</el-table-column>
|
<el-table-column prop="operationName" label="消耗工序">
|
</el-table-column>
|
<el-table-column label="磨具编号" prop="sharpenerNo" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.sharpenerNo" placeholder="请填写磨具编号"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.sharpenerNo
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="每模穴数" prop="caveNum" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.caveNum" placeholder="请填写每模穴数"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.caveNum
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="克重(kg)" prop="gramWeight" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.gramWeight" placeholder="请填写克重"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.gramWeight
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="浇口克重(kg)" prop="gateGramWeight" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.gateGramWeight" placeholder="请填写浇口克重"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.gateGramWeight
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="成型周期(h)" prop="moldingCycle" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.moldingCycle" placeholder="请填写成型周期"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.moldingCycle
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="机台(t)" prop="machine" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.machine" placeholder="请填写机台"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.machine
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="回料比例(%)" prop="scale" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.scale" placeholder="请填写回料比例"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.scale
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="烘料时间(h)" prop="dryingTime" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.dryingTime" placeholder="请填写烘料时间"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.dryingTime
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="烘料温度(℃)" prop="dryingTemperature" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.dryingTemperature" placeholder="请填写烘料温度"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.dryingTemperature
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="包装信息" prop="packingInfo" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.packingInfo" placeholder="请填写包装信息"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.packingInfo
|
}}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="completeProductStructure-queryPreview"></div>
|
<div class="completeProductStructure-preview">
|
<div class="completeProductStructure-preview-title">结果预览</div>
|
<el-table
|
:data="preViewData"
|
style="width: 100%;"
|
row-key="id"
|
border
|
height="740"
|
default-expand-all
|
class="preView-structure-table"
|
>
|
<el-table-column prop="partName" label="零件名" width="430">
|
</el-table-column>
|
<el-table-column
|
prop="partNo"
|
label="零件号"
|
width="100"
|
show-overflow-tooltip
|
>
|
</el-table-column>
|
<el-table-column
|
prop="originalQpa"
|
label="单位父节点零件所需数量"
|
width="100"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="qpa"
|
label="单位根节点零件所需数量"
|
width="100"
|
>
|
</el-table-column>
|
<el-table-column prop="unit" label="单位" width="100">
|
</el-table-column>
|
<!-- <el-table-column prop="discNum" label="盘数(盘)" width="100">
|
<template slot-scope="scope">
|
{{ scope.row.discNum || 1 }}
|
</template>
|
</el-table-column> -->
|
<el-table-column prop="operationName" label="消耗工序">
|
</el-table-column>
|
<el-table-column label="磨具编号" prop="sharpenerNo" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.sharpenerNo" placeholder="请填写磨具编号"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.sharpenerNo
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="每模穴数" prop="caveNum" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.caveNum" placeholder="请填写每模穴数"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.caveNum
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="克重(kg)" prop="gramWeight" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.gramWeight" placeholder="请填写克重"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.gramWeight
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="浇口克重(kg)" prop="gateGramWeight" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.gateGramWeight" placeholder="请填写浇口克重"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.gateGramWeight
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="成型周期(h)" prop="moldingCycle" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.moldingCycle" placeholder="请填写成型周期"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.moldingCycle
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="机台(t)" prop="machine" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.machine" placeholder="请填写机台"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.machine
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="回料比例(%)" prop="scale" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.scale" placeholder="请填写回料比例"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.scale
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="烘料时间(h)" prop="dryingTime" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.dryingTime" placeholder="请填写烘料时间"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.dryingTime
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="烘料温度(℃)" prop="dryingTemperature" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.dryingTemperature" placeholder="请填写烘料温度"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.dryingTemperature
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="包装信息" prop="packingInfo" align="center">
|
<template slot-scope="scope">
|
<el-input size="small" v-model="scope.row.packingInfo" placeholder="请填写包装信息"
|
v-show="scope.row.isUpdate"></el-input>
|
<span v-show="!scope.row.isUpdate">{{
|
scope.row.packingInfo
|
}}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
<productStructureDialog
|
:paramArr="[
|
{
|
prop: 'bomTypeDb',
|
propVal: treeForm.bomTypeDb
|
}
|
]"
|
:currshowlist.sync="showProductStructure"
|
@listenToProductstructureEvent="selectProductStructure"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getPartAllStructureExt,
|
addObj,
|
getObj,
|
putObj
|
} from '@/api/technology/completeproductstructure'
|
import { remote } from '@/api/admin/dict'
|
import productStructureDialog from '@/views/common/productstructure.vue'
|
export default {
|
components: { productStructureDialog },
|
data() {
|
return {
|
dataRule: {
|
partName: [
|
{ required: true, message: '最终零件不能为空', trigger: 'blur' }
|
],
|
version: [
|
{ required: true, message: '版本号不能为空', trigger: 'blur' }
|
],
|
bomTypeDb: [
|
{ required: true, message: '结构类型不能为空', trigger: 'blur' }
|
]
|
},
|
|
dataForm: { id: null, state: null },
|
treeForm: {
|
partId: null,
|
partNo: null,
|
partName: null,
|
number: null,
|
insulationColor: null,
|
sheathColor: null,
|
characteristicOne: null,
|
version: null,
|
alternativeNo: null,
|
alternativeDesc: null,
|
bomTypeDb: 'M'
|
},
|
before: null,
|
showProductStructure: false,
|
selectVals: [],
|
currFloorBrotherAndSameGroupData: [], // 同层同组的兄弟元素
|
currFloorBrotherAndDiffGroupData: [], // 同层不同组的兄弟元素
|
currFloorData: [],
|
preViewData: [],
|
tableData: [],
|
isSubmit: false,
|
bomTypeDbOptions: []
|
}
|
},
|
mounted() {
|
window.addEventListener(
|
'hashchange',
|
() => {
|
const currentPath = window.location.hash.slice(1)
|
if (this.$route.path !== currentPath) {
|
this.$router.push(currentPath)
|
}
|
},
|
false
|
)
|
},
|
computed: {
|
editable: function() {
|
console.log()
|
if (!this.dataForm.id) {
|
return true
|
}
|
if (
|
this.dataForm.id &&
|
(this.dataForm.state == '01draft' ||
|
this.dataForm.state == '03cancelled')
|
) {
|
return true
|
}
|
return false
|
}
|
},
|
methods: {
|
getStructue() {
|
if (!this.treeForm.partName) {
|
this.$message.error('请选择零件!')
|
return
|
}
|
var paramObj = {}
|
paramObj.partId = this.treeForm.partId
|
paramObj.version = this.treeForm.version
|
paramObj.alternativeNo = this.treeForm.alternativeNo
|
paramObj.alternativeDesc = this.treeForm.alternativeDesc
|
paramObj.bomTypeDb = this.treeForm.bomTypeDb
|
|
this.tableData = []
|
|
getPartAllStructureExt(paramObj).then((response) => {
|
const result = response.data
|
if (result.code === 0) {
|
this.tableData.push(result.data)
|
}
|
})
|
},
|
|
init() {
|
if (this.dataForm.id) {
|
getObj(this.dataForm.id).then((response) => {
|
var resultData = response.data.data
|
this.treeForm.partId = resultData.partId
|
this.treeForm.partNo = resultData.partNo
|
this.treeForm.partName = resultData.partName
|
this.treeForm.number = resultData.number
|
this.treeForm.insulationColor = resultData.insulationColor
|
this.treeForm.sheathColor = resultData.sheathColor
|
this.treeForm.characteristicOne = resultData.characteristicOne
|
this.treeForm.version = resultData.version
|
this.treeForm.alternativeNo = resultData.alternativeNo
|
this.treeForm.alternativeDesc = resultData.alternativeDesc
|
this.treeForm.bomTypeDb = resultData.bomTypeDb
|
this.dataForm.state = resultData.state
|
this.preViewData = []
|
this.preViewData.push(resultData.tree)
|
this.tableData = []
|
getPartAllStructureExt(this.treeForm).then((res) => {
|
const result = res.data
|
if (result.code === 0) {
|
this.tableData.push(result.data)
|
}
|
})
|
})
|
} else {
|
this.initDefaultForm()
|
}
|
},
|
initDefaultForm() {
|
this.treeForm.partId = null
|
this.treeForm.partName = null
|
this.treeForm.insulationColor = null
|
this.treeForm.sheathColor = null
|
this.treeForm.characteristicOne = null
|
this.treeForm.version = null
|
this.treeForm.bomTypeDb = 'M'
|
this.selectVals = []
|
this.currFloorBrotherAndSameGroupData = []
|
this.currFloorBrotherAndDiffGroupData = []
|
this.currFloorData = []
|
this.preViewData = []
|
this.tableData = []
|
},
|
setDefaultDiscNum(treeData) {
|
if (!treeData) {
|
return
|
}
|
if (treeData instanceof Array) {
|
for (var i in treeData) {
|
// 遍历数组
|
if (!treeData[i].discNum) {
|
treeData[i].discNum = 1
|
}
|
if (
|
treeData.children &&
|
Array.isArray(treeData.children) &&
|
treeData.children.length > 0
|
) {
|
this.setDefaultDiscNum(treeData.children)
|
}
|
}
|
} else {
|
if (!treeData.discNum) {
|
treeData.discNum = 1
|
}
|
if (
|
treeData.children &&
|
Array.isArray(treeData.children) &&
|
treeData.children.length > 0
|
) {
|
this.setDefaultDiscNum(treeData.children)
|
}
|
}
|
},
|
dataFormSubmit() {
|
const mapTree = (org) => {
|
const haveChildren =
|
Array.isArray(org.children) && org.children.length > 0
|
return {
|
checked: org.checked,
|
compId: org.compId,
|
discNum: org.discNum || 1,
|
expand: org.expand,
|
id: org.id,
|
operationId: org.operationId,
|
operationName: org.operationName,
|
operationNo: org.operationNo,
|
originalQpa: org.originalQpa,
|
parentId: org.parentId,
|
partId: org.partId,
|
partName: org.partName,
|
partNo: org.partNo,
|
version: org.version,
|
alternativeNo: org.alternativeNo,
|
alternativeDesc: org.alternativeDesc,
|
qpa: org.qpa,
|
structureId: org.structureId,
|
unit: org.unit,
|
color: org.color,
|
planningMethod: org.planningMethod,
|
sharpenerNo: org.sharpenerNo,
|
caveNum:org.caveNum,
|
gramWeight:org.gramWeight,
|
gateGramWeight:org.gateGramWeight,
|
moldingCycle:org.moldingCycle,
|
machine:org.machine,
|
scale:org.scale,
|
dryingTime:org.dryingTime,
|
dryingTemperature:org.dryingTemperature,
|
packingInfo: org.packingInfo,
|
children: haveChildren ? org.children.map((i) => mapTree(i)) : []
|
}
|
}
|
|
this.isSubmit = true
|
this.generateStructure()
|
if (this.preViewData != null && this.preViewData.length > 0) {
|
if (this.preViewData.length === 1) {
|
if (this.dataForm.id) {
|
var updateObj = {}
|
updateObj.id = this.dataForm.id
|
updateObj.partId = this.treeForm.partId
|
updateObj.number = this.treeForm.number
|
updateObj.insulationColor = this.treeForm.insulationColor
|
updateObj.sheathColor = this.treeForm.sheathColor
|
updateObj.characteristicOne = this.treeForm.characteristicOne
|
updateObj.version = this.treeForm.version
|
updateObj.alternativeNo = this.treeForm.alternativeNo
|
updateObj.alternativeDesc = this.treeForm.alternativeDesc
|
updateObj.bomTypeDb = this.treeForm.bomTypeDb
|
|
// const tree = this.preViewData[0];
|
const gxqTree = this.preViewData.map((org) => mapTree(org))
|
// this.setDefaultDiscNum(gxqTree);
|
updateObj.tree = gxqTree[0]
|
putObj(updateObj)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
this.$message.success('修改成功')
|
} else {
|
this.$message.error('修改失败')
|
}
|
this.isSubmit = false
|
})
|
.catch((error) => {
|
this.isSubmit = false
|
console.log(error)
|
})
|
} else {
|
var newObj = {}
|
newObj.id = null
|
newObj.partId = this.treeForm.partId
|
newObj.number = this.treeForm.number
|
newObj.insulationColor = this.treeForm.insulationColor
|
newObj.sheathColor = this.treeForm.sheathColor
|
newObj.characteristicOne = this.treeForm.characteristicOne
|
newObj.version = this.treeForm.version
|
newObj.alternativeNo = this.treeForm.alternativeNo
|
newObj.alternativeDesc = this.treeForm.alternativeDesc
|
newObj.bomTypeDb = this.treeForm.bomTypeDb
|
const gxqTree = this.preViewData.map((org) => mapTree(org))
|
newObj.tree = gxqTree[0]
|
addObj(newObj)
|
.then((response) => {
|
var data = response.data
|
if (data.code === 0) {
|
this.dataForm.id = data.data.id
|
this.treeForm.number = data.data.number
|
this.$message.success('保存成功')
|
} else {
|
this.$message.error('保存失败')
|
}
|
this.isSubmit = false
|
})
|
.catch((error) => {
|
this.isSubmit = false
|
console.log(error)
|
})
|
}
|
} else {
|
this.isSubmit = false
|
this.$message.error('存在多个根节点，无法进行保存')
|
}
|
} else {
|
this.isSubmit = false
|
this.$message.error('请先构建BOM，再进行保存')
|
}
|
},
|
// 生成最终的结构
|
generateStructure() {
|
if (this.selectVals != null && this.selectVals.length > 0) {
|
// 先将选中的节点行进行分组，分为头部(无父母，有子)、中部(有父母，有子)、尾部(有父母，无子)、特殊节点(无父母、无子)
|
var groupResult = this.structureDivideIntoGroups(this.selectVals)
|
// 将分组后的节点，进行连接，连接方式为父母找孩子，头部去中部和尾部找孩子，中部去中部和尾部找孩子
|
|
var noParentAndHasChildList = groupResult.noParentAndHasChild // 头部
|
var noParentAndNoChildList = groupResult.noParentAndNoChild // 特殊节点
|
var hasParentAndHasChildList = groupResult.hasParentAndHasChild // 中部
|
var hasParentAndNoChildList = groupResult.hasParentAndNoChild // 尾部
|
this.findChilds(noParentAndHasChildList, hasParentAndHasChildList)
|
this.findChilds(noParentAndHasChildList, hasParentAndNoChildList)
|
this.findChilds(hasParentAndHasChildList, hasParentAndHasChildList)
|
this.findChilds(hasParentAndHasChildList, hasParentAndNoChildList)
|
this.preViewData = []
|
if (noParentAndHasChildList.length > 0) {
|
for (let i = 0; i < noParentAndHasChildList.length; i++) {
|
this.preViewData.push(noParentAndHasChildList[i])
|
}
|
}
|
if (noParentAndNoChildList.length > 0) {
|
for (let i = 0; i < noParentAndNoChildList.length; i++) {
|
this.preViewData.push(noParentAndNoChildList[i])
|
}
|
}
|
// 按id排个序，保持一致
|
if (this.preViewData && this.preViewData.length > 0) {
|
this.preViewData.sort((a, b) => {
|
return a.id - b.id
|
})
|
}
|
} else {
|
this.preViewData = []
|
}
|
},
|
// 父母找孩子
|
findChilds(parents, childs) {
|
let parent
|
let child
|
for (let i = 0; i < parents.length; i++) {
|
parent = parents[i]
|
for (let k = 0; k < childs.length; k++) {
|
child = childs[k]
|
if (parent.id === child.parentId) {
|
parent.children.push(child)
|
}
|
}
|
// 按id排个序，保持一致
|
if (parent.children && parent.children.length > 0) {
|
parent.children.sort((a, b) => {
|
return a.id - b.id
|
})
|
}
|
}
|
},
|
// 节点分组，分为头部(无父母，有子)、中部(有父母，有子)、尾部(有父母，无子)、特殊节点(无父母、无子)
|
structureDivideIntoGroups(selects) {
|
var noParentList = [] // 无父母
|
var hasParentList = [] // 有父母
|
var noParentAndHasChildList = [] // 无父母有子
|
var hasParentAndHasChildList = [] // 有父母有子
|
var hasParentAndNoChildList = [] // 有父母无子
|
var noParentAndNoChildList = [] // 无父母无子
|
let outSelect
|
let inSelect
|
// 筛选出有无父母noParentList、hasParentList
|
for (let i = 0; i < selects.length; i++) {
|
outSelect = selects[i]
|
let flag = false
|
for (let k = 0; k < selects.length; k++) {
|
inSelect = selects[k]
|
if (outSelect.parentId === inSelect.id) {
|
flag = true
|
break
|
}
|
}
|
if (flag) {
|
// 存在父母
|
hasParentList.push(outSelect)
|
} else {
|
// 不存在
|
noParentList.push(outSelect)
|
}
|
}
|
// hasParentList筛选出有无子
|
if (hasParentList.length > 0) {
|
let copyHasParent
|
let hasParent
|
let se
|
for (let i = 0; i < hasParentList.length; i++) {
|
hasParent = hasParentList[i]
|
let flag = false
|
for (let k = 0; k < selects.length; k++) {
|
se = selects[k]
|
if (se.parentId === hasParent.id) {
|
flag = true
|
break
|
}
|
}
|
copyHasParent = {}
|
copyHasParent.id = hasParent.id
|
copyHasParent.parentId = hasParent.parentId
|
copyHasParent.compId = hasParent.compId
|
copyHasParent.structureId = hasParent.structureId
|
copyHasParent.partId = hasParent.partId
|
copyHasParent.partName = hasParent.partName
|
copyHasParent.operationId = hasParent.operationId
|
copyHasParent.operationName = hasParent.operationName
|
|
copyHasParent.discNum = hasParent.discNum
|
copyHasParent.qpa = hasParent.qpa
|
copyHasParent.originalQpa = hasParent.originalQpa
|
copyHasParent.color = hasParent.color
|
copyHasParent.planningMethod = hasParent.planningMethod
|
copyHasParent.unit = hasParent.unit
|
copyHasParent.expand = hasParent.expand
|
copyHasParent.children = []
|
if (flag) {
|
// 存在子
|
hasParentAndHasChildList.push(copyHasParent)
|
} else {
|
// 不存在子
|
hasParentAndNoChildList.push(copyHasParent)
|
}
|
}
|
}
|
|
// noParentList筛选出有无子
|
if (noParentList.length > 0) {
|
let copyNoParent
|
let noParent
|
let se
|
for (let i = 0; i < noParentList.length; i++) {
|
noParent = noParentList[i]
|
let flag = false
|
for (let k = 0; k < selects.length; k++) {
|
se = selects[k]
|
if (se.parentId === noParent.id) {
|
flag = true
|
break
|
}
|
}
|
copyNoParent = {}
|
copyNoParent.id = noParent.id
|
copyNoParent.parentId = noParent.parentId
|
copyNoParent.compId = noParent.compId
|
copyNoParent.structureId = noParent.structureId
|
copyNoParent.partId = noParent.partId
|
copyNoParent.partName = noParent.partName
|
copyNoParent.operationId = noParent.operationId
|
copyNoParent.operationName = noParent.operationName
|
|
copyNoParent.sharpenerNo= noParent.sharpenerNo
|
copyNoParent.caveNum=noParent.caveNum
|
copyNoParent.gramWeight=noParent.gramWeight
|
copyNoParent.gateGramWeight=noParent.gateGramWeight
|
copyNoParent.moldingCycle=noParent.moldingCycle
|
copyNoParent.machine=noParent.machine
|
copyNoParent.scale=noParent.scale
|
copyNoParent.dryingTime=noParent.dryingTime
|
copyNoParent.dryingTemperature=noParent.dryingTemperature
|
copyNoParent.packingInfo= noParent.packingInfo
|
|
copyNoParent.discNum = noParent.discNum
|
copyNoParent.qpa = noParent.qpa
|
copyNoParent.originalQpa = noParent.originalQpa
|
copyNoParent.unit = noParent.unit
|
copyNoParent.color = noParent.color
|
copyNoParent.planningMethod = noParent.planningMethod
|
copyNoParent.expand = noParent.expand
|
copyNoParent.children = []
|
if (flag) {
|
// 存在子
|
noParentAndHasChildList.push(copyNoParent)
|
} else {
|
// 不存在子
|
noParentAndNoChildList.push(copyNoParent)
|
}
|
}
|
}
|
|
var groupResult = {
|
noParentAndHasChild: noParentAndHasChildList,
|
noParentAndNoChild: noParentAndNoChildList,
|
hasParentAndHasChild: hasParentAndHasChildList,
|
hasParentAndNoChild: hasParentAndNoChildList
|
}
|
return groupResult
|
},
|
rowSelect(selection, row) {
|
const inSelection = selection.length && selection.indexOf(row) !== -1
|
let selectFlag = false
|
if (inSelection) {
|
selectFlag = true
|
}
|
// 若selection为空，则为取消，将其同组的兄弟元素及其所有子元素（包括兄弟元素的子元素）取消，并将这些元素置灰。若selection不为空，则为选中，将其同组的兄弟元素及其所有子元素（包括兄弟元素的子元素）选中(子元素之间是同组且只取某一组)，并且高亮，并将同级别不同组的兄弟元素及其所有子元素（包括兄弟元素的子元素）取消，并将这些元素置灰
|
|
this.currFloorBrotherAndSameGroupData = []
|
this.currFloorBrotherAndDiffGroupData = []
|
// 找出同组的兄弟元素
|
this.iterationDataFindCurrFloorBrother(
|
this.tableData,
|
row.id,
|
row.structureId
|
)
|
|
this.$nextTick(() => {
|
// 对同层同组兄弟元素的取消或选中， 及对其子元素的取消或选中，置灰或高亮
|
for (let i = 0; i < this.currFloorBrotherAndSameGroupData.length; i++) {
|
this.$refs.tableRef.toggleRowSelection(
|
this.currFloorBrotherAndSameGroupData[i],
|
selectFlag
|
)
|
this.currFloorBrotherAndSameGroupData[i].expand = selectFlag
|
this.cancelOrSelectRowsBySomeRule(
|
this.currFloorBrotherAndSameGroupData[i].children,
|
selectFlag
|
)
|
}
|
|
// 对同层不同组的兄弟元素的取消、置灰
|
for (let i = 0; i < this.currFloorBrotherAndDiffGroupData.length; i++) {
|
this.$refs.tableRef.toggleRowSelection(
|
this.currFloorBrotherAndDiffGroupData[i],
|
false
|
)
|
this.currFloorBrotherAndDiffGroupData[i].expand = false
|
this.cancelRows(this.currFloorBrotherAndDiffGroupData[i].children)
|
}
|
})
|
},
|
selectionChange(val) {
|
this.selectVals = val
|
this.generateStructure()
|
},
|
expandChange(row, expanded) {
|
/*
|
this.currFloorData = []
|
this.iterationDataFindCurrFloor(this.tableData, row.id)
|
if (expanded) {
|
// 展开
|
|
this.iterationData(this.currFloorData, row.id)
|
} else {
|
this.setBrotherExpand(this.currFloorData)
|
} */
|
},
|
closeRowExpansion(row) {
|
this.$refs.tableRef.toggleRowExpansion(row, false)
|
},
|
// 迭代，若为取消则，将子元素全部取消并置灰或若选中某组元素(根据某种规则选一组元素，这里是选第一个的组)
|
cancelOrSelectRowsBySomeRule(datas, selected) {
|
if (datas != null && datas && datas.length > 0) {
|
if (selected) {
|
// 选中时
|
const defaultStructureId = datas[0].structureId
|
|
for (let k = 0; k < datas.length; k++) {
|
if (datas[k].structureId === defaultStructureId) {
|
// 选中并继续找孩子迭代，并高亮
|
datas[k].expand = true
|
this.$refs.tableRef.toggleRowSelection(datas[k], true)
|
this.cancelOrSelectRowsBySomeRule(datas[k].children, true)
|
} else {
|
datas[k].expand = false
|
this.$refs.tableRef.toggleRowSelection(datas[k], false)
|
this.cancelRows(datas[k].children, false)
|
}
|
}
|
} else {
|
// 取消选中时
|
this.cancelRows(datas)
|
}
|
}
|
},
|
// 取消所有选中并置灰
|
cancelRows(datas) {
|
if (datas != null && datas && datas.length > 0) {
|
for (let k = 0; k < datas.length; k++) {
|
// 取消并置灰
|
datas[k].expand = false
|
this.$refs.tableRef.toggleRowSelection(datas[k], false)
|
if (
|
datas[k].children != null &&
|
datas[k].children &&
|
datas[k].children.length > 0
|
) {
|
this.cancelRows(datas[k].children)
|
}
|
}
|
}
|
},
|
// 迭代找出当前id所在层的所有的同组层对象
|
iterationDataFindCurrFloorBrother(datas, id, structureId) {
|
let flag = false
|
for (let i = 0; i < datas.length; i++) {
|
if (datas[i].id === id) {
|
flag = true
|
}
|
}
|
if (flag) {
|
// id在这一层
|
for (let i = 0; i < datas.length; i++) {
|
if (datas[i].structureId === structureId) {
|
// 同层同组的
|
this.currFloorBrotherAndSameGroupData.push(datas[i])
|
} else {
|
// 同层不同组的
|
this.currFloorBrotherAndDiffGroupData.push(datas[i])
|
}
|
}
|
} else {
|
let da
|
for (let i = 0; i < datas.length; i++) {
|
da = datas[i]
|
if (da.children != null && da.children && da.children.length > 0) {
|
this.iterationDataFindCurrFloorBrother(da.children, id, structureId)
|
}
|
}
|
}
|
},
|
// 迭代找出当前id所在层的所有的层对象
|
iterationDataFindCurrFloor(datas, id) {
|
let flag = false
|
for (let i = 0; i < datas.length; i++) {
|
if (datas[i].id === id) {
|
flag = true
|
}
|
}
|
if (flag) {
|
// id在这一层
|
for (let i = 0; i < datas.length; i++) {
|
this.currFloorData.push(datas[i])
|
}
|
} else {
|
let da
|
for (let i = 0; i < datas.length; i++) {
|
da = datas[i]
|
if (da.children != null && da.children && da.children.length > 0) {
|
this.iterationDataFindCurrFloor(da.children, id)
|
}
|
}
|
}
|
},
|
// 将兄弟元素的expand设置为true
|
setBrotherExpand(datas) {
|
let da
|
for (let i = 0; i < datas.length; i++) {
|
da = datas[i]
|
da.expand = true
|
}
|
},
|
|
// 迭代，取消兄弟元素及其子元素的选中并缩回
|
iterationData(datas, id) {
|
var flag = true
|
var data = datas.find((item) => item.id === id)
|
// 判断id是否在这一层
|
if (data) {
|
flag = false
|
}
|
if (flag) {
|
// id不在这一层，继续找
|
let da
|
for (let i = 0; i < datas.length; i++) {
|
da = datas[i]
|
// 存在子节点，继续迭代，不存在，则不管
|
if (da.children != null && da.children && da.children.length > 0) {
|
this.iterationData(da.children, id)
|
}
|
}
|
} else {
|
// id在这一层，找出不同structureId分组的成员，并把属性设置为expand=false(包括孩子),找出相同structureId分组的成员，并把属性设置为expand=true(包括孩子)
|
let da
|
for (let i = 0; i < datas.length; i++) {
|
da = datas[i]
|
if (da.structureId === data.structureId) {
|
da.expand = true
|
} else {
|
da.expand = false
|
}
|
|
if (!da.expand) {
|
// 取消选中跟当前节点不为一组的兄弟节点
|
this.$refs.tableRef.toggleRowSelection(da, da.expand)
|
// 收缩跟当前节点不为一组的兄弟节点
|
this.$refs.tableRef.toggleRowExpansion(da, da.expand)
|
}
|
if (da.children != null && da.children && da.children.length > 0) {
|
this.setexpand(da.children, da.expand)
|
}
|
}
|
}
|
},
|
setexpand(childs, expand) {
|
let child
|
for (let i = 0; i < childs.length; i++) {
|
child = childs[i]
|
// child.expand = expand
|
if (!expand) {
|
this.$refs.tableRef.toggleRowSelection(child, expand)
|
this.$refs.tableRef.toggleRowExpansion(child, expand)
|
}
|
|
if (
|
child.children != null &&
|
child.children &&
|
child.children.length > 0
|
) {
|
this.setexpand(child.children, expand)
|
}
|
}
|
},
|
// 响应零件选择的回调
|
selectProductStructure(row) {
|
if (row != null) {
|
this.treeForm.partId = row.partId
|
this.treeForm.partNo = row.partNo
|
this.treeForm.partName = row.partName
|
this.treeForm.version = row.version
|
this.treeForm.alternativeNo = row.alternativeNo
|
this.treeForm.alternativeDesc = row.alternativeDesc
|
this.treeForm.bomTypeDb = row.bomTypeDb
|
this.tableData = []
|
this.getStructue()
|
// getPartAllStructure(row.id).then((response) => {
|
// const result = response.data
|
// if (result.code === 0) {
|
// this.tableData.push(result.data)
|
// }
|
// })
|
}
|
},
|
bomTypeDbChange(e) {
|
if (e) {
|
this.before = this.treeForm.bomTypeDb
|
} else {
|
if (this.before !== this.treeForm.bomTypeDb) {
|
this.treeForm.partId = null
|
this.treeForm.partNo = null
|
this.treeForm.partName = null
|
this.treeForm.version = null
|
this.treeForm.alternativeNo = null
|
this.treeForm.alternativeDesc = null
|
this.tableData = []
|
}
|
}
|
},
|
// table设置行样式
|
tableRowClassName({ row, rowIndex }) {
|
if (row.expand) {
|
return ''
|
} else {
|
return 'forbid-row'
|
}
|
},
|
// 查询结构类型字典
|
getBomTypeDbOptions() {
|
remote('bom_type_db').then((response) => {
|
if (response.data.code === 0) {
|
this.bomTypeDbOptions = response.data.data
|
} else {
|
this.bomTypeDbOptions = []
|
}
|
})
|
}
|
},
|
created() {
|
this.dataForm.id = this.$route.params.id
|
this.init()
|
this.getBomTypeDbOptions()
|
}
|
}
|
</script>
|
<style>
|
.tree-select-table .el-table__header-wrapper .el-checkbox {
|
display: none;
|
}
|
.completeProductStructure-basic {
|
background-color: #fff;
|
height: 100px;
|
display: flex;
|
align-items: flex-end;
|
padding: 10px 30px;
|
border: 1px solid #ddd;
|
box-sizing: border-box;
|
}
|
|
.completeProductStructure-detail {
|
width: 100%;
|
height: 800px;
|
padding-top: 10px;
|
display: flex;
|
justify-content: flex-start;
|
box-sizing: border-box;
|
}
|
|
.completeProductStructure-design {
|
float: left;
|
width: 48%;
|
height: 800px;
|
padding: 10px 20px;
|
border: 1px solid #ddd;
|
background-color: #fff;
|
margin-top: 0px;
|
box-sizing: border-box;
|
}
|
.completeProductStructure-design-title {
|
height: 40px;
|
color: #006eff;
|
}
|
|
.completeProductStructure-queryPreview {
|
float: left;
|
width: 4%;
|
height: 800px;
|
padding: 0px 0px;
|
border: 1px solid #ddd;
|
background-color: #fff;
|
margin-top: 0px;
|
}
|
.completeProductStructure-preview {
|
float: right;
|
width: 48%;
|
height: 800px;
|
padding: 10px 20px;
|
border: 1px solid #ddd;
|
background-color: #fff;
|
margin-top: 0px;
|
box-sizing: border-box;
|
}
|
.completeProductStructure-preview-title {
|
height: 40px;
|
color: #006eff;
|
}
|
.forbid-row .cell {
|
color: #c0c4cc;
|
}
|
|
.tree-select-table th.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.tree-select-table colgroup.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.preView-structure-table th.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.preView-structure-table colgroup.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
</style>
|
