356 lines
13 KiB
Vue
356 lines
13 KiB
Vue
<template>
|
|
<!-- 弹窗内容区域 -->
|
|
<div class="app-container" style="height: calc(100vh - 84px); overflow-y: unset">
|
|
<div class="page-header">
|
|
<div>
|
|
<i
|
|
class="el-icon-arrow-left goBack-btn"
|
|
@click="goBack"
|
|
style="border-color: transparent; color: #00a288; background: transparent; padding-left: 0; padding-right: 0"
|
|
>返回</i
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<el-form
|
|
label-width="110px"
|
|
ref="formRef"
|
|
style="padding: 12px; overflow-y: auto; height: calc(100vh - 180px); width: 100%"
|
|
label-position="right"
|
|
:model="form"
|
|
v-loading="isLoading"
|
|
>
|
|
<div style="display: flex; padding-bottom: 5px">
|
|
<div style="width: 5px; background-color: #00a288; margin-right: 10px"></div>
|
|
基础信息
|
|
</div>
|
|
<el-row :gutter="24" style="padding-top: 10px">
|
|
<el-col :span="6">
|
|
<el-form-item label="专业" prop="major">
|
|
<el-input v-model="form.major" placeholder="专业" readonly></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="工序" prop="process">
|
|
<el-input v-model="form.process" placeholder="工序" readonly></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="装备类目" prop="category">
|
|
<el-input v-model="form.category" placeholder="装备类目" readonly></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="装备名称" prop="name">
|
|
<el-input v-model="form.name" placeholder="装备名称" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="6">
|
|
<el-form-item label="规格型号" prop="specificationModel">
|
|
<el-input v-model="form.specificationModel" placeholder="规格型号" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="资产原值(万元)" prop="originalValue">
|
|
<el-input v-model="form.originalValue" placeholder="资产原值(万元)" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="生产厂家" prop="manufacturer">
|
|
<el-input v-model="form.manufacturer" placeholder="生产厂家" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="出厂日期" prop="productionDate">
|
|
<el-input v-model="form.productionDate" placeholder="出厂日期" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<el-col :span="6">
|
|
<el-form-item label="下次维保日期" prop="nextMaintenanceDate">
|
|
<el-input v-model="form.nextMaintenanceDate" placeholder="下次维保日期" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="装备原始编码" prop="originalCode">
|
|
<el-input clearable maxlength="20" placeholder="装备原始编码" v-model="form.originalCode" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="最大使用年限" prop="maxServiceLifeYears">
|
|
<el-input clearable maxlength="20" placeholder="最大使用年限" v-model="form.maxServiceLifeYears" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="计数单位" prop="unit">
|
|
<el-input v-model="form.unit" placeholder="计数单位" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="6">
|
|
<el-form-item label="管理模式" prop="manageType">
|
|
<el-input v-model="form.manageTypeName" placeholder="管理方式" readonly />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
</el-row>
|
|
<el-row :gutter="24">
|
|
<!-- <el-col :span="6">
|
|
<el-form-item label="装备数量" prop="count">
|
|
<el-input v-model="form.count" placeholder="装备数量" readonly />
|
|
</el-form-item>
|
|
</el-col> -->
|
|
<el-col :span="6">
|
|
<el-form-item label="采购日期" prop="purchaseDate">
|
|
<el-input v-model="form.purchaseDate" placeholder="采购日期" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div style="display: flex; padding-bottom: 10px">
|
|
<div style="width: 5px; background-color: #00a288; margin-right: 10px"></div>
|
|
特征属性
|
|
</div>
|
|
<el-row :gutter="24" style="padding-top: 10px">
|
|
<el-col :span="6" v-for="(item, index) in form.propertyVoList" :key="index">
|
|
<el-form-item :label="item.propertyName" prop="specialtyFeature">
|
|
<el-input v-model="item.propertyValue" readonly />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div style="display: flex; padding-bottom: 10px">
|
|
<div style="width: 5px; background-color: #00a288; margin-right: 10px"></div>
|
|
装备图片
|
|
</div>
|
|
<el-row :gutter="24" style="padding-top: 10px">
|
|
<el-col>
|
|
<el-form-item>
|
|
<div
|
|
v-if="form.appearanceImages && form.appearanceImages.length > 0"
|
|
style="display: flex; align-items: center; margin-bottom: 10px"
|
|
>
|
|
<div v-for="(item, index) in form.appearanceImages" :key="index">
|
|
<el-image
|
|
:src="item.fileUrl"
|
|
alt=""
|
|
:preview-src-list="[item.fileUrl]"
|
|
style="width: 120px; height: 120px; margin-right: 10px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<div style="display: flex; padding-bottom: 10px">
|
|
<div style="width: 5px; background-color: #00a288; margin-right: 10px"></div>
|
|
相关证书
|
|
</div>
|
|
<el-row :gutter="24" style="padding-top: 10px">
|
|
<el-col>
|
|
<el-form-item label="合格证" prop="certificates">
|
|
<div
|
|
v-if="form.certificates && form.certificates.length > 0"
|
|
style="display: flex; align-items: center; margin-bottom: 10px"
|
|
>
|
|
<div v-for="(item, index) in form.certificates" :key="index">
|
|
<!-- 后缀如果包含 .pdf 显示pdf图标 -->
|
|
<img
|
|
v-if="item.fileUrl && (item.fileUrl.includes('.pdf') || item.fileUrl.includes('.PDF'))"
|
|
style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
|
|
src="@/assets/images/pdf.png"
|
|
fit="fill"
|
|
@click="handleFile(item)"
|
|
/>
|
|
<!-- 后缀如果包含 .word 显示 word图片 -->
|
|
<img
|
|
v-else-if="
|
|
item.fileUrl &&
|
|
(item.fileUrl.includes('.doc') ||
|
|
item.fileUrl.includes('.docx') ||
|
|
item.fileUrl.includes('.DOC') ||
|
|
item.fileUrl.includes('.DOCX'))
|
|
"
|
|
style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
|
|
src="@/assets/images/word.png"
|
|
fit="fill"
|
|
@click="handleFile(item)"
|
|
/>
|
|
<el-image
|
|
v-else
|
|
:src="item.fileUrl"
|
|
alt=""
|
|
:preview-src-list="[item.fileUrl]"
|
|
style="width: 120px; height: 120px; margin-right: 10px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="检测证书" prop="inspectionReports">
|
|
<div
|
|
v-if="form.inspectionReports && form.inspectionReports.length > 0"
|
|
style="display: flex; align-items: center; margin-bottom: 10px"
|
|
>
|
|
<div v-for="(item, index) in form.inspectionReports" :key="index">
|
|
<!-- 后缀如果包含 .pdf 显示pdf图标 -->
|
|
<img
|
|
v-if="item.fileUrl && (item.fileUrl.includes('.pdf') || item.fileUrl.includes('.PDF'))"
|
|
style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
|
|
src="@/assets/images/pdf.png"
|
|
fit="fill"
|
|
@click="handleFile(item)"
|
|
/>
|
|
<!-- 后缀如果包含 .word 显示 word图片 -->
|
|
<img
|
|
v-else-if="
|
|
item.fileUrl &&
|
|
(item.fileUrl.includes('.doc') ||
|
|
item.fileUrl.includes('.docx') ||
|
|
item.fileUrl.includes('.DOC') ||
|
|
item.fileUrl.includes('.DOCX'))
|
|
"
|
|
style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
|
|
src="@/assets/images/word.png"
|
|
fit="fill"
|
|
@click="handleFile(item)"
|
|
/>
|
|
<el-image
|
|
v-else
|
|
:src="item.fileUrl"
|
|
alt=""
|
|
:preview-src-list="[item.fileUrl]"
|
|
style="width: 120px; height: 120px; margin-right: 10px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="采购发票" prop="purchaseInvoices">
|
|
<div
|
|
v-if="form.purchaseInvoices && form.purchaseInvoices.length > 0"
|
|
style="display: flex; align-items: center; margin-bottom: 10px"
|
|
>
|
|
<div v-for="(item, index) in form.purchaseInvoices" :key="index">
|
|
<!-- 后缀如果包含 .pdf 显示pdf图标 -->
|
|
<img
|
|
v-if="item.fileUrl && (item.fileUrl.includes('.pdf') || item.fileUrl.includes('.PDF'))"
|
|
style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
|
|
src="@/assets/images/pdf.png"
|
|
fit="fill"
|
|
@click="handleFile(item)"
|
|
/>
|
|
<!-- 后缀如果包含 .word 显示 word图片 -->
|
|
<img
|
|
v-else-if="
|
|
item.fileUrl &&
|
|
(item.fileUrl.includes('.doc') ||
|
|
item.fileUrl.includes('.docx') ||
|
|
item.fileUrl.includes('.DOC') ||
|
|
item.fileUrl.includes('.DOCX'))
|
|
"
|
|
style="width: 120px; height: 120px; margin-right: 10px; cursor: pointer"
|
|
src="@/assets/images/word.png"
|
|
fit="fill"
|
|
@click="handleFile(item)"
|
|
/>
|
|
<el-image
|
|
v-else
|
|
:src="item.fileUrl"
|
|
alt=""
|
|
:preview-src-list="[item.fileUrl]"
|
|
style="width: 120px; height: 120px; margin-right: 10px"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getDeviceApi } from '@/api/EquipmentEntryApply'
|
|
|
|
export default {
|
|
name: 'EquipmentDetails',
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
form: {
|
|
deviceTypeList: [], // 装备类型列表
|
|
appearanceImages: [], // 展示图
|
|
certificates: [], // 合格证
|
|
inspectionReports: [], // 检测证书
|
|
purchaseInvoices: [], // 采购发票
|
|
},
|
|
}
|
|
},
|
|
created() {
|
|
this.getInfo()
|
|
},
|
|
methods: {
|
|
async getInfo() {
|
|
try {
|
|
this.isLoading = true
|
|
const res = await getDeviceApi(this.$route.query.id)
|
|
this.form = res.data
|
|
this.form.process = this.form.mainProcess + '>' + this.form.subProcess
|
|
this.form.category =
|
|
this.form.mainCategory + '>' + this.form.subCategory + (this.form.branch ? '>' + this.form.branch : '')
|
|
this.form.manageTypeName = this.form.manageType === 0 ? '编码' : '数量'
|
|
} catch (error) {
|
|
console.log('🚀 ~ getInfo ~ error:', error)
|
|
} finally {
|
|
this.isLoading = false
|
|
}
|
|
},
|
|
// 返回上一页
|
|
goBack() {
|
|
this.$router.go(-1)
|
|
},
|
|
handleFile(item) {
|
|
window.open(item.fileUrl, '_blank')
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
font-size: 18px;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
justify-content: space-between;
|
|
|
|
.page-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-left: 15px;
|
|
color: #303133;
|
|
}
|
|
}
|
|
|
|
.dialog-content {
|
|
padding: 10px 0;
|
|
min-height: 200px; // 确保有足够高度
|
|
}
|
|
|
|
.goBack-btn:hover {
|
|
cursor: pointer;
|
|
color: #33b5a0;
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px; // 按钮间距
|
|
}
|
|
</style>
|