添加文章列表

src/apis/voteDetail.js

@@ -6,3 +6,5 @@ export const apiGetAllVoteDetails = async (condition)=>request.get(`/vote/getAll
 export const apiGetExportVoteDetailList = async(condition) => request.get(`/vote/getExportVoteDetail`,{
   params: condition
 });
+export const apiGetArticleList = async() => request.get(`/vote/getVoteList`);
+

src/components/home/AsideMenu.vue

@@ -1,36 +1,28 @@
 <template>
   <div class="aside-container">
     <div class="logo">
-      <img
-        src="../../assets/logo.svg" 
-        alt="投票系统"
-        class="logo-img"
-      />
+      <img src="../../assets/logo.svg" alt="投票系统" class="logo-img" />
       <div class="logo-text">投票管理系统</div>
     </div>
 
-    <el-menu
-      router
-      :default-active="article"
-      background-color="#1a3058"
-      text-color="rgba(255,255,255,0.8)"
-      active-text-color="#ffd04b"
-      class="el-menu-vertical-demo"
-       @open="handleOpen"
-        @close="handleClose"
-    >
+    <el-menu router :default-active="article" background-color="#1a3058" text-color="rgba(255,255,255,0.8)"
+      active-text-color="#ffd04b" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
       <el-menu-item index="article">
         <el-icon><icon-menu /></el-icon>
         <span>发布文章</span>
       </el-menu-item>
-        <el-menu-item index="vote">
+      <el-menu-item index="articleList">
         <el-icon><icon-menu /></el-icon>
-          <span>投票</span>
+        <span>文章投票</span>
       </el-menu-item>
       <el-menu-item index="voteRecord">
         <el-icon><icon-menu /></el-icon>
         <span>文章投票管理</span>
       </el-menu-item>
+      <!-- <el-menu-item index="articleList">
+        <el-icon><icon-menu /></el-icon>
+        <span>文章列表</span>
+      </el-menu-item> -->
       <!-- <el-menu-item index="test">
           <el-icon><icon-menu /></el-icon>
           <span>test</span>
@@ -42,7 +34,4 @@
 <script setup>
 </script>
 
-<style scoped>
-
-
-</style>
+<style scoped></style>

src/router/index.js

@@ -1,46 +1,50 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
-      path: '/',
-      name: 'home',
+      path: "/",
+      name: "home",
       component: HomeView,
       children: [
         {
-          path: 'article',
-          name: 'article',
+          path: "article",
+          name: "article",
           // route level code-splitting
           // this generates a separate chunk (About.[hash].js) for this route
           // which is lazy-loaded when the route is visited.
-          component: () => import('@/views/Article/Article.vue'),
+          component: () => import("@/views/Article/Article.vue"),
         },
         {
-          path: 'vote',
-          name: 'vote',
-          component: () => import('@/views/Vote/Vote.vue'),
+          path: "vote",
+          name: "vote",
+          component: () => import("@/views/Vote/Vote.vue"),
         },
         {
-          path: 'voteRecord',
-          name: 'voteRecord',
-          component: () => import('@/views/VoteRecord/VoteRecord.vue'),
+          path: "voteRecord",
+          name: "voteRecord",
+          component: () => import("@/views/VoteRecord/VoteRecord.vue"),
         },
         {
-          path: 'voteDetail',
-          name: 'voteDetail',
-           component: () => import('@/views/VoteDetail/VoteDetail.vue'),
+          path: "voteDetail",
+          name: "voteDetail",
+          component: () => import("@/views/VoteDetail/VoteDetail.vue"),
         },
         {
-          path: 'test',
-          name: 'test',
-           component: () => import('@/views/test/test.vue'),
+          path: "articleList",
+          name: "articleList",
+          component: () => import("@/views/ArticleList/ArticleList.vue")
         },
-      ]
+        {
+          path: "test",
+          name: "test",
+          component: () => import("@/views/test/test.vue"),
+        },
+      ],
     },
-
   ],
-})
+});
 
-export default router
+export default router;

src/stores/voteDetail.js

@@ -1,4 +1,4 @@
-import { apiGetAllVoteDetails, apiGetExportVoteDetailList } from "@/apis/voteDetail";
+import { apiGetAllVoteDetails, apiGetArticleList, apiGetExportVoteDetailList } from "@/apis/voteDetail";
 import { defineStore } from "pinia";
 
 export const useVoteDetailStore = defineStore("VoteDetail", () => {
@@ -8,8 +8,12 @@ export const useVoteDetailStore = defineStore("VoteDetail", () => {
   const getExportVoteDetail = async (condition) => {
     return await apiGetExportVoteDetailList(condition)
   };
+  const getArticleList = async()=>{
+    return await apiGetArticleList()
+  }
   return {
     getVoteDetail,
-    getExportVoteDetail
+    getExportVoteDetail,
+    getArticleList
   };
 });

src/views/ArticleList/ArticleList.vue

@@ -0,0 +1,73 @@
+<!-- ArticleList.vue -->
+<template>
+  <div>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column label="文章标题" prop="articleTitle" />
+      <el-table-column label="是否开启投票">
+        <template #default="{ row }">
+          <span>{{ row.voteStatus === 1 ? '是' : '否' }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="发布时间" prop="createTime" />
+      <el-table-column label="操作">
+        <template #default="{ row }">
+          <el-button @click="viewArticle(row)" type="primary">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog v-model="centerDialogVisible" title="提示" width="500" align-center>
+      <span>该文章未开启投票活动</span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="centerDialogVisible = false">
+            确认
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { useVoteDetailStore } from '@/stores/voteDetail'
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router'
+import { ElTable, ElTableColumn, ElButton } from 'element-plus';
+const tableData = ref([])
+// 获取投票数据函数
+const fetchVoteData = async () => {
+  try {
+    const res = await useVoteDetailStore().getArticleList()
+    console.log(res)
+    tableData.value = res.data.data.articleList
+  } catch (err) {
+    console.error('请求失败', err)
+  }
+}
+onMounted(async () => {
+  fetchVoteData()
+})
+const router = useRouter()
+const centerDialogVisible = ref(false)
+
+
+const viewArticle = (article) => {
+  if (article.voteStatus == 0) {
+    centerDialogVisible.value = true
+    return
+  }
+
+  router.push({
+    path: '/vote',
+    query: {
+      articleId: article.articleId
+    }
+  })
+}
+</script>
+
+<style scoped>
+.el-button {
+  margin-right: 10px;
+}
+</style>

src/views/Vote/Vote.vue

@@ -66,6 +66,8 @@
 
 <script setup>
 import { ref, reactive, computed } from 'vue'
+import { useRoute } from 'vue-router';
+
 import {apiGetVote,apiAddVoteRecord,apiGetVoteIndex} from '@/apis/vote.js'
 import { ElMessage } from 'element-plus';
 // 进度条是否显示
@@ -93,9 +95,9 @@ const optionLists = reactive([{
   optionContent:"",
   count:0
 }])
-
+const route = useRoute();
 // 获取文章及其投票活动
-record.articleId = 25 // 模拟数据，此处为文章id
+record.articleId = route.query.articleId // 模拟数据，此处为文章id
 const getVote = async () => {
   try {
     const res = await apiGetVote(record.articleId)