You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
385 lines
9.4 KiB
385 lines
9.4 KiB
<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>
|