287 lines
8.9 KiB
Vue
287 lines
8.9 KiB
Vue
<template>
|
|
<div>
|
|
<el-card style="width: 580px">
|
|
<el-row style="width: 580px">
|
|
<el-input v-model="partNumber" placeholder="零件图号" style="width: 180px" size="small" clearable/>
|
|
<el-button icon="el-icon-search" type="primary" plain size="small" @click="pageCurrent = 1;pageSize = 10;getTableData()">查询</el-button>
|
|
<el-upload
|
|
:disabled="disabled"
|
|
:action="action"
|
|
:on-success="uploadSuccess"
|
|
:on-error="uploadFailure"
|
|
:show-file-list="showFileList"
|
|
:file-list="fileList"
|
|
style="float: right; margin: 0px 50px"
|
|
class="upload-demo"
|
|
multiple>
|
|
<el-button type="primary" size="small" style="float: right;" plain @click="batchImportOfDrawings">图纸导入</el-button>
|
|
</el-upload>
|
|
</el-row>
|
|
</el-card>
|
|
<el-card style="width: 580px">
|
|
<el-table v-loading="loading" :data="tableData" border size="mini" style="width: 555px;height: 700px" height="520">
|
|
<el-table-column label="序号" align="center" type="index" width="50"/>
|
|
<el-table-column label="零件图号" align="center" width="180px">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.name }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="文件格式" align="center" width="80px">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.suffix }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="上传时间" align="center" width="150px">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.上传时间.split(' ')[0] }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column width="80px" label="零件图纸" align="center">
|
|
<template slot-scope="scope">
|
|
<el-button circle icon="el-icon-search" size="small" @click="getNum(scope.row)"/>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="block" style="margin-top: 10px;">
|
|
<el-pagination
|
|
:current-page="pageCurrent"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="pageSize"
|
|
:total="total"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="handleSizeChanges"
|
|
@current-change="handleCurrentChanges"/>
|
|
</div>
|
|
</el-card>
|
|
<el-dialog :visible.sync="dialogVisible" width="350px">
|
|
<div v-for="(file, key) in hadFile" :key="key">
|
|
<div class="wrapper">
|
|
<div class="content">
|
|
<div class="action">
|
|
<a v-show="isDeleteShow" 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>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import request from '@/utils/request'
|
|
import { getTableData } from '@/api/TechnologyCenter/PartDrawingMaintenance'
|
|
import { MESUploadFile, MESDownloadFile } from '@/utils/request'
|
|
export default {
|
|
data() {
|
|
return {
|
|
partNumber: '', // 零件图号
|
|
tableData: [],
|
|
loading: false,
|
|
total: 0,
|
|
pageCurrent: 1,
|
|
pageSize: 10,
|
|
dialogVisible: false,
|
|
close: false, // 是否显示关闭按钮
|
|
disabled: false,
|
|
isDeleteShow: false,
|
|
deleteShow: '1',
|
|
action: '',
|
|
showFileList: false,
|
|
hadFile: [],
|
|
fileList: []
|
|
}
|
|
},
|
|
created() {
|
|
this.getTableData()
|
|
},
|
|
methods: {
|
|
// 查询
|
|
getTableData() {
|
|
var partNumber_check = this.partNumber ? 1 : 0
|
|
this.loading = true
|
|
getTableData(partNumber_check, this.partNumber, this.pageSize, this.pageCurrent).then(response => {
|
|
this.loading = false
|
|
this.tableData = response.data.rows
|
|
this.total = response.data.total
|
|
})
|
|
},
|
|
handleSizeChanges(val) {
|
|
this.pageCurrent = 1
|
|
this.pageSize = val
|
|
this.getTableData()
|
|
},
|
|
handleCurrentChanges(val) {
|
|
this.pageCurrent = val
|
|
this.getTableData()
|
|
},
|
|
// 上传
|
|
batchImportOfDrawings() {
|
|
this.action = `${MESUploadFile}?&num=1&tableName=机加工MES_零件图PDF表&type=1`
|
|
},
|
|
uploadSuccess(res, file, fileList) {
|
|
this.getTableData()
|
|
if (res[0].result === '1') {
|
|
const index = fileList.indexOf(file)
|
|
fileList.splice(index, 1)
|
|
} else {
|
|
this.str = res[0].result
|
|
this.arr = this.str.split('|')
|
|
if (this.arr[1] === '无该零件') {
|
|
this.$notify.error({
|
|
title: '提示',
|
|
message: `${this.arr[0]}该零件不存在，请检查上传文件名称是否正确！`,
|
|
duration: 0
|
|
})
|
|
}
|
|
if (this.arr[1] === '重复') {
|
|
this.$notify.error({
|
|
title: '提示',
|
|
message: `${this.arr[0]}请勿重复上传！`,
|
|
duration: 0
|
|
})
|
|
}
|
|
if (this.arr[1] === '零件图号不正确') {
|
|
this.$notify.error({
|
|
title: '提示',
|
|
message: `${this.arr[0]}和所选图号不符！`,
|
|
duration: 0
|
|
})
|
|
}
|
|
}
|
|
if (fileList.length === 0) {
|
|
this.$message.success('文件上传成功')
|
|
// this.getTableData()
|
|
}
|
|
},
|
|
uploadFailure(res, file, fileList) {
|
|
fileList.map(file => {
|
|
this.$message.error(`${file.name}文件上传失败，请检查上传文件是否正确！`)
|
|
})
|
|
},
|
|
// 查看零件图
|
|
getNum(row) {
|
|
this.num = row.num
|
|
this.dialogVisible = true
|
|
this.getFileList(row.name)
|
|
},
|
|
async getFileList(value) {
|
|
this.hadFile = []
|
|
this.deleteShow === '1' ? this.isDeleteShow = true : this.isDeleteShow = false
|
|
if (value) {
|
|
await request({
|
|
url: '',
|
|
method: 'post',
|
|
data: {
|
|
type: '3',
|
|
name: `select * from 机加工MES_零件图PDF表 where 是否启用 = 1 and name = '${value}'`
|
|
}
|
|
}).then(data => {
|
|
this.suffix = data.data
|
|
if (data.data.length > 0) {
|
|
const server = `${MESDownloadFile}`.split('/')
|
|
data.data.map(item => {
|
|
this.hadFile.push({
|
|
url: `http://${server[2]}/webpage/part/${item.uid}.${item.suffix}`,
|
|
name: `${item.name}.${item.suffix}`,
|
|
suffix: item.suffix,
|
|
id: item.uid
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 删除零件图
|
|
async deleteFileData(id) {
|
|
this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
request({
|
|
url: '',
|
|
method: 'post',
|
|
data: {
|
|
type: '3',
|
|
name: `delete from 机加工MES_零件图PDF表 where uid = N'${id}'`
|
|
}
|
|
}).then(response => {
|
|
this.getTableData()
|
|
if (response.data.length === 0) {
|
|
this.$message.success('删除成功')
|
|
this.dialogVisible = false
|
|
this.getFileList(this.num)
|
|
} else {
|
|
this.$message.error('删除失败')
|
|
this.dialogVisible = false
|
|
this.getFileList(this.num)
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wrapper{
|
|
width: 90%;
|
|
height: 50px;
|
|
overflow: hidden;
|
|
border: 1px solid #b8c7d9;
|
|
/*float: left;*/
|
|
margin: 10px;
|
|
}
|
|
.content{
|
|
position: relative;
|
|
padding: 8px 8px 0 8px;
|
|
}
|
|
.action{
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 8px;
|
|
}
|
|
.delete{
|
|
padding: 0 5px;
|
|
border-radius: 3px;
|
|
color: #0f84b0;
|
|
font-size: 12px;
|
|
}
|
|
.delete:hover{
|
|
background: -webkit-linear-gradient(top,#0ba9e3,#0099d3);
|
|
color: #fff;
|
|
}
|
|
a{
|
|
text-decoration: none;
|
|
}
|
|
.icon{
|
|
width: 30px;
|
|
height: 30px;
|
|
display: inline-block;
|
|
margin-right: 7px;
|
|
margin-top: 2px;
|
|
font-size: 26px;
|
|
}
|
|
.info{
|
|
width: 160px;
|
|
height: 50px;
|
|
position: absolute;
|
|
left: 44px;
|
|
line-height: 30px;
|
|
display: inline-block;
|
|
color: #999;
|
|
}
|
|
</style>
|