藏品修改静态页面搭建

src/router/index.js

@@ -136,6 +136,12 @@ const router = new VueRouter({
           component: () => import('@/views/holding/holding4_audit.vue')
         },
         {
+          name: 'holding4_look',
+          path: 'holding4_look',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding4_look.vue')
+        },
+        {
           name: 'holding5',
           path: 'holding5',
           meta: { myInd: 1 },

src/views/holding/holding0_add.vue

@@ -150,7 +150,7 @@ export default {
         unit: [
           { required: true, message: '不能为空', trigger: 'blur' },
           { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }],
-        description: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+        description: [{ required: true, message: '不能为空', trigger: 'blur' }, { max: 255, message: '不能超过255个字符', trigger: 'blur' }]
       },
       // 表格数据
       tableData: [],
@@ -173,6 +173,7 @@ export default {
       }).then(async () => {
         if (this.tableData.length === 0) return this.$message.warning('至少添加一条藏品信息')
         if (this.fromData.unit.trim() === '') return this.$message.warning('单位或个人不能为空')
+        if (this.fromData.description.trim() === '') return this.$message.warning('登记说明不能为空')
         // 发请求
         this.fromData.status = null
         await addSubmit({ ...this.fromData, id: this.mydata.id })
@@ -193,6 +194,7 @@ export default {
     async submit (id) {
       if (this.tableData.length === 0) return this.$message.warning('至少添加一条藏品信息')
       if (this.fromData.unit.trim() === '') return this.$message.warning('单位或个人不能为空')
+      if (this.fromData.description.trim() === '') return this.$message.warning('登记说明不能为空')
       this.fromData.status = 1
       const res = await addSubmit({ ...this.fromData, id: this.mydata.id })
       if (res.code === 0) {

src/views/holding/holding0_audit.vue

@@ -86,7 +86,7 @@
           label-width="100px"
           class="demo-ruleForm"
         >
-         <el-form-item label="审核结果：" prop="textarea" style="width: 100%">
+         <el-form-item label="审核结果：" style="width: 100%">
                       <el-select
                   v-model="myresult"
                   placeholder="请选择"
@@ -143,7 +143,7 @@ export default {
         textarea: ''
       },
       rules: {
-        textarea: [{ max: 255, message: '不能超过255个字符', trigger: 'blur' }]
+        textarea: [{ required: true, message: '不能为空', trigger: 'blur' }, { max: 255, message: '不能超过255个字符', trigger: 'blur' }]
       },
       // 多选框数据
       // mySelect: [{ id: 4, name: '入库' }, { id: 3, name: '不入库' }, { id: 2, name: '审核不通过' }],
@@ -165,11 +165,16 @@ export default {
     },
     // 点击提交
     async submit () {
-      const obj = { id: this.myData.id, status: this.myresult, reason: this.fromData.textarea, isStorages: this.mySrt }
-      const res = await auditH0Tow(obj)
-      if (res.code === 0) {
-        this.$message.success('提交成功')
-        this.$router.push('/layout/holding0')
+      try {
+        await this.$refs.fromData.validate()
+        const obj = { id: this.myData.id, status: this.myresult, reason: this.fromData.textarea, isStorages: this.mySrt }
+        const res = await auditH0Tow(obj)
+        if (res.code === 0) {
+          this.$message.success('提交成功')
+          this.$router.push('/layout/holding0')
+        }
+      } catch (error) {
+        console.log(error)
       }
       // console.log(6666, res)
     },

src/views/holding/holding4.vue

@@ -55,7 +55,7 @@
               </el-table-column>
               <el-table-column prop="realName" label="编辑登记人" width="200">
               </el-table-column>
-              <el-table-column prop="createTime" label="创建日期" width="200">
+              <el-table-column prop="createTime" label="编辑日期" width="200">
               </el-table-column>
               <el-table-column prop="status" label="状态" width="230">
               </el-table-column>
@@ -195,7 +195,7 @@ export default {
     }, // 点击查看
     myLook (val) {
       this.$router.push({
-        path: '/layout/holding1_look',
+        path: '/layout/holding4_look',
         query: val
       })
     },

src/views/holding/holding4_audit.vue

@@ -11,7 +11,64 @@
           <el-breadcrumb-item id="mytitle">审核</el-breadcrumb-item>
         </el-breadcrumb>
       </div>
-      <div class="conten"></div>
+      <div class="conten">
+        <div class="con_top">
+          <div><span>藏品名称：</span>666</div>
+          <div><span>总登记号：</span>666</div>
+          <div><span>编辑登记人：</span>666</div>
+          <div><span>编辑时间：</span>666</div>
+        </div>
+        <div class="con_edit">
+          <div class="title">修改记录
+                        <el-button size="small">查 看</el-button>
+          </div>
+          <div class="editChange">
+            <div style="width:200px">修改内容</div>
+            <div style="width:650px">修改前</div>
+            <div style="flex: 1;">修改后</div>
+          </div>
+          <div class="father">
+          <div class="con_txt" v-for="(item,index) in editData" :key="index">
+            <div style="width:200px">{{item.name}}</div>
+            <div style="width:650px">{{item.qian}}</div>
+            <div style="flex: 1;">{{item.hou}}</div>
+          </div>
+          </div>
+        </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="3"></el-option>
+                <el-option label="不通过" :value="2"></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" @click="submit">提交</el-button>
+          <el-button @click="$router.go(-1)">返回</el-button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -25,7 +82,33 @@ export default {
   data () {
     // 这里存放数据
     return {
-
+      editData: [
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' }
+      ],
+      fromData: {
+        textarea: '',
+        result: 3
+      },
+      rules: {
+        textarea: [
+          { required: true, message: '不能为空', trigger: 'blur' },
+          { max: 255, message: '不能超过255个字符', trigger: 'blur' }
+        ],
+        result: [
+          { required: true, message: '请选择活动区域', trigger: 'change' }
+        ]
+      }
     }
   },
   // 监听属性 类似于data概念
@@ -34,7 +117,14 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-
+    // 点击提交
+    async submit () {
+      try {
+        await this.$refs.fromData.validate()
+      } catch (error) {
+        console.log(error)
+      }
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
@@ -71,9 +161,77 @@ export default {
     }
   }
   .conten {
+    position: relative;
     flex: 1;
     background-color: #fff;
     margin: 20px 20px 40px;
+    padding: 24px;
+    .con_top{
+      color: black;
+      height: 80px;
+      &>div {
+        float: left;
+        padding-left: 18px;
+        width: 50%;
+        height: 50%;
+        line-height: 40px;
+        border: 1px solid #ccc;
+        &>span {
+          font-weight: 700;
+        }
+      }
+    }
+    .con_edit{
+      color: black;
+      margin: 24px 0;
+      max-height: 460px;
+      // background-color: cadetblue;
+      .title{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding:0 38px;
+        height: 50px;
+        font-weight: 700;
+        border: 1px solid #ccc;
+      }
+      .editChange{
+        font-weight: 700;
+        height: 40px;
+        display: flex;
+        &>div {
+          background-color: #fafafa;
+          padding-left: 18px;
+          border: 1px solid #ccc;
+          height: 100%;
+          line-height: 40px;
+        }
+      }
+      .father{
+        max-height: 320px;
+        overflow: auto;
+      }
+    .con_txt{
+      height: 40px;
+      display: flex;
+      &>div {
+        border: 1px solid #ccc;
+        height: 100%;
+        line-height: 40px;
+        padding-left: 18px;
+      }
+    }
+    }
+        .button {
+      position: absolute;
+      left: 50%;
+      bottom: 20px;
+      transform: translateX(-50%);
+      width: 240px;
+      display: flex;
+      justify-content: space-between;
+    }
+
   }
 }
 </style>

src/views/holding/holding4_look.vue

@@ -0,0 +1,195 @@
+<!--  -->
+<template>
+  <div class="holdingAdd">
+    <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>藏品修改</el-breadcrumb-item>
+          <el-breadcrumb-item id="mytitle">查看</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+        <div class="info">
+          <div class="row">
+            <div><span>藏品名称：</span>123</div>
+            <div><span>总登记号：</span>123</div>
+          </div>
+        <div class="row">
+          <div><span>编辑登记人：</span>123</div>
+          <div><span>编辑时间：</span>123</div>
+        </div>
+        <div class="row">
+          <div><span>审核结果：</span>123</div>
+        </div>
+        <div class="row">
+          <div><span>审核说明：</span>快乐的小青乐的小青蛙快乐的小青蛙快乐的小青蛙快乐的小青蛙快乐的</div>
+        </div>
+        </div>
+        <div class="con_edit">
+          <div class="title">修改记录
+                        <el-button size="small">查 看</el-button>
+          </div>
+          <div class="editChange">
+            <div style="width:200px">修改内容</div>
+            <div style="width:650px">修改前</div>
+            <div style="flex: 1;">修改后</div>
+          </div>
+          <div class="father">
+          <div class="con_txt" v-for="(item,index) in editData" :key="index">
+            <div style="width:200px">{{item.name}}</div>
+            <div style="width:650px">{{item.qian}}</div>
+            <div style="flex: 1;">{{item.hou}}</div>
+          </div>
+          </div>
+        </div>
+        <!-- 最下面的按钮 -->
+        <div class="button">
+          <el-button @click="$router.go(-1)">返回</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TabList from '@/components/tabLeft.vue'
+export default {
+  name: 'HoldingAdd',
+  // import引入的组件需要注入到对象中才能使用
+  components: { TabList },
+  data () {
+    // 这里存放数据
+    return {
+      editData: [
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' },
+        { name: '完残程度', qian: '基本完整', hou: '部分残缺' },
+        { name: '完残程度2', qian: '基本完整2', hou: '部分残缺2' }
+      ]
+    }
+  },
+  // 监听属性 类似于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类
+.holdingAdd {
+  /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: 24px;
+    color: black;
+    flex: 1;
+    background-color: #fff;
+    margin: 20px 20px 40px;
+    .info{
+      .row{
+        display: flex;
+        &>div{
+          flex: 1;
+          border: 1px solid #ccc;
+          padding: 10px 18px;
+          &>span {
+            font-weight: 700;
+          }
+        }
+      }
+    }
+    .con_edit{
+      color: black;
+      margin: 24px 0;
+      max-height: 460px;
+      // background-color: cadetblue;
+      .title{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding:0 38px;
+        height: 50px;
+        font-weight: 700;
+        border: 1px solid #ccc;
+      }
+      .editChange{
+        font-weight: 700;
+        height: 40px;
+        display: flex;
+        &>div {
+          background-color: #fafafa;
+          padding-left: 18px;
+          border: 1px solid #ccc;
+          height: 100%;
+          line-height: 40px;
+        }
+      }
+      .father{
+        max-height: 320px;
+        overflow: auto;
+      }
+    .con_txt{
+      height: 40px;
+      display: flex;
+      &>div {
+        border: 1px solid #ccc;
+        height: 100%;
+        line-height: 40px;
+        padding-left: 18px;
+      }
+    }
+    }
+            .button {
+      position: absolute;
+      left: 50%;
+      bottom: 20px;
+      transform: translateX(-50%);
+      width: 240px;
+      display: flex;
+      justify-content: center;
+    }
+
+  }
+}
+</style>