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.
100 lines
2.5 KiB
100 lines
2.5 KiB
10 months ago
|
<template>
|
||
|
|
<div class="article">
|
||
|
|
<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle(null,null,'新建文章')">新建文章</el-button>
|
||
|
|
<div class="article-list">
|
||
|
|
<div v-if="dataList.length>0" class="list-ul">
|
||
|
|
<div v-for="(item,index) in dataList" :key="index" class="list-li" @click="articleHandle(item)">
|
||
|
|
<span class="list-li-left">
|
||
|
|
<span>{{ item.name }}</span>
|
||
|
|
<span>发布时间：{{ item.createDate }}</span>
|
||
|
|
</span>
|
||
|
|
<span class="list-li-right">
|
||
|
|
<span @click.stop="addOrUpdateHandle(item.id)">修改</span>
|
||
|
|
<span @click.stop="deleteHandle(item.id)">删除</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-else>暂无数据</div>
|
||
|
|
</div>
|
||
|
|
<el-pagination background layout="total,prev, pager, next" :total="total" :current-page.sync="page" @current-change="pageCurrentChangeHandle" />
|
||
|
|
<!-- 弹窗, 新增 / 修改 -->
|
||
|
|
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @closeDialog="addOrUpdateVisible=false" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import mixinViewModule from '@/mixins/view-module'
|
||
|
|
import AddOrUpdate from './add-or-update.vue'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
AddOrUpdate
|
||
|
|
},
|
||
|
|
mixins: [mixinViewModule],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
mixinViewModuleOptions: {
|
||
|
|
getDataListURL: '/quguang/article/page',
|
||
|
|
deleteURL: '/quguang/article',
|
||
|
|
getDataListIsPage: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 新建文章
|
||
|
|
addArticleHandle() {
|
||
|
|
},
|
||
|
|
// 点击文章跳转
|
||
|
|
articleHandle(item) {
|
||
|
|
console.log(item)
|
||
|
|
this.$router.push({
|
||
|
|
name: 'articleContent',
|
||
|
|
query: {
|
||
|
|
id: item.id
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.article {
|
||
|
|
background: #fff;
|
||
|
|
width: 100%;
|
||
|
|
padding: 16px;
|
||
|
|
.article-list {
|
||
|
|
margin-top: 25px;
|
||
|
|
}
|
||
|
|
.list-li {
|
||
|
|
display: flex;
|
||
|
|
cursor: pointer;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 10px 10px;
|
||
|
|
border-bottom: 1px solid rgb(237, 236, 236);
|
||
|
|
}
|
||
|
|
.list-li:hover {
|
||
|
|
background: #eef0f2;
|
||
|
|
}
|
||
|
|
.list-li-left {
|
||
|
|
span {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
span:nth-child(1) {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 700;
|
||
|
|
padding-bottom: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list-li-right {
|
||
|
|
span:nth-child(1) {
|
||
|
|
padding-right: 8px;
|
||
|
|
color: rgb(24, 144, 255);
|
||
|
|
}
|
||
|
|
span:nth-child(2) {
|
||
|
|
color: rgb(253, 77, 79);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|