winhc-demension-vue3/src/components/CommonList.vue

<template>
  <div class="common-list">
    <div class="fixed-num">共
      <span>{{store.totalNum || store.dataList.length}}</span>
      条{{store.deleted ? '历史' : ''}}{{store.selectDemension.title}}</div>
    <van-list v-if="store.dataList.length" v-model:loading="loading"
              :finished="finished" :immediate-check="false"
              finished-text="没有更多了"
              @load="onLoad">
      <div v-for="(item,index) in store.dataList" :key="index" class="card" @click="goDetail(item)">
        <div class="list-container">
          <!-- <div v-for="obj in store.selectDemension.viewList" :key="obj.value" class="item" :class="store.selectDemension.viewList?.find(listItem => listItem.valueType === 'logo') || obj.valueType === 'avatar' ? 'has-logo' : ''"> -->
          <div v-for="obj in store.selectDemension.viewList" :key="obj.value" class="item" :class="paddingItemCom()">


            <!-- 标题 -->
            <p v-if="obj.name" class="name">{{obj.name}}：</p>


            <div :class="obj.valueType === 'tag' ? 'tag' : ''">

              <div v-if="obj.valueType === 'avatar' && obj.companyId" class="logo">
                <Avatar :name="item[obj.value]" :companyId="item[obj.companyId]" />
              </div>



              <img v-else-if="obj.valueType === 'logo'" :src="obj.solt ? obj.solt(item) : item[obj.value]" alt="" class="logo">
              <div v-else-if="obj.valueType === 'related' && obj.companyId" class="related" @click="$goCompany(item[obj.companyName!],item[obj.companyId!])">
                {{item[obj.companyId]['length'] === 32 ? "投资" : "关联"}}{{ item[obj.value] }}家企业 >
              </div>



              <!-- <div v-else-if="obj.valueType === 'tag'" >{{item[obj.value]}}</div> -->

              <!-- 时间数据-->
              <p v-else-if="obj.valueType === 'date'">{{item[obj.value] ? dayjs(item[obj.value]).format('YYYY-MM-DD') : '-'}}</p>

              <!-- 多个数据 -->
              <div v-else-if="obj.listVal">

                <!-- 多个数据里面数组有数据 -->
                <div v-if="Array.isArray(item[obj.listVal]) && item[obj.listVal][0]">
                  <div v-for="(listItem,listIndex) in (obj.listVal?item[obj.listVal]:[])"
                       :key="listIndex" href="javascript:"
                       class="block"
                       style="width: fit-content;"
                       :class="obj.companyId && listItem[obj.companyId] ? 'company' : ''"
                       @click.stop="goCompany(obj,listItem)">
                    <p v-if="obj.solt" v-html="listItem[obj.value] ? obj.solt(listItem) : '-'"></p>
                    <p v-else>{{listItem[obj.value || '-']}}</p>
                  </div>
                </div>
                <!-- 空数组 -->
                <p v-else>-</p>
              </div>

              <div v-else-if="obj.solt" @click="obj.customClick!(item)" v-html="item[obj.value] ? obj.solt(item) : '-'"></div>

              <p v-else :class="[obj.valueType === 'title' ? 'title' : '', obj.companyId && item[obj.companyId] ? 'company' : '']"
                 @click.stop="goCompany(obj,item)">
                {{item[obj.value] || '-'}}{{ item[obj.value] && obj.valueType === 'w' ? '万元' : ''}}
              </p>
            </div>




          </div>
        </div>
        <van-icon v-if="store.selectDemension.detailList || store.selectDemension.detailCustomRender" name="arrow" color="#969696" class="arrow" />
      </div>
    </van-list>
    <van-empty v-if="!store.dataList.length && store.totalNum === 0" image-size="2.2rem" :image="emptyImg" description="暂无数据" />
  </div>
</template>

