<template>
|
<div class="tech__wrap">
|
<div class="l">
|
<el-card>
|
<el-table
|
v-adaptive="{ bottomOffset: 40, fixedHeight: 0 }"
|
:data="tableData"
|
height="100px"
|
border
|
style="width: 100%;"
|
>
|
<el-table-column
|
v-for="(col, i) in columnList"
|
:key="i"
|
:prop="col.createUser"
|
:label="col.label"
|
:width="col.width"
|
align="center"
|
>
|
<template slot-scope="x">
|
<template v-if="!col.custom">{{ x.row[col.prop] }}</template>
|
<template v-else-if="col.label === '工艺配置单'">
|
<el-button
|
type="primary"
|
size="mini"
|
@click="goCheckPeizhi(x.row)"
|
>查看</el-button
|
>
|
</template>
|
<template v-else-if="col.label === '工艺结构'">
|
<el-button
|
type="primary"
|
size="mini"
|
@click="goCheckJiegou(x.row)"
|
>查看</el-button
|
>
|
</template>
|
<template v-else-if="col.label === '结构图'">
|
<el-button type="primary" size="mini" @click="goCheckJgt(x.row)"
|
>查看</el-button
|
>
|
</template>
|
<template v-else-if="col.label === '印字要求'">
|
<span> </span>
|
{{
|
`${x.row.printType || '--'} | ${x.row.printingRequirements ||
|
'--'} | ${x.row.printContent || '--'}`
|
}}
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
<div class="r">
|
<el-card class="r__card">
|
<div slot="header" class="clearfix">
|
<span>OTC附件列表</span>
|
</div>
|
<div v-for="(x, i) in otcList" :key="i">
|
<el-tag @click="goDownload(x, 'otc')" class="tags">
|
<i class="el-icon-document"></i>
|
<span>{{ x.original }}</span>
|
</el-tag>
|
</div>
|
</el-card>
|
<el-card class="r__card">
|
<div slot="header" class="clearfix">
|
<span>技术部附件列表</span>
|
</div>
|
<div v-for="(x, i) in configList" :key="i">
|
<el-tag @click="goDownload(x, 'config')" class="tags">
|
<i class="el-icon-document"></i>
|
<span>{{ x.originalFileName }}</span>
|
</el-tag>
|
</div>
|
</el-card>
|
</div>
|
<PeizhiModal v-if="visible.peizhi" ref="peizhi" />
|
<JiegouModal v-if="visible.jiegou" ref="jiegou" />
|
<JgtModal v-if="visible.jgt" ref="jgt" />
|
</div>
|
</template>
|
<script>
|
import adaptive from '@/util/adaptive'
|
import PeizhiModal from './PeizhiModal'
|
import JiegouModal from './JiegouModal'
|
import JgtModal from './JgtModal'
|
import {
|
getOADetailDTO,
|
getOTC,
|
downOTC,
|
getCONFIG,
|
downCONFIG
|
} from '@/api/oa/technologyDocument'
|
export default {
|
components: { PeizhiModal, JiegouModal, JgtModal },
|
directives: {
|
adaptive
|
},
|
data() {
|
const col = (label, prop, custom = false) => {
|
const config = { label, prop, custom }
|
if (label === '单位') {
|
config.width = '50px'
|
}
|
return config
|
}
|
return {
|
columnList: [
|
col('工艺配置单', null, true),
|
col('订单编号', 'customerOrderNo'),
|
col('订单行号', 'otcLineNo'),
|
col('工程名称', 'entityName'),
|
col('产品名称', 'productName'),
|
col('产品类型', 'productType'),
|
col('零件名称', 'partName'),
|
col('外护颜色', 'outerColor'),
|
col('数量', 'otcQuantity'),
|
col('单位', 'otcUnit'),
|
col('印字要求', 'printingRequirements', true),
|
col('盘长要求', 'lengthRequirement'),
|
col('备注', 'remark'),
|
col('订单说明', 'orderDescription'),
|
col('工艺结构', null, true),
|
col('结构图', null, true)
|
],
|
tableData: [],
|
otcList: [],
|
configList: [],
|
visible: {
|
peizhi: false,
|
jiegou: false,
|
jgt: false
|
}
|
}
|
},
|
created() {
|
document.title = '工艺详情'
|
console.log(window.location.href)
|
var url = window.location.href
|
var param = url.split('?')[1]
|
if (param) {
|
const params = param.split('&')
|
const ids = params[0].split('=')[1].split(',')
|
getOADetailDTO(ids).then((res) => {
|
this.tableData = res.data.data
|
if (this.tableData.length) {
|
getOTC({ orderNumber: this.tableData[0].customerOrderNo }).then(
|
(res) => {
|
this.otcList = res.data.data
|
}
|
)
|
getCONFIG({
|
customerOrderNo: this.tableData[0].customerOrderNo
|
}).then((res) => {
|
this.configList = res.data.data
|
})
|
}
|
})
|
}
|
},
|
methods: {
|
goDownload(x, type) {
|
if (type === 'otc') {
|
downOTC(x.id).then((response) => {
|
// 处理返回的文件流
|
const blob = response.data
|
const link = document.createElement('a')
|
link.href = URL.createObjectURL(blob)
|
link.download = x.original
|
document.body.appendChild(link)
|
link.click()
|
window.setTimeout(function() {
|
URL.revokeObjectURL(blob)
|
document.body.removeChild(link)
|
}, 0)
|
})
|
} else {
|
downCONFIG(x.fileName, x.bucketName, x.originalFileName)
|
}
|
},
|
goCheckPeizhi(x) {
|
this.visible.peizhi = true
|
this.$nextTick(() => {
|
this.$refs.peizhi.init(x)
|
})
|
},
|
goCheckJiegou(x) {
|
if (x.technologyDocumentId) {
|
this.visible.jiegou = true
|
this.$nextTick(() => {
|
this.$refs.jiegou.init(x)
|
})
|
} else {
|
this.$message.warning('无关联工艺结构')
|
}
|
},
|
goCheckJgt(x) {
|
if (x.technologyDocumentId) {
|
this.visible.jgt = true
|
this.$nextTick(() => {
|
this.$refs.jgt.init(x)
|
})
|
} else {
|
this.$message.warning('无关联结构图')
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.tech__wrap {
|
display: flex;
|
height: 100%;
|
width: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
.l {
|
width: calc(100% - 320px);
|
padding: 10px;
|
}
|
.r {
|
width: 350px;
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
.r__card {
|
& + .r__card {
|
margin-top: 15px;
|
}
|
}
|
.el-card {
|
flex: 1;
|
}
|
}
|
}
|
.tags {
|
cursor: pointer;
|
margin-bottom: 8px;
|
margin-left: 5px;
|
}
|
.tags + .tags {
|
}
|
</style>
|
