songjie
3 weeks ago
3 changed files with 427 additions and 0 deletions
-
36src/api/eventManagement.js
-
6src/router/index.js
-
385src/views/EventManagement/LearningPageConfig.vue
@ -0,0 +1,385 @@ |
|||
<template> |
|||
<div class="page-container"> |
|||
<div class="search-container"> |
|||
<el-button type="danger" @click="addArticle">添加关联文章</el-button> |
|||
</div> |
|||
|
|||
<!-- 数据 --> |
|||
<el-table |
|||
:data="tableData" |
|||
style="width: 100%; margin-top: 20px" |
|||
header-cell-class-name="table-header" |
|||
@sort-change="handleSortChange" |
|||
:default-sort="{ prop: null, order: null }" |
|||
class="table-rounded" |
|||
:loading="tableLoading" |
|||
> |
|||
<el-table-column |
|||
prop="id" |
|||
label="序号" |
|||
align="center" |
|||
header-align="center" |
|||
width="80" |
|||
> |
|||
<template #default="scope"> |
|||
{{ (currentPage - 1) * pageSize + scope.$index + 1 }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="article_id" |
|||
label="文章id" |
|||
align="center" |
|||
header-align="center" |
|||
/> |
|||
<el-table-column |
|||
prop="article_title" |
|||
label="文章标题" |
|||
align="center" |
|||
header-align="center" |
|||
/> |
|||
<el-table-column label="状态" prop="status" align="center" header-align="center"> |
|||
<template #default="scope"> |
|||
<el-switch |
|||
v-model="scope.row.status" |
|||
:active-value="1" |
|||
:inactive-value="0" |
|||
inline-prompt |
|||
style=" |
|||
--el-switch-on-color: #13ce66; |
|||
--el-switch-off-color: #ff4949; |
|||
" |
|||
active-text="ON" |
|||
inactive-text="OFF" |
|||
:disabled="activeRecordId && activeRecordId !== scope.row.id" |
|||
:before-change="() => beforeChangeState(scope.row)" |
|||
> |
|||
</el-switch> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column label="操作" align="center" header-align="center"> |
|||
<template #default="scope"> |
|||
<el-button type="text" @click="deleteArticle(scope.row)">删除</el-button> |
|||
<el-button type="text" @click="editArticle(scope.row)">编辑</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
|
|||
<!-- 分页组件 --> |
|||
<div class="demo-pagination-block"> |
|||
<el-pagination |
|||
@size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page="currentPage" |
|||
:page-sizes="[10, 15, 20, 50, 100]" |
|||
:page-size="pageSize" |
|||
layout="total, sizes, prev, pager, next, jumper" |
|||
:total="datatotal" |
|||
/> |
|||
</div> |
|||
<el-dialog v-model="dialogFormVisible" width="500" :show-close="false" :title="isEditMode ? '更改关联文章' : '添加关联文章'"> |
|||
<el-form |
|||
:model="form" |
|||
style="width: 400px; margin: 0 auto" |
|||
:rules="rules" |
|||
ref="formRef" |
|||
> |
|||
<el-form-item label="文章id" prop="article_id"> |
|||
<el-input |
|||
v-model="form.article_id" |
|||
type="number" |
|||
autocomplete="off" |
|||
placeholder="请输入文章id" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="dialogFormVisible = false">取消</el-button> |
|||
<el-button type="danger" @click="submitForm(formRef)"> |
|||
提交 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { ref, reactive, onMounted, computed, watch } from "vue"; |
|||
import { ElMessage, ElMessageBox } from "element-plus"; |
|||
import router from "../../router"; |
|||
import { |
|||
getLearningPageListApi, |
|||
addLearningPageApi, |
|||
deleteLearningPageApi, |
|||
changeLearningPageStatusApi, |
|||
} from "../../api/eventManagement"; |
|||
|
|||
const formRef = ref(); |
|||
const form = reactive({ |
|||
id: null, |
|||
article_id: null, |
|||
}); |
|||
|
|||
const validateNum = (rule, value, callback) => { |
|||
if (value === "" || value === null || value === undefined) { |
|||
callback(); |
|||
return; |
|||
} |
|||
if (Number(value) < 0) { |
|||
callback(new Error("不能为负数")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
|
|||
const rules = { |
|||
article_id: [ |
|||
{ required: true, message: "请输入文章id", trigger: "blur" }, |
|||
{ validator: validateNum, trigger: "blur" }, |
|||
], |
|||
}; |
|||
|
|||
// token |
|||
const token = localStorage.getItem("token"); |
|||
|
|||
const dialogFormVisible = ref(false); |
|||
const isEditMode = ref(false); |
|||
|
|||
// 表格数据 |
|||
const tableData = ref([]); |
|||
const tableLoading = ref(false); |
|||
const datatotal = ref(0); |
|||
const activeRecordId = ref(null); |
|||
|
|||
// 分页参数 |
|||
const currentPage = ref(1); |
|||
const pageSize = ref(15); |
|||
|
|||
const beforeChangeState = (row) => { |
|||
return new Promise(async (resolve, reject) => { |
|||
try { |
|||
const targetStatus = row.status === 1 ? 0 : 1; |
|||
// 检查是否有其他记录处于on状态 |
|||
if (targetStatus === 1 && activeRecordId.value && activeRecordId.value !== row.id) { |
|||
ElMessage.error("已有状态为ON的记录，无法修改其他记录的状态"); |
|||
reject(new Error("已有状态为ON的记录")); |
|||
return; |
|||
} |
|||
await changeLearningPageStatusApi({ |
|||
token: token, |
|||
id: row.id, |
|||
status: targetStatus, |
|||
}); |
|||
ElMessage.success("状态更新成功"); |
|||
resolve(true); |
|||
fetchTableData(); |
|||
} catch (error) { |
|||
reject(new Error("状态更新失败")); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
// 重置表单数据 |
|||
const resetForm = () => { |
|||
form.id = null; |
|||
form.article_id = null; |
|||
}; |
|||
|
|||
// 添加按钮 |
|||
const addArticle = () => { |
|||
resetForm(); |
|||
isEditMode.value = false; |
|||
dialogFormVisible.value = true; |
|||
}; |
|||
|
|||
// 编辑按钮 |
|||
const editArticle = (row) => { |
|||
form.id = row.id; |
|||
form.article_id = row.article_id; |
|||
isEditMode.value = true; |
|||
dialogFormVisible.value = true; |
|||
}; |
|||
|
|||
const submitForm = async () => { |
|||
try { |
|||
await formRef.value.validate(); |
|||
const requestParams = { |
|||
token: token, |
|||
article_id: form.article_id, |
|||
}; |
|||
if (isEditMode.value) { |
|||
requestParams.id = form.id; |
|||
await addLearningPageApi(requestParams); |
|||
ElMessage.success("编辑成功"); |
|||
} else { |
|||
await addLearningPageApi(requestParams); |
|||
ElMessage.success("添加成功"); |
|||
} |
|||
dialogFormVisible.value = false; |
|||
fetchTableData(); |
|||
} catch (error) {} |
|||
}; |
|||
|
|||
const deleteArticle = async (row) => { |
|||
try { |
|||
await ElMessageBox.confirm("确定要删除吗？", "确认删除", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
confirmButtonClass: "custom-confirm-btn", |
|||
}); |
|||
const requestParams = { |
|||
token: token, |
|||
id: row.id, |
|||
}; |
|||
const data = await deleteLearningPageApi(requestParams); |
|||
ElMessage.success("删除成功"); |
|||
fetchTableData(); |
|||
} catch (error) { |
|||
if (error === "cancel") { |
|||
ElMessage.info("已取消删除"); |
|||
} else { |
|||
ElMessage.error("删除失败"); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
// 获取表格数据 |
|||
const fetchTableData = async () => { |
|||
try { |
|||
tableLoading.value = true; |
|||
const requestParams = { |
|||
token: token, |
|||
page: currentPage.value, |
|||
page_size: pageSize.value, |
|||
}; |
|||
const data = await getLearningPageListApi(requestParams); |
|||
tableData.value = data.list; |
|||
datatotal.value = data.total; |
|||
// 检查是否有状态为on的记录 |
|||
const activeRecord = data.list.find(item => item.status === 1); |
|||
activeRecordId.value = activeRecord ? activeRecord.id : null; |
|||
} catch (error) { |
|||
console.error("获取表格数据失败：", error); |
|||
tableData.value = []; |
|||
datatotal.value = 0; |
|||
activeRecordId.value = null; |
|||
} finally { |
|||
tableLoading.value = false; |
|||
} |
|||
}; |
|||
|
|||
// 组件挂载时：获取地区列表 + 初始化表格数据 |
|||
onMounted(() => { |
|||
fetchTableData(); |
|||
}); |
|||
|
|||
// 分页方法 |
|||
const handleSizeChange = (val) => { |
|||
pageSize.value = val; |
|||
fetchTableData(); |
|||
console.log(`每页 ${val} 条`); |
|||
}; |
|||
|
|||
const handleCurrentChange = (val) => { |
|||
currentPage.value = val; |
|||
fetchTableData(); |
|||
console.log(`当前页: ${val}`); |
|||
}; |
|||
|
|||
const handleSortChange = (val) => { |
|||
console.log("排序改变:", val); |
|||
}; |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 父容器 */ |
|||
.page-container { |
|||
position: relative; |
|||
min-height: 600px; |
|||
} |
|||
|
|||
/* 搜索区域 */ |
|||
.search-container { |
|||
display: flex; |
|||
height: auto; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: flex-start; |
|||
gap: 12px; |
|||
align-self: stretch; |
|||
border-radius: 8px; |
|||
background: #fefaf9; |
|||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); |
|||
padding: 15px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
/* 表格样式 */ |
|||
.table-rounded { |
|||
border-radius: 12px !important; |
|||
overflow: hidden !important; |
|||
border: 1px solid #e4e7ed !important; |
|||
height: 750px; |
|||
} |
|||
|
|||
.table-header { |
|||
text-align: center !important; |
|||
font-weight: 800 !important; |
|||
font-size: 15px !important; |
|||
color: #333 !important; |
|||
background-color: #f8f9fa !important; |
|||
} |
|||
|
|||
.el-table__cell { |
|||
border-right: none !important; |
|||
border-bottom: 1px solid #e4e7ed !important; |
|||
} |
|||
|
|||
.el-table__header th.el-table__cell { |
|||
border-right: none !important; |
|||
border-bottom: 1px solid #e4e7ed !important; |
|||
} |
|||
|
|||
.el-table__row:hover .el-table__cell { |
|||
background-color: #fafafa !important; |
|||
} |
|||
|
|||
/* 分页组件样式 */ |
|||
.demo-pagination-block { |
|||
display: flex; |
|||
width: 100%; |
|||
height: 44px; |
|||
padding: 0 16px; |
|||
align-items: center; |
|||
gap: 16px; |
|||
position: absolute; |
|||
margin-top: 10px; |
|||
border-radius: 0 0 3px 3px; |
|||
border-top: 1px solid #eaeaea; |
|||
background: #fefbfb; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.tip { |
|||
font-size: 12px; |
|||
color: #8c939d; |
|||
} |
|||
</style> |
|||
|
|||
<style> |
|||
.custom-confirm-btn { |
|||
background: #e13d52; |
|||
border-color: #e13d52; |
|||
color: white !important; |
|||
border-radius: 6px !important; |
|||
padding: 8px 16px !important; |
|||
} |
|||
|
|||
.custom-confirm-btn:hover { |
|||
background: #d88b95; |
|||
border-color: #d88b95; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue