websocket连接成功

src/components/Message/index.vue

@@ -5,20 +5,7 @@
       <div class="seeMore" @click="seeMore">查看更多</div>
     </div>
     <div class="item-conent frame-style">
-      <div class="center">
+      <div v-if="newclueList.length > 0" class="center">
-        <!-- <a-list item-layout="horizontal" :data-source="data">
-          <template #renderItem="{ item }">
-            <a-list-item>
-              <a-list-item-meta description="有新线索,请注意跟单">
-                <template #avatar> id：123455666</template>
-              </a-list-item-meta>
-              <template #actions>
-                <a key="list-loadmore-edit" style="margin-right: 8px">确认</a>
-                <a key="list-loadmore-more">定位</a>
-              </template>
-            </a-list-item>
-          </template>
-        </a-list> -->
         <div v-for="(item, index) in newclueList" :key="index" class="listItem">
           <div class="listItemTop">
             <div class="type">
@@ -27,7 +14,9 @@
             <div class="time">{{ item.createTime }}</div>
           </div>
           <div class="listItemCenter">
-            <span class="content" :class="{ expanded: item.show }">{{ item.content }}</span>
+            <span ref="contentRef" class="content" :class="{ expanded: item.show }">{{
+              item.content
+            }}</span>
             <div class="iconContainer" @click="toggleShowAll(item)">
               <div v-if="item.show" class="openOrClose">
                 <span><down-outlined /></span>
@@ -40,7 +29,7 @@
 
           <div class="listItemBottom">
             <a key="list-loadmore-edit" style="margin-right: 8px">{{
-              item.status === 1 ? '已读' : '确认'
+              item.state === 1 ? '已读' : '确认'
             }}</a>
             <a
               key="list-loadmore-more"
@@ -51,11 +40,11 @@
           </div>
         </div>
       </div>
-      <!-- <div class="empty">
+      <div v-else class="empty">
         <a-empty description="暂无数据" :image="zanwu" />
-      </div> -->
       </div>
-    <!-- 列表弹出框 -->
+    </div>
+    <!-- 新消息列表弹出框 -->
     <div>
       <a-modal
         v-model:visible="listVisible"
@@ -109,7 +98,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import zanwu from '@/assets/images/zanwu.png'
 //底部表格
 import ProTable from '#/table'
@@ -119,16 +108,43 @@ import { messageAccessLogs } from '@/api/customermanagement/customerList'
 import type { CustomerListQO } from '@/api/customermanagement/customerList/types'
 import MessageSearch from '@/components/Message/messageSearch.vue'
 import type { DistributeTaskManagementPageParam } from '@/api/controlcenterstation/distributionTaskManagement/types'
-import { doRequest } from '@/utils/axios/request'
-import { pageAccessLogs } from '@/api/customermanagement/customerList'
 import router from '@/router'
 
-//展开、收起
+defineOptions({ name: 'MessagePage' })
-// const show = ref(false)
+
-//展开收起
+interface DataItem {
-const toggleShowAll = (itemShow: DataItem) => {
+  id: number | undefined
-  itemShow.show = !itemShow.show
+  type: number
+  createTime: string
+  content: string
+  messageKey: string
+  state: number | undefined
+  title: string
+  show: boolean
 }
+
+const props = defineProps({
+  newclueList: {
+    type: Array as () => DataItem[],
+    required: true,
+    default: () => []
+  }
+  // 其他 props...
+})
+
+// // 监听 props.listVisible 的变化，将其赋值给 visible
+// watch(
+//   () => props.listVisible,
+//   newValue => {
+//     listVisible.value = newValue
+//     console.log(newValue, 'newValue')
+//   }
+// )
+const emits = defineEmits<{
+  (e: 'submit-success'): void
+  (e: 'click-success', isSuccessful: boolean): void
+}>()
+
 //底部表格
 // 表格组件引用
 const tableRef = ref<ProTableInstanceExpose>()
@@ -197,37 +213,12 @@ const columns: ProColumns[] = [
       }
     }
   },
