入库管理静态页面搭建完工

src/router/index.js

@@ -68,6 +68,24 @@ const router = new VueRouter({
           component: () => import('@/views/holding/holding1.vue')
         },
         {
+          name: 'holding1_look',
+          path: 'holding1_look',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding1_look.vue')
+        },
+        {
+          name: 'holding1_audit',
+          path: 'holding1_audit',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding1_audit.vue')
+        },
+        {
+          name: 'holding1_add',
+          path: 'holding1_add',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding1_add.vue')
+        },
+        {
           name: 'holding2',
           path: 'holding2',
           meta: { myInd: 1 },

src/views/holding/holding1.vue

@@ -61,9 +61,9 @@
               </el-table-column>
               <el-table-column label="操作" width="195">
                 <template #default>
-                  <el-button type="text">查看</el-button>
-                  <el-button type="text">确定</el-button>
-                  <el-button type="text">删除</el-button>
+                  <el-button type="text" @click="$router.push('/layout/holding1_look')">查看</el-button>
+                  <el-button type="text" @click="$router.push('/layout/holding1_audit')">审核</el-button>
+                  <el-button type="text" @click="$router.push('/layout/holding1_add')">编辑</el-button>
                 </template>
               </el-table-column>
             </el-table>

src/views/holding/holding1_Dialog.vue

@@ -0,0 +1,125 @@
+<template>
+  <el-dialog title="添加藏品" :visible="dialogFormVisible" @close="cancel()">
+    <div class="query">
+      <span>藏品名称：</span>
+      <el-input v-model="name" placeholder="请输入" style="width:280px; margin-right:40px"></el-input>
+      <el-button>查 询</el-button>
+    </div>
+    <!-- 表格 -->
+    <el-table
+      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+      :data="tableData"
+      border
+      style="width: 100%"
+    >
+      <el-table-column label="缩略图" width="140">
+        <template #default>
+          <div class="smimg">
+            <img src="../../assets/img/user.png" alt="" />
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="总登记号" width="180">
+      </el-table-column>
+      <el-table-column prop="address" label="藏品名称"> </el-table-column>
+      <el-table-column prop="name" label="类别" width="140"> </el-table-column>
+    </el-table>
+              <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="30"
+            >
+            </el-pagination>
+          </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="cancel">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'Holding0_Dialog',
+  components: {},
+  props: {
+    dialogFormVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      name: '',
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 点击取消
+    cancel () {
+      this.$emit('update:dialogFormVisible', false)
+    }
+  },
+  created () {},
+  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/holding1_add.vue

@@ -0,0 +1,467 @@
+<!--  -->
+<template>
+  <div class="holdingAdd">
+    <div class="left">
+      <ul>
+        <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <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>
+      </div>
+      <div class="conten">
+        <el-form
+          :model="fromData"
+          :rules="rules"
+          ref="fromData"
+          label-width="140px"
+          class="demo-ruleForm"
+        >
+          <div class="one_row">
+            <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-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>
+        </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>
+            </div>
+          </div>
+          <!--表格 -->
+          <div class="table">
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="selection" width="40"> </el-table-column>
+              <el-table-column label="缩略图" width="146">
+                <template #default>
+                  <div class="smimg">
+                    <img src="../../assets/img/user.png" alt="" />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="name" label="总登记号" width="235">
+              </el-table-column>
+              <el-table-column prop="address" label="藏品名称">
+              </el-table-column>
+              <el-table-column prop="name" label="类别" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="完残程度" width="220">
+              </el-table-column>
+              <el-table-column label="藏品位置" width="230">
+                <template #default>
+                  <el-cascader
+                    v-model="value"
+                    :options="options"
+                    @change="handleChange"
+                  ></el-cascader>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <!-- 最下面的2个按钮 -->
+        <div class="bot_btn">
+          <el-button type="primary">提 交</el-button>
+          <el-button @click="$router.go(-1)">返 回</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 点击添加或者编辑出现弹窗 -->
+    <Holding1Dialog :dialogFormVisible.sync="isShow" />
+  </div>
+</template>
+
+<script>
+import Holding1Dialog from './holding1_Dialog.vue'
+export default {
+  name: 'HoldingAdd',
+  components: {
+    Holding1Dialog
+  },
+  data () {
+    return {
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      value: [],
+      options: [{
+        value: 'zhinan',
+        label: '指南',
+        children: [{
+          value: 'shejiyuanze',
+          label: '设计原则',
+          children: [{
+            value: 'yizhi',
+            label: '一致'
+          }, {
+            value: 'fankui',
+            label: '反馈'
+          }, {
+            value: 'xiaolv',
+            label: '效率'
+          }, {
+            value: 'kekong',
+            label: '可控'
+          }]
+        }, {
+          value: 'daohang',
+          label: '导航',
+          children: [{
+            value: 'cexiangdaohang',
+            label: '侧向导航'
+          }, {
+            value: 'dingbudaohang',
+            label: '顶部导航'
+          }]
+        }]
+      }, {
+        value: 'zujian',
+        label: '组件',
+        children: [{
+          value: 'basic',
+          label: 'Basic',
+          children: [{
+            value: 'layout',
+            label: 'Layout 布局'
+          }, {
+            value: 'color',
+            label: 'Color 色彩'
+          }, {
+            value: 'typography',
+            label: 'Typography 字体'
+          }, {
+            value: 'icon',
+            label: 'Icon 图标'
+          }, {
+            value: 'button',
+            label: 'Button 按钮'
+          }]
+        }, {
+          value: 'form',
+          label: 'Form',
+          children: [{
+            value: 'radio',
+            label: 'Radio 单选框'
+          }, {
+            value: 'checkbox',
+            label: 'Checkbox 多选框'
+          }, {
+            value: 'input',
+            label: 'Input 输入框'
+          }, {
+            value: 'input-number',
+            label: 'InputNumber 计数器'
+          }, {
+            value: 'select',
+            label: 'Select 选择器'
+          }, {
+            value: 'cascader',
+            label: 'Cascader 级联选择器'
+          }, {
+            value: 'switch',
+            label: 'Switch 开关'
+          }, {
+            value: 'slider',
+            label: 'Slider 滑块'
+          }, {
+            value: 'time-picker',
+            label: 'TimePicker 时间选择器'
+          }, {
+            value: 'date-picker',
+            label: 'DatePicker 日期选择器'
+          }, {
+            value: 'datetime-picker',
+            label: 'DateTimePicker 日期时间选择器'
+          }, {
+            value: 'upload',
+            label: 'Upload 上传'
+          }, {
+            value: 'rate',
+            label: 'Rate 评分'
+          }, {
+            value: 'form',
+            label: 'Form 表单'
+          }]
+        }, {
+          value: 'data',
+          label: 'Data',
+          children: [{
+            value: 'table',
+            label: 'Table 表格'
+          }, {
+            value: 'tag',
+            label: 'Tag 标签'
+          }, {
+            value: 'progress',
+            label: 'Progress 进度条'
+          }, {
+            value: 'tree',
+            label: 'Tree 树形控件'
+          }, {
+            value: 'pagination',
+            label: 'Pagination 分页'
+          }, {
+            value: 'badge',
+            label: 'Badge 标记'
+          }]
+        }, {
+          value: 'notice',
+          label: 'Notice',
+          children: [{
+            value: 'alert',
+            label: 'Alert 警告'
+          }, {
+            value: 'loading',
+            label: 'Loading 加载'
+          }, {
+            value: 'message',
+            label: 'Message 消息提示'
+          }, {
+            value: 'message-box',
+            label: 'MessageBox 弹框'
+          }, {
+            value: 'notification',
+            label: 'Notification 通知'
+          }]
+        }, {
+          value: 'navigation',
+          label: 'Navigation',
+          children: [{
+            value: 'menu',
+            label: 'NavMenu 导航菜单'
+          }, {
+            value: 'tabs',
+            label: 'Tabs 标签页'
+          }, {
+            value: 'breadcrumb',
+            label: 'Breadcrumb 面包屑'
+          }, {
+            value: 'dropdown',
+            label: 'Dropdown 下拉菜单'
+          }, {
+            value: 'steps',
+            label: 'Steps 步骤条'
+          }]
+        }, {
+          value: 'others',
+          label: 'Others',
+          children: [{
+            value: 'dialog',
+            label: 'Dialog 对话框'
+          }, {
+            value: 'tooltip',
+            label: 'Tooltip 文字提示'
+          }, {
+            value: 'popover',
+            label: 'Popover 弹出框'
+          }, {
+            value: 'card',
+            label: 'Card 卡片'
+          }, {
+            value: 'carousel',
+            label: 'Carousel 走马灯'
+          }, {
+            value: 'collapse',
+            label: 'Collapse 折叠面板'
+          }]
+        }]
+      }, {
+        value: 'ziyuan',
+        label: '资源',
+        children: [{
+          value: 'axure',
+          label: 'Axure Components'
+        }, {
+          value: 'sketch',
+          label: 'Sketch Templates'
+        }, {
+          value: 'jiaohu',
+          label: '组件交互文档'
+        }]
+      }],
+      // 控制弹出层显示隐藏
+      isShow: false,
+      // 表单数据
+      fromData: {
+        number: 'DJ2021081701',
+        people: 'Admin',
+        textarea: ''
+      },
+      // 表单验证
+      rules: {
+        number: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        people: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        textarea: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+      },
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/holding${index}`).catch(() => {})
+    },
+    // 多层选择器的事件
+    handleChange (value) {
+      console.log(value)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.holdingAdd {
+  /deep/#mytitle > span {
+    font-weight: 800;
+  }
+  display: flex;
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 868px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(2) {
+        background-color: #e6f7ff;
+      }
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+    }
+  }
+  .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;
+    padding: 40px 0 0 20px;
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+    .one_row {
+      display: flex;
+      justify-content: start;
+    }
+    .tow_row {
+      display: flex;
+      justify-content: start;
+    }
+    .info {
+      max-height: 390px;
+      overflow: auto;
+      width: 86%;
+      border: 1px solid #ccc;
+      margin-left: 70px;
+      .title {
+        color: black;
+        display: flex;
+        justify-content: space-between;
+        height: 52px;
+        align-items: center;
+        padding: 0 30px;
+      }
+      .table {
+        .smimg {
+          border: 3px solid #ccc;
+          height: 78px;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+    .bot_btn {
+      display: flex;
+      justify-content: space-between;
+      position: absolute;
+      bottom: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 230px;
+    }
+  }
+}
+</style>

src/views/holding/holding1_audit.vue

@@ -0,0 +1,287 @@
+<!--  -->
+<template>
+  <div class="holding0_audit">
+    <div class="left">
+      <ul>
+        <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <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>
+            <b>DJ</b>
+            <span>2021081701</span>
+          </div>
+          <div>
+            <h4>登记人员：</h4>
+            <span>Admin</span>
+          </div>
+        </div>
+        <div class="explain">
+          <p>
+            <span>登记说明：</span
+            >考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集
+          </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>
+                <div class="smimg">
+                  <img src="../../assets/img/user.png" alt="" />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" 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>
+            <el-table-column prop="name" label="完残程度" width="180">
+            </el-table-column>
+            <el-table-column prop="name" label="藏品位置" width="300">
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="txt">
+          <el-form
+            :model="fromData"
+            :rules="rules"
+            ref="fromData"
+            label-width="100px"
+            class="demo-ruleForm"
+          >
+            <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-select>
+            </el-form-item>
+
+            <el-form-item
+              label="审核说明："
+              prop="textarea"
+            >
+              <el-input
+                type="textarea"
+                :rows="3"
+                v-model="fromData.textarea"
+                placeholder="请输入"
+              ></el-input>
+            </el-form-item>
+          </el-form>
+        </div>
+        <!-- 最下面的按钮 -->
+        <div class="button">
+          <el-button type="primary">提交</el-button>
+          <el-button @click="$router.go(-1)">返回</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 点击查看显示弹窗 -->
+    <Holding0AuditDia :dialogFormVisible.sync="isShow" />
+  </div>
+</template>
+
+<script>
+import Holding0AuditDia from './holding0_audit_Dia.vue'
+export default {
+  name: 'holding0_audit',
+  // import引入的组件需要注入到对象中才能使用
+  components: { Holding0AuditDia },
+  data () {
+    // 这里存放数据
+    return {
+      // 点击查看显示弹窗
+      isShow: false,
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      fromData: {
+        textarea: '',
+        result: ''
+      },
+      rules: {
+        textarea: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { max: 255, message: '不能超过255个字符', trigger: 'blur' }
+        ],
+        result: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ]
+      },
+      auditResult: '',
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/holding${index}`).catch(() => {})
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.holding0_audit {
+  /deep/#mytitle > span {
+    font-weight: 800;
+  }
+
+  display: flex;
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 868px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(2) {
+        background-color: #e6f7ff;
+      }
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+    }
+  }
+  .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: 288px;
+      overflow: auto;
+      .smimg {
+        border: 3px solid #ccc;
+        height: 50px;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      margin-top: 38px;
+      border: 1px solid #ccc;
+      .title {
+        padding-left: 30px;
+        color: black;
+        height: 50px;
+        line-height: 50px;
+      }
+    }
+    .txt {
+      margin-top: 38px;
+    }
+    .button {
+      position: absolute;
+      left: 50%;
+      bottom: 20px;
+      transform: translateX(-50%);
+      width: 240px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

src/views/holding/holding1_look.vue

@@ -0,0 +1,255 @@
+<!--  -->
+<template>
+  <div class="holding0_result">
+    <div class="left">
+      <ul>
+        <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <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>
+              <b>DJ</b>
+              2021081701</span>
+          </div>
+          <div>
+            <h4>入库人员：</h4>
+            <span>Admin</span>
+          </div>
+          <div>
+            <h4>入库说明：</h4>
+            <span>考古发掘与采集</span>
+          </div>
+          <div>
+            <h4>审核结果：</h4>
+            <span>通过</span>
+          </div>
+        </div>
+        <div class="explain">
+          <p>
+            <span>审核说明：</span
+            >考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集考古发掘与采集
+          </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>
+                <div class="smimg">
+                  <img src="../../assets/img/user.png" alt="" />
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" 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>
+            <el-table-column prop="name" 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>
+export default {
+  name: 'holding0_result',
+  // import引入的组件需要注入到对象中才能使用
+  components: { },
+  data () {
+    // 这里存放数据
+    return {
+      // 点击查看显示弹窗
+      isShow: false,
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      fromData: {
+        textarea: ''
+      },
+      rules: {
+        textarea: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+      },
+      auditResult: '',
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/holding${index}`).catch(() => {})
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  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;
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 868px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(2) {
+        background-color: #e6f7ff;
+      }
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+    }
+  }
+  .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>

src/views/holding/holding3_look.vue

@@ -72,7 +72,41 @@
         </div>
         <div class="conten_bot">
           <div class="resource">
-
+            <div class="select">
+              <h3>数字资源</h3>
+              <el-select v-model="resource" placeholder="请选择">
+                <el-option label="高清图片" value="GQpicture"></el-option>
+                <el-option label="高清视频" value="GQvideo"></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="160">
+                <template #default>
+                  <div class="smimg">
+                    <img src="../../assets/img/user.png" alt="" />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="name" label="附件名称" width="160"> </el-table-column>
+              <el-table-column prop="address" label="附件说明" ></el-table-column>
+              <el-table-column prop="name" label="上传人" width="160"> </el-table-column>
+              <el-table-column prop="name" label="上传时间" width="160"> </el-table-column>
+              <el-table-column label="操作" width="160">
+                <template #default>
+                  <a href="/">下 载</a>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <!-- 底部的返回按钮 -->
+          <div class="btn">
+            <el-button @click='$router.go(-1)'>返 回</el-button>
           </div>
         </div>
       </div>
@@ -91,6 +125,14 @@ export default {
   data () {
     // 这里存放数据
     return {
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ],
       tabList: [
         '藏品登记',
         '入库管理',
@@ -98,7 +140,8 @@ export default {
         '藏品总账',
         '藏品盘核',
         '藏品注销'
-      ]
+      ],
+      resource: 'GQpicture'
     }
   },
   // 监听属性 类似于data概念
@@ -205,7 +248,7 @@ body {
           color: black;
           margin: 0 25px 0 35px;
         }
-        &>div{
+        & > div {
           display: flex;
           justify-content: center;
           align-items: center;
@@ -238,12 +281,38 @@ body {
         }
       }
     }
-    .conten_bot{
+    .conten_bot {
+      position: relative;
+      .btn{
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 12px;
+      }
       height: 250px;
       width: 100%;
       .resource {
-        height: 200px;
+          .smimg{
+            text-align: center;
+    height: 40px;
+    img {
+      width: 40px;
+      height: 40px;
+    }
+  }
+        height: 174px;
+        width: 97%;
+        max-width: 1580px;
         border: 1px solid #ccc;
+        .select {
+          h3 {
+            margin: 0 26px;
+            color: black;
+          }
+          display: flex;
+          height: 58px;
+          align-items: center;
+        }
       }
     }
   }

src/views/holding/初始化.vue

@@ -114,7 +114,7 @@ export default {
   .conten {
     flex: 1;
     background-color: #fff;
-    margin: 20px 20px 110px;
+    margin: 20px 20px 40px;
   }
 }
 </style>