From 97d65b09a0fe2b57d3fc90b6f3866b9a7e2c5587 Mon Sep 17 00:00:00 2001
From: songjie <bestsongj@163.com>
Date: Fri, 6 Feb 2026 15:58:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E9=A1=B5=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E9=9C=80=E6=B1=82=E5=AE=8C=E6=88=90=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/eventManagement.js                       |  36 +++
 src/router/index.js                              |   6 +
 src/views/EventManagement/LearningPageConfig.vue | 385 +++++++++++++++++++++++
 3 files changed, 427 insertions(+)
 create mode 100644 src/views/EventManagement/LearningPageConfig.vue

diff --git a/src/api/eventManagement.js b/src/api/eventManagement.js
index 88ca225..5d46bd7 100644
--- a/src/api/eventManagement.js
+++ b/src/api/eventManagement.js
@@ -53,4 +53,40 @@ export function changeStatusApi(params) {
     method: "post",
     data: params,
   });
+}
+
+// 获取学习页配置列表--已接
+export function getLearningPageListApi(params) {
+  return request({
+    url: base_url + "/admin/studyArticle/list",
+    method: "post",
+    data: params,
+  });
+}
+
+// 添加关联文章--已接
+export function addLearningPageApi(params) {
+  return request({
+    url: base_url + "/admin/studyArticle/save",
+    method: "post",
+    data: params,
+  });
+}
+
+// 删除学习页配置--已接
+export function deleteLearningPageApi(params) {
+  return request({
+    url: base_url + "/admin/studyArticle/delete",
+    method: "post",
+    data: params,
+  });
+}
+
+// 修改关联状态--已接
+export function changeLearningPageStatusApi(params) {
+  return request({
+    url: base_url + "/admin/studyArticle/status",
+    method: "post",
+    data: params,
+  });
 }
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 483e1dd..8c82995 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -123,6 +123,12 @@ const routes = [
                 component: () => import('../views/EventManagement/ContentConfiguration.vue'),
                 meta: { title: '内容配置', showSidebar: true }
               },
+              {
+                path: 'learningPageConfig',
+                name: 'learningPageConfig',
+                component: () => import('../views/EventManagement/LearningPageConfig.vue'),
+                meta: { title: '学习页配置', showSidebar: true }
+              },
             ]
           },
         ]
diff --git a/src/views/EventManagement/LearningPageConfig.vue b/src/views/EventManagement/LearningPageConfig.vue
new file mode 100644
index 0000000..5ad5354
--- /dev/null
+++ b/src/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>
\ No newline at end of file