feat(动态举报审批页面): 表单新增"举报图片"和"举报内容"
This commit is contained in:
hzj
parent
e463bde708
commit
fcb48b1105
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="filter-container">
|
||||
<!-- 系统 -->
|
||||
<el-select
|
||||
v-model="listQuery.sysOrigin"
|
||||
placeholder="系统"
|
||||
@ -15,13 +17,13 @@
|
||||
:value="item.value"
|
||||
>
|
||||
<span style="float: left;">
|
||||
<sys-origin-icon
|
||||
:icon="item.value"
|
||||
:desc="item.value"
|
||||
/></span>
|
||||
<sys-origin-icon :icon="item.value" :desc="item.value"
|
||||
/></span>
|
||||
<span style="float: left;margin-left:10px">{{ item.label }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 状态 -->
|
||||
<el-select
|
||||
v-model="listQuery.approvalStatus"
|
||||
placeholder="状态"
|
||||
@ -36,6 +38,8 @@
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<!-- 举报类型 -->
|
||||
<el-select
|
||||
v-model="listQuery.reportType"
|
||||
placeholder="举报类型"
|
||||
@ -50,6 +54,8 @@
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
|
||||
<!-- 举报人ID -->
|
||||
<el-input
|
||||
v-model.trim="listQuery.reportUserId"
|
||||
placeholder="举报人ID"
|
||||
@ -57,6 +63,8 @@
|
||||
class="filter-item"
|
||||
@blur="handlerReportUserIdBlur"
|
||||
/>
|
||||
|
||||
<!-- 被举报人ID -->
|
||||
<el-input
|
||||
v-model.trim="listQuery.reportedUserId"
|
||||
placeholder="被举报人ID"
|
||||
@ -64,6 +72,8 @@
|
||||
class="filter-item"
|
||||
@blur="handlerReportedUserIdBlur"
|
||||
/>
|
||||
|
||||
<!-- 时间范围 -->
|
||||
<div class="filter-item">
|
||||
<el-date-picker
|
||||
v-model="rangeDate"
|
||||
@ -75,6 +85,8 @@
|
||||
end-placeholder="结束日期"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 搜索按钮 -->
|
||||
<el-button
|
||||
class="filter-item"
|
||||
type="primary"
|
||||
@ -84,6 +96,8 @@
|
||||
搜索
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表单 -->
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
@ -92,7 +106,10 @@
|
||||
highlight-current-row
|
||||
@selection-change="selsUserChange"
|
||||
>
|
||||
<!-- (待审核)选中按钮 -->
|
||||
<el-table-column v-if="isAllowApproval" type="selection" width="55" />
|
||||
|
||||
<!-- 系统 -->
|
||||
<el-table-column prop="sysOrigin" label="系统" align="center">
|
||||
<template slot-scope="scope">
|
||||
<sys-origin-icon
|
||||
@ -101,24 +118,57 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 举报人 -->
|
||||
<el-table-column label="举报人" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.reportUser"
|
||||
type="text"
|
||||
@click="queryUserDetails(scope.row.reportUser.id)"
|
||||
>{{ scope.row.reportUser.userNickname }}</el-button>
|
||||
>{{ scope.row.reportUser.userNickname }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 被举报人 -->
|
||||
<el-table-column label="被举报人" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.reportedUser"
|
||||
type="text"
|
||||
@click="queryUserDetails(scope.row.reportedUser.id)"
|
||||
>{{ scope.row.reportedUser.userNickname }}</el-button>
|
||||
>{{ scope.row.reportedUser.userNickname }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 举报-图片 -->
|
||||
<el-table-column label="举报-图片" align="center" width="190">
|
||||
<template slot-scope="scope">
|
||||
<div class="cursor-pointer">
|
||||
<div v-if="handleReportedUrls(scope.row).length > 0">
|
||||
<el-image
|
||||
v-for="(item, index) in handleReportedUrls(scope.row)"
|
||||
:key="index"
|
||||
:src="item"
|
||||
:preview-src-list="handleReportedUrls(scope.row)"
|
||||
style="width: 50px; height: 50px; margin: 0px 10px 10px 0px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 举报-内容 -->
|
||||
<el-table-column
|
||||
prop="reportedContent"
|
||||
label="举报-内容"
|
||||
align="center"
|
||||
width="300"
|
||||
/>
|
||||
|
||||
<!-- 举报类型 -->
|
||||
<el-table-column label="举报类型" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div v-for="item in reportTypes" :key="item.value">
|
||||
@ -128,6 +178,8 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 动态-图片 -->
|
||||
<el-table-column label="动态-图片" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div class="cursor-pointer">
|
||||
@ -143,7 +195,11 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 动态-内容 -->
|
||||
<el-table-column prop="dynamicContent" label="动态-内容" align="center" />
|
||||
|
||||
<!-- 时间 -->
|
||||
<el-table-column label="时间" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div>创建时间: {{ scope.row.createTime | dateFormat }}</div>
|
||||
@ -152,15 +208,18 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 审批操作 -->
|
||||
<el-table-column fixed="right" label="操作" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
@click="accountHanle(scope.row)"
|
||||
>被举报账号处理</el-button>
|
||||
<el-button type="text" @click="accountHanle(scope.row)"
|
||||
>被举报账号处理</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- （待审核列表）操作按钮 -->
|
||||
<div
|
||||
v-if="listQuery.approvalStatus === 0"
|
||||
style="text-align:center;padding: 20px;"
|
||||
@ -198,6 +257,8 @@
|
||||
违规
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 分页组件 -->
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
@ -221,37 +282,37 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reportTable, report } from '@/api/dynamic'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import { validPositiveNumber } from '@/utils/validate'
|
||||
import { pickerOptions } from '@/constant/el-const'
|
||||
import { copyText } from '@/utils'
|
||||
import { sysOriginPlatforms } from '@/constant/origin'
|
||||
import AccountHanle from '@/components/data/AccountHanle'
|
||||
import { mapGetters } from 'vuex'
|
||||
import { reportTable, report } from "@/api/dynamic";
|
||||
import Pagination from "@/components/Pagination";
|
||||
import { validPositiveNumber } from "@/utils/validate";
|
||||
import { pickerOptions } from "@/constant/el-const";
|
||||
import { copyText } from "@/utils";
|
||||
import { sysOriginPlatforms } from "@/constant/origin";
|
||||
import AccountHanle from "@/components/data/AccountHanle";
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'DynamicReport',
|
||||
name: "DynamicReport",
|
||||
components: { Pagination, AccountHanle },
|
||||
data() {
|
||||
return {
|
||||
sysOriginPlatforms,
|
||||
pickerOptions,
|
||||
reportStatus: [
|
||||
{ value: 0, name: '待审核' },
|
||||
{ value: 1, name: '违规' },
|
||||
{ value: 2, name: '正常' }
|
||||
{ value: 0, name: "待审核" },
|
||||
{ value: 1, name: "违规" },
|
||||
{ value: 2, name: "正常" }
|
||||
],
|
||||
thatSelectedUserId: '',
|
||||
thatSelectedUserId: "",
|
||||
userDeatilsDrawer: false,
|
||||
accountHandleVisible: false,
|
||||
reportTypes: [
|
||||
{ value: 0, name: '非法信息' },
|
||||
{ value: 1, name: '人身攻击' },
|
||||
{ value: 2, name: '不适当的内容' },
|
||||
{ value: 3, name: '发送垃圾邮件' },
|
||||
{ value: 4, name: '诈骗' },
|
||||
{ value: 5, name: '涉及色情' }
|
||||
{ value: 0, name: "非法信息" },
|
||||
{ value: 1, name: "人身攻击" },
|
||||
{ value: 2, name: "不适当的内容" },
|
||||
{ value: 3, name: "发送垃圾邮件" },
|
||||
{ value: 4, name: "诈骗" },
|
||||
{ value: 5, name: "涉及色情" }
|
||||
],
|
||||
list: [],
|
||||
checkList: [],
|
||||
@ -259,23 +320,23 @@ export default {
|
||||
listQuery: {
|
||||
cursor: 1,
|
||||
limit: 20,
|
||||
sysOrigin: '',
|
||||
reportType: '',
|
||||
reportUserId: '',
|
||||
reportedUserId: '',
|
||||
sysOrigin: "",
|
||||
reportType: "",
|
||||
reportUserId: "",
|
||||
reportedUserId: "",
|
||||
approvalStatus: 0,
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
startTime: "",
|
||||
endTime: ""
|
||||
},
|
||||
rangeDate: '',
|
||||
rangeDate: "",
|
||||
listLoading: true
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isAllowApproval() {
|
||||
return this.listQuery.approvalStatus === 0
|
||||
return this.listQuery.approvalStatus === 0;
|
||||
},
|
||||
...mapGetters(['permissionsSysOriginPlatforms'])
|
||||
...mapGetters(["permissionsSysOriginPlatforms"])
|
||||
},
|
||||
watch: {
|
||||
rangeDate: {
|
||||
@ -283,173 +344,185 @@ export default {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
if (newVal && newVal.length > 0) {
|
||||
this.listQuery.startTime = newVal[0]
|
||||
this.listQuery.endTime = newVal[1]
|
||||
return
|
||||
this.listQuery.startTime = newVal[0];
|
||||
this.listQuery.endTime = newVal[1];
|
||||
return;
|
||||
}
|
||||
this.listQuery.startTime = ''
|
||||
this.listQuery.endTime = ''
|
||||
this.listQuery.startTime = "";
|
||||
this.listQuery.endTime = "";
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const that = this
|
||||
const querySystem = this.permissionsSysOriginPlatforms[0]
|
||||
const that = this;
|
||||
const querySystem = this.permissionsSysOriginPlatforms[0];
|
||||
if (!querySystem) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
that.listQuery.sysOrigin = querySystem.value
|
||||
that.renderData()
|
||||
that.listQuery.sysOrigin = querySystem.value;
|
||||
that.renderData();
|
||||
},
|
||||
methods: {
|
||||
renderData(isClean) {
|
||||
const that = this
|
||||
that.checkList = []
|
||||
const that = this;
|
||||
that.checkList = [];
|
||||
if (isClean === true) {
|
||||
that.list = []
|
||||
that.listQuery.cursor = 1
|
||||
that.list = [];
|
||||
that.listQuery.cursor = 1;
|
||||
}
|
||||
that.listLoading = true
|
||||
that.listLoading = true;
|
||||
reportTable(that.listQuery).then(res => {
|
||||
const { body } = res
|
||||
that.total = body.total || 0
|
||||
that.list = body.records
|
||||
that.listLoading = false
|
||||
})
|
||||
const { body } = res;
|
||||
that.total = body.total || 0;
|
||||
that.list = body.records;
|
||||
that.listLoading = false;
|
||||
});
|
||||
},
|
||||
handleSearch() {
|
||||
this.renderData(true)
|
||||
this.renderData(true);
|
||||
},
|
||||
accountHanle(row) {
|
||||
this.accountHandleVisible = true
|
||||
this.thatSelectedUserId = row.reportedUser.id
|
||||
this.accountHandleVisible = true;
|
||||
this.thatSelectedUserId = row.reportedUser.id;
|
||||
},
|
||||
renderDataSuccess() {
|
||||
this.$message({
|
||||
message: 'Successful',
|
||||
type: 'success'
|
||||
})
|
||||
this.renderData()
|
||||
message: "Successful",
|
||||
type: "success"
|
||||
});
|
||||
this.renderData();
|
||||
},
|
||||
selsUserChange(checkList) {
|
||||
this.checkList = checkList
|
||||
this.checkList = checkList;
|
||||
},
|
||||
queryUserDetails(userId) {
|
||||
this.userDeatilsDrawer = true
|
||||
this.thatSelectedUserId = userId
|
||||
this.userDeatilsDrawer = true;
|
||||
this.thatSelectedUserId = userId;
|
||||
},
|
||||
pass() {
|
||||
const that = this
|
||||
const that = this;
|
||||
if (that.checkList.length === 0) {
|
||||
that.$opsMessage.warn('请勾选审批项')
|
||||
return
|
||||
that.$opsMessage.warn("请勾选审批项");
|
||||
return;
|
||||
}
|
||||
that
|
||||
.$confirm('确认审核选中记录吗？', '提示', {
|
||||
type: 'warning'
|
||||
.$confirm("确认审核选中记录吗？", "提示", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
that.listLoading = true
|
||||
that.listLoading = true;
|
||||
const paramsData = {
|
||||
contentIds: that.getApprovalParams(),
|
||||
approvalStatus: 2
|
||||
}
|
||||
};
|
||||
report(paramsData)
|
||||
.then(res => {
|
||||
that.listLoading = false
|
||||
that.$opsMessage.success()
|
||||
that.renderData(true)
|
||||
that.listLoading = false;
|
||||
that.$opsMessage.success();
|
||||
that.renderData(true);
|
||||
})
|
||||
.catch(() => {
|
||||
that.listLoading = false
|
||||
})
|
||||
that.listLoading = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {})
|
||||
.catch(() => {});
|
||||
},
|
||||
notpass() {
|
||||
const that = this
|
||||
const that = this;
|
||||
if (that.checkList.length === 0) {
|
||||
that.$opsMessage.warn('请勾选审批项')
|
||||
return
|
||||
that.$opsMessage.warn("请勾选审批项");
|
||||
return;
|
||||
}
|
||||
that
|
||||
.$confirm('确认审核选中记录吗？', '提示', {
|
||||
type: 'warning'
|
||||
.$confirm("确认审核选中记录吗？", "提示", {
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
that.listLoading = true
|
||||
that.listLoading = true;
|
||||
const paramsData = {
|
||||
contentIds: that.getApprovalParams(),
|
||||
approvalStatus: 1
|
||||
}
|
||||
};
|
||||
report(paramsData)
|
||||
.then(res => {
|
||||
that.listLoading = false
|
||||
that.$opsMessage.success()
|
||||
that.renderData(true)
|
||||
that.listLoading = false;
|
||||
that.$opsMessage.success();
|
||||
that.renderData(true);
|
||||
})
|
||||
.catch(() => {
|
||||
that.listLoading = false
|
||||
})
|
||||
that.listLoading = false;
|
||||
});
|
||||
})
|
||||
.catch(() => {})
|
||||
.catch(() => {});
|
||||
},
|
||||
getApprovalParams() {
|
||||
const that = this
|
||||
const approvalParams = []
|
||||
const that = this;
|
||||
const approvalParams = [];
|
||||
that.checkList.forEach(item => {
|
||||
approvalParams.push(item.dynamicContentId)
|
||||
})
|
||||
return approvalParams
|
||||
approvalParams.push(item.dynamicContentId);
|
||||
});
|
||||
return approvalParams;
|
||||
},
|
||||
|
||||
// 举报图片处理
|
||||
handleReportedUrls(row) {
|
||||
var pictures = [];
|
||||
if (!row.reportedUrls) {
|
||||
return [];
|
||||
}
|
||||
pictures = row.reportedUrls.split(",");
|
||||
return pictures;
|
||||
},
|
||||
|
||||
// 动态图片处理
|
||||
handleImageUrls(row) {
|
||||
var pictures = []
|
||||
var pictures = [];
|
||||
if (!row.dynamicPictures) {
|
||||
return []
|
||||
return [];
|
||||
}
|
||||
row.dynamicPictures.forEach((item, index) => {
|
||||
pictures.push(item.resourceUrl)
|
||||
})
|
||||
return pictures
|
||||
pictures.push(item.resourceUrl);
|
||||
});
|
||||
return pictures;
|
||||
},
|
||||
handlerReportUserIdBlur(event) {
|
||||
if (!validPositiveNumber(this.listQuery.reportUserId)) {
|
||||
this.listQuery.reportUserId = ''
|
||||
this.listQuery.reportUserId = "";
|
||||
}
|
||||
},
|
||||
handlerReportedUserIdBlur(event) {
|
||||
if (!validPositiveNumber(this.listQuery.reportedUserId)) {
|
||||
this.listQuery.reportedUserId = ''
|
||||
this.listQuery.reportedUserId = "";
|
||||
}
|
||||
},
|
||||
handleVideoClick(imageUrls) {
|
||||
if (!imageUrls) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
window.open(imageUrls)
|
||||
window.open(imageUrls);
|
||||
},
|
||||
handleVideoOpenClick(url) {
|
||||
if (!url) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
window.open(url)
|
||||
window.open(url);
|
||||
},
|
||||
copyTextContent(text) {
|
||||
const that = this
|
||||
const that = this;
|
||||
copyText(text)
|
||||
.then(() => {
|
||||
that.$message({
|
||||
message: '复制成功',
|
||||
type: 'success'
|
||||
})
|
||||
message: "复制成功",
|
||||
type: "success"
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
that.$message({
|
||||
message: '复制失败',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
message: "复制失败",
|
||||
type: "error"
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user