Add project introduction module to admin layout and router
- Add new sidebar menu item for project introduction in AdminLayout - Create new route for projects management in router configuration - Update formatDateTime utility function with improved error handling and default return value
This commit is contained in:
parent
739aca7edb
commit
777532f396
56
src/api/projects.js
Normal file
56
src/api/projects.js
Normal file
@ -0,0 +1,56 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 获取项目简介列表
|
||||
* @param {Object} params - 查询参数
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function getProjectList(params) {
|
||||
return request.get('/api/admin/projects', { params })
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取项目简介详情
|
||||
* @param {number|string} id - 项目ID
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function getProjectDetail(id) {
|
||||
return request.get(`/api/admin/projects/${id}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建项目简介
|
||||
* @param {Object} data - 项目数据
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function createProject(data) {
|
||||
return request.post('/api/admin/projects', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新项目简介
|
||||
* @param {number|string} id - 项目ID
|
||||
* @param {Object} data - 更新数据
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function updateProject(id, data) {
|
||||
return request.put(`/api/admin/projects/${id}`, data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除项目简介
|
||||
* @param {number|string} id - 项目ID
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function deleteProject(id) {
|
||||
return request.delete(`/api/admin/projects/${id}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 批量更新排序
|
||||
* @param {Object} data - 排序数据
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function updateProjectSort(data) {
|
||||
return request.post('/api/admin/projects/sort/batch', data)
|
||||
}
|
||||
@ -167,6 +167,14 @@ const handleLogout = () => {
|
||||
<el-menu-item index="/feedback/suggestions">意见反馈</el-menu-item>
|
||||
<el-menu-item index="/feedback/satisfaction">满意度调查</el-menu-item>
|
||||
</el-sub-menu>
|
||||
|
||||
<el-sub-menu index="projects">
|
||||
<template #title>
|
||||
<el-icon><component :is="icons.DataLine" /></el-icon>
|
||||
<span>项目简介</span>
|
||||
</template>
|
||||
<el-menu-item index="/projects">项目简介</el-menu-item>
|
||||
</el-sub-menu>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
|
||||
@ -161,6 +161,12 @@ const router = createRouter({
|
||||
name: 'SystemData',
|
||||
component: () => import('@/views/system/data/index.vue'),
|
||||
meta: { title: '数据管理', icon: 'data' }
|
||||
},
|
||||
{
|
||||
path: 'projects',
|
||||
name: 'Projects',
|
||||
component: () => import('@/views/projects/index.vue'),
|
||||
meta: { title: '项目简介管理', icon: 'data' }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,22 +1,25 @@
|
||||
/**
|
||||
* 格式化日期时间
|
||||
* @param {string|number|Date} time 需要格式化的时间
|
||||
* @param {string} [format='YYYY-MM-DD HH:mm:ss'] 格式化的格式
|
||||
* @param {string|number|Date} time 时间
|
||||
* @param {string} format 格式，默认为 'YYYY-MM-DD HH:mm:ss'
|
||||
* @returns {string} 格式化后的时间字符串
|
||||
*/
|
||||
export function formatDateTime(time, format = 'YYYY-MM-DD HH:mm:ss') {
|
||||
if (!time) return '';
|
||||
if (!time) {
|
||||
return '-'
|
||||
}
|
||||
|
||||
const date = new Date(time);
|
||||
const date = new Date(time)
|
||||
if (isNaN(date.getTime())) {
|
||||
return '-'
|
||||
}
|
||||
|
||||
if (isNaN(date.getTime())) return '';
|
||||
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||
|
||||
return format
|
||||
.replace('YYYY', year)
|
||||
@ -24,7 +27,7 @@ export function formatDateTime(time, format = 'YYYY-MM-DD HH:mm:ss') {
|
||||
.replace('DD', day)
|
||||
.replace('HH', hours)
|
||||
.replace('mm', minutes)
|
||||
.replace('ss', seconds);
|
||||
.replace('ss', seconds)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
541
src/views/projects/index.vue
Normal file
541
src/views/projects/index.vue
Normal file
@ -0,0 +1,541 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Search, Plus, Edit, Delete } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getProjectList, deleteProject, updateProjectSort, createProject, updateProject } from '@/api/projects'
|
||||
import { formatDateTime } from '@/utils/format'
|
||||
import { sortArrayByField } from '@/utils/sort'
|
||||
|
||||
// 定义表格数据结构
|
||||
const tableData = ref([])
|
||||
const originalData = ref([]) // 保存原始数据
|
||||
const loading = ref(false)
|
||||
|
||||
// 定义分页数据
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
limit: 10,
|
||||
total: 0
|
||||
})
|
||||
|
||||
// 定义搜索表单数据
|
||||
const searchForm = ref({
|
||||
title: '',
|
||||
type: ''
|
||||
})
|
||||
|
||||
// 类型选项
|
||||
const typeOptions = [
|
||||
{ label: '关于我们', value: 'about' },
|
||||
{ label: '团队介绍', value: 'team' },
|
||||
{ label: '环境介绍', value: 'environment' }
|
||||
]
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{ prop: 'title', label: '标题', minWidth: 180 },
|
||||
{ prop: 'content', label: '内容', minWidth: 300 },
|
||||
{ prop: 'type', label: '类型', width: 120 },
|
||||
{ prop: 'sort_order', label: '排序', width: 80 },
|
||||
{ prop: 'status', label: '状态', width: 80 },
|
||||
{ prop: 'created_at', label: '创建时间', width: 180 },
|
||||
{ prop: 'creator_name', label: '创建人', width: 120 },
|
||||
{ prop: 'updated_at', label: '更新时间', width: 180 },
|
||||
{ prop: 'updater_name', label: '更新人', width: 120 },
|
||||
{ prop: 'operation', label: '操作', width: 150, fixed: 'right' }
|
||||
]
|
||||
|
||||
// 弹窗相关
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新增项目简介')
|
||||
const formRef = ref(null)
|
||||
const formData = ref({
|
||||
title: '',
|
||||
content: '',
|
||||
cover_image: '',
|
||||
type: '',
|
||||
sort_order: 0,
|
||||
status: 1
|
||||
})
|
||||
|
||||
// 表单校验规则
|
||||
const rules = {
|
||||
title: [
|
||||
{ required: true, message: '请输入标题', trigger: 'blur' },
|
||||
{ min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: '请选择类型', trigger: 'change' }
|
||||
],
|
||||
content: [
|
||||
{ required: true, message: '请输入内容', trigger: 'blur' }
|
||||
],
|
||||
sort_order: [
|
||||
{ required: true, message: '请输入排序', trigger: 'blur' },
|
||||
{ type: 'number', message: '排序必须为数字', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 获取列表数据
|
||||
const getList = async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
const params = {
|
||||
page: pagination.value.page,
|
||||
page_size: pagination.value.limit
|
||||
}
|
||||
const res = await getProjectList(params)
|
||||
if (res.success) {
|
||||
const sortedData = sortArrayByField(res.data.list, 'created_at', 'asc')
|
||||
originalData.value = sortedData // 保存原始数据
|
||||
// 应用搜索过滤
|
||||
tableData.value = filterData(sortedData)
|
||||
pagination.value.total = res.data.pagination.total
|
||||
pagination.value.page = res.data.pagination.page
|
||||
pagination.value.limit = res.data.pagination.page_size
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取列表失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取列表失败：', error)
|
||||
ElMessage.error('获取列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤数据
|
||||
const filterData = (data) => {
|
||||
return data.filter(item => {
|
||||
const titleMatch = !searchForm.value.title ||
|
||||
item.title.toLowerCase().includes(searchForm.value.title.toLowerCase())
|
||||
const typeMatch = !searchForm.value.type ||
|
||||
item.type === searchForm.value.type
|
||||
return titleMatch && typeMatch
|
||||
})
|
||||
}
|
||||
|
||||
// 处理搜索
|
||||
const handleSearch = () => {
|
||||
tableData.value = filterData(originalData.value)
|
||||
}
|
||||
|
||||
// 处理重置
|
||||
const handleReset = () => {
|
||||
searchForm.value = {
|
||||
title: '',
|
||||
type: ''
|
||||
}
|
||||
tableData.value = originalData.value
|
||||
}
|
||||
|
||||
// 处理分页变化
|
||||
const handleSizeChange = (val) => {
|
||||
pagination.value.limit = val
|
||||
getList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (val) => {
|
||||
pagination.value.page = val
|
||||
getList()
|
||||
}
|
||||
|
||||
// 处理新增
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '新增项目简介'
|
||||
formData.value = {
|
||||
title: '',
|
||||
content: '',
|
||||
cover_image: '',
|
||||
type: '',
|
||||
sort_order: 0,
|
||||
status: 1
|
||||
}
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 处理编辑
|
||||
const handleEdit = (row) => {
|
||||
dialogTitle.value = '编辑项目简介'
|
||||
formData.value = { ...row }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
// 处理删除
|
||||
const handleDelete = async (row) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定要删除该项目简介吗？', '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
await deleteProject(row.id)
|
||||
ElMessage.success('删除成功')
|
||||
getList()
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('删除失败：', error)
|
||||
ElMessage.error('删除失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 处理排序变化
|
||||
const handleSortChange = async (row) => {
|
||||
try {
|
||||
await updateProjectSort({
|
||||
id: row.id,
|
||||
sort_order: row.sort_order
|
||||
})
|
||||
ElMessage.success('更新排序成功')
|
||||
getList()
|
||||
} catch (error) {
|
||||
console.error('更新排序失败：', error)
|
||||
ElMessage.error('更新排序失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理图片上传成功
|
||||
const handleUploadSuccess = (res) => {
|
||||
formData.value.cover_image = res.url
|
||||
ElMessage.success('上传成功')
|
||||
}
|
||||
|
||||
// 处理图片上传失败
|
||||
const handleUploadError = () => {
|
||||
ElMessage.error('上传失败')
|
||||
}
|
||||
|
||||
// 处理表单提交
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
try {
|
||||
await formRef.value.validate()
|
||||
|
||||
if (formData.value.id) {
|
||||
await updateProject(formData.value.id, formData.value)
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createProject(formData.value)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
|
||||
dialogVisible.value = false
|
||||
getList()
|
||||
} catch (error) {
|
||||
console.error('提交失败：', error)
|
||||
ElMessage.error('提交失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理弹窗关闭
|
||||
const handleDialogClose = () => {
|
||||
formRef.value?.resetFields()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
|
||||
// 页面加载时获取数据
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="project-introduction">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-container">
|
||||
<el-form :model="searchForm" inline>
|
||||
<el-form-item label="标题">
|
||||
<el-input
|
||||
v-model="searchForm.title"
|
||||
placeholder="请输入标题"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select
|
||||
v-model="searchForm.type"
|
||||
placeholder="请选择类型"
|
||||
clearable
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<div class="operation-container">
|
||||
<el-button type="primary" :icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
width="60"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
v-for="col in columns"
|
||||
:key="col.prop"
|
||||
:prop="col.prop"
|
||||
:label="col.label"
|
||||
:min-width="col.minWidth"
|
||||
:width="col.width"
|
||||
:fixed="col.fixed"
|
||||
align="center"
|
||||
>
|
||||
<template #default="scope">
|
||||
<template v-if="col.prop === 'type'">
|
||||
<el-tag
|
||||
:type="scope.row.type === 'about' ? 'info' : scope.row.type === 'team' ? 'success' : 'warning'"
|
||||
>
|
||||
{{ typeOptions.find(item => item.value === scope.row.type)?.label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.prop === 'status'">
|
||||
<el-tag
|
||||
:type="scope.row.status === 1 ? 'success' : 'danger'"
|
||||
effect="plain"
|
||||
>
|
||||
{{ scope.row.status === 1 ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.prop === 'content'">
|
||||
<el-tooltip
|
||||
:content="scope.row.content"
|
||||
placement="top"
|
||||
:hide-after="0"
|
||||
>
|
||||
<div class="content-cell">{{ scope.row.content }}</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.prop === 'sort_order'">
|
||||
{{ scope.row.sort_order }}
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.prop === 'created_at' || col.prop === 'updated_at'">
|
||||
{{ formatDateTime(scope.row[col.prop]) }}
|
||||
</template>
|
||||
|
||||
<template v-else-if="col.prop === 'operation'">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="Edit"
|
||||
link
|
||||
@click="handleEdit(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
:icon="Delete"
|
||||
link
|
||||
@click="handleDelete(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ scope.row[col.prop] }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
v-if="pagination.total > pagination.limit"
|
||||
v-model:current-page="pagination.page"
|
||||
v-model:page-size="pagination.limit"
|
||||
:total="pagination.total"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单弹窗 -->
|
||||
<el-dialog
|
||||
:title="dialogTitle"
|
||||
v-model="dialogVisible"
|
||||
width="700px"
|
||||
@close="handleDialogClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input
|
||||
v-model="formData.title"
|
||||
placeholder="请输入标题"
|
||||
maxlength="200"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-select
|
||||
v-model="formData.type"
|
||||
placeholder="请选择类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="封面图片" prop="cover_image">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="/api/admin/upload"
|
||||
:show-file-list="false"
|
||||
:on-success="handleUploadSuccess"
|
||||
:on-error="handleUploadError"
|
||||
accept="image/*"
|
||||
>
|
||||
<img
|
||||
v-if="formData.cover_image"
|
||||
:src="formData.cover_image"
|
||||
class="avatar"
|
||||
>
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="内容" prop="content">
|
||||
<el-input
|
||||
v-model="formData.content"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序" prop="sort_order">
|
||||
<el-input-number
|
||||
v-model="formData.sort_order"
|
||||
:min="0"
|
||||
:max="999"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-switch
|
||||
v-model="formData.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleDialogClose">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.project-introduction {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.operation-container {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader {
|
||||
:deep(.el-upload) {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
|
||||
:deep(.el-upload:hover) {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
text-align: center;
|
||||
line-height: 178px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.content-cell {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user