report_viewer/src/ui/CFLXG0V4B/components/CaseDetail.vue

<template>
  <div class="px-4 pb-4">
    <div class="grid grid-cols-[max-content_1fr] gap-x-2 gap-y-3">
      <!-- 经办法院/执行法院 -->
      <span class="text-base text-[#666666]">{{ isSpecialCase ? '执行法院' : '经办法院' }}：</span>
      <span class="text-base font-medium text-[#333333]">{{ caseData.n_jbfy || caseData.zxfy || "—" }}</span>

      <!-- 所属地域 -->
      <span class="text-base text-[#666666]">所属地域：</span>
      <span class="text-base font-medium text-[#333333]">{{ caseData.c_ssdy || caseData.sf || "—" }}</span>

      <!-- 案件类型 -->
      <template v-if="caseData.n_ajlx">
        <span class="text-base text-[#666666]">案件类型：</span>
        <span class="text-base font-medium text-[#333333]">{{ caseData.n_ajlx || "—" }}</span>
      </template>

      <!-- 立案时间 -->
      <template v-if="caseData.d_larq || caseData.larq">
        <span class="text-base text-[#666666]">立案时间：</span>
        <span class="text-base font-medium text-[#333333]">{{ formatDate(caseData.d_larq || caseData.larq) }}</span>
      </template>

      <!-- 立案案由 -->
      <template v-if="caseData.n_laay_tree || caseData.n_laay">
        <span class="text-base text-[#666666]">立案案由：</span>
        <span class="text-base font-medium text-[#333333]">{{ caseData.n_laay_tree || caseData.n_laay || "暂无" }}</span>
      </template>

      <!-- 当事人信息 -->
      <template v-if="caseData.c_dsrxx && caseData.c_dsrxx.length > 0">
        <span class="text-base text-[#666666]">当事人信息：</span>
        <span class="text-base font-medium text-[#333333]">
          <span v-for="(party, partyIndex) in caseData.c_dsrxx" :key="partyIndex">
            {{ party.n_ssdw || "其他" }}: {{ party.c_mc }}<span v-if="partyIndex < caseData.c_dsrxx.length - 1">; </span>
          </span>
        </span>
      </template>

      <!-- 特殊案件类型特有字段 -->
      <template v-if="isSpecialCase">
        <!-- 企业法人 -->
        <template v-if="caseData.qyfr">
          <span class="text-base text-[#666666]">企业法人：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.qyfr || "—" }}</span>
        </template>

        <!-- 组织机构代码 -->
        <template v-if="caseData.zzjgdm">
          <span class="text-base text-[#666666]">组织机构代码：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.zzjgdm || "—" }}</span>
        </template>

        <!-- 执行依据文号 -->
        <template v-if="caseData.zxyjwh">
          <span class="text-base text-[#666666]">执行依据文号：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.zxyjwh || "—" }}</span>
        </template>

        <!-- 执行依据单位 -->
        <template v-if="caseData.zxyjdw">
          <span class="text-base text-[#666666]">执行依据单位：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.zxyjdw || "—" }}</span>
        </template>

        <!-- 义务内容 -->
        <template v-if="caseData.yw">
          <span class="text-base text-[#666666]">义务内容：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.yw || "—" }}</span>
        </template>

        <!-- 履行情况 -->
        <template v-if="caseData.lxqk">
          <span class="text-base text-[#666666]">履行情况：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.lxqk || "—" }}</span>
        </template>

        <!-- 行为情形 -->
        <template v-if="caseData.xwqx">
          <span class="text-base text-[#666666]">行为情形：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.xwqx || "—" }}</span>
        </template>

        <!-- 金额估计 -->
        <template v-if="caseData.pjje_gj">
          <span class="text-base text-[#666666]">金额估计：</span>
          <span class="text-base font-medium text-[#333333]">{{ formatLawsuitMoney(caseData.pjje_gj) || "—" }}</span>
        </template>
      </template>

      <!-- 已结案信息 -->
      <template v-if="caseData.n_ajjzjd && caseData.n_ajjzjd.includes('已结') && !isSpecialCase">
        <!-- 结案方式 -->
        <template v-if="caseData.n_jafs">
          <span class="text-base text-[#666666]">结案方式：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.n_jafs || "暂无" }}</span>
        </template>

        <!-- 结案时间 -->
        <template v-if="caseData.d_jarq">
          <span class="text-base text-[#666666]">结案时间：</span>
          <span class="text-base font-medium text-[#333333]">{{ formatDate(caseData.d_jarq) }}</span>
        </template>

        <!-- 结案案由 -->
        <template v-if="caseData.n_jaay_tree">
          <span class="text-base text-[#666666]">结案案由：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.n_jaay_tree || "与立案案由相同" }}</span>
        </template>

        <!-- 相关当事人 -->
        <template v-if="caseData.c_gkws_dsr">
          <span class="text-base text-[#666666]">相关当事人：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.c_gkws_dsr || "暂无" }}</span>
        </template>

        <!-- 判决结果 -->
        <template v-if="caseData.c_gkws_pjjg">
          <span class="text-base text-[#666666]">判决结果：</span>
          <span class="text-base font-medium text-[#333333]">{{ caseData.c_gkws_pjjg || "暂无" }}</span>
        </template>
      </template>

      <!-- 后续案件信息 -->
      <template v-if="caseData.next">
        <span class="text-base text-[#666666]">后续案件：</span>
        <span class="text-base font-medium text-[#333333]">
          {{ caseData.next.c_ah }}
          <span v-if="caseData.next.stage_type" class="ml-2 text-xs px-2 py-0.5 rounded bg-[#EB3C3C1A] text-[#EB3C3C]">
            {{
              caseData.next.stage_type === 2
                ? "二审"
                : caseData.next.stage_type === 3
                  ? "再审"
                  : caseData.next.stage_type === 4
                    ? "申请再审"
                    : caseData.next.stage_type === 5
                      ? "执行"
                      : "其他"
            }}
          </span>
        </span>
      </template>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { formatDate, formatLawsuitMoney, getCaseStatusClass } from '../utils/lawsuitUtils.js'

const props = defineProps({
  caseData: {
    type: Object,
    required: true
  },
  typeColor: {
    type: String,
    default: 'text-blue-600 bg-blue-50'
  },
  caseType: {
    type: String,
    required: true
  }
})

// 判断是否为特殊案件类型（失信被执行人、限高被执行人）
const isSpecialCase = computed(() => {
  return props.caseType === 'sxbzxr' || props.caseType === 'xgbzxr'
})
</script>