初步完成馆藏管理

src/router/index.js

@@ -148,6 +148,12 @@ const router = new VueRouter({
           component: () => import('@/views/holding/holding5_audit.vue')
         },
         {
+          name: 'holding5_look',
+          path: 'holding5_look',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding5_look.vue')
+        },
+        {
           name: 'holding0_DiaEdit',
           path: 'holding0_DiaEdit',
           meta: { myInd: 1 },

src/views/holding/holding3.vue

@@ -40,7 +40,7 @@
               style="width: 217px"
             ></el-input>
             <el-button style="margin-left: 20px" @click="inquire">查询</el-button>
-            <el-button>导出</el-button>
+            <el-button v-if="0">导出</el-button>
             <div class="pattern">
               <div :class="{ active: change === 0 }" @click="pattern(0)">
                 <i class="el-icon-menu"></i>

src/views/holding/holding3_look.vue

@@ -61,7 +61,7 @@
               <div><span>入藏时间范围：</span>{{ myObj.checkInScope }}</div>
             </div>
             <div class="row">
-              <div><span>藏品位置：</span>暂无数据</div>
+              <div><span>藏品位置：</span>{{myObj.outPath}}</div>
             </div>
           </div>
         </div>

src/views/holding/holding5.vue

@@ -56,7 +56,7 @@
               </el-table-column>
               <el-table-column label="操作" width="200">
                 <template #default='{row}'>
-                  <el-button type="text" v-if="row.status==='已完成'||row.status==='审核不通过'">查看</el-button>
+                  <el-button type="text" v-if="row.status==='已完成'||row.status==='审核不通过'" @click="myLook(row)">查看</el-button>
                   <el-button type="text" v-if="row.status==='待审核'" @click="audit(row)">审核</el-button>
                   <el-button type="text" v-if="row.status==='待办理'" @click="compile(row)">编辑</el-button>
                   <el-button type="text" v-if="row.status!=='已完成'" @click="delOne(row.id)">删除</el-button>
@@ -125,6 +125,13 @@ export default {
   },
   // 方法集合
   methods: {
+    // 点击查看
+    myLook (val) {
+      this.$router.push({
+        path: '/layout/holding5_look',
+        query: val
+      })
+    },
     // 点击审核
     audit (val) {
       this.$router.push({

src/views/holding/holding5_add.vue

@@ -71,8 +71,8 @@
               <el-table-column prop="age" label="藏品年代" width="180">
               </el-table-column>
               <el-table-column label="操作" width="120">
-                <template #default>
-                  <el-button type="text">查看</el-button>
+                <template #default='{row}'>
+                  <el-button type="text" @click="myLook(row)">查 看</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -86,11 +86,14 @@
       </div>
     </div>
     <!-- 点击添加出现弹窗 -->
-    <Holding5Dialog :dialogFormVisible.sync="isShow" ref="myDialog" @getSonList='getSonList' :myTemp='myTemp'/>
+    <Holding5Dialog :dialogFormVisible.sync="isShow5" ref="myDialog" @getSonList='getSonList' :myTemp='myTemp'/>
+     <!-- 点击查看显示弹窗 -->
+    <Holding0AuditDia :dialogFormVisible.sync='isShow' :myObj='myObj' ref="mylook"/>
   </div>
 </template>
 
 <script>
+import Holding0AuditDia from './holding0_audit_Dia.vue'
 import { holding1submit, getDetailById } from '@/apis/holding5'
 import axios from '@/utils/request'
 import TabList from '@/components/tabLeft.vue'
@@ -99,10 +102,13 @@ export default {
   name: 'Holding5Add',
   components: {
     Holding5Dialog,
-    TabList
+    TabList,
+    Holding0AuditDia
   },
   data () {
     return {
+      // 传给查看弹窗的数据
+      myObj: {},
       // 手动输入的每个藏品位置
       // location: [],
       locations: {},
@@ -114,6 +120,7 @@ export default {
       baseURL: '',
       mydata: {},
       // 控制弹出层显示隐藏
+      isShow5: false,
       isShow: false,
       // 表单数据
       fromData: {
@@ -137,15 +144,16 @@ export default {
   computed: {},
   // 监控data中的数据变化
   watch: {
-    isShow (val) {
-      // if (!val) {
-      //   console.log(77777)
-      //   this.getSonList()
-      // }
-    }
   },
   // 方法集合
   methods: {
+    // 点击查看
+    myLook (val) {
+      this.myObj = val
+      // 调用子组件的方法，获取附件信息
+      this.$refs.mylook.getFileList(val.id, 'video')
+      this.isShow = true
+    },
     // 从子组件哪里拿到选中的数据
     getSonList (data) {
       const temp = []
@@ -159,6 +167,8 @@ export default {
       this.tableData.forEach(v => {
         v.integrity = this.spoil(v.integrity)
         v.goodsTypeId = this.category(v.goodsTypeId)
+        v.numTypeId = this.mycategory(v.numTypeId)
+        v.repair = this.mySave(v.repair)
       })
     },
     // 多层选择器的事件
@@ -209,7 +219,7 @@ export default {
       this.myTemp = this.tableData
       // 调用子组件方法
       this.$refs.myDialog.getListTow({ pageNum: 1, pageSize: 99999 })
-      this.isShow = true
+      this.isShow5 = true
     },
     // 点击返回
     goBack () {
@@ -267,6 +277,8 @@ export default {
       this.tableData.forEach(v => {
         v.integrity = this.spoil(v.integrity)
         v.goodsTypeId = this.category(v.goodsTypeId)
+        v.numTypeId = this.mycategory(v.numTypeId)
+        v.repair = this.mySave(v.repair)
       })
 
       this.goodsIds = this.mydata.goodsIds.split(',')

src/views/holding/holding5_audit.vue

@@ -55,7 +55,7 @@
             </el-table-column>
             <el-table-column prop="age" label="操作" width="120">
                 <template #default='{row}'>
-                  <el-button type="text" @click="look(row)">查 看</el-button>
+                  <el-button type="text" @click="myLook(row)">查 看</el-button>
                 </template>
             </el-table-column>
           </el-table>
@@ -95,20 +95,25 @@
         </div>
       </div>
     </div>
+     <!-- 点击查看显示弹窗 -->
+    <Holding0AuditDia :dialogFormVisible.sync='isShow' :myObj='myObj' ref="mylook"/>
   </div>
 </template>
 
 <script>
+import Holding0AuditDia from './holding0_audit_Dia.vue'
 import { getDetailById, holding1Audit } from '@/apis/holding5'
 import axios from '@/utils/request'
 import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'holding5_audit',
   // import引入的组件需要注入到对象中才能使用
-  components: { TabList },
+  components: { TabList, Holding0AuditDia },
   data () {
     // 这里存放数据
     return {
+      myObj: {},
+      isShow: false,
       // 服务器前缀地址
       baseURL: '',
       myData: {},
@@ -137,8 +142,11 @@ export default {
   // 方法集合
   methods: {
     // 点击查看
-    look (val) {
-
+    myLook (val) {
+      this.myObj = val
+      // 调用子组件的方法，获取附件信息
+      this.$refs.mylook.getFileList(val.id, 'video')
+      this.isShow = true
     },
     // 点击提交
     async submit () {
@@ -168,6 +176,8 @@ export default {
     this.tableData.forEach(v => {
       v.integrity = this.spoil(v.integrity)
       v.goodsTypeId = this.category(v.goodsTypeId)
+      v.numTypeId = this.mycategory(v.numTypeId)
+      v.repair = this.mySave(v.repair)
     })
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）

src/views/holding/holding5_look.vue

@@ -0,0 +1,245 @@
+<!--  -->
+<template>
+  <div class="holding0_result">
+    <TabList :ind='5'/>
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
+          <el-breadcrumb-item>藏品注销</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">查看</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+        <div class="info">
+          <div>
+            <h4>注销编号：</h4>
+            <span>{{myData.num}}</span>
+          </div>
+          <div>
+            <h4>注销人员：</h4>
+            <span>{{myData.realName}}</span>
+          </div>
+          <div>
+            <h4>注销说明：</h4>
+            <span>{{myData.description}}</span>
+          </div>
+          <div>
+            <h4>审核结果：</h4>
+            <span>{{myData.status}}</span>
+          </div>
+        </div>
+        <div class="explain">
+          <p>
+            <span>审核说明：</span
+            >{{myData.reason}}
+          </p>
+        </div>
+        <!-- 表格 -->
+        <div class="table">
+          <div class="title">
+            <h3>藏品信息</h3>
+          </div>
+          <el-table
+            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+            :data="tableData"
+            border
+            style="width: 100%"
+          >
+            <el-table-column label="缩略图" width="160">
+              <template #default='{row}'>
+                <div class="smimg">
+                  <img :src="baseURL+row.thumb" alt="" />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="registerNum" label="总登记号" width="235">
+            </el-table-column>
+            <el-table-column prop="name" label="藏品名称"> </el-table-column>
+            <el-table-column prop="goodsTypeId" label="类别" width="180">
+            </el-table-column>
+            <el-table-column prop="integrity" label="完残程度" width="180">
+            </el-table-column>
+            <el-table-column prop="age" label="藏品年代" width="300">
+            </el-table-column>
+            <el-table-column prop="status" label="操作" width="120">
+              <template #default='{row}'>
+                <el-button type="text" @click="myLook(row)">查 看</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <!-- 最下面的按钮 -->
+          <div class="button">
+              <el-button @click="$router.go(-1)">返回</el-button>
+          </div>
+      </div>
+    </div>
+     <!-- 点击查看显示弹窗 -->
+    <Holding0AuditDia :dialogFormVisible.sync='isShow' :myObj='myObj' ref="mylook"/>
+  </div>
+</template>
+
+<script>
+import Holding0AuditDia from './holding0_audit_Dia.vue'
+import { getDetailById } from '@/apis/holding5'
+import axios from '@/utils/request'
+import TabList from '@/components/tabLeft.vue'
+export default {
+  name: 'holding5_look',
+  components: { TabList, Holding0AuditDia },
+  data () {
+    // 这里存放数据
+    return {
+      // 传给弹窗的数据
+      myObj: {},
+      myData: {},
+      // 服务器初始地址前缀
+      baseURL: '',
+      // 点击查看显示弹窗
+      isShow: false,
+      fromData: {
+        textarea: ''
+      },
+      rules: {
+        textarea: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+      },
+      auditResult: '',
+      // 表格数据
+      tableData: []
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 点击查看
+    myLook (val) {
+      this.myObj = val
+      // 调用子组件的方法，获取附件信息
+      this.$refs.mylook.getFileList(val.id, 'video')
+      this.isShow = true
+    },
+    myStatus (id) {
+      const list = [
+        { id: 0, name: '已归还' },
+        { id: 1, name: '已入库' },
+        { id: 2, name: '未归还' }
+      ]
+      return list.filter(v => id === v.id)[0].name
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  async mounted () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 从第一层拿到传过来的数据
+    this.myData = this.$route.query
+    const res = await getDetailById(this.myData.id)
+    this.tableData = res.data.goods
+    this.tableData.forEach(v => {
+      v.integrity = this.spoil(v.integrity)
+      v.goodsTypeId = this.category(v.goodsTypeId)
+      v.status = this.myStatus(v.status)
+      v.numTypeId = this.mycategory(v.numTypeId)
+      v.repair = this.mySave(v.repair)
+    })
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.holding0_result {
+
+    /deep/#mytitle>span{
+    font-weight: 800;
+  }
+
+  display: flex;
+  .right {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+  }
+  .conten {
+    position: relative;
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+    padding: 35px;
+    .info {
+      display: flex;
+      flex-wrap: wrap;
+      & > div {
+        padding-left: 20px;
+        color: black;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        border: 1px solid #ccc;
+        width: 50%;
+      }
+    }
+    .explain {
+      border: 1px solid #ccc;
+      color: black;
+      padding: 30px 150px 30px 20px;
+      display: flex;
+      flex-wrap: wrap;
+      span {
+        font-weight: 700;
+      }
+    }
+    .table {
+      max-height: 420px;
+      overflow: auto;
+      .smimg {
+        border: 3px solid #ccc;
+        height: 70px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      margin-top: 38px;
+      border: 1px solid #ccc;
+      .title {
+        padding-left: 30px;
+        color: black;
+        height: 50px;
+        line-height: 50px;
+      }
+    }
+    .button {
+      position: absolute;
+      left: 50%;
+      bottom: 20px;
+      transform: translateX(-50%);
+      width: 240px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>