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">
                <div class="card-title">执法信息</div>
                <div class="info-row">
                    <span class="info-label">执法单位</span>
                    <span class="info-value">{{ detail.bureauDeptName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法人员</span>
                    <div class="info-value-block">
                        <div v-for="(p, idx) in detail.personnel" :key="idx">{{ p }}</div>
                    </div>
                </div>
                <div class="info-row">
                    <span class="info-label">执法类别</span>
                    <span class="info-value">{{ detail.lawEnforceCategoryText }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">任务来源</span>
                    <span class="info-value">{{ detail.taskSource }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法事项</span>
                    <span class="info-value">{{ detail.lawEnforcementItem }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法时间</span>
                    <span class="info-value">{{ detail.enforcementTime }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">受委托执法</span>
                    <span class="info-value">{{ detail.entrusted }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">委托行政机关</span>
                    <span class="info-value">{{ detail.entrustingOrgan }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">附件</span>
                    <span class="info-value">{{ detail.attachment }}</span>
                </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">{{ detail.caseName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政相对人类型</span>
                    <span class="info-value">{{ detail.counterpartType }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查决定书名称</span>
                    <span class="info-value">{{ detail.decisionName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查决定书文号</span>
                    <span class="info-value">{{ detail.decisionNumber }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查类型</span>
                    <span class="info-value">{{ detail.checkType }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">检查结果日期</span>
                    <span class="info-value">{{ detail.resultDate }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查内容</span>
                    <span class="info-value">{{ detail.checkContent }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查结果</span>
                    <span class="info-value">{{ detail.checkResult }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政检查决定</span>
                    <span class="info-value">{{ detail.checkDecision }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法主体名称</span>
                    <span class="info-value">{{ detail.enforcementSubject }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">备注</span>
                    <span class="info-value">{{ detail.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">{{ detail.caseName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">行政相对人类型</span>
                    <span class="info-value">{{ detail.counterpartType }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">{{ category === '2' ? '行政处罚类型' : '行政强制措施类型' }}</span>
                    <span class="info-value">{{ detail.measureType }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">决定文书名称</span>
                    <span class="info-value">{{ detail.decisionDocName }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">决定文书号</span>
                    <span class="info-value">{{ detail.decisionDocNumber }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">{{ category === '2' ? '行政处罚理由' : '行政强制措施理由' }}</span>
                    <span class="info-value">{{ detail.measureReason }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">{{ category === '2' ? '行政处罚依据' : '行政强制措施依据' }}</span>
                    <span class="info-value">{{ detail.measureBasis }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">{{ category === '2' ? '处罚内容' : '强制所行内容' }}</span>
                    <span class="info-value">{{ detail.measureContent }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">执法主体名称</span>
                    <span class="info-value">{{ detail.enforcementSubject }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">{{ category === '2' ? '处罚决定日期' : '强制措施决定日期' }}</span>
                    <span class="info-value">{{ detail.decisionDate }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">备注</span>
                    <span class="info-value">{{ detail.remark }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="registrationDetail">
import { mockCheckDetail, mockPenaltyDetail, mockForceDetail } from '@/mock/enforcement';

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

const category = route.query.category || '1';

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

const detailMap = {
    '1': mockCheckDetail,
    '2': mockPenaltyDetail,
    '3': mockForceDetail
};

const detail = ref(detailMap[category] || mockCheckDetail);

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

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

: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;
    }
}
</style>