bonus-ui/src/views/material/part/partArrived/component/queryTools.vue

351 lines
13 KiB
Vue

<template>
<div>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
</el-col>
</el-row>
<el-table
v-loading="loading"
:data="equipmentList"
>
<el-table-column label="序号" align="center" type="index" />
<el-table-column
label="物资名称"
align="center"
prop="maTypeName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="规格型号"
align="center"
prop="typeName"
:show-overflow-tooltip="true"
/>
<el-table-column
label="单位"
align="center"
prop="unitName"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
label="采购数量"
align="center"
prop="purchaseNum"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
label="购置单价(元含税)"
align="center"
prop="purchaseTaxPrice"
:show-overflow-tooltip="true"
/>
<el-table-column
label="购置单价(元不含税)"
align="center"
prop="purchasePrice"
:show-overflow-tooltip="true"
/>
<el-table-column
label="租赁价(元/天)"
align="center"
prop="rentPrice"
:show-overflow-tooltip="true"
/>
<el-table-column
label="是否未固定资产"
align="center"
prop="fixCode"
:show-overflow-tooltip="true"
/>
<el-table-column
label="出厂日期"
align="center"
prop="productionTime"
:show-overflow-tooltip="true"
/>
<el-table-column
label="相关配套资料"
align="center"
prop=""
>
<template slot-scope="scope">
<div style="color: #02A7F0;cursor: pointer;" @click="openFileDialog(scope.row)" v-if="scope.row.isExitFile==0">报告管理</div>
<div style="color: red;cursor: pointer;" @click="openFileDialog(scope.row)" v-if="scope.row.isExitFile==1">报告管理</div>
</template>
</el-table-column>
<el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
<template slot-scope="scope">
<dict-tag :options="dict.type.purchase_task_status" :value="scope.row.status"/>
</template>
</el-table-column>
</el-table>
<el-dialog title="报告管理" :visible.sync="open" width="900px" append-to-body>
<el-table :data="fileDataList" width="100%" height="350px">
<el-table-column label="序号" type="index" width="55" align="center"/>
<el-table-column label="报告类型" align="center" prop="dictLabel" :show-overflow-tooltip="true"/>
<el-table-column label="文件名称" align="center" prop="name" :show-overflow-tooltip="true"/>
<el-table-column label="类型名称" align="center" :show-overflow-tooltip="true">
<template>
<div>{{this.rowData.maTypeName}}</div>
</template>
</el-table-column>
<el-table-column label="规格型号" align="center" :show-overflow-tooltip="true">
<template>
<div>{{this.rowData.typeName}}</div>
</template>
</el-table-column>
<!-- <el-table-column label="报告日期" align="center" prop="orgName" :show-overflow-tooltip="true"/>
<el-table-column label="截止有效期" align="center" prop="orgName" :show-overflow-tooltip="true"/> -->
<el-table-column label="操作" align="center" width="100">
<template slot-scope="scope">
<div style="display: flex;align-items: center;justify-content: space-between;">
<!-- <el-upload ref="upload" :limit="1" :headers="upload.headers"
:action="upload.url" :show-file-list="false" accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
:on-success="handleFileSuccess" :auto-upload="true"
>
<el-button size="mini" type="text" @click="beforeFileUpload(scope.row)">
上传
</el-button>
</el-upload> -->
<el-button size="mini" type="text" @click="picturePreview(scope.row)" v-if="scope.row.url">
查看
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</el-dialog>
<!-- 图片查看弹窗 -->
<el-dialog :visible.sync="dialogVisible" width="500px" height="500px" >
<img width="100%" height="500px" :src="dialogImageUrl" />
</el-dialog>
</div>
</template>
<script>
import {
getPurchaseCheckInfo
} from '@/api/purchase/goodsArrived'
import { uploadPurchaseFile,getPurchaseFileList } from "@/api/purchase/goodsAccept";
import { getToken } from '@/utils/auth'
export default {
name: 'QueryTools',
dicts: ['purchase_task_status'],
components: {
// UploadImg,
},
props: {
isView: {
type: Boolean,
default: () => {
return false
},
},
queryTaskId: {
type: [String, Number],
default: () => {
return ''
},
},
queryId: {
type: [String, Number],
default: () => {
return ''
},
},
},
data() {
return {
fixCodeList:["否","是"],
//任务ID
taskId: '',
// 遮罩层
loading: true,
//任务数据
taskInfo: {},
// 表格数据
equipmentList: [],
// 是否显示弹出层
open: false,
rowData:{},
fileDataList: [
{dictLabel:"合格证",fileType:"0",name:"",url:""},
{dictLabel:"型式试验报告",fileType:"1",name:"",url:""},
{dictLabel:"出厂检测报告",fileType:"2",name:"",url:""},
{dictLabel:"第三方监测报告",fileType:"3",name:"",url:""},
{dictLabel:"其他",fileType:"4",name:"",url:""},
],
//上传
upload: {
// 设置上传的请求头部
headers: { Authorization: 'Bearer ' + getToken() },
// 上传的地址
url: process.env.VUE_APP_BASE_API + '/file/upload'
},
//图片查看弹窗
dialogImageUrl: '',
dialogVisible: false,
}
},
computed: {
},
mounted() {
this.taskId = this.queryTaskId
this.id = this.queryId
this.getTaskInfo()
},
methods: {
//获取任务详情-列表数据
getTaskInfo() {
this.loading = true
getPurchaseCheckInfo({taskId:this.taskId,id:this.id,statusList:[1],taskStage: 1}).then((response) => {
this.taskInfo = response.data
this.equipmentList = response.data.purchaseCheckDetailsList
this.equipmentList.forEach((item) => {
item.fixCode = this.fixCodeList[Number(item.fixCode)]
})
this.loading = false
})
},
//文件管理
openFileDialog(row){
this.rowData=row;
this.fileDataList = [{dictLabel:"合格证",fileType:"0",name:"",url:""},
{dictLabel:"型式试验报告",fileType:"1",name:"",url:""},
{dictLabel:"出厂检测报告",fileType:"2",name:"",url:""},
{dictLabel:"第三方监测报告",fileType:"3",name:"",url:""},
{dictLabel:"其他",fileType:"4",name:"",url:""}]
this.getFileData()
this.open=true
},
getFileData(){
let param = {
modelId:this.rowData.typeId,
taskType:0,
taskId:this.rowData.taskId
}
getPurchaseFileList(param).then((response) => {
if(response.rows.length>0){
response.rows.forEach(item=>{
let index = this.fileDataList.findIndex(v=>v.fileType==item.fileType)
this.fileDataList[index].name = item.name
this.fileDataList[index].url = item.url
})
}
}).catch(() => {
})
},
beforeFileUpload(row){
this.rowData.fileType=row.fileType;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
if(response.code==200){
if(this.taskId==""){//新增逻辑
// console.log(response)
// console.log(this.rowData)
// console.log(this.rowData.bmFileInfos)
let obj = {
"taskId": this.taskId,
"taskType": "0",
"name": response.data.name,
"url": response.data.url,
"modelId": this.rowData.typeId,
"fileType": this.rowData.fileType,
// "dictLabel": this.rowData.dictLabel,
}
//根据文件上传返回更新文件管理弹窗内容
let index = this.fileDataList.findIndex(v=>v.fileType==this.rowData.fileType)
this.fileDataList[index].name = response.data.name
this.fileDataList[index].url = response.data.url
//判断当前上传的文件是否已上传过-再往机具类型数据中插入
if(this.rowData.bmFileInfos.length>0){
let index2 = this.rowData.bmFileInfos.findIndex(v=>v.fileType==this.rowData.fileType)
if(index2>-1){//相同类型文件重复上传-替换
this.rowData.bmFileInfos.splice(index2,0,obj)
}else{//不存在相同类型文件-添加
this.rowData.bmFileInfos.push(obj)
}
}else{
this.rowData.bmFileInfos.push(obj)
}
}else{//编辑逻辑
let param = {
"taskId": this.taskId,
"taskType": "0",
"name": response.data.name,
"url": response.data.url,
"modelId": this.rowData.typeId,
"fileType": this.rowData.fileType,
// "dictLabel": this.rowData.dictLabel,
}
uploadPurchaseFile(param).then((response) => {
this.$modal.msgSuccess('上传成功')
this.getFileData()
}).catch(() => {
this.$modal.msgError('上传失败')
})
}
}
},
//图片查看
picturePreview(file) {
this.dialogImageUrl = file.url;
const parts = file.name.split('.');
const extension = parts.pop();
if(extension === 'doc'||extension === 'docx'||extension === 'pdf'){
const windowName = file.name;
window.open(file.url,windowName)
}else{
this.dialogVisible = true
}
},
/** 导出按钮操作 */
handleExport() {
this.download('/material/purchase_check_info/exportDetails',{taskId:this.taskId},`新购到货详情_${new Date().getTime()}.xlsx`)
},
},
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
width: 60px !important;
margin-bottom: 10px;
}
//隐藏图片上传框的css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
}
.custom-textarea {
width: 300px;
height: 100px;
}
.accept-img {
color: #409eff;
.a-two {
margin-left: 20px;
}
}
.left-tip {
font-size: 16px;
letter-spacing: 1px;
}
</style>