index.vue
3.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<template>
<page-view has-card has-bread>
<filter-search :inline="true" :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
<!-- <filter-search-item label="类型">-->
<!-- <a-select v-model="filter.type" :options="typeOption" placeholder="请选择" allow-clear />-->
<!-- </filter-search-item>-->
<filter-search-item label="反馈用户">
<a-input v-model="filter.name" placeholder="请输入" allow-clear />
</filter-search-item>
<filter-search-item label="反馈时间">
<a-range-picker
v-model="filter.createBetween"
:allow-clear="true"
:show-time="true"
:time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
format="YYYY-MM-DD HH:mm"
/>
</filter-search-item>
<filter-search-item label="状态">
<a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
</filter-search-item>
</filter-search>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
<user-table-column data-index="user_id" user="user" title="反馈用户" show-href :width="160" />
<enum-table-column data-index="type" title="分类" :option="typeOption" :width="100" />
<user-table-column data-index="person_id" user="person" title="关联内容" show-href prefix="@" :width="160" />
<filter-table-column data-index="reason" title="反馈内容" :width="300">
<template #default="{ record }">
<a-typography-text :ellipsis="{ rows: 1, showTooltip: true }">
{{ record.reason }}
<template v-if="record.desc">：{{ record.desc }}</template>
</a-typography-text>
</template>
</filter-table-column>
<date-table-column data-index="created_at" title="反馈时间" :split="false" :width="170" />
<enum-table-column data-index="status" title="状态" :option="statusOption" :width="100" />
<filter-table-column data-index="operation" title="操作" :width="100">
<template #default="{ record }">
<a-link v-if="record.status === 0" :hoverable="false" class="link-hover" @click="handleUpdate(record)">处理</a-link>
</template>
</filter-table-column>
</filter-table>
</page-view>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { AnyObject } from '@/types/global';
import useLoading from '@/hooks/loading';
import useReportApi from '@/http/report';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import UserTableColumn from '@/components/filter/user-table-column.vue';
import DateTableColumn from '@/components/filter/date-table-column.vue';
import { TableData } from '@arco-design/web-vue';
import { createModalVNode } from '@/utils/createVNode';
import { promiseToBoolean } from '@/utils';
const { typeOption, statusOption } = useReportApi;
const { loading, setLoading } = useLoading(false);
const filter = ref<AnyObject>({});
const tableRef = ref();
const onQuery = async (params: AnyObject) => {
setLoading(true);
return useReportApi
.get({ ...filter.value, ...params, setSort: '-id', setWith: ['user:id,nick_name,identity', 'person:id,nick_name,identity'] })
.finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { type: '', name: '', status: '', createBetween: [] };
onSearch();
};
onMounted(() => onReset());
const handleUpdate = (record: TableData) =>
createModalVNode('该用户举报/反馈的内容已被处理？', {
title: '处理举报/反馈',
okText: '是',
cancelText: '否',
onBeforeOk: () => promiseToBoolean(useReportApi.update(record.id, { status: 1 })),
onOk: () => tableRef.value?.onFetch(),
});
</script>
<style lang="less" scoped></style>