|
|
@@ -0,0 +1,299 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <el-dialog title="查看藏品" :visible="dialogFormVisible" @close="btnOK()">
|
|
|
+ <div class="title">
|
|
|
+ <div :class="{ active: index === 0 }" @click="change(0)">藏品信息</div>
|
|
|
+ <div :class="{ active: index === 1 }" @click="change(1)">附件</div>
|
|
|
+ </div>
|
|
|
+ <div class="info" v-if="!index">
|
|
|
+ <div class="row">
|
|
|
+ <div><span>藏品名称：</span>{{ myObj.name?myObj.name:'-' }}</div>
|
|
|
+ <div><span>总登记号：</span>{{ myObj.registerNum?myObj.registerNum:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>编号类型：</span>{{ myObj.numTypeId?myObj.numTypeId:'-' }}</div>
|
|
|
+ <div><span>藏品编号：</span>{{ myObj.num?myObj.num:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>原名：</span>{{ myObj.primitiveName?myObj.primitiveName:'-' }}</div>
|
|
|
+ <div><span>年代：</span>{{ myObj.age?myObj.age:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>文物类别：</span>{{ myObj.goodsTypeId?myObj.goodsTypeId:'-' }}</div>
|
|
|
+ <div><span>文物级别：</span>{{ myObj.level?myObj.level:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>质地类型：</span>{{ myObj.textureType?myObj.textureType:'-' }}</div>
|
|
|
+ <div><span>质地类别：</span>{{ myObj.textureCategory?myObj.textureCategory:'-' }}</div>
|
|
|
+ <div><span>质地：</span>{{ myObj.texture?myObj.texture:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>通长：</span>{{ myObj.length?myObj.length:'-' }}</div>
|
|
|
+ <div><span>通宽：</span>{{ myObj.width?myObj.width:'-' }}</div>
|
|
|
+ <div><span>通高：</span>{{ myObj.height?myObj.height:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>完残程度：</span>{{ myObj.integrity?myObj.integrity:'-' }}</div>
|
|
|
+ <div><span>保存状态：</span>{{ myObj.repair?myObj.repair:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>完残状况：</span>{{ myObj.repairRemark?myObj.repairRemark:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>数量类型：</span>{{ myObj.amountType?myObj.amountType:'-' }}</div>
|
|
|
+ <div><span>具体数量：</span>{{ myObj.amount?myObj.amount:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>质量范围：</span>{{ myObj.qualityScope?myObj.qualityScope:'-' }}</div>
|
|
|
+ <div><span>具体质量：</span>{{ myObj.quality?myObj.quality:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div><span>入藏时间范围：</span>{{ myObj.checkInScope?myObj.checkInScope:'-' }}</div>
|
|
|
+ <div><span>入藏年度：</span>{{ myObj.checkInYear?myObj.checkInYear:'-' }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="row">
|
|
|
+ <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> -->
|
|
|
+ </div>
|
|
|
+ <div class="affix" v-else>
|
|
|
+ <div class="row">
|
|
|
+ <span>藏品图片：</span
|
|
|
+ ><img class="img" :src="baseURL + myObj.thumb" alt="" :onerror='defaultImg'/>
|
|
|
+ </div>
|
|
|
+ <div class="row row2">
|
|
|
+ <span>类型：</span>
|
|
|
+ <el-select v-model="select" style="width: 120px">
|
|
|
+ <el-option
|
|
|
+ v-for="item in affix"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-table
|
|
|
+ :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column label="缩略图" width="120" v-if="this.select==='img'">
|
|
|
+ <template #default='{row}'>
|
|
|
+ <div class="smimg">
|
|
|
+ <img :src="baseURL+row.filePath" alt="" :onerror='defaultImg'/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="name" label="附件名称" width="235">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="updateTime" label="上传时间"> </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <el-button type="primary" class="confirm" @click="btnOK">确 定</el-button>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getDetailById } from '@/apis/holding4'
|
|
|
+// import { getFileList } from '@/apis/holding'
|
|
|
+import axios from '@/utils/request'
|
|
|
+export default {
|
|
|
+ name: 'Holding4_audit_Dia',
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ dialogFormVisible: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ myObj: {
|
|
|
+ type: Object,
|
|
|
+ default: function () {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ options: [],
|
|
|
+ baseURL: '',
|
|
|
+ index: 0,
|
|
|
+ select: 'video',
|
|
|
+ // 表格数据
|
|
|
+ tableData: [],
|
|
|
+ tableDataObj: {
|
|
|
+ img: [],
|
|
|
+ video: [],
|
|
|
+ audio: [],
|
|
|
+ model: [],
|
|
|
+ doc: []
|
|
|
+ },
|
|
|
+ affix: [
|
|
|
+ { label: '高清图片', value: 'img' },
|
|
|
+ { label: '视频文件', value: 'video' },
|
|
|
+ { label: '音频文件', value: 'audio' },
|
|
|
+ { label: '三维模型', value: 'model' },
|
|
|
+ { label: '文档资料', value: 'doc' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {
|
|
|
+ select (val) {
|
|
|
+ // console.log(999, val)
|
|
|
+ this.tableData = this.tableDataObj[val]
|
|
|
+ // this.getFileList(this.myObj.id, this.select)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 方法集合
|
|
|
+ methods: {
|
|
|
+ getFujian () {
|
|
|
+ // this.fujianLook.forEach(v=>{
|
|
|
+
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 获取附件列表
|
|
|
+ // async getFileList (id, select) {
|
|
|
+ // const res = await getFileList(id, select)
|
|
|
+ // // console.log(666, res)
|
|
|
+ // this.tableData = res.data
|
|
|
+ // this.tableData.forEach(v => {
|
|
|
+ // v.updateTime = v.updateTime.slice(0, 10)
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // 切换上面的信息和附件
|
|
|
+ change (index) {
|
|
|
+ this.index = index
|
|
|
+ },
|
|
|
+ // 点击确定
|
|
|
+ btnOK () {
|
|
|
+ this.$emit('update:dialogFormVisible', false)
|
|
|
+ this.select = 'video'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ async created () {
|
|
|
+ // 获取上个页面传递的数据
|
|
|
+ const res = await getDetailById(this.$route.query.id)
|
|
|
+ console.log(999999, res)
|
|
|
+ const newFujian = res.data.backupGoodsFile
|
|
|
+ newFujian.forEach((v) => {
|
|
|
+ v.updateTime = v.updateTime.slice(0, 10)
|
|
|
+ if (v.type === 'img') this.tableDataObj.img.push(v)
|
|
|
+ if (v.type === 'video') this.tableDataObj.video.push(v)
|
|
|
+ if (v.type === 'audio') this.tableDataObj.audio.push(v)
|
|
|
+ if (v.type === 'model') this.tableDataObj.model.push(v)
|
|
|
+ if (v.type === 'doc') this.tableDataObj.doc.push(v)
|
|
|
+ })
|
|
|
+ this.tableData = this.tableDataObj.video
|
|
|
+ // 获取服务器前缀地址
|
|
|
+ this.baseURL = axios.defaults.baseURL
|
|
|
+ },
|
|
|
+ // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted () {
|
|
|
+ },
|
|
|
+ beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
+ beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
+ updated () {}, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy () {}, // 生命周期 - 销毁之前
|
|
|
+ destroyed () {}, // 生命周期 - 销毁完成
|
|
|
+ activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.title {
|
|
|
+ height: 32px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ & > div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.info {
|
|
|
+ margin: 20px;
|
|
|
+ width: 95%;
|
|
|
+ margin-bottom: 60px;
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ & > div {
|
|
|
+ padding-left: 20px;
|
|
|
+ flex: 1;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ font-size: 16px;
|
|
|
+ color: black;
|
|
|
+ span {
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.affix {
|
|
|
+ .smimg {
|
|
|
+ // border: 3px solid #ccc;
|
|
|
+ height: 50px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ margin: 20px;
|
|
|
+ width: 95%;
|
|
|
+ margin-bottom: 60px;
|
|
|
+ .row2 {
|
|
|
+ margin: 30px 0;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ width: 80px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ margin-left: 15px;
|
|
|
+ max-width: 700px;
|
|
|
+ max-height: 200px;
|
|
|
+ // width: 85px;
|
|
|
+ // height: 85px;
|
|
|
+ // border: 3px solid #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.confirm {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+}
|
|
|
+</style>
|
