school-developer/src/views/stuwork/classroomhygienemonthly/detail.vue

<template>
  <el-dialog 
    title="每周工作详情" 
    v-model="visible"
    :close-on-click-modal="false" 
    draggable
    width="1000px">
    <div v-loading="loading" class="article-container">
      <!-- 报纸文章样式 -->
      <div class="article-header">
        <h1 class="article-title">{{ detailData.title || '-' }}</h1>
        <div class="article-meta">
          <span class="article-author">作者：{{ detailData.author || '-' }}</span>
          <span class="article-time">{{ detailData.schoolYear || '-' }} 第{{ detailData.schoolTerm || '-' }}学期</span>
        </div>
      </div>
      <div class="article-content" v-html="detailData.content || '-'"></div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" icon="Edit" @click="handleEdit">编 辑</el-button>
        <el-button type="danger" icon="Delete" @click="handleDelete">删 除</el-button>
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
  
  <!-- 编辑表单对话框 -->
  <FormDialog ref="formDialogRef" @refresh="handleRefresh" />
</template>

<script setup lang="ts" name="WeekPlanDetail">
import { ref, reactive, nextTick, defineAsyncComponent } from 'vue'
import { useMessage, useMessageBox } from "/@/hooks/message";
import { getObj, delObjs } from '/@/api/stuwork/weekPlan'

const emit = defineEmits(['refresh']);

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));

// 定义变量内容
const formDialogRef = ref()
const visible = ref(false)
const loading = ref(false)
const detailId = ref('')

// 详情数据
const detailData = reactive({
  id: '',
  schoolYear: '',
  schoolTerm: '',
  title: '',
  content: '',
  author: ''
})

// 打开对话框
const openDialog = async (id: string) => {
  visible.value = true
  detailId.value = id
  await nextTick()
  getWeekPlanDetail(id)
}

// 获取详情
const getWeekPlanDetail = (id: string) => {
  loading.value = true
  getObj({ id: id }).then((res: any) => {
    if (res.data) {
      const data = Array.isArray(res.data) ? res.data[0] : res.data
      if (data) {
        Object.assign(detailData, {
          id: data.id || '',
          schoolYear: data.schoolYear || '',
          schoolTerm: data.schoolTerm || '',
          title: data.title || '',
          content: data.content || '',
          author: data.author || ''
        })
      }
    }
  }).catch((err: any) => {
    console.error('获取详情失败', err)
    useMessage().error('获取详情失败')
  }).finally(() => {
    loading.value = false
  })
}

// 编辑
const handleEdit = () => {
  if (detailId.value) {
    formDialogRef.value?.openDialog(detailId.value)
  }
}

// 删除
const handleDelete = async () => {
  if (!detailId.value) return
  
  try {
    await useMessageBox().confirm('此操作将永久删除', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
  } catch {
    return
  }

  try {
    await delObjs([detailId.value])
    useMessage().success('删除成功')
    visible.value = false
    emit('refresh')
  } catch (err: any) {
    useMessage().error(err.msg || '删除失败')
  }
}

// 刷新
const handleRefresh = () => {
  if (detailId.value) {
    getWeekPlanDetail(detailId.value)
  }
  emit('refresh')
}

// 暴露变量
defineExpose({
  openDialog
});
</script>

<style scoped>
.article-container {
  padding: 20px;
  max-width: 100%;
}

.article-header {
  border-bottom: 2px solid #e4e7ed;
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.article-title {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 15px 0;
  line-height: 1.5;
  text-align: center;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #909399;
  padding-top: 10px;
}

.article-author {
  font-weight: 500;
}

.article-time {
  font-style: italic;
}

.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: #606266;
  text-align: justify;
  word-wrap: break-word;
}

.article-content :deep(p) {
  margin: 0 0 15px 0;
}

.article-content :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

.article-content :deep(h1),
.article-content :deep(h2),
.article-content :deep(h3),
.article-content :deep(h4),
.article-content :deep(h5),
.article-content :deep(h6) {
  margin: 20px 0 15px 0;
  font-weight: bold;
}

.article-content :deep(ul),
.article-content :deep(ol) {
  margin: 15px 0;
  padding-left: 30px;
}

.article-content :deep(blockquote) {
  border-left: 4px solid #409eff;
  padding-left: 15px;
  margin: 15px 0;
  color: #909399;
  font-style: italic;
}
</style>