|
|
@@ -9,25 +9,58 @@ |
|
|
|
<div class="head-container"> |
|
|
|
<div> |
|
|
|
<el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" |
|
|
|
@click="openSave()">新增</el-button> |
|
|
|
@click="openSave()">关联新闻</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--表格渲染--> |
|
|
|
<el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;" @selection-change="handleSelectionChange" |
|
|
|
> |
|
|
|
<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="序号" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="标题" label="newsTitle" /> |
|
|
|
<el-table-column :show-overflow-tooltip="true" prop="createDate" label="创建时间" /> |
|
|
|
<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}`" v-if="scope.row.isDel"> |
|
|
|
<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="del(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, carNewsHotSave } from '@/api/homePage' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Demo', |
|
|
@@ -36,19 +69,78 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
dialogVisible: false, |
|
|
|
multipleSelection: [] |
|
|
|
multipleSelection: [], |
|
|
|
dialogList: [], |
|
|
|
pageNum: 1, |
|
|
|
total: 0, |
|
|
|
pageSize: 10 |
|
|
|
} |
|
|
|
}, |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '列表', url: '/index/yuanyuzhouHotList', query: {}}) |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getNewsList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
[CRUD.HOOK.beforeRefresh]() { |
|
|
|
[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: 2, |
|
|
|
status: 2, |
|
|
|
videHas: 1 |
|
|
|
} |
|
|
|
newsList(data).then(res => { |
|
|
|
this.dialogList = res.list |
|
|
|
}) |
|
|
|
}, |
|
|
|
save() { |
|
|
|
let newsIdList = [] |
|
|
|
this.crud.data.forEach(ele => { |
|
|
|
newsIdList.push(ele.id) |
|
|
|
}) |
|
|
|
carNewsHotSave(newsIdList).then(res => { |
|
|
|
this.$message({ |
|
|
|
message: '操作成功!', |
|
|
|
type: 'success' |
|
|
|
}) |
|
|
|
this.crud.toQuery() |
|
|
|
}) |
|
|
|
}, |
|
|
|
confirm() { |
|
|
|
let data = [] |
|
|
|
this.multipleSelection.forEach(res => { |
|
|
|
data.push({ |
|
|
|
newsId: res.id, |
|
|
|
newsTitle: res.title, |
|
|
|
isDel: true |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.crud.data = [...this.crud.data, ...data] |
|
|
|
this.dialogVisible = false |
|
|
|
} |
|
|
|
}, |
|
|
|
del(scope, selectedIndex) { |
|
|
|
this.crud.data.splice(selectedIndex, 1) |
|
|
|
scope._self.$refs[`del-${scope.$index}`].doClose() |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |