bnyer
/
bnyer-cloud-page
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feature:新增批量审核功能

master
Penny 3 years ago
parent
06478b2789
commit
b14a83f83f
3 changed files with 223 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/api/img/tiktokImg.js
  2. 8
      src/api/img/type.js
  3. 238
      src/views/img/tiktokImg/index.vue

9
src/api/img/tiktokImg.js
View File

@ -72,4 +72,13 @@ export function changeHot(data) {
})
}
// 根据分类id查询未审核图片分页
export function pageUnVerifyImgs(data) {
return request({
url: `${serviceTitle}${prefix}/pageUnVerifyImgs`,
method: 'post' ,
data: data
})
}

8
src/api/img/type.js
View File

@ -54,3 +54,11 @@ export function changeStatus(data) {
})
}
// 获取类型列表
export function getTypesList() {
return request({
url: `${serviceTitle}${prefix}/list`,
method: 'get'
})
}

238
src/views/img/tiktokImg/index.vue
View File

@ -91,6 +91,16 @@
v-hasPermi="['img:banner:remove']"
>删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-coordinate"
size="mini"
@click="handleVerify"
v-hasPermi="['img:banner:verify']"
>审核</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
</el-row>
@ -111,7 +121,7 @@
<el-table-column label="下载量" align="center" key="downloadNum" prop="downloadNum" v-if="columns[4].visible"/>
<el-table-column label="点赞量" align="center" key="greatNum" prop="greatNum" v-if="columns[5].visible"/>
<el-table-column label="收藏量" align="center" key="collectionNum" prop="collectionNum" v-if="columns[6].visible"/>
<el-table-column label="是否审核" align="center" key="status" prop="status" v-if="columns[7].visible">
<!-- <el-table-column label="是否审核" align="center" key="status" prop="status" v-if="columns[7].visible">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
@ -120,18 +130,18 @@
@change="handleJudgeChange(scope.row)"
></el-switch>
</template>
</el-table-column>
<el-table-column label="图片状态" align="center" key="status" prop="status" v-if="columns[8].visible" :show-overflow-tooltip="true">
</el-table-column> -->
<el-table-column label="图片状态" align="center" key="status" prop="status" v-if="columns[7].visible" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.status == '0' ? "待审核" : scope.row.status == '1' ? "审核拒绝": scope.row.status == '2' ? "已上架": scope.row.status == '3' ? "已下架" : ''}}
</template>
</el-table-column>
<el-table-column label="原创状态" align="center" key="isOriginal" prop="isOriginal" v-if="columns[9].visible" :show-overflow-tooltip="true">
<el-table-column label="原创状态" align="center" key="isOriginal" prop="isOriginal" v-if="columns[8].visible" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{scope.row.isOriginal == '0' ? "网络图片" : scope.row.isOriginal == '1' ? "原创图片": ''}}
</template>
</el-table-column>
<el-table-column label="是否热门" align="center" key="isHot" prop="isHot" v-if="columns[10].visible">
<el-table-column label="是否热门" align="center" key="isHot" prop="isHot" v-if="columns[9].visible">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isHot"
@ -141,8 +151,8 @@
></el-switch>
</template>
</el-table-column>
<el-table-column label="序号" align="center" key="sort" prop="sort" v-if="columns[11].visible"/>
<el-table-column label="是否显示" align="center" key="isShow" v-if="columns[12].visible">
<el-table-column label="序号" align="center" key="sort" prop="sort" v-if="columns[10].visible"/>
<el-table-column label="是否显示" align="center" key="isShow" v-if="columns[11].visible">
<template slot-scope="scope">
<el-switch
v-model="scope.row.isShow"
@ -152,12 +162,12 @@
></el-switch>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[13].visible" width="160">
<el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[12].visible" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" v-if="columns[14].visible" width="160">
<el-table-column label="更新时间" align="center" prop="updateTime" v-if="columns[13].visible" width="160">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime) }}</span>
</template>
@ -272,11 +282,44 @@
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<!-- 审核图片对话框 -->
<el-dialog :title="title" :visible.sync="verifyOpen" width="1200px" append-to-body>
<el-form ref="verifyForm" :model="verifyForm" label-width="200px">
<!-- 单选图片分类 -->
<div class="images-type">
<el-radio-group v-for="imgType in typeList" :key = "imgType.id" v-model="selectedTypeName" @input="changeType(imgType.id)">
<el-radio-button class="img-type-button" :label=imgType.typeName></el-radio-button>
</el-radio-group>
</div>
<!-- 图片列表 -->
<div class="images-box">
<div class="img-box" v-for="item in unVerifyImgsList" :key="item.id">
<el-image style="width: 100px; height: 100px" :src="item.imgUrl" :preview-src-list="bigImgList" @click="getBigImg(item)"></el-image><br/>
<el-checkbox @change="changeChecked(item.id)">是否通过</el-checkbox>
</div>
</div>
<!-- <pagination
v-show="unVerifyTotal>0"
:total="unVerifyTotal"
:page.sync="unVerifyImgsParams.pageNum"
:limit.sync="unVerifyImgsParams.pageSize"
@pagination="getUnVerifyList"
/> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitVerify('2')">审核通过</el-button>
<el-button @click="submitVerify('1')">审核拒绝</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { listTiktokImg, addTiktokImg, editTiktokImg, delTiktokImg, getTiktokImgDetails, changeStatus, changeJudge, changeHot } from "@/api/img/tiktokImg";
import { listTiktokImg, addTiktokImg, editTiktokImg, delTiktokImg, getTiktokImgDetails, changeStatus, changeJudge, changeHot, pageUnVerifyImgs } from "@/api/img/tiktokImg";
import { getTypesList} from "@/api/img/type";
import { getToken } from "@/utils/auth";
export default {
@ -287,6 +330,8 @@ export default {
loading: true,
// 选中数组
ids: [],
//未审核图片选中数组
unVerifyCheckArray:[],
// 非单个禁用
single: true,
// 非多个禁用
@ -295,12 +340,22 @@ export default {
showSearch: true,
// 总条数
total: 0,
//未审核图片总条数
unVerifyTotal: 0,
// img列表数据
imgList: null,
// 图片分类列表
typeList: [],
//未审核图片列表
unVerifyImgsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
// 是否显示新增修改弹出层
open: false,
// 是否显示审核图片弹出层
verifyOpen: false,
//选中的图片分类
selectedTypeName: null,
// 日期范围
dateRange: [],
//上传图片文件列表
@ -340,6 +395,8 @@ export default {
],
// 表单参数
form: {},
//审核图片参数
verifyForm:{},
// 图片上传参数
upload: {
// 是否显示弹出层
@ -364,6 +421,12 @@ export default {
isShow: undefined,
isOriginal: undefined
},
//未审核图片查询参数
unVerifyImgsParams:{
pageNum: 1,
pageSize: 50,
typeId: undefined
},
// 列信息
columns: [
{ key: 0, label: `编号`, visible: true },
@ -373,14 +436,13 @@ export default {
{ key: 4, label: `下载量`, visible: true },
{ key: 5, label: `点赞量`, visible: true },
{ key: 6, label: `收藏量`, visible: true },
{ key: 7, label: `是否审核`, visible: true },
{ key: 8, label: `图片状态`, visible: true },
{ key: 9, label: `原创状态`, visible: true },
{ key: 10, label: `是否热门`, visible: true },
{ key: 11, label: `序号`, visible: true },
{ key: 12, label: `是否显示`, visible: true },
{ key: 13, label: `创建时间`, visible: true },
{ key: 14, label: `更新时间`, visible: true }
{ key: 7, label: `图片状态`, visible: true },
{ key: 8, label: `原创状态`, visible: true },
{ key: 9, label: `是否热门`, visible: true },
{ key: 10, label: `序号`, visible: true },
{ key: 11, label: `是否显示`, visible: true },
{ key: 12, label: `创建时间`, visible: true },
{ key: 13, label: `更新时间`, visible: true }
],
// 表单校验
rules: {
@ -413,6 +475,83 @@ export default {
}
);
},
//查询图片分类
getTypeList(){
this.loading = true;
getTypesList().then(res =>{
this.typeList = res.data;
this.loading = false;
this.selectedTypeName = res.data.typeName;
//加载未审核图片分页
this.getUnVerifyList();
});
},
//查询待审核图片分页
getUnVerifyList(){
this.loading = true;
pageUnVerifyImgs(this.unVerifyImgsParams).then(res =>{
this.unVerifyImgsList = res.rows;
this.unVerifyTotal = res.total;
this.loading = false;
});
},
//切换分类
changeType(id){
this.unVerifyImgsParams.typeId = id;
this.getUnVerifyList();
},
//改变审核选中状态
changeChecked(imgId){
console.log('选中的图片id为：',imgId);
if(!this.unVerifyCheckArray.includes(imgId)){
this.unVerifyCheckArray.push(imgId);
}else{
this.unVerifyCheckArray = this.unVerifyCheckArray.filter(item => item != imgId)
}
console.log('选中的图片id数组为：',this.unVerifyCheckArray)
},
//提交审核
submitVerify(status){
let that = this;
console.log('审核状态为',status)
let text = status === "2" ? "审核通过" : "审核拒绝";
//审核通过
if(status === '2'){
that.$modal.confirm('确认要' + text + '这些图片吗？').then(function() {
const data = {
ids: that.unVerifyCheckArray,
status: status
}
return changeJudge(data);
}).then(() => {
that.$modal.msgSuccess(text + "成功");
//审核完清除数组
that.unVerifyCheckArray = [];
that.verifyOpen = false;
});
}else{
//审核拒绝
that.$modal.confirm('确认要' + text + '这些图片吗？').then(function() {
console.log('提交的数组为：',that.unVerifyCheckArray);
let data = {
ids: that.unVerifyCheckArray,
status: status
}
return changeJudge(data);
}).then(() => {
that.$modal.msgSuccess(text + "成功");
//审核完清除数组
that.unVerifyCheckArray = [];
that.verifyOpen = false;
});
}
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
@ -434,20 +573,20 @@ export default {
});
},
// 审核状态修改
handleJudgeChange(row) {
let text = row.status === "1" ? "审核通过" : "审核拒绝";
this.$modal.confirm('确认要' + text + 'id为' + row.id + '的图片吗？').then(function() {
let data = {
id: row.id,
status: row.status
}
return changeJudge(data);
}).then(() => {
this.$modal.msgSuccess(text + "成功");
}).catch(function() {
row.status = row.status === "0" ? "1" : "0";
});
},
// handleJudgeChange(row) {
// let text = row.status === "1" ? "审核通过" : "审核拒绝";
// this.$modal.confirm('确认要' + text + 'id为' + row.id + '的图片吗？').then(function() {
// let data = {
// id: row.id,
// status: row.status
// }
// return changeJudge(data);
// }).then(() => {
// this.$modal.msgSuccess(text + "成功");
// }).catch(function() {
// row.status = row.status === "0" ? "1" : "0";
// });
// },
// 热门状态修改
handleHotChange(row) {
let text = row.isHot === "1" ? "热门" : "冷门";
@ -505,6 +644,14 @@ export default {
this.title = "添加图片";
this.fileList = []
},
/** 审核图片 */
handleVerify(){
//加载图片分类列表
this.getTypeList();
this.verifyOpen = true;
this.title = "审核图片";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
@ -561,3 +708,28 @@ export default {
}
};
</script>
<style lang="scss" scoped>
.images-type{
margin-left:350px;
margin-bottom: 35px;
}
.img-type-button{
//margin-left: 50px;
}
.images-box {
width: 1100px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
margin-left: 35px;
//margin-right: 20px;
}
.img-box {
border-radius: 20px;
margin-right: 10px;
}
</style>
Write Preview
Loading…
Cancel
Save