mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-15 22:06:43 +08:00
310 lines
10 KiB
Vue
310 lines
10 KiB
Vue
<template>
|
||
<div class="u-page" style="padding-right:32px">
|
||
<Remark>
|
||
<ul>
|
||
<li>正文内容需求上要求显示两行，建议不显示 上架和下架图标待定</li>
|
||
<li>
|
||
上架和审核没有对应接口，先写好了，到时候换个名就行,数据传参也可以改一下
|
||
</li>
|
||
<li>点击标题打开新页面并且传参不会</li>
|
||
</ul>
|
||
</Remark>
|
||
<div style="padding: 2px 0px 10px 8px;">
|
||
<div style="display: flex; justify-content: flex-start">
|
||
<div style="padding: 0px 5px">
|
||
<el-select
|
||
v-model="pageData.status"
|
||
style="width: 110px"
|
||
clearable
|
||
placeholder="审核状态"
|
||
>
|
||
<el-option label="全部" value=""></el-option>
|
||
<el-option label="草稿" :value="1"></el-option>
|
||
<el-option label="待审核" :value="2"></el-option>
|
||
<el-option label="未通过" :value="3"></el-option>
|
||
<el-option label="已通过" :value="5"></el-option>
|
||
<el-option label="已发布" :value="9"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div style="padding: 0px 5px">
|
||
<el-input
|
||
placeholder="关键词搜索"
|
||
v-model="pageData.keyword"
|
||
clearable
|
||
></el-input>
|
||
</div>
|
||
<div style="padding: 0px 5px">
|
||
<el-button
|
||
@click="getsearch"
|
||
icon="el-icon-search"
|
||
type="primary"
|
||
>搜索</el-button
|
||
>
|
||
<!-- <el-button type="primary" >批量设置推荐</el-button> -->
|
||
</div>
|
||
|
||
<div style="padding: 0px 5px;"><el-button icon="el-icon-refresh-right" type="primary" @click="reset">重置</el-button></div>
|
||
</div>
|
||
</div>
|
||
<el-table style="width: 100%;margin:10px 32px 10px 12px;" :data="pageData.list" border stripe >
|
||
<!-- <el-table-column type="selection" width="55"></el-table-column> -->
|
||
<el-table-column label="标题" show-overflow-tooltip prop="title" >
|
||
<template slot-scope="scope">
|
||
<span class="previewStyle" @click="viewTopic(scope.row)">{{scope.row.title}}</span>
|
||
<!-- <a :style="cursor:pointer;" target="_blank" :href="`${webBaseUrl}/qa/answer`">{{scope.row.name}}</a> -->
|
||
<!-- <el-link style="display:inline;" :href="`${webBaseUrl}/article/detail`">{{scope.row.title}}</el-link> -->
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column label="介绍" prop="content"> -->
|
||
<el-table-column label="浏览" width="60px" prop="views"></el-table-column>
|
||
<el-table-column label="点赞" width="60px" prop="praises" ></el-table-column>
|
||
<el-table-column label="收藏" width="60px" prop="favorites" ></el-table-column>
|
||
<el-table-column label="评论" width="60px" prop="comments" ></el-table-column>
|
||
<el-table-column label="作者" width="80px" prop="sysCreateBy" ></el-table-column>
|
||
<el-table-column label="发布时间" width="160px" prop="sysCreateTime" ></el-table-column>
|
||
<el-table-column label="状态" width="80px" prop="status">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.status | statusFilter }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column fixed="right" label="操作" width="160">
|
||
<template slot-scope="scope">
|
||
<el-button v-if="scope.row.status === 2" type="text" icon="el-icon-refresh-left" @click="audit(scope.row)" >审核</el-button>
|
||
<el-button type="text" @click="delItem(scope.row)" icon="el-icon-delete">删除</el-button>
|
||
<el-button type="text" @click="shelfHandle(scope.row)" :icon="scope.row.enabled ? 'el-icon-download' : 'el-icon-upload2'">
|
||
{{ scope.row.enabled ? '下架' : '上架' }}
|
||
</el-button>
|
||
<!-- <el-button type="text" icon="el-icon-share" size="mini">推荐</el-button> -->
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div v-if="pageData.list.length > 0" style="text-align: center;margin-top: 50px;">
|
||
<el-pagination
|
||
background
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageData.pageIndex"
|
||
:page-sizes="[10, 20, 30, 40]"
|
||
:page-size="pageData.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="total"
|
||
></el-pagination>
|
||
</div>
|
||
<div style="height: 100px"></div>
|
||
<el-dialog custom-class="g-dialog" title="审核文章" :visible.sync="dialogVisible">
|
||
<el-row>
|
||
<h3 style="text-align: center">{{ form.title }}</h3>
|
||
作者：{{ form.sysCreateBy }}
|
||
</el-row>
|
||
<el-form :model="form" ref="auditForm" :rules="rules" label-width="80px">
|
||
<div v-html="form.content"
|
||
style="padding: 0 10px;margin-top: 10px;border: 1px solid #d9d9d9;height: 400px; overflow: auto;">
|
||
<!-- <img style="width: 100%;" :src="`${webBaseUrl}/temp/articleTwo.png·" /> -->
|
||
</div>
|
||
<!-- <el-form-item label="人数"><el-input v-model="form.num"></el-input></el-form-item> -->
|
||
<el-form-item label="审核结果" prop="status">
|
||
<el-radio-group v-model="form.status">
|
||
<el-radio :label="true">通过</el-radio>
|
||
<el-radio :label="false">拒绝</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="审核意见">
|
||
<el-input type="textarea" placeholder="请输入0-200个字" v-model="form.auditRemark" maxlength="200" ></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="enSure">确认</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import apiArticle from '@/api/modules/article.js'
|
||
export default {
|
||
name: 'articleItems',
|
||
data() {
|
||
return {
|
||
pageData: {
|
||
pageIndex: 1,
|
||
pageSize: 10,
|
||
list: [],
|
||
},
|
||
total: 0,
|
||
form: {status:null,id:'',auditRemark:''},
|
||
rules: {
|
||
status: [
|
||
{ required: true, message: '请选择审核结果', trigger: 'blur' },
|
||
],
|
||
},
|
||
dialogVisible: false,
|
||
}
|
||
},
|
||
mounted() {},
|
||
created() {
|
||
this.getArticleList()
|
||
},
|
||
filters: {
|
||
statusFilter(item) {
|
||
switch (item) {
|
||
case 1: {
|
||
return '草稿'
|
||
}
|
||
case 2: {
|
||
return '待审核'
|
||
}
|
||
case 3: {
|
||
return '未通过'
|
||
}
|
||
case 5: {
|
||
return '已通过'
|
||
}
|
||
case 9: {
|
||
return '已发布'
|
||
}
|
||
}
|
||
},
|
||
},
|
||
methods: {
|
||
getsearch(){
|
||
this.pageData.pageIndex = 1;
|
||
this.getArticleList()
|
||
|
||
},
|
||
reset() {
|
||
this.pageData.status = ''
|
||
this.pageData.keyword = ''
|
||
this.pageData.pageIndex = 1;
|
||
this.getArticleList()
|
||
},
|
||
//获取文章列表数据
|
||
getArticleList() {
|
||
const { pageIndex, pageSize } = this.pageData
|
||
let query = { pageIndex, pageSize }
|
||
if (this.pageData.status) {
|
||
const { status } = this.pageData
|
||
query.status = status
|
||
}
|
||
if (this.pageData.keyword) {
|
||
const { keyword } = this.pageData
|
||
query.keyword = keyword
|
||
} //拼接查询条件
|
||
apiArticle
|
||
.portalPageList(query)
|
||
.then((res) => {
|
||
if (res.status == 200) {
|
||
this.total = res.result.count
|
||
this.pageData.list = res.result.list
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error('获取数据失败')
|
||
})
|
||
},
|
||
//改变条数的回调
|
||
handleSizeChange(value) {
|
||
this.pageData.pageIndex = 1;
|
||
this.pageData.pageSize = value;
|
||
this.getArticleList();
|
||
},
|
||
//改变页数的回调
|
||
handleCurrentChange(value) {
|
||
this.pageData.pageIndex = value;
|
||
this.getArticleList();
|
||
},
|
||
//删除文章
|
||
delItem(item) {
|
||
this.$confirm('您确定要删除所选文章吗？', '删除提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
apiArticle
|
||
.del(item.id)
|
||
.then((res) => {
|
||
if (res.status == 200) {
|
||
this.$message.success('删除成功')
|
||
this.getArticleList()
|
||
} else {
|
||
this.$message.error('删除失败')
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error('删除失败')
|
||
})
|
||
})
|
||
.catch(() => {})
|
||
},
|
||
//审核操作
|
||
audit(row) {
|
||
apiArticle.detail(row.id, false).then((res) => {
|
||
if (res.status == 200) {
|
||
this.form.id = res.result.id;
|
||
this.form.content = res.result.content;
|
||
this.form.auditRemark = '';
|
||
this.dialogVisible = true
|
||
}
|
||
})
|
||
},
|
||
//确认审核结果
|
||
enSure() {
|
||
const { auditRemark, status, id } = this.form
|
||
if(!status&&!auditRemark){
|
||
return this.$message.warning("如果审核未通过要填写拒绝理由")
|
||
}
|
||
this.$refs.auditForm.validate((valid) => {
|
||
if (valid) {
|
||
apiArticle
|
||
.savaAudit(id, auditRemark, status)
|
||
.then((res) => {
|
||
if (res.status == 200) {
|
||
this.$message.success('审核成功')
|
||
this.dialogVisible = false
|
||
this.getArticleList()
|
||
} else {
|
||
this.$message.error('审核失败')
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error('审核失败')
|
||
})
|
||
}
|
||
})
|
||
},
|
||
//上下架子
|
||
shelfHandle(row) {
|
||
let successMessage, errorMessage
|
||
if (row.enabled) {
|
||
;(successMessage = '下架成功'), (errorMessage = '下架失败')
|
||
} else {
|
||
;(successMessage = '上架成功'), (errorMessage = '上架失败')
|
||
}
|
||
row.enabled = !row.enabled
|
||
const { id, enabled } = row
|
||
apiArticle
|
||
.isEnabled(id, enabled)
|
||
.then((res) => {
|
||
if (res.status == 200) {
|
||
this.$message.success(successMessage)
|
||
this.getArticleList()
|
||
} else {
|
||
this.$message.error(errorMessage)
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$message.error(errorMessage)
|
||
})
|
||
},
|
||
viewTopic(data) {
|
||
// window.open(this.webBaseUrl+'/article/detail?id='+data.id , '_blank')
|
||
this.$router.push({path:'/article/detail',query:{id:data.id}})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
</style>
|