EnforcementCode-2.0/zdxt-web-client/zdxt-efcode-enterprise-app/src/views/enterprise/my/complaintDetail.vue

<template>
    <div class="complaint-detail-page">
        <van-nav-bar title="投诉建议详情" left-arrow @click-left="onClickLeft" />

        <!-- Tab 切换：投诉详情 / 处置进度 -->
        <van-tabs v-model:active="activeTab" sticky animated line-width="0.5rem" line-height="2px" color="#2b7de9">
            <van-tab title="投诉详情" name="detail">
                <div class="detail-content">
                    <!-- 基本信息 -->
                    <div class="detail-card">
                        <div class="detail-row">
                            <span class="detail-label">投诉时间</span>
                            <span class="detail-value">{{ detail.createTime }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">执法单位</span>
                            <span class="detail-value">{{ detail.complaintDepartments }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">投诉类型</span>
                            <span class="detail-value">{{ getComplaintTypeText(detail.enforceType) }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">投诉事项</span>
                            <span class="detail-value">{{ detail.complaintItemNames || '' }}</span>
                        </div>
                    </div>

                    <!-- 投诉内容 -->
                    <div class="detail-card">
                        <div class="detail-row">
                            <span class="detail-label">投诉内容</span>
                            <span class="detail-value">{{ detail.problemDescription }}</span>
                        </div>
                    </div>

                    <!-- 附件 -->
                    <div class="detail-card">
                        <div class="card-title">附件</div>
                        <div v-if="detail.images && detail.images.length > 0" class="image-list">
                            <img v-for="(img, idx) in detail.images" :key="idx" :src="img" class="detail-image" />
                        </div>
                        <div v-else class="detail-value">无附件</div>
                    </div>

                    <!-- 涉事地址 -->
                    <div class="detail-card">
                        <div class="detail-row">
                            <span class="detail-label">涉事地址</span>
                            <span class="detail-value">{{ detail.enterpriseAddress || '' }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">详细地址</span>
                            <span class="detail-value">{{ detail.detailedAddress || '' }}</span>
                        </div>
                    </div>

                    <!-- 联系人信息 -->
                    <div class="detail-card">
                        <div class="detail-row">
                            <span class="detail-label">联系人</span>
                            <span class="detail-value">{{ detail.linkman || '' }}</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">联系电话</span>
                            <span class="detail-value">{{ detail.linkmanTel || '' }}</span>
                        </div>
                    </div>

                    <!-- 授权信息 -->
                    <div class="detail-card">
                        <div class="detail-row">
                            <span class="detail-label">是否授权</span>
                            <span class="detail-value">{{ detail.authorized ? '是' : '否' }}</span>
                        </div>
                    </div>
                </div>
            </van-tab>

            <van-tab title="处置进度" name="progress">
                <div class="progress-content">
                    <van-empty v-if="!progressLoading && progressList.length === 0" description="暂无处置进度" />

                    <div class="progress-timeline" v-else>
                        <div class="progress-item" v-for="(item, idx) in progressList" :key="idx"
                            :class="{ first: idx === 0 }">
                            <div class="dot-line">
                                <span class="dot" :class="{ active: idx === 0 }"></span>
                                <span class="line" v-if="idx !== progressList.length - 1"></span>
                            </div>
                            <div class="progress-body">
                                <div class="progress-row">
                                    <span class="progress-label">处理单位：</span>
                                    <span class="progress-value">{{ item.unit || '-' }}</span>
                                </div>
                                <div class="progress-row">
                                    <span class="progress-label">处理意见：</span>
                                    <span class="progress-value">{{ item.opinion || '-' }}</span>
                                </div>
                                <div class="progress-row">
                                    <span class="progress-label">处理时间：</span>
                                    <span class="progress-value">{{ item.time || '-' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup name="complaintDetail">
import { showToast } from 'vant';
import 'vant/es/toast/style';
import { getComplaintDetail, getComplaintDisposalProgress } from '@/api/enterprise';
// 引入字典工具
import { loadDict } from '@/util/dictUtil';
import { reactive } from 'vue';

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

// 当前激活 tab
const activeTab = ref('detail');

// 投诉类型字典（与新增页面保持一致）
const complaintTypeDict = reactive({});

// 加载投诉类型字典
const loadComplaintTypeDict = () => {
    loadDict('caseType', (columns) => {
        columns.forEach(item => {
            complaintTypeDict[item.value] = item.text;
        });
    }, () => {
        // 加载失败不做处理，使用默认值
    });
};

const detail = ref({
    time: '',
    bureauDept: '',
    complaintType: '',
    complaintItem: '',
    content: '',
    images: [],
    address: '',
    addressDetail: '',
    contactName: '',
    contactPhone: '',
    authorized: true
});

// 处置进度列表
const progressList = ref([]);
const progressLoading = ref(false);

// 处置进度假数据（后端返回为空或接口未通时充充提示）
const MOCK_PROGRESS_LIST = [
    {
        unit: '',
        opinion: '系统自动评价',
        time: '2026-01-16 11:26:28',
    },
    {
        unit: '市统一受理分拨平台',
        opinion: '复核通过，办结工单。',
        time: '2026-01-09 11:26:28',
    },
    {
        unit: '政通',
        opinion: '测试',
        time: '2026-01-09 11:26:00',
    },
    {
        unit: '市统一受理分拨平台',
        opinion: '请贵单位尽快处理，按处理期限答复市民并将处理结果反馈给我单位。（注：请勿将来电人资料泄露给被投诉单位，做好市民信息保密工作）',
        time: '2026-01-09 11:24:17',
    },
];

// 根据编码获取投诉类型显示文本
const getComplaintTypeText = (code) => {
    console.log('投诉类型字典项111：', code);
    if (complaintTypeDict[code] !== undefined) {
        console.log('投诉类型字典项111：', code, complaintTypeDict[code]);
        return complaintTypeDict[code];
    }
    // 默认值（兼容旧数据）
    return code == 0 ? '默认' : code == 1 ? '联合检查' : (code || '');
};

onMounted(() => {

    const id = route.query.id;
    if (!id) {
        showToast('缺少投诉ID');
        return;
    }
    fetchDetail(id);
    fetchDisposalProgress(id);
    // 加载投诉类型字典
    loadComplaintTypeDict();
});



// 获取环境变量中的文件服务地址
const VITE_FILE_URL = import.meta.env.VITE_FILE_URL || '';

// 拼接完整的图片URL
const buildImageUrl = (path) => {
    if (!path) return '';
    // 如果已经是完整URL则直接返回
    if (path.startsWith('http://') || path.startsWith('https://')) {
        return path;
    }
    // 拼接后台地址
    return VITE_FILE_URL + path;
};

const fetchDetail = (id) => {
    getComplaintDetail({ id }, (res) => {
        if (res && res.code === 200) {
            const data = res.data || {};
            // 处理附件图片，从fileList中提取uploadPath
            const images = [];
            if (data.fileList && Array.isArray(data.fileList)) {
                data.fileList.forEach(file => {
                    if (file && file.uploadPath) {
                        images.push(buildImageUrl(file.uploadPath));
                    }
                });
            }
            // 兼容旧的images字段
            if (images.length === 0 && data.images && Array.isArray(data.images)) {
                data.images.forEach(img => {
                    images.push(buildImageUrl(img));
                });
            }
            detail.value = {
                ...data,
                images: images
            };
        }
    }, () => { });
};

// 处置进度
const fetchDisposalProgress = (id) => {
    progressLoading.value = true;
    getComplaintDisposalProgress({ id }, (res) => {
        progressLoading.value = false;
        if (res && res.code === 200) {
            const rows = res.data || res.rows || [];
            // 字段名兼容映射
            const list = (Array.isArray(rows) ? rows : []).map(item => ({
                unit: item.disposalUnit || item.handleUnit || item.handlerUnit || item.unit || item.deptName || '',
                opinion: item.disposalOpinion || item.handleOpinion || item.handlerOpinion || item.opinion || item.remark || '',
                time: item.disposalTime || item.handleTime || item.handlerTime || item.time || item.createTime || '',
                raw: item,
            }));
            // 后端返回为空时使用假数据充充展示
            progressList.value = list.length ? list : MOCK_PROGRESS_LIST;
        } else {
            progressList.value = MOCK_PROGRESS_LIST;
        }
    }, () => {
        progressLoading.value = false;
        // 接口异常时使用假数据充充展示
        progressList.value = MOCK_PROGRESS_LIST;
    });
};

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

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

:deep(.van-tabs) {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

:deep(.van-tabs__content) {
    flex: 1;
    overflow-y: auto;
}

:deep(.van-tab) {
    font-size: 0.35rem;
}

:deep(.van-tab--active) {
    font-weight: 600;
    color: #2b7de9;
}

.detail-content,
.progress-content {
    padding: 0.27rem;
}

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

.card-title {
    font-size: 0.35rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.2rem;
}

.detail-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;
    }
}

.detail-label {
    color: #666;
    width: 1.8rem;
    flex-shrink: 0;
}

.detail-value {
    color: #333;
    flex: 1;
    word-break: break-all;
    font-size: 0.32rem;
}

.image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

.detail-image {
    width: 2rem;
    height: 2rem;
    border-radius: 0.1rem;
    object-fit: cover;
}

/* ===== 处置进度时间轴 ===== */
.progress-timeline {
    background: #fff;
    border-radius: 0.2rem;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.progress-item {
    display: flex;
    padding-bottom: 0.3rem;

    &:last-child {
        padding-bottom: 0;
    }
}

.dot-line {
    position: relative;
    width: 0.4rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.1rem;

    .dot {
        width: 0.22rem;
        height: 0.22rem;
        border-radius: 50%;
        background: #c8c9cc;
        z-index: 1;

        &.active {
            background: #2b7de9;
            box-shadow: 0 0 0 4px rgba(43, 125, 233, 0.15);
        }
    }

    .line {
        flex: 1;
        width: 1px;
        background: #e5e5e5;
        margin-top: 0.05rem;
    }
}

.progress-body {
    flex: 1;
    padding-left: 0.2rem;
    font-size: 0.3rem;
    line-height: 1.7;
    color: #333;
    padding-bottom: 0.1rem;
    border-bottom: 1px dashed #f0f0f0;
}

.progress-item:last-child .progress-body {
    border-bottom: none;
}

.progress-row {
    display: flex;
    align-items: flex-start;

    .progress-label {
        color: #666;
        flex-shrink: 0;
    }

    .progress-value {
        color: #333;
        flex: 1;
        word-break: break-all;
    }
}
</style>