元气智驾官网后台前端页面
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

151 lines
5.2 KiB

  1. <!--
  2. * @Date: 2021-07-08 11:02:40
  3. * @LastEditTime: 2022-07-27 10:48:43
  4. * @Description: 列表查询demo
  5. -->
  6. <template>
  7. <div class="app-container">
  8. <!--工具栏-->
  9. <div class="head-container">
  10. <div>
  11. <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
  12. @click="openSave()">关联新闻</el-button>
  13. </div>
  14. </div>
  15. <!--表格渲染-->
  16. <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
  17. <el-table-column type="selection" width="55" />
  18. <el-table-column :show-overflow-tooltip="true" prop="newsId" label="新闻id" />
  19. <el-table-column :show-overflow-tooltip="true" prop="newsTitle" label="标题" />
  20. <el-table-column label="操作" width="230" align="center" fixed="right">
  21. <template slot-scope="scope" class="btn">
  22. <el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
  23. <p>是否确认删除该数据?</p>
  24. <div style="text-align: right; margin: 0">
  25. <el-button size="mini"
  26. @click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
  27. <el-button type="primary" size="mini" @click="delFn(scope, scope.$index)">确定</el-button>
  28. </div>
  29. <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
  30. </el-popover>
  31. </template>
  32. </el-table-column>
  33. </el-table>
  34. <!--分页组件-->
  35. <pagination />
  36. <el-button class="filter-item" size="mini" type="primary" @click="save()">保存</el-button>
  37. <!-- 新增修改弹窗 -->
  38. <el-dialog v-if="dialogVisible" title="热点新闻" :visible.sync="dialogVisible" append-to-body width="600px">
  39. <el-table ref="table" :data="dialogList" style="width: 100%;" @selection-change="handleSelectionChange">
  40. <el-table-column type="selection" width="55" />
  41. <el-table-column :show-overflow-tooltip="true" prop="id" label="新闻id" />
  42. <el-table-column :show-overflow-tooltip="true" prop="title" label="标题" />
  43. </el-table>
  44. <el-pagination
  45. @size-change="handleSizeChange"
  46. @current-change="handleCurrentChange"
  47. :current-page="pageNum"
  48. :page-sizes="[10, 20, 30, 40]"
  49. :page-size="pageSize"
  50. layout="total, sizes, prev, pager, next, jumper"
  51. :total="total">
  52. </el-pagination>
  53. <el-button class="filter-item" size="mini" type="primary" @click="confirm()">确定</el-button>
  54. </el-dialog>
  55. </div>
  56. </template>
  57. <script>
  58. import CRUD, { presenter, header, crud } from '@crud/crud'
  59. import pagination from '@crud/Pagination'
  60. import { newsList, carNewsHotSave } from '@/api/homePage'
  61. export default {
  62. components: { pagination },
  63. mixins: [presenter(), header(), crud()],
  64. data() {
  65. return {
  66. dialogVisible: false,
  67. multipleSelection: [],
  68. dialogList: [],
  69. pageNum: 1,
  70. total: 0,
  71. pageSize: 10
  72. }
  73. },
  74. cruds() {
  75. return CRUD({ title: '列表', url: '/index/carNewsHotList', query: {}})
  76. },
  77. created() {
  78. this.getNewsList()
  79. },
  80. methods: {
  81. [CRUD.HOOK.beforeRefresh]() {
  82. this.query.videHas = 1
  83. },
  84. handleSizeChange(val) {
  85. this.pageSize = val
  86. console.log(`每页 ${val} 条`)
  87. },
  88. handleCurrentChange(val) {
  89. this.pageNum = val
  90. console.log(`当前页: ${val}`)
  91. },
  92. handleSelectionChange(val) {
  93. this.multipleSelection = val
  94. },
  95. openSave() {
  96. this.dialogVisible = true
  97. },
  98. getNewsList() {
  99. let data = {
  100. pageNum: this.pageNum,
  101. pageSize: this.pageSize,
  102. type: 2,
  103. status: 2,
  104. videHas: 1
  105. }
  106. newsList(data).then(res => {
  107. this.dialogList = res.list
  108. })
  109. },
  110. save() {
  111. let newsIdList = []
  112. this.crud.data.forEach(ele => {
  113. newsIdList.push(ele.newsId)
  114. })
  115. carNewsHotSave(newsIdList).then(res => {
  116. this.$message({
  117. message: '操作成功!',
  118. type: 'success'
  119. })
  120. this.crud.toQuery()
  121. })
  122. },
  123. unique(arr) {
  124. const res = new Map()
  125. return arr.filter((arr) => !res.has(arr.newsId) && res.set(arr.newsId, 1))
  126. },
  127. confirm() {
  128. let data = []
  129. this.multipleSelection.forEach(res => {
  130. data.push({
  131. newsId: res.id,
  132. newsTitle: res.title,
  133. isDel: true
  134. })
  135. })
  136. let _data = [...this.crud.data, ...data]
  137. this.crud.data = this.unique(_data)
  138. this.dialogVisible = false
  139. },
  140. delFn(scope, selectedIndex) {
  141. this.crud.data.splice(selectedIndex, 1)
  142. scope._self.$refs[`del-${scope.$index}`].doClose()
  143. }
  144. }
  145. }
  146. </script>