winhc-demension-vue3/src/views/demension/detail.vue

<template>
  <div class="demension-detail">
    <van-row>
      <div v-for="(item,index) in store.selectDemension.detailList" :key="index" class="min-w-[calc(50%)]">
        <div class="demension-detail-item">
          <p>{{item.name}}</p>

          <!-- 时间 -->
          <span v-if="item.valueType === 'date'">{{store.info[item.value] ? dayjs(store.info[item.value]).format('YYYY-MM-DD') : '-'}}</span>


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

            <!-- 多个数据里面数组有数据 -->
            <div v-if="isArrayCom(item)">
              <span v-for="(listItem,listIndex) in JSON.parse(store.info[item.listVal])"
                    :key="listIndex" href="javascript:"
                    class="block"
                    :class="item.companyId && listItem[item.companyId] ? 'company' : ''"
                    @click.stop="$goCompany(item,listItem)">
                {{listItem[item.value] || '-'}}
              </span>
            </div>
            <!-- 空数组 -->
            <div v-else>
              <span>-</span>
            </div>
          </div>
          <span v-else>
            {{store.info[item.value] || '-'}}{{ store.info[item.value] && item.valueType === 'w' ? '万元' : ''}}
          </span>


        </div>
      </div>
    </van-row>
  </div>
</template>

<script lang="ts" setup>
  import {computed, onMounted} from 'vue'
  import { useRoute } from 'vue-router'
  import { $goCompany } from '@/utils/utils'
  import dayjs from 'dayjs'
  import {useDemensionDetailStore} from '@/store/demensionDetail'
  import { ViewListInter } from '@/js-pages/types'

  const route = useRoute()
  const store = useDemensionDetailStore()
  store.getDemension(route.params.routerName[0])


  const isArrayCom = computed(() => {
    return (item:ViewListInter) => {
      if(item.listVal && store.info[item.listVal]) {
        const arr = JSON.parse(store.info[item.listVal])
        if(Array.isArray(arr) && arr.length) {
          return true
        }
      }
      return false
    }
  })

  onMounted(() => {
    document.title = store.selectDemension.title
  })

</script>

<style lang="scss" scoped>
.demension-detail{
  padding: 15px 10px;
  .demension-detail-item{
    margin: 15px 0;
    p{
      color: #969696;
    }
    span{
      margin-top: 10px;
    }

  }
  .company{
        color: #088BFE;
      }
}

</style>