2023-8-7

src/router/index.js

@@ -80,6 +80,11 @@ export const constantRoutes = [
         path: 'list1',
         component: () => import('@/views/reception/list1'),
         meta: { title: '内部质量保证体系资料汇编'}
+      },
+      {
+        path: 'detail/:id',
+        component: () => import('@/views/reception/detail'),
+        meta: { title: '文件详情' }
       }
     ],
     hidden: true

src/views/reception/detail/index.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="detail">
+    <div class="container">
+
+      <el-skeleton :loading="loading" animated>
+        <template #template>
+          <div>
+            <div class="title">
+              <el-skeleton-item variant="rect" style="height: 30px;width: 74%;"/>
+            </div>
+            <div class="type">
+              <el-skeleton-item variant="rect" style="height: 20px;width: 80px;"/>
+            </div>
+            <div class="date">
+              <el-skeleton-item variant="rect" style="height: 20px;width: 20%;"/>
+            </div>
+            <div class="content">
+              <el-skeleton-item variant="text" style="height: 300px;width: 100%;"/>
+            </div>
+            <div class="file">
+              <p class="file__text">附件</p>
+              <div v-for="i in 3">
+                <el-skeleton-item variant="rect"  style="height: 30px;width: 30%;"/>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template>
+          <div>
+            <div class="title">
+              <span
+                class="title-zhidu"
+                v-if="info.leixing == 5"
+              >
+                {{ info.wenjian }}【{{ info.nianfen }}】{{ info.bianhao }}号
+              </span>{{ info.biaoti }}
+            </div>
+            <div class="type" :style="{'background': ['#a8f35f','#407cbe','#bf6865','#5d53cf','#7d7e4d'][info.leixing-1]}">{{ typeFormat(info.leixing) }}</div>
+            <div class="date">{{ $moment(new Date(info.created_at)).format('YYYY-MM-DD') }}</div>
+            <div class="content" v-html="info.jianshu"></div>
+            <div class="file" v-if="info.id_material_fujian_uploads_material_id_relation && info.id_material_fujian_uploads_material_id_relation.length > 0">
+              <p class="file__text">附件</p>
+              <div class="file__item" v-for="item in info.id_material_fujian_uploads_material_id_relation">
+                <a>{{ item.name }}</a>
+                <div class="file__item--btn" @click="open(item)">预览</div>
+                <i class="el-icon-download file__item--down" @click="down(item)"></i>
+              </div>
+            </div>
+          </div>
+        </template>
+      </el-skeleton>
+    </div>
+
+    <Modal
+      :width="76"
+      transfer
+      :z-index="6000"
+      v-model="showModal"
+      :footer-hide="true"
+      title="预览"
+    >
+      <template>
+        <iframe
+          style="width: 100%; height: 57vh"
+          :src="codeUri"
+          border="0"
+        ></iframe>
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import formType from "@/const/formType"
+import { detail } from "@/api/reception"
+import {download} from "@/utils/downloadRequest";
+export default {
+  data() {
+    return {
+      formType,
+      showModal: false,
+      codeUri: '',
+      loading: false,
+      info: {}
+    }
+  },
+  methods: {
+    getDetail (id) {
+      this.loading = true
+      detail({
+        table_name: 'materials',
+        id
+      }).then(res => {
+        console.log(res)
+        this.info = res.detail
+        this.loading = false
+      }).catch(err => this.loading = false)
+    },
+    open(e) {
+      this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(
+        new Buffer(e.url).toString("base64")
+      )}`;
+
+      this.showModal = true;
+      //window.open(`http://view.ali251.langye.net:8012/onlinePreview?url=${codeUri}`)
+    },
+    down(e) {
+      download(e.url, "get", {}, e.name);
+    },
+  },
+  computed: {
+    typeFormat () {
+      return function (leixing) {
+        return this.formType.find(i => i.value === leixing)?.label
+      }
+    }
+  },
+  beforeRouteEnter(to, from , next) {
+    next(vm => {
+      vm.getDetail(to.params.id)
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.detail {
+  background: #f8f8f8;
+
+  padding: 31px 18.75%;
+}
+
+.container {
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
+
+  padding: 24px 23px 44px 22px;
+
+  .title {
+    font-weight: 600;
+    font-size: 15px;
+    text-align: center;
+
+    &-zhidu {
+      font-weight: 500;
+      color: #398ac9;
+
+    }
+  }
+  .date {
+    text-align: center;
+
+    padding-bottom: 20px;
+  }
+  .type {
+    display: inline-block;
+    text-align: center;
+    font-size: 12px;
+    padding: 2px 6px;
+    color: #fff;
+    border-radius: 20px;
+    transform: translateX(-50%);
+
+    margin: 10px auto;
+    position: relative;
+    left: 50%;
+  }
+  .file {
+
+    margin-top: 10px;
+
+    &__text {
+      font-weight: 600;
+
+      padding: 10px 0;
+    }
+    &__item {
+      display: flex;
+      align-items: center;
+
+      & > a {
+        flex: 1;
+      }
+      &--btn {
+        cursor: pointer;
+        font-size: 13px;
+        color: #247ec3;
+        border-radius: 30px;
+        border: 1px solid #247ec3;
+        transition: all 0.2s;
+
+        padding: 5px 15px;
+        margin-right: 10px;
+
+        &:hover {
+          color: #fff;
+          background: #247ec3;
+        }
+      }
+      &--down {
+        cursor: pointer;
+        font-size: 16px;
+        color: #247ec3;
+
+        margin-left: 20px;
+        padding-right: 9px;
+      }
+    }
+  }
+}
+
+</style>

src/views/reception/index.vue

@@ -36,7 +36,6 @@ export default {
   methods: {},
   computed: {},
   mounted() {
-    console.log(111,this.$route)
   }
 }
 </script>

src/views/reception/list1/index.vue

@@ -17,7 +17,7 @@
                 variant="text"
                 style="height: 36px; margin-right: 40px"
               ></el-skeleton-item>
-              <div class="list__item--btn">预览</div>
+              <div class="list__item--btn">文件预览</div>
             </div>
           </div>
         </template>
@@ -36,12 +36,13 @@
                 <div class="list__item--date">
                   {{ $moment(new Date(i.created_at)).format("YYYY-MM-DD") }}
                 </div>
+                <div class="list__item--btn" @click="toDetail(i)">查看</div>
                 <el-dropdown
                   trigger="click"
                   placement="bottom-start"
                   @command="open"
                 >
-                  <div class="list__item--btn" @click="getDetail(i)">预览</div>
+                  <div class="list__item--btn" @click="getDetail(i)">文件预览</div>
                   <template #dropdown>
                     <el-dropdown-menu v-if="load">
                       <div
@@ -184,6 +185,13 @@ export default {
     };
   },
   methods: {
+    toDetail (i) {
+      let url = this.$router.resolve({
+        path: `/index/detail/${i.id}`
+      })
+     window.open(url.href, '_blank')
+    },
+
     typeSelect({ value }) {
       let leixing = this.$store.state.reception.select.leixing
         ? this.$store.state.reception.select.leixing.split(",")
@@ -221,6 +229,9 @@ export default {
       });
       this.uploadsList =
         res.detail?.id_material_fujian_uploads_material_id_relation || [];
+      if (this.uploadsList.length === 1) {
+        this.open(this.uploadsList[0])
+      }
       this.load = false;
     },
 
@@ -437,7 +448,7 @@ export default {
       font-size: 13px;
       color: #999999;
 
-      margin-right: 42px;
+      margin-right: 10px;
     }
     &--btn {
       cursor: pointer;
@@ -448,7 +459,7 @@ export default {
       transition: all 0.2s;
 
       padding: 7px 17px;
-      margin-right: 23px;
+      margin-right: 10px;
 
       &:hover {
         color: #fff;
@@ -462,7 +473,7 @@ export default {
         color: #247ec3;
 
       }
-
+      margin-left: 5px;
       padding-right: 9px;
     }
   }