feat: 发送消息选择人员

src/api/user.ts

@@ -41,6 +41,8 @@ const UserApi: DefineApiModule<User.ApiMap> = {
   getMarkerTree: '/api/user/marker/group',
   /** 获取评卷员 */
   getMarkerList: '/api/user/marker/list',
+  /** 用户分组 - 发消息 */
+  getUserGroup: '/api/user/group',
 }
 
 export default UserApi

src/components/shared/message/Message.vue

@@ -1,64 +1,80 @@
 <template>
-  <div ref="messageIcon" class="message-icon">
-    <span v-show="unReadMessages?.newCount" class="un-read-num"></span>
-    <svg-icon name="message"></svg-icon>
-  </div>
-  <el-popover
-    placement="bottom-start"
-    :width="useVW(400)"
-    :show-arrow="false"
-    :virtual-ref="messageIcon"
-    trigger="click"
-    virtual-triggering
-  >
-    <div class="message-popover-content">
-      <div class="title">
-        <span class="unread-count">{{ unReadMessages?.newCount || 0 }}</span>
-        <span>条消息</span>
-      </div>
-      <div class="message-list">
-        <div class="flex message-row">
-          <div class="message-send-user">
-            <div class="user-name">陈晓明</div>
-            <div class="message-time">20:88:33</div>
-          </div>
-          <div class="flex-1 message-content">
-            啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架
-          </div>
+  <message-component>
+    <div ref="messageIcon" class="message-icon">
+      <span v-show="unReadMessages?.newCount" class="un-read-num"></span>
+      <svg-icon name="message"></svg-icon>
+    </div>
+    <el-popover
+      placement="bottom-start"
+      :width="useVW(400)"
+      :show-arrow="false"
+      :virtual-ref="messageIcon"
+      trigger="click"
+      virtual-triggering
+    >
+      <div class="message-popover-content">
+        <div class="title">
+          <span class="unread-count">{{ unReadMessages?.newCount || 0 }}</span>
+          <span>条消息</span>
         </div>
-        <div class="flex message-row">
-          <div class="message-send-user">
-            <div class="user-name">陈明</div>
-            <div class="message-time">20:88:33</div>
+        <div class="message-list">
+          <div class="flex message-row">
+            <div class="message-send-user">
+              <div class="user-name">陈晓明</div>
+              <div class="message-time">20:88:33</div>
+            </div>
+            <div class="flex-1 message-content">
+              啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架
+            </div>
           </div>
-          <div class="flex-1 message-content">
-            啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架
+          <div class="flex message-row">
+            <div class="message-send-user">
+              <div class="user-name">陈明</div>
+              <div class="message-time">20:88:33</div>
+            </div>
+            <div class="flex-1 message-content">
+              啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架啥可适当就卡省的就卡省的就看撒好的就卡省的就看撒好的金卡和健康大使金卡是框架
+            </div>
           </div>
         </div>
+        <confirm-button
+          size="small"
+          between
+          ok-text="收消息"
+          cancel-text="发消息"
+          @confirm="onReceiveMessage"
+          @cancel="onSendMessage"
+        ></confirm-button>
       </div>
-      <confirm-button
-        size="small"
-        between
-        ok-text="收消息"
-        cancel-text="发消息"
-        @confirm="onReceiveMessage"
-        @cancel="onSendMessage"
-      ></confirm-button>
-    </div>
-  </el-popover>
-  <message-window v-model="visibleMessageWindow" :type="messageWindowType"></message-window>
+    </el-popover>
+    <message-window v-model="visibleMessageWindow" :type="messageWindowType"></message-window>
+  </message-component>
 </template>
 
 <script setup lang="ts" name="Message">
 /** 头部消息组件 */
-import { reactive, ref } from 'vue'
+import { defineComponent, ref, useSlots } from 'vue'
 import { ElPopover } from 'element-plus'
 import useVW from '@/hooks/useVW'
 import useMessageLoop from '@/hooks/useMessageLoop'
+import useMainStore from '@/store/main'
 import MessageWindow from '@/components/shared/message/MessageWindow.vue'
 import ConfirmButton from '@/components/common/ConfirmButton.vue'
 import SvgIcon from '@/components/common/SvgIcon.vue'
 
