|
- <!--
- * @Date: 2021-07-08 11:02:40
- * @LastEditTime: 2022-07-27 10:48:43
- * @Description: 列表查询demo
- -->
- <template>
- <div class="app-container">
- <!--工具栏-->
- <div class="head-container">
- <div>
- <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus"
- @click="openSave()">关联新闻</el-button>
- </div>
- </div>
-
- <!--表格渲染-->
- <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
- <el-table-column type="selection" width="55" />
- <el-table-column :show-overflow-tooltip="true" prop="newsId" label="新闻id" />
- <el-table-column :show-overflow-tooltip="true" prop="newsTitle" label="标题" />
- <el-table-column label="操作" width="230" align="center" fixed="right">
- <template slot-scope="scope" class="btn">
- <el-popover placement="top" width="200" :ref="`del-${scope.$index}`">
- <p>是否确认删除该数据?</p>
- <div style="text-align: right; margin: 0">
- <el-button size="mini"
- @click="scope._self.$refs[`del-${scope.$index}`].doClose()">取消</el-button>
- <el-button type="primary" size="mini" @click="delFn(scope, scope.$index)">确定</el-button>
- </div>
- <el-button slot="reference" type="text" size="mini" style="margin-left:10px">删除</el-button>
- </el-popover>
- </template>
- </el-table-column>
- </el-table>
- <!--分页组件-->
- <pagination />
- <el-button class="filter-item" size="mini" type="primary" @click="save()">保存</el-button>
-
- <!-- 新增修改弹窗 -->
- <el-dialog v-if="dialogVisible" title="热点新闻" :visible.sync="dialogVisible" append-to-body width="600px">
- <el-table ref="table" :data="dialogList" style="width: 100%;" @selection-change="handleSelectionChange">
- <el-table-column type="selection" width="55" />
- <el-table-column :show-overflow-tooltip="true" prop="id" label="新闻id" />
- <el-table-column :show-overflow-tooltip="true" prop="title" label="标题" />
- </el-table>
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="pageNum"
- :page-sizes="[10, 20, 30, 40]"
- :page-size="pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total">
- </el-pagination>
- <el-button class="filter-item" size="mini" type="primary" @click="confirm()">确定</el-button>
-
- </el-dialog>
- </div>
- </template>
- <script>
- import CRUD, { presenter, header, crud } from '@crud/crud'
- import pagination from '@crud/Pagination'
- import { newsList, yuanyuzhouHotSave } from '@/api/homePage'
-
- export default {
- components: { pagination },
- mixins: [presenter(), header(), crud()],
- data() {
- return {
- dialogVisible: false,
- multipleSelection: [],
- dialogList: [],
- pageNum: 1,
- total: 0,
- pageSize: 10
- }
- },
- cruds() {
- return CRUD({ title: '列表', url: '/index/yuanyuzhouHotList', query: {}})
- },
- created() {
- this.getNewsList()
- },
- methods: {
- [CRUD.HOOK.beforeRefresh]() {
- this.query.videHas = 1
- },
- handleSizeChange(val) {
- this.pageSize = val
- console.log(`每页 ${val} 条`)
- },
- handleCurrentChange(val) {
- this.pageNum = val
- console.log(`当前页: ${val}`)
- },
- handleSelectionChange(val) {
- this.multipleSelection = val
- },
- openSave() {
- this.dialogVisible = true
- },
- getNewsList() {
- let data = {
- pageNum: this.pageNum,
- pageSize: this.pageSize,
- type: 3,
- status: 2,
- videImageHas: 1
- }
- newsList(data).then(res => {
- this.dialogList = res.list
- })
- },
- save() {
- let newsIdList = []
- this.crud.data.forEach(ele => {
- newsIdList.push(ele.newsId)
- })
- yuanyuzhouHotSave(newsIdList).then(res => {
- this.$message({
- message: '操作成功!',
- type: 'success'
- })
- this.crud.toQuery()
- })
- },
- unique(arr) {
- const res = new Map()
- return arr.filter((arr) => !res.has(arr.newsId) && res.set(arr.newsId, 1))
- },
- confirm() {
- let data = []
- this.multipleSelection.forEach(res => {
- data.push({
- newsId: res.id,
- newsTitle: res.title,
- isDel: true
- })
- })
- let _data = [...this.crud.data, ...data]
- this.crud.data = this.unique(_data)
- this.dialogVisible = false
- },
- delFn(scope, selectedIndex) {
- this.crud.data.splice(selectedIndex, 1)
- scope._self.$refs[`del-${scope.$index}`].doClose()
- }
- }
- }
- </script>
|