-  // {
-  //   title: '描述',
-  //   dataIndex: 'clueLabelList',
-  //   width: 200,
-  //   ellipsis: true,
-  //   align: 'center',
-  //   onCell: () => {
-  //     return {
-  //       style: {
-  //         maxWidth: 200,
-  //         overflow: 'hidden',
-  //         whiteSpace: 'nowrap',
-  //         textOverflow: 'ellipsis',
-  //         cursor: 'pointer'
-  //       }
-  //     }
-  //   }
-  // },
   {
     title: '描述',
     dataIndex: 'content',
     ellipsis: true,
     align: 'center'
   },
-  // {
-  //   title: '线索日期',
-  //   dataIndex: 'clueTime',
-  //   width: 150,
-  //   align: 'center',
-  //   ellipsis: true
-  // },
   {
     title: '创建日期',
     dataIndex: 'createTime',
@@ -235,57 +226,7 @@ const columns: ProColumns[] = [
     align: 'center',
     ellipsis: true
   }
-  // {
-  //   key: 'operate',
-  //   title: '操作',
-  //   width: 100,
-  //   align: 'center',
-  //   fixed: 'right'
-  // }
-  // {
-  //   title: '客户名称',
-  //   dataIndex: 'username'
-  // },
-  // {
-  //   title: '跟进人',
-  //   dataIndex: 'method'
-  // },
 ]
-
-defineOptions({ name: 'MessagePage' })
-
-interface DataItem {
-  id: number | undefined
-  type: number
-  createTime: string
-  content: string
-  messageKey: string
-  status: number | undefined
-  title: string
-  show: boolean
-}
-
-const props = defineProps({
-  newclueList: {
-    type: Array as () => DataItem[],
-    required: true,
-    default: () => []
-  }
-  // 其他 props...
-})
-
-// // 监听 props.listVisible 的变化，将其赋值给 visible
-// watch(
-//   () => props.listVisible,
-//   newValue => {
-//     listVisible.value = newValue
-//     console.log(newValue, 'newValue')
-//   }
-// )
-const emits = defineEmits<{
-  (e: 'submit-success'): void
-  (e: 'click-success', isSuccessful: boolean): void
-}>()
 const listVisible = ref<boolean>(false)
 
 const seeMore = () => {
@@ -295,6 +236,7 @@ const seeMore = () => {
   }, 500) // 在 0.5 秒后执行 listVisible.value 的赋值操作
 }
 
