From 24395628389bcba57f759613a04f646c9fdbe16e Mon Sep 17 00:00:00 2001
From: wangyifeng <812766448@qq.com>
Date: Tue, 20 May 2025 15:05:57 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BE=A4=E8=81=8A=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E4=B8=AD=E7=BE=A4=E5=85=AC=E5=91=8A=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E7=9A=84=E6=8E=A5=E5=85=A5=E5=92=8C=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                          |   1 +
 src/api/group.js                         |   5 +
 src/components/common/customModal.vue    |  11 +-
 src/components/group/GroupPanel.vue      |  47 ++-
 src/utils/auth.js                        |   2 +-
 src/views/message/inner/IndexContent.vue | 358 ++++++++++++++++++++++-
 6 files changed, 403 insertions(+), 21 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 85c3e24..fd12a2c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -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']
diff --git a/src/api/group.js b/src/api/group.js
index 473dcfd..4ec0302 100644
--- a/src/api/group.js
+++ b/src/api/group.js
@@ -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)
 }
diff --git a/src/components/common/customModal.vue b/src/components/common/customModal.vue
index 6915374..bfee602 100644
--- a/src/components/common/customModal.vue
+++ b/src/components/common/customModal.vue
@@ -72,6 +72,11 @@ const props = defineProps({
     // 自定义按钮样式
     type: String,
     default: ''
+  },
+  customCloseEvent: {
+    // 是否自定义关闭事件
+    type: Boolean,
+    default: false
   }
 })
 
@@ -105,7 +110,11 @@ const state = reactive({
 })
 
 const handleCloseModal = () => {
-  show.value = false
+  if (props.customCloseEvent) {
+    emit('closeModal')
+  } else {
+    show.value = false
+  }
 }
 </script>
 
diff --git a/src/components/group/GroupPanel.vue b/src/components/group/GroupPanel.vue
index 5db3975..d6a7227 100644
--- a/src/components/group/GroupPanel.vue
+++ b/src/components/group/GroupPanel.vue
@@ -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>
 
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 6369112..f9864ce 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -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'
 }
 
 /**
diff --git a/src/views/message/inner/IndexContent.vue b/src/views/message/inner/IndexContent.vue
index 5423665..89b59c6 100644
--- a/src/views/message/inner/IndexContent.vue
+++ b/src/views/message/inner/IndexContent.vue
@@ -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,6 +119,22 @@ const changeConditionTag = (tag) => {
   }
 }
 
+//取消群公告编辑并返回查看
+const cancelEditGroupNotice = () => {
+  //切换群公告编辑模式为查看
+  state.groupNoticeEditMode = 3
+  state.groupNoticeModalActionBtns = {
+    confirmBtn: {
+      text: '编辑',
+      doLoading: false,
+      disabled: false
+    },
+    cancelBtn: false
+  }
+  //切换确定按钮事件为编辑
+  state.groupNoticeModalConfirmBtnEvent = 'edit'
+}
+
 // 群公告模态框确定按钮事件
 const handleGroupNoticeModalConfirm = () => {
   if (state.groupNoticeModalConfirmBtnEvent === 'edit') {
@@ -108,39 +143,230 @@ const handleGroupNoticeModalConfirm = () => {
     state.groupNoticeModalActionBtns = {
       confirmBtn: {
         text: '完成',
-        doLoading: true,
+        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 === 'edit') {
-    //点击切换群公告编辑模式为查看
-    state.groupNoticeEditMode = 3
-    state.groupNoticeModalActionBtns = {
-      confirmBtn: {
-        text: '编辑',
-        doLoading: false,
-        disabled: false
-      },
-      cancelBtn: false
+  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 {
-    state.groupNoticeModalActionBtns.confirmBtn.disabled = true
+    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>
@@ -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>