+const MessageComponent = defineComponent({
+  setup() {
+    const mainStore = useMainStore()
+    return {
+      mainStore,
+    }
+  },
+  render() {
+    const slots = useSlots()
+    return this.mainStore?.myUserInfo?.role === 'ADMIN' ? null : slots.default?.()
+  },
+})
+
 const messageIcon = ref<HTMLDivElement>()
 
 const unReadMessages = useMessageLoop()

src/components/shared/message/MessageSend.vue

@@ -49,7 +49,8 @@ import useFetch from '@/hooks/useFetch'
 
 import type { ExtractApiResponse } from 'api-type'
 
-type MarkerItem = ExtractArrayValue<ExtractArrayValue<ExtractApiResponse<'getMarkerTree'>>['markers']>
+type MarkerItem = ExtractArrayValue<ExtractApiResponse<'getUserGroup'>['chiffGroup']>
+type TreeNode = ExtractArrayValue<ExtractApiResponse<'getUserGroup'>['markerGroup']> & { label: string }
 
 defineEmits(['close'])
 
@@ -75,11 +76,11 @@ function isMarker(x: any): x is MarkerItem {
 
 const treeProp = {
   children: 'markers',
-  label(treeNode: ExtractArrayValue<ExtractApiResponse<'getMarkerTree'>>) {
+  label(treeNode: TreeNode) {
     if (isMarker(treeNode)) {
       return treeNode.name || treeNode.loginName
     }
-    return `第${treeNode.markingGroupNumber}组`
+    return treeNode.label
   },
 } as unknown as InstanceType<typeof ElTree>['props']
 
@@ -88,7 +89,19 @@ const filterTree = ((value: string, data: MarkerItem) => {
   return data.name?.includes(value) || data.loginName?.includes(value)
 }) as unknown as InstanceType<typeof ElTree>['filterNodeMethod']
 
-const { fetch: getMarkerTree, result: markerTree } = useFetch('getMarkerTree')
+const { fetch: getUserGroup, result: userGroup } = useFetch('getUserGroup')
+
+const markerTree = computed<TreeNode[]>(() => {
+  if (!userGroup?.value) {
+    return []
+  }
+  const { chiffGroup, deputyGroup, markerGroup } = userGroup.value
+  return [
+    { label: '大组长', markingGroupNumber: -1, markers: chiffGroup },
+    { label: '小组长', markingGroupNumber: -1, markers: deputyGroup },
+    { label: '评卷小组', markers: markerGroup.map((d) => ({ ...d, label: `第${d.markingGroupNumber}组` })) },
+  ] as TreeNode[]
+})
 
 /** 发送当前试卷 */
 const sendCurrentPaper = () => {
@@ -98,6 +111,8 @@ const sendCurrentPaper = () => {
 const onSendMessage = () => {
   console.log('发消息')
 }
+
+getUserGroup()
 </script>
 
 <style scoped lang="scss">

src/modules/example/ImageModify.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts" name="ImageModify">
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { useSetImgBg } from '@/hooks/useSetImgBg'
 import useMarkHeader from '@/hooks/useMarkHeader'
 import MarkHeader from '@/components/shared/MarkHeader.vue'

types/api.d.ts

@@ -1162,6 +1162,42 @@ declare module 'api-type' {
 
     type GetMarkerList = BaseDefine<{ subjectCode: string; mainNumber?: number; markingGroupNumber?: number }, Marker[]>
 
+    interface UserInfo {
+      config: string
+      createTime: string
+      enable: boolean
+      examId: number
+      examName: string
+      id: number
+      loginName: string
+      mainNumber: number
+      markDayCount: number
+      markTotalCount: number
+      markingGroupNumber: number
+      name: string
+      role: string
+      roleName: string
+      subjectCode: string
+      subjectName: string
+      updateTime: string
+      updaterName: string
+    }
+
+    type GetUserGroup = BaseDefine<
+      null,
+      {
+        /** 大组长 */
+        chiffGroup: UserInfo[]
+        /** 小组长 */
+        deputyGroup: UserInfo[]
+        /** 评卷小组 */
+        markerGroup: {
+          markingGroupNumber: number
+          markers: UserInfo[]
+        }[]
+      }
+    >
+
     /** >>> user api end <<< */
     export interface ApiMap {
       userLogin: UserLogin
@@ -1181,6 +1217,8 @@ declare module 'api-type' {
       getUserPrivilege: GetUserPrivilege
       getMarkerTree: GetMarkerTree
       getMarkerList: GetMarkerList
+      /** 用户分组 - 发消息 */
+      getUserGroup: GetUserGroup
     }
   }