deepChartBack/src/views/EventManagement/LearningPageConfig.vue

<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>