添加私聊及成员查看

src/api/newChat.js

@@ -187,3 +187,35 @@ export function setGroupReadMessage(groupId, data) {
         data
     });
 }
+
+/**
+ * 发送私聊文字信息
+ * @param {String} groupId 房间号
+ * @param {Object} data
+ * @param {Number} data.memberId 角色id
+ * @param {String} data.content 文字内容
+ * @returns
+ */
+export function sendPrivateText(groupId, data) {
+    return request({
+        url: `/simulation/${groupId}/operate/Conversation_Group_Private_Text_Chat`,
+        method: 'post',
+        data
+    });
+}
+
+/**
+ * 发送私聊BASE64信息
+ * @param {String} groupId 房间号
+ * @param {Object} data
+ * @param {Number} data.memberId 角色id
+ * @param {String} data.fileBase64Str 文件base64码
+ * @returns
+ */
+export function sendPrivateBase64(groupId, data) {
+    return request({
+        url: `/simulation/${groupId}/operate/Conversation_Group_Private_Audio_Base64`,
+        method: 'post',
+        data
+    });
+}

src/scripts/cmdPlugin/CommandEnum.js

@@ -514,7 +514,9 @@ export default {
         CMD_Conversation_Chat_Text: {value: 'Conversation_Chat_Text', label: '发送文本消息'},
         CMD_Conversation_Chat_Audio_Base64: {value: 'Conversation_Chat_Audio_Base64', label: '发送语音消息'},
         CMD_Conversation_Group_Text_Chat: {value: 'Conversation_Group_Text_Chat', label: '发送会话群文字消息'},
-        CMD_Conversation_Group_Audio_Base64: {value: 'Conversation_Group_Audio_Base64', label: '发送会话群语音消息'}
+        CMD_Conversation_Group_Audio_Base64: {value: 'Conversation_Group_Audio_Base64', label: '发送会话群语音消息'},
+        CMD_Conversation_Group_Private_Text_Chat: {value: 'Conversation_Group_Private_Text_Chat', label: '发送私聊文字消息'},
+        CMD_Conversation_Group_Private_Audio_Base64: {value: 'Conversation_Group_Private_Audio_Base64', label: '发送私聊语音消息'}
     },
     PSL: {
         CMD_PSL_PRESS_BUTTON: {value: 'PSL_PRESS_BUTTON', label: 'PSL按钮操作'}

src/views/newMap/display/index.vue

@@ -30,8 +30,8 @@ import TrainingTip from './trainingList/trainingTip';
 import TrainingPositionTip from './trainingList/trainingPositionTip.vue';
 import TrainingMenu from './trainingList/trainingMenu';
 import TrainingDesign from './trainingDesign/designPane.vue';
-// import ChatBox from './newChat/index.vue';
+import ChatBox from './newChat/index.vue';
-import ChatBox from './chatBox';
+// import ChatBox from './chatBox';
 import TrainingLeftSlider from './trainingList/trainingLeftSlider';
 import LineBoard from './lineBoard';
 import BottomTable from './bottomTable';

src/views/newMap/display/newChat/addressBook.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="main">
+    <div class="left">
+      <div class="searchBox">
+        <el-input v-model="queryMember" placeholder="请输入搜索人员" clearable>
+          <el-button slot="append" icon="el-icon-search" />
+        </el-input>
+      </div>
+      <div class="treeBox">
+        <el-tree
+          ref="tree"
+          :data="memberTreeData"
+          node-key="id"
+          :props="defaultProps"
+          :default-expand-all="false"
+          :filter-node-method="filterNode"
+          @node-click="nodeClick"
+        >
+          <span slot-scope="{ data }" class="custom-tree-node">
+            <span>{{ data.labelName }}</span>
+          </span>
+        </el-tree>
+      </div>
+    </div>
+    <div class="right">
+      <el-form ref="form" :model="activeNode" label-width="80px" size="small">
+        <el-form-item v-if="activeNode.labelName" :label="activeNode.type? '名称：': '部门：'">
+          <span>{{ activeNode.labelName }}</span>
+        </el-form-item>
+        <el-form-item v-if="activeNode.type" label="部门：">
+          <span>{{ activeNode.typeName }}</span>
+        </el-form-item>
+        <el-form-item v-if="activeNode.children" label="人数：">
+          <span>{{ activeNode.children.length }}</span>
+        </el-form-item>
+        <el-form-item v-if="showSendBtn">
+          <el-button type="primary" style="width: 200px;" @click="sendPrivateMsg">发消息</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'AddressBook',
+    components: {
+
+    },
+    props: {
+        memberTreeData: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        }
+    },
+    data() {
+        return {
+            activeTrains: [],
+            queryMember: '',
+            defaultProps: {
+                children: 'children',
+                label: 'labelName'
+            },
+            activeNode: {}
+        };
+    },
+    computed: {
+        memberData() {
+            return this.$store.state.training.memberData;
+        },
+        showSendBtn() {
+            let s = false;
+            if (this.activeNode.type) {
+                s = true;
+            }
+            return s;
+        }
+    },
+    watch: {
+        queryMember(val) {
+            this.$refs.tree.filter(val);
+        }
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+
+    },
+    methods: {
+        sendPrivateMsg() {
+            this.$emit('sendPrivateMsg', this.activeNode);
+        },
+        nodeClick(data, node) {
+            this.activeNode = { ...data };
+            if (node.isLeaf) {
+                this.activeNode.typeName = node.parent.data.labelName;
+            }
+        },
+        filterNode(value, data) {
+            let flag = false;
+            if (this.memberData[data.id] && this.memberData[data.id].nickName) {
+                flag = this.memberData[data.id].nickName.indexOf(value) !== -1;
+            }
+            let driverNoShow = true;
+            if (data.type && data.type === 'DRIVER' && !this.activeTrains.includes(data.deviceCode)) {
+                driverNoShow = false;
+            }
+            return (data.labelName.indexOf(value) !== -1 || flag) && driverNoShow;
+        }
+    }
+};
+</script>
+
+<style lang='scss' scoped>
+.main {
+	height: 100%;
+	width: 100%;
+	display: flex;
+	.left{
+		width: 300px;
+		.treeBox {
+			height: calc(100% - 40px);
+			overflow: auto;
+		}
+	}
+	.right {
+		height: 100%;
+		width: calc(100% - 300px);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		border-left: 1px solid #ccc;
+	}
+}
+</style>

