2023-7-10

src/views/reception/home/index.vue

@@ -17,8 +17,33 @@
             </template>
             <template>
               <ul class="news__list">
-                <li class="news__list--item" v-for="i in details.hot" @click="toList({ sort_name: 'dianjiliang' })">
-                  <div>{{ i.biaoti }}</div>
+                <li class="news__list--item" v-for="i in details.hot">
+                  <el-dropdown trigger="click" placement="bottom-start">
+                    <div @click="getDetail(i)">{{ i.biaoti }}</div>
+                    <template #dropdown>
+                      <el-dropdown-menu v-if="load">
+                        <div style="width: 100px;position: relative;height: 60px;">
+                          <Spin fix></Spin>
+                        </div>
+                      </el-dropdown-menu>
+                      <el-dropdown-menu v-else>
+                        <template v-if="uploadsList.length > 0">
+                          <el-dropdown-item :command="item" v-for="item in uploadsList">
+                            <div style="display: flex;align-items: center;">
+                              <p style="flex: 1;">{{ item.name }}</p>
+                              <div class="list__item--btn" @click="open(item)">预览</div>
+                              <i class="el-icon-download"  @click="down(item)"></i>
+                            </div>
+                          </el-dropdown-item>
+                        </template>
+                        <template v-else>
+                          <el-dropdown-item disabled>
+                            暂无内容
+                          </el-dropdown-item>
+                        </template>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
                   <div>{{ $moment(new Date(i.created_at)).format("YYYY-MM-DD") }}</div>
                 </li>
               </ul>
@@ -43,8 +68,33 @@
             </template>
             <template>
               <ul class="news__list">
-                <li class="news__list--item" v-for="i in details.last" @click="toList({ sort_name: 'created_at' })">
-                  <div>{{ i.biaoti }}</div>
+                <li class="news__list--item" v-for="i in details.last">
+                  <el-dropdown trigger="click" placement="bottom-start">
+                    <div @click="getDetail(i)">{{ i.biaoti }}</div>
+                    <template #dropdown>
+                      <el-dropdown-menu v-if="load">
+                        <div style="width: 100px;position: relative;height: 60px;">
+                          <Spin fix></Spin>
+                        </div>
+                      </el-dropdown-menu>
+                      <el-dropdown-menu v-else>
+                        <template v-if="uploadsList.length > 0">
+                          <el-dropdown-item :command="item" v-for="item in uploadsList">
+                            <div style="display: flex;align-items: center;">
+                              <p style="flex: 1;">{{ item.name }}</p>
+                              <div class="list__item--btn" @click="open(item)">预览</div>
+                              <i class="el-icon-download"  @click="down(item)"></i>
+                            </div>
+                          </el-dropdown-item>
+                        </template>
+                        <template v-else>
+                          <el-dropdown-item disabled>
+                            暂无内容
+                          </el-dropdown-item>
+                        </template>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
                   <div>{{ $moment(new Date(i.created_at)).format("YYYY-MM-DD") }}</div>
                 </li>
               </ul>
@@ -157,11 +207,14 @@
 </template>
 
 <script>
-import { home, tags, departments } from '@/api/reception';
+import { download } from '@/utils/downloadRequest'
+import {home, tags, departments, detail} from '@/api/reception';
 
 export default {
   data() {
     return {
+      load: false,
+      uploadsList: [],
       loading: false,
       departments: [],
       labels: [
@@ -182,6 +235,23 @@ export default {
     };
   },
   methods: {
+    open (e) {
+      window.open(e.url)
+    },
+    down (e) {
+      download (e.url, 'get', {}, e.name)
+    },
+
+    async getDetail (i) {
+      this.load = true
+      const res = await detail({
+        table_name: 'materials',
+        id: i.id
+      })
+      this.uploadsList = res.detail?.id_material_fujian_uploads_material_id_relation || []
+      this.load = false
+    },
+
     async getInfo () {
       this.loading = true;
       this.details = await home();
@@ -289,7 +359,7 @@ export default {
   &__list {
     padding: 34px 0 0 26px;
 
-    &--item {
+      &--item {
       list-style: none;
       display: flex;
       align-items: center;
@@ -519,7 +589,26 @@ export default {
     }
   }
 }
-
+.list__item--btn {
+  cursor: pointer;
+  font-size: 13px;
+  color: #247EC3;
+  border-radius: 30px;
+  border: 1px solid #247EC3;
+  line-height: 20px;
+  transition: all .2s;
+
+  padding: 5px 17px;
+  margin: 0 20px;
+  &:hover {
+    color: #fff;
+    background: #247EC3;
+  }
+}
+::v-deep .el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
+  background: none!important;
+  color: #247EC3!important;
+}
 @media screen and (max-width: 900px) {
   .label-item > p {
     font-size: 12px;