功能：消息管理-客服消息切换客服

src/components/layout/index.tsx

@@ -5,9 +5,10 @@ import HeaderView from './header';
 import { MenuView } from './menu';
 import './index.scss';
 import { TitleView } from './title';
+import React from 'react';
 
 const { Content } = Layout;
-function LayoutView() {
+const LayoutView: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   return (
     <Layout className='layout-view'>
       <TitleView />
@@ -17,10 +18,11 @@ function LayoutView() {
           <HeaderView />
           <Content className='layout-content'>
             <Outlet />
+            {children}
           </Content>
         </Layout>
       </Layout>
     </Layout>
   );
-}
+};
 export default LayoutView;

src/components/layout/menu/index.tsx

@@ -100,7 +100,7 @@ export function MenuView() {
     // 设置侧边栏数据
     authRouterList().then(async (value) => {
       // 除了数据看板，其他没有子项的菜单全部过滤掉
-      const arr = getItem(value)?.filter((i: any) => i?.key === 100) || [];
+      const arr = getItem(value)?.filter((i: any) => [100, 1400]?.includes(i?.key)) || [];
       const brr = getItem(value)?.filter((i: any) => i?.children?.length) || [];
       // 设置要展示的菜单列表
       setItems([...arr, ...brr]);

src/pages/messageManage/messageChat/comp/MessageChatRole/index.tsx

+import React from 'react';
+import { InterDataType } from '~/api/interface';
+import { listUserAndRoleByCompanyIdType } from '~/api/interface/systemManageType';
+
+// 角色列表
+type RoleType = InterDataType<listUserAndRoleByCompanyIdType>;
+
+const MessageChatRole: React.FC<{
+  roleList: RoleType;
+  userAccountId?: number;
+  onSelect: (data: RoleType[0]) => void;
+}> = ({ roleList, userAccountId, onSelect }) => {
+  // 选择事件
+  const handleSelect = (data: RoleType[0]) => {
+    onSelect?.(data);
+  };
+  return (
+    <div className={'message-chat-role'}>
+      {roleList?.map((i, j) => (
+        <div
+          className={`role-item flex-start ${userAccountId === i?.userAccountId && 'item-active'}`}
+          key={j}
+          onClick={() => handleSelect(i)}
+        >
+          <img className={'image'} src={i?.userAccountVO?.userImg} alt={i?.roleName} />
+          <div className='content flex-start'>
+            <div
+              className='title text-ellipsis'
+              title={i?.userAccountVO?.nickName || i?.userAccountVO?.userName}
+            >
+              {i?.userAccountVO?.nickName || i?.userAccountVO?.userName}
+            </div>
+            <div className='role'>{i?.roleName}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default MessageChatRole;

src/pages/messageManage/messageChat/index.scss

@@ -4,6 +4,73 @@
   box-sizing: border-box;
   align-items: flex-start !important;
 
+  &-role{
+    position: relative;
+    width: 58px;
+    box-sizing: border-box;
+    overflow: hidden;
+    transform: translateX(-6px);
+    transition: all 168ms ease-in-out;
+    min-height: 84vh;
+    background: #F6F6F6;
+    border-radius: 8px;
+    &:hover {
+      width: 160px;
+    }
+    .role-item{
+      position: relative;
+      box-sizing: border-box;
+      padding: 10px;
+      border-radius: 8px;
+      cursor: pointer;
+      flex-wrap: nowrap;
+      transition: all 100ms ease-in-out;
+      &:hover {
+        background: rgba(233, 240, 254, 0.5);
+      }
+      .image {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        object-fit: fill;
+        margin-right: 8px;
+      }
+      .content{
+        position: relative;
+        box-sizing: border-box;
+        width: 86px;
+        flex-direction: column;
+        align-items: flex-start;
+        .title{
+          max-width: 86px;
+          color: #000000;
+          font-weight: bold;
+          margin-bottom: 8px;
+        }
+        .role{
+          position: relative;
+          box-sizing: border-box;
+          height: 16px;
+          background: linear-gradient(270deg, #fff1ec 0%, #ffffff 54%, #ffe5db 100%);
+          border-radius: 4px;
+          border: 1px solid #ffb099;
+          padding: 0 4px;
+          line-height: 14px;
+          text-align: center;
+          font-weight: 500;
+          font-size: 10px;
+          color: #ff521e;
+        }
+      }
+    }
+    .item-active{
+      background: #E9F0FE;
+      &:hover {
+        background: #E9F0FE;
+      }
+    }
+  }
+
   &-list {
     position: relative;
     width: 300px;
@@ -21,6 +88,7 @@
       padding: 10px;
       border-radius: 8px;
       cursor: pointer;
+      transition: all 100ms ease-in-out;
 
       &:hover {
         background: rgba(233, 240, 254, 0.35);
@@ -193,6 +261,11 @@
                 font-size: 14px;
                 color: #333333;
                 line-height: 16px;
+                .text{
+                  img{
+                    max-width: 100% !important;
+                  }
+                }
               }
             }
           }
@@ -228,14 +301,14 @@
     padding: 30px 0 0 0;
     .qrcode-view{
       position: relative;
-      width: 140px;
+      width: 128px;
       box-sizing: border-box;
       margin: 0 auto;
     }
     .qrcode-text{
       width: 100%;
       font-weight: 400;
-      font-size: 14px;
+      font-size: 13px;
       color: #666666;
       text-align: center;
       margin-top: 30px;

src/pages/messageManage/messageChat/index.tsx

@@ -5,13 +5,19 @@ import MessageChatListView from '~/pages/messageManage/messageChat/comp/messageC
 import { SystemManageAPI } from '~/api';
 import { isNull } from 'lodash';
 import { InterDataType } from '~/api/interface';
-import { selectUserListType } from '~/api/interface/systemManageType';
+import {
+  listUserAndRoleByCompanyIdType,
+  selectUserListType,
+} from '~/api/interface/systemManageType';
 import MessageChatContentView from 'src/pages/messageManage/messageChat/comp/messageChatContent';
 import QrcodeView from '~/components/qrcodeView';
 import MessageChatSystemView from '~/pages/messageManage/messageChat/comp/messageChatSystem';
+import MessageChatRole from '~/pages/messageManage/messageChat/comp/MessageChatRole';
 
 // 消息类型
 type MessageType = InterDataType<selectUserListType>;
+// 角色列表
+type RoleType = InterDataType<listUserAndRoleByCompanyIdType>;
 
 // 定时任务
 let intervalTimer: NodeJS.Timer;
@@ -21,6 +27,8 @@ const MessageChatPage: React.FC = () => {
   const { userInfo } = useSelector((state: any) => state.UserInfo);
   // 用户id
   const [userAccountId, setUserAccountId] = useState<number>();
+  // 角色列表
+  const [roleList, setRoleList] = useState<RoleType>([]);
   // 获取用户id
   const getUserAccountId = async () => {
     const res = await SystemManageAPI.listUserAndRoleByCompanyId({
@@ -28,6 +36,7 @@ const MessageChatPage: React.FC = () => {
     });
     if (res && res.code === '200') {
       if (res.result?.[0]?.userAccountId) {
+        setRoleList(res.result || []);
         setUserAccountId(res.result?.[0]?.userAccountId);
       } else {
         // message.error('获取用户id失败');
@@ -104,6 +113,13 @@ const MessageChatPage: React.FC = () => {
   }, [userAccountId]);
   return (
     <div className='message-chat flex-start'>
+      {!!userAccountId && (
+        <MessageChatRole
+          roleList={roleList}
+          userAccountId={userAccountId}
+          onSelect={(data) => setUserAccountId(data?.userAccountId)}
+        />
+      )}
       <MessageChatListView
         messageList={messageList}
         current={currentIndex}
@@ -121,16 +137,16 @@ const MessageChatPage: React.FC = () => {
             userAccountId={userAccountId}
           />
         ) : null}
-        {isSystem ? <MessageChatSystemView /> : null}
+        {isSystem && <MessageChatSystemView />}
       </div>
-      <div className='message-chat-qrcode'>
-        <div className='qrcode-view'>
-          {getQrcodePathQuery()?.id ? (
+      {!!getQrcodePathQuery()?.id && (
+        <div className='message-chat-qrcode'>
+          <div className='qrcode-view'>
             <QrcodeView path={getQrcodePathQuery()?.path} scene={getQrcodePathQuery()?.scene} />
-          ) : null}
+          </div>
+          <div className='qrcode-text'>扫码进入小程序店铺</div>
         </div>
-        <div className='qrcode-text'>扫码进入小程序店铺</div>
-      </div>
+      )}
     </div>
   );
 };

src/router/router.tsx

@@ -1455,25 +1455,17 @@ export const routerList: Array<RouteObjectType> = [
     ],
   },
   {
-    path: '/messageManage',
-    element: <LayoutView />,
+    path: '/messageManage/messageChat',
+    element: (
+      <LayoutView>
+        <MessageChatPage />
+      </LayoutView>
+    ),
     errorElement: <ErrorPage />,
     meta: {
       id: 1400,
       icon: <CommentOutlined />,
       title: '消息管理',
     },
-    children: [
-      {
-        path: '/messageManage/messageChat',
-        element: withLoadingComponent(<MessageChatPage />),
-        errorElement: <ErrorPage />,
-        meta: {
-          id: 1410,
-          title: '客服消息',
-          icon: <CommentOutlined />,
-        },
-      },
-    ],
   },
 ];