articleComment.vue 3.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <div class="main-contain">
  3. <div class="position">
  4. <bread-crumb :crumbs='crumbs'></bread-crumb>
  5. </div>
  6. <div class="app-container">
  7. <el-row :gutter="12" style="margin-top: 10px">
  8. <el-table
  9. :data="articsData"
  10. border fit highlight-current-row
  11. :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
  12. >
  13. <el-table-column
  14. align="center"
  15. type="selection"
  16. width="55">
  17. </el-table-column>
  18. <el-table-column label="标题" align="center">
  19. <template slot-scope="scope">
  20. {{scope.row.title}}
  21. </template>
  22. </el-table-column>
  23. <el-table-column label="评论状态" align="center">
  24. <template>
  25. <span>正常</span>
  26. </template>
  27. </el-table-column>
  28. <el-table-column label="总评论数" align="center">
  29. <template slot-scope="scope">
  30. {{scope.row.comment_num}}
  31. </template>
  32. </el-table-column>
  33. <el-table-column label="操作" align="center">
  34. <template slot-scope="scope">
  35. <el-tooltip class="item" effect="dark" content="查看" placement="top">
  36. <el-button
  37. size="mini"
  38. type="primary"
  39. icon="el-icon-edit-outline"
  40. @click="$router.push('/articles/articleCommentDetail/'+scope.row.id)">
  41. </el-button>
  42. </el-tooltip>
  43. </template>
  44. </el-table-column>
  45. </el-table>
  46. <el-pagination
  47. @size-change="handleSizeChange"
  48. @current-change="handleCurrentChange"
  49. :page-sizes="[10,20,50,100]"
  50. :page-size="10"
  51. background
  52. style="margin-top:20px;float: right"
  53. layout="total, sizes, prev, pager, next, jumper"
  54. :total="total">
  55. </el-pagination>
  56. </el-row>
  57. </div>
  58. </div>
  59. </template>
  60. <script>
  61. import BreadCrumb from '../components/bread-crumb'
  62. import { getAllComment } from '@/api/act/submitinfo'
  63. export default {
  64. name: 'articleComment',
  65. components:{
  66. BreadCrumb
  67. },
  68. data(){
  69. return{
  70. crumbs: [
  71. { path: false, name: '文章管理' },
  72. { path: '/articles/articleComment', name: '文章评论' }
  73. ],
  74. listQuery:{
  75. page:1,
  76. limit:10,
  77. title:'',
  78. commentNnum:'',
  79. },
  80. articsData:[],
  81. handleSizeChange(limit) {
  82. this.listQuery.limit = limit;
  83. this.GetAllAritcles();
  84. },
  85. handleCurrentChange(page) {
  86. this.listQuery.page = page;
  87. this.GetAllAritcles();
  88. },
  89. total:0,
  90. }
  91. },
  92. methods:{
  93. getAllComment(){
  94. getAllComment(this.listQuery).then(response=>{
  95. if(response.data.state == 1){
  96. this.articsData = response.data.data.articles;
  97. console.log("文章内容",this.articsData)
  98. this.total = response.data.data.total
  99. }
  100. });
  101. }
  102. },
  103. created(){
  104. this.getAllComment();
  105. }
  106. }
  107. </script>
  108. <style scoped>
  109. </style>