Merge branch 'main' of http://172.16.100.91:3000/scout666/chat-pc
# Conflicts: # src/store/modules/dialogue.js resolved by main version # src/utils/auth.js resolved by main version
This commit is contained in:
Phoenix
commit
9487ae526b
@ -89,3 +89,8 @@ export const ServeSendVote = (data = {}) => {
|
||||
export const ServeConfirmVoteHandle = (data = {}) => {
|
||||
return post('/api/v1/talk/message/vote/handle', data)
|
||||
}
|
||||
|
||||
//清空聊天记录
|
||||
export const ServeEmptyMessage = (data) => {
|
||||
return post('/api/v1/talk/message/empty', data)
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
BIN
src/assets/image/chatSettings/edit-btn.png
Normal file
BIN
src/assets/image/chatSettings/edit-btn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 337 B |
BIN
src/assets/image/chatSettings/edit-cancel.png
Normal file
BIN
src/assets/image/chatSettings/edit-cancel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 486 B |
BIN
src/assets/image/chatSettings/edit-confirm.png
Normal file
BIN
src/assets/image/chatSettings/edit-confirm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 473 B |
@ -10,28 +10,32 @@
|
||||
{{ title }}
|
||||
</template>
|
||||
<div class="custom-close-btn" v-if="customCloseBtn">
|
||||
<img src="@/assets/image/icon/close-btn-grey.png" alt="" @click="handleCloseModal"/>
|
||||
<img src="@/assets/image/icon/close-btn-grey.png" alt="" @click="handleCloseModal" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<slot name="content"></slot>
|
||||
<template #footer v-if="actionBtns.cancelBtn || actionBtns.confirmBtn">
|
||||
<div class="custom-modal-btns">
|
||||
<template #footer v-if="actionBtns?.cancelBtn || actionBtns?.confirmBtn">
|
||||
<div
|
||||
class="custom-modal-btns"
|
||||
:style="props?.customModalBtnsStyle ? props.customModalBtnsStyle : ''"
|
||||
>
|
||||
<customBtn
|
||||
color="#C7C7C9"
|
||||
style="width: 161px; height: 34px;"
|
||||
@click="handleCancel"
|
||||
v-if="actionBtns.cancelBtn"
|
||||
>取消</customBtn
|
||||
v-if="actionBtns?.cancelBtn"
|
||||
>{{ actionBtns?.cancelBtn?.text || '取消' }}</customBtn
|
||||
>
|
||||
<customBtn
|
||||
color="#46299D"
|
||||
style="width: 161px; height: 34px;"
|
||||
@click="handleConfirm"
|
||||
:loading="state.confirmBtnLoading"
|
||||
v-if="actionBtns.confirmBtn"
|
||||
>确定</customBtn
|
||||
:disabled="actionBtns?.confirmBtn?.disabled"
|
||||
:loading="state.confirmBtnLoading && actionBtns?.confirmBtn?.doLoading"
|
||||
v-if="actionBtns?.confirmBtn"
|
||||
>{{ actionBtns?.confirmBtn?.text || '确定' }}</customBtn
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
@ -63,6 +67,16 @@ const props = defineProps({
|
||||
// 是否显示自定义关闭按钮
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
customModalBtnsStyle: {
|
||||
// 自定义按钮样式
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
customCloseEvent: {
|
||||
// 是否自定义关闭事件
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
@ -74,12 +88,16 @@ const show = computed({
|
||||
})
|
||||
|
||||
const handleCancel = () => {
|
||||
if (props.actionBtns?.cancelBtn?.hideModal) {
|
||||
show.value = false
|
||||
}
|
||||
emit('cancel')
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (props.actionBtns?.confirmBtn?.doLoading) {
|
||||
state.confirmBtnLoading = true
|
||||
}
|
||||
emit('confirm', closeLoading)
|
||||
}
|
||||
|
||||
@ -92,7 +110,11 @@ const state = reactive({
|
||||
})
|
||||
|
||||
const handleCloseModal = () => {
|
||||
if (props.customCloseEvent) {
|
||||
emit('closeModal')
|
||||
} else {
|
||||
show.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive, computed, watch, ref } from 'vue'
|
||||
import { NEmpty, NPopover, NPopconfirm, NSwitch, NIcon, NInput } from 'naive-ui'
|
||||
import { useUserStore } from '@/store'
|
||||
import { NEmpty, NPopover, NPopconfirm, NSwitch, NIcon, NInput, NScrollbar } from 'naive-ui'
|
||||
import { useUserStore, useTalkStore, useDialogueStore } from '@/store'
|
||||
import GroupLaunch from './GroupLaunch.vue'
|
||||
import GroupManage from './manage/index.vue'
|
||||
import { Comment, Search, Close, Plus, Down, Up } from '@icon-park/vue-next'
|
||||
@ -9,17 +9,28 @@ import {
|
||||
ServeGroupDetail,
|
||||
ServeGetGroupMembers,
|
||||
ServeSecedeGroup,
|
||||
ServeUpdateGroupCard
|
||||
ServeUpdateGroupCard,
|
||||
ServeGetGroupNotices,
|
||||
ServeEditGroup
|
||||
} from '@/api/group'
|
||||
import { useInject } from '@/hooks'
|
||||
import customModal from '@/components/common/customModal.vue'
|
||||
import avatarModule from '@/components/avatar-module/index.vue'
|
||||
import UserCardModal from '@/components/user/UserCardModal.vue'
|
||||
import { ServeEmptyMessage } from '@/api/chat'
|
||||
import { parseTime } from '@/utils/datetime'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const talkStore = useTalkStore()
|
||||
const dialogueStore = useDialogueStore()
|
||||
const { showUserInfoModal } = useInject()
|
||||
|
||||
const emit = defineEmits(['close', 'to-talk', 'handleSearchRecordByConditionModalShow'])
|
||||
const emit = defineEmits([
|
||||
'close',
|
||||
'to-talk',
|
||||
'handleSearchRecordByConditionModalShow',
|
||||
'handleGroupNoticeModalShow'
|
||||
])
|
||||
const props = defineProps({
|
||||
gid: {
|
||||
type: Number,
|
||||
@ -29,12 +40,20 @@ const props = defineProps({
|
||||
// 1: 单聊， 2: 群聊
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
groupNoticeContentChange: {
|
||||
// 群公告内容变化
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
watch(props, () => {
|
||||
if (props.talkType === 2) {
|
||||
loadDetail()
|
||||
loadMembers()
|
||||
getGroupNotices()
|
||||
}
|
||||
})
|
||||
|
||||
const editCardPopover = ref(false)
|
||||
@ -59,13 +78,27 @@ const state = reactive({
|
||||
chatSettingOperateHint: '', // 提示信息
|
||||
chatSettingOperateSubHint: '', // 次要提示信息
|
||||
actionBtns: {
|
||||
confirmBtn: true,
|
||||
cancelBtn: true
|
||||
confirmBtn: {
|
||||
doLoading: true
|
||||
},
|
||||
cancelBtn: {
|
||||
hideModal: true
|
||||
}
|
||||
}, // 操作按钮
|
||||
showAllMember: false, // 是否显示全部成员
|
||||
openGroupMemberSearch: false, //是否开启群成员搜索
|
||||
isShowUserCardModal: false, //是否显示成员信息模态框
|
||||
userInfo: {} //当前打开的成员信息卡信息
|
||||
userInfo: {}, //当前打开的成员信息卡信息
|
||||
groupNoticeInfo: {
|
||||
id: 0,
|
||||
avatar: '',
|
||||
updater_name: '',
|
||||
updated_at: '',
|
||||
content: ''
|
||||
}, //群公告信息
|
||||
editGroupName: false, //是否编辑群名称
|
||||
editGroupNameValue: '', //编辑中的群名称
|
||||
chatSettingOperateType: '' //聊天设置操作类型
|
||||
})
|
||||
|
||||
const members = ref<any[]>([])
|
||||
@ -175,26 +208,49 @@ const onChangeRemark = () => {
|
||||
})
|
||||
}
|
||||
|
||||
loadDetail()
|
||||
loadMembers()
|
||||
|
||||
// 处理模态框的确认
|
||||
const handleModalConfirm = (closeLoading) => {
|
||||
setTimeout(() => {
|
||||
if (state.chatSettingOperateType == 'clear') {
|
||||
//清空聊天记录
|
||||
ServeEmptyMessage({
|
||||
talk_type: props.talkType,
|
||||
receiver_id: props.gid
|
||||
})
|
||||
.then((res) => {
|
||||
closeLoading()
|
||||
state.isShowModal = false
|
||||
}, 2000)
|
||||
if (res.code == 200) {
|
||||
window['$message'].success('聊天记录清空成功')
|
||||
//热更新清除会话记录及会话列表中的最近消息展示
|
||||
dialogueStore.clearDialogueRecord()
|
||||
useTalkStore().updateItem({
|
||||
index_name: props.talkType + '_' + props.gid,
|
||||
msg_text: '...',
|
||||
updated_at: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}')
|
||||
})
|
||||
} else {
|
||||
window['$message'].error(res.message)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
closeLoading()
|
||||
window['$message'].error(err.message)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
//显示聊天设置操作提示模态框
|
||||
const showChatSettingOperateModal = (type: string) => {
|
||||
state.isShowModal = true
|
||||
state.chatSettingOperateType = type
|
||||
switch (type) {
|
||||
case 'clear':
|
||||
state.chatSettingOperateHint = '确定清空聊天记录'
|
||||
state.chatSettingOperateSubHint = ''
|
||||
break
|
||||
case 'dismiss':
|
||||
state.chatSettingOperateHint = '确定解散本群'
|
||||
state.chatSettingOperateSubHint = ''
|
||||
break
|
||||
case 'quit':
|
||||
state.chatSettingOperateHint = '确定退出群聊'
|
||||
@ -209,6 +265,7 @@ const showChatSettingOperateModal = (type: string) => {
|
||||
}
|
||||
}
|
||||
|
||||
//点击显示查找聊天记录模态框
|
||||
const showSearchRecordByConditionModal = () => {
|
||||
emit('handleSearchRecordByConditionModalShow', true)
|
||||
}
|
||||
@ -243,6 +300,84 @@ const showMemberInfo = (memberItem: any) => {
|
||||
state.userInfo = memberItem
|
||||
state.isShowUserCardModal = true
|
||||
}
|
||||
|
||||
//点击显示群公告模态框
|
||||
const showGroupNoticeModal = () => {
|
||||
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)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (props.talkType === 2) {
|
||||
loadDetail()
|
||||
loadMembers()
|
||||
getGroupNotices()
|
||||
}
|
||||
|
||||
//点击编辑群名称
|
||||
const handleEditGroupName = () => {
|
||||
state.editGroupName = true
|
||||
state.editGroupNameValue = state.detail.name
|
||||
}
|
||||
|
||||
//取消编辑群名称
|
||||
const handleEditGroupNameCancel = () => {
|
||||
state.editGroupName = false
|
||||
state.editGroupNameValue = ''
|
||||
}
|
||||
|
||||
//确认修改群名称
|
||||
const handleEditGroupNameConfirm = () => {
|
||||
if (!state.editGroupNameValue.trim()) {
|
||||
window['$message'].warning('群名称不能为空')
|
||||
return
|
||||
}
|
||||
ServeEditGroup({
|
||||
group_id: props.gid,
|
||||
group_name: state.editGroupNameValue,
|
||||
avatar: state.detail.avatar,
|
||||
profile: state.detail.profile
|
||||
}).then((res) => {
|
||||
if (res.code == 200) {
|
||||
window['$message'].success('群名称修改成功')
|
||||
state.detail.name = state.editGroupNameValue
|
||||
state.editGroupName = false
|
||||
//热更新会话列表中的群名
|
||||
talkStore.updateItem({
|
||||
index_name: props.talkType + '_' + props.gid,
|
||||
name: state.editGroupNameValue
|
||||
})
|
||||
//热更新会话详情中的群名
|
||||
dialogueStore.setTalkInfoPartially({
|
||||
username: state.editGroupNameValue
|
||||
})
|
||||
} else {
|
||||
window['$message'].error(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<section class="el-container is-vertical section">
|
||||
@ -263,7 +398,7 @@ const showMemberInfo = (memberItem: any) => {
|
||||
|
||||
<main class="el-main main me-scrollbar me-scrollbar-thumb">
|
||||
<div class="info-box" v-if="talkType === 2">
|
||||
<div class="b-box">
|
||||
<div class="b-box" style="margin: 0 0 16px;">
|
||||
<div class="block" style="height: 34px;">
|
||||
<div class="title">群成员</div>
|
||||
<!-- <div class="text">{{ members.length }}人</div> -->
|
||||
@ -280,6 +415,8 @@ const showMemberInfo = (memberItem: any) => {
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="describe">群主已开启“新成员入群可查看所有聊天记录</div> -->
|
||||
<div style="width: 100%;" :style="{ height: state.openGroupMemberSearch ? '656px' : '' }">
|
||||
<n-scrollbar :style="{ maxHeight: state.openGroupMemberSearch ? '656px' : '621px' }">
|
||||
<div class="group-member-list">
|
||||
<div
|
||||
v-for="(memberItem, memberIndex) in groupMemberList"
|
||||
@ -325,9 +462,13 @@ const showMemberInfo = (memberItem: any) => {
|
||||
<span>{{ memberItem.nickname }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
<div
|
||||
class="group-member-list-more"
|
||||
v-if="!state.showAllMember && !state.openGroupMemberSearch"
|
||||
v-if="
|
||||
!state.showAllMember && !state.openGroupMemberSearch && groupMemberList.length > 18
|
||||
"
|
||||
@click="state.showAllMember = true"
|
||||
>
|
||||
<span>展开更多</span>
|
||||
@ -335,20 +476,55 @@ const showMemberInfo = (memberItem: any) => {
|
||||
</div>
|
||||
<div
|
||||
class="group-member-list-more"
|
||||
v-if="state.showAllMember && !state.openGroupMemberSearch"
|
||||
v-if="
|
||||
state.showAllMember && !state.openGroupMemberSearch && groupMemberList.length > 18
|
||||
"
|
||||
@click="state.showAllMember = false"
|
||||
>
|
||||
<span>收起更多</span>
|
||||
<span>收起</span>
|
||||
<n-icon :component="Up" />
|
||||
</div>
|
||||
<div
|
||||
style="cursor: unset;"
|
||||
class="group-member-list-more"
|
||||
v-if="groupMemberList.length <= 18 && !state.openGroupMemberSearch"
|
||||
>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-box">
|
||||
<div class="b-box" :style="{ margin: state.editGroupName ? '-8px 0 -6px' : '16px 0 32px' }">
|
||||
<div class="block">
|
||||
<div class="title">群名称</div>
|
||||
<div>
|
||||
<div class="title" :style="{ margin: state.editGroupName ? '2px 0 0' : '' }">
|
||||
群名称
|
||||
</div>
|
||||
<div class="group-name-box" v-if="!state.editGroupName">
|
||||
<span>{{ state.detail.name }}</span>
|
||||
<img
|
||||
src="@/assets/image/chatSettings/edit-btn.png"
|
||||
alt=""
|
||||
v-if="isAdmin || isLeader"
|
||||
@click="handleEditGroupName"
|
||||
/>
|
||||
</div>
|
||||
<div class="group-name-box" v-if="state.editGroupName">
|
||||
<n-input
|
||||
v-model:value="state.editGroupNameValue"
|
||||
placeholder="请输入"
|
||||
style="width: 302px;"
|
||||
clearable
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/chatSettings/edit-cancel.png"
|
||||
alt=""
|
||||
@click="handleEditGroupNameCancel"
|
||||
/>
|
||||
<img
|
||||
src="@/assets/image/chatSettings/edit-confirm.png"
|
||||
alt=""
|
||||
@click="handleEditGroupNameConfirm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="describe">{{ state.detail.name }}</div> -->
|
||||
@ -357,7 +533,7 @@ const showMemberInfo = (memberItem: any) => {
|
||||
<div class="b-box">
|
||||
<div class="block">
|
||||
<div class="title">群类型</div>
|
||||
<div>
|
||||
<div class="group-name-box">
|
||||
<span>{{ groupTypeText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -401,38 +577,34 @@ const showMemberInfo = (memberItem: any) => {
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="b-box b-box-bottomBorder" style="padding: 0 0 12px;">
|
||||
<div class="block">
|
||||
<div class="b-box b-box-bottomBorder" style="padding: 0 0 16px; margin: 32px 0 16px;">
|
||||
<div class="block" @click="showGroupNoticeModal" style="cursor: pointer;">
|
||||
<div class="title">群公告</div>
|
||||
<!-- <div class="text"> -->
|
||||
<!-- <n-button type="primary" text> 更多 </n-button> -->
|
||||
<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>
|
||||
|
||||
<div class="info-box">
|
||||
<div
|
||||
class="b-box b-box-bottomBorder"
|
||||
@click="showSearchRecordByConditionModal"
|
||||
style="cursor: pointer;"
|
||||
>
|
||||
<div class="block">
|
||||
<div class="b-box b-box-bottomBorder" style="margin: 16px 0 0; padding: 0 0 16px;">
|
||||
<div class="block" @click="showSearchRecordByConditionModal" style="cursor: pointer;">
|
||||
<div class="title">查找聊天记录</div>
|
||||
<img class="icon-right" src="@/assets/image/icon/arrow-right-grey.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-box">
|
||||
<div class="b-box" style="margin: 16px 0 32px;">
|
||||
<div class="block">
|
||||
<div class="title">置顶会话</div>
|
||||
<n-switch />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="b-box">
|
||||
<div class="b-box" style="margin: 32px 0 20px;">
|
||||
<div class="block">
|
||||
<div class="title">消息免打扰</div>
|
||||
<n-switch />
|
||||
@ -610,8 +782,8 @@ const showMemberInfo = (memberItem: any) => {
|
||||
.b-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
margin: 12px 0;
|
||||
// min-height: 30px;
|
||||
margin: 32px 0;
|
||||
flex-direction: column;
|
||||
|
||||
&:first-child {
|
||||
@ -638,6 +810,27 @@ const showMemberInfo = (memberItem: any) => {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.group-name-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0 10px;
|
||||
|
||||
span {
|
||||
line-height: 20px;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
// height: 100%;
|
||||
// line-height: 30px;
|
||||
@ -680,6 +873,7 @@ const showMemberInfo = (memberItem: any) => {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #999999;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.group-member-list {
|
||||
@ -689,10 +883,9 @@ const showMemberInfo = (memberItem: any) => {
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px 24px;
|
||||
padding: 7px 0 16px;
|
||||
padding: 7px 0 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #f0f0f2;
|
||||
|
||||
.group-member-list-each {
|
||||
display: flex;
|
||||
@ -736,13 +929,15 @@ const showMemberInfo = (memberItem: any) => {
|
||||
.group-member-list-each-box:nth-child(n + 19) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
.group-member-list-more {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f0f0f2;
|
||||
padding: 16px 0;
|
||||
span {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
@ -758,7 +953,6 @@ const showMemberInfo = (memberItem: any) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.b-box-bottomBorder {
|
||||
border-bottom: 1px solid #f0f0f2;
|
||||
}
|
||||
|
||||
@ -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()
|
||||
@ -44,7 +46,41 @@ const state = reactive({
|
||||
}, //按条件搜索记录弹窗样式
|
||||
searchRecordByConditionText: '', //按条件搜索记录文本
|
||||
conditionTag: '', //当前条件标签
|
||||
conditionType: '' //当前条件类型
|
||||
conditionType: '', //当前条件类型
|
||||
isShowGroupNoticeModal: false, //是否显示群公告模态框
|
||||
customGroupNoticeModalStyle: {
|
||||
width: '997px',
|
||||
height: '740px'
|
||||
}, //群公告模态框样式
|
||||
groupNoticeModalActionBtns: {
|
||||
confirmBtn: {
|
||||
text: '编辑',
|
||||
doLoading: false,
|
||||
disabled: false
|
||||
},
|
||||
cancelBtn: false
|
||||
}, //群公告模态框操作按钮
|
||||
groupNoticeModalActionBtnsStyle: 'padding: 20px 0;', //群公告模态框操作按钮样式
|
||||
groupNoticeInEdit: '', //编辑中的公告
|
||||
groupNoticeEditMode: 3, //群公告编辑模式：2=编辑；3=查看
|
||||
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 = {
|
||||
@ -84,6 +120,255 @@ const changeConditionTag = (tag) => {
|
||||
state.conditionTag = ''
|
||||
}
|
||||
}
|
||||
|
||||
//取消群公告编辑并返回查看
|
||||
const cancelEditGroupNotice = () => {
|
||||
//切换群公告编辑模式为查看
|
||||
state.groupNoticeEditMode = 3
|
||||
state.groupNoticeModalActionBtns = {
|
||||
confirmBtn: {
|
||||
text: '编辑',
|
||||
doLoading: false,
|
||||
disabled: false
|
||||
},
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// 群公告模态框输入事件
|
||||
const handleGroupNoticeModalInput = (value) => {
|
||||
console.log(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>
|
||||
|
||||
<template>
|
||||
@ -168,12 +453,16 @@ const changeConditionTag = (tag) => {
|
||||
@close="state.isShowGroupAside = false"
|
||||
:talkType="talkParams.type"
|
||||
@handleSearchRecordByConditionModalShow="state.isShowSearchRecordByConditionModal = true"
|
||||
@handleGroupNoticeModalShow="handleGroupNoticeModalShow"
|
||||
:groupNoticeContentChange="state.groupNoticeContentChange"
|
||||
/>
|
||||
</n-drawer>
|
||||
|
||||
<customModal
|
||||
v-model:show="state.isShowSearchRecordByConditionModal"
|
||||
:title="`${talkParams.type === 1 ? '与' : ''}"${talkParams.username}"的聊天记录`"
|
||||
:title="`${talkParams.type === 1 ? '与' : ''} "${
|
||||
talkParams.username
|
||||
}" 的聊天记录`"
|
||||
:style="state.customSearchRecordByConditionModalStyle"
|
||||
:customCloseBtn="true"
|
||||
:closable="false"
|
||||
@ -243,6 +532,95 @@ const changeConditionTag = (tag) => {
|
||||
</div>
|
||||
</template>
|
||||
</customModal>
|
||||
|
||||
<customModal
|
||||
v-model:show="state.isShowGroupNoticeModal"
|
||||
:title="`"${talkParams.username}" 的群公告`"
|
||||
:style="state.customGroupNoticeModalStyle"
|
||||
:customCloseBtn="true"
|
||||
:closable="false"
|
||||
:actionBtns="state.groupNoticeModalActionBtns"
|
||||
:customModalBtnsStyle="state.groupNoticeModalActionBtnsStyle"
|
||||
@confirm="handleGroupNoticeModalConfirm"
|
||||
@cancel="handleGroupNoticeModalCancel"
|
||||
:customCloseEvent="state.groupNoticeEditMode === 2 ? true : false"
|
||||
@closeModal="handleGroupNoticeModalClose"
|
||||
>
|
||||
<template #content>
|
||||
<div class="group-notice-modal-content">
|
||||
<div class="group-notice-text-area" v-if="state.groupNoticeEditMode === 2">
|
||||
<n-input
|
||||
v-model:value="state.groupNoticeInEdit"
|
||||
type="textarea"
|
||||
:autosize="{
|
||||
minRows: 22,
|
||||
maxRows: 22
|
||||
}"
|
||||
placeholder="请输入"
|
||||
:maxlength="500"
|
||||
:show-count="true"
|
||||
@input="handleGroupNoticeModalInput"
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
@ -316,4 +694,80 @@ const changeConditionTag = (tag) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.group-notice-modal-content {
|
||||
.group-notice-text-area {
|
||||
:deep(.n-input-wrapper) {
|
||||
padding: 20px 23px 15px;
|
||||
}
|
||||
:deep(.n-input-word-count) {
|
||||
right: 23px;
|
||||
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;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 552px;
|
||||
box-sizing: border-box;
|
||||
img {
|
||||
width: 160px;
|
||||
height: 104px;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
margin: 14px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
@ -278,7 +278,7 @@ const items = computed((): ISession[] => {
|
||||
watch(
|
||||
() => talkStore,
|
||||
(newValue, oldValue) => {
|
||||
console.log(newValue)
|
||||
// console.log(newValue)
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
)
|
||||
|
||||
@ -69,13 +69,13 @@ const onSetMenu = () => {
|
||||
</div>
|
||||
|
||||
<div class="module right-module">
|
||||
<n-icon
|
||||
<!-- <n-icon
|
||||
v-show="type == 2"
|
||||
:component="Announcement"
|
||||
:size="18"
|
||||
class="icon"
|
||||
@click="emit('evnet', 'notice')"
|
||||
/>
|
||||
/> -->
|
||||
<n-icon
|
||||
:size="18"
|
||||
class="icon"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user