出库管理初步完工

src/apis/holding2.js

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

src/main.js

@@ -107,6 +107,18 @@ const checkBtn = {
         { id: 3, name: '已修复' }
       ]
       return list.filter(v => id === v.id)[0].name
+    },
+    // 出库类型数据处理
+    CKtype (id) {
+      const list = [
+        { id: 'exhibition', name: '展览' },
+        { id: 'study', name: '研究' },
+        { id: 'repair', name: '修复' },
+        { id: 'copy', name: '复制' },
+        { id: 'cultural', name: '文创' },
+        { id: 'other', name: '其他' }
+      ]
+      return list.filter(v => id === v.id)[0].name
     }
   }
 }

src/router/index.js

@@ -106,6 +106,12 @@ const router = new VueRouter({
           component: () => import('@/views/holding/holding2_audit.vue')
         },
         {
+          name: 'holding2_look',
+          path: 'holding2_look',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding2_look.vue')
+        },
+        {
           name: 'holding3',
           path: 'holding3',
           meta: { myInd: 1 },

src/views/holding/holding1_Dialog.vue

@@ -154,7 +154,8 @@ export default {
       // 表格的默认选中
       this.myTemp.forEach(v => {
         this.tableData.forEach((i, ind) => {
-          if (v.id === i.id) {
+          // eslint-disable-next-line
+          if (v.id == i.id) {
             this.$nextTick(() => {
               this.$refs.multipleTable.toggleRowSelection(this.tableData[ind], true)
             })

src/views/holding/holding1_add.vue

@@ -385,13 +385,13 @@ export default {
         this.delArr.forEach(v => {
           // 删除数据,刷新页面
           this.tableData.forEach((item, index) => {
-            item.id = item.id + ''
-            if (v.id === item.id) this.tableData.splice(index, 1)
+            // eslint-disable-next-line
+            if (v.id == item.id) this.tableData.splice(index, 1)
           })
           // 改变发请求id
-          v.id = v.id + ''
           temp.forEach((item, index) => {
-            if (v.id === item) temp.splice(index, 1)
+            // eslint-disable-next-line
+            if (v.id == item) temp.splice(index, 1)
           })
         })
         this.goodsIds = temp

src/views/holding/holding1_audit.vue

@@ -15,7 +15,6 @@
         <div class="info">
           <div>
             <h4>入库编号：</h4>
-            <b>DJ</b>
             <span>{{myData.num}}</span>
           </div>
           <div>

src/views/holding/holding1_look.vue

@@ -63,6 +63,8 @@
             </el-table-column>
             <el-table-column prop="name" label="藏品位置" width="300">
             </el-table-column>
+            <el-table-column prop="status" label="入库状态" width="300">
+            </el-table-column>
           </el-table>
         </div>
         <!-- 最下面的按钮 -->
@@ -105,7 +107,16 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+    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元素）
@@ -119,6 +130,7 @@ export default {
     this.tableData.forEach(v => {
       v.integrity = this.spoil(v.integrity)
       v.goodsTypeId = this.category(v.goodsTypeId)
+      v.status = this.myStatus(v.status)
     })
   },
   beforeCreate () {}, // 生命周期 - 创建之前

src/views/holding/holding2.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="holding2">
+  <div class="holding">
     <TabList :ind='2'/>
     <div class="right">
       <div class="top">
@@ -8,22 +8,23 @@
           <el-breadcrumb-item to="">首页</el-breadcrumb-item>
           <el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
           <el-breadcrumb-item id="mytitle">出库管理</el-breadcrumb-item>
+
         </el-breadcrumb>
       </div>
       <div class="conten">
+
         <div class="middle">
           <ul class="title">
-            <li :class="{active:stateInd===index}" @click="stateInd=index" v-for="(item,index) in stateArr" :key="index">{{item.txt}}（{{item.num}}）</li>
+            <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>
-            <span>日期范围：</span>
+            <span>创建日期：</span>
             <el-date-picker
               v-model="time"
               type="daterange"
@@ -32,8 +33,8 @@
               end-placeholder="结束日期"
             >
             </el-date-picker>
-            <el-button style="margin-left: 20px">查询</el-button>
-            <el-button type="primary" @click="$router.push('/layout/holding2_add')">申请出库</el-button>
+            <el-button style="margin-left: 20px" @click="inquire">查询</el-button>
+            <el-button type="primary" @click="enterBank">申请出库</el-button>
           </div>
           <!--表格 -->
           <div class="table">
@@ -43,24 +44,24 @@
               border
               style="width: 100%"
             >
-              <el-table-column prop="date" label="出库单号" width="130">
+              <el-table-column prop="num" label="出库单号" >
               </el-table-column>
-              <el-table-column prop="name" label="登记人" width="150">
+              <el-table-column prop="realName" label="登记人" width="200">
               </el-table-column>
-              <el-table-column prop="address" label="出库类型">
+              <el-table-column prop="type" label="出库类型" width="200">
               </el-table-column>
-              <el-table-column prop="name" label="登记日期" width="130">
+              <el-table-column prop="createTime" label="登记日期" width="280">
               </el-table-column>
-              <el-table-column prop="name" label="出库日期" width="130">
+              <el-table-column prop="updateTime" label="出库日期" width="280">
               </el-table-column>
-              <el-table-column prop="name" label="状态" width="130">
+              <el-table-column prop="status" label="状态" width="200">
               </el-table-column>
-              <el-table-column label="操作" width="195">
-                <template #default>
-                  <!-- <el-button type="text">查看</el-button> -->
-                  <el-button type="text" @click="$router.push('/layout/holding2_audit')">审核</el-button>
-                  <el-button type="text">确定</el-button>
-                  <el-button type="text">删除</el-button>
+              <el-table-column label="操作" width="200">
+                <template #default='{row}'>
+                  <el-button type="text" v-if="row.status==='待归还'||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==='待办理'||row.status==='待审核'||row.status==='审核不通过'" @click="delData(row.id)">删除</el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -68,9 +69,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>
@@ -81,50 +84,233 @@
 </template>
 
 <script>
+import { getList, enterBank, delData } from '@/apis/holding2'
 import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'Holding2',
   components: { TabList },
   data () {
     return {
+      total: 0,
+      myData: {
+        endTime: '', // 结束时间
+        pageNum: 1, // 起始页码，默认1为第一页
+        pageSize: 10, // 每页数量
+        searchKey: '', // 搜索条件
+        startTime: '', // 开始时间
+        status: null // 状态，不传返回全部，0：草稿中， 1：待审核， 2：审核不通过， 3：审核通过,
+      },
       // 选择状态的变量
       stateInd: 0,
       stateArr: [
-        { txt: '全部', num: 356 },
-        { txt: '待审核', num: 35 },
-        { txt: '待办理', num: 35 },
-        { txt: '已完成', num: 35 },
-        { txt: '审核不通过', num: 35 }
+        { txt: '全部', num: 0 },
+        { txt: '待审核', num: 0 },
+        { txt: '待办理', num: 0 },
+        { txt: '已完成', num: 0 },
+        { txt: '审核不通过', num: 0 }
       ],
       type: '',
       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: {
-
+    // 点击查询
+    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
+    }, // 点击查看
+    myLook (val) {
+      this.$router.push({
+        path: '/layout/holding2_look',
+        query: val
+      })
+    },
+    // 点击删除
+    async delData (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: '已取消.'
+        })
+      })
+    },
+    // 点击编辑
+    compile (val) {
+      this.$router.push({
+        path: '/layout/holding2_add',
+        query: val
+      })
+    },
+    // 点击审核
+    audit (val) {
+      this.$router.push({
+        path: '/layout/holding2_audit',
+        query: val
+      })
+    },
+    // 点击申请入库
+    async enterBank () {
+      const res = await enterBank()
+      this.$router.push({
+        path: '/layout/holding2_add',
+        query: res.data
+      })
+    },
+    // 状态的数据处理
+    myStateDan (id) {
+      const list = [
+        { id: 0, name: '待办理' },
+        { id: 1, name: '待审核' },
+        { id: 2, name: '审核不通过' },
+        { id: 3, name: '待归还' },
+        { id: 4, name: '已归还' }
+      ]
+      return list.filter(v => id === v.id)[0].name
+    },
+    // 封装获取列表方法
+    async getList (data) {
+      const res = await getList(data)
+      this.total = res.data.total
+      // console.log(666, res.data.list)
+      this.tableData = res.data.list
+      this.tableData.forEach(v => {
+        v.status = this.myStateDan(v.status)
+        v.type = this.CKtype(v.type)
+        // v.updateTime = v.updateTime.slice(0, 10)
+        // v.createTime = v.createTime.slice(0, 10)
+      })
+    },
+    // 时间处理----------------
+    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
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  created () {
+    this.getList(this.myData)
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
+  async mounted () {
+    // 进页面拿到所有数据
+    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 () {}, // 生命周期 - 挂载之前
@@ -136,10 +322,11 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-.holding2 {
+.holding {
     /deep/#mytitle>span{
     font-weight: 800;
   }
+
   display: flex;
   .right {
     width: 100%;
@@ -157,7 +344,7 @@ export default {
       width: 100%;
       height: 829px;
       .middle {
-                .title{
+        .title{
           height: 60px;
           border-bottom: 1px solid #ccc;
           margin: 0 25px;

src/views/holding/holding2_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/holding2'
+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/holding2_add.vue

@@ -1,14 +1,15 @@
 <!--  -->
 <template>
-  <div class="holding2Add">
-    <TabList :ind="2" />
+  <div class="holdingAdd">
+    <TabList :ind='2'/>
     <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 id="mytitle">{{mydata.description?'编辑':'新增'}}</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
       <div class="conten">
@@ -20,26 +21,30 @@
           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>
-          <div class="tow_row">
-            <el-form-item label="出库类型" prop="source" style="width: 45%">
+       <div class="one_row">
+            <el-form-item label="出库类型："  style="width: 45%">
               <el-select
                 v-model="fromData.source"
                 placeholder="请选择"
                 style="width: 100%"
               >
                 <el-option label="展览" value="exhibition"></el-option>
-                <el-option label="其他" value="else"></el-option>
+                <el-option label="研究" value="study"></el-option>
+                <el-option label="修复" value="repair"></el-option>
+                <el-option label="复制" value="copy"></el-option>
+                <el-option label="文创" value="cultural"></el-option>
+                <el-option label="其他" value="other"></el-option>
               </el-select>
             </el-form-item>
-            <el-form-item label="出库说明"  style="width: 45%">
-              <el-input v-model="fromData.unit" placeholder="请输入"></el-input>
+            <el-form-item label="出库说明：" prop='textarea'  style="width: 45%">
+              <el-input v-model="fromData.textarea"></el-input>
             </el-form-item>
           </div>
         </el-form>
@@ -48,13 +53,14 @@
           <div class="title">
             <h3>藏品信息</h3>
             <div class="btn">
-              <el-button size="small" >添 加</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
@@ -62,25 +68,25 @@
             >
               <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="200">
+              <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="180">
+              <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="130">
               </el-table-column>
-              <el-table-column label="藏品位置" width="200">
+              <el-table-column label="出库位置" width="230">
                 <template #default>
-                  <el-input v-model="location" placeholder="请输入"></el-input>
+
                 </template>
               </el-table-column>
             </el-table>
@@ -88,63 +94,200 @@
         </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>
+    <!-- 点击添加出现弹窗 -->
+    <Holding2Dialog :dialogFormVisible.sync="isShow" ref="myDialog" @getSonList='getSonList' :myTemp='myTemp'/>
   </div>
 </template>
 
 <script>
+import { holding1submit, getDetailById } from '@/apis/holding2'
+import axios from '@/utils/request'
 import TabList from '@/components/tabLeft.vue'
+import Holding2Dialog from './holding2_Dialog.vue'
 export default {
-  name: 'Holding2Add',
-  // import引入的组件需要注入到对象中才能使用
-  components: { TabList },
+  name: 'HoldingAdd2',
+  components: {
+    Holding2Dialog,
+    TabList
+  },
   data () {
-    // 这里存放数据
     return {
+      // 传递给弹窗的表格数据，用来筛选
+      myTemp: [],
+      // 处理从子组件拿到的数据的id集合数组
+      goodsIds: [],
+      // 服务器前缀地址
+      baseURL: '',
+      mydata: {},
+      // 控制弹出层显示隐藏
+      isShow: false,
       // 表单数据
-      location: '',
       fromData: {
-        number: 'DJ2021081701',
-        people: 'Admin',
-        source: '',
-        unit: ''
+        number: '',
+        people: '',
+        textarea: '',
+        source: 'exhibition'
       },
       // 表单验证
       rules: {
         number: [{ required: true, message: '不能为空', trigger: 'blur' }],
         people: [{ required: true, message: '不能为空', trigger: 'blur' }],
-        source: [{ required: true, message: '不能为空', 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) {
+      // 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)
+      })
+      const temp2 = new Set(temp)
+      this.goodsIds = [...temp2]
+      // 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)
+      })
+    },
+    // 多层选择器的事件
+    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, type: this.fromData.source }
+      this.$confirm('您需要保存这条数据吗?', '提示', {
+        confirmButtonText: '保存',
+        cancelButtonText: '放弃',
+        type: 'warning'
+      }).then(async () => {
+        if (this.fromData.textarea === '') return this.$message.warning('出库说明不能为空')
+        // 发请求
+        await holding1submit(obj)
+        this.$router.push('/layout/holding2')
+        this.$message({
+          type: 'success',
+          message: '保存成功!'
+        })
+      }).catch(() => {
+        this.$router.push('/layout/holding2')
+        this.$message({
+          type: 'info',
+          message: '放弃保存.'
+        })
+      })
+    },
+    // 点击提交
+    async submit () {
+      if (this.fromData.textarea === '') return this.$message.warning('出库说明不能为空')
+      const obj = { description: this.fromData.textarea, goodsIds: this.goodsIds.join(','), id: this.mydata.id, status: 1, type: this.fromData.source }
+      await holding1submit(obj)
+      this.$message.success('提交成功')
+      this.$router.push('/layout/holding2')
+    }
+  },
   // 生命周期 - 创建完成（可以访问当前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 +299,7 @@ export default {
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
-.holding2Add {
+.holdingAdd {
   /deep/#mytitle > span {
     font-weight: 800;
   }
@@ -189,13 +332,13 @@ export default {
       display: flex;
       justify-content: start;
     }
-    .info{
-      max-height: 390px;
-      overflow: auto;
+    .info {
+      // max-height: 390px;
+      // overflow: auto;
       width: 86%;
       border: 1px solid #ccc;
       margin-left: 70px;
-      .title{
+      .title {
         color: black;
         display: flex;
         justify-content: space-between;
@@ -203,8 +346,12 @@ export default {
         align-items: center;
         padding: 0 30px;
       }
-      .table{
-        .smimg{
+      .table {
+        /deep/.el-table__body-wrapper{
+          max-height: 360px;
+          overflow-y: auto;
+        }
+        .smimg {
           border: 3px solid #ccc;
           height: 78px;
           img {
@@ -214,7 +361,7 @@ export default {
         }
       }
     }
-    .bot_btn{
+    .bot_btn {
       display: flex;
       justify-content: space-between;
       position: absolute;

src/views/holding/holding2_audit.vue

@@ -43,18 +43,18 @@
             style="width: 100%"
           >
             <el-table-column label="缩略图" width="160">
-              <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>
-            <el-table-column prop="name" label="类别" width="180">
+            <el-table-column prop="name" label="藏品名称"> </el-table-column>
+            <el-table-column prop="goodsTypeId" label="类别" width="180">
             </el-table-column>
-            <el-table-column prop="name" label="完残程度" width="180">
+            <el-table-column prop="integrity" label="完残程度" width="180">
             </el-table-column>
             <el-table-column prop="name" label="藏品位置" width="300">
             </el-table-column>
@@ -70,8 +70,8 @@
           >
             <el-form-item label="审核结果：" prop="result">
               <el-select v-model="fromData.result" placeholder="请选择">
-                <el-option label="通过" value="pass"></el-option>
-                <el-option label="不通过" value="NOpass"></el-option>
+                <el-option label="通过" :value="3"></el-option>
+                <el-option label="不通过" :value="2"></el-option>
               </el-select>
             </el-form-item>
 
@@ -90,7 +90,7 @@
         </div>
         <!-- 最下面的按钮 -->
         <div class="button">
-          <el-button type="primary">提交</el-button>
+          <el-button type="primary" @click="submit">提交</el-button>
           <el-button @click="$router.go(-1)">返回</el-button>
         </div>
       </div>
@@ -99,6 +99,8 @@
 </template>
 
 <script>
+import { getDetailById, holding1Audit } from '@/apis/holding2'
+import axios from '@/utils/request'
 import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'holding2_audit',
@@ -107,11 +109,12 @@ export default {
   data () {
     // 这里存放数据
     return {
-      // 点击查看显示弹窗
-      isShow: false,
+      // 服务器前缀地址
+      baseURL: '',
+      myData: {},
       fromData: {
         textarea: '',
-        result: ''
+        result: 3
       },
       rules: {
         textarea: [
@@ -124,18 +127,7 @@ export default {
       },
       auditResult: '',
       // 表格数据
-      tableData: [
-        {
-          date: '2016-05-03',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        },
-        {
-          date: '2016-05-02',
-          name: '王小虎',
-          address: '上海市普陀区金沙江路 1518 弄'
-        }
-      ]
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
@@ -144,10 +136,35 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-
+    // 点击提交
+    async submit () {
+      try {
+        await this.$refs.fromData.validate()
+        const obj = { id: this.myData.id, reason: this.fromData.textarea, status: this.fromData.result }
+        const res = await holding1Audit(obj)
+        if (res.code === 0) {
+          this.$message.success('审核成功')
+          this.$router.push('/layout/holding2')
+        } else this.$message.warning(res.msg)
+      } catch (error) {
+        console.log(error)
+      }
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
+  async created () {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL
+    // 拿到路由传递过来的参数
+    this.myData = this.$route.query
+    // 通过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)
+    })
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
@@ -206,7 +223,6 @@ export default {
       .smimg {
         border: 3px solid #ccc;
         height: 68px;
-        padding: 0 15px;
         img {
           width: 100%;
           height: 100%;

src/views/holding/holding2_look.vue

@@ -0,0 +1,248 @@
+<!--  -->
+<template>
+  <div class="holding0_result">
+    <TabList :ind='2'/>
+    <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.type}}</span>
+          </div>
+          <div>
+            <h4>出库说明：</h4>
+            <span>{{myData.description}}</span>
+          </div>
+        </div>
+        <!-- 表格 -->
+        <div class="table">
+          <div class="title">
+            <h3>藏品信息<el-button >归 还</el-button></h3>
+          </div>
+          <el-table
+            @selection-change="handleSelectionChange"
+            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+            :data="tableData"
+            border
+            style="width: 100%"
+          >
+          <el-table-column
+             type="selection"
+             :selectable="selectable"
+             width="55">
+          </el-table-column>
+                <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="status" label="状态" width="180">
+            </el-table-column>
+            <el-table-column prop="name" label="出库位置" width="300">
+            </el-table-column>
+          </el-table>
+        </div>
+        <!-- 最下面的按钮 -->
+          <div class="button">
+              <el-button @click="$router.go(-1)">返回</el-button>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getDetailById } from '@/apis/holding2'
+import axios from '@/utils/request'
+import TabList from '@/components/tabLeft.vue'
+export default {
+  name: 'holding2_result',
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+      myData: {},
+      // 服务器初始地址前缀
+      baseURL: '',
+      // 点击查看显示弹窗
+      isShow: false,
+      fromData: {
+        textarea: ''
+      },
+      rules: {
+        textarea: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+      },
+      auditResult: '',
+      // 表格数据
+      tableData: []
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    myStatus (id) {
+      const list = [
+        { id: 0, name: '已归还' },
+        { id: 1, name: '已入库' },
+        { id: 2, name: '未归还' }
+      ]
+      return list.filter(v => id === v.id)[0].name
+    },
+    // 表格的多选
+    handleSelectionChange (rows) {
+      console.log(333, rows)
+    },
+    selectable (row, index) {
+      console.log(row.status)
+      if (row.status === '已归还') return false
+      else return true
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前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)
+    })
+  },
+  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;
+        &>h3{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          /deep/.el-button{
+            height: 30px;
+            margin-right: 20px;
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+    .button {
+      position: absolute;
+      left: 50%;
+      bottom: 20px;
+      transform: translateX(-50%);
+      width: 240px;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+</style>