school-developer/src/views/stuwork/classtheme/record.vue

<template>
  <el-dialog 
    title="查看上传记录" 
    v-model="visible"
    :close-on-click-modal="false" 
    draggable
    width="1000px">
    <!-- 搜索表单 -->
    <el-form :model="queryForm" ref="searchFormRef" :inline="true" @keyup.enter="getRecordList" style="margin-bottom: 20px;">
      <el-form-item label="标题" prop="title">
        <el-input 
          v-model="queryForm.title" 
          placeholder="请输入标题" 
          clearable
          style="width: 200px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="Search" @click="getRecordList">查询</el-button>
        <el-button icon="Refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div style="margin-bottom: 20px;">
      <el-button 
        icon="Plus" 
        type="primary" 
        @click="handleAdd">
        新增
      </el-button>
    </div>

    <div v-loading="loading">
      <el-table 
        :data="recordList" 
        border 
        style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="title" label="活动主题" show-overflow-tooltip align="center" min-width="200" />
        <el-table-column prop="fileUrl" label="附件" show-overflow-tooltip align="center" width="100">
          <template #default="scope">
            <el-button 
              v-if="scope.row.fileUrl"
              icon="Document"
              text
              type="primary"
              size="small"
              @click="handleViewFile(scope.row.fileUrl)">
              查看
            </el-button>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="上传时间" show-overflow-tooltip align="center" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="上传人" show-overflow-tooltip align="center" />
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template #default="scope">
            <el-button 
              icon="Edit" 
              text 
              type="primary" 
              @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button 
              icon="Delete" 
              text 
              type="danger" 
              @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <pagination 
        v-if="pagination.total > 0"
        @size-change="sizeChangeHandle" 
        @current-change="currentChangeHandle" 
        v-bind="pagination" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </template>

    <!-- 新增/编辑表单弹窗 -->
    <form-dialog ref="formDialogRef" :current-row="currentRow" @refresh="getRecordList" />
  </el-dialog>
</template>

<script setup lang="ts" name="ClassThemeRecordDialog">
import { ref, reactive } from 'vue'
import { fetchRecordList, delRecord } from '/@/api/stuwork/classtheme'
import { useMessage, useMessageBox } from '/@/hooks/message'
import { parseTime } from '/@/utils/formatTime'
import FormDialog from './recordForm.vue'

// 定义变量内容
const visible = ref(false)
const loading = ref(false)
const formDialogRef = ref()
const searchFormRef = ref()
const recordList = ref<any[]>([])
const currentRow = ref<any>(null)
const queryForm = reactive({
  title: ''
})
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 查看文件
const handleViewFile = (url: string) => {
  if (url) {
    window.open(url, '_blank')
  }
}

// 重置
const handleReset = () => {
  searchFormRef.value?.resetFields()
  queryForm.title = ''
  pagination.current = 1
  getRecordList()
}

// 新增
const handleAdd = () => {
  formDialogRef.value?.openDialog('add')
}

// 编辑
const handleEdit = (row: any) => {
  formDialogRef.value?.openDialog('edit', row)
}

// 删除
const handleDelete = async (row: any) => {
  const { confirm } = useMessageBox()
  try {
    await confirm('确定要删除该上传记录吗？')
    await delRecord([row.id])
    useMessage().success('删除成功')
    getRecordList()
  } catch (err: any) {
    if (err !== 'cancel') {
      useMessage().error(err.msg || '删除失败')
    }
  }
}

// 打开弹窗
const openDialog = async (row: any) => {
  visible.value = true
  currentRow.value = row
  recordList.value = []
  queryForm.title = ''
  pagination.current = 1
  pagination.total = 0
  
  if (row) {
    await getRecordList()
  }
}

// 获取上传记录列表
const getRecordList = async () => {
  if (!currentRow.value) return
  
  loading.value = true
  try {
    const res = await fetchRecordList({
      schoolYear: currentRow.value.schoolYear,
      schoolTerm: currentRow.value.schoolTerm,
      deptCode: currentRow.value.deptCode,
      classNo: currentRow.value.classNo,
      title: queryForm.title,
      current: pagination.current,
      size: pagination.size
    })
    
    if (res.data && res.data.records) {
      recordList.value = res.data.records
      pagination.total = res.data.total || 0
    } else {
      recordList.value = []
      pagination.total = 0
    }
  } catch (err) {
    console.error('获取上传记录失败', err)
    recordList.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 分页大小改变
const sizeChangeHandle = (size: number) => {
  pagination.size = size
  pagination.current = 1
  getRecordList()
}

// 当前页改变
const currentChangeHandle = (current: number) => {
  pagination.current = current
  getRecordList()
}

// 暴露方法
defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
</style>