eta_mobile_front/src/views/sheetList/sharedList.vue

<script setup name="SheetETAList">
import apiSheet from '@/api/sheet'
import {ref,reactive,watch,computed} from 'vue'
import { useRouter } from "vue-router";
import useLocaleStore from "@/store/modules/i18n";
import CatalogTree from './components/CatalogTree.vue';
import CatalogItem from './components/CatalogItem.vue';
import { useNoAuth } from '@/hooks/useNoAuth'
import { showToast } from "vant";
//激活的目录路径
const catalogMenu = ref('')
const router = useRouter()
//表格列表
const listState = reactive({
    cid:0,
    list:[],
    page:1,
    pageSize:15,
    finished:false,
    loading:false,
    total:0,
    IsShowMe:false
})
//是否展示目录列表
const IsShowCatalog = ref(false)
const localeStore = useLocaleStore()
const temp = localeStore.locale === 'zhCn' ? 'zhCn' : 'en'; //根据当前i18n语言设置表格默认语言
localeStore.SET_LOCALE(temp)

watch(()=>listState.IsShowMe,()=>{
    window.scrollTo({top:0})
    listState.list=[]
    listState.page=1
    //设置数据已加载完毕，因为当滚动条不在顶部时，清空列表内容会触发onLoad
    listState.finished = true 
    //这个函数调用完成后，会把finished重置成正确的值
    getSheetList()
})

getSheetList()
//获取表格列表
async function getSheetList(){
    const {pageSize,cid,page,IsShowMe} = listState
    const res = await apiSheet.sheetList({
        PageSize: pageSize,
        CurrentIndex: page,
        Source: 1,
        ExcelClassifyId: cid,
        IsShowMe,
    })
    if(res.Ret!==200) return 
    const arr = res.Data?res.Data.List:[]
    listState.list = [...listState.list,...arr]
    listState.total = res.Data?res.Data.Paging.Totals:0
    listState.finished = res.Data?res.Data.Paging.IsEnd:true
    listState.loading=false
}

//目录被点击 type:['top'一级目录,'node'二级目录,'item'三级目录]
function catalogItemClick({item,type='node',parent={}}){
    console.log(item);
    console.log(type);
    console.log(parent);
    
    const topMenu = type==='top'?item.ExcelClassifyName:type==='node'?item.parentName:parent.parentName
    const nodeMenu = type==='node'?item.ExcelClassifyName:type==='item'?parent.ExcelClassifyName:''
    const itemMenu = type==='item'?item.ExcelClassifyName:''

    catalogMenu.value = `${topMenu}${nodeMenu.length?`/${nodeMenu}`:''}${itemMenu.length?`/${itemMenu}`:''}`
    console.log();
    
    listState.cid = item.ExcelClassifyId
    listState.list=[]
    listState.page=1
    getSheetList()
}

//展示目录列表
function showCatalog(){
    IsShowCatalog.value = true
}

//下拉加载
function onLoad(){
    if(IsShowCatalog.value) return
    listState.page++
    getSheetList()
}

//展开的目录
const activeCatalogs = ref([])

//目录列表
const catalogNodes = ref([])
const dataNodes = ref([])
getCatalogList()
//获取目录列表
async function getCatalogList(){
    const {IsShowMe} = listState
    const res = await apiSheet.excelClassifyList({
        Source: 1,
        IsShowMe: IsShowMe
    })
    if(res.Ret!==200) return 
    console.log(res);
    dataNodes.value = res.Data?res.Data.AllNodes:[]||[]
    catalogNodes.value = dataNodes.value.map(node=>{
        if(node.Children){
            node.Children = node.Children.map(child=>{
                child.parentName = node.ExcelClassifyName //添加子分类时需要显示父级分类名称
                if(child.Children){//改成三级目录了
                    child.Children = child.Children.map(_child=>{
                        _child.parentName = child.ExcelClassifyName
                        return _child
                    })
                }
                return child
            })
        }
        return node
    })
}

function showFileOpt(item){
    console.log(item);
}
//跳转至详情页
const goSheetDetail = (item)=>{
    if(!item.HaveOperaAuth) return showToast(useNoAuth().sheet)
    router.push({
        path:'/shared/detail',
        query:{
            id:item.ExcelInfoId,
            Source:item.Source,
        }
    })
}

function goSheetSearch(){
    router.push({
        path:'/shared/search',
        query:{
            Source: 1,
        }
    })
}
</script>

