feat: page
This commit is contained in:
zzc
9
src/api/maomaotou/cat/index.js
Normal file
9
src/api/maomaotou/cat/index.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function getList(data) {
|
||||||
|
return request({
|
||||||
|
url: '/management/api/maomaotou/cat/list',
|
||||||
|
method: 'get',
|
||||||
|
params: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
9
src/api/maomaotou/post/index.js
Normal file
9
src/api/maomaotou/post/index.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function getList(data) {
|
||||||
|
return request({
|
||||||
|
url: '/management/api/maomaotou/post/list',
|
||||||
|
method: 'get',
|
||||||
|
params: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
17
src/api/maomaotou/user/index.js
Normal file
17
src/api/maomaotou/user/index.js
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export function getList(data) {
|
||||||
|
return request({
|
||||||
|
url: '/management/api/maomaotou/user/list',
|
||||||
|
method: 'get',
|
||||||
|
params: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getChatList(data) {
|
||||||
|
return request({
|
||||||
|
url: '/management/api/maomaotou/user/chat/list',
|
||||||
|
method: 'get',
|
||||||
|
params: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
@@ -48,6 +48,81 @@ export const asyncRoutes = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/maomaotou',
|
||||||
|
component: Layout,
|
||||||
|
redirect: 'noRedirect',
|
||||||
|
name: 'CxshMini',
|
||||||
|
meta: { title: '猫猫头', icon: 'cat', permissions: ['admin'] },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'cat',
|
||||||
|
component: EmptyLayout,
|
||||||
|
alwaysShow: true,
|
||||||
|
redirect: 'noRedirect',
|
||||||
|
name: 'cat',
|
||||||
|
meta: {
|
||||||
|
title: '猫猫',
|
||||||
|
icon: 'cat',
|
||||||
|
permissions: ['admin'],
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'cat',
|
||||||
|
name: 'Cat',
|
||||||
|
component: () => import('@/views/maomao/cat/cat/index'),
|
||||||
|
meta: { title: '猫猫' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'post',
|
||||||
|
component: EmptyLayout,
|
||||||
|
alwaysShow: true,
|
||||||
|
redirect: 'noRedirect',
|
||||||
|
name: 'Post',
|
||||||
|
meta: {
|
||||||
|
title: '帖子',
|
||||||
|
icon: 'post',
|
||||||
|
permissions: ['admin'],
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'post',
|
||||||
|
name: 'Post',
|
||||||
|
component: () => import('@/views/maomao/post/post/index'),
|
||||||
|
meta: { title: '帖子' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'user',
|
||||||
|
component: EmptyLayout,
|
||||||
|
alwaysShow: true,
|
||||||
|
redirect: 'noRedirect',
|
||||||
|
name: 'User',
|
||||||
|
meta: {
|
||||||
|
title: '用户',
|
||||||
|
icon: 'user',
|
||||||
|
permissions: ['admin'],
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'user',
|
||||||
|
name: 'User',
|
||||||
|
component: () => import('@/views/maomao/user/user/index'),
|
||||||
|
meta: { title: '用户' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'userChat',
|
||||||
|
name: 'UserChat',
|
||||||
|
component: () => import('@/views/maomao/user/chat/index'),
|
||||||
|
meta: { title: '聊天' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/cxshMini',
|
path: '/cxshMini',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ export function formatTime(time, option) {
|
|||||||
if (option) {
|
if (option) {
|
||||||
return parseTime(time, option)
|
return parseTime(time, option)
|
||||||
} else {
|
} else {
|
||||||
return `${time.getMonth() + 1}月${time.getDate()}日${time.getHours()}时${time.getMinutes()}分`
|
return `${time.getFullYear()}/${time.getMonth() + 1}/${time.getDate()} ${time.getHours()}:${time.getMinutes()}`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
185
src/views/maomao/cat/cat/index.vue
Normal file
185
src/views/maomao/cat/cat/index.vue
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cat-container">
|
||||||
|
<vab-query-form>
|
||||||
|
<vab-query-form-left-panel :span="12">
|
||||||
|
<!-- <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button> -->
|
||||||
|
<!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
|
||||||
|
</vab-query-form-left-panel>
|
||||||
|
<vab-query-form-right-panel :span="12">
|
||||||
|
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</vab-query-form-right-panel>
|
||||||
|
</vab-query-form>
|
||||||
|
|
||||||
|
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
|
||||||
|
<!-- <el-table-column show-overflow-tooltip type="selection" /> -->
|
||||||
|
<el-table-column align="center" label="头像" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<!-- 使用 show-overflow-tooltip 显示图片，并添加 tooltip -->
|
||||||
|
<el-tooltip class="item" :content="scope.row.name" effect="dark" placement="top">
|
||||||
|
<img alt="image" :src="host + scope.row.avatar" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="left" label="猫咪信息" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<strong>名称：</strong>
|
||||||
|
{{ row.name }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>品种：</strong>
|
||||||
|
{{ row.breed }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>年龄：</strong>
|
||||||
|
{{ row.age }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>描述：</strong>
|
||||||
|
{{ row.description }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>性别：</strong>
|
||||||
|
{{ row.gender ? (row.gender === 'male' ? '男' : '女') : '未公开' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="铲屎官" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<img alt="image" :src="row.owner.avatar" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="left" label="铲屎官信息" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<strong>名称：</strong>
|
||||||
|
{{ row.owner.nickname }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>宣言</strong>
|
||||||
|
{{ row.owner.bio }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="创建时间" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.createdAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<!-- <el-table-column label="操作" show-overflow-tooltip width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
:current-page="queryForm.pageNo"
|
||||||
|
:layout="layout"
|
||||||
|
:page-size="queryForm.pageSize"
|
||||||
|
:total="total"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getList } from '@/api/maomaotou/cat'
|
||||||
|
import { formatTime } from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Cat',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
host: 'https://file.lihailezzc.com/',
|
||||||
|
list: null,
|
||||||
|
listLoading: true,
|
||||||
|
layout: 'total, sizes, prev, pager, next, jumper',
|
||||||
|
total: 0,
|
||||||
|
selectRows: '',
|
||||||
|
elementLoadingText: '正在加载...',
|
||||||
|
queryForm: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
permission: '',
|
||||||
|
},
|
||||||
|
timeOutID: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
clearTimeout(this.timeOutID)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatTime,
|
||||||
|
setSelectRows(val) {
|
||||||
|
this.selectRows = val
|
||||||
|
},
|
||||||
|
handleEdit(row) {
|
||||||
|
if (row.id) {
|
||||||
|
this.$refs['edit'].showEdit(row)
|
||||||
|
} else {
|
||||||
|
this.$refs['edit'].showEdit()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
if (row.id) {
|
||||||
|
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
||||||
|
const { msg } = await doDelete({ ids: [row.id] })
|
||||||
|
this.$baseMessage(msg, 'success')
|
||||||
|
this.fetchData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (this.selectRows.length > 0) {
|
||||||
|
const ids = this.selectRows.map((item) => item.id).join()
|
||||||
|
this.$baseConfirm('你确定要删除选中项吗', null, async () => {
|
||||||
|
const { msg } = await doDelete({ ids: ids.split(',') })
|
||||||
|
this.$baseMessage(msg, 'success')
|
||||||
|
this.fetchData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$baseMessage('未选中任何行', 'error')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.queryForm.pageSize = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.queryForm.pageNo = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
queryData() {
|
||||||
|
this.queryForm.pageNo = 1
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
async fetchData() {
|
||||||
|
this.listLoading = true
|
||||||
|
const { data } = await getList(this.queryForm)
|
||||||
|
this.list = data.list
|
||||||
|
this.total = data.totalCount
|
||||||
|
this.timeOutID = setTimeout(() => {
|
||||||
|
this.listLoading = false
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
232
src/views/maomao/post/post/index.vue
Normal file
232
src/views/maomao/post/post/index.vue
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cat-container">
|
||||||
|
<vab-query-form>
|
||||||
|
<!-- <vab-query-form-left-panel :span="12"> -->
|
||||||
|
<!-- <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button> -->
|
||||||
|
<!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
|
||||||
|
<!-- </vab-query-form-left-panel> -->
|
||||||
|
<vab-query-form-left-panel :span="12">
|
||||||
|
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
||||||
|
<el-form-item>
|
||||||
|
<el-select v-model="queryForm.ownerId" clearable filterable placeholder="请选择作者">
|
||||||
|
<el-option v-for="author in authorList" :key="author.id" :label="author.nickname" :value="author.id">
|
||||||
|
<!-- 自定义内容 -->
|
||||||
|
<template #default>
|
||||||
|
<div class="author-option">
|
||||||
|
<img alt="avatar" class="author-avatar" :src="author.avatar" />
|
||||||
|
<span class="author-name">{{ author.nickname }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item>
|
||||||
|
<el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
|
||||||
|
</el-form-item> -->
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</vab-query-form-left-panel>
|
||||||
|
</vab-query-form>
|
||||||
|
|
||||||
|
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
|
||||||
|
<!-- <el-table-column show-overflow-tooltip type="selection" /> -->
|
||||||
|
<el-table-column align="center" label="内容" prop="content" show-overflow-tooltip />
|
||||||
|
<el-table-column align="center" label="图片" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div class="image-grid">
|
||||||
|
<img v-for="(img, index) in row.images" :key="index" alt="image" class="grid-image" :src="host + img" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="作者" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<img alt="image" :src="row.owner.avatar" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="left" label="作者信息" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<strong>名称：</strong>
|
||||||
|
{{ row.owner.nickname }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>宣言</strong>
|
||||||
|
{{ row.owner.bio }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="left" label="动态信息" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<strong>点赞数：</strong>
|
||||||
|
{{ row.likeCount || 0 }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>评论数：</strong>
|
||||||
|
{{ row.commentCount || 0 }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>审核状态：</strong>
|
||||||
|
<el-tag v-if="row.auditStatus === 'approved'" type="success">已通过</el-tag>
|
||||||
|
<el-tag v-else-if="row.auditStatus === 'rejected'" type="danger">未通过</el-tag>
|
||||||
|
<el-tag v-else type="info">未审核</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="创建时间" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.createdAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<!-- <el-table-column label="操作" show-overflow-tooltip width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
:current-page="queryForm.pageNo"
|
||||||
|
:layout="layout"
|
||||||
|
:page-size="queryForm.pageSize"
|
||||||
|
:total="total"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getList } from '@/api/maomaotou/post'
|
||||||
|
import { getList as getUserList } from '@/api/maomaotou/user'
|
||||||
|
import { formatTime } from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Cat',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
host: 'https://file.lihailezzc.com/',
|
||||||
|
list: null,
|
||||||
|
listLoading: true,
|
||||||
|
layout: 'total, sizes, prev, pager, next, jumper',
|
||||||
|
total: 0,
|
||||||
|
selectRows: '',
|
||||||
|
elementLoadingText: '正在加载...',
|
||||||
|
authorList: [],
|
||||||
|
queryForm: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
permission: '',
|
||||||
|
userId: '',
|
||||||
|
},
|
||||||
|
timeOutID: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
|
this.fetchAuthorList()
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
clearTimeout(this.timeOutID)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatTime,
|
||||||
|
setSelectRows(val) {
|
||||||
|
this.selectRows = val
|
||||||
|
},
|
||||||
|
handleEdit(row) {
|
||||||
|
if (row.id) {
|
||||||
|
this.$refs['edit'].showEdit(row)
|
||||||
|
} else {
|
||||||
|
this.$refs['edit'].showEdit()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
if (row.id) {
|
||||||
|
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
||||||
|
const { msg } = await doDelete({ ids: [row.id] })
|
||||||
|
this.$baseMessage(msg, 'success')
|
||||||
|
this.fetchData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (this.selectRows.length > 0) {
|
||||||
|
const ids = this.selectRows.map((item) => item.id).join()
|
||||||
|
this.$baseConfirm('你确定要删除选中项吗', null, async () => {
|
||||||
|
const { msg } = await doDelete({ ids: ids.split(',') })
|
||||||
|
this.$baseMessage(msg, 'success')
|
||||||
|
this.fetchData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$baseMessage('未选中任何行', 'error')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.queryForm.pageSize = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.queryForm.pageNo = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
queryData() {
|
||||||
|
this.queryForm.pageNo = 1
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
async fetchData() {
|
||||||
|
this.listLoading = true
|
||||||
|
const { data } = await getList(this.queryForm)
|
||||||
|
this.list = data.list
|
||||||
|
this.total = data.totalCount
|
||||||
|
this.timeOutID = setTimeout(() => {
|
||||||
|
this.listLoading = false
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
async fetchAuthorList() {
|
||||||
|
const { data } = await getUserList({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
})
|
||||||
|
this.authorList = data.list
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.author-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.author-avatar {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.author-name {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.image-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-image {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
240
src/views/maomao/user/chat/index.vue
Normal file
240
src/views/maomao/user/chat/index.vue
Normal file
@@ -0,0 +1,240 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cat-chat-container">
|
||||||
|
<vab-query-form>
|
||||||
|
<!-- <vab-query-form-left-panel :span="12"> -->
|
||||||
|
<!-- <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button> -->
|
||||||
|
<!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
|
||||||
|
<!-- </vab-query-form-left-panel> -->
|
||||||
|
<vab-query-form-left-panel :span="12">
|
||||||
|
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
||||||
|
<el-form-item>
|
||||||
|
<el-select v-model="queryForm.fromUserId" clearable filterable placeholder="请选择发送者">
|
||||||
|
<el-option v-for="author in authorList" :key="author.id" :label="author.nickname" :value="author.id">
|
||||||
|
<!-- 自定义内容 -->
|
||||||
|
<template #default>
|
||||||
|
<div class="author-option">
|
||||||
|
<img alt="avatar" class="author-avatar" :src="author.avatar" />
|
||||||
|
<span class="author-name">{{ author.nickname }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-select v-model="queryForm.toUserId" clearable filterable placeholder="请选择接收者">
|
||||||
|
<el-option v-for="author in authorList" :key="author.id" :label="author.nickname" :value="author.id">
|
||||||
|
<!-- 自定义内容 -->
|
||||||
|
<template #default>
|
||||||
|
<div class="author-option">
|
||||||
|
<img alt="avatar" class="author-avatar" :src="author.avatar" />
|
||||||
|
<span class="author-name">{{ author.nickname }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</vab-query-form-left-panel>
|
||||||
|
</vab-query-form>
|
||||||
|
|
||||||
|
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
|
||||||
|
<!-- <el-table-column show-overflow-tooltip type="selection" /> -->
|
||||||
|
<el-table-column align="center" label="发送者" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div class="avatar-nickname">
|
||||||
|
<img alt="avatar" class="avatar-image" :src="row.fromUser.avatar" />
|
||||||
|
<div class="nickname-text">
|
||||||
|
{{ row.fromUser.nickname }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="接收者" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div class="avatar-nickname">
|
||||||
|
<img alt="avatar" class="avatar-image" :src="row.toUser.avatar" />
|
||||||
|
<div class="nickname-text">
|
||||||
|
{{ row.toUser.nickname }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="类型" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ row.type === 'text' ? '文本' : '图片' }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="内容" prop="content" show-overflow-tooltip />
|
||||||
|
<el-table-column align="center" label="创建时间" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.createdAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<!-- <el-table-column label="操作" show-overflow-tooltip width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
:current-page="queryForm.pageNo"
|
||||||
|
:layout="layout"
|
||||||
|
:page-size="queryForm.pageSize"
|
||||||
|
:total="total"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getList as getUserList, getChatList } from '@/api/maomaotou/user'
|
||||||
|
import { formatTime } from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'CatChat',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
host: 'https://file.lihailezzc.com/',
|
||||||
|
list: null,
|
||||||
|
listLoading: true,
|
||||||
|
layout: 'total, sizes, prev, pager, next, jumper',
|
||||||
|
total: 0,
|
||||||
|
selectRows: '',
|
||||||
|
elementLoadingText: '正在加载...',
|
||||||
|
authorList: [],
|
||||||
|
queryForm: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
permission: '',
|
||||||
|
fromUserId: '',
|
||||||
|
toUserId: '',
|
||||||
|
},
|
||||||
|
timeOutID: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
|
this.fetchAuthorList()
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
clearTimeout(this.timeOutID)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatTime,
|
||||||
|
setSelectRows(val) {
|
||||||
|
this.selectRows = val
|
||||||
|
},
|
||||||
|
handleEdit(row) {
|
||||||
|
if (row.id) {
|
||||||
|
this.$refs['edit'].showEdit(row)
|
||||||
|
} else {
|
||||||
|
this.$refs['edit'].showEdit()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
if (row.id) {
|
||||||
|
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
||||||
|
const { msg } = await doDelete({ ids: [row.id] })
|
||||||
|
this.$baseMessage(msg, 'success')
|
||||||
|
this.fetchData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (this.selectRows.length > 0) {
|
||||||
|
const ids = this.selectRows.map((item) => item.id).join()
|
||||||
|
this.$baseConfirm('你确定要删除选中项吗', null, async () => {
|
||||||
|
const { msg } = await doDelete({ ids: ids.split(',') })
|
||||||
|
this.$baseMessage(msg, 'success')
|
||||||
|
this.fetchData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$baseMessage('未选中任何行', 'error')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.queryForm.pageSize = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.queryForm.pageNo = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
queryData() {
|
||||||
|
this.queryForm.pageNo = 1
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
async fetchData() {
|
||||||
|
this.listLoading = true
|
||||||
|
const { data } = await getChatList(this.queryForm)
|
||||||
|
this.list = data.list
|
||||||
|
this.total = data.totalCount
|
||||||
|
this.timeOutID = setTimeout(() => {
|
||||||
|
this.listLoading = false
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
async fetchAuthorList() {
|
||||||
|
const { data } = await getUserList({
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
})
|
||||||
|
this.authorList = data.list
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.author-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.author-avatar {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.author-name {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.image-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-image {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
.avatar-nickname {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-image {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nickname-text {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
210
src/views/maomao/user/user/index.vue
Normal file
210
src/views/maomao/user/user/index.vue
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cat-user-container">
|
||||||
|
<vab-query-form>
|
||||||
|
<!-- <vab-query-form-left-panel :span="12"> -->
|
||||||
|
<!-- <el-button icon="el-icon-plus" type="primary" @click="handleEdit">添加</el-button> -->
|
||||||
|
<!-- <el-button icon="el-icon-delete" type="danger" @click="handleDelete">批量删除</el-button> -->
|
||||||
|
<!-- </vab-query-form-left-panel> -->
|
||||||
|
<vab-query-form-left-panel :span="12">
|
||||||
|
<el-form :inline="true" :model="queryForm" @submit.native.prevent>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input v-model.trim="queryForm.permission" clearable placeholder="请输入查询条件" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</vab-query-form-left-panel>
|
||||||
|
</vab-query-form>
|
||||||
|
|
||||||
|
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" @selection-change="setSelectRows">
|
||||||
|
<el-table-column align="center" label="头像" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<img alt="image" :src="row.avatar" style="width: 50px; height: 50px; object-fit: cover; border-radius: 50%" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="left" label="信息" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<strong>名称：</strong>
|
||||||
|
{{ row.nickname }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>宣言：</strong>
|
||||||
|
{{ row.bio }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>性别：</strong>
|
||||||
|
{{ row.gender ? (row.gender === 'male' ? '男' : '女') : '未公开' }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>平台：</strong>
|
||||||
|
{{ row.platform }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="left" label="社交信息" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<strong>粉丝：</strong>
|
||||||
|
{{ row.followers }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>关注数：</strong>
|
||||||
|
{{ row.followings }}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>好友：</strong>
|
||||||
|
{{ row.friends }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="背景图" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<img v-if="row.cover" :src="host + row.cover" style="width: 50px; height: 50px; object-fit: cover" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column align="center" label="创建时间" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatTime(row.createdAt) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<!-- <el-table-column label="操作" show-overflow-tooltip width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="handleDelete(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column> -->
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
:current-page="queryForm.pageNo"
|
||||||
|
:layout="layout"
|
||||||
|
:page-size="queryForm.pageSize"
|
||||||
|
:total="total"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getList } from '@/api/maomaotou/user'
|
||||||
|
import { formatTime } from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'User',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
host: 'https://file.lihailezzc.com/',
|
||||||
|
list: null,
|
||||||
|
listLoading: true,
|
||||||
|
layout: 'total, sizes, prev, pager, next, jumper',
|
||||||
|
total: 0,
|
||||||
|
selectRows: '',
|
||||||
|
elementLoadingText: '正在加载...',
|
||||||
|
queryForm: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
permission: '',
|
||||||
|
},
|
||||||
|
timeOutID: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
clearTimeout(this.timeOutID)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
formatTime,
|
||||||
|
setSelectRows(val) {
|
||||||
|
this.selectRows = val
|
||||||
|
},
|
||||||
|
handleEdit(row) {
|
||||||
|
if (row.id) {
|
||||||
|
this.$refs['edit'].showEdit(row)
|
||||||
|
} else {
|
||||||
|
this.$refs['edit'].showEdit()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
if (row.id) {
|
||||||
|
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
|
||||||
|
const { msg } = await doDelete({ ids: [row.id] })
|
||||||
|
this.$baseMessage(msg, 'success')
|
||||||
|
this.fetchData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
if (this.selectRows.length > 0) {
|
||||||
|
const ids = this.selectRows.map((item) => item.id).join()
|
||||||
|
this.$baseConfirm('你确定要删除选中项吗', null, async () => {
|
||||||
|
const { msg } = await doDelete({ ids: ids.split(',') })
|
||||||
|
this.$baseMessage(msg, 'success')
|
||||||
|
this.fetchData()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$baseMessage('未选中任何行', 'error')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.queryForm.pageSize = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.queryForm.pageNo = val
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
queryData() {
|
||||||
|
this.queryForm.pageNo = 1
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
async fetchData() {
|
||||||
|
this.listLoading = true
|
||||||
|
const { data } = await getList(this.queryForm)
|
||||||
|
this.list = data.list
|
||||||
|
this.total = data.totalCount
|
||||||
|
this.timeOutID = setTimeout(() => {
|
||||||
|
this.listLoading = false
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.author-option {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.author-avatar {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.author-name {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.image-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-image {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user