静态页面制作

src/router/index.js

@@ -92,6 +92,18 @@ const router = new VueRouter({
           component: () => import('@/views/holding/holding2.vue')
         },
         {
+          name: 'holding2_add',
+          path: 'holding2_add',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding2_add.vue')
+        },
+        {
+          name: 'holding2_audit',
+          path: 'holding2_audit',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding2_audit.vue')
+        },
+        {
           name: 'holding3',
           path: 'holding3',
           meta: { myInd: 1 },
@@ -102,6 +114,18 @@ const router = new VueRouter({
           path: 'holding3_look',
           meta: { myInd: 1 },
           component: () => import('@/views/holding/holding3_look.vue')
+        },
+        {
+          name: 'holding4',
+          path: 'holding4',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding4.vue')
+        },
+        {
+          name: 'holding5',
+          path: 'holding5',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding5.vue')
         }
       ]
     }

src/views/holding/holding1_audit.vue

@@ -216,7 +216,8 @@ export default {
       overflow: auto;
       .smimg {
         border: 3px solid #ccc;
-        height: 50px;
+        height: 60px;
+        padding: 0 15px;
         img {
           width: 100%;
           height: 100%;

src/views/holding/holding2.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="holding">
+  <div class="holding2">
     <TabList :ind='2'/>
     <div class="right">
       <div class="top">
@@ -29,7 +29,7 @@
             >
             </el-date-picker>
             <el-button style="margin-left: 20px">查询</el-button>
-            <el-button type="primary">申请出库</el-button>
+            <el-button type="primary" @click="$router.push('/layout/holding2_add')">申请出库</el-button>
           </div>
           <!--表格 -->
           <div class="table">
@@ -53,7 +53,8 @@
               </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" @click="$router.push('/layout/holding2_audit')">审核</el-button>
                   <el-button type="text">确定</el-button>
                   <el-button type="text">删除</el-button>
                 </template>
@@ -78,7 +79,7 @@
 <script>
 import TabList from '@/components/tabLeft.vue'
 export default {
-  name: 'Holding0',
+  name: 'Holding2',
   components: { TabList },
   data () {
     return {
@@ -124,7 +125,7 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-.holding {
+.holding2 {
     /deep/#mytitle>span{
     font-weight: 800;
   }

src/views/holding/holding2_add.vue

@@ -0,0 +1,228 @@
+<!--  -->
+<template>
+  <div class="holding2Add">
+    <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">
+        <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>
+          <div class="tow_row">
+            <el-form-item label="出库类型" prop="source" 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-select>
+            </el-form-item>
+            <el-form-item label="出库说明"  style="width: 45%">
+              <el-input v-model="fromData.unit" placeholder="请输入"></el-input>
+            </el-form-item>
+          </div>
+        </el-form>
+        <!-- 藏品信息 -->
+        <div class="info">
+          <div class="title">
+            <h3>藏品信息</h3>
+            <div class="btn">
+              <el-button size="small" >添 加</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="200">
+              </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="180">
+              </el-table-column>
+              <el-table-column prop="name" label="藏品年代" width="130">
+              </el-table-column>
+              <el-table-column label="藏品位置" width="200">
+                <template #default>
+                  <el-input v-model="location" placeholder="请输入"></el-input>
+                </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>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft.vue'
+export default {
+  name: 'Holding2Add',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+      // 表单数据
+      location: '',
+      fromData: {
+        number: 'DJ2021081701',
+        people: 'Admin',
+        source: '',
+        unit: ''
+      },
+      // 表单验证
+      rules: {
+        number: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        people: [{ required: true, message: '不能为空', trigger: 'blur' }],
+        source: [{ required: true, message: '不能为空', trigger: 'blur' }]
+      },
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.holding2Add {
+  /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;
+    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/holding2_audit.vue

@@ -0,0 +1,238 @@
+<!--  -->
+<template>
+  <div class="holding2_audit">
+    <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>
+            <b>DJ</b>
+            <span>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="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>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft.vue'
+export default {
+  name: 'holding2_audit',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+      // 点击查看显示弹窗
+      isShow: false,
+      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: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.holding2_audit {
+  /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%;
+      }
+    }
+    .table {
+      max-height: 288px;
+      overflow: auto;
+      .smimg {
+        border: 3px solid #ccc;
+        height: 68px;
+        padding: 0 15px;
+        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/holding3.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="holding">
+  <div class="holding3">
     <TabList :ind='3'/>
     <div class="right">
       <div class="top">
@@ -112,7 +112,7 @@
 <script>
 import TabList from '@/components/tabLeft.vue'
 export default {
-  name: 'Holding0',
+  name: 'Holding3',
   components: { TabList },
   data () {
     return {
@@ -183,7 +183,7 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-.holding {
+.holding3 {
     /deep/#mytitle>span{
     font-weight: 800;
   }

src/views/holding/holding4.vue

@@ -0,0 +1,78 @@
+<!--  -->
+<template>
+  <div class="holding4">
+    <TabList :ind='4'/>
+    <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 id="mytitle">藏品盘核</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft.vue'
+export default {
+  name: 'Holding4',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.holding4 {
+    /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 {
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+  }
+}
+</style>

src/views/holding/holding5.vue

@@ -0,0 +1,78 @@
+<!--  -->
+<template>
+  <div class="holding5">
+    <TabList :ind='5'/>
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item to="">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">藏品注销</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft.vue'
+export default {
+  name: 'Holding5',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {},
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.holding5 {
+    /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 {
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+  }
+}
+</style>