343 lines
14 KiB
HTML
343 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>喜报管理系统 - 管理页面</title>
|
|
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
|
|
<script src="//unpkg.com/vue@3"></script>
|
|
<script src="//unpkg.com/element-plus"></script>
|
|
<script src="//unpkg.com/@element-plus/icons-vue"></script>
|
|
<style>
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
.header {
|
|
margin-bottom: 30px;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 20px;
|
|
}
|
|
.table-operations {
|
|
margin-right: 10px;
|
|
}
|
|
.el-table {
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
.el-pagination {
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
}
|
|
.el-dialog__body {
|
|
padding: 30px 20px;
|
|
}
|
|
.upload-demo {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<el-container>
|
|
<el-main>
|
|
<div class="container">
|
|
<div class="header">
|
|
<el-row :gutter="20" justify="space-between" align="middle">
|
|
<el-col :span="16">
|
|
<h1>喜报管理系统 - 管理页面</h1>
|
|
</el-col>
|
|
<el-col :span="8" style="text-align: right;">
|
|
<el-button @click="goToIndex" style="margin-right: 10px">返回首页</el-button>
|
|
<el-button type="primary" @click="showUploadDialog">上传喜报</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
|
|
<el-table :data="paginatedNews" style="width: 100%" v-loading="loading">
|
|
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
|
<el-table-column prop="project_name" label="项目名称" width="250"></el-table-column>
|
|
<el-table-column prop="points" label="签单点数" width="120"></el-table-column>
|
|
<el-table-column prop="office" label="代表处" width="150"></el-table-column>
|
|
<el-table-column prop="upload_time" label="上传时间" width="180">
|
|
<template #default="scope">
|
|
{{ formatDate(scope.row.upload_time) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200">
|
|
<template #default="scope">
|
|
<el-button size="small" @click="showEditDialog(scope.row)">编辑</el-button>
|
|
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<el-pagination
|
|
v-model:current-page="currentPage"
|
|
v-model:page-size="pageSize"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="newsList.length"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
background
|
|
class="pagination"> </el-pagination>
|
|
|
|
<el-dialog v-model="uploadDialogVisible" title="上传喜报" width="500px">
|
|
<el-upload
|
|
class="upload-demo"
|
|
drag
|
|
action="/api/upload"
|
|
:on-success="handleUploadSuccess"
|
|
:on-error="handleUploadError">
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
<div class="el-upload__text">拖拽文件到此处或 <em>点击上传</em></div>
|
|
</el-upload>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<!-- 编辑对话框 -->
|
|
<el-dialog v-model="editDialogVisible" title="编辑喜报信息" width="500px">
|
|
<el-form :model="editForm" label-width="100px">
|
|
<el-form-item label="项目名称">
|
|
<el-input v-model="editForm.project_name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="签单点数">
|
|
<el-input-number v-model="editForm.points" :min="0"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="代表处">
|
|
<el-select v-model="editForm.office" placeholder="选择代表处">
|
|
<el-option
|
|
v-for="office in offices"
|
|
:key="office"
|
|
:label="office"
|
|
:value="office">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<span class="dialog-footer">
|
|
<el-button @click="editDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="handleEdit">确定</el-button>
|
|
</span>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</el-main>
|
|
|
|
</el-container>
|
|
</div>
|
|
|
|
<script>
|
|
const { createApp, ref, computed } = Vue
|
|
const app = createApp({
|
|
setup() {
|
|
// 导入所需的图标组件
|
|
const { UploadFilled } = ElementPlusIconsVue
|
|
// 确保返回UploadFilled组件以供模板使用
|
|
const newsList = ref([])
|
|
const offices = ref([])
|
|
const uploadDialogVisible = ref(false)
|
|
const editDialogVisible = ref(false)
|
|
const loading = ref(false)
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(10)
|
|
const editForm = ref({
|
|
id: null,
|
|
project_name: '',
|
|
points: 0,
|
|
office: ''
|
|
})
|
|
|
|
// 分页数据
|
|
const paginatedNews = computed(() => {
|
|
const start = (currentPage.value - 1) * pageSize.value
|
|
const end = start + pageSize.value
|
|
return newsList.value.slice(start, end)
|
|
})
|
|
|
|
// 处理每页显示数量变化
|
|
const handleSizeChange = (val) => {
|
|
pageSize.value = val
|
|
currentPage.value = 1
|
|
}
|
|
|
|
// 处理页码变化
|
|
const handleCurrentChange = (val) => {
|
|
currentPage.value = val
|
|
}
|
|
|
|
// 返回首页
|
|
const goToIndex = () => {
|
|
window.location.href = '/'
|
|
}
|
|
|
|
// 获取所有喜报数据
|
|
const fetchNews = async () => {
|
|
loading.value = true
|
|
try {
|
|
const response = await fetch('/api/news')
|
|
const data = await response.json()
|
|
newsList.value = data
|
|
} catch (error) {
|
|
console.error('获取数据失败:', error)
|
|
ElementPlus.ElMessage.error('获取数据失败')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 获取代表处列表
|
|
const fetchOffices = async () => {
|
|
try {
|
|
const response = await fetch('/api/offices')
|
|
const data = await response.json()
|
|
offices.value = data
|
|
} catch (error) {
|
|
console.error('获取代表处列表失败:', error)
|
|
}
|
|
}
|
|
|
|
// 格式化日期
|
|
const formatDate = (dateStr) => {
|
|
const date = new Date(dateStr)
|
|
return date.toLocaleString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})
|
|
}
|
|
|
|
// 显示上传对话框
|
|
const showUploadDialog = () => {
|
|
uploadDialogVisible.value = true
|
|
}
|
|
|
|
// 显示编辑对话框
|
|
const showEditDialog = (row) => {
|
|
editForm.value = { ...row }
|
|
editDialogVisible.value = true
|
|
}
|
|
|
|
// 处理上传成功
|
|
const handleUploadSuccess = () => {
|
|
ElementPlus.ElMessage.success('上传成功')
|
|
uploadDialogVisible.value = false
|
|
fetchNews()
|
|
}
|
|
|
|
// 处理上传失败
|
|
const handleUploadError = () => {
|
|
ElementPlus.ElMessage.error('上传失败')
|
|
uploadDialogVisible.value = false
|
|
}
|
|
|
|
// 处理编辑
|
|
const handleEdit = async () => {
|
|
if (!editForm.value.id) {
|
|
ElementPlus.ElMessage.error('无效的记录ID')
|
|
return
|
|
}
|
|
try {
|
|
const response = await fetch(`/api/news/${editForm.value.id}`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(editForm.value)
|
|
})
|
|
|
|
if (response.ok) {
|
|
ElementPlus.ElMessage.success('更新成功')
|
|
editDialogVisible.value = false
|
|
fetchNews()
|
|
} else {
|
|
ElementPlus.ElMessage.error('更新失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('更新失败:', error)
|
|
ElementPlus.ElMessage.error('更新失败')
|
|
}
|
|
}
|
|
|
|
// 处理删除
|
|
const handleDelete = async (row) => {
|
|
if (!row || !row.id) {
|
|
ElementPlus.ElMessage.error('无效的记录ID')
|
|
return
|
|
}
|
|
try {
|
|
await ElementPlus.ElMessageBox.confirm(
|
|
'确定要删除这条记录吗？',
|
|
'警告',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
}
|
|
)
|
|
|
|
const response = await fetch(`/api/news/${row.id}`, {
|
|
method: 'DELETE'
|
|
})
|
|
|
|
if (response.ok) {
|
|
ElementPlus.ElMessage.success('删除成功')
|
|
fetchNews()
|
|
} else {
|
|
ElementPlus.ElMessage.error('删除失败')
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
console.error('删除失败:', error)
|
|
ElementPlus.ElMessage.error('删除失败')
|
|
}
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
fetchNews()
|
|
fetchOffices()
|
|
|
|
return {
|
|
newsList,
|
|
paginatedNews,
|
|
offices,
|
|
uploadDialogVisible,
|
|
editDialogVisible,
|
|
editForm,
|
|
loading,
|
|
currentPage,
|
|
pageSize,
|
|
formatDate,
|
|
showUploadDialog,
|
|
showEditDialog,
|
|
handleUploadSuccess,
|
|
handleUploadError,
|
|
handleEdit,
|
|
handleDelete,
|
|
handleSizeChange,
|
|
handleCurrentChange,
|
|
goToIndex,
|
|
UploadFilled
|
|
}
|
|
}
|
|
})
|
|
|
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
|
app.component(key, component)
|
|
}
|
|
app.use(ElementPlus)
|
|
app.mount('#app')
|
|
</script>
|
|
</body>
|
|
</html> |