+//新消息列表弹出框确定点击事件
 const handleOk = (e: MouseEvent) => {
   console.log(e)
   listVisible.value = false
@@ -305,6 +247,11 @@ const positioning = (messageKey: string) => {
   emits('click-success', false)
   router.push({ path: '/task/customerlist', query: { clueId: messageKey } }) // 跳转到 /task/customerlist 页面
 }
+//展开收起
+const toggleShowAll = (itemShow: DataItem) => {
+  itemShow.show = !itemShow.show
+}
+const contentRef = ref<HTMLElement | null>(null)
 </script>
 <style lang="less" scoped>
 .ms-container {
@@ -365,18 +312,7 @@ const positioning = (messageKey: string) => {
 .frame-style {
   height: 480px;
 }
-// ::v-deep .ant-list-item-meta-description {
-//   text-align: right;
-// }
-// .positioning {
-//   padding: 0 0 0 8px !important;
-// ::v-deep .ant-list-item-action > li {
-//   padding: 0 0 0 8px;
-// }
-// }
 .listItem {
-  // display: flex;
-  // justify-content: space-between;
   border-bottom: 1px solid #f0f0f0;
   padding: 12px 0;
 }
@@ -384,7 +320,6 @@ const positioning = (messageKey: string) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  // width: 300px;
   .type {
     font-weight: 700;
     width: 130px;
@@ -398,6 +333,8 @@ const positioning = (messageKey: string) => {
   }
 }
 .listItemCenter {
+  display: flex;
+  align-items: end;
   color: #767575;
   width: 100%;
   height: auto;
@@ -433,23 +370,7 @@ const positioning = (messageKey: string) => {
   float: right;
 }
 .listItemBottom {
-  // margin-top: 5px;
   display: flex;
   justify-content: flex-end;
 }
-// .listItemLeft {
-//   display: flex;
-//   justify-content: space-between;
-//   width: 210px;
-//   .listItemLeftId {
-//     // width: 50%;
-//     // margin-right: 10px;
-//   }
-//   .listItemLeftMessage {
-//     // width: 50%;
-//   }
-// }
-// .listItemRight {
-//   width: 150px;
-// }
 </style>

src/hooks/websocket.ts

@@ -1,6 +1,7 @@
 import { useWebSocket, type UseWebSocketReturn } from '@vueuse/core'
 import { useUserStore } from '@/stores/user-store'
 import { emitter } from '@/hooks/mitt'
+import { message } from 'ant-design-vue'
 
 let useWebSocketReturn: UseWebSocketReturn<any> | undefined = undefined
 //它是一个自定义的Vue hook，用于管理WebSocket连接
@@ -54,10 +55,13 @@ const useAdminWebSocket = () => {
         event = 'plaintext'
         dataMsg = value
       }
-      emitter.emit(event, dataMsg)
+      // emitter.emit(event, dataMsg)
-      console.log(dataMsg, 'dataMsg')
+      // console.log(dataMsg, 'dataMsg')
       // Show alert with the received message
-      alert(JSON.stringify(dataMsg))
+      // alert(JSON.stringify(dataMsg.title) + JSON.stringify(dataMsg.content))
+      message.info(
+        JSON.stringify(dataMsg.title).slice(1, -1) +'：'+ JSON.stringify(dataMsg.content).slice(1, -1)
+      )
     }
   )
 

src/layouts/components/RightContent/AvatarDropdown.vue

@@ -4,7 +4,7 @@
   </span>
   <div v-else style="display: flex">
     <div
-      v-if="userInfoCurrent === 'ROLE_SALESMAN'"
+      v-if="userInfoCurrent === 'ROLE_SALESMAN' || userInfoCurrent === 'ROLE_STORE_SALESMAN'"
       ref="container"
       @mousedown="handleDocumentClick"
     >
@@ -83,15 +83,20 @@ import Message from '@/components/Message/index.vue'
 import { ref, watch, onMounted, onUnmounted } from 'vue'
 import { doRequest } from '@/utils/axios/request'
 import { messageAccessLogs } from '@/api/customermanagement/customerList'
+import useAdminWebSocket from '@/hooks/websocket'
 //获取当前账号角色
 import { useUserStore } from '@/stores/user-store'
 const { userInfo } = useUserStore()
 
 const userInfoCurrent = ref<string | undefined>('')
 onMounted(() => {
-  console.log(userInfo, 'userInfo?.permissions')
-  // userInfoCurrent = userInfo?.roleCodes
   userInfoCurrent.value = userInfo?.roleCodes?.toLocaleString()
+  if (
+    userInfoCurrent.value === 'ROLE_SALESMAN' ||
+    userInfoCurrent.value === 'ROLE_STORE_SALESMAN'
+  ) {
+    useAdminWebSocket()
+  }
 })
 
 const visible = ref(false)
@@ -103,7 +108,7 @@ interface DataItem {
   createTime: string
   content: string
   messageKey: string
-  status: number | undefined
+  state: number | undefined
   title: string
   show: boolean
 }
@@ -185,6 +190,7 @@ const getMessageList = () => {
     {
       onSuccess: (res: any) => {
         newclueList.value = res.data.records
+        console.log(newclueList.value, 'newclueList.value')
         newclueList.value.forEach(item => {
           item.show = true
         })

src/views/customermanagement/customerList/customerList.vue

@@ -87,6 +87,7 @@ import CustomerListSearch from '@/views/customermanagement/customerList/customer
 import CustomerListViewModal from '@/views/customermanagement/customerList/customerListModal.vue'
 import CustomerListEditModal from '@/views/customermanagement/customerList/customerListEditModal.vue'
 import { useRoute } from 'vue-router'
+// import useAdminWebSocket from '@/hooks/websocket'
 //删除
 // import { doRequest } from '@/utils/axios/request'
 
@@ -97,6 +98,7 @@ onMounted(() => {
   if (customerId) {
     searchTable({ clueId: customerId })
   }
+  // useAdminWebSocket()
 })
 
 defineOptions({ name: 'CustomerList' })
@@ -160,7 +162,7 @@ const columns: ProColumns[] = [
     dataIndex: 'index',
     width: '80px',
     customRender: function ({ index, record }: { index: number; record: any }) {
-      if (record.clueStageName === '阶段二') {
+      if (record.isNewClue === true) {
         return {
           children: [
             h('span', [

src/views/login/components/LoginContent.vue

@@ -80,7 +80,7 @@ import { projectTitle, projectDesc, enableLoginCaptcha } from '@/config'
 import { SliderCaptcha as LoginCaptcha } from '@/components/Captcha'
 import { useI18n } from 'vue-i18n'
 import { getCodeData } from '@/api/auth'
-import useAdminWebSocket from '@/hooks/websocket'
+// import useAdminWebSocket from '@/hooks/websocket'
 
 const { t } = useI18n()
 
@@ -172,24 +172,26 @@ function handleSubmit(captchaId?: string) {
       store(res)
       const nextPath = (router.currentRoute.value.query.redirect as string) || '/'
       router.push(nextPath)
-      // 获取 WebSocket 连接对象
-      const webSocket = useAdminWebSocket()
-
-      // 确保 WebSocket 连接已经建立
-      if (webSocket && webSocket.status.value === 'OPEN') {
-        // 要发送的消息数据
-        const messageData = {
-          type: 'chatMessage',
-          content: 'Hello, WebSocket!'
-        }
 
-        // 发送消息
+      // 获取 WebSocket 连接对象
-        webSocket.send(JSON.stringify(messageData))
+      // const webSocket =
-        // 输出发送的消息内容
+      // useAdminWebSocket()
-        console.log('Sent message:', JSON.stringify(messageData))
+
-      } else {
+      // // 确保 WebSocket 连接已经建立
-        console.error('WebSocket connection is not open')
+      // if (webSocket && webSocket.status.value === 'OPEN') {
-      }
+      //   // 要发送的消息数据
+      //   const messageData = {
+      //     type: 'chatMessage',
+      //     content: 'Hello, WebSocket!'
+      //   }
+
+      //   // 发送消息
+      //   webSocket.send(JSON.stringify(messageData))
+      //   // 输出发送的消息内容
+      //   console.log('Sent message:', JSON.stringify(messageData))
+      // } else {
+      //   console.error('WebSocket connection is not open')
+      // }
     })
     .catch(err => {
       // console.log(accountLoginFormRef.value, 'accountLoginFormRef')

vite.config.ts

@@ -26,9 +26,9 @@ import { antdvStyleDeps } from './src/utils/resolvers'
 //jt
 // export const serverAddress = 'http://172.18.1.8:8000'
 //ts
-// export const serverAddress = 'http://172.18.0.228:8000'
+export const serverAddress = 'http://172.18.0.228:8000'
 //测试
-export const serverAddress = 'http://39.100.77.21:8000'
+// export const serverAddress = 'http://39.100.77.21:8000'
 
 //线上ip
 // export const serverAddress = 'http://175.27.212.74:80'
@@ -45,7 +45,7 @@ export default defineConfig({
       '^/api': {
         target: serverAddress,
         changeOrigin: true,
-        // ws: true,
+        ws: true,
         rewrite: path => {
           return path.replace(/^\/api/, '')
         }