winhc-demension-vue3/src/components/detailComponent/GlSiFaCase.vue

<template>
  <div class="glSiFaCase">
    <van-row class="sifa-yhc-case-info">
      <van-collapse v-model="activeNames" @change="colChange">
        <van-collapse-item name="1"  :value='valueCol'>
          <template #title>
            <div class="sfTitle"><span>所属司法案件</span> <img src="@/assets/img/vip.png" alt=""></div>
          </template>
          <van-row class="four-info-item">
            <van-row class="case-item-title"><span v-if="siFaCaseData.caseEnd == 1" class="ja">[疑似结案]</span>{{siFaCaseData.title}}</van-row>
            <div class="case-lables">
              <span v-for="(item,index) in siFaCaseData.caseType" v-if="siFaCaseData.caseType && siFaCaseData.caseType.length > 0" :key="index + 100" class="itm">{{item}}</span>
              <span v-for="(item,index) in siFaCaseData.lable" v-if="siFaCaseData.lable && siFaCaseData.lable.length > 0" :key="index" class="itm oth">{{item}}</span>
            </div>
            <van-row class="case-info-block">
              <van-row class="case-info-block-left">
                <van-row class="left-item">
                  <span>案件类型：</span>
                  <span class="left-item-value">{{siFaCaseData.caseType && siFaCaseData.caseType.join(',')}}</span>
                </van-row>
                <van-row v-for="item in siFaCaseData.showPresonList" :key="item.title" class="left-item">
                  <span class="ybgTitle">{{item.title}}：</span>
                  <div style="display:flex;flex-direction:column;flex:1">
                    <span v-for="(e,index) in item.list" :key="index" :class="$isCompanyClass(e.litigant_id)" @click.stop='goFilterNewUnknowCompony(e)'>{{e.name}}</span>
                  </div>
                </van-row>
                <van-row class="left-item">
                  <span>案由：</span>
                  <span class="left-item-value">{{siFaCaseData.caseReason || '-'}}</span>
                </van-row>
                <van-row class="left-item">
                  <span>当前审理阶段：</span>
                  <span class="left-item-value">{{siFaCaseData.caseStage}}</span>
                </van-row>
                <van-row class="left-item">
                  <span>最新审理日期：</span>
                  <span class="left-item-value">{{siFaCaseData.lastDate && siFaCaseData.lastDate.substring(0,11)}}</span>
                </van-row>
              </van-row>
              <van-icon name="arrow" color="#BDBFC1" />
            </van-row>
          </van-row>
        </van-collapse-item>
      </van-collapse>
    </van-row>
  </div>
</template>

<script lang="ts" setup>
  import $axios from '@/api'
import { $goCompany,$isCompanyClass } from '@/utils/utils';
  import { onMounted, reactive, ref } from 'vue'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const props = defineProps(['rowKey','caseNo'])

  const activeNames = ref(['1'])
  const siFaCaseData = <any>ref({})
  const valueCol = ref('收起')

  onMounted(() => {
    getInfo()
  })

  const colChange = (e: string[])=> {
      if(e[0] == '1'){
          valueCol.value = '收起'
      }else{
          valueCol.value = '展开'
      }
  }

  const getInfo  = async () => {
    const params = {
      rowkey:props.rowKey || undefined,
      caseNo:props.rowKey ? undefined : props.caseNo,
      type:route.query.detailType
    }
    const res = await $axios.get('winhc-justice-service/justice/judicial/v8/info', { params }) as any

      let ybList = [...(res.ygName || []),...(res.bgName || [])];
       let showPresonList:any = [];
       ybList.forEach((item)=>{
           let showTitle = item.partyTitle;
           let hasIndex = 'none';
           showPresonList.forEach((pre: { title: any; },i: string)=>{
               if(pre.title === showTitle){
                   hasIndex = i
               }
           })
           let obj={
               litigant_id:item.litigantId,
               name: item.name,
           }
           if(hasIndex==='none'){
               showPresonList.push({
                   title:showTitle,
                   list:[obj]
               })
           } else {
               showPresonList[hasIndex].list.push(obj)
           }
       })
        res.showPresonList = showPresonList;
     if(res.caseType){
         res.caseType = res.caseType.split('，')
     }
    siFaCaseData.value = res


    console.log(res)

  }


  const goFilterNewUnknowCompony = (val: { name: string; litigant_id: string; })=>{
    $goCompany(val.name,val.litigant_id)
  }

</script>

<style lang='scss' scoped>
    .sfTitle{
        font-weight: bold;
       position: relative;
        line-height: 24px;
        height: 24px;
        display: flex;
        img{
            width: 24px;
            height: 12px;
            margin-left: 2px;
        }
    }
    .sifa-yhc-case-info {
  background: #fff;
  margin: 0.24rem 0rem;
  padding: 0 0.32rem;
  color: #919498;
  border-radius: 0;
}

.sifa-yhc-case-info :deep() .van-collapse-item__content {
  padding: 0;
}

.sifa-yhc-case-info :deep() .van-cell {
  padding: 10px 0px;
  font-weight: bold;
}
.sifa-yhc-case-info :deep() .van-collapse {
  width: 100%;
}

.sifa-yhc-case-info :deep() .van-cell:not(:last-child)::after {
  left: 0;
}

.sifa-yhc-case-info .four-info-item .case-item-title {
  color: #242A32;
  font-weight: bold;
  padding: 0.32rem 0 0.24rem;
  line-height: 0.4rem;
}

.sifa-yhc-case-info .four-info-item .case-item-title .ja {
  color: #2AAA00;
}

.sifa-yhc-case-info .four-info-item .case-lables {
  font-size: 0.2rem;
  font-weight: normal;
  margin-bottom: 0.2rem;
  margin-top: -0.16rem;
}

.sifa-yhc-case-info .four-info-item .case-lables .itm {
  color: #EC7D15;
  background: rgba(236, 125, 21, 0.1);
  display: inline-block;
  padding: 0.04rem 0.1rem;
  line-height: 0.28rem;
  margin-right: 0.2rem;
  font-size: 0.2rem;
  margin-top: 0.06rem;
}

.sifa-yhc-case-info .four-info-item .case-lables .itm.oth {
  color: #ED4033;
  background: rgba(237, 64, 51, 0.1);
}

.sifa-yhc-case-info .four-info-item .case-info-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sifa-yhc-case-info .four-info-item .case-info-block .case-info-block-left {
  flex: 1;
}

.sifa-yhc-case-info .four-info-item .case-info-block .case-info-block-left .left-item {
  padding-bottom: 0.24rem;
  display: flex;
}

.sifa-yhc-case-info .four-info-item .case-info-block .case-info-block-left .left-item .ybgTitle {
  max-width: 2.8rem;
  padding-right: 4px;
}

.sifa-yhc-case-info .four-info-item .case-info-block .case-info-block-left .left-item .left-item-name {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sifa-yhc-case-info .four-info-item .case-info-block .case-info-block-left .left-item .left-item-name .left-item-value {
  flex: 1;
  width: fit-content;
}
</style>