EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/enforcement/registrationDetail.vue

<template>
    <div class="detail-page">
        <van-nav-bar :title="pageTitle" left-arrow @click-left="onClickLeft" />

        <div class="detail-content">
            <!-- 执法信息 -->
            <div class="info-card" v-if="hasLawDetail">
                <div class="card-title">执法信息</div>
                <div class="info-row">
                    <span class="info-label">执法单位</span>
                    <span class="info-value">{{ lawDetail.bureauDeptName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法人员</span>
                    <div class="info-value-block">
                        <div>{{ lawDetail.lawEnforcer }},{{ lawDetail.lawEnforcerId }}</div>
                        <div>{{ lawDetail.lawEnforcerTwo }},{{ lawDetail.lawEnforcerIdTwo }}</div>
                    </div>
                </div>
                <div class="info-row">
                    <span class="info-label">执法类别</span>
                    <span class="info-value">{{ lawDetail.lawEnforceCategoryText }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">任务来源</span>
                    <span class="info-value">{{ taskSourceText }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法事项</span>
                    <span class="info-value">{{ lawDetail.lawEnforcementItemText }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法时间</span>
                    <span class="info-value">{{ lawDetail.enforcementTime }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">受委托执法</span>
                    <span class="info-value">{{ lawDetail.hasAuto === '1' ? '是' : '否' }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">委托行政机关</span>
                    <span class="info-value">{{ lawDetail.entrustDeptName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">附件</span>
                    <div class="info-value attachment-list">
                        <img v-for="(f, idx) in attachmentList" :key="idx" :src="f.url" class="attachment-img"
                            @click="previewImage(idx)" />
                        <span v-if="!attachmentList.length">-</span>
                    </div>
                </div>
            </div>

            <!-- 行政检查案件信息 -->
            <div v-if="category === '1'" class="info-card">
                <div class="card-title">案件信息</div>
                <div class="info-row">
                    <span class="info-label">案件名称</span>
                    <span class="info-value">{{ caseDetail.caseName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政当事人类型</span>
                    <span class="info-value">{{ partyTypeText }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查决定书名称</span>
                    <span class="info-value">{{ caseDetail.decisionDocumentName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查决定书文号</span>
                    <span class="info-value">{{ caseDetail.decisionDocumentNumber }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查类型</span>
                    <span class="info-value">{{ caseDetail.administrativeCheckTypeName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">检查结果日期</span>
                    <span class="info-value">{{ caseDetail.decisionDate }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查内容</span>
                    <span class="info-value">{{ caseDetail.content }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查结果</span>
                    <span class="info-value">{{ administrativeCheckResultText }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查决定</span>
                    <span class="info-value">{{ caseDetail.administrativeCheckDecision }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法主体名称</span>
                    <span class="info-value">{{ caseDetail.lawEnforcementSubjectName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">备注</span>
                    <span class="info-value">{{ caseDetail.remark }}</span>
                </div>
            </div>

            <!-- 行政处罚/行政强制案件信息 -->
            <div v-else class="info-card">
                <div class="card-title">案件信息</div>
                <div class="info-row">
                    <span class="info-label">案件名称</span>
                    <span class="info-value">{{ caseDetail.caseName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政当事人类型</span>
                    <span class="info-value">{{ partyTypeText }}</span>
                </div>
                <div class="info-row" v-if="category === '4'">
                    <span class="info-label">行政强制类型</span>
                    <span class="info-value">{{ enforcementTypeText }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">决定文书名称</span>
                    <span class="info-value">{{ caseDetail.decisionDocumentName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">决定文书号</span>
                    <span class="info-value">{{ caseDetail.decisionDocumentNumber }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">{{ category === '2' ? '违法事实' : '行政强制措施理由' }}</span>
                    <span class="info-value">{{ category === '2' ? caseDetail.fact : caseDetail.enforcementReason }}</span>
                </div>

                <div class="info-row">
                    <span class="info-label">{{ category === '2' ? '处罚依据' : '行政强制措施依据' }}</span>
                    <span class="info-value">{{ category === '2' ? caseDetail.penaltyBasis : caseDetail.basis }}</span>
                </div>


                <div class="info-row" v-if="category === '4'">
                    <span class="info-label">强制所示内容</span>
                    <span class="info-value">{{ caseDetail.content }}</span>
                </div>

                <div class="info-row" v-if="category === '2'">
                    <span class="info-label">处罚类型</span>
                    <span class="info-value">{{ penaltyCategoryText }}</span>
                </div>
                <div class="info-row" v-if="category === '2'">
                    <span class="info-label">处罚内容</span>
                    <span class="info-value">{{ caseDetail.content }}</span>
                </div>
                <div class="info-row" v-if="category === '2'">
                    <span class="info-label">罚款金额(万元)</span>
                    <span class="info-value">{{ caseDetail.penaltyAmount }}</span>
                </div>
                <div class="info-row" v-if="category === '2'">
                    <span class="info-label">没收违法所得、没收非法财物的金额(万元)</span>
                    <span class="info-value">{{ caseDetail.collectionAmount }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">{{ category === '2' ? '处罚决定日期' : '强制措施决定日期' }}</span>
                    <span class="info-value">{{ caseDetail.decisionDate }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法主体名称</span>
                    <span class="info-value">{{ caseDetail.lawEnforcementSubjectName }}</span>
                </div>

                <div class="info-row">
                    <span class="info-label">备注</span>
                    <span class="info-value">{{ caseDetail.remark }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="registrationDetail">
import { getLawDetail, getLawCaseDetail } from '@/api/enterprise';
import { loadDict, getDictText } from '@/util/dictUtil';
import { fileUrl } from '@/config/env';
import { showToast, showImagePreview } from 'vant';
import 'vant/es/toast/style';
import 'vant/es/image-preview/style';

const router = useRouter();
const route = useRoute();

const id = route.query.id;
const lawEnforcementType = String(route.query.lawEnforcementType || '1');
const category = String(route.query.category || '1');

// 预加载任务来源字典（用于翻译 detail.taskSource）
const taskSourceLoaded = ref(false);
loadDict('check_category', () => { taskSourceLoaded.value = true; });

// 任务来源翻译（响应式）
const taskSourceText = computed(() => {
    void taskSourceLoaded.value;
    return getDictText('check_category', lawDetail.value?.checkCategory);
});

// 预加载行政当事人类型字典（用于翻译 detail.partyType）
const partyTypeLoaded = ref(false);
loadDict('party_type', () => { partyTypeLoaded.value = true; });

// 行政当事人类型翻译（响应式）
const partyTypeText = computed(() => {
    void partyTypeLoaded.value;
    return getDictText('party_type', caseDetail.value?.partyType);
});

// 预加载处罚类型字典（用于翻译 caseDetail.penaltyCategory，支持多值逗号拼接）
const penaltyCategoryLoaded = ref(false);
loadDict('penalty_type', () => { penaltyCategoryLoaded.value = true; });

// 处罚类型翻译（响应式）
const penaltyCategoryText = computed(() => {
    void penaltyCategoryLoaded.value;
    return getMultiDictText('penalty_type', caseDetail.value?.penaltyCategory);
});

// 预加载行政强制类型字典（用于翻译 caseDetail.enforcementType）
const enforcementTypeLoaded = ref(false);
loadDict('admin_force_sub', () => { enforcementTypeLoaded.value = true; });

// 行政强制类型翻译（响应式，字典加载完成后自动更新）
const enforcementTypeText = computed(() => {
    void enforcementTypeLoaded.value;
    return getDictText('admin_force_sub', caseDetail.value?.enforcementType);
});

// 预加载行政检查结果字典（用于翻译 caseDetail.administrativeCheckResult）
const checkResultLoaded = ref(false);
loadDict('law_enf_check_result', () => { checkResultLoaded.value = true; });

// 行政检查结果翻译（响应式，字典加载完成后自动更新）
const administrativeCheckResultText = computed(() => {
    void checkResultLoaded.value;
    return getDictText('law_enf_check_result', caseDetail.value?.administrativeCheckResult);
});

// 多值字典翽译：按 中文/英文逗号、顿号、分号拆分，逐个查字典，再用逗号拼接
const getMultiDictText = (dictType, val) => {
    if (val === undefined || val === null || val === '') return '-';
    const arr = String(val).split(/[,，、;；]/).map(s => s.trim()).filter(Boolean);
    if (!arr.length) return '-';
    return arr.map(v => getDictText(dictType, v)).join(',');
};

// 附件列表：用后端文件服务地址 fileUrl 拼 uploadPath，得到完整绝对 URL
const attachmentList = computed(() => {
    const list = Array.isArray(lawDetail.value?.fileList) ? lawDetail.value.fileList : [];
    const base = (fileUrl || '').replace(/\/+$/, '');
    return list
        .filter(f => f && f.uploadPath)
        .map(f => {
            const path = f.uploadPath;
            if (/^https?:\/\//i.test(path)) return { url: path };
            const p = path.startsWith('/') ? path : '/' + path;
            return { url: base + p };
        });
});

// 图片预览
const previewImage = (startPosition) => {
    showImagePreview({ images: attachmentList.value.map(f => f.url), startPosition });
};

const pageTitle = computed(() => {
    const map = { '1': '行政检查详情', '2': '行政处罚详情', '4': '行政强制详情' };
    return map[category] || '执法详情';
});

const hasLawDetail = computed(() => {
    const detail = lawDetail.value;
    return detail && Object.keys(detail).length > 0 && (
        detail.bureauDeptName ||
        detail.lawEnforcer ||
        detail.lawEnforceCategoryText ||
        detail.lawEnforcementItemText ||
        detail.enforcementTime
    );
});

// 执法类别文字映射
const getCategoryText = (val) => {
    const map = { '1': '行政检查', '2': '行政处罚', '4': '行政强制' };
    return map[String(val)] || '-';
};

// 详情数据拆分为两个 ref，避免两个接口同名字段互相覆盖
const lawDetail = ref({});   // 执法信息
const caseDetail = ref({});  // 案件信息

// 获取执法信息详情
const fetchLawDetail = () => {
    getLawDetail({ id, lawEnforcementType }, (res) => {
        if (res.code === 200) {
            const data =res.data;
            lawDetail.value = { ...data };
            if (!lawDetail.value.lawEnforceCategoryText) {
                lawDetail.value.lawEnforceCategoryText = getCategoryText(data.lawEnforcementType || category);
            }
        } else {
            // showToast(res.msg || '执法信息加载失败');
        }
    }, () => {
        // showToast('执法信息网络异常');
    });
};

// 获取执法案件信息详情
const fetchLawCaseDetail = () => {
    getLawCaseDetail({ id, lawEnforcementType }, (res) => {
        if (res.code === 200) {
            const data = res.data || {};
            caseDetail.value = { ...data };
        } else {
            // showToast(res.msg || '案件信息加载失败');
        }
    }, () => {
        // showToast('案件信息网络异常');
    });
};

onMounted(() => {
    if (!id) {
        showToast('缺少详情id');
        return;
    }
    fetchLawDetail();
    fetchLawCaseDetail();
});

const onClickLeft = () => {
    router.back();
};
</script>

<style lang="less" scoped>
.detail-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #fbfdff;
}

:deep(.van-nav-bar) {
    background-color: #fff;
}

:deep(.van-nav-bar__title) {
    font-size: 0.45rem;
    font-weight: 600;
    color: #333;
}

:deep(.van-nav-bar .van-icon) {
    color: #333;
}

.detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.27rem;
}

.info-card {
    background: #fff;
    border-radius: 0.2rem;
    margin-bottom: 0.27rem;
    padding: 0.3rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-title {
    font-size: 0.4rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #f0f0f0;
}

.info-row {
    display: flex;
    align-items: flex-start;
    padding: 0.2rem 0;
    font-size: 0.32rem;
    line-height: 1.5;
    border-bottom: 1px solid #f8f8f8;

    &:last-child {
        border-bottom: none;
    }
}

.info-label {
    color: #666;
    width: 3rem;
    flex-shrink: 0;
}

.info-value {
    color: #333;
    flex: 1;
    word-break: break-all;
}

.info-value-block {
    color: #333;
    flex: 1;

    div {
        line-height: 1.6;
    }
}

.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;

    .attachment-img {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 0.1rem;
        object-fit: cover;
    }
}
</style>