初步完成入库管理选择位置

src/apis/holding5.js

@@ -0,0 +1,52 @@
+import axios from '../utils/request'
+// 第一层获取列表
+export const getList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/storageCancel/list',
+    data
+  })
+}
+// 点击申请注销
+export const enterBank = () => {
+  return axios({
+    method: 'post',
+    url: '/cms/storageCancel/add'
+  })
+}
+// 第二层获取藏品列表
+export const getListTow = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/storageCancel/goodsList',
+    data
+  })
+}
+// 从第一层提交
+export const holding1submit = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/storageCancel/edit',
+    data
+  })
+}
+// 通过第一层的id获取详情
+export const getDetailById = (id) => {
+  return axios({
+    url: `/cms/storageCancel/detail/${id}`
+  })
+}
+// 第一层点击删除
+export const delData = (id) => {
+  return axios({
+    url: `/cms/storageCancel/remove/${id}`
+  })
+}
+// 从holding5_audit点击审核
+export const holding1Audit = (data) => {
+  return axios({
+    method: 'post',
+    url: '/cms/storageCancel/audit',
+    data
+  })
+}

src/components/tabLeft.vue

@@ -27,7 +27,7 @@ export default {
         { name: '藏品总账', id: 3 },
         { name: '入库管理', id: 1 },
         { name: '出库管理', id: 2 },
-        { name: '藏品盘核', id: 4 },
+        // { name: '藏品盘核', id: 4 },
         { name: '藏品注销', id: 5 }
       ]
     }

src/views/holding/holding1_add.vue

@@ -156,12 +156,6 @@ export default {
   methods: {
     // 从子组件哪里拿到选中的数据
     getSonList (data) {
-      // console.log(9999999, data)
-
-      // data.forEach(v => {
-      //   v.integrity = this.spoil(v.integrity)
-      //   v.goodsTypeId = this.category(v.goodsTypeId)
-      // })
       const temp = []
       data.forEach(v => {
         temp.push(v.id)
@@ -174,13 +168,17 @@ export default {
         v.integrity = this.spoil(v.integrity)
         v.goodsTypeId = this.category(v.goodsTypeId)
         if (v.storageId === '') v.location = ''
-        else v.location = [880, 881, 882]
+        else {
+          this.location[v.id] = v.storageId
+          v.location = v.storageId.split(',')
+          v.location = v.location.map(Number)
+        }
       })
     },
     // 多层选择器的事件
     handleChange (value, id) {
-      // console.log(999, id)
-      this.location[id] = value[2]
+      if (value) this.location[id] = value.join(',')
+      // this.location[id] = value.join(',')
       // console.log(999, this.location)
     },
     // 表格的多选
@@ -207,6 +205,8 @@ export default {
             // eslint-disable-next-line
             if (v.id == item) temp.splice(index, 1)
           })
+          // 改变位置信息
+          delete this.location[v.id]
         })
         this.goodsIds = temp
         // console.log(99999, this.goodsIds)
@@ -257,9 +257,10 @@ export default {
     async submit () {
       if (this.fromData.textarea.trim() === '') return this.$message.warning('入库说明不能为空')
       const obj = { description: this.fromData.textarea, goodsIds: this.goodsIds.join(','), id: this.mydata.id, status: 1, location: this.location }
-      await holding1submit(obj)
-      this.$message.success('提交成功')
-      this.$router.push('/layout/holding1')
+      console.log(999, obj)
+      // await holding1submit(obj)
+      // this.$message.success('提交成功')
+      // this.$router.push('/layout/holding1')
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -287,7 +288,10 @@ export default {
         v.integrity = this.spoil(v.integrity)
         v.goodsTypeId = this.category(v.goodsTypeId)
         // 找到第三层的id回显
-        v.location = [880, 881, 882]
+        this.location[v.id] = v.storageId
+        v.location = v.storageId.split(',')
+        v.location = v.location.map(Number)
+        // console.log(999, v.location.map(Number))
       })
       this.goodsIds = this.mydata.goodsIds.split(',')
     }

src/views/holding/holding2_add.vue

