maziyang
6 days ago
8 changed files with 217 additions and 32 deletions
-
2src/apis/vote.js
-
8src/apis/voteDetail.js
-
3src/main.js
-
12src/router/index.js
-
15src/stores/voteDetail.js
-
5src/utils/request.js
-
45src/views/Article/Article.vue
-
159src/views/VoteDetail/VoteDetail.vue
@ -1,5 +1,5 @@ |
|||
import { request } from "@/utils/request"; |
|||
|
|||
export const apiGetVote = (articleId) => request.get('/vote/getVote', articleId) |
|||
export const apiGetVote = async (articleId) => request.get('/vote/getVote', articleId) |
|||
export const apiAddVoteRecord = async (voteRecord) => request.post(`/vote/addRecord`,voteRecord) |
|||
export const apiGetVoteIndex = async(userId,voteId) => request.get(`/vote/getIndex?userId=${userId}&voteId=${voteId}`) |
|||
@ -1,4 +1,8 @@ |
|||
import { request } from "@/utils/request"; |
|||
|
|||
export const apiGetAllVoteDetails = async (voteId)=>request.get(`/user/getAllVoteDetail?userId=${voteId}`); |
|||
export const apiGetSelectVoteDetails = async(condition) => request.get(`/user/selectVoteDetail`,condition); |
|||
export const apiGetAllVoteDetails = async (condition)=>request.get(`/vote/getAllVoteDetail`,{ |
|||
params: condition |
|||
}); |
|||
export const apiGetExportVoteDetailList = async(condition) => request.get(`/vote/getExportVoteDetail`,{ |
|||
params: condition |
|||
}); |
|||
@ -0,0 +1,15 @@ |
|||
import { apiGetAllVoteDetails, apiGetExportVoteDetailList } from "@/apis/voteDetail"; |
|||
import { defineStore } from "pinia"; |
|||
|
|||
export const useVoteDetailStore = defineStore("VoteDetail", () => { |
|||
const getVoteDetail = async (condition) => { |
|||
return await apiGetAllVoteDetails(condition); |
|||
}; |
|||
const getExportVoteDetail = async (condition) => { |
|||
return await apiGetExportVoteDetailList(condition) |
|||
}; |
|||
return { |
|||
getVoteDetail, |
|||
getExportVoteDetail |
|||
}; |
|||
}); |
|||
@ -1,5 +1,158 @@ |
|||
<template> |
|||
<div> |
|||
ddd |
|||
<div class="filter-container"> |
|||
<el-input v-model="condition.username" placeholder="请输入用户名" clearable style="width: 200px;" /> |
|||
<el-input v-model="condition.account" placeholder="请输入精网号" clearable style="width: 200px;" /> |
|||
<el-input v-model="condition.area" placeholder="请输入地区" clearable style="width: 200px;" /> |
|||
<el-input v-model="condition.optionContent" placeholder="请输入选项" clearable style="width: 200px;" /> |
|||
<el-button type="danger" @click="fetchVoteData"> |
|||
搜索 |
|||
</el-button> |
|||
<el-button type="danger" @click="exportDataFrontend"> |
|||
导出数据 |
|||
</el-button> |
|||
|
|||
</div> |
|||
</template> |
|||
<el-table :data="tableData" show-overflow-tooltip style="width: 100%"> |
|||
<!-- <el-table-column type="selection" width="55" /> --> |
|||
<el-table-column property="username" label="名字" width="120" /> |
|||
<el-table-column property="account" label="精网号" width="120" /> |
|||
<el-table-column property="area" label="地区" width="120" /> |
|||
<el-table-column label="投票标题" width="180"> |
|||
<template #default> |
|||
{{ voteInfo.voteTitle }} |
|||
</template> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="文章/视频标题" width="180"> |
|||
<template #default> |
|||
{{ voteInfo.articleTitle }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column property="optionContents" label="选项" width="240" /> |
|||
<el-table-column property="createTime" label="投票时间" /> |
|||
</el-table> |
|||
<div class="pagination-container"> |
|||
<el-pagination v-model:current-page="pageInfo.pageNum" :page-sizes="[2, 5, 10, 50, 100]" |
|||
:page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount" |
|||
@size-change="handleSizeChange" @current-change="handleCurrentChange" /> |
|||
</div> |
|||
</template> |
|||
<script setup> |
|||
import { useVoteDetailStore } from '@/stores/voteDetail' |
|||
import { ref, onMounted, reactive } from 'vue' |
|||
import { useRoute } from 'vue-router'; |
|||
|
|||
const route = useRoute(); |
|||
// const voteId = ref(route.params.voteId); |
|||
const voteInfo = reactive({ |
|||
// voteId: Number(route.query.voteId), |
|||
voteId: route.query.voteId, |
|||
voteTitle: route.query.voteTitle, |
|||
articleTitle:route.query.articleTitle, |
|||
}) |
|||
const tableData = ref([]) |
|||
const totalCount = ref(0) |
|||
const pageInfo = reactive({ |
|||
pageNum: 1, |
|||
pageSize: 50 |
|||
}) |
|||
const condition = reactive({ |
|||
username: '', |
|||
account: '', |
|||
area: '', |
|||
optionContents: '' |
|||
}) |
|||
// 获取投票数据函数 |
|||
const fetchVoteData = async () => { |
|||
try { |
|||
let params = reactive({ |
|||
voteId: 1, |
|||
page: pageInfo.pageNum, |
|||
size: pageInfo.pageSize, |
|||
username: condition.username, |
|||
account: condition.account, |
|||
area: condition.area, |
|||
optionContent: condition.optionContent |
|||
}) |
|||
console.log(params) |
|||
const res = await useVoteDetailStore().getVoteDetail(params) |
|||
console.log(res) |
|||
tableData.value = res.data.data.voteList |
|||
totalCount.value = res.data.data.totalCount |
|||
} catch (err) { |
|||
console.error('请求失败', err) |
|||
} |
|||
} |
|||
onMounted(async () => { |
|||
fetchVoteData() |
|||
// try { |
|||
// const res = await useVoteDetailStore().getVoteDetail(1) |
|||
// tableData.value = res.data.data |
|||
// totalCount.value = res.data.data.length |
|||
// } catch (err) { |
|||
// console.log('请求失败', error) |
|||
// } |
|||
}) |
|||
|
|||
const handleSizeChange = async (newSize) => { |
|||
pageInfo.pageSize = newSize |
|||
pageInfo.pageNum = 1 |
|||
await fetchVoteData() |
|||
} |
|||
const handleCurrentChange = async (newPage) => { |
|||
pageInfo.pageNum = newPage |
|||
await fetchVoteData() |
|||
} |
|||
|
|||
const exportDataFrontend = async () => { |
|||
let exportData = ref([]) |
|||
let params = reactive({ |
|||
voteId: 1, |
|||
username: condition.username, |
|||
account: condition.account, |
|||
area: condition.area, |
|||
optionContent: condition.optionContent |
|||
}) |
|||
const res = await useVoteDetailStore().getExportVoteDetail(params) |
|||
exportData.value = res.data.data.voteList |
|||
let csvContent = "名字,精网号,地区,投票标题,文章/视频标题,选项,投票时间\n" |
|||
exportData.value.forEach(item => { |
|||
const row = [ |
|||
`"${item.username}"`, |
|||
`"${item.account}"`, |
|||
`"${item.area}"`, |
|||
`"${voteInfo.voteTitle}"`, |
|||
`"${voteInfo.articleTitle}"`, |
|||
`"${item.optionContents}"`, |
|||
`"${item.createTime}"` |
|||
].join(',') |
|||
csvContent += row + '\n' |
|||
}) |
|||
|
|||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }) |
|||
const link = document.createElement('a') |
|||
const url = URL.createObjectURL(blob) |
|||
|
|||
link.setAttribute('href', url) |
|||
link.setAttribute('download', `投票详情_${new Date().toLocaleDateString()}.csv`) |
|||
link.style.visibility = 'hidden' |
|||
|
|||
document.body.appendChild(link) |
|||
link.click() |
|||
document.body.removeChild(link) |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.filter-container { |
|||
margin-bottom: 16px; |
|||
display: flex; |
|||
gap: 12px; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.pagination-container { |
|||
display: flex; |
|||
padding-top: 20px; |
|||
|
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue