284 lines
9.1 KiB
Vue
284 lines
9.1 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-card class="topCard">
|
||
<div class="topDiv">
|
||
<span style="margin-left: 10px">工位号：</span>
|
||
<el-select v-model="stationNumberValue" placeholder="请选择工位号" size="small" style="width: 150px">
|
||
<el-option
|
||
v-for="item in stationNumber"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
size="mini"/>
|
||
</el-select>
|
||
<span style="margin-left: 10px">工位名称：</span>
|
||
<el-input v-model="stationName" disabled style="width:150px;" placeholder="" size="small"/>
|
||
<span style="margin-left: 10px">产品型号：</span>
|
||
<el-select v-model="engineTypeValue" placeholder="请选择产品型号" size="small" style="width: 150px">
|
||
<el-option
|
||
v-for="item in engineType"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
size="mini"/>
|
||
</el-select>
|
||
<el-button type="primary" plain size="small" icon="el-icon-order" @click="searchTable()">查询</el-button>
|
||
<el-button type="distribution" icon="el-icon-circle-plus-outline" size="small" @click="addTo">上传</el-button>
|
||
</div>
|
||
<div>
|
||
<iframe :src="url" frameborder="0" scrolling="no" style="width: 1495px; height: 785px"/>
|
||
</div>
|
||
</el-card>
|
||
<el-dialog
|
||
v-el-drag-dialog
|
||
:visible.sync="dialogVisible1"
|
||
:center="dialogName"
|
||
title="上传PDF"
|
||
width="20%">
|
||
<div v-for="(file, key) in hadFile" :key="key">
|
||
<div class="wrapper">
|
||
<div class="content">
|
||
<div class="action">
|
||
<!-- <a class="delete" @click="deleteFileData(file.id)">删除</a>-->
|
||
</div>
|
||
<!-- <div v-if="file.suffix==='pdf'" class="icon"><svg-icon icon-class="pdf" /></div>-->
|
||
<!-- <div v-else-if="file.suffix==='docx'||file.suffix === 'doc'" class="icon"><svg-icon icon-class="doc" /></div>-->
|
||
<!-- <div v-else-if="file.suffix==='xlsx' || file.suffix === 'xls'" class="icon"><svg-icon icon-class="excel" /></div>-->
|
||
<!-- <div v-else-if="file.suffix==='pptx' || file.suffix === 'ppt'" class="icon"><svg-icon icon-class="ppt" /></div>-->
|
||
<!-- <div v-else-if="file.suffix==='jpg' || file.suffix === 'jpeg'|| file.suffix === 'png'" class="icon"><svg-icon icon-class="pic" /></div>-->
|
||
<!-- <div v-else class="icon"><svg-icon icon-class="file" /></div>-->
|
||
<!-- <a id="appUrl" :href="file.url" target="view_window"><div class="info">{{ file.name }}</div></a>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-left: 38%">
|
||
<el-upload
|
||
:action="action"
|
||
:on-success="uploadSuccess"
|
||
:on-error="uploadFailure"
|
||
:show-file-list="showFileList"
|
||
:file-list="fileList"
|
||
class="upload-demo"
|
||
multiple>
|
||
<el-button size="small" type="shengcheng" @click="batchImportOfDrawings">点击上传</el-button>
|
||
</el-upload>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex'
|
||
import { MESUploadFileProject } from '@/utils/request'
|
||
export default {
|
||
data() {
|
||
return {
|
||
url: '',
|
||
loading: true,
|
||
dialogName: true,
|
||
action: '',
|
||
showFileList: false,
|
||
hadFile: [
|
||
],
|
||
fileList: [],
|
||
fileName: '',
|
||
fileName1: '',
|
||
tableData: [], // 总数据数组
|
||
stationNumber: [],
|
||
stationNumberValue: '',
|
||
stationName: '',
|
||
moduleDescription: [],
|
||
moduleDescriptionValue: '',
|
||
engineTypeValue: '',
|
||
engineTypeValue1: '',
|
||
engineTypeName: '',
|
||
engineType: [],
|
||
isDisableValue: 0,
|
||
labelText: '',
|
||
labelNumber: '',
|
||
dialogFormVisible: false,
|
||
dialogFormVisible1: false,
|
||
dialogVisible1: false,
|
||
title: ''
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'id',
|
||
'token',
|
||
'departmentName'
|
||
])
|
||
},
|
||
watch: {
|
||
stationNumberValue() {
|
||
for (let i = 0; i < this.stationNumber.length; i++) {
|
||
if (this.stationNumber[i].value === this.stationNumberValue) {
|
||
console.log(this.stationNumber[i].label, 'this.stationNumber[i].label')
|
||
this.stationName = this.stationNumber[i].labelName
|
||
}
|
||
}
|
||
if (!this.stationNumberValue) {
|
||
this.stationName = ''
|
||
}
|
||
},
|
||
engineTypeValue() {
|
||
console.log(1234)
|
||
for (let i = 0; i < this.engineType.length; i++) {
|
||
if (this.engineType[i].value === this.engineTypeValue) {
|
||
this.engineTypeValue1 = this.engineType[i].labelName
|
||
}
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
// this.searchTable()
|
||
this.getStationNumber()
|
||
this.getEndStation()
|
||
},
|
||
methods: {
|
||
getStationNumber() {
|
||
this.stationNumber = []
|
||
var param = []
|
||
var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.stationNumber.push({
|
||
label: response.data[i].工位号,
|
||
value: response.data[i].工位号,
|
||
labelName: response.data[i].工序名称
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 初始化获取产品型号
|
||
getEndStation() {
|
||
this.engineType = []
|
||
var param = []
|
||
var Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
for (let i = 0; i < response.data.length; i++) {
|
||
this.engineType.push({
|
||
label: response.data[i].发动机型号,
|
||
value: response.data[i].发动机型号,
|
||
labelName: response.data[i].发动机机型标志
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 表格颜色变化
|
||
tableRowClassName({ row, rowIndex }) {
|
||
// console.log(row, rowIndex)
|
||
if (rowIndex % 2 === 0) {
|
||
return 'black'
|
||
} else {
|
||
return 'red'
|
||
}
|
||
},
|
||
// 查询MES消息
|
||
searchTable() {
|
||
this.url = ''
|
||
var param = []
|
||
param[0] = ['产品型号代码', this.engineTypeValue1]
|
||
param[1] = ['工位号', this.stationNumberValue]
|
||
var Data = this.CreateData('11', '电子看板_工位名称与产品型号工艺卡_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
this.suffix = response.data
|
||
if (response.data.length > 0) {
|
||
this.url = response.data[0].工艺卡路径
|
||
// const server = `${MESDownloadFile}`.split('/')
|
||
// response.data.map(item => {
|
||
// this.hadFile.push({
|
||
// url: item.工艺卡路径,
|
||
// name: `${item.工艺卡路径}.${item.suffix}`.split('/'),
|
||
// suffix: item.suffix,
|
||
// id: item.ID
|
||
// })
|
||
// })
|
||
}
|
||
})
|
||
},
|
||
addTo() {
|
||
this.dialogVisible1 = true
|
||
},
|
||
batchImportOfDrawings() {
|
||
this.action = `${MESUploadFileProject}?&num=1&tableName=电子看板_工位名称与产品型号工艺卡&stationNumberValue=${this.stationNumberValue}&engineTypeValue1=${this.engineTypeValue1}&engineTypeValue=${this.engineTypeValue}`
|
||
console.log(this.action)
|
||
},
|
||
uploadSuccess(res, file, fileList) {
|
||
if (res[0].result === '1') {
|
||
const index = fileList.indexOf(file)
|
||
fileList.splice(index, 1)
|
||
} else {
|
||
this.$message.error(`${file.name}文件上传失败，请检查上传文件是否正确！`)
|
||
}
|
||
if (fileList.length === 0) {
|
||
this.$message.success('文件上传成功')
|
||
this.hadFile = []
|
||
var param = []
|
||
param[0] = ['产品型号代码', this.engineTypeValue1]
|
||
param[1] = ['工位号', this.stationNumberValue]
|
||
var Data = this.CreateData('11', '电子看板_工位名称与产品型号工艺卡_查询', param)
|
||
this.ExecDatabase(Data).then(response => {
|
||
this.suffix = response.data
|
||
if (response.data.length > 0) {
|
||
console.log(response.data, 'response.data[0].工艺卡路径')
|
||
// const server = `${MESDownloadFile}`.split('/')
|
||
this.url = response.data[0].工艺卡路径
|
||
this.dialogVisible1 = false
|
||
}
|
||
})
|
||
}
|
||
},
|
||
uploadFailure(res, file, fileList) {
|
||
fileList.map(file => {
|
||
this.$message.error(`${file.name}文件上传失败，请检查上传文件是否正确！`)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.topCard{
|
||
margin: 5px;
|
||
}
|
||
.topDiv{
|
||
margin-bottom: 10px;
|
||
}
|
||
.el-select{
|
||
width:200px
|
||
}
|
||
.el-input{
|
||
width:200px
|
||
}
|
||
.text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.item {
|
||
padding: 18px 0;
|
||
}
|
||
|
||
.box-card {
|
||
position: absolute;
|
||
right: 6px;
|
||
top: 80px;
|
||
width: 300px;
|
||
}
|
||
.el-table .warning-row {
|
||
background: oldlace;
|
||
}
|
||
|
||
.el-table .success-row {
|
||
background: #f0f9eb;
|
||
}
|
||
|
||
/deep/.el-input.is-disabled .el-input__inner{
|
||
color: #606266!important;
|
||
}
|
||
/deep/.el-input.is-disabled .el-input__inner{
|
||
background-color: white!important;
|
||
}
|
||
</style>
|
||
|