<template>
|
<div style="height: 100%; overflow: auto;">
|
<div class="technology-document-class">
|
<el-card
|
class="box-card technology-document-card technology-document-card-main"
|
>
|
<div slot="header" class="clearfix">
|
<span class="technology-document-header">文件信息：</span>
|
</div>
|
<el-table
|
:data="documentData"
|
border
|
style="width: 100%;"
|
:header-cell-style="{ background: 'antiquewhite', color: '#333' }"
|
>
|
<el-table-column prop="createUser" label="创建人" align="center">
|
</el-table-column>
|
<el-table-column prop="createTime" label="创建日期" align="center">
|
</el-table-column>
|
<el-table-column prop="name" label="文件名称" align="center">
|
</el-table-column>
|
<el-table-column prop="number" label="文件编号" align="center">
|
</el-table-column>
|
<el-table-column prop="version" label="版本号" align="center">
|
</el-table-column>
|
<el-table-column prop="projectNo" label="项目号" align="center">
|
</el-table-column>
|
<el-table-column prop="country" label="国家" align="center">
|
</el-table-column>
|
</el-table>
|
<div>
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 4, maxRows: 8 }"
|
v-model="documentRemark"
|
>
|
</el-input>
|
</div>
|
</el-card>
|
<el-card
|
class="box-card technology-document-card technology-document-card-checkout"
|
>
|
<div slot="header" class="clearfix">
|
<span class="technology-document-header">工艺文件：</span>
|
</div>
|
<el-table
|
:data="processConfigFileTableData"
|
border
|
style="width: 100%;"
|
:header-cell-style="{ background: 'antiquewhite', color: '#333' }"
|
>
|
<el-table-column
|
prop="orderNumber"
|
label="订单号"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
prop="lineNumber"
|
label="行号"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
prop="originalFileName"
|
label="文件名"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
prop="createUser"
|
label="上传人"
|
align="center"
|
></el-table-column>
|
<el-table-column
|
prop="createTime"
|
label="上传时间"
|
align="center"
|
></el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button
|
@click="downloadProcessConfigFile(scope.row)"
|
type="text"
|
size="small"
|
>下载</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<el-card
|
class="box-card technology-document-card technology-document-card-checkout"
|
>
|
<div slot="header" class="clearfix">
|
<span class="technology-document-header">工艺配置单：</span>
|
</div>
|
<div style="height: 500px;overflow: auto">
|
<div
|
class="node-content-remark"
|
v-if="processConfigContentData.modelType == '01'"
|
>
|
<el-form
|
class="configform1"
|
:inline="true"
|
ref="form"
|
label-width="80px"
|
>
|
<el-form-item label="订单编号">
|
{{ processConfigContentData.proNo }}
|
</el-form-item>
|
<el-form-item label="项目名称">
|
{{ processConfigContentData.proName }}
|
</el-form-item>
|
</el-form>
|
生产要求描述：
|
<div
|
class="remarkHtml"
|
v-html="processConfigContentData.remark1"
|
></div>
|
印字举例：
|
<div
|
class="remarkHtml"
|
v-html="processConfigContentData.remark2"
|
></div>
|
注意：
|
<div
|
class="remarkHtml"
|
v-html="processConfigContentData.remark3"
|
></div>
|
备注：
|
<div
|
class="remarkHtml"
|
v-html="processConfigContentData.remark4"
|
></div>
|
</div>
|
|
<!--模板2-->
|
<div
|
class="node-content-remark"
|
v-if="processConfigContentData.modelType == '02'"
|
>
|
<el-form
|
class="configform2"
|
:inline="true"
|
ref="form"
|
label-width="100px"
|
>
|
<div
|
class="node-content-remark2"
|
style="width: 80%;margin-left: 30px;"
|
>
|
<el-form-item label="合同编号：" style="width: 49%">
|
{{ processConfigContentData.proNo }}
|
</el-form-item>
|
<el-form-item label="项目名称：" style="width: 49%">
|
{{ processConfigContentData.proName }}
|
</el-form-item>
|
<el-form-item label="印字要求：" style="width: 100%">
|
{{ processConfigContentData.printReq }}
|
</el-form-item>
|
<div
|
class="remarkHtml"
|
v-html="processConfigContentData.remark1"
|
></div>
|
<div
|
class="remarkHtml"
|
v-html="processConfigContentData.remark2"
|
></div>
|
<el-form-item label="实际印字要求：" style="width: 100%">
|
{{ processConfigContentData.realPrintReq }}
|
</el-form-item>
|
<el-row class="bodyrow">
|
<el-col :span="5">
|
<div class="param-top">
|
<div class="form-item" style="text-align: left">
|
<label>发泡缆芯(Φmm)</label>
|
<div>
|
{{ processConfigContentData.cableCore }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div style="text-align: right;padding-right: 20px">
|
护套模具：
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="param-top">
|
<div class="form-item">
|
<label>模芯(Φmm)</label>
|
<div>
|
{{ processConfigContentData.modelCore }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div class="param-top">
|
<div class="form-item">
|
<label>模套(Φmm)</label>
|
<div>
|
{{ processConfigContentData.modelSleeve }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="3"
|
><div class="param-top">
|
<div class="form-item">
|
<label>定径模(Φmm)</label>
|
<div>
|
{{ processConfigContentData.sizingModel }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="3"
|
><div class="param-top">
|
<div class="form-item">
|
<label>绞合模(Φmm)</label>
|
<div>
|
{{ processConfigContentData.strandModel }}
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div
|
class="remarkHtml"
|
v-html="processConfigContentData.remark3"
|
></div>
|
<el-table
|
:data="processConfigContentData.processConfigDataList"
|
style="width: 100%;margin-top: 10px"
|
border
|
>
|
<el-table-column prop="date" label="频率(MHz)">
|
<template slot-scope="scope">
|
{{ scope.row.frequency }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="name" label="最大传送衰减(dB/km)">
|
<template slot-scope="scope">
|
{{ scope.row.deliveryReduce }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="province"
|
label="耦合损耗max(dB),2米,95%"
|
>
|
<template slot-scope="scope">
|
{{ scope.row.couplingLoss }}
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-form-item
|
label="工作频带内驻波比："
|
style="width: 100%"
|
label-width="120px"
|
>
|
{{ processConfigContentData.workFrequency }}
|
</el-form-item>
|
<el-form-item
|
label="频率范围："
|
style="width: 100%"
|
label-width="120px"
|
>
|
{{ processConfigContentData.frequencyRange }}
|
</el-form-item>
|
<el-form-item
|
label="直流电阻："
|
style="width: 100%"
|
label-width="120px"
|
>
|
{{ processConfigContentData.resistance }}
|
</el-form-item>
|
<div
|
class="remarkHtml"
|
v-html="processConfigContentData.remark4"
|
></div>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
</el-card>
|
<el-card
|
class="box-card technology-document-card technology-document-card-structure"
|
>
|
<div slot="header" class="clearfix">
|
<span class="technology-document-header">结构图：</span>
|
</div>
|
<div class="technology-document-structure-div">
|
<img width="70%" :src="structureImageUrl" alt="" />
|
</div>
|
</el-card>
|
<el-card
|
class="box-card technology-document-card technology-document-card-flow"
|
>
|
<div slot="header" class="clearfix">
|
<span class="technology-document-header">流程图：</span>
|
</div>
|
<div class="technology-document-flow-div">
|
<div style="text-align:center;width:67%;overflow: auto;">
|
<img :src="flowImageUrl" alt="" />
|
</div>
|
<div style="width:30%;">
|
<el-card class="box-card technology-document-flow-remark-card">
|
<div slot="header" class="clearfix">
|
<span>流程图备注：</span>
|
</div>
|
<div class="technology-document-flow-remark-div">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 6, maxRows: 20 }"
|
v-model="flowImageRemark"
|
>
|
</el-input>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</el-card>
|
<el-card
|
class="box-card technology-document-card technology-document-card-orimaterial"
|
>
|
<div slot="header" class="clearfix">
|
<span class="technology-document-header">材料用量：</span>
|
</div>
|
<el-table
|
:data="materialCostList"
|
border
|
:span-method="technologyDocumentSpanMethod"
|
style="width: 100%;"
|
:header-cell-style="{ background: 'antiquewhite', color: '#333' }"
|
>
|
<el-table-column label="成品" prop="finishedProduct" align="center">
|
</el-table-column>
|
<el-table-column label="Bom编号" prop="bomNumber" align="center">
|
</el-table-column>
|
<el-table-column label="物料" prop="partName" align="center">
|
</el-table-column>
|
<el-table-column label="数量" prop="quantity" align="center">
|
</el-table-column>
|
<el-table-column label="单位" prop="unit" align="center">
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<el-card
|
class="box-card technology-document-card technology-document-card-bom"
|
>
|
<div slot="header" class="clearfix">
|
<span class="technology-document-header">工序参数：</span>
|
</div>
|
<el-tabs v-model="structureNumber" type="card" @tab-click="getParams">
|
<el-tab-pane
|
v-for="(bom, i) in bomList"
|
:label="bom.bomNumber"
|
:name="bom.bomNumber"
|
:key="bom.bomId"
|
>
|
<div class="technology-document-bom-class">
|
<el-card
|
v-for="(operation, j) in bom.operationList"
|
class="box-card technology-document-operation-card"
|
:key="operation.operationId"
|
>
|
<div slot="header" class="clearfix">
|
<span class="technology-document-operation-header"
|
>{{ j + 1 }}.{{ operation.operationName }}：</span
|
>
|
</div>
|
<div class="technology-document-operation-remark-div">
|
<el-input
|
type="textarea"
|
:autosize="{ minRows: 6, maxRows: 20 }"
|
v-html="operation.operationRemark"
|
>
|
</el-input>
|
</div>
|
<div class="technology-document-operation-params-div">
|
<table
|
class="technology-document-operation-params-table"
|
v-html="operation.params"
|
></table>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
<el-card
|
class="box-card technology-document-card technology-document-card-checkout"
|
>
|
<div slot="header" class="clearfix">
|
<span class="technology-document-header">成品检测：</span>
|
</div>
|
<el-table
|
:data="checkData"
|
border
|
style="width: 100%;"
|
:header-cell-style="{ background: 'antiquewhite', color: '#333' }"
|
>
|
<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="referenceValue"
|
label="检测范围"
|
align="center"
|
>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getDocumentForOa } from '@/api/oa/examineinfo'
|
import {
|
downloadProcessConfigFile,
|
getProcessConfigFiles,
|
getProcessConfigContent
|
} from '@/api/plan/customerorder'
|
import RichText from '@/views/common/rich-text.vue'
|
import PartDialog from '@/views/common/part'
|
import SalesPartDialog from '@/views/plan/customerorder/sales-part'
|
import SynchronizeDialog from '@/views/plan/customerorder/synchronize-part'
|
export default {
|
components: {
|
RichText
|
},
|
data() {
|
return {
|
documentData: [],
|
documentRemark: null,
|
structureImageUrl: '',
|
flowImageUrl: '',
|
flowImageRemark: null,
|
materialCostList: [],
|
rowColSplitNodes: [],
|
structureNumber: null,
|
paramsTable:
|
'<tr><td style="height: 30px;background: antiquewhite;font-weight:bold">拉丝-中间模直径4（单头铜大拉）（mm）</td><td style="height: 30px;">3.93</td><td style="height: 30px;background: antiquewhite;font-weight:bold">拉丝-成品模直径9（单头铜大拉）（mm）</td><td style="height: 30px;">2.98（-0.02，+0.02）</td></tr><tr><td style="height: 30px;background: antiquewhite;font-weight:bold">拉丝-中间模直径5（单头铜大拉）（mm）</td><td style="height: 30px;">3.350</td><td style="height: 30px;background: antiquewhite;font-weight:bold">拉丝-中间模直径1（双头铜大拉）（mm） </td><td style="height: 30px;">6.601</td></tr><tr><td style="height: 30px;background: antiquewhite;font-weight:bold">拉丝-中间模直径5（单头铜大拉）（mm）</td><td style="height: 30px;">3.350</td><td style="height: 30px;background: antiquewhite;font-weight:bold">拉丝-中间模直径1（双头铜大拉）（mm）sssssssssssssssssssss </td><td style="height: 30px;">6.601</td></tr>',
|
bomList: [],
|
checkData: [],
|
processConfigFileTableData: [],
|
processConfigContentData: {}
|
}
|
},
|
created() {
|
document.title = '工艺文件审核'
|
console.log(window.location.href)
|
var url = window.location.href
|
var param = url.split('?')[1]
|
const params = param.split('&')
|
const id = params[0].split('=')[1]
|
const orderNumber = params[1].split('=')[1]
|
const lineNumber = params[2].split('=')[1]
|
this.getDocument(id)
|
const configParam = {
|
orderNumber: orderNumber,
|
lineNumber: lineNumber
|
}
|
this.getProcessConfigFileTableData(configParam)
|
this.getProcessConfigContentData({
|
orderNo: orderNumber,
|
otcLineNo: lineNumber
|
})
|
},
|
methods: {
|
getDocument(id) {
|
getDocumentForOa(id).then((response) => {
|
if (response.data.code === 0) {
|
const resData = response.data.data
|
console.log(resData)
|
const bomRoutings = resData.bomRoutings
|
const testStandards = resData.testStandards
|
const materialCosts = resData.materialCosts
|
// 渲染主表
|
this.documentData = []
|
var documentMain = {
|
createUser: resData.createUser,
|
createTime: resData.createTime,
|
name: resData.name,
|
number: resData.number,
|
version: resData.version,
|
projectNo: resData.projectNo,
|
country: resData.country
|
}
|
this.documentData.push(documentMain)
|
this.documentRemark = resData.remark
|
// 渲染结构图
|
this.structureImageUrl = '/mes/document/file/' + resData.jgt
|
// 渲染流程图
|
this.flowImageUrl = resData.lctBase64
|
this.flowImageRemark = resData.lctRemark
|
// 渲染原材料用量
|
this.materialCostList = []
|
if (materialCosts != null) {
|
this.calcRowColSplitNode(materialCosts)
|
}
|
// 渲染工序参数
|
this.bomList = []
|
if (bomRoutings != null && bomRoutings.length > 0) {
|
let bom
|
this.structureNumber = bomRoutings[0].bomNumber
|
for (let i = 0; i < bomRoutings.length; i++) {
|
bom = {}
|
bom.bomId = bomRoutings[i].bomId
|
bom.bomNumber = bomRoutings[i].bomNumber
|
bom.operationList = []
|
const operations = bomRoutings[i].routingDTO.operations
|
if (operations != null && operations.length > 0) {
|
let operation
|
let op
|
for (let k = 0; k < operations.length; k++) {
|
op = operations[k]
|
operation = {}
|
operation.operationId = op.id
|
operation.operationName = op.operationName
|
operation.operationRemark = op.remark
|
operation.params = this.generateParamTableHtml(
|
op.routingOperationParam
|
)
|
bom.operationList.push(operation)
|
}
|
}
|
this.bomList.push(bom)
|
}
|
}
|
// 渲染成品检测
|
this.checkData = []
|
if (testStandards != null && testStandards.length > 0) {
|
let testStandard
|
let standardParams
|
let standardParam
|
for (let i = 0; i < testStandards.length; i++) {
|
testStandard = testStandards[i]
|
standardParams = testStandard.standardParams
|
for (let j = 0; j < standardParams.length; j++) {
|
standardParam = {
|
parameterItem: standardParams[j].parameterItem,
|
referenceValue: standardParams[j].referenceValue,
|
unit: standardParams[j].unit
|
}
|
this.checkData.push(standardParam)
|
}
|
}
|
}
|
} else {
|
this.$message.error('获取工艺文件信息失败')
|
}
|
})
|
},
|
getProcessConfigFileTableData(paras) {
|
getProcessConfigFiles(paras).then((res) => {
|
this.processConfigFileTableData = res.data.data
|
})
|
},
|
getProcessConfigContentData(paras) {
|
getProcessConfigContent(paras).then((res) => {
|
if (res.data.data) {
|
this.processConfigContentData = res.data.data
|
|
const processConfigDataList = []
|
for (
|
let i = 0;
|
i < this.processConfigContentData.processConfigDataList.length;
|
i++
|
) {
|
const d = this.processConfigContentData.processConfigDataList[i]
|
if (d.couplingLoss || d.deliveryReduce || d.frequency) {
|
processConfigDataList.push(
|
this.processConfigContentData.processConfigDataList[i]
|
)
|
}
|
}
|
this.processConfigContentData.processConfigDataList = processConfigDataList
|
console.log(this.processConfigContentData)
|
}
|
})
|
},
|
downloadProcessConfigFile(row) {
|
downloadProcessConfigFile(
|
row.fileName,
|
row.bucketName,
|
row.originalFileName
|
)
|
},
|
generateParamTableHtml(params) {
|
let tableHtml = ''
|
if (params != null && params.length > 0) {
|
for (let i = 0; i < params.length; i++) {
|
if ((i + 1) % 2 === 0) {
|
tableHtml +=
|
'<td style="height: 30px;background: antiquewhite;font-weight:bold">' +
|
params[i].parameterItem +
|
'(' +
|
params[i].unit +
|
')' +
|
'</td><td style="height: 30px;">' +
|
(params[i].paramValue == null ? '' : params[i].paramValue) +
|
'</td></tr>'
|
} else {
|
tableHtml +=
|
'<tr><td style="height: 30px;background: antiquewhite;font-weight:bold">' +
|
params[i].parameterItem +
|
'(' +
|
params[i].unit +
|
')' +
|
'</td><td style="height: 30px;">' +
|
(params[i].paramValue == null ? '' : params[i].paramValue) +
|
'</td>'
|
}
|
}
|
if (params.length % 2 === 1) {
|
tableHtml += '</tr>'
|
}
|
}
|
return tableHtml
|
},
|
calcRowColSplitNode(dataMap) {
|
let rowColSplitNode
|
let keyValues
|
let allKeyValues = []
|
let i = 0
|
this.rowColSplitNodes = []
|
for (var dataKey in dataMap) {
|
keyValues = dataMap[dataKey]
|
rowColSplitNode = {
|
key: dataKey,
|
node: i,
|
num: keyValues.length
|
}
|
this.rowColSplitNodes.push(rowColSplitNode)
|
allKeyValues = allKeyValues.concat(keyValues)
|
i = i + keyValues.length
|
}
|
this.materialCostList = allKeyValues
|
console.log(this.rowColSplitNodes)
|
console.log(this.materialCostList)
|
},
|
technologyDocumentSpanMethod({ row, column, rowIndex, columnIndex }) {
|
if (columnIndex === 0 || columnIndex === 1) {
|
var rowColSplitNode = this.rowColSplitNodes.find(
|
(item) => item.key == row.bomId && item.node === rowIndex
|
)
|
console.log(row.bomId, rowIndex)
|
if (rowColSplitNode !== undefined) {
|
return {
|
rowspan: rowColSplitNode.num,
|
colspan: 1
|
}
|
} else {
|
return {
|
rowspan: 0,
|
colspan: 0
|
}
|
}
|
}
|
},
|
getParams() {}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.technology-document-class {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
margin-bottom: 20px;
|
}
|
.technology-document-card {
|
width: 97%;
|
margin-top: 20px;
|
}
|
|
.technology-document-header {
|
font-size: 20px;
|
font-weight: 700;
|
}
|
.technology-document-card .el-card__header {
|
background-color: #f5f5f5;
|
padding: 10px 15px;
|
}
|
.technology-document-card .el-card__body {
|
padding: 0px 0px;
|
}
|
.technology-document-card-main .el-textarea__inner {
|
border-radius: 0px;
|
border: 1px solid #ebeef5;
|
border-top: 0px;
|
}
|
.technology-document-card-main .el-table {
|
border-top: 0px;
|
}
|
.technology-document-structure-div {
|
text-align: center;
|
padding: 15px 15px;
|
}
|
.technology-document-flow-div {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-around;
|
padding: 15px 15px;
|
}
|
.technology-document-flow-remark-card {
|
}
|
.technology-document-card-orimaterial .el-table {
|
border-top: 0px;
|
}
|
.technology-document-operation-card {
|
width: 65%;
|
}
|
.technology-document-bom-class {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
margin-bottom: 15px;
|
}
|
.technology-document-operation-card .el-card__header {
|
background-color: antiquewhite;
|
padding: 10px 15px;
|
}
|
.technology-document-operation-remark-div {
|
height: 220px;
|
overflow: auto;
|
}
|
.technology-document-operation-params-table {
|
width: 100%;
|
border: 1px solid #ddd;
|
table-layout: fixed;
|
}
|
|
.technology-document-operation-params-table td {
|
border: 1px solid #ddd;
|
text-align: center;
|
font-size: 15px;
|
padding: 8px;
|
}
|
.technology-document-operation-params-div {
|
margin-bottom: 40px;
|
}
|
.technology-document-card-checkout .el-table {
|
border-top: 0px;
|
}
|
.node-content-remark > div {
|
/deep/ .quill-editor {
|
.ql-container {
|
height: 150px;
|
overflow: auto;
|
}
|
}
|
//&:last-child {
|
// /deep/ .quill-editor .ql-container {
|
// height: 100px;
|
// overflow: auto;
|
// }
|
//}
|
}
|
|
.node-content-remark2 > div {
|
/deep/ .quill-editor {
|
.ql-container {
|
height: 100px;
|
overflow: auto;
|
}
|
}
|
}
|
.configform1 {
|
.el-input {
|
width: 300px;
|
}
|
}
|
.configform2 {
|
/deep/ .el-form-item__content {
|
width: 70% !important;
|
}
|
.el-input {
|
width: 100%;
|
}
|
}
|
|
.bodyrow {
|
border: 1px solid #eeeeee;
|
.el-input {
|
width: 80%;
|
}
|
.form-item {
|
text-align: center;
|
}
|
}
|
|
.remarkHtml {
|
min-height: 100px;
|
border: 1px solid #eeeeee;
|
}
|
|
.node-content-remark .el-form-item {
|
border: 1px solid #eeeeee;
|
border-bottom: none;
|
margin-bottom: 0px !important;
|
}
|
.node-content-remark2 .el-form-item {
|
border: 1px solid #eeeeee;
|
border-bottom: none;
|
margin-bottom: 0px !important;
|
}
|
</style>
|
