EnforcementCode-2.0/zdxt-web-client/zdxt-admin-plus-ui/src/views/supervision/educationServices/detail.vue

<template>
  <div v-loading="pageLoading" class="detail-container">
    <div class="page-header">
      <h1>普法服务详情</h1>
    </div>

    <div class="detail-card">
      <el-descriptions :column="1" border label-width="120px">
        <el-descriptions-item label="标题">{{ detail.title || '-' }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ formatSourceType(detail.sourceType) }}</el-descriptions-item>
        <el-descriptions-item label="发布部门">{{ detail.publishDeptNames || '-' }}</el-descriptions-item>
        <el-descriptions-item label="内容分类">{{ detail.contentTypeLabel || '-' }}</el-descriptions-item>
        <el-descriptions-item v-if="!isRepost" label="内容发布在">
          {{ detail.targetPlatformLabel || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">{{ detail.statusLabel || formatStatus(detail.status) }}</el-descriptions-item>
        <el-descriptions-item label="浏览次数">{{ detail.viewCount ?? 0 }}</el-descriptions-item>
        <el-descriptions-item label="发布&转载时间">{{ detail.updateTime || detail.createTime || '-' }}</el-descriptions-item>
        <el-descriptions-item v-if="isRepost" label="转载链接">
          <el-link v-if="detail.forwardUrl" :href="detail.forwardUrl" target="_blank" type="primary">
            {{ detail.forwardUrl }}
          </el-link>
          <span v-else>-</span>
        </el-descriptions-item>
      </el-descriptions>

      <div v-if="!isRepost" class="content-section">
        <div class="section-title">服务信息</div>
        <div class="content-body" v-html="detail.content || '<p>暂无内容</p>'" />
      </div>

      <div v-if="!isRepost && fileList.length > 0" class="attachment-section">
        <div class="section-title">附件</div>
        <div class="attachment-list">
          <el-link
            v-for="(file, index) in fileList"
            :key="file.guid || index"
            :href="file.uploadPath"
            target="_blank"
            type="primary"
            class="attachment-item"
          >
            {{ file.fileName || `附件${index + 1}` }}
          </el-link>
        </div>
      </div>

      <div class="form-actions">
        <el-button @click="handleBack">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, reactive, ref } from 'vue';
import type { ComponentInternalInstance } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { getEducationServicesDetails } from '@/api/supervision/educationServices';

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const pageLoading = ref(true);
const fileList = ref<any[]>([]);

const detail = reactive<any>({
  id: '',
  title: '',
  sourceType: 1,
  publishDeptNames: '',
  contentTypeLabel: '',
  targetPlatformLabel: '',
  status: undefined,
  statusLabel: '',
  viewCount: 0,
  updateTime: '',
  createTime: '',
  forwardUrl: '',
  content: ''
});

const isRepost = computed(() => Number(detail.sourceType) === 2);

const formatSourceType = (sourceType?: number) => {
  if (sourceType === 2) return '转载';
  if (sourceType === 1) return '新增';
  return '-';
};

const formatStatus = (status?: number) => {
  if (status === 1) return '待发布';
  if (status === 2) return '已发布';
  if (status === 3) return '已下架';
  return '-';
};

const loadDetail = async () => {
  const id = route.params.id as string;
  if (!id) {
    ElMessage.error('缺少记录ID');
    router.back();
    return;
  }

  try {
    const res: any = await getEducationServicesDetails(id);
    if (res.code !== 200 || !res.data) {
      ElMessage.error(res.msg || '加载详情失败');
      router.back();
      return;
    }
    Object.assign(detail, res.data);
    fileList.value = res.data.fileList || [];
  } catch (error) {
    console.error('加载详情失败:', error);
    ElMessage.error('加载详情失败');
    router.back();
  } finally {
    pageLoading.value = false;
  }
};

const handleBack = () => {
  proxy?.$tab.closeOpenPage({ path: '/general-manage/enforcementcode-educationServices' });
};

onMounted(() => {
  loadDetail();
});
</script>

<style scoped>
.detail-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.detail-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.content-section,
.attachment-section {
  margin-top: 24px;
}

.section-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.content-body {
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  color: #606266;
  line-height: 1.8;
  word-break: break-word;
}

.attachment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attachment-item {
  justify-content: flex-start;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
</style>