增加昵称和部门的匹配

This commit is contained in:
砂糖
2025-07-14 17:02:56 +08:00
parent 66169c3620
commit 4c0df26d3d
7 changed files with 168 additions and 8 deletions

10
api/oa/binding.js Normal file
View File

@@ -0,0 +1,10 @@
import request from "@/util/oaRequest"
// 根据昵称从oa系统获取对应的部门信息
export function getDeptNameByNickName(nicknames) {
return request({
url: '/fadapp/auth/dept-names-by-nicks',
data: nicknames,
method: "post"
})
}

View File

@@ -12,10 +12,16 @@
</view>
<view class="u-nav-slot" slot="center">
<view class="chating_info" :class="{ chating_info_single: isSingle }">
<view class="conversation_info">
<view class="title">{{ storeCurrentConversation.showName }}</view>
<view v-if="!isSingle && !isNotify" class="sub_title"
>{{ groupMemberCount }}
<view
class="conversation_info"
:style="isSingle ? 'flex-direction: column; align-items: center;' : 'flex-direction: row; align-items: center; justify-content: center;'"
>
<view class="title" :style="isSingle ? 'text-align: center;' : ''">{{ storeCurrentConversation.showName }}</view>
<view v-if="isSingle && storeCurrentConversation.deptName" style="margin-top:6rpx; display: flex; justify-content: center;">
<text :style="{backgroundColor: storeCurrentConversation.color, color: '#fff', padding: '2px 10px', borderRadius: '10px', fontSize: '20rpx', display: 'inline-block', textAlign: 'center'}">{{ storeCurrentConversation.deptName }}</text>
</view>
<view v-if="!isSingle && !isNotify" class="sub_title" style="margin-left: 8rpx;">
{{ groupMemberCount }}
</view>
</view>
</view>

View File

