<template>
|
<el-dialog
|
title="工艺结构"
|
width="80%"
|
top="5vh"
|
:close-on-click-modal="true"
|
:visible.sync="visible"
|
v-if="visible"
|
>
|
<div style="height: 650px;overflow: auto">
|
<el-card class="document-bom" header="BOM-工序参数">
|
<div slot="header">
|
<span>BOM-工序参数</span>
|
</div>
|
<el-collapse
|
v-model="currTechnologyBomPartName"
|
accordion
|
@change="handleCompleteproductstructureChange"
|
>
|
<el-collapse-item
|
v-for="(item, i) in completeproductstructureData"
|
:key="i"
|
:name="item.bomRoutingId"
|
>
|
<template slot="title">
|
<el-checkbox
|
class="completeproductstructure-checkout"
|
v-model="item.expand"
|
disabled
|
>
|
<span style="font-weight:bold">工艺路线编号：</span
|
>{{ item.routingNo }}
|
<span style="font-weight:bold">零件号：</span
|
>{{ item.partNo }}
|
<span style="font-weight:bold">零件名称：</span
|
>{{ item.partName }}
|
<span style="font-weight:bold">Bom编号：</span
|
>{{ item.number == null ? '无' : item.number }}
|
</el-checkbox>
|
</template>
|
<div style="display:flex;">
|
<div
|
style="font-size:13px;font-weight:bold;cursor: pointer;border-radius:2px 2px 0px 0px;width:80px;text-align:center;"
|
:class="[
|
item.showBom ? 'highlight-tab-class' : 'unhighlight-tab-class'
|
]"
|
@click="item.showBom = true"
|
>
|
BOM结构
|
</div>
|
<div
|
style="font-size:13px;font-weight:bold;cursor: pointer;margin-left: 10px;border-radius:2px 2px 0px 0px;width:80px;text-align:center;"
|
:class="[
|
!item.showBom
|
? 'highlight-tab-class'
|
: 'unhighlight-tab-class'
|
]"
|
@click="item.showBom = false"
|
>
|
工序参数
|
</div>
|
</div>
|
|
<div class="document-bom-div" v-show="item.showBom">
|
<el-table
|
:data="item.completeproductstructureDetail"
|
row-key="id"
|
border
|
height="440"
|
default-expand-all
|
class="structure-detail-table"
|
>
|
<el-table-column prop="partNo" label="零件号" width="240">
|
</el-table-column>
|
<el-table-column prop="partName" label="零件名称" width="400">
|
</el-table-column>
|
<el-table-column prop="qpa" label="数量" width="180">
|
</el-table-column>
|
<el-table-column prop="unit" label="单位"> </el-table-column>
|
</el-table>
|
</div>
|
<div class="document-technology-div" v-show="!item.showBom">
|
<div
|
style="border: 1px solid #ebeef5;height: 440px;overflow: auto;"
|
>
|
<el-collapse
|
v-model="currTechnologyOperationName"
|
accordion
|
@change="
|
handleTechnologyOperationChange($event, item.bomRoutingId)
|
"
|
>
|
<el-collapse-item
|
v-for="(ele, j) in item.technologyOperationData"
|
:key="j"
|
:name="ele.id"
|
>
|
<template slot="title"
|
><span style="font-weight:300"
|
> 工序名称：</span
|
>{{ ele.operationName }}
|
<span style="font-weight:300">工序编号：</span
|
>{{ ele.operationNo }}
|
</template>
|
<el-tabs v-model="activeTemplateName" type="card">
|
<el-tab-pane
|
v-for="(paramTab, index) in paramTabs"
|
:key="index"
|
:label="paramTab.name"
|
:name="paramTab.name"
|
>
|
<el-table :data="paramTab.params">
|
<el-table-column
|
prop="parameterItem"
|
label="名称"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<span
|
>{{ scope.row.parameterItem }}({{
|
scope.row.unit
|
}})</span
|
>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="paramValue"
|
label="值"
|
align="center"
|
></el-table-column>
|
</el-table>
|
</el-tab-pane>
|
<el-tab-pane label="备注" style="height: 100%">
|
<rich-text
|
:editorId="'fwb' + item.id + '-' + ele.id + '-' + j"
|
:richContent="ele.remark"
|
></rich-text>
|
</el-tab-pane>
|
<el-tab-pane label="检测标准">
|
<checkStandardTable
|
ref="documentTestStandardTable"
|
:routingOperationId="ele.id"
|
:operationId="ele.operationId"
|
:operationName="ele.operationName"
|
:paramTypeOptions="paramTypeOptions"
|
:bomRoutingId="
|
currTechnologyBomPart == null
|
? null
|
: currTechnologyBomPart.bomRoutingId
|
"
|
:everyBomRoutingId="item.bomRoutingId"
|
></checkStandardTable>
|
</el-tab-pane>
|
</el-tabs>
|
</el-collapse-item>
|
</el-collapse>
|
</div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</el-card>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="visible = false">关闭</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {
|
getTechnology,
|
getBom,
|
getRouting,
|
getTemplateAndParam,
|
remote
|
} from '@/api/oa/technologyDocument'
|
import checkStandardTable from './checkStandardTable'
|
import RichText from '@/views/common/rich-text.vue'
|
export default {
|
components: { checkStandardTable, RichText },
|
data() {
|
return {
|
visible: false,
|
currTechnologyName: null,
|
currTechnologyBomPartName: null,
|
currTechnologyBomPart: null,
|
completeproductstructureData: [],
|
completeproductstructureDetail: [],
|
currTechnologyOperationName: null,
|
currTechnologyOperation: null,
|
technologyOperationData: [],
|
activeTemplateName: null,
|
paramTabs: [],
|
|
paramTypeOptions: []
|
}
|
},
|
methods: {
|
init(x) {
|
this.visible = true
|
this.currTechnologyBomPartName = null
|
this.currTechnologyBomPart = null
|
this.currTechnologyOperationName = null
|
this.currTechnologyOperation = null
|
this.getDocumentInfo(x.technologyDocumentId)
|
},
|
|
// 根据工艺文件id，查询工艺文件所有的信息
|
getDocumentInfo(documentId) {
|
getTechnology(documentId).then((response) => {
|
console.log(response)
|
const resData = response.data.data
|
// this.dataForm = resData
|
const bomRoutings = resData
|
|
this.completeproductstructureData = []
|
// 挂工艺路线
|
if (bomRoutings != null && bomRoutings.length > 0) {
|
let completeproductstructure
|
for (let i = 0; i < bomRoutings.length; i++) {
|
completeproductstructure = {
|
id: bomRoutings[i].bomId,
|
number: bomRoutings[i].bomNumber,
|
partNo: bomRoutings[i].partNo,
|
partName: bomRoutings[i].partName,
|
partId: bomRoutings[i].partId,
|
expand: false,
|
routingId: bomRoutings[i].routingId,
|
routingNo: bomRoutings[i].routingNo,
|
bomRoutingId: bomRoutings[i].id,
|
showBom: true,
|
completeproductstructureDetail: [],
|
technologyOperationData: []
|
}
|
this.completeproductstructureData.push(completeproductstructure)
|
}
|
}
|
})
|
},
|
handleCompleteproductstructureChange(val) {
|
if (val != null && val !== '') {
|
this.currTechnologyBomPart = this.completeproductstructureData.find(
|
(item) => {
|
return item.bomRoutingId === this.currTechnologyBomPartName
|
}
|
)
|
this.currTechnologyName = this.currTechnologyBomPart.routingId
|
let currSelectBomId = null
|
let currRoutingId = null
|
for (let i = 0; i < this.completeproductstructureData.length; i++) {
|
if (
|
this.completeproductstructureData[i].bomRoutingId ==
|
this.currTechnologyBomPart.bomRoutingId
|
) {
|
this.completeproductstructureData[i].expand = true
|
currSelectBomId = this.completeproductstructureData[i].id
|
currRoutingId = this.completeproductstructureData[i].routingId
|
} else {
|
this.completeproductstructureData[i].expand = false
|
}
|
}
|
// 若已有绑定Bom结构则查，没有则不查
|
this.currTechnologyBomPart.completeproductstructureDetail = []
|
if (currSelectBomId != null) {
|
getBom(currSelectBomId).then((response) => {
|
var resultData = response.data.data
|
this.currTechnologyBomPart.completeproductstructureDetail.push(
|
resultData.tree
|
)
|
})
|
}
|
|
// 若已有绑定工艺则查，没有则不查
|
this.currTechnologyOperationName = null
|
this.currTechnologyBomPart.technologyOperationData = []
|
if (currRoutingId != null) {
|
getRouting(currRoutingId).then((response) => {
|
const res = response.data
|
if (res.code === 0) {
|
if (res.data.operations.length > 0) {
|
const operations = res.data.operations
|
let technologyOperation
|
for (let i = 0; i < operations.length; i++) {
|
technologyOperation = {}
|
technologyOperation.id = operations[i].id
|
technologyOperation.operationName =
|
operations[i].operationName
|
technologyOperation.operationNo = operations[i].operationNo
|
technologyOperation.partName = operations[i].partName
|
technologyOperation.operationId = operations[i].operationId
|
technologyOperation.partId = operations[i].partId
|
this.currTechnologyBomPart.technologyOperationData.push(
|
technologyOperation
|
)
|
}
|
|
this.$nextTick(() => {
|
this.currTechnologyBomPart.technologyOperationData.forEach(
|
(item) => {
|
const op = operations.find((el) => {
|
return item.id === el.id
|
})
|
if (op) {
|
item.remark = op.remark
|
}
|
}
|
)
|
})
|
}
|
}
|
})
|
}
|
} else {
|
this.currTechnologyName = null
|
this.currTechnologyBomPart = null
|
for (let i = 0; i < this.completeproductstructureData.length; i++) {
|
this.completeproductstructureData[i].expand = false
|
}
|
}
|
},
|
|
handleTechnologyOperationChange(val, bomRoutingId) {
|
if (val != null && val !== '') {
|
const currCompleteproductstructureData = this.completeproductstructureData.find(
|
(item) => {
|
return item.bomRoutingId === bomRoutingId
|
}
|
)
|
this.currTechnologyOperation = currCompleteproductstructureData.technologyOperationData.find(
|
(item) => {
|
return this.currTechnologyOperationName == item.id
|
}
|
)
|
this.paramTabs = []
|
getTemplateAndParam(val).then((response) => {
|
const resData = response.data
|
if (resData.code === 0) {
|
const datas = resData.data
|
if (datas != null && datas.length > 0) {
|
this.activeTemplateName = datas[0].operationTemplateName
|
let paramTab
|
for (let i = 0; i < datas.length; i++) {
|
paramTab = {}
|
paramTab.name = datas[i].operationTemplateName
|
paramTab.params = datas[i].paramList
|
this.paramTabs.push(paramTab)
|
}
|
}
|
}
|
})
|
// 查询检测类型字典
|
remote('quality_param_type').then((response) => {
|
if (response.data.code === 0) {
|
this.paramTypeOptions = response.data.data
|
}
|
})
|
} else {
|
this.currTechnologyOperation = null
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.document-bom {
|
background-color: #fff;
|
width: 100%;
|
height: 640px;
|
border: 1px solid #ddd;
|
padding: 10px 20px;
|
box-sizing: border-box;
|
}
|
|
.document-bom .el-card__header {
|
padding: 1px 20px;
|
border-bottom: 0px solid #ebeef5;
|
}
|
|
.document-bom .el-card__body {
|
height: calc(100% - 22px);
|
}
|
|
.document-bom .el-card__body .el-collapse {
|
height: 100%;
|
overflow: auto;
|
}
|
/*自定义disabled状态下checkbox的样式*/
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled.is-checked
|
.el-checkbox__inner {
|
background-color: #006eff;
|
border-color: #006eff;
|
}
|
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled.is-checked
|
+ span.el-checkbox__label {
|
color: #006eff;
|
border-color: #006eff;
|
}
|
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled
|
.el-checkbox__inner {
|
background-color: #ffffff;
|
cursor: pointer;
|
}
|
|
.completeproductstructure-checkout
|
.el-checkbox__input.is-disabled
|
+ span.el-checkbox__label {
|
color: #606266;
|
cursor: pointer;
|
}
|
|
.completeproductstructure-checkout .el-checkbox__inner::after {
|
border: 1px solid #fff !important;
|
border-left: 0 !important;
|
border-top: 0 !important;
|
cursor: pointer !important;
|
}
|
.highlight-tab-class {
|
color: #006eff;
|
background: #e4e7ed;
|
border-top: 1px solid #006eff;
|
}
|
.unhighlight-tab-class {
|
border: 1px solid #e4e7ed;
|
border-bottom: none;
|
}
|
.document-bom-div {
|
width: 100%;
|
margin-bottom: 5px;
|
}
|
.structure-detail-table th.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
|
.structure-detail-table colgroup.gutter {
|
display: table-cell !important;
|
width: 10px !important;
|
}
|
.document-technology-div {
|
width: 100%;
|
margin-bottom: 5px;
|
margin-right: 10px;
|
}
|
|
.document-technology-div .el-collapse {
|
border-top: 0px;
|
border-bottom: 0px;
|
}
|
</style>
|