<template>
  <div class="excel-eta-list-wrap">
    <div class="select-wrap">
      <div class="search-box">
        <van-search 
          shape="round" 
          readonly 
          :placeholder="$t('shared_table.enter_table_name')"
          style="flex:1;padding-left:0"
          @click-input="goSheetSearch"
        />
        <div class="list-icon icon" @click="showCatalog">
          <img src="@/assets/imgs/chartETA/list-icon.png" alt="">
        </div>
      </div>
      <p style="font-weight: bold;word-break: break-all;margin-bottom: 5px;">{{ catalogMenu }}</p>
      <div class="select-box">
        <span>{{ $t('shared_table.tables_total', {totalNum: listState.total}) }}</span>
        <span> <van-checkbox v-model="listState.IsShowMe">{{ $t('shared_table.just_look_mine') }}</van-checkbox></span>
      </div>
    </div>
    <div class="excel-list-wrap">
      <van-list
          v-model:loading="listState.loading"
          :finished="listState.finished"
          :finished-text="listState.list.length > 0 ? $t('shared_table.no_more') : $t('shared_table.no_table')"
          :immediate-check="false"
          @load="onLoad"
      >
          <img v-if="listState.list.length==0&&listState.finished" class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
          <ul class="excel-list">
              <li 
                  class="excel-list-item" 
                  v-for="item in listState.list" 
                  :key="item.ChartInfoId"
                  @click="goSheetDetail(item)"
              >
                  <div class="title">{{item.ExcelName}}</div>
                  <img class="img" :src="!item.HaveOperaAuth?useNoAuth().noAuthImg:item.ExcelImage" alt="">
                  <div class="time">
                      <span>{{item.CreateTime.slice(0,10)}}</span>
                  </div>
              </li>
          </ul>
      </van-list>
    </div>
     <!-- 目录列表 -->
     <van-popup v-model:show="IsShowCatalog" position="right" class="catalog-list-wrap" style="height:100%">
        <div class="catalog-list">
            <div class="top sticky-part">
                <h3>{{ $t('shared_table.choose_category') }}</h3>
                <van-icon name="cross" @click.stop="IsShowCatalog=false"/>
            </div>
            <!-- 将目录改为三级 -->
            <div class="list-box catalog-tree-wrap">
                <van-collapse v-model="activeCatalogs" :border="false">
                    <van-collapse-item 
                        v-for="catalog in catalogNodes" :key="catalog.UniqueCode" :name="catalog.UniqueCode"
                        @click.stop="catalogItemClick({item:catalog,type:'top'})">
                        <template #title>
                            <CatalogItem
                                :node="catalog" 
                                @showPopup="showFileOpt"/>
                        </template>
                        <CatalogTree 
                            :catalog-nodes="catalog.Children"
                            :showFileOpt="showFileOpt"
                            :activeId="listState.cid"
                            @handleCatalogItemClick="catalogItemClick"
                        />
                    </van-collapse-item>
                </van-collapse>
            </div>
        </div>
    </van-popup>
  </div>
</template>
<style lang="scss">
.excel-eta-list-wrap{
    .catalog-list-wrap{
        width: 65%;
    }
    .rename-wrap{
        padding:48px;
        input{
            padding: 24px 32px;
            border-radius: 12px;
            background-color: #F6F6F6;
            width: 100%;
        }
        .label{
            color: #666666;
            margin-bottom: 32px;
            text-align: center;
        }
    }
    @media screen and (min-width:$media-width){
        .catalog-list-wrap{
            width: 30%;
        }
        .move-popup{
            width:375px;
        }
        .rename-wrap{
            padding:24px;
            input{
                padding: 12px 16px;
                border-radius: 6px;
                background-color: #F6F6F6;
                width: 100%;
            }
            .label{
                margin-bottom: 16px;
            }
        }
    }
}
</style>
<style scoped lang="scss">
.excel-eta-list-wrap{
  .select-wrap{
      padding: 0 30px 30px 30px;
      position: sticky;
      top:0;
      background-color: #fff;
      .search-box{
          display: flex;
          align-items: center;
          .icon{
              margin-left: 10px;
              width: 70px;
              height:70px;
              background-color: #F2F3FF;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              img{
                  width:45px;
                  height:45px;
              }
          }
      }
      .select-box{
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
      }
  }
  .excel-list-wrap{
      //margin-top:15px;
      padding: 0 30px; 
      padding-bottom: 30px;
      .excel-list{
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 30px 0;
          .excel-list-item{
              box-sizing: border-box;
              width: 330px;
              padding: 10px 14px;
              border: 1px solid $border-color;
              border-radius: 12px;
              .title{
                  min-height: 70px;
                  overflow: hidden;
                  -webkit-line-clamp: 2;
                  text-overflow: ellipsis;
                  display:-webkit-box !important;
                  -webkit-box-orient:vertical;
                  word-break: break-word;
              }
              .img{
                      width: 100%;
                      height: 220px;
                      display: block;
                      margin: 10px 0;
                  }
              .time{
                  display: flex;
                  justify-content: space-between;
                  font-size: 28px;
                  color: $font-grey_999;
                  .tool-icon{
                      width:30px;
                      text-align: right;
                      img{
                          width:5px;
                      }
                  }
              }
              
          }
      }
  }
  .catalog-list{
        box-sizing: border-box;
        height: 100%;
        .sticky-part{
            position:sticky;
            background-color: white;
            z-index: 99;
            left:0;
            right:0;
        }
        .top{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #DCDFE6;
            padding: 0 15px;
            align-items: center;
            top:0;
        }
        .bottom{
            display: flex;
            padding:48px;
            bottom:0;
            span{
                flex: 1;
                background-color: #0052D9;
                color: white;
                text-align: center;
                border-radius: 6px;
                padding:16px;
                box-sizing: border-box;
            }
        }
    }
  @media screen and (min-width:$media-width){
    .select-wrap{
        // top:60px;
        padding:30px;
        .search-box{
            .icon{
                margin-left: 10px;
                width: 40px;
                height:40px;
                background-color: #F2F3FF;
                border-radius: 50%;
                img{
                    width:25px;
                    height:25px;
                }
            }
        }
        .select-box{
            margin-top:20px;
        }
    }
    .excel-list-wrap{
        padding:0 30px;
        .excel-list{
            gap: 20px 4%;
            justify-content:flex-start;
            .excel-list-item{
                box-sizing: border-box;
                width: 22%;
                padding: 10px 14px;
                border: 1px solid $border-color;
                border-radius: 6px;
                .title{
                    min-height: 36px;
                }
                .img{
                    width: 100%;
                    height: 120px;
                    display: block;
                    margin: 10px 0;
                }
                .time{
                    font-size: 14px;
                    .tool-icon>img{
                        width:3px;
                    }
                }
            }
        }
    }
    .catalog-list{
        .bottom{
            display: flex;
            padding:24px;
            bottom:0;
            span{
                flex: 1;
                background-color: #0052D9;
                color: white;
                text-align: center;
                border-radius: 6px;
                padding:8px;
                box-sizing: border-box;
            }
        }
    }
  }
}
</style>