scout666/chat-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成群聊设置中群公告模块的接入和重构

Browse Source
This commit is contained in:
wangyifeng 2025-05-20 15:05:57 +08:00
parent cecca6df9c
commit 2439562838
6 changed files with 403 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -65,6 +65,7 @@ declare module 'vue' {
NPopover: typeof import('naive-ui')['NPopover']
NRadio: typeof import('naive-ui')['NRadio']
NSpin: typeof import('naive-ui')['NSpin']
NTag: typeof import('naive-ui')['NTag']
NVirtualList: typeof import('naive-ui')['NVirtualList']
RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']

5
src/api/group.js
View File

@ -77,6 +77,11 @@ export const ServeEditGroupNotice = (data) => {
return post('/api/v1/group/notice/edit', data)
}
// 删除群公告
export const ServeDeleteGroupNotice = (data) => {
return post('/api/v1/group/notice/delete', data)
}
export const ServeGetGroupApplyList = (data) => {
return get('/api/v1/group/apply/list', data)
}

9
src/components/common/customModal.vue
View File

@ -72,6 +72,11 @@ const props = defineProps({
// 自定义按钮样式
type: String,
default: ''
},
customCloseEvent: {
// 是否自定义关闭事件
type: Boolean,
default: false
}
})
@ -105,7 +110,11 @@ const state = reactive({
})
const handleCloseModal = () => {
if (props.customCloseEvent) {
emit('closeModal')
} else {
show.value = false
}
}
</script>

47
src/components/group/GroupPanel.vue
View File

