圈子管理去除多余字段&帖子管理图像预览处理

This commit is contained in:
linfeng 2022-05-09 10:30:31 +08:00
parent ec81fca724
commit e7d7a4d456
3 changed files with 183 additions and 25 deletions

View File

@ -8,17 +8,25 @@
<!-- <el-form-item>
<el-input
v-model="dataForm.key"
placeholder="参数名"
placeholder="请输入帖子内容搜索"
clearable
></el-input>
</el-form-item> -->
<el-form-item>
<!-- <el-button @click="getDataList()">查询</el-button> -->
<!-- <el-form-item>
<el-radio v-model="dataForm.status" label="0">正常</el-radio>
<el-radio v-model="dataForm.status" label="1">待审核</el-radio>
<el-radio v-model="dataForm.status" label="2">已下架</el-radio>
</el-form-item>
<el-button @click="getDataList()">查询</el-button> -->
<!-- <el-button
v-if="isAuth('admin:post:save')"
type="primary"
@click="addOrUpdateHandle()"
>新增</el-button
v-if="isAuth('admin:post:delete')"
type="danger"
@click="statusHandle()"
:disabled="dataListSelections.length <= 0"
>批量审核</el-button
> -->
<el-button
v-if="isAuth('admin:post:delete')"
@ -27,6 +35,7 @@
:disabled="dataListSelections.length <= 0"
>批量删除</el-button
>
</el-form-item>
</el-form>
<el-table
@ -74,7 +83,7 @@
prop="topicName"
header-align="center"
align="center"
label="圈子"
label="归属"
>
</el-table-column>
<el-table-column
@ -114,11 +123,11 @@
label="文件"
>
<template slot-scope="scope">
<img
<!-- <img
v-if="scope.row.type == 1 && scope.row.media[0]"
style="width: 80px; height: 50px"
:src="scope.row.media[0]"
/>
/> -->
<!-- <video
v-if="scope.row.type == 2"
class="myVideo"
@ -129,6 +138,7 @@
controls
></video> -->
<el-button v-if="scope.row.type == 2" type="text" @click="openVideo(scope.row.media[0])">点击预览</el-button>
<el-button v-if="scope.row.type == 1 && scope.row.media[0]" type="text" @click="openPic(scope.row.media)">点击查看</el-button>
</template>
</el-table-column>
<el-table-column
@ -152,13 +162,13 @@
label="点赞数"
>
</el-table-column>
<el-table-column
<!-- <el-table-column
prop="discussTitle"
header-align="center"
align="center"
label="话题"
>
</el-table-column>
</el-table-column> -->
<el-table-column
prop="postTop"
header-align="center"
@ -209,6 +219,19 @@
label="操作"
>
<template slot-scope="scope">
<el-button v-if="scope.row.status==1 || scope.row.status==2"
type="text"
size="small"
@click="statusHandle(scope.row.id)"
>上架</el-button
>
<el-button v-if="scope.row.status==0"
type="text"
size="small"
@click="statusDownHandle(scope.row.id)"
>下架</el-button
>
<el-button
type="text"
size="small"
@ -261,6 +284,33 @@
>
</span>
</el-dialog>
<el-dialog
title="图片预览"
:visible.sync="dialogVisible2"
width="60%"
:before-close="handleClose"
>
<div class="position">图片展示</div>
<div class="images">
<div v-for="(item, index) in media" :key="index" class="image-middle">
<el-card shadow="hover" :body-style="{ padding: '10px' }" >
<img :src="media[index]" class="image" @click="goPic(media[index])"/>
<div style="text-align:center;padding-top:12px">
<span>{{index}}</span>
</div>
</el-card>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible2 = false"> </el-button>
<el-button type="primary" @click="dialogVisible2 = false"
> </el-button
>
</span>
</el-dialog>
</div>
</template>
@ -271,6 +321,7 @@ export default {
return {
dataForm: {
key: "",
status:'',
},
dataList: [],
pageIndex: 1,
@ -280,7 +331,9 @@ export default {
dataListSelections: [],
addOrUpdateVisible: false,
dialogVisible: false,
videoUrl:""
dialogVisible2: false,
videoUrl:"",
media: [],
};
},
components: {
@ -299,7 +352,8 @@ export default {
params: this.$http.adornParams({
page: this.pageIndex,
limit: this.pageSize,
key: this.dataForm.key,
// key: this.dataForm.key,
// status:this.dataForm.status
}),
}).then(({ data }) => {
if (data && data.code === 0) {
@ -370,7 +424,77 @@ export default {
});
});
},
statusDownHandle(id){
var ids = id
? [id]
: this.dataListSelections.map((item) => {
return item.id;
});
this.$confirm(
`确定对[id=${ids.join(",")}]进行[${id ? "下架" : "批量下架"}]操作?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
this.$http({
url: this.$http.adornUrl("/admin/post/down"),
method: "post",
data: this.$http.adornData(ids, false),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
} else {
this.$message.error(data.msg);
}
});
});
},
//
statusHandle(id) {
var ids = id
? [id]
: this.dataListSelections.map((item) => {
return item.id;
});
this.$confirm(
`确定对[id=${ids.join(",")}]进行[${id ? "上架" : "批量上架"}]操作?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
).then(() => {
this.$http({
url: this.$http.adornUrl("/admin/post/up"),
method: "post",
data: this.$http.adornData(ids, false),
}).then(({ data }) => {
if (data && data.code === 0) {
this.$message({
message: "操作成功",
type: "success",
duration: 1500,
onClose: () => {
this.getDataList();
},
});
} else {
this.$message.error(data.msg);
}
});
});
},
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
@ -381,13 +505,47 @@ export default {
openVideo(url){
this.dialogVisible=true;
this.videoUrl=url;
},
openPic(media){
this.dialogVisible2=true;
this.media=media;
},
goPic(url){
console.log('==>',url);
window.open(url);
}
},
};
</script>
<style lang="scss" scoped>
.video {
width: 100%;
margin-bottom: 10px;
}
.video {
width: 100%;
margin-bottom: 10px;
}
.position {
margin-left: 15px;
font-size: 30px;
font-weight: 600;
}
/* 图片总布局,样式 */
.images{
display: flex;
margin-top: 20px;
margin-left: 21px;
margin-right: 20px;
flex-wrap: wrap;
}
/* 图片之间 */
.image-middle{
margin-right: 15px;
margin-bottom: 15px;
}
/* 单张图片样式 */
.image{
width:110px;
height: 110px;
}
</style>

