mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-11 18:42:54 +00:00
349 lines
13 KiB
Vue
349 lines
13 KiB
Vue
<template>
|
|
<div class="project-management">
|
|
<div class="management-title">
|
|
{{ $L('举报管理') }}
|
|
<div class="title-icon">
|
|
<Loading v-if="loadIng > 0" />
|
|
</div>
|
|
</div>
|
|
<div class="search-container lr">
|
|
<ul>
|
|
<li>
|
|
<div class="search-label">
|
|
{{ $L("举报类型") }}
|
|
</div>
|
|
<div class="search-content">
|
|
<Select v-model="keys.type" :placeholder="$L('全部')">
|
|
<Option value=" ">{{ $L('全部') }}</Option>
|
|
<Option v-for="(item, index) in typeList" :key="index" :value="item.id">{{ $L(item.label) }}
|
|
</Option>
|
|
</Select>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="search-label">
|
|
{{ $L("举报状态") }}
|
|
</div>
|
|
<div class="search-content">
|
|
<Select v-model="keys.status" :placeholder="$L('全部')">
|
|
<Option value=" ">{{ $L('全部') }}</Option>
|
|
<Option :value="0">{{ $L('待处理') }}</Option>
|
|
<Option :value="1">{{ $L('已处理') }}</Option>
|
|
</Select>
|
|
</div>
|
|
</li>
|
|
<li class="search-button">
|
|
<SearchButton
|
|
:loading="loadIng > 0"
|
|
:filtering="keyIs"
|
|
placement="right"
|
|
@search="onSearch"
|
|
@refresh="getLists"
|
|
@cancelFilter="keyIs=false"/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="table-page-box">
|
|
<Table :columns="columns" :data="list" :loading="loadIng > 0" :no-data-text="$L(noText)" stripe />
|
|
<Page :total="total" :current="page" :page-size="pageSize" :disabled="loadIng > 0" :simple="windowPortrait"
|
|
:page-size-opts="[10, 20, 30, 50, 100]" show-elevator show-sizer show-total @on-change="setPage"
|
|
@on-page-size-change="setPageSize" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SearchButton from "../../../components/SearchButton.vue";
|
|
|
|
export default {
|
|
name: "ComplaintManagement",
|
|
components: {SearchButton},
|
|
data() {
|
|
const typeList = [
|
|
{ id: 10, label: "诈骗诱导转账" },
|
|
{ id: 20, label: "引流下载其他APP付费" },
|
|
{ id: 30, label: "敲诈勒索" },
|
|
{ id: 40, label: "照片与本人不一致" },
|
|
{ id: 50, label: "色情低俗" },
|
|
{ id: 60, label: "频繁广告骚扰" },
|
|
{ id: 70, label: "其他问题" }
|
|
];
|
|
|
|
return {
|
|
loadIng: 0,
|
|
|
|
keys: {},
|
|
keyIs: false,
|
|
|
|
typeList: typeList,
|
|
|
|
columns: [
|
|
{
|
|
title: 'ID',
|
|
key: 'id',
|
|
width: 80,
|
|
render: (h, { row, column }) => {
|
|
return h('TableAction', {
|
|
props: {
|
|
column: column,
|
|
align: 'left'
|
|
}
|
|
}, [
|
|
h("div", row.id),
|
|
]);
|
|
}
|
|
},
|
|
{
|
|
title: this.$L('举报类型'),
|
|
key: 'type',
|
|
minWidth: 120,
|
|
render: (h, { row }) => {
|
|
const label = this.$L(typeList.find(h => h.id == row.type).label)
|
|
return h('div', {
|
|
style: {
|
|
'overflow': 'hidden',
|
|
'text-overflow': 'ellipsis',
|
|
'white-space': 'nowrap'
|
|
},
|
|
on: {
|
|
click: () => {
|
|
$A.modalInfo({
|
|
language: false,
|
|
title: this.$L('举报类型'),
|
|
content: label
|
|
})
|
|
}
|
|
}
|
|
}, label)
|
|
}
|
|
},
|
|
{
|
|
title: this.$L('状态'),
|
|
key: 'status',
|
|
minWidth: 80,
|
|
render: (h, { row }) => {
|
|
let text = row.status == 0 ? '未处理': '已处理';
|
|
return h('div', {
|
|
style: {
|
|
color: row.status == 0 ? '#f00' : 'inherit',
|
|
}
|
|
}, [h('AutoTip', this.$L(text))])
|
|
}
|
|
},
|
|
{
|
|
title: this.$L('举报原因'),
|
|
minWidth: 150,
|
|
render: (h, { row }) => {
|
|
return h('div', {
|
|
style: {
|
|
'overflow': 'hidden',
|
|
'text-overflow': 'ellipsis',
|
|
'white-space': 'nowrap'
|
|
},
|
|
on: {
|
|
click: () => {
|
|
$A.modalInfo({
|
|
language: false,
|
|
title: this.$L('举报原因'),
|
|
content: row.reason
|
|
})
|
|
}
|
|
}
|
|
}, row.reason)
|
|
}
|
|
},
|
|
{
|
|
title: this.$L('举报图'),
|
|
minWidth: 85,
|
|
render: (h, { row }) => {
|
|
const list = JSON.parse(row.imgs)?.map(path => {
|
|
return {
|
|
src: $A.apiUrl("../" + path),
|
|
}
|
|
});
|
|
if (list.length === 0) {
|
|
return h('div', '-')
|
|
}
|
|
return h('div', {
|
|
style: {
|
|
color: '#1890ff',
|
|
},
|
|
on: {
|
|
click: () => {
|
|
this.$store.dispatch("previewImage", {index: 0, list})
|
|
}
|
|
}
|
|
}, [h('AutoTip', this.$L('点击查看'))])
|
|
}
|
|
},
|
|
{
|
|
title: this.$L('举报人'),
|
|
minWidth: 100,
|
|
render: (h, { row }) => {
|
|
return h('UserAvatar', {
|
|
props: {
|
|
showName: true,
|
|
size: 22,
|
|
userid: row.userid,
|
|
}
|
|
})
|
|
}
|
|
},
|
|
{
|
|
title: this.$L('创建时间'),
|
|
key: 'created_at',
|
|
width: 168,
|
|
},
|
|
{
|
|
title: this.$L('操作'),
|
|
align: 'center',
|
|
width: 100,
|
|
render: (h, params) => {
|
|
const vNode = [
|
|
params.row.status == 0 && h('Poptip', {
|
|
props: {
|
|
title: this.$L('你确定要处理吗？'),
|
|
confirm: true,
|
|
transfer: true,
|
|
placement: 'left',
|
|
okText: this.$L('确定'),
|
|
cancelText: this.$L('取消'),
|
|
},
|
|
style: {
|
|
fontSize: '13px',
|
|
cursor: 'pointer',
|
|
color: '#84C56A',
|
|
},
|
|
on: {
|
|
'on-ok': () => {
|
|
this.handle(params.row);
|
|
}
|
|
},
|
|
}, this.$L('处理')),
|
|
h('Poptip', {
|
|
props: {
|
|
title: this.$L('你确定要删除吗？'),
|
|
confirm: true,
|
|
transfer: true,
|
|
placement: 'left',
|
|
okText: this.$L('确定'),
|
|
cancelText: this.$L('取消'),
|
|
},
|
|
style: {
|
|
marginLeft: params.row.status == 0 ? '8px' : '0',
|
|
fontSize: '13px',
|
|
cursor: 'pointer',
|
|
color: '#f00',
|
|
},
|
|
on: {
|
|
'on-ok': () => {
|
|
this.delete(params.row);
|
|
}
|
|
},
|
|
}, this.$L('删除'))
|
|
];
|
|
return h('TableAction', {
|
|
props: {
|
|
column: params.column
|
|
}
|
|
}, vNode);
|
|
},
|
|
}
|
|
],
|
|
list: [],
|
|
|
|
page: 1,
|
|
pageSize: 20,
|
|
total: 0,
|
|
noText: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getLists();
|
|
},
|
|
watch: {
|
|
keyIs(v) {
|
|
if (!v) {
|
|
this.keys = {}
|
|
this.setPage(1)
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onSearch() {
|
|
this.page = 1;
|
|
this.getLists();
|
|
},
|
|
|
|
getLists() {
|
|
this.loadIng++;
|
|
this.$store.dispatch("call", {
|
|
url: 'complaint/lists',
|
|
data: {
|
|
type: this.keys.type,
|
|
status: this.keys.status,
|
|
page: Math.max(this.page, 1),
|
|
pagesize: Math.max($A.runNum(this.pageSize), 10),
|
|
},
|
|
}).then(({ data }) => {
|
|
this.page = data.current_page;
|
|
this.total = data.total;
|
|
this.list = data.data;
|
|
this.noText = '没有相关的数据';
|
|
}).catch(() => {
|
|
this.noText = '数据加载失败';
|
|
}).finally(_ => {
|
|
this.loadIng--;
|
|
})
|
|
},
|
|
|
|
setPage(page) {
|
|
this.page = page;
|
|
this.getLists();
|
|
},
|
|
|
|
setPageSize(pageSize) {
|
|
this.page = 1;
|
|
this.pageSize = pageSize;
|
|
this.getLists();
|
|
},
|
|
|
|
handle(row) {
|
|
this.loadIng++;
|
|
this.$store.dispatch("call", {
|
|
url: 'complaint/action',
|
|
data: {
|
|
id: row.id,
|
|
type: 'handle'
|
|
},
|
|
}).then(() => {
|
|
this.getLists();
|
|
}).catch(({ msg }) => {
|
|
$A.modalError(msg);
|
|
}).finally(_ => {
|
|
this.loadIng--;
|
|
})
|
|
},
|
|
|
|
delete(row) {
|
|
this.list = this.list.filter(({ id }) => id != row.id);
|
|
this.loadIng++;
|
|
this.$store.dispatch("call", {
|
|
url: 'complaint/action',
|
|
data: {
|
|
id: row.id,
|
|
type: 'delete'
|
|
},
|
|
}).then(() => {
|
|
this.getLists();
|
|
}).catch(({ msg }) => {
|
|
$A.modalError(msg);
|
|
this.getLists();
|
|
}).finally(_ => {
|
|
this.loadIng--;
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|