<script lang="ts" setup>
  import { ViewListInter } from '@/js-pages/types'
  import { useDemensionListStore } from '@/store/demensionList'
  import { $goCompany } from '@/utils/utils'
  import emptyImg from '@/assets/img/custom-empty-image.png'
  import dayjs from 'dayjs'
  import { computed, onMounted, ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import Avatar from './Global/Avatar.vue'
  const router = useRouter()
  const store = useDemensionListStore()
  const loading = ref(false)
  const finished = ref(false)

  onMounted(() => {
    finished.value = false
  })

  const onLoad = () => {
    if (store.totalPage > store.pageNum) {
      loading.value = true
      store.pageNum++
      store.getList()
      setTimeout(() => {
        loading.value = false
      }, 200)
    }else{
      loading.value = false
      finished.value = true
    }
  }

  const goCompany = (item: ViewListInter, dataItem: any) => {
    if (item.companyId && dataItem[item.value] && dataItem[item.companyId]) {
      $goCompany( dataItem[item.value],dataItem[item.companyId])
    }
  }

  const paddingItemCom = computed(() => {
    return () => {
      let className = ''
      const hasLogoOrAvatar = store.selectDemension.viewList?.find(listItem => {
        return listItem.valueType === 'logo' || listItem.valueType === 'avatar'
      })
      const hasRelated = store.selectDemension.viewList?.find(listItem => listItem.valueType === 'related')
      if(hasLogoOrAvatar) {
        className = className + 'has-logo '
      }
      if(hasRelated) {
        className = className + 'has-related '
      }
      return className
    }
  })

  const goDetail = (item:{id:string,companyName:string}) => {
    if(store.selectDemension.detailList || store.selectDemension.detailCustomRender) {
      let customParams:{} | undefined = {}

      //额外参数处理
      if(store.selectDemension.detailRouteParams) {
        store.selectDemension.detailRouteParams.map(paramsItem => {
          // @ts-ignore
          customParams = Object.assign({[paramsItem]:item[paramsItem]},customParams)
        })
      }else{
        customParams = undefined
      }


      router.push({
        path: store.selectDemension.routing + 'Det',
        query:{
          id:item.id,
          companyName:item.companyName,
          detailType:store.selectDemension.detailType || undefined,
          ...customParams
        }
      })
      console.log(`跳转详情：${item.id}`)
    }
  }

  watch(() => store.dataList.length,(newVal) => {
    if(!newVal) {
      finished.value = false
    }
  })

</script>

<style lang="scss" scoped>

.card{
  width: 100%;
  background: #fff;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  position: relative;
  .list-container{
    width: inherit;

    .avatar{
      position: absolute;
    }
    .item{
      display: flex;
      .logo{
        width: 56px;
        // border: 1px solid #eee;
      }
      .tag{
        color: #42a7ff;
        background: #d9eaff;
        line-height: 20px;
        height: 20px;
        padding: 0 4px;
        border-radius: 2px;
        position: absolute;
        right: 30px;
        top: 20px;
        div{
          font-size: 13px;
          line-height: 22px;
          // line-height: 20px;
          // height: 20px;
        }
      }

      .related{
        color: #ff722d;
        position: absolute;
        right: 15px;
        top: 20px;
        bottom: 0;
        font-size: 13px;
        // margin: auto 0;
        height: fit-content;
      }
      :deep().source-pdf{
        display: flex;
        align-items: center;
        span{
          color: #088BFE;
        }
        img{
          width: 16px;
          padding-left: 6px;
        }
      }

      // align-items: center;
      .title{
        font-weight: bold;
        color: #000;
        font-size: 15px;
        padding: 4px 0;
      }
      .name{
        line-height: 24px;
        color: #969696;
        font-size: 15px;
        width: max-content;
        flex-shrink: 0;
      }
      a{
        color: #088BFE;
        font-size: 15px;
      }
      .company{
        color: #088BFE;
      }
    }
    .has-logo{
      padding-left: 68px;
      .logo{
        position: absolute;
        left: 14px;
      }
    }
    .has-related{
      width: 240px;
    }
    p,a,div{
      font-size: 15px;
    }
    .arrow{
      // align-items: center;
      // display: flex;
    }

  }

}
.common-list{
  .fixed-num{
    padding: 8px 15px;
    line-height: 20px;
    span{
      color: #EB5953 ;
    }
  }
}
</style>