@@ -16,7 +16,7 @@
<view id="scroll_wrap">
<u-loadmore nomoreText="" :status="loadMoreStatus" />
<view
v-for="item in storeHistoryMessageList"
v-for="item in messageListWithDept"
:key="item.clientMsgID"
>
<message-item-render
@@ -36,6 +36,7 @@
<script>
import { mapGetters, mapActions } from "vuex";
import MessageItemRender from "./MessageItem/index.vue";
import { withDeptName } from '@/util/withDeptName';
export default {
name: "",
@@ -58,6 +59,7 @@ export default {
messageLoadState: {
loading: false,
},
messageListWithDept: [],
};
},
computed: {
@@ -75,11 +77,39 @@ export default {
return this.messageLoadState.loading ? "loading" : "loadmore";
},
},
watch: {
storeHistoryMessageList: {
handler: 'updateMessageListWithDept',
immediate: true,
deep: true
}
},
mounted() {
this.loadMessageList();
},
methods: {
...mapActions("message", ["getHistoryMesageList"]),
async updateMessageListWithDept() {
// 取所有发送者昵称
const allSenders = this.storeHistoryMessageList.map(item => ({ showName: item.senderNickname }));
// 获取部门信息
const deptInfoArr = await withDeptName(allSenders);
// 构建映射
const deptMap = {};
deptInfoArr.forEach((obj, idx) => {
if (obj.deptName) {
deptMap[this.storeHistoryMessageList[idx].sendID] = {
deptName: obj.deptName,
color: obj.color
};
}
});
// 合并到消息
this.messageListWithDept = this.storeHistoryMessageList.map(msg => {
const dept = deptMap[msg.sendID];
return dept ? { ...msg, deptName: dept.deptName, color: dept.color } : { ...msg };
});
},
messageItemRender(clientMsgID) {
if (
this.initFlag &&

View File

@@ -19,7 +19,12 @@
>
<text>{{ formattedMessageTime }}</text>
<text style="margin-left: 2rpx; margin-right: 2rpx">{{ "" }}</text>
<text v-if="!isSingle">{{ source.senderNickname }}</text>
<text v-if="!isSingle">
{{ source.senderNickname }}
</text>
<template v-if="!isSingle && source.deptName">
<text class="dept_name" :style="{backgroundColor: source.color, color: '#fff', padding: '2px 8px', borderRadius: '8px', fontSize: '20rpx', marginLeft: '8rpx'}">{{ source.deptName }}</text>
</template>
</view>
<view class="message_send_state_box">
<view
@@ -384,6 +389,13 @@ export default {
font-size: 0.85rem;
color: #666;
margin-bottom: 6rpx;
align-items: center;
.dept_name {
display: inline-block;
line-height: 1.2;
vertical-align: middle;
margin-left: 8rpx;
}
}
.message_content_wrap {

View File

@@ -10,7 +10,11 @@
size="46"
/>
<view class="details">
<text class="conversation_name">{{ source.showName }}</text>
<text class="conversation_name">{{ source.showName }}
<template v-if="!isGroup && source.deptName">
<text class="dept_name" :style="{backgroundColor: source.color, color: '#fff', padding: '2px 8px', borderRadius: '8px', fontSize: '20rpx', marginLeft: '8rpx'}">{{ source.deptName }}</text>
</template>
</text>
<view class="lastest_msg_wrap">
<text class="lastest_msg_content">{{ latestMessage }}</text>
</view>
@@ -106,6 +110,14 @@ export default {
@include nomalEllipsis();
max-width: 40vw;
font-size: 28rpx;
display: inline-flex;
align-items: center;
}
.dept_name {
display: inline-block;
line-height: 1.2;
vertical-align: middle;
margin-left: 8rpx;
}
.lastest_msg_wrap {

View File

@@ -14,7 +14,7 @@
@scrolltolower="scrolltolower"
>
<conversation-item
v-for="item in storeConversationList"
v-for="item in conversationListWithDeptName"
:key="item.conversationID"
:source="item"
ref="conversationItem"
@@ -33,6 +33,8 @@
import { mapGetters } from "vuex";
import ChatHeader from "./components/ChatHeader.vue";
import ConversationItem from "./components/ConversationItem.vue";
import { getDeptNameByNickName } from "@/api/oa/binding";
import { withDeptName } from '@/util/withDeptName';
export default {
components: {
@@ -48,11 +50,19 @@ export default {
doubleClick: 0,
triggered: false,
refreshing: false,
conversationListWithDeptName: [], // 新增
};
},
computed: {
...mapGetters(["storeConversationList", "storeIsSyncing", "storeProgress"]),
},
watch: {
storeConversationList: {
handler: 'updateConversationListWithDeptName',
immediate: true,
deep: true
}
},
onReady() {
this.$nextTick(() => plus.navigator.closeSplashscreen());
},
@@ -87,6 +97,10 @@ export default {
closeAllSwipe() {
this.$refs.swipeWrapperRef.closeAll();
},
// 新增:异步获取部门名和颜色
async updateConversationListWithDeptName() {
this.conversationListWithDeptName = await withDeptName(this.storeConversationList);
},
},
};
</script>

76
util/withDeptName.js Normal file
View File

@@ -0,0 +1,76 @@
import { getDeptNameByNickName } from '@/api/oa/binding';
/*
* withDeptName 高阶函数
* ---------------------------------------------
* 用途:
* 为会话列表如IM会话、联系人等异步注入部门名称和部门颜色
* 使前端组件可直接渲染带部门信息的会话项。
*
* 参数:
* @param {Array<Object>} conversationList - 原始会话对象数组,
* 每项需包含唯一标识(如 showName 字段)。
*
* 返回:
* @returns {Promise<Array<Object>>} - 返回一个 Promise
* 解析后为带有部门名deptName和部门色color的会话对象数组。
* 若某项无部门信息,则不包含 deptName/color 字段。
*
* 使用场景:
* - 会话列表、联系人列表等需要展示部门信息的场景。
* - 适用于任何需要根据昵称批量获取部门名的业务。
* - 可在 watch、生命周期、异步数据流等场景下调用。
*
* 示例:
* import { withDeptName } from '@/util/withDeptName';
* const result = await withDeptName(conversationList);
* // result: [{...item, deptName, color}, ...]
*
* 注意事项:
* - 依赖 getDeptNameByNickName 接口,需保证接口可用。
* - 仅为获取到真实部门名的项添加 deptName/color 字段。
* - 若接口异常或无部门名,则原项不变。
* - color 为自动分配的浅色系,便于前端高亮展示。
* - 建议在数据源变更时重新调用。
*/
export async function withDeptName(conversationList) {
const nicknames = conversationList.map(item => item.showName);
let deptMap = {};
try {
const res = await getDeptNameByNickName(nicknames);
if (Array.isArray(res.data)) {
res.data.forEach(obj => {
if (obj && obj.nickName && obj.deptName) {
deptMap[obj.nickName] = obj.deptName;
}
});
}
} catch (e) {
deptMap = {};
}
const colorList = [
'#FFB6C1', '#87CEFA', '#90EE90', '#FFD700', '#FFA07A',
'#9370DB', '#00CED1', '#FF69B4', '#B0C4DE', '#40E0D0',
];
const deptNameSet = new Set();
Object.values(deptMap).forEach(deptName => {
deptNameSet.add(deptName);
});
const deptNameArr = Array.from(deptNameSet);
const deptColorMap = {};
deptNameArr.forEach((dept, idx) => {
deptColorMap[dept] = colorList[idx % colorList.length];
});
return conversationList.map(item => {
const deptName = deptMap[item.showName];
if (deptName) {
return {
...item,
deptName,
color: deptColorMap[deptName] || ''
}
} else {
return { ...item }
}
});
}