|
|
@@ -1,7 +1,76 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="holding3_look">
|
|
|
- <TabList :ind='3'/>
|
|
|
+ <!-- 导出pdf的盒子，平时不显示，点击导出之后显示 -->
|
|
|
+ <div class="myPdf" v-if="isShow">
|
|
|
+ <div id="myPdfCon">
|
|
|
+ <img :src="baseURL + myObj.thumb" alt="" />
|
|
|
+ <div class="title">
|
|
|
+ <h3>{{ myObj.name }}</h3>
|
|
|
+ <div v-if="myObj.status === '已入库'">已入库</div>
|
|
|
+ <div
|
|
|
+ v-else-if="myObj.status === '待入库'"
|
|
|
+ style="background-color: #ccc"
|
|
|
+ >
|
|
|
+ 待入库
|
|
|
+ </div>
|
|
|
+ <div v-else style="background-color: #85ce61">已出库</div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="row">
|
|
|
+ <div><span>藏品名称：</span>{{ myObj.name }}</div>
|
|
|
+ <div><span>总登记号：</span>{{ myObj.registerNum }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>编号类型：</span>{{ myObj.numTypeId }}</div>
|
|
|
+ <div><span>藏品编号：</span>{{ myObj.num }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>原名：</span>{{ myObj.primitiveName }}</div>
|
|
|
+ <div><span>年代：</span>{{ myObj.age }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>文物类别：</span>{{ myObj.goodsTypeName }}</div>
|
|
|
+ <div><span>文物质地：</span>{{ myObj.texture }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>数量类型：</span>{{ myObj.amountType }}</div>
|
|
|
+ <div><span>具体数量：</span>{{ myObj.amount }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>通长：</span>{{ myObj.length }}</div>
|
|
|
+ <div><span>通宽：</span>{{ myObj.width }}</div>
|
|
|
+ <div><span>通高：</span>{{ myObj.height }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <!-- <div><span>文物类别：</span>{{myObj.goodsTypeName}}</div> -->
|
|
|
+ <div><span>具体质量：</span>{{ myObj.quality }}</div>
|
|
|
+ <div><span>完残程度：</span>{{ myObj.integrity }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <div><span>完残状况：</span>{{ myObj.repairRemark }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row">
|
|
|
+ <!-- <div><span>文物价格：</span>1111</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>保存状态：</span>{{ myObj.repair }}</div>
|
|
|
+ <div><span>入藏时间范围：</span>{{ myObj.checkInScope }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div>
|
|
|
+ <span>入库位置：</span>{{ rukuTxt ? rukuTxt : "-" }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>出库位置：</span>{{ myObj.outPath ? myObj.outPath : "-" }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <TabList :ind="3" />
|
|
|
<div class="right">
|
|
|
<div class="top">
|
|
|
<el-breadcrumb separator="/">
|
|
|
@@ -12,15 +81,24 @@
|
|
|
</el-breadcrumb>
|
|
|
</div>
|
|
|
<div class="conten">
|
|
|
+ <div class="daochu">
|
|
|
+ <el-button size="small" @click="exPdf">导 出</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="conten_left">
|
|
|
- <img :src="baseURL+myObj.thumb" alt="" />
|
|
|
+ <img :src="baseURL + myObj.thumb" alt="" />
|
|
|
</div>
|
|
|
<div class="conten_right">
|
|
|
<div class="title">
|
|
|
<h3>{{ myObj.name }}</h3>
|
|
|
- <div v-if="myObj.status==='已入库'">已入库</div>
|
|
|
- <div v-else-if="myObj.status==='待入库'" style="background-color: #ccc;">待入库</div>
|
|
|
- <div v-else style="background-color: #85ce61;">已出库</div>
|
|
|
+ <div v-if="myObj.status === '已入库'">已入库</div>
|
|
|
+ <div
|
|
|
+ v-else-if="myObj.status === '待入库'"
|
|
|
+ style="background-color: #ccc"
|
|
|
+ >
|
|
|
+ 待入库
|
|
|
+ </div>
|
|
|
+ <div v-else style="background-color: #85ce61">已出库</div>
|
|
|
</div>
|
|
|
<div class="info">
|
|
|
<div class="row">
|
|
|
@@ -40,7 +118,7 @@
|
|
|
<div><span>文物质地：</span>{{ myObj.texture }}</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <div><span>数量类型：</span>{{ myObj.amountType}}</div>
|
|
|
+ <div><span>数量类型：</span>{{ myObj.amountType }}</div>
|
|
|
<div><span>具体数量：</span>{{ myObj.amount }}</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
@@ -54,35 +132,45 @@
|
|
|
<div><span>完残程度：</span>{{ myObj.integrity }}</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <!-- <div><span>文物价格：</span>1111</div> -->
|
|
|
+ <div><span>完残状况：</span>{{ myObj.repairRemark }}</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div><span>保存状态：</span>{{ myObj.repair }}</div>
|
|
|
<div><span>入藏时间范围：</span>{{ myObj.checkInScope }}</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <div><span>入库位置：</span>
|
|
|
- <el-cascader
|
|
|
- v-if="myObj.location&&myObj.location.length===3"
|
|
|
- placeholder=""
|
|
|
- disabled
|
|
|
- style="width:80%"
|
|
|
- :props="{value:'id',label:'name'}"
|
|
|
- v-model="myObj.location"
|
|
|
- :options="options"
|
|
|
- ></el-cascader>
|
|
|
- <i v-else>-</i>
|
|
|
+ <div>
|
|
|
+ <span>入库位置：</span>
|
|
|
+ <el-cascader
|
|
|
+ ref="cascaderAddr"
|
|
|
+ v-if="myObj.location && myObj.location.length === 3"
|
|
|
+ placeholder=""
|
|
|
+ disabled
|
|
|
+ style="width: 80%"
|
|
|
+ :props="{ value: 'id', label: 'name' }"
|
|
|
+ v-model="myObj.location"
|
|
|
+ :options="options"
|
|
|
+ ></el-cascader>
|
|
|
+ <i v-else>-</i>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>出库位置：</span>{{ myObj.outPath ? myObj.outPath : "-" }}
|
|
|
</div>
|
|
|
- <div><span>出库位置：</span>{{myObj.outPath?myObj.outPath:'-'}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="conten_bot">
|
|
|
<div class="resource">
|
|
|
<div class="select">
|
|
|
<h3>数字资源</h3>
|
|
|
<el-select v-model="resource" placeholder="请选择">
|
|
|
- <el-option v-for="item in affix" :key="item.value" :label="item.label" :value="item.value"></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in affix"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<!-- 表格 -->
|
|
|
@@ -92,27 +180,38 @@
|
|
|
border
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
- <el-table-column label="缩略图" width="160" v-if="this.resource==='img'">
|
|
|
- <template #default='{row}'>
|
|
|
+ <el-table-column
|
|
|
+ label="缩略图"
|
|
|
+ width="160"
|
|
|
+ v-if="this.resource === 'img'"
|
|
|
+ >
|
|
|
+ <template #default="{ row }">
|
|
|
<div class="smimg">
|
|
|
- <img :src="baseURL+row.filePath" alt="" />
|
|
|
+ <img :src="baseURL + row.filePath" alt="" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="name" label="附件名称" > </el-table-column>
|
|
|
+ <el-table-column prop="name" label="附件名称"> </el-table-column>
|
|
|
<!-- <el-table-column prop="address" label="附件说明" ></el-table-column> -->
|
|
|
<!-- <el-table-column prop="name" label="上传人" width="360"> </el-table-column> -->
|
|
|
- <el-table-column prop="updateTime" label="上传时间" width="360"> </el-table-column>
|
|
|
+ <el-table-column prop="updateTime" label="上传时间" width="360">
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="操作" width="360">
|
|
|
- <template #default='{row}'>
|
|
|
- <a :href="baseURL+row.filePath" :download="baseURL+row.filePath" target='_blank' class="mydown" >下 载</a>
|
|
|
+ <template #default="{ row }">
|
|
|
+ <a
|
|
|
+ :href="baseURL + row.filePath"
|
|
|
+ :download="baseURL + row.filePath"
|
|
|
+ target="_blank"
|
|
|
+ class="mydown"
|
|
|
+ >下 载</a
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<!-- 底部的返回按钮 -->
|
|
|
<div class="btn">
|
|
|
- <el-button @click='$router.go(-1)'>返 回</el-button>
|
|
|
+ <el-button @click="$router.go(-1)">返 回</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -121,8 +220,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import htmlToPdf from '@/utils/htmlToPdf'
|
|
|
import { getTreeList } from '@/apis/statistics0'
|
|
|
-import { getFileList } from '../../apis/holding'
|
|
|
+import { getFileList } from '@/apis/holding'
|
|
|
import axios from '@/utils/request'
|
|
|
import TabList from '@/components/tabLeft.vue'
|
|
|
export default {
|
|
|
@@ -132,13 +232,14 @@ export default {
|
|
|
data () {
|
|
|
// 这里存放数据
|
|
|
return {
|
|
|
+ rukuTxt: '',
|
|
|
+ isShow: false,
|
|
|
options: [],
|
|
|
// 服务器前缀地址
|
|
|
baseURL: '',
|
|
|
myObj: [],
|
|
|
// 表格数据
|
|
|
- tableData: [
|
|
|
- ],
|
|
|
+ tableData: [],
|
|
|
resource: 'video',
|
|
|
affix: [
|
|
|
{ label: '高清图片', value: 'img' },
|
|
|
@@ -159,12 +260,26 @@ export default {
|
|
|
},
|
|
|
// 方法集合
|
|
|
methods: {
|
|
|
+ // 点击导出
|
|
|
+ exPdf () {
|
|
|
+ this.isShow = true
|
|
|
+ // 获取入库位置文本
|
|
|
+ if (this.$refs.cascaderAddr) {
|
|
|
+ const thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()
|
|
|
+ const txt = thsAreaCode[0].pathLabels.join('/')
|
|
|
+ this.rukuTxt = txt
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ htmlToPdf.downloadPDF(document.querySelector('#myPdfCon'), this.myObj.name)
|
|
|
+ this.isShow = false
|
|
|
+ }, 100)
|
|
|
+ },
|
|
|
// 获取附件列表
|
|
|
async getFileList () {
|
|
|
const res = await getFileList(this.myObj.id, this.resource)
|
|
|
// console.log(666, res)
|
|
|
this.tableData = res.data
|
|
|
- this.tableData.forEach(v => {
|
|
|
+ this.tableData.forEach((v) => {
|
|
|
v.updateTime = v.updateTime.slice(0, 10)
|
|
|
})
|
|
|
}
|
|
|
@@ -202,10 +317,87 @@ body {
|
|
|
overflow: auto;
|
|
|
}
|
|
|
body .el-table::before {
|
|
|
- z-index: inherit;
|
|
|
+ z-index: inherit;
|
|
|
}
|
|
|
//@import url(); 引入公共css类
|
|
|
.holding3_look {
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 2px solid #ccc;
|
|
|
+ height: 40px;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 20px;
|
|
|
+ h3 {
|
|
|
+ font-size: 20px;
|
|
|
+ color: black;
|
|
|
+ margin: 0 25px 0 35px;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 50px;
|
|
|
+ height: 20px;
|
|
|
+ background-color: #40a9ff;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 13px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ margin: 20px 0 0 55px;
|
|
|
+ width: 90%;
|
|
|
+ // margin-bottom: 60px;
|
|
|
+ .row {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0;
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ font-size: 16px;
|
|
|
+ color: black;
|
|
|
+ }
|
|
|
+ /deep/.el-input__suffix-inner {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ & > div {
|
|
|
+ padding-left: 20px;
|
|
|
+ flex: 1;
|
|
|
+ height: 38px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ font-size: 16px;
|
|
|
+ color: black;
|
|
|
+ span {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .myPdf {
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ #myPdfCon {
|
|
|
+ &>img {
|
|
|
+ max-width: 800px;
|
|
|
+ max-height: 320px;
|
|
|
+ }
|
|
|
+ padding: 20px 0;
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ margin: 100px auto;
|
|
|
+ width: 1000px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.mydown {
|
|
|
color: #40a9ff;
|
|
|
}
|
|
|
@@ -229,6 +421,12 @@ body .el-table::before {
|
|
|
}
|
|
|
}
|
|
|
.conten {
|
|
|
+ position: relative;
|
|
|
+ .daochu {
|
|
|
+ position: absolute;
|
|
|
+ right: 130px;
|
|
|
+ top: 12px;
|
|
|
+ }
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
flex: 1;
|
|
|
@@ -250,63 +448,11 @@ body .el-table::before {
|
|
|
.conten_right {
|
|
|
flex: 1;
|
|
|
height: 400px;
|
|
|
- .title {
|
|
|
- display: flex;
|
|
|
- border-bottom: 2px solid #ccc;
|
|
|
- height: 40px;
|
|
|
- align-items: center;
|
|
|
- margin: 0 20px;
|
|
|
- h3 {
|
|
|
- font-size: 20px;
|
|
|
- color: black;
|
|
|
- margin: 0 25px 0 35px;
|
|
|
- }
|
|
|
- & > div {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 50px;
|
|
|
- height: 20px;
|
|
|
- background-color: #40a9ff;
|
|
|
- color: #fff;
|
|
|
- font-size: 13px;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .info {
|
|
|
- margin: 20px 0 0 55px;
|
|
|
- width: 90%;
|
|
|
- // margin-bottom: 60px;
|
|
|
- .row {
|
|
|
- /deep/.el-input__inner{
|
|
|
- padding: 0;
|
|
|
- background-color: transparent;
|
|
|
- border: none;
|
|
|
- font-size: 16px;
|
|
|
- color: black; }
|
|
|
- /deep/.el-input__suffix-inner{
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- display: flex;
|
|
|
- & > div {
|
|
|
- padding-left: 20px;
|
|
|
- flex: 1;
|
|
|
- height: 43px;
|
|
|
- line-height: 43px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- font-size: 16px;
|
|
|
- color: black;
|
|
|
- span {
|
|
|
- font-weight: 700;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.conten_bot {
|
|
|
position: relative;
|
|
|
|
|
|
- .btn{
|
|
|
+ .btn {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
@@ -315,18 +461,18 @@ body .el-table::before {
|
|
|
height: 250px;
|
|
|
width: 100%;
|
|
|
.resource {
|
|
|
- /deep/.el-table{
|
|
|
+ /deep/.el-table {
|
|
|
max-height: 190px;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
- .smimg{
|
|
|
- text-align: center;
|
|
|
- height: 40px;
|
|
|
- img {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .smimg {
|
|
|
+ text-align: center;
|
|
|
+ height: 40px;
|
|
|
+ img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
max-height: 250px;
|
|
|
// overflow: auto;
|
|
|
width: 97%;
|
