yb11.1

src/api/report.js

@@ -222,4 +222,11 @@ export const apiRddpShareImg=params=>{
  */
 export const apiReportPPtImgs=params=>{
     return get('/report/ppt_img',params)
+}
+
+/**
+ * 大宗商品中用户已绑定的品种权限（不包含宏观权限）
+ */
+export const apiGoodsPermissionList=()=>{
+    return get('/company/permission/commodities',{})
 }

src/router/index.js

@@ -172,6 +172,17 @@ const routes=[
           hasBack:true
         },
       },
+      {
+        path: "varietyreportlist",
+        name: "VarietyReportList",
+        component: () => import("@/views/report/varietyAuth/ReportList.vue"),
+        meta: {
+          title: "报告列表",
+          keepAlive:true,
+          isRoot:false,
+          hasBack:true
+        },
+      },
     ]
   },
   {

src/views/report/Classify.vue

@@ -28,7 +28,7 @@ getClassifyList()
 
 // 跳转下一级
 const goNext=(item)=>{
-    // redirect_type : 跳转页面类型：1专栏列表，2报告列表，3专栏详情
+    // redirect_type : 跳转页面类型：1专栏列表，2报告列表，3专栏详情，4品种类型列表
     if(item.redirect_type===1){
         router.push({
             path:'/report/specialcolumnlist',
@@ -55,7 +55,15 @@ const goNext=(item)=>{
             }
         })
     }
-
+    if(item.redirect_type===4){
+        router.push({
+            path:'/report/varietyreportlist',
+            query:{
+                columnId:item.classify_id_first,
+                classifyName:item.classify_name_first
+            }
+        })
+    }
 
 }
 

src/views/report/varietyAuth/ReportList.vue

@@ -0,0 +1,156 @@
+<script setup>
+import {apiGoodsPermissionList} from '@/api/report'
+import { reactive } from 'vue-demi'
+
+// 获取用户已绑定品种
+let permissionList=reactive({
+    list:[],
+    firstPerId:0,
+    secList:[],
+    secPerId:0,
+})
+const getPermissionList=async ()=>{
+    const res=await apiGoodsPermissionList()
+    if(res.code===200){
+        permissionList.list=res.data.permission_list
+        handleSelectFirstVariety(res.data.permission_list[0])
+    }
+}
+getPermissionList()
+// 选择一级品种
+const handleSelectFirstVariety=(item)=>{
+    permissionList.firstPerId=item.id 
+    permissionList.secList=item.list
+    handleSelectSecVariety(item.list[0])
+}
+//选择二级品种
+const handleSelectSecVariety=(item)=>{
+    permissionList.secPerId=item.chart_permission_id
+}
+</script>
+
+<template>
+    <div class="variety-report-list-page">
+        <div class="top-nav-warp">
+            <div class="flex first-nav-box">
+                <span 
+                    :class="['item',item.id===permissionList.firstPerId?'active':'']" 
+                    v-for="item in permissionList.list" 
+                    :key="item.id"
+                    @click="handleSelectFirstVariety(item)"
+                >{{item.classify_name}}</span>
+            </div>
+            <div class="sec-nav-box">
+                <span 
+                    :class="['item',item.chart_permission_id===permissionList.secPerId?'active':'']"
+                    v-for="item in permissionList.secList.slice(0,6)" 
+                    :key="item.chart_permission_id"
+                    @click="handleSelectSecVariety(item)"
+                >{{item.chart_permission_name}}</span>
+                <el-popover
+                    :width="500"
+                    trigger="click"
+                >
+                    <template #reference>
+                        <img v-if="permissionList.secList.length>6" style="width:16px;transform: rotate(90deg);cursor: pointer" src="@/assets/icon-more.png" alt="">
+                    </template>
+                    <template #default>
+                        <div class="flex top-nav-filter-box">
+                        <div 
+                            :class="['item',item.chart_permission_id == permissionList.secPerId&&'active']" 
+                            v-for="item in permissionList.secList.slice(6)" 
+                            :key="item.chart_permission_id"
+                            @click="handleSelectSecVariety(item)"
+                        >{{item.chart_permission_name}}</div>
+                        </div>
+                    </template>
+                </el-popover>
+            </div>
+        </div>
+        <div style="height:1000px"></div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.top-nav-filter-box{
+    flex-wrap: wrap;
+    .item{
+        margin: 5px 10px;
+        width: 113px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f6f6f6;
+        border-radius: 4px;
+        font-size: 16px;
+        cursor: pointer;
+        :hover{
+            color: #fff;
+            background-color: #F3A52F;
+        }
+    }
+    .active{
+        color: #fff;
+        background-color: #F3A52F;
+    }
+}
+
+.variety-report-list-page{
+    .top-nav-warp{
+        position: sticky;
+        top: 60px;
+        background: #FFFFFF;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
+        padding: 30px 30px 12px 30px;
+        .first-nav-box{
+            .item{
+                width: 140px;
+                height: 40px;
+                flex-shrink: 0;
+                background: #F6F6F6;
+                border-radius: 20px;
+                text-align: center;
+                line-height: 40px;
+                font-size: 16px;
+                margin-right: 30px;
+                cursor: pointer;
+                &:hover {
+                    background: #FFFBF5;
+                    color: #F3A52F;
+                    border: 1px solid #F3A52F;
+                    box-shadow: 0px 6px 7px 1px #FFF7EB;
+                }
+            }
+            .active {
+                background: #FFFBF5;
+                color: #F3A52F;
+                border: 1px solid #F3A52F;
+                box-shadow: 0px 6px 7px 1px #FFF7EB;
+            }
+            @media screen and (max-width: 1350px){
+                .item{
+                    width: 90px;
+                    height: 30px;
+                    line-height: 30px;
+                    margin-right: 15px;
+                    font-size: 14px;
+                }
+            }
+        }
+        .sec-nav-box{
+            margin-top: 30px;
+            .item{
+                flex-shrink: 0;
+                margin-right: 30px;
+                font-size: 16px;
+                color: #666666;
+                cursor: pointer;
+            }
+            .active{
+                color: #F3A52F;
+            }
+        }
+    }
+}
+</style>