diff --git a/api/oa/binding.js b/api/oa/binding.js new file mode 100644 index 0000000..426a464 --- /dev/null +++ b/api/oa/binding.js @@ -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" + }) +} \ No newline at end of file diff --git a/pages/conversation/chating/components/ChatingHeader.vue b/pages/conversation/chating/components/ChatingHeader.vue index 3bef219..e51e995 100644 --- a/pages/conversation/chating/components/ChatingHeader.vue +++ b/pages/conversation/chating/components/ChatingHeader.vue @@ -12,10 +12,16 @@ - - {{ storeCurrentConversation.showName }} - {{ groupMemberCount }} + + {{ storeCurrentConversation.showName }} + + {{ storeCurrentConversation.deptName }} + + + {{ groupMemberCount }} diff --git a/pages/conversation/chating/components/ChatingList.vue b/pages/conversation/chating/components/ChatingList.vue index cb8a73e..258bee3 100644 --- a/pages/conversation/chating/components/ChatingList.vue +++ b/pages/conversation/chating/components/ChatingList.vue @@ -16,7 +16,7 @@ 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 && diff --git a/pages/conversation/chating/components/MessageItem/index.vue b/pages/conversation/chating/components/MessageItem/index.vue index 8781407..9c443cc 100644 --- a/pages/conversation/chating/components/MessageItem/index.vue +++ b/pages/conversation/chating/components/MessageItem/index.vue @@ -19,7 +19,12 @@ > {{ formattedMessageTime }} {{ "" }} - {{ source.senderNickname }} + + {{ source.senderNickname }} + + - {{ source.showName }} + {{ source.showName }} + + {{ latestMessage }} @@ -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 { diff --git a/pages/conversation/conversationList/index.vue b/pages/conversation/conversationList/index.vue index 76eda28..61107fc 100644 --- a/pages/conversation/conversationList/index.vue +++ b/pages/conversation/conversationList/index.vue @@ -14,7 +14,7 @@ @scrolltolower="scrolltolower" > plus.navigator.closeSplashscreen()); }, @@ -87,6 +97,10 @@ export default { closeAllSwipe() { this.$refs.swipeWrapperRef.closeAll(); }, + // 新增:异步获取部门名和颜色 + async updateConversationListWithDeptName() { + this.conversationListWithDeptName = await withDeptName(this.storeConversationList); + }, }, }; diff --git a/util/withDeptName.js b/util/withDeptName.js new file mode 100644 index 0000000..b08ca53 --- /dev/null +++ b/util/withDeptName.js @@ -0,0 +1,76 @@ +import { getDeptNameByNickName } from '@/api/oa/binding'; + +/* + * withDeptName 高阶函数 + * --------------------------------------------- + * 用途: + * 为会话列表(如IM会话、联系人等)异步注入部门名称和部门颜色, + * 使前端组件可直接渲染带部门信息的会话项。 + * + * 参数: + * @param {Array} conversationList - 原始会话对象数组, + * 每项需包含唯一标识(如 showName 字段)。 + * + * 返回: + * @returns {Promise>} - 返回一个 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 } + } + }); +} \ No newline at end of file