@ -9,7 +9,8 @@ import {
ServeGroupDetail,
ServeGetGroupMembers,
ServeSecedeGroup,
ServeUpdateGroupCard
ServeUpdateGroupCard,
ServeGetGroupNotices
} from '@/api/group'
import { useInject } from '@/hooks'
import customModal from '@/components/common/customModal.vue'
@ -34,12 +35,18 @@ const props = defineProps({
// 1: 单聊， 2: 群聊
type: Number,
default: 0
},
groupNoticeContentChange: {
// 群公告内容变化
type: String,
default: ''
}
})
watch(props, () => {
loadDetail()
loadMembers()
getGroupNotices()
})
const editCardPopover = ref(false)
@ -74,7 +81,14 @@ const state = reactive({
showAllMember: false, // 是否显示全部成员
openGroupMemberSearch: false, //是否开启群成员搜索
isShowUserCardModal: false, //是否显示成员信息模态框
userInfo: {} //当前打开的成员信息卡信息
userInfo: {}, //当前打开的成员信息卡信息
groupNoticeInfo: {
id: 0,
avatar: '',
updater_name: '',
updated_at: '',
content: ''
} //群公告信息
})
const members = ref<any[]>([])
@ -258,8 +272,33 @@ const showMemberInfo = (memberItem: any) => {
//点击显示群公告模态框
const showGroupNoticeModal = () => {
emit('handleGroupNoticeModalShow', true)
emit('handleGroupNoticeModalShow', isAdmin.value || isLeader.value)
}
//获取群公告列表
const getGroupNotices = () => {
ServeGetGroupNotices({
group_id: props.gid
}).then((res) => {
console.log(res)
if (res.code == 200) {
if (res?.data?.items[0]?.id) {
state.groupNoticeInfo = res.data.items[0]
} else {
state.groupNoticeInfo = {
id: 0,
avatar: '',
updater_name: '',
updated_at: '',
content: ''
}
}
} else {
window['$message'].warning(res.msg)
}
})
}
getGroupNotices()
</script>
<template>
<section class="el-container is-vertical section">
@ -426,7 +465,7 @@ const showGroupNoticeModal = () => {
<img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />
<!-- </div> -->
</div>
<div class="describe">管理员未设置</div>
<div class="describe">{{ state.groupNoticeInfo?.content || '管理员未设置' }}</div>
</div>
</div>

2
src/utils/auth.js
View File

@ -18,7 +18,7 @@ export function isLoggedIn() {
*/
export function getAccessToken() {
// return storage.get(AccessToken) || ''
return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b8962d32ca9acda2e80272e2558c2a366762349b830b666ec5fa17a2d4304de907fc1e15f4bef1a68f350975080df1c9577b69543e38d63124a06b7b2218b126be05c2669b3dcdb9c8a30daf38c781bfb6a'
return JSON.parse(localStorage.getItem('token'))||'79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941caaef1334d640773710f8cd96473bacfb190cba595a5d6a9c87d70f0999a3ebb41147213b31b4bdccffca66a56acf3baab5af0154f0dce360079f37709f78e13711036899344bddb0fb4cf0f2890287cb62c3fcbe33368caa5e213624577be8b8420ab75b1f50775ee16142a4321c5d56995f37354a66a969da98d95ba6e65d142ed097e04b411c1ebad2f62866d0ec7e1838420530a9941dbbcd00490199f8b89a542742bebcc3862e86adbcf9b360820a497764e7432d66963e70eb29f9eab5268ee8efa98eed3c981eea690d977b38b76b3a9a6b51bb685000752d9d26f98a91f4df6970ad165c5299f9eb77d0c40ed'
}
/**

374
src/views/message/inner/IndexContent.vue
View File

@ -10,6 +10,8 @@ import GroupNotice from '@/components/group/GroupNotice.vue'
import UploadsModal from '@/components/base/UploadsModal.vue'
import customModal from '@/components/common/customModal.vue'
import historyRecord from '@/components/search/searchByCondition.vue'
import { ServeEditGroupNotice, ServeGetGroupNotices, ServeDeleteGroupNotice } from '@/api/group'
import avatarModule from '@/components/avatar-module/index.vue'
const userStore = useUserStore()
const dialogueStore = useDialogueStore()
@ -59,7 +61,24 @@ const state = reactive({
groupNoticeModalActionBtnsStyle: 'padding: 20px 0;', //群公告模态框操作按钮样式
groupNoticeInEdit: '', //编辑中的公告
groupNoticeEditMode: 3, //群公告编辑模式：2=编辑；3=查看
groupNoticeModalConfirmBtnEvent: 'edit' //群公告模态框确认按钮事件
groupNoticeModalConfirmBtnEvent: 'edit', //群公告模态框确认按钮事件：edit=编辑；fillIn=输入
isShowNoticeHintModal: false, //是否显示群公告提示模态框
customNoticeHintModalStyle: {
width: '724px',
height: '314px'
}, //群公告提示模态框样式
noticeHintModalActionBtns: {}, //群公告提示模态框操作按钮
noticeHintModalContent: '', //群公告提示模态框内容
noticeHintMode: 'publish', //群公告提示模式：publish=发布；cancel=取消
groupNoticeInfo: {
id: 0,
avatar: '',
updater_name: '',
updated_at: '',
content: ''
}, //群公告信息
isAdmin: false, //当前登录用户是否是该群管理员
groupNoticeContentChange: '' //群公告内容变化
})
const events = {
@ -100,26 +119,9 @@ const changeConditionTag = (tag) => {
}
}
// 群公告模态框确定按钮事件
const handleGroupNoticeModalConfirm = () => {
if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
//点击切换群公告编辑模式为编辑
state.groupNoticeEditMode = 2
state.groupNoticeModalActionBtns = {
confirmBtn: {
text: '完成',
doLoading: true,
disabled: true
},
cancelBtn: true
}
}
}
// 群公告模态框取消按钮事件
const handleGroupNoticeModalCancel = () => {
if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
//点击切换群公告编辑模式为查看
//取消群公告编辑并返回查看
const cancelEditGroupNotice = () => {
//切换群公告编辑模式为查看
state.groupNoticeEditMode = 3
state.groupNoticeModalActionBtns = {
confirmBtn: {
@ -129,6 +131,119 @@ const handleGroupNoticeModalCancel = () => {
},
cancelBtn: false
}
//切换确定按钮事件为编辑
state.groupNoticeModalConfirmBtnEvent = 'edit'
}
// 群公告模态框确定按钮事件
const handleGroupNoticeModalConfirm = () => {
if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
//点击切换群公告编辑模式为编辑
state.groupNoticeEditMode = 2
state.groupNoticeModalActionBtns = {
confirmBtn: {
text: '完成',
doLoading: false,
disabled: true
},
cancelBtn: true
}
//切换确定按钮事件为输入
state.groupNoticeModalConfirmBtnEvent = 'fillIn'
if (state.groupNoticeInfo?.id) {
state.groupNoticeInEdit = state.groupNoticeInfo.content
state.groupNoticeModalActionBtns.confirmBtn.disabled = false
}
} else if (state.groupNoticeModalConfirmBtnEvent === 'fillIn') {
//点击显示发布提示
state.isShowNoticeHintModal = true
if (state?.groupNoticeInfo?.id && !state.groupNoticeInEdit) {
//如果是在编辑中，但是没有输入内容，此时点击完成即为删除群公告
state.noticeHintModalContent = '确定清空群公告吗？'
state.noticeHintModalActionBtns = {
confirmBtn: {
text: '清空',
doLoading: true
},
cancelBtn: true
}
//切换公告提示模式为清空
state.noticeHintMode = 'clear'
} else {
state.noticeHintModalContent = '发布该公告会通知全部群成员'
state.noticeHintModalActionBtns = {
confirmBtn: {
text: '发布',
doLoading: true
},
cancelBtn: true
}
//切换公告提示模式为发布
state.noticeHintMode = 'publish'
}
}
}
// 群公告模态框取消按钮事件
const handleGroupNoticeModalCancel = () => {
if (state.groupNoticeModalConfirmBtnEvent === 'fillIn') {
if (state.groupNoticeInEdit || (state.groupNoticeInfo?.id && !state.groupNoticeInEdit)) {
//如果有正在编辑中的公告或者编辑已发布的公告内容为空，显示确认取消编辑弹窗
state.isShowNoticeHintModal = true
state.noticeHintModalContent = '退出本次编辑'
state.noticeHintModalActionBtns = {
confirmBtn: {
text: '继续编辑',
doLoading: false
},
cancelBtn: {
text: '退出'
}
}
//切换公告提示模式为取消
state.noticeHintMode = 'cancel'
} else {
//没有正在编辑中的公告，退出编辑
cancelEditGroupNotice()
}
}
}
// 群公告模态框关闭事件
const handleGroupNoticeModalClose = () => {
//关闭应与取消事件一致
handleGroupNoticeModalCancel()
}
// 群公告提示模态框确认按钮事件
const handleNoticeHintModalConfirm = (closeLoading) => {
console.log('handleNoticeHintModalConfirm')
if (state.noticeHintMode === 'cancel') {
//不退出，回到编辑
state.isShowNoticeHintModal = false
} else if (state.noticeHintMode === 'publish') {
//发布
doPublishGroupNotice(closeLoading)
} else if (state.noticeHintMode === 'clear') {
//清空
doClearGroupNotice(closeLoading)
}
}
// 群公告提示模态框取消按钮事件
const handleNoticeHintModalCancel = () => {
console.log('handleNoticeHintModalCancel')
if (state.noticeHintMode === 'publish') {
//取消发布，回到编辑
state.isShowNoticeHintModal = false
} else if (state.noticeHintMode === 'cancel') {
//清除正在编辑中的公告并退出编辑
state.groupNoticeInEdit = ''
state.isShowNoticeHintModal = false
cancelEditGroupNotice()
} else if (state.noticeHintMode === 'clear') {
//不清空，继续编辑
state.isShowNoticeHintModal = false
}
}
@ -138,8 +253,119 @@ const handleGroupNoticeModalInput = (value) => {
if (value.trim()) {
state.groupNoticeModalActionBtns.confirmBtn.disabled = false
} else {
if (!state.groupNoticeInfo?.id) {
state.groupNoticeModalActionBtns.confirmBtn.disabled = true
} else {
state.groupNoticeModalActionBtns.confirmBtn.disabled = false
}
}
}
// 发布群公告
const doPublishGroupNotice = (closeLoading) => {
let params = {
notice_id: state?.groupNoticeInfo?.id || 0,
group_id: talkParams.receiver_id,
title: '',
content: state.groupNoticeInEdit,
is_top: 0,
is_confirm: 0
}
console.log(params)
const resp = ServeEditGroupNotice(params)
resp
.then((res) => {
closeLoading()
if (res.code == 200) {
// 发布成功，关闭群公告模态框
state.isShowGroupNoticeModal = false
state.isShowNoticeHintModal = false
state.groupNoticeContentChange = state.groupNoticeInEdit
state.groupNoticeInEdit = ''
cancelEditGroupNotice()
window['$message'].success(res.msg)
} else {
window['$message'].warning(res.msg)
}
})
.catch((err) => {
closeLoading()
window['$message'].warning(err.msg)
})
}
//获取群公告列表
const getGroupNotices = () => {
ServeGetGroupNotices({
group_id: talkParams.receiver_id
}).then((res) => {
console.log(res)
if (res.code == 200) {
if (res?.data?.items[0]?.id) {
state.groupNoticeInfo = res.data.items[0]
} else {
state.groupNoticeInfo = {
id: 0,
avatar: '',
updater_name: '',
updated_at: '',
content: ''
}
}
} else {
window['$message'].warning(res.msg)
}
})
}
// 清空群公告
const doClearGroupNotice = (closeLoading) => {
ServeDeleteGroupNotice({
notice_id: state.groupNoticeInfo.id,
group_id: talkParams.receiver_id
})
.then((res) => {
closeLoading()
if (res.code == 200) {
// 清空成功，关闭群公告模态框并恢复群公告模态框初始状态
state.groupNoticeInfo = {
id: 0,
avatar: '',
updater_name: '',
updated_at: '',
content: ''
}
state.isShowGroupNoticeModal = false
state.isShowNoticeHintModal = false
state.groupNoticeContentChange = ''
cancelEditGroupNotice()
window['$message'].success(res.msg)
} else {
window['$message'].warning(res.msg)
}
})
.catch((err) => {
closeLoading()
window['$message'].warning(err.msg)
})
}
// 群公告模态框显示事件
const handleGroupNoticeModalShow = (isAdmin) => {
state.isAdmin = isAdmin
if (isAdmin) {
state.groupNoticeModalActionBtns = {
confirmBtn: {
text: '编辑',
doLoading: false,
disabled: false
},
cancelBtn: false
}
} else {
;(state.groupNoticeModalActionBtns.confirmBtn as any) = false
}
state.isShowGroupNoticeModal = true
getGroupNotices()
}
</script>
@ -223,7 +449,8 @@ const handleGroupNoticeModalInput = (value) => {
@close="state.isShowGroupAside = false"
:talkType="talkParams.type"
@handleSearchRecordByConditionModalShow="state.isShowSearchRecordByConditionModal = true"
@handleGroupNoticeModalShow="state.isShowGroupNoticeModal = true"
@handleGroupNoticeModalShow="handleGroupNoticeModalShow"
:groupNoticeContentChange="state.groupNoticeContentChange"
/>
</n-drawer>
@ -312,6 +539,8 @@ const handleGroupNoticeModalInput = (value) => {
:customModalBtnsStyle="state.groupNoticeModalActionBtnsStyle"
@confirm="handleGroupNoticeModalConfirm"
@cancel="handleGroupNoticeModalCancel"
:customCloseEvent="state.groupNoticeEditMode === 2 ? true : false"
@closeModal="handleGroupNoticeModalClose"
>
<template #content>
<div class="group-notice-modal-content">
@ -329,13 +558,65 @@ const handleGroupNoticeModalInput = (value) => {
@input="handleGroupNoticeModalInput"
/>
</div>
<div class="group-notice-empty" v-if="state.groupNoticeEditMode === 3">
<div
class="group-notice-info"
v-if="state.groupNoticeEditMode === 3 && state.groupNoticeInfo?.id"
>
<div class="group-notice-header">
<avatarModule
:mode="1"
:avatar="state.groupNoticeInfo.avatar"
:userName="state.groupNoticeInfo.updater_name"
:groupType="0"
:customStyle="{
width: '42px',
height: '42px'
}"
:customTextStyle="{
fontSize: '14px',
fontWeight: 'bold',
color: '#fff',
lineHeight: '20px'
}"
></avatarModule>
<div class="group-notice-header-userInfo">
<span style="color: #1b1b1b; font-weight: 600; line-height: 20px;">{{
state.groupNoticeInfo.updater_name
}}</span>
<span>{{ state.groupNoticeInfo.updated_at }}</span>
</div>
</div>
<div class="group-notice-content">
<span>{{ state.groupNoticeInfo.content }}</span>
</div>
</div>
<div
class="group-notice-empty"
v-if="state.groupNoticeEditMode === 3 && !state.groupNoticeInfo?.id"
>
<img src="@/assets/image/chatList/search-empty.png" alt="" />
<span>暂无公告</span>
</div>
</div>
</template>
</customModal>
<customModal
v-model:show="state.isShowNoticeHintModal"
title="提示"
:style="state.customNoticeHintModalStyle"
:closable="false"
:actionBtns="state.noticeHintModalActionBtns"
customModalBtnsStyle="padding: 0 0 30px;"
@confirm="handleNoticeHintModalConfirm"
@cancel="handleNoticeHintModalCancel"
>
<template #content>
<div class="notice-hint-modal-content">
<text>{{ state.noticeHintModalContent }}</text>
</div>
</template>
</customModal>
</template>
<style lang="less" scoped>
@ -419,6 +700,40 @@ const handleGroupNoticeModalInput = (value) => {
bottom: 15px;
}
}
.group-notice-info {
.group-notice-header {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 20px 0;
margin: 0 12px;
border-bottom: 1px solid #e5e5e5;
.group-notice-header-userInfo {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 0 0 0 10px;
span {
font-size: 14px;
color: #adadad;
font-weight: 400;
line-height: 17px;
}
}
}
.group-notice-content {
padding: 20px 0;
margin: 0 12px;
span {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
.group-notice-empty {
display: flex;
flex-direction: column;
@ -438,4 +753,17 @@ const handleGroupNoticeModalInput = (value) => {
}
}
}
.notice-hint-modal-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text {
font-size: 20px;
line-height: 28px;
font-weight: 400;
color: #1f2225;
}
}
</style>