src/views/newMap/display/newChat/chatContent.vue

@@ -27,7 +27,7 @@
       </div>
       <div class="chat-box-footer">
         <el-input v-model="textContent" size="small" placeholder="请输入会话文字，点击T发送" style="flex: 1; margin-left: 5px;" :rows="1" />
-        <el-button :id="sendTextId" size="mini" class="chat-box-footer-create" :disabled="contentSend || !id" @click="sendText">T</el-button>
+        <el-button :id="sendTextId" size="mini" class="chat-box-footer-create" :disabled="contentSend || (!id && !privateChatId)" @click="sendText">T</el-button>
         <el-button :id="recordVoice" class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" :disabled="audioPlay || (trainingDesign && !trainingSwitch) || !id" size="mini" type="primary" @click="startRecording()">
           <el-progress id="voice_progress_bar" type="circle" :show-text="false" :percentage="100/maxSeconds*seconds" :width="40" :stroke-width="2" status="success" />
           <i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancelRecording()" />
@@ -58,6 +58,10 @@ export default {
         groupName: {
             type: String,
             required:true
+        },
+        privateChatId: {
+            type: String,
+            required: true
         }
     },
     data() {
@@ -130,6 +134,7 @@ export default {
     },
     beforeDestroy() {
         this.contentDom.onscroll = null;
+        this.contentDom = '';
     },
     methods: {
         setIsBottomFn() {
@@ -189,7 +194,7 @@ export default {
             return name;
         },
         sendText() {
-            if (!this.id || !this.textContent) { return; }
+            if ((!this.id && !this.privateChatId) || !this.textContent) { return; }
             const operate = {
                 over: true,
                 cmdType: CMD.Conversation.CMD_Conversation_Group_Text_Chat,
@@ -201,6 +206,11 @@ export default {
                     content: this.textContent
                 }
             };
+            if (this.privateChatId) {
+                operate.cmdType = CMD.Conversation.CMD_Conversation_Group_Private_Text_Chat;
+                delete operate.param.id;
+                operate.param.memberId = this.privateChatId;
+            }
             this.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
                 if (valid) {
                     this.textContent = '';
@@ -237,6 +247,11 @@ export default {
                             fileBase64Str: BaseURL
                         }
                     };
+                    if (that.privateChatId) {
+                        operate.cmdType = CMD.Conversation.CMD_Conversation_Group_Private_Audio_Base64;
+                        delete operate.param.id;
+                        operate.param.memberId = that.privateChatId;
+                    }
                     that.$store.dispatch('trainingNew/next', operate).then(({ valid }) => {
                         if (valid) {
                             that.textContent = '';

src/views/newMap/display/newChat/chatDialog.vue

@@ -16,7 +16,7 @@
       </div>
     </div>
     <div class="dialogBody">
-      <div v-show="false" class="leftBox">
+      <div class="leftBox">
         <div class="leftLogo">
           <img :src="logoImgUrl" :alt="logoImgUrl">
         </div>
@@ -25,7 +25,7 @@
           <div class="tabLabel">{{ item.label }}</div>
         </div>
       </div>
-      <div v-if="tabActive==0" class="contentBox">
+      <div v-show="tabActive==0" class="contentBox">
         <div class="middle">
           <div class="middleTop">
             <div v-for="(item, index) in filterTab" :key="index" class="filterType pointer" :class="{active: index === filterActive}" @click="filterClick(index)">
@@ -39,7 +39,7 @@
             </div>
           </div>
           <div class="middleMain">
-            <div v-for="(item, index) in groupList" :key="index" class="row pointer" :class="{active: item.id === id}" @click="groupClick(item)">
+            <div v-for="(item, index) in chatList" :ref="'dom'+index" :key="index" class="row pointer" :class="{active: item.id === id || (privateChatId && privateChatId == getPrivateChatId(item))}" @click="groupClick(item)" @contextmenu.prevent.stop="showMenu($event,item)">
               <div v-show="false" class="groupIcon">
                 <img :src="getImgUrl(item.imageUrl)" alt="">
               </div>
@@ -56,28 +56,36 @@
           </div>
         </div>
         <div class="right">
-          <chat-content :id="id" :group-name="groupName" :message-list="activeMessageList" />
+          <chat-content :id="id" :group-name="groupName" :private-chat-id="privateChatId" :message-list="activeMessageList" />
         </div>
       </div>
-      <div v-else-if="tabActive==1">文档</div>
+      <div v-show="tabActive==1" class="contentBox">
-      <div v-else-if="tabActive==2">工作台</div>
+        <address-book ref="addressBook" :member-tree-data="memberTreeData" @sendPrivateMsg="sendPrivateMsg" />
-      <div v-else-if="tabActive==3">通讯录</div>
+      </div>
     </div>
-    <edit-group ref="editGroup" />
+    <edit-group ref="editGroup" :member-tree-data="memberTreeData" />
+    <pop-menu ref="popMenu" :menu="menu" />
+    <dialog-member ref="dialogMember" :member-tree-data="memberTreeData" @updateLeaderId="updateLeaderId" />
   </el-dialog>
 </template>
 
 <script>
 import {mapGetters} from 'vuex';
-import { getGroupList, setGroupReadMessage } from '@/api/newChat';
+import { getGroupList, setGroupReadMessage, updateGroupName, updateGroupLeader } from '@/api/newChat';
 import { timestampFormat } from '@/utils/date';
 import ChatContent from './chatContent';
 import EditGroup from './editGroup';
+import AddressBook from './addressBook';
+import PopMenu from '@/components/PopMenu';
+import DialogMember from './dialogMember.vue';
 export default {
-    name: '',
+    name: 'ChatDialog',
     components: {
         ChatContent,
-        EditGroup
+        EditGroup,
+        AddressBook,
+        PopMenu,
+        DialogMember
     },
     props: {
 
@@ -88,8 +96,6 @@ export default {
             dialogVisible: false,
             tabs: [
                 {label:'消息', icon:'el-icon-chat-dot-square'},
-                {label:'文档', icon:'el-icon-document'},
-                {label:'工作台', icon:'el-icon-menu'},
                 {label:'通讯录', icon:'el-icon-notebook-1'}
             ],
             tabActive: 0,
@@ -101,11 +107,12 @@ export default {
                 // {label: '群聊', value: ''}
             ],
             filterActive: 0,
-            groupList: [
+            groupList: [],
-                // {name: '分公司领导', imageUrl: '', memberList:[], messageList: [{content: '控制中心消息：【I 类】', time: '2023-04-20 15:08:55'}]},
+            id: 0, // 当前的群组id
-                // {name: '集团公司', imageUrl: '', memberList:[],messageList: [{content: '【演练结束】2号线二期：14:58 Y04列车演练结束', time: '2023-04-20 15:08:55'}], isMute: true}
+            privateChatId: '', // 私聊角色id
-            ],
+            memberTreeData: [],
-            id: 0 // 当前的群组id
+            menu: [], // 右键菜单
+            noIdChatList: [] // 临时加的私聊，没有id
         };
     },
     computed: {
@@ -116,13 +123,23 @@ export default {
         myMemberId() {
             return this.$store.state.training.myMemberId;
         },
+        memberList() {
+            return this.$store.state.training.memberList;
+        },
         memberData() {
             return this.$store.state.training.memberData;
         },
+        chatList() {
+            const list = JSON.parse(JSON.stringify(this.groupList));
+            this.noIdChatList.forEach(item => {
+                list.splice(item.sortIndex, 0, item);
+            });
+            return list;
+        },
         activeMessageList() {
             let list = [];
             const find = this.groupList.find(item => {
-                return item.id == this.id;
+                return item.id == this.id || (this.privateChatId && this.privateChatId == this.getPrivateChatId(item));
             });
             if (find) {
                 list = find.messageList;
@@ -169,11 +186,15 @@ export default {
         },
         myMemberId() {
             this.getGroupList();
+        },
+        memberList () {
+            this.getTreeData();
         }
     },
     mounted() {
     },
     created() {
+        this.getTreeData();
         this.getBaseInfo();
         this.getGroupList();
     },
@@ -181,6 +202,337 @@ export default {
         this.handleClose();
     },
     methods: {
+        showMenu(event, item) {
+            this.groupClick(item);
+            this.initMenu(item);
+            const point = { x: event.x, y: event.y };
+            if (this.$refs && this.$refs.popMenu && this.menu && this.menu.length) {
+                this.$refs.popMenu.resetShowPosition(point);
+            }
+        },
+        closeMenu() {
+            if (this.$refs && this.$refs.popMenu) {
+                this.$refs.popMenu.close();
+            }
+        },
+        groupSet(item) {
+            this.$refs.editGroup.doShow(item.groupInfo, item.label);
+        },
+        editGroupName(item) {
+            this.$prompt('请修改群名称', '提示',
+                {
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                    inputValue: item.groupInfo.name
+                }).then(suc => {
+                if (!item.groupInfo || !item.groupInfo.id) { return; }
+                const data = {
+                    id: item.groupInfo.id,
+                    name: suc.value
+                };
+                updateGroupName(this.groupId, data).then(res => {
+                    this.getGroupList();
+                    this.$message.success('修改群名称成功！');
+                }).catch(err => {
+                    this.$message.error(`修改群名称失败！，${err.message}`);
+                });
+            });
+        },
+        editGroupLeader(item) {
+            this.$refs.dialogMember.doShow(item.groupInfo, item.label);
+        },
+        updateLeaderId(param) {
+            updateGroupLeader(this.groupId, param).then(res => {
+                this.getGroupList();
+                this.$message.success('修改群主成功！');
+            }).catch(err => {
+                this.$message.error(`修改群主失败！，${err.message}`);
+            });
+        },
+        initMenu(item) {
+            const menuNormal = (item) => [
+                {
+                    label: '查看群设置',
+                    handler: this.groupSet,
+                    groupInfo: item,
+                    isDisabled: (item) => {
+                        return false;
+                    },
+                    isShow: (item) => item.type === 'GROUP_CHAT'
+                },
+                {
+                    label: '修改群名称',
+                    handler: this.editGroupName,
+                    groupInfo: item,
+                    isDisabled: (item) => {
+                        return item.leaderId != this.myMemberId;
+                    },
+                    isShow: (item) => item.type === 'GROUP_CHAT'
+                }
+                // {
+                //     label: '修改群主',
+                //     handler: this.editGroupLeader,
+                //     groupInfo: item,
+                //     isDisabled: (item) => {
+                //         return item.leaderId != this.myMemberId;
+                //     },
+                //     isShow: (item) => item.type === 'GROUP_CHAT'
+                // }
+            ];
+            this.menu = [];
+            const list = menuNormal(item);
+            list.forEach(menuItem => {
+                menuItem.disabled = menuItem.isDisabled ? menuItem.isDisabled(item) : false;
+                menuItem.show = menuItem.isShow ? menuItem.isShow(item) : true;
+            });
+            this.menu = list;
+        },
+        scrollTop(index) {
+            this.$nextTick(() => {
+                const dom = document.querySelector('.middleMain');
+                const refDom = this.$refs['dom' + index];
+                const oTop = refDom[0].offsetTop;
+                const d = oTop - dom.clientHeight / 2;
+                dom.scrollTop = d;
+            });
+        },
+        sendPrivateMsg(item) {
+            this.privateChatId = item.id;
+            const findIndex = this.groupList.findIndex(ii => {
+                return ii.type == 'PRIVATE_CHAT' && ii.memberList.find(m => {
+                    return m.memberId == item.id;
+                });
+            });
+            let index = findIndex;
+            if (findIndex < 0) {
+                const sortIndex = this.chatList.length;
+                const obj = {
+                    creatorId: this.myMemberId,
+                    leaderId: this.myMemberId,
+                    memberList: [
+                        {memberId: this.myMemberId, connect: false, role: 'Leader'},
+                        {memberId: item.id, connect: false, role: 'Leader'}
+                    ],
+                    sortIndex: sortIndex,
+                    messageList: [],
+                    name: item.labelName,
+                    type: 'PRIVATE_CHAT'
+                };
+                this.noIdChatList.push(obj);
+                index = sortIndex;
+            }
+            this.scrollTop(index);
+            this.id = 0;
+            this.tabActive = 0;
+        },
+        removeNoIdItem() {
+            const list = [];
+            this.noIdChatList.forEach(item => {
+                const find = this.groupList.find(ii => {
+                    return ii.type == 'PRIVATE_CHAT' && ii.memberList[0].memberId == item.memberList[0].memberId && ii.memberList[1].memberId == item.memberList[1].memberId;
+                });
+                if (!find) {
+                    list.push(item);
+                } else {
+                    if (this.privateChatId && this.privateChatId == this.getPrivateChatId(find)) {
+                        this.groupClick(find);
+                    }
+                }
+            });
+            this.noIdChatList = list;
+        },
+        getTreeData() {
+            const val = this.memberList;
+            if (val && val.length) {
+                const dispatcherList = [];
+                const nccDispatcherList = [];
+                const electricDispatcherList = [];
+                const depotDispatcherList = [];
+                const stationSupervisorList = [];
+                const driverList = [];
+                const maintainerList = [];
+                const ctcOperatorList = [];
+                const stationAssistantList = [];
+                const stationMasterList = [];
+                const stationSignalerList = [];
+                const stationPassengerList = [];
+                const stationSwitchManList = [];
+                const stationFacilitatorList = [];
+                const stationWorkerList = [];
+                const deviceManagerList = [];
+                const trainMasterList = [];
+                const stationElectricWorkerList = [];
+                val.forEach(item => {
+                    const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
+                    switch (item.type) {
+                    case 'DISPATCHER':
+                        this.memberData[item.id].labelName = '行调' + (item.name || '');
+                        dispatcherList.push(this.memberData[item.id]);
+                        break;
+                    case 'NCC_DISPATCHER':
+                        this.memberData[item.id].labelName = 'NCC调度' + (item.name || '');
+                        nccDispatcherList.push(this.memberData[item.id]);
+                        break;
+                    case 'ELECTRIC_DISPATCHER':
+                        this.memberData[item.id].labelName = '电力调度' + (item.name || '');
+                        electricDispatcherList.push(this.memberData[item.id]);
+                        break;
+                    case 'DEPOT_DISPATCHER':
+                        this.memberData[item.id].labelName = '信号楼-' + `${ device ? device.name : '' }` + (item.name || '');
+                        depotDispatcherList.push(this.memberData[item.id]);
+                        break;
+                    case 'STATION_SUPERVISOR':
+                        this.memberData[item.id].labelName = '值班员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
+                        stationSupervisorList.push(this.memberData[item.id]);
+                        break;
+                    case 'DRIVER':
+                        this.memberData[item.id].labelName = '司机-列车' + item.deviceCode;
+                        driverList.push(this.memberData[item.id]);
+                        break;
+                    case 'MAINTAINER':
+                        this.memberData[item.id].labelName = '通号' + (item.name || '');
+                        maintainerList.push(this.memberData[item.id]);
+                        break;
+                    case 'RAIL_CTC':
+                        this.memberData[item.id].labelName = 'CTC操作员' + `${ device ? device.name : '' }`;
+                        ctcOperatorList.push(this.memberData[item.id]);
+                        break;
+                    case 'STATION_ASSISTANT':
+                        this.memberData[item.id].labelName = '车站助理-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
+                        stationAssistantList.push(this.memberData[item.id]);
+                        break;
+                    case 'STATION_MASTER':
+                        this.memberData[item.id].labelName = '车站站长-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
+                        stationMasterList.push(this.memberData[item.id]);
+                        break;
+                    case 'STATION_SIGNALER':
+                        this.memberData[item.id].labelName = '车站信号员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
+                        stationSignalerList.push(this.memberData[item.id]);
+                        break;
+                    case 'STATION_PASSENGER':
+                        this.memberData[item.id].labelName = '车站客运员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
+                        stationPassengerList.push(this.memberData[item.id]);
+                        break;
+                    case 'STATION_SWITCH_MAN':
+                        this.memberData[item.id].labelName = '车站扳道员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
+                        stationSwitchManList.push(this.memberData[item.id]);
+                        break;
+                    case 'STATION_FACILITATOR':
+                        this.memberData[item.id].labelName = '车站引导员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
+                        stationFacilitatorList.push(this.memberData[item.id]);
+                        break;
+                    case 'STATION_WORKER':
+                        this.memberData[item.id].labelName = '车站工务工-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
+                        stationWorkerList.push(this.memberData[item.id]);
+                        break;
+                    case 'DEVICE_MANAGER':
+                        this.memberData[item.id].labelName = '设备管理员-' + `${ device ? device.name : '' }` + (item.name ? `-${item.name }` : '');
+                        deviceManagerList.push(this.memberData[item.id]);
+                        break;
+                    case 'TRAIN_MASTER':
+                        this.memberData[item.id].labelName = '车务段段长-' + (item.name ? `-${item.name }` : '');
+                        trainMasterList.push(this.memberData[item.id]);
+                        break;
+                    case 'PARENT_DEPARTMENT':
+                        this.memberData[item.id].labelName = '上级部门' + (item.name ? `-${item.name }` : '');
+                        break;
+                    case 'STATION_ELECTRIC_WORKER':
+                        this.memberData[item.id].labelName = '电力工务' + (item.name || '');
+                        stationElectricWorkerList.push(this.memberData[item.id]);
+                        break;
+                    }
+                });
+                this.memberTreeData = [{
+                    labelName: '行调',
+                    id: 'dispatcher',
+                    children: dispatcherList
+                }, {
+                    labelName: 'NCC调度',
+                    id: 'nccDispatcher',
+                    children: nccDispatcherList
+                }, {
+                    labelName: '车站值班员',
+                    id: 'stationSupervisor',
+                    children: stationSupervisorList
+                }, {
+                    labelName: '司机',
+                    id: 'driver',
+                    children: driverList
+                }, {
+                    labelName: '通号',
+                    id: 'maintainer',
+                    children: maintainerList
+                }, {
+                    labelName: '车辆段信号楼',
+                    id: 'depotDispatcher',
+                    children: depotDispatcherList
+                }, {
+                    labelName: '电力调度',
+                    id: 'electricDispatcher',
+                    children: electricDispatcherList
+                }, {
+                    labelName: 'CTC操作员',
+                    id: 'ctcOperator',
+                    children: ctcOperatorList
+                }, {
+                    labelName: '车站助理',
+                    id: 'stationAssistant',
+                    children: stationAssistantList
+                },
+                {
+                    labelName: '车站站长',
+                    id: 'stationMaster',
+                    children: stationMasterList
+                },
+                {
+                    labelName: '车站信号员',
+                    id: 'stationSignaler',
+                    children: stationSignalerList
+                },
+                {
+                    labelName: '车站客运员',
+                    id: 'stationPassenger',
+                    children: stationPassengerList
+                },
+                {
+                    labelName: '车站扳道员',
+                    id: 'stationSwitchMan',
+                    children: stationSwitchManList
+                },
+                {
+                    labelName: '车站引导员',
+                    id: 'stationFacilitator',
+                    children: stationFacilitatorList
+                },
+                {
+                    labelName: '车站工务工',
+                    id: 'stationWorker',
+                    children: stationWorkerList
+                },
+                {
+                    labelName: '设备管理员',
+                    id: 'deviceManager',
+                    children: deviceManagerList
+                },
+                {
+                    labelName: '车务段段长 ',
+                    id: 'trainMaster',
+                    children: trainMasterList
+                },
+                {
+                    labelName: '电力工务 ',
+                    id: 'stationElectricWorker',
+                    children: stationElectricWorkerList
+                }
+                ];
+                this.$nextTick(() => {
+                    if (this.$refs.tree) {
+                        this.$refs.tree.filter(this.queryMember);
+                    }
+                });
+            }
+        },
         getMessageStatus(val) {
             const find = this.groupList.find(item => {
                 return item.id == val.id;
@@ -206,15 +558,28 @@ export default {
         },
         getGroupName(item) {
             let name = '';
-            if (item.name) {
+            if (item.type == 'PRIVATE_CHAT') {
-                name = item.name;
+                let mId = '';
+                if (item.memberList[0].memberId == this.myMemberId) {
+                    mId = item.memberList[1].memberId;
+                } else if (item.memberList[1].memberId == this.myMemberId) {
+                    mId = item.memberList[0].memberId;
+                }
+                const node = this.memberData[mId];
+                if (node) {
+                    name = node.labelName;
+                }
             } else {
-                const nArr = [];
+                if (item.name) {
-                item.memberList.forEach(ii => {
+                    name = item.name;
-                    const node = this.memberData[ii.memberId];
+                } else {
-                    node && nArr.push(node.labelName);
+                    const nArr = [];
-                });
+                    item.memberList.forEach(ii => {
-                name = nArr.join('、');
+                        const node = this.memberData[ii.memberId];
+                        node && nArr.push(node.labelName);
+                    });
+                    name = nArr.join('、');
+                }
             }
             return name;
         },
@@ -263,10 +628,10 @@ export default {
         getGroupList() {
             getGroupList(this.groupId).then(res => {
                 this.groupList = res.data;
-                if (this.groupList && this.groupList[0] && !this.id) {
+                if (this.groupList && this.groupList[0] && !this.id && !this.privateChatId) {
                     this.id = this.groupList[0].id;
                 }
-            }).catch(err => {
+                this.removeNoIdItem();
             });
         },
         getImgUrl(url) {
@@ -282,10 +647,28 @@ export default {
             this.filterActive = index;
         },
         groupClick(item) {
-            this.id = item.id;
+            this.id = item.id || 0;
+            if (item.type == 'GROUP_CHAT') {
+                this.privateChatId = '';
+            } else {
+                this.privateChatId = this.getPrivateChatId(item);
+            }
             this.setReadGroup();
         },
+        getPrivateChatId(item) {
+            let pId = '';
+            if (item.type == 'PRIVATE_CHAT' && item.leaderId == this.myMemberId) {
+                const find = item.memberList.find(ii => {
+                    return ii.memberId != this.myMemberId;
+                });
+                if (find) {
+                    pId = find.memberId;
+                }
+            }
+            return pId;
+        },
         setReadGroup() {
+            if (!this.id) { return; }
             const id = this.id;
             setGroupReadMessage(this.groupId, {id}).then(res => {
                 res.data.forEach(item => {
@@ -297,7 +680,6 @@ export default {
                     };
                     this.getMessageStatus(obj);
                 });
-            }).catch(err => {
             });
         },
         handleClose() {
@@ -324,6 +706,12 @@ export default {
 			border-top-right-radius: 5px;
 		}
 	}
+	.pop-menu{
+		padding: 0;
+		background: #eee;
+		border: none;
+		box-shadow: 0 0 10px 3px #eee;
+	}
 }
 </style>
 

src/views/newMap/display/newChat/dialogMember.vue

@@ -0,0 +1,87 @@
+<template>
+  <el-dialog
+    v-dialogDrag
+    class="dialogMember"
+    :title="title"
+    :visible.sync="dialogVisible"
+    width="30%"
+    :modal="false"
+    append-to-body
+    :close-on-click-modal="false"
+    :before-close="handleClose"
+  >
+    <div class="dialogBody">
+      <el-select v-model="value" placeholder="请选择">
+        <el-option-group
+          v-for="group in memberTreeData"
+          :key="group.id"
+          :label="group.labelName"
+        >
+          <el-option
+            v-for="item in group.children"
+            :key="item.id"
+            :label="item.labelName"
+            :value="item.id"
+          />
+        </el-option-group>
+      </el-select>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">取 消</el-button>
+      <el-button type="primary" @click="save">确 定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+    name: 'DialogMember',
+    components: {},
+    props: {
+        memberTreeData: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        }
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            title: '修改群主',
+            gId: '',
+            value: ''
+        };
+    },
+    computed: {
+    },
+    watch: {
+    },
+    mounted() {
+    },
+    created() {
+    },
+    beforeDestroy() {
+    },
+    methods: {
+        save() {
+            if (this.title == '修改群主') {
+                this.$emit('updateLeaderId', {id: this.gId, memberId: this.value});
+            }
+            this.handleClose();
+        },
+        doShow(info, title) {
+            this.title = title || '修改群主';
+            this.gId = info.id;
+            this.value = info.leaderId;
+            this.dialogVisible = true;
+        },
+        handleClose() {
+            this.dialogVisible = false;
+        }
+    }
+};
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/newMap/display/newChat/editGroup.vue

@@ -2,7 +2,7 @@
   <el-dialog
     v-dialogDrag
     class="editGroup"
-    title="创建会话群"
+    :title="title"
     :visible.sync="dialogVisible"
     width="40%"
     :modal="false"
@@ -20,7 +20,7 @@
         <div class="treeBox">
           <el-tree
             ref="tree"
-            :data="treeData"
+            :data="memberTreeData"
             node-key="id"
             :props="defaultProps"
             default-expand-all
@@ -41,14 +41,14 @@
           <b>{{ selectTreeNode.length }}</b>
           <b>）</b>
           <div class="tagBox">
-            <el-tag v-for="(tag, index) in selectTreeNode" :key="index" class="tag" :class="{disableClose: tag.disabled}" :type="tag.disabled ? 'warning' : ''" closable @close="tagClose(tag)">
+            <el-tag v-for="(tag, index) in selectTreeNode" :key="index" class="tag" :class="{disableClose: tag.disabled}" :type="tag.disabled ? 'warning' : ''" :closable="!treeDisabled" @close="tagClose(tag)">
               {{ tag.labelName }}
             </el-tag>
           </div>
           <el-divider />
           <el-form ref="form" :model="form" label-width="80px">
             <el-form-item label="群名称：" prop="name">
-              <el-input v-model="form.name" />
+              <el-input v-model="form.name" :disabled="nameDisabled" />
             </el-form-item>
             <!-- <el-form-item label="群头像：" prop="imageUrl">
               <div class="uploadImgDiv">
@@ -57,7 +57,7 @@
                 <input id="upload_file_group" ref="files" type="file" class="input_file_box" accept="image/jpeg,image/png" @change="uploadLogo()">
               </div>
             </el-form-item> -->
-            <el-form-item>
+            <el-form-item v-if="showSubmitBtn">
               <el-button @click="handleClose">取消</el-button>
               <el-button type="primary" @click="onSubmit">确定</el-button>
             </el-form-item>
@@ -77,102 +77,56 @@ export default {
 
     },
     props: {
-
+        memberTreeData: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        }
     },
     data() {
         return {
+            title: '创建会话群',
             dialogVisible: false,
             queryMember: '',
             defaultProps: {
                 children: 'children',
-                label: 'labelName'
+                label: 'labelName',
+                disabled: (node) => {
+                    if (node.disabled || this.treeDisabled) {
+                        return true;
+                    } else {
+                        return false;
+                    }
+                }
             },
             activeTrains: [],
+            defaultCheckedKeys: [],
             selectTreeNode: [],
-            treeData: [{
-                labelName: '行调',
-                children: []
-            }, {
-                labelName: 'NCC调度',
-                children: []
-            }, {
-                labelName: '车站值班员',
-                children: []
-            }, {
-                labelName: '司机',
-                children: []
-            }, {
-                labelName: '通号',
-                children: []
-            }, {
-                labelName: '车辆段',
-                children: []
-            }, {
-                labelName: 'CTC操作员',
-                children: []
-            }, {
-                labelName: '车站助理',
-                children: []
-            },
-            {
-                labelName: '车站站长',
-                children: []
-            },
-            {
-                labelName: '车站信号员',
-                children: []
-            },
-            {
-                labelName: '车站客运员',
-                children: []
-            },
-            {
-                labelName: '车站扳道员',
-                children: []
-            },
-            {
-                labelName: '车站引导员',
-                children: []
-            },
-            {
-                labelName: '车站工务工',
-                children: []
-            },
-            {
-                labelName: '设备管理员',
-                children: []
-            }
-            ],
             form: {
                 name: '',
                 imageUrl: ''
-            }
+            },
+            treeDisabled: false,
+            nameDisabled: false,
+            showSubmitBtn: true
         };
     },
     computed: {
         groupId() {
             return this.$route.query.group;
         },
-        memberList() {
-            return this.$store.state.training.memberList;
-        },
         memberData() {
             return this.$store.state.training.memberData;
         },
         myMemberId() {
             return this.$store.state.training.myMemberId;
-        },
-        defaultCheckedKeys() {
-            return [this.myMemberId];
         }
     },
     watch: {
         queryMember(val) {
             this.$refs.tree.filter(val);
         },
-        memberList () {
-            this.getTreeData();
-        },
         myMemberId(val) {
             this.initData();
             if (!val) {
@@ -181,13 +135,23 @@ export default {
         },
         '$store.state.map.activeTrainListChange': function () {
             this.getActiveTrains();
+        },
+        title() {
+            if (this.title == '创建会话群') {
+                this.showSubmitBtn = true;
+                this.treeDisabled = false;
+                this.nameDisabled = false;
+            } else {
+                this.showSubmitBtn = false;
+                this.treeDisabled = true;
+                this.nameDisabled = true;
+            }
         }
     },
     mounted() {
         this.initData();
     },
     created() {
-        this.getTreeData();
         this.getActiveTrains();
     },
     beforeDestroy() {
@@ -215,200 +179,6 @@ export default {
             }
             this.$refs.tree && this.$refs.tree.filter(this.queryMember);
         },
-        getTreeData() {
-            const val = this.memberList;
-            if (val && val.length) {
-                // this.memberData = this.$store.state.training.memberData;
-                const dispatcherList = [];
-                const nccDispatcherList = [];
-                const electricDispatcherList = [];
-                const depotDispatcherList = [];
-                const stationSupervisorList = [];
-                const driverList = [];
-                const maintainerList = [];
-                const ctcOperatorList = [];
-                const stationAssistantList = [];
-                const stationMasterList = [];
-                const stationSignalerList = [];
-                const stationPassengerList = [];
-                const stationSwitchManList = [];
-                const stationFacilitatorList = [];
-                const stationWorkerList = [];
-                const deviceManagerList = [];
-                const trainMasterList = [];
-                const stationElectricWorkerList = [];
-                val.forEach(item => {
-                    const device = this.$store.getters['map/getDeviceByCode'](item.deviceCode);
-                    switch (item.type) {
-                    case 'DISPATCHER':
-                        this.memberData[item.id].labelName = '行调' + (item.name || '');
-                        dispatcherList.push(this.memberData[item.id]);
-                        break;
-                    case 'NCC_DISPATCHER':
-                        this.memberData[item.id].labelName = 'NCC调度' + (item.name || '');
-                        nccDispatcherList.push(this.memberData[item.id]);
-                        break;
-                    case 'ELECTRIC_DISPATCHER':
-                        this.memberData[item.id].labelName = '电力调度' + (item.name || '');
-                        electricDispatcherList.push(this.memberData[item.id]);
-                        break;
-                    case 'DEPOT_DISPATCHER':
-                        this.memberData[item.id].labelName = '信号楼-' + device.name + (item.name || '');
-                        depotDispatcherList.push(this.memberData[item.id]);
-                        break;
-                    case 'STATION_SUPERVISOR':
-                        this.memberData[item.id].labelName = '值班员-' + device.name + (item.name ? `-${item.name }` : '');
-                        stationSupervisorList.push(this.memberData[item.id]);
-                        break;
-                    case 'DRIVER':
-                        this.memberData[item.id].labelName = '司机-列车' + item.deviceCode;
-                        driverList.push(this.memberData[item.id]);
-                        break;
-                    case 'MAINTAINER':
-                        this.memberData[item.id].labelName = '通号' + (item.name || '');
-                        maintainerList.push(this.memberData[item.id]);
-                        break;
-                    case 'RAIL_CTC':
-                        this.memberData[item.id].labelName = 'CTC操作员' + device.name;
-                        ctcOperatorList.push(this.memberData[item.id]);
-                        break;
-                    case 'STATION_ASSISTANT':
-                        this.memberData[item.id].labelName = '车站助理-' + device.name + (item.name ? `-${item.name }` : '');
-                        stationAssistantList.push(this.memberData[item.id]);
-                        break;
-                    case 'STATION_MASTER':
-                        this.memberData[item.id].labelName = '车站站长-' + device.name + (item.name ? `-${item.name }` : '');
-                        stationMasterList.push(this.memberData[item.id]);
-                        break;
-                    case 'STATION_SIGNALER':
-                        this.memberData[item.id].labelName = '车站信号员-' + device.name + (item.name ? `-${item.name }` : '');
-                        stationSignalerList.push(this.memberData[item.id]);
-                        break;
-                    case 'STATION_PASSENGER':
-                        this.memberData[item.id].labelName = '车站客运员-' + device.name + (item.name ? `-${item.name }` : '');
-                        stationPassengerList.push(this.memberData[item.id]);
-                        break;
-                    case 'STATION_SWITCH_MAN':
-                        this.memberData[item.id].labelName = '车站扳道员-' + device.name + (item.name ? `-${item.name }` : '');
-                        stationSwitchManList.push(this.memberData[item.id]);
-                        break;
-                    case 'STATION_FACILITATOR':
-                        this.memberData[item.id].labelName = '车站引导员-' + device.name + (item.name ? `-${item.name }` : '');
-                        stationFacilitatorList.push(this.memberData[item.id]);
-                        break;
-                    case 'STATION_WORKER':
-                        this.memberData[item.id].labelName = '车站工务工-' + device.name + (item.name ? `-${item.name }` : '');
-                        stationWorkerList.push(this.memberData[item.id]);
-                        break;
-                    case 'DEVICE_MANAGER':
-                        this.memberData[item.id].labelName = '设备管理员-' + device.name + (item.name ? `-${item.name }` : '');
-                        deviceManagerList.push(this.memberData[item.id]);
-                        break;
-                    case 'TRAIN_MASTER':
-                        // device.name;
-                        this.memberData[item.id].labelName = '车务段段长-' + (item.name ? `-${item.name }` : '');
-                        trainMasterList.push(this.memberData[item.id]);
-                        break;
-                    case 'PARENT_DEPARTMENT':
-                        this.memberData[item.id].labelName = '上级部门' + (item.name ? `-${item.name }` : '');
-                        break;
-                    case 'STATION_ELECTRIC_WORKER':
-                        this.memberData[item.id].labelName = '电力工务' + (item.name || '');
-                        stationElectricWorkerList.push(this.memberData[item.id]);
-                        break;
-                // DEVICE_MANAGER:'设备管理员' deviceManager
-                    }
-                });
-                this.treeData = [{
-                    labelName: '行调',
-                    id: 'dispatcher',
-                    children: dispatcherList
-                }, {
-                    labelName: 'NCC调度',
-                    id: 'nccDispatcher',
-                    children: nccDispatcherList
-                }, {
-                    labelName: '车站值班员',
-                    id: 'stationSupervisor',
-                    children: stationSupervisorList
-                }, {
-                    labelName: '司机',
-                    id: 'driver',
-                    children: driverList
-                }, {
-                    labelName: '通号',
-                    id: 'maintainer',
-                    children: maintainerList
-                }, {
-                    labelName: '车辆段信号楼',
-                    id: 'depotDispatcher',
-                    children: depotDispatcherList
-                }, {
-                    labelName: '电力调度',
-                    id: 'electricDispatcher',
-                    children: electricDispatcherList
-                }, {
-                    labelName: 'CTC操作员',
-                    id: 'ctcOperator',
-                    children: ctcOperatorList
-                }, {
-                    labelName: '车站助理',
-                    id: 'stationAssistant',
-                    children: stationAssistantList
-                },
-                {
-                    labelName: '车站站长',
-                    id: 'stationMaster',
-                    children: stationMasterList
-                },
-                {
-                    labelName: '车站信号员',
-                    id: 'stationSignaler',
-                    children: stationSignalerList
-                },
-                {
-                    labelName: '车站客运员',
-                    id: 'stationPassenger',
-                    children: stationPassengerList
-                },
-                {
-                    labelName: '车站扳道员',
-                    id: 'stationSwitchMan',
-                    children: stationSwitchManList
-                },
-                {
-                    labelName: '车站引导员',
-                    id: 'stationFacilitator',
-                    children: stationFacilitatorList
-                },
-                {
-                    labelName: '车站工务工',
-                    id: 'stationWorker',
-                    children: stationWorkerList
-                },
-                {
-                    labelName: '设备管理员',
-                    id: 'deviceManager',
-                    children: deviceManagerList
-                },
-                {
-                    labelName: '车务段段长 ',
-                    id: 'trainMaster',
-                    children: trainMasterList
-                },
-                {
-                    labelName: '电力工务 ',
-                    id: 'stationElectricWorker',
-                    children: stationElectricWorkerList
-                }
-                ];
-                this.$nextTick(() => {
-                    if (this.$refs.tree) {
-                        this.$refs.tree.filter(this.queryMember);
-                    }
-                });
-            }
-        },
         checkChange(data, node, val) {
             const filter = node.checkedNodes.filter(ii => {
                 return !ii.children;
@@ -446,6 +216,7 @@ export default {
         },
         initData() {
             this.$refs.form && this.$refs.form.resetFields();
+            this.defaultCheckedKeys = [this.myMemberId];
             this.selectTreeNode = [];
             const node = this.memberData[this.myMemberId];
             node && this.selectTreeNode.push(node);
@@ -499,7 +270,9 @@ export default {
             // fileName：存储文件名
             // method：生成链接的请求方式
         },
-        doShow() {
+        doShow(info, title) {
+            this.title = title || '创建会话群';
+            this.setInfo(info);
             this.dialogVisible = true;
             this.$nextTick(() => {
                 if (this.$refs.tree) {
@@ -507,6 +280,21 @@ export default {
                 }
             });
         },
+        setInfo(info) {
+            if (info) {
+                this.form.name = info.name || '';
+                this.form.imageUrl = info.imageUrl || '';
+                this.defaultCheckedKeys = [];
+                this.selectTreeNode = [];
+                info.memberList.forEach(item => {
+                    this.defaultCheckedKeys.push(item.memberId);
+                    const node = this.memberData[item.memberId];
+                    node && this.selectTreeNode.push(node);
+                });
+            } else {
+                this.initData();
+            }
+        },
         handleClose() {
             this.dialogVisible = false;
         }
@@ -549,6 +337,7 @@ $imgHeight: 70px;
 			.disableClose {
 				/deep/ .el-icon-close {
 					cursor: not-allowed;
+					display: none !important;
 				}
 			}
 		}