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

<template>
    <div class="home">
        <!-- 中间 -->
        <div class="warp_body">
            <div class="white-body">
                <!-- Tab 切换 -->
                <div class="tabs">
                    <div class="tab-item portrayal" :class="{ active: currentTab === 0 }" @click="currentTab = 0">
                        <div class="tab-item-title">企业画像</div>
                    </div>
                    <div class="tab-item record" :class="{ active: currentTab === 1 }" @click="currentTab = 1">
                        <div class="tab-item-title">{{ isNonEnforcement ? '历史活动' : '执法记录' }}</div>
                    </div>
                </div>

                <!-- 企业画像 Tab -->
                <div v-if="currentTab === 0">
                    <!-- 企业信息卡片 -->
                    <div class="enterprise-card">
                        <div v-if="enterpriseData" class="enterprise-info">
                            <div class="info-item">
                                <div class="info-label">企业名称</div>
                                <div class="info-value">{{ enterpriseData.enterpriseName }}</div>
                            </div>
                            <template v-if="!isCollapsed">
                                <div class="info-item">
                                    <div class="info-label">统一社会信用代码</div>
                                    <div class="info-value">{{ enterpriseData.enterpriseNumber }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">法定代表人</div>
                                    <div class="info-value">{{ enterpriseData.legalPerson }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">企业类型</div>
                                    <div class="info-value">{{ enterpriseData.enterpriseType }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">注册资本</div>
                                    <div class="info-value">{{ enterpriseData.registeredCapital }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">成立日期</div>
                                    <div class="info-value">{{ formatDate(enterpriseData.establishmentTime) }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">经营期限</div>
                                    <div class="info-value">{{ enterpriseData.operatingTerm }}</div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">注册地址</div>
                                    <div class="info-value address-value">
                                        <span ref="addressRef" class="address-text"
                                            :class="{ expanded: isAddressExpanded }">{{ enterpriseData.enterpriseAddress
                                            }}</span>
                                        <span class="expand-text" v-if="showAddressExpand || isAddressExpanded"
                                            @click.stop="toggleAddressExpand">
                                            {{ isAddressExpanded ? '收起' : '展开' }}
                                        </span>
                                    </div>
                                </div>
                                <div class="info-item">
                                    <div class="info-label">经营范围</div>
                                    <div class="info-value scope-value">
                                        <span ref="scopeRef" class="scope-text"
                                            :class="{ expanded: isScopeExpanded }">{{ enterpriseData.businessScope
                                            }}</span>
                                        <span class="expand-text" v-if="showScopeExpand || isScopeExpanded"
                                            @click.stop="toggleScopeExpand">
                                            {{ isScopeExpanded ? '收起' : '展开' }}
                                        </span>
                                    </div>
                                </div>
                            </template>
                            <template v-else>
                                <div class="info-item">
                                    <div class="info-label">统一社会信用代码</div>
                                    <div class="info-value">{{ enterpriseData.enterpriseNumber }}</div>
                                </div>
                            </template>
                        </div>
                        <van-empty v-else description="暂无企业信息" />

                        <!-- 分隔箭头 -->
                        <div class="divider-arrow" @click="toggleCollapse">
                            <van-icon :name="isCollapsed ? 'arrow-down' : 'arrow-up'" />
                        </div>
                    </div>
                </div>

                <!-- 执法记录 Tab（行政执法模式） -->
                <div v-if="currentTab === 1 && !isNonEnforcement" class="tab-content">
                    <EnforcementRecordList :enterprise-name="enterpriseData?.enterpriseName"
                        :enterprise-number="enterpriseData?.enterpriseNumber"
                        :is-record-expanded="isRecordExpanded" @toggle-expand="toggleRecordExpand" />
                </div>

                <!-- 历史活动 Tab（非行政执法模式） -->
                <div v-if="currentTab === 1 && isNonEnforcement" class="tab-content">
                    <HistoryActivityList :enterprise-name="enterpriseData?.enterpriseName" />
                </div>

            </div>
            <!-- 执法记录卡片（仅行政执法模式显示） -->
            <EnterpriseRecordCard v-if="currentTab === 0 && !isNonEnforcement" :recordList="cityRecords"
                :cfRecords="cfRecords" :qzRecords="qzRecords" :enterpriseName="enterpriseData?.enterpriseName"
                :isExpanded="isRecordExpanded" @toggle-expand="toggleRecordExpand" />
        </div>

        <!-- 登记按钮 -->
        <div class="addinfo" @click="toSign">登记</div>
    </div>
</template>

<script setup name="EnterpriseScanPreview">
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { showFailToast } from 'vant';
import { getEnterpriseInformation, queryXzjcList, queryXzcfList, queryXzqzList } from '@/api/enforcement/index';
import EnterpriseRecordCard from './components/EnterpriseRecordCard.vue';
import EnforcementRecordList from './components/EnforcementRecordList.vue';
import HistoryActivityList from './components/HistoryActivityList.vue';

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

// ========== 数据 ==========
const currentTab = ref(0);
const isCollapsed = ref(false);
const isRecordExpanded = ref(false);
const isAddressExpanded = ref(false);
const isScopeExpanded = ref(false);
const enterpriseData = ref(null);
const enterpriseNumber = ref('');
const qrCodeValid = ref(false);

// 是否为非行政执法模式
const isNonEnforcement = ref(false);

// 是否需要显示展开按钮
const showAddressExpand = ref(false);
const showScopeExpand = ref(false);

// 元素引用
const addressRef = ref(null);
const scopeRef = ref(null);

// 历史案件数据（缓存）
const cityRecords = ref([]);
const cfRecords = ref([]);
const qzRecords = ref([]);
const hasFetchedCaseData = ref(false);


// ========== 方法 ==========
const toggleCollapse = () => {
    isCollapsed.value = !isCollapsed.value;
};

const toggleRecordExpand = () => {
    isRecordExpanded.value = !isRecordExpanded.value;
};

const toggleAddressExpand = () => {
    isAddressExpanded.value = !isAddressExpanded.value;
};

const toggleScopeExpand = () => {
    isScopeExpanded.value = !isScopeExpanded.value;
};

// 检测文本是否超过2行
const checkTextOverflow = () => {
    setTimeout(() => {
        // 检测注册地址
        if (addressRef.value) {
            const addressEl = addressRef.value;
            showAddressExpand.value = addressEl.scrollHeight > addressEl.clientHeight;
        }
        // 检测经营范围
        if (scopeRef.value) {
            const scopeEl = scopeRef.value;
            showScopeExpand.value = scopeEl.scrollHeight > scopeEl.clientHeight;
        }
    }, 100);
};


// ========== 初始化加载 ==========
onMounted(() => {
    // 判断是否为非行政执法模式
    const enforceType = route.query.type;
    isNonEnforcement.value = enforceType === 'non-enforcement';

    // 获取Tab参数，默认选中历史活动Tab
    const tab = parseInt(route.query.tab) || 0;
    if (tab === 1 && isNonEnforcement.value) {
        currentTab.value = 1;
    }

    // 从路由参数获取企业编号
    const entNumber = route.query.enterpriseNumber;
    if (entNumber) {
        enterpriseNumber.value = entNumber;
        fetchEnterpriseInformation(entNumber);
    } else {
        showFailToast('缺少企业编号，请重新扫码');
    }
});

// ========== 获取历史执法案件数据 ==========
const fetchZfList = (enterpriseNumber) => {
    queryXzjcList(enterpriseNumber, (res) => {
        if (res.code === 200) {
            cityRecords.value = res.rows || [];
        } else {
            console.error('获取历史执法案件失败:', res.msg);
        }
    }, (err) => {
        console.error('获取历史执法案件接口失败', err);
    });
};

// ========== 获取历史处罚案件数据 ==========
const fetchCfList = (enterpriseNumber) => {
    if (!enterpriseNumber) return;
    queryXzcfList(enterpriseNumber, (res) => {
        if (res.code === 200) {
            cfRecords.value = res.rows || [];
        } else {
            console.error('获取历史处罚案件失败:', res.msg);
        }
    }, (err) => {
        console.error('获取历史处罚案件接口失败', err);
    });
};

// ========== 获取历史强制案件数据 ==========
const fetchQzList = (enterpriseNumber) => {
    if (!enterpriseNumber) return;
    queryXzqzList(enterpriseNumber, (res) => {
        if (res.code === 200) {
            qzRecords.value = res.rows || [];
        } else {
            console.error('获取历史强制案件失败:', res.msg);
        }
    }, (err) => {
        console.error('获取历史强制案件接口失败', err);
    });
};

// ========== 获取企业画像数据 ==========
const fetchEnterpriseInformation = (enterpriseNumber) => {
    getEnterpriseInformation(enterpriseNumber, (res) => {
        if (res.code === 200) {
            // 直接使用接口返回的数据
            enterpriseData.value = res.data || res;
            // 检测文本是否超过2行
            checkTextOverflow();
            // 第一次进入时获取历史案件数据（只请求一次）
            if (!hasFetchedCaseData.value && !isNonEnforcement.value) {
                hasFetchedCaseData.value = true;
                fetchZfList(enterpriseNumber);
                fetchCfList(enterpriseNumber);
                fetchQzList(enterpriseNumber);
            }
        } else {
            console.error('获取企业画像失败:', res.msg);
            showFailToast(res.msg || '获取企业画像失败');
        }
    }, (err) => {
        console.error('获取企业画像接口失败', err);
        showFailToast('获取企业画像失败，请重试');
    });
};

// ========== 工具方法 ==========
const formatDate = (dateStr) => {
    if (!dateStr) return '';
    const d = new Date(dateStr);
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};

// ========== 页面跳转 ==========
const toSign = () => {
    // 缓存企业数据到 sessionStorage
    const enterpriseScanData = enterpriseData.value || {};
    sessionStorage.setItem('enterpriseScanData', JSON.stringify(enterpriseScanData));
    
    // 从 URL 参数中获取手动搜索标识
    const isManualSearch = route.query.isManualSearch === 'true';
    
    router.push({
        path: '/enforcement/enforcementRegister',
        query: { 
            type: isNonEnforcement.value ? 'non-enforcement' : undefined,
            isManualSearch: isManualSearch ? 'true' : undefined
        }
    });
};
</script>

<style lang="less" scoped>
.home {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background-color: #ebf3fb;

    .warp_body {
        position: relative;
        flex: 1;
        overflow-y: auto;
        background-image: linear-gradient(to bottom, #ebf3fb, transparent);
    }

    .white-body {
        margin: 0 0.3rem;
        width: calc(100% - 0.6rem);
        background-color: #fff;
        border-radius: 0.27rem;
        overflow: hidden;
        margin-bottom: 20px;
    }
}

.tabs {
    display: flex;
    padding: 0.3rem 0.3rem 0;
}

.tab-item {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .tab-item-title {
        font-size: 0.38rem;
    }

    &.portrayal {
        background: url('@/assets/images/tab_bg1_1.png') no-repeat center center;
        background-size: 100% 100%;

        .tab-item-title {
            color: #1989fa;
        }

        &.active {
            background: url('@/assets/images/tab_bg1.png') no-repeat center center;
            background-size: 100% 100%;

            .tab-item-title {
                color: #fff;
            }
        }
    }

    &.record {
        background: url('@/assets/images/tab_bg.png') no-repeat center center;
        background-size: 100% 100%;

        .tab-item-title {
            color: #1989fa;
        }

        &.active {
            background: url('@/assets/images/tab_bg_1.png') no-repeat center center;
            background-size: 100% 100%;

            .tab-item-title {
                color: #fff;
            }
        }
    }
}

.enterprise-card {
    background: #fff;
    border-radius: 0.2rem;
    padding: 0 0.3rem;
    margin-bottom: 0.3rem;
}

.enterprise-info {
    .info-item {
        display: flex;
        padding: 0.25rem 0;
        border-bottom: 1px solid #f5f5f5;

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

    .info-label {
        flex: none;
        width: 74px;
        font-size: 14px;
        color: #000;
        line-height: 1.5;
        margin-right: 30px;
    }

    .info-value {
        flex: 1;
        font-size: 0.35rem;
        color: #666;
        line-height: 1.5;
        word-break: break-all;
    }

    .address-value,
    .scope-value {
        display: flex;
        align-items: flex-start;
    }

    .address-text,
    .scope-text {
        flex: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.6;
    }

    .address-text.expanded,
    .scope-text.expanded {
        -webkit-line-clamp: unset;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }

    .expand-text {
        flex: none;
        color: #1367fe;
        font-size: 0.32rem;
        margin-left: 0.1rem;
        cursor: pointer;
        align-self: flex-start;
        padding-top: 2px;
    }
}

.divider-arrow {
    display: flex;
    justify-content: center;
    padding: 0.2rem 0;
    color: #ccc;
    font-size: 0.4rem;
    cursor: pointer;
}

.tab-content {
    height: calc(100vh - 70px);
    background: #fff;
    box-sizing: border-box;
    overflow-y: auto;
}

.addinfo {
    position: absolute;
    bottom: 3%;
    right: 2%;
    z-index: 99999;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #1367fe;
    border-radius: 50%;
    box-shadow: 0 0 0.27rem #1367fe;
    color: #fff;
    font-size: 0.4rem;
    text-align: center;
    vertical-align: middle;
    padding-top: 0.45rem;
    box-sizing: border-box;
}
</style>