434 lines
16 KiB
Vue
434 lines
16 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: #2CBAB2; 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: #34E2C7; 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="value">
|
||
<el-input v-model="form.value" 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-row>
|
||
<el-row :gutter="24">
|
||
<el-col :span="6">
|
||
<el-form-item label="出厂日期" prop="productionDate">
|
||
<el-input v-model="form.productionDate" placeholder="出厂日期" readonly/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<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="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="unit">
|
||
<el-input v-model="form.unit" 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-col :span="6">
|
||
<el-form-item label="产权单位" prop="propertyUnit">
|
||
<el-input v-model="form.propertyUnit" placeholder="产权单位" readonly/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div style="display: flex; padding-bottom: 10px">
|
||
<div style="width: 5px; background-color: #34E2C7; 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: #34E2C7; 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>
|
||
<img
|
||
v-else
|
||
src="@/assets/images/no-img.png"
|
||
alt=""
|
||
style="width: 120px; height: 120px; margin-right: 10px"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<div style="display: flex; padding-bottom: 10px">
|
||
<div style="width: 5px; background-color: #34E2C7; 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>
|
||
<img
|
||
v-else
|
||
src="@/assets/images/no-img.png"
|
||
alt=""
|
||
style="width: 120px; height: 120px; margin-right: 10px"
|
||
/>
|
||
</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>
|
||
<img
|
||
v-else
|
||
src="@/assets/images/no-img.png"
|
||
alt=""
|
||
style="width: 120px; height: 120px; margin-right: 10px"
|
||
/>
|
||
</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>
|
||
<img
|
||
v-else
|
||
src="@/assets/images/no-img.png"
|
||
alt=""
|
||
style="width: 120px; height: 120px; margin-right: 10px"
|
||
/>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="装备二维码" prop="">
|
||
<div class="qrcode-box" style="width: 150px;height: 150px">
|
||
<QrcodeGenerator
|
||
ref="qr3"
|
||
:value="dialogRow"
|
||
errorCorrectionLevel="H"
|
||
:size="150"
|
||
/>
|
||
</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,
|
||
dialogRow: '',
|
||
form: {
|
||
deviceTypeList: [], // 装备类型列表
|
||
appearanceImages: [], // 展示图
|
||
certificates: [], // 合格证
|
||
inspectionReports: [], // 检测证书
|
||
purchaseInvoices: [] // 采购发票
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.getInfo()
|
||
},
|
||
methods: {
|
||
async getInfo() {
|
||
try {
|
||
this.isLoading = true
|
||
const res = await getDeviceApi(this.$route.query.id)
|
||
if (res.data) {
|
||
let row = res.data
|
||
const propertyList = row.propertyVoList || []
|
||
const property = propertyList
|
||
// 过滤条件：item 存在 且 propertyValue 有值（避免空值干扰）
|
||
.filter(item => item && item.propertyValue)
|
||
// 拼接单个属性为 "名称:值" 格式
|
||
.map(item => `${item.propertyName}:${item.propertyValue}`)
|
||
// 用分隔符连接（推荐用中文逗号/竖线，可自定义）
|
||
.join(',')
|
||
//3.装备小类，，6.生产厂家，7.出厂日期，8.特征属性
|
||
// 单行写法（用\n）
|
||
this.dialogRow =
|
||
`装备名称:${row.name}\r\n` +
|
||
`装备编码:${row.code}\r\n` +
|
||
`规格型号:${row.specificationModel}\r\n` +
|
||
`产权单位:${row.propertyUnit}\r\n` +
|
||
`装备小类:${row.subCategory}\r\n` +
|
||
`生产厂家:${row.manufacturer}\r\n` +
|
||
`出厂日期:${row.productionDate}\r\n` +
|
||
`特征属性:{${property}}`
|
||
this.$nextTick(() => {
|
||
this.$refs.qr3?.refreshQrcode()
|
||
})
|
||
}
|
||
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; // 按钮间距
|
||
}
|
||
|
||
/* 紧凑表单行距 */
|
||
::v-deep .el-form-item {
|
||
margin-bottom: 16px;
|
||
}
|
||
</style>
|