View File

@ -58,17 +58,17 @@
<p class="formInfo">建议尺寸100*100像素jpgpng图片类型</p>
</el-form-item>
<el-form-item label="推荐类型" prop="topType">
<!-- <el-form-item label="推荐类型" prop="topType">
<el-radio-group v-model="dataForm.topType">
<el-radio :label="1">首页推荐</el-radio>
<el-radio :label="0">不推荐</el-radio>
<el-radio :label="2">圈子页推荐</el-radio>
</el-radio-group>
</el-form-item>
</el-form-item> -->
<el-form-item label="圈子状态" prop="status">
<el-radio-group v-model="dataForm.status">
<el-radio :label="1">正常</el-radio>
<el-radio :label="0">禁用</el-radio>
<el-radio :label="0">正常</el-radio>
<el-radio :label="1">禁用</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="是否首页推荐圈子内容" prop="indexRecommend">

View File

@ -99,7 +99,7 @@
<img style="width: 80px; height: 50px" :src="scope.row.bgImage" />
</template>
</el-table-column>
<el-table-column
<!-- <el-table-column
prop="topType"
header-align="center"
align="center"
@ -116,7 +116,7 @@
<el-tag v-else type="danger">圈子推荐</el-tag>
</div>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column
prop="status"
header-align="center"
@ -130,13 +130,13 @@
</div>
</template>
</el-table-column>
<el-table-column
<!-- <el-table-column
prop="indexRecommend"
header-align="center"
align="center"
label="首页推荐"
>
</el-table-column>
</el-table-column> -->
<el-table-column
prop="userNum"
header-align="center"