353 lines
8.8 KiB
Vue
353 lines
8.8 KiB
Vue
<template>
|
||
<div>
|
||
<el-form
|
||
:model="maForm"
|
||
ref="maForm"
|
||
size="small"
|
||
:inline="true"
|
||
label-width="120px"
|
||
>
|
||
<el-form-item prop="keyword">
|
||
<el-input
|
||
v-model="maForm.keyword"
|
||
placeholder="请输入关键字"
|
||
clearable
|
||
maxlength="50"
|
||
style="width: 240px"
|
||
@keyup.enter.native="handleQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
size="mini"
|
||
@click="handleQuery"
|
||
>搜索
|
||
</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||
>重置
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="附件" prop="bmFileInfos">
|
||
<el-upload
|
||
:action="uploadUrl"
|
||
:file-list="maForm.bmFileInfos"
|
||
:show-file-list="true"
|
||
:auto-upload="true"
|
||
:key="uploadKey"
|
||
:limit="5"
|
||
list-type="picture-card"
|
||
accept=".png, .jpg, .jpeg, .pdf"
|
||
:class="{ disabledFbs: uploadDisabled }"
|
||
:on-preview="picturePreviewFbs"
|
||
>
|
||
<!-- 文件格式下载，图片格式预览 -->
|
||
<div slot="file" slot-scope="{ file }">
|
||
<img
|
||
v-if="isImage(file)"
|
||
class="el-upload-list__item-thumbnail"
|
||
:src="file.url"
|
||
alt=""
|
||
/>
|
||
<div v-else class="picture-card-container">
|
||
<img class="picture-card" :src="urlTemp" alt="" />
|
||
<p class="file-name">{{ file.name }}</p>
|
||
</div>
|
||
<span class="el-upload-list__item-actions">
|
||
<span
|
||
v-if="updataIf(file)"
|
||
class="el-upload-list__item-delete"
|
||
@click="handleDownload(file)"
|
||
>
|
||
<i class="el-icon-download" />
|
||
</span>
|
||
<span
|
||
v-else
|
||
class="el-upload-list__item-preview"
|
||
@click="picturePreviewFbs(file)"
|
||
>
|
||
<i class="el-icon-zoom-in" />
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<i class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- <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="machineTypeName"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column
|
||
label="规格型号"
|
||
align="center"
|
||
prop="specificationType"
|
||
: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="storageNum"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="报废数量"
|
||
align="center"
|
||
prop="scrapNum"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column
|
||
label="设备编码"
|
||
align="center"
|
||
prop="maCode"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
<el-table-column
|
||
label="报废原因"
|
||
align="center"
|
||
prop="scrapReason"
|
||
:show-overflow-tooltip="true"
|
||
/>
|
||
</el-table>
|
||
<!-- 图片查看弹窗 -->
|
||
<el-dialog :visible.sync="dialogVisible" width="600px" height="600px">
|
||
<img width="100%" height="500px" :src="dialogImageUrl" />
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getScrapInfo } from '@/api/repairTest/inventoryScrap'
|
||
import { downloadFile, downloadFileData } from '@/utils/download'
|
||
import { getToken } from '@/utils/auth'
|
||
export default {
|
||
name: 'QueryTools',
|
||
components: {
|
||
// UploadImg,
|
||
},
|
||
props: {
|
||
isView: {
|
||
type: Boolean,
|
||
default: () => {
|
||
return false
|
||
},
|
||
},
|
||
queryTaskId: {
|
||
type: [String, Number],
|
||
default: () => {
|
||
return ''
|
||
},
|
||
},
|
||
queryId: {
|
||
type: [String, Number],
|
||
default: () => {
|
||
return ''
|
||
},
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
//任务ID
|
||
taskId: '',
|
||
// 遮罩层
|
||
loading: true,
|
||
|
||
// 表格数据
|
||
equipmentList: [],
|
||
// 是否显示弹出层
|
||
open: false,
|
||
rowData: {},
|
||
maForm: {
|
||
keyword: '',
|
||
bmFileInfos: [],
|
||
},
|
||
urlTemp: '',
|
||
//图片查看弹窗
|
||
dialogImageUrl: '',
|
||
dialogVisible: false,
|
||
uploadKey: Date.now(),
|
||
//上传
|
||
// upload: {
|
||
// // 设置上传的请求头部
|
||
// headers: {Authorization: 'Bearer ' + getToken()},
|
||
// // 上传的地址
|
||
// url: process.env.VUE_APP_BASE_API + '/file/upload'
|
||
// },
|
||
uploadUrl: process.env.VUE_APP_BASE_API + '/system/user/imgUpLoad', // 上传的图片服务器地址
|
||
}
|
||
},
|
||
computed: {
|
||
//图片上传1张后，隐藏上传框
|
||
uploadDisabled() {
|
||
return this.maForm.bmFileInfos && this.maForm.bmFileInfos.length <= 5
|
||
},
|
||
},
|
||
mounted() {
|
||
this.taskId = this.queryTaskId
|
||
this.getTaskInfo()
|
||
},
|
||
methods: {
|
||
/** 搜索按钮操作 */
|
||
handleQuery() {
|
||
this.getTaskInfo()
|
||
},
|
||
/** 重置按钮操作 */
|
||
resetQuery() {
|
||
this.resetForm('maForm')
|
||
this.maForm.keyword = ''
|
||
this.handleQuery()
|
||
},
|
||
//获取任务详情-列表数据
|
||
getTaskInfo() {
|
||
this.loading = true
|
||
console.log('xxxxxxxxxxxxxxxxxxxxx', this.taskId)
|
||
getScrapInfo({ taskId: this.taskId, keyword: this.maForm.keyword }).then(
|
||
(response) => {
|
||
this.equipmentList = response.data.scrapApplyDetailsList
|
||
this.maForm.bmFileInfos = response.data.fileList
|
||
if (this.maForm.bmFileInfos.length > 0) {
|
||
this.maForm.bmFileInfos.forEach((item) => {
|
||
item.url = process.env.VUE_APP_BASE_API + '/system' + item.url
|
||
})
|
||
}
|
||
this.loading = false
|
||
},
|
||
)
|
||
},
|
||
|
||
isImage(file) {
|
||
this.urlTemp = require('@/assets/images/file.png')
|
||
if (this.updataIf(file)) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
},
|
||
|
||
// 判断文件类型,图片预览，文件下载
|
||
updataIf(e) {
|
||
if (e.fileName) {
|
||
const parts = e.fileName.split('.')
|
||
const extension = parts.pop()
|
||
if (
|
||
extension === 'png' ||
|
||
extension === 'jpeg' ||
|
||
extension === 'jpg'
|
||
) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
} else {
|
||
const parts = e.name.split('.')
|
||
const extension = parts.pop()
|
||
if (
|
||
extension === 'png' ||
|
||
extension === 'jpeg' ||
|
||
extension === 'jpg'
|
||
) {
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}
|
||
},
|
||
|
||
//上传组件-图片查看
|
||
picturePreviewFbs(file) {
|
||
console.log('yyyyyyyyyy', file)
|
||
this.dialogImageUrl = file.url.replaceAll('#', '%23')
|
||
const parts = file.name.split('.')
|
||
const extension = parts.pop()
|
||
if (extension === 'pdf') {
|
||
const windowName = file.name
|
||
window.open(file.url, windowName)
|
||
} else {
|
||
this.dialogVisible = true
|
||
}
|
||
},
|
||
handleDownload(file) {
|
||
console.log(file)
|
||
if (file.status === 'ready') {
|
||
downloadFile({
|
||
fileName: file.name,
|
||
fileData: file.raw,
|
||
fileType: 'application/vnd.ms-excel;charset=utf-8',
|
||
})
|
||
} else if (file.status === 'success') {
|
||
downloadFileData({ fileName: file.name, fileUrl: file.url })
|
||
// downloadFileData({ fileName: file.name,fileUrl:file.url })
|
||
}
|
||
},
|
||
|
||
/** 导出按钮操作 */
|
||
// handleExport() {
|
||
// this.download(
|
||
// "/material/lease_apply_info/exportDetails",
|
||
// { id: this.id },
|
||
// `盘点报废详情_${new Date().getTime()}.xlsx`
|
||
// );
|
||
// },
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
::v-deep.disabledFbs {
|
||
.el-upload--picture-card {
|
||
display: none;
|
||
}
|
||
}
|
||
::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>
|