@@ -178,8 +178,8 @@ export default {
       // console.log(999, this.goodsIds)
       this.tableData = data
       this.tableData.forEach(v => {
-        if (v.integrity.length <= 2) v.integrity = this.spoil(v.integrity)
-        if (v.goodsTypeId.length <= 2) v.goodsTypeId = this.category(v.goodsTypeId)
+        v.integrity = this.spoil(v.integrity)
+        v.goodsTypeId = this.category(v.goodsTypeId)
         // 位置信息数组
         if (!v.outPath) v.outPath = ''
       })

src/views/holding/holding2_look.vue

@@ -29,6 +29,14 @@
             <h4>出库说明：</h4>
             <span>{{myData.description}}</span>
           </div>
+          <div>
+            <h4>审核结果：</h4>
+            <span>{{myData.status}}</span>
+          </div>
+          <div>
+            <h4>审核说明：</h4>
+            <span>{{myData.reason}}</span>
+          </div>
         </div>
         <!-- 表格 -->
         <div class="table">
@@ -220,7 +228,7 @@ export default {
       & > div {
         padding-left: 20px;
         color: black;
-        height: 50px;
+        height: 42px;
         display: flex;
         align-items: center;
         border: 1px solid #ccc;
@@ -248,7 +256,7 @@ export default {
           height: 100%;
         }
       }
-      margin-top: 38px;
+      margin-top: 28px;
       border: 1px solid #ccc;
       .title {
         padding-left: 30px;

src/views/holding/holding5.vue

@@ -12,10 +12,14 @@
       </div>
       <div class="conten">
         <div class="middle">
+
+          <ul class="title">
+            <li :class="{active:stateInd===index}" @click="stateSelect(index)" v-for="(item,index) in stateArr" :key="index">{{item.txt}}（{{item.num}}）</li>
+          </ul>
           <div class="select">
             <span>登记人：</span>
             <el-input
-              v-model="type"
+              v-model="myData.searchKey"
               placeholder="请输入"
               style="width: 217px"
             ></el-input>
@@ -28,8 +32,8 @@
               end-placeholder="结束日期"
             >
             </el-date-picker>
-            <el-button style="margin-left: 20px">查询</el-button>
-            <el-button type="primary" @click="$router.push('/layout/holding5_add')">申请注销</el-button
+            <el-button style="margin-left: 20px" @click="inquire">查询</el-button>
+            <el-button type="primary" @click="cancel">申请注销</el-button
             >
           </div>
           <!--表格 -->
@@ -40,21 +44,22 @@
               border
               style="width: 100%"
             >
-              <el-table-column prop="date" label="注销单号" width="180">
+              <el-table-column prop="num" label="注销单号" width="180">
               </el-table-column>
-              <el-table-column prop="name" label="登记人" width="150">
+              <el-table-column prop="realName" label="登记人" width="150">
               </el-table-column>
-              <el-table-column prop="address" label="注销原因">
+              <el-table-column prop="description" label="注销原因">
               </el-table-column>
-              <el-table-column prop="name" label="注销日期" width="180">
+              <el-table-column prop="updateTime" label="注销日期" width="180">
               </el-table-column>
-              <el-table-column prop="name" label="状态" width="130">
+              <el-table-column prop="status" label="状态" width="130">
               </el-table-column>
               <el-table-column label="操作" width="200">
-                <template #default>
-                  <!-- <el-button type="text">查看</el-button> -->
-                  <el-button type="text">审核</el-button>
-                  <el-button type="text">删除</el-button>
+                <template #default='{row}'>
+                  <el-button type="text" v-if="row.status==='已完成'||row.status==='审核不通过'">查看</el-button>
+                  <el-button type="text" v-if="row.status==='待审核'">审核</el-button>
+                  <el-button type="text" v-if="row.status==='待办理'">编辑</el-button>
+                  <el-button type="text" v-if="row.status!=='已完成'" @click="delOne(row.id)">删除</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -62,9 +67,11 @@
           <!-- 分页器 -->
           <div class="paging">
             <el-pagination
+              @current-change="currentChange"
+              @size-change="sizeChange"
               background
               layout="prev, pager, next,sizes,jumper"
-              :total="100"
+              :total="total"
             >
             </el-pagination>
           </div>
@@ -75,6 +82,7 @@
 </template>
 
 <script>
+import { getList, enterBank, delData } from '@/apis/holding5'
 import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'Holding5',
@@ -83,43 +91,203 @@ export default {
   data () {
     // 这里存放数据
     return {
-      type: '',
-      time: '',
-      source: [
-        {
-          value: '选项1',
-          label: '黄金糕'
-        },
-        {
-          value: '选项2',
-          label: '双皮奶'
-        }
+      total: 0,
+      // 选择状态的变量
+      stateInd: 0,
+      stateArr: [
+        { txt: '全部', num: 0 },
+        { txt: '待审核', num: 0 },
+        { txt: '待办理', num: 0 },
+        { txt: '已完成', num: 0 },
+        { txt: '审核不通过', num: 0 }
       ],
+      myData: {
+        startTime: '',
+        endTime: '',
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: '',
+        status: null
+      },
+      time: '',
       // 表格数据
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+    // 处理时间
+    time (val) {
+      this.handleSelect(val)
+    }
+  },
   // 方法集合
-  methods: {},
+  methods: {
+    // 点击删除
+    delOne (id) {
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        // 发请求删除
+        await delData(id)
+        // 发请求刷新页面
+        this.getList(this.myData)
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消.'
+        })
+      })
+    },
+    // 点击注销
+    async cancel () {
+      const res = await enterBank()
+      // console.log(999, res)
+      this.$router.push({
+        path: '/layout/holding5_add',
+        query: res.data
+      })
+    },
+    // 点击查询
+    inquire () {
+      this.myData.pageNum = 1
+      this.getList(this.myData)
+    },
+    // 分页器
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      // this.myData.sourceId = null
+      // this.myData.searchKey = ''
+      // this.time = []
+      // this.myData.endTime = ''
+      // this.myData.startTime = ''
+      this.myData.pageNum = val
+      this.getList(this.myData)
+      this.$nextTick(() => {
+        // 所有dom加载完毕之后---要执行的代码
+        setTimeout(() => {
+          if (this.tableData.length === 0) {
+            this.myData.pageNum = 1
+            this.getList(this.myData)
+          }
+        }, 100)
+      })
+    },
+    sizeChange (val) {
+      // this.myData.sourceId = null
+      // this.myData.searchKey = ''
+      // this.time = []
+      // this.myData.endTime = ''
+      // this.myData.startTime = ''
+      // console.log('条数改变了', val)
+      this.myData.pageSize = val
+      this.getList(this.myData)
+    },
+    // 点击上面的状态切换
+    stateSelect (index) {
+      if (index !== this.stateInd) {
+        this.myData.pageNum = 1
+        // 点击待审核
+        if (index === 1) {
+          this.myData.status = 1
+          this.getList(this.myData)
+        } else if (index === 2) {
+          // 点击待办理
+          this.myData.status = 0
+          this.getList(this.myData)
+        } else if (index === 3) {
+          // 点击已完成
+          this.myData.status = 3
+          this.getList(this.myData)
+        } else if (index === 4) {
+          // 点击审核不通过
+          this.myData.status = 2
+          this.getList(this.myData)
+        } else if (index === 0) {
+          // 点击全部
+          this.myData.status = ''
+          this.getList(this.myData)
+        }
+      }
+      this.stateInd = index
+    },
+    // 封装获取列表方法
+    async getList (data) {
+      const res = await getList(data)
+      this.total = res.data.total
+      this.tableData = res.data.list
+      this.tableData.forEach(v => {
+        v.status = this.myStateDan(v.status)
+      })
+      // console.log(666, res)
+    },
+    // 时间处理----------------
+    handleSelect (e) {
+      const date = []
+      for (const i in e) {
+        date.push(this.gettime(e[i]))
+      }
+      this.myData.startTime = date[0]
+      this.myData.endTime = date[1]
+    },
+    gettime (data) {
+      const value = data.getFullYear() + '-' +
+      this.checkTime(data.getMonth() + 1) + '-' +
+      this.checkTime(data.getDate()) + ' ' +
+      this.checkTime(data.getHours()) + ':' +
+      this.checkTime(data.getMinutes()) + ':' +
+      this.checkTime(data.getSeconds())
+      return value
+    },
+    checkTime (i) {
+      if (i < 10) {
+        i = '0' + i
+      }
+      return i
+    },
+    // 状态的数据处理
+    myStateDan (id) {
+      const list = [
+        { id: 0, name: '待办理' },
+        { id: 1, name: '待审核' },
+        { id: 2, name: '审核不通过' },
+        { id: 3, name: '已完成' }
+      ]
+      return list.filter(v => id === v.id)[0].name
+    }
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
+  async mounted () {
+    // 调用获取列表方法
+    this.getList(this.myData)
+    // 进页面拿到所有数据
+    const res = await getList({ ...this.myData, pageSize: 99999 })
+    this.stateArr[0].num = res.data.list.length
+    let num1 = 0
+    let num2 = 0
+    let num3 = 0
+    let num4 = 0
+    res.data.list.forEach(v => {
+      if (v.status === 1) num1++
+      if (v.status === 0) num2++
+      if (v.status === 3) num3++
+      if (v.status === 2) num4++
+    })
+    this.stateArr[1].num = num1
+    this.stateArr[2].num = num2
+    this.stateArr[3].num = num3
+    this.stateArr[4].num = num4
+  },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -155,6 +323,27 @@ export default {
     background-color: #fff;
     margin: 20px 20px 40px;
     .middle {
+              .title{
+          height: 60px;
+          border-bottom: 1px solid #ccc;
+          margin: 0 25px;
+          display: flex;
+          align-items: center;
+          color: black;
+          .active{
+            color: #409eff;
+            border-bottom: 2px solid #409eff;
+          }
+          li {
+            height: 60px;
+            line-height: 60px;
+            padding: 0 15px;
+            text-align: center;
+            margin-left: 40px;
+            cursor: pointer;
+          }
+        }
+
       position: relative;
       width: 100%;
       height: 100%;
@@ -167,8 +356,13 @@ export default {
         }
       }
       .table {
-        max-height: 640px;
-        overflow: auto;
+        /deep/.el-table__body-wrapper{
+          max-width: 1643px;
+          max-height: 510px;
+          overflow-y: auto;
+        }
+        // max-height: 640px;
+        // overflow: auto;
         padding: 24px;
       }
       .paging {

src/views/holding/holding5_Dialog.vue

@@ -0,0 +1,219 @@
+<template>
+  <el-dialog title="添加藏品" :visible="dialogFormVisible" @close="cancel()">
+    <div class="query">
+      <span>藏品名称：</span>
+      <el-input
+        v-model="myData.searchKey"
+        placeholder="请输入"
+        style="width: 280px; margin-right: 40px"
+      ></el-input>
+      <el-button @click="search">查 询</el-button>
+    </div>
+    <!-- 表格 -->
+    <el-table
+      ref="multipleTable"
+      @selection-change="handleSelectionChange"
+      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+      :data="tableData"
+      border
+      style="width: 100%"
+    >
+      <el-table-column type="selection" width="55"> </el-table-column>
+      <el-table-column label="缩略图" width="140">
+        <template #default="{ row }">
+          <div class="smimg">
+            <img :src="baseURL + row.thumb" alt="" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="registerNum" label="总登记号" width="180">
+      </el-table-column>
+      <el-table-column prop="name" label="藏品名称"> </el-table-column>
+      <el-table-column prop="goodsTypeName" label="类别" width="180">
+      </el-table-column>
+    </el-table>
+    <!-- 分页器 -->
+    <div class="paging" v-if="0">
+      <el-pagination
+        :current-page='myData.pageNum'
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        background
+        layout="prev, pager, next,sizes,jumper"
+        :total="total"
+      >
+      </el-pagination>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="btnOK">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import axios from '@/utils/request'
+import { getListTow } from '@/apis/holding5'
+export default {
+  name: 'Holding0_Dialog',
+  components: {},
+  props: {
+    dialogFormVisible: {
+      type: Boolean,
+      default: false
+    },
+    myTemp: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      goodsIds: '',
+      // 表格数据的筛选
+      myData: {
+        pageNum: 1,
+        pageSize: 99999,
+        searchKey: ''
+      },
+      // 分页器总数
+      total: 0,
+      // 服务器前缀地址
+      baseURL: '',
+      // 表格数据
+      tableData: [],
+      // 传递给父元素的表格数据
+      fatabList: [],
+      tableObj: {}
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 分页器页码改变
+    currentChange (val) {
+      this.myData.pageNum = val
+      this.getListTow(this.myData)
+      this.$nextTick(() => {
+        // 所有dom加载完毕之后---要执行的代码
+        setTimeout(() => {
+          if (this.tableData.length === 0) {
+            this.myData.pageNum = 1
+            this.getListTow(this.myData)
+          }
+        }, 100)
+      })
+    },
+    // 每一页显示条数改变
+    sizeChange (val) {
+      // console.log(val)
+      // this.myData.pageSize = val
+      this.getListTow(this.myData)
+    },
+    // 点击查询
+    search () {
+      this.myData.pageNum = 1
+      this.getListTow(this.myData)
+    },
+    // 表格的多选
+    handleSelectionChange (rows) {
+      // console.log(this.myData.pageNum)
+      const temp = []
+      this.tableObj[this.myData.pageNum] = rows
+      // console.log(666, this.tableObj)
+      for (const k in this.tableObj) {
+        this.tableObj[k].forEach(v => {
+          temp.push(v)
+        })
+      }
+      this.fatabList = temp
+    },
+    // 点击确定
+    btnOK () {
+      // 把选中的数据传给父组件
+
+      this.$emit('getSonList', this.fatabList)
+
+      this.cancel()
+    },
+    // 点击取消
+    cancel () {
+      this.$emit('update:dialogFormVisible', false)
+      this.myData.searchKey = ''
+      this.myData.pageNum = 1
+    },
+    // 获取藏品列表---让父组件调用
+    async getListTow (data) {
+      const res = await getListTow(data)
+      this.tableData = res.data.list
+      // 表格的默认选中
+      this.myTemp.forEach(v => {
+        this.tableData.forEach((i, ind) => {
+          // eslint-disable-next-line
+          if (v.id == i.id) {
+            this.$nextTick(() => {
+              this.$refs.multipleTable.toggleRowSelection(this.tableData[ind], true)
+            })
+          }
+        })
+      })
+      // 表格的默认选中
+      // this.myTemp.forEach(v => {
+      //   console.log(666, v)
+      // })
+
+      this.total = res.data.total
+    }
+  },
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+  },
+  mounted () {
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.paging {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.query {
+  height: 85px;
+  align-items: center;
+  display: flex;
+}
+/deep/.el-dialog__body {
+  padding: 0px 20px 20px;
+  overflow: auto;
+  max-height: 556px;
+}
+.row {
+  display: flex;
+  /deep/& > div {
+    flex: 1;
+  }
+}
+.smimg {
+  height: 60px;
+  img {
+    width: 100%;
+    height: 100%;
+    border: 3px solid #ccc;
+  }
+}
+</style>

src/views/holding/holding5_add.vue

@@ -1,14 +1,15 @@
 <!--  -->
 <template>
-  <div class="holding5_add">
-    <TabList :ind="5" />
+  <div class="holdingAdd">
+    <TabList :ind='5'/>
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
+          <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> -->
           <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-item>出库管理</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">{{mydata.description?'编辑':'新增'}}</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
       <div class="conten">
@@ -20,34 +21,32 @@
           class="demo-ruleForm"
         >
           <div class="one_row">
-            <el-form-item label="注销编号" prop="number" style="width: 45%">
+            <el-form-item label="注销编号：" prop="number" style="width: 45%">
               <el-input v-model="fromData.number" disabled></el-input>
             </el-form-item>
-            <el-form-item label="登记人" prop="people" style="width: 45%">
+            <el-form-item label="登记人员：" prop="people" style="width: 45%">
               <el-input v-model="fromData.people" disabled></el-input>
             </el-form-item>
           </div>
-          <el-form-item label="注销说明" prop="textarea" style="width: 90%">
-            <el-input
-              type="textarea"
-              :rows="4"
-              v-model="fromData.textarea"
-              placeholder="请输入"
-            ></el-input>
-          </el-form-item>
+       <div class="one_row">
+            <el-form-item label="注销说明：" prop='textarea'  style="width: 90%">
+              <el-input type="textarea" :rows="3" v-model="fromData.textarea"></el-input>
+            </el-form-item>
+          </div>
         </el-form>
         <!-- 藏品信息 -->
         <div class="info">
           <div class="title">
             <h3>藏品信息</h3>
             <div class="btn">
-              <el-button size="small" @click="isShow = true">添 加</el-button>
-              <el-button size="small">删 除</el-button>
+              <el-button size="small" @click="addObject">添 加</el-button>
+              <el-button size="small" @click="deleteS">删 除</el-button>
             </div>
           </div>
           <!--表格 -->
           <div class="table">
             <el-table
+              @selection-change="handleSelectionChange"
               :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
               :data="tableData"
               border
@@ -55,28 +54,26 @@
             >
               <el-table-column type="selection" width="40"> </el-table-column>
               <el-table-column label="缩略图" width="146">
-                <template #default>
+                <template #default='{row}'>
                   <div class="smimg">
-                    <img src="../../assets/img/user.png" alt="" />
+                    <img :src="baseURL+row.thumb" alt="" />
                   </div>
                 </template>
               </el-table-column>
-              <el-table-column prop="name" label="总登记号" width="235">
+              <el-table-column prop="registerNum" label="总登记号" width="235">
               </el-table-column>
-              <el-table-column prop="address" label="藏品名称">
+              <el-table-column prop="name" label="藏品名称">
               </el-table-column>
-              <el-table-column prop="name" label="类别" width="130">
+              <el-table-column prop="goodsTypeId" label="类别" width="180">
               </el-table-column>
-              <el-table-column prop="name" label="完残程度" width="220">
+              <el-table-column prop="integrity" label="完残程度" width="130">
               </el-table-column>
-              <el-table-column prop="name" label="藏品年代" width="130">
+              <el-table-column prop="age" label="藏品年代" width="180">
               </el-table-column>
-              <el-table-column label="操作" width="130">
+              <el-table-column label="操作" width="230">
                 <template #default>
-                  <el-button type="text" @click="isShow = true"
-                    >查 看</el-button
-                  >
-                  <el-button type="text">删 除</el-button>
+                  <el-button type="text">查看</el-button>
+                  <el-button type="text">删除</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -84,67 +81,198 @@
         </div>
         <!-- 最下面的2个按钮 -->
         <div class="bot_btn">
-          <el-button type="primary">提 交</el-button>
-          <el-button @click="$router.go(-1)">返 回</el-button>
+          <el-button type="primary" @click="submit">提 交</el-button>
+          <el-button @click="goBack">返 回</el-button>
         </div>
       </div>
     </div>
-        <!-- 点击添加或者编辑出现弹窗 -->
-    <Holding1Dialog :dialogFormVisible.sync="isShow" />
-
+    <!-- 点击添加出现弹窗 -->
+    <Holding5Dialog :dialogFormVisible.sync="isShow" ref="myDialog" @getSonList='getSonList' :myTemp='myTemp'/>
   </div>
 </template>
 
 <script>
-import Holding1Dialog from './holding1_Dialog.vue'
-
+import { holding1submit, getDetailById } from '@/apis/holding5'
+import axios from '@/utils/request'
 import TabList from '@/components/tabLeft.vue'
+import Holding5Dialog from './holding5_Dialog.vue'
 export default {
-  name: 'holding5_add',
-  // import引入的组件需要注入到对象中才能使用
-  components: { TabList, Holding1Dialog },
+  name: 'Holding5Add',
+  components: {
+    Holding5Dialog,
+    TabList
+  },
   data () {
-    // 这里存放数据
     return {
+      // 手动输入的每个藏品位置
+      // location: [],
+      locations: {},
+      // 传递给弹窗的表格数据，用来筛选
+      myTemp: [],
+      // 处理从子组件拿到的数据的id集合数组
+      goodsIds: [],
+      // 服务器前缀地址
+      baseURL: '',
+      mydata: {},
       // 控制弹出层显示隐藏
       isShow: false,
       // 表单数据
       fromData: {
-        number: 'DJ2021081701',
-        people: 'Admin',
+        number: '',
+        people: '',
         textarea: ''
       },
       // 表单验证
       rules: {
         number: [{ required: true, message: '不能为空', trigger: 'blur' }],
         people: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        textarea: [{ required: true, message: '不能为空', trigger: 'blur' }, { max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+        textarea: [{ required: true, message: '不能为空', trigger: 'blur' }]
       },
       // 表格数据
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }
-      ]
+      tableData: [],
+      // 表格选中后的暂存数据
+      delArr: []
     }
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+    isShow (val) {
+      // if (!val) {
+      //   console.log(77777)
+      //   this.getSonList()
+      // }
+    }
+  },
   // 方法集合
-  methods: {},
+  methods: {
+    // 从子组件哪里拿到选中的数据
+    getSonList (data) {
+      const temp = []
+      data.forEach(v => {
+        temp.push(v.id)
+      })
+      const temp2 = new Set(temp)
+      this.goodsIds = [...temp2]
+      // console.log(999, this.goodsIds)
+      this.tableData = data
+      this.tableData.forEach(v => {
+        v.integrity = this.spoil(v.integrity)
+        v.goodsTypeId = this.category(v.goodsTypeId)
+      })
+    },
+    // 多层选择器的事件
+    handleChange (value) {
+      console.log(value)
+    },
+    // 表格的多选
+    handleSelectionChange (val) {
+      this.delArr = val
+    },
+    // 点击删除
+    deleteS () {
+      if (this.delArr.length === 0) return this.$message.warning('至少选中一条!')
+      this.$confirm('确定删除吗?', '提示', {
+        confirmButtonText: '删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        const temp = this.goodsIds
+        this.delArr.forEach((v) => {
+          // 删除数据,刷新页面
+          this.tableData.forEach((item, index) => {
+            // eslint-disable-next-line
+            if (v.id == item.id) this.tableData.splice(index, 1)
+          })
+          // 改变发请求id
+          temp.forEach((item, index) => {
+            // eslint-disable-next-line
+            if (v.id == item) temp.splice(index, 1)
+          })
+        })
+        this.goodsIds = temp
+        // console.log(99999, this.goodsIds)
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消.'
+        })
+      })
+    },
+    // 点击添加
+    addObject () {
+      // 把当前表格的数据传递过去，防止重复选择
+      this.myTemp = this.tableData
+      // 调用子组件方法
+      this.$refs.myDialog.getListTow({ pageNum: 1, pageSize: 99999 })
+      this.isShow = true
+    },
+    // 点击返回
+    goBack () {
+      const obj = { description: this.fromData.textarea, goodsIds: this.goodsIds.join(','), id: this.mydata.id, status: null }
+      this.$confirm('您需要保存这条数据吗?', '提示', {
+        confirmButtonText: '保存',
+        cancelButtonText: '放弃',
+        type: 'warning'
+      }).then(async () => {
+        if (this.fromData.textarea.trim() === '') return this.$message.warning('注销说明不能为空')
+        // 发请求
+        await holding1submit(obj)
+        this.$router.push('/layout/holding5')
+        this.$message({
+          type: 'success',
+          message: '保存成功!'
+        })
+      }).catch(() => {
+        this.$router.push('/layout/holding5')
+        this.$message({
+          type: 'info',
+          message: '放弃保存.'
+        })
+      })
+    },
+    // 点击提交
+    async submit () {
+      if (this.fromData.textarea.trim() === '') return this.$message.warning('注销说明不能为空')
+
+      const obj = { description: this.fromData.textarea, goodsIds: this.goodsIds.join(','), id: this.mydata.id, status: 1 }
+      // console.log(999, obj)
+      await holding1submit(obj)
+      this.$message.success('提交成功')
+      this.$router.push('/layout/holding5')
+    }
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 从第一层拿到传过来的数据
+    this.mydata = this.$route.query
+    this.mydata.id = Number(this.mydata.id)
+    this.fromData.people = this.mydata.realName
+    this.fromData.number = this.mydata.num
+    this.fromData.textarea = this.mydata.description
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
+  async mounted () {
+    // 如果是编辑
+    if (this.mydata.goodsIds) {
+      // 通过id获取列表详情
+      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)
+      })
+
+      this.goodsIds = this.mydata.goodsIds.split(',')
+    }
+  },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -156,7 +284,7 @@ export default {
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
-.holding5_add {
+.holdingAdd {
   /deep/#mytitle > span {
     font-weight: 800;
   }
@@ -190,8 +318,8 @@ export default {
       justify-content: start;
     }
     .info {
-      max-height: 390px;
-      overflow: auto;
+      // max-height: 390px;
+      // overflow: auto;
       width: 86%;
       border: 1px solid #ccc;
       margin-left: 70px;
@@ -204,6 +332,10 @@ export default {
         padding: 0 30px;
       }
       .table {
+        /deep/.el-table__body-wrapper{
+          max-height: 360px;
+          overflow-y: auto;
+        }
         .smimg {
           border: 3px solid #ccc;
           height: 78px;

src/views/layout/index.vue

@@ -70,7 +70,7 @@ export default {
             { name: '藏品总账', id: 3 },
             { name: '入库管理', id: 1 },
             { name: '出库管理', id: 2 },
-            { name: '藏品盘核', id: 4 },
+            // { name: '藏品盘核', id: 4 },
             { name: '藏品注销', id: 5 }
           ]
         },