综合演练聊天创建群聊代码调整

2020-05-27 19:02:39 +08:00 · 2020-05-27 19:02:39 +08:00 · 4afcef1ce2
commit 4afcef1ce2
parent 47e02a0ce8
8 changed files with 281 additions and 44 deletions
--- a/src/api/chat.js
+++ b/src/api/chat.js
@ -312,11 +312,11 @@ export function getSimulationConversationListNew(group) {
 }

 // 获取/创建仿真会话（新版地图）
-export function getSimulationConversationIdNew(params, group) {
+export function getSimulationConversationIdNew(data, group) {
    return request({
        url: `/simulation/${group}/wx/conversation`,
-        method: 'get',
-        params: params
+        method: 'post',
+        data
    });
 }

--- a/src/store/modules/socket.js
+++ b/src/store/modules/socket.js
@ -163,7 +163,7 @@ function handleSimulationInfo(state, data) {
        targetOnline:data.targetMember ? data.targetMember.online : null,
        targetName:data.targetMember ? data.targetMember : 'All',
        targetRole:data.targetMember ? data.targetMember.role : null,
-        group: data.group,
+        all: data.all,
        date: +new Date(`${myDate1} ${chatTime}`)
    };
    state.simulationText = params;
--- a/src/views/newMap/jointTrainingNew/chatBox.vue
+++ b/src/views/newMap/jointTrainingNew/chatBox.vue
@ -11,8 +11,11 @@
            <div class="minimality" @click="handleMinimality('min')">
              <i class="el-icon-remove" />
            </div>
-            <div v-show="currentCoversition.group==undefined?true:currentCoversition.group" class="showMembers" @click="handleMembers()">
+            <!-- <div v-show="currentCoversition.group==undefined?true:currentCoversition.group" class="showMembers" @click="handleMembers()">
              <i class="el-icon-user-solid" />
+            </div> -->
+            <div v-show="currentCoversition.all==undefined?true&&isShow:currentCoversition.all&&isShow" class="chat-createGroup" @click="handleCreateGroup()">
+              <i class="el-icon-plus" style="font-weight: bolder;" />
            </div>
            <div class="chat-setting" @click="handleSetting()">
              <i class="el-icon-s-tools" />
@ -42,6 +45,7 @@
      </div>
    </div>
    <chat-setting ref="chatSetting" :form="form" @setSetting="setSetting" />
+    <chat-create-group ref="createGroup" :group="group" @addCoversition="addCoversition" />
  </div>
 </template>
 <script>
@ -49,6 +53,7 @@ import ChatSetting from './chatSetting';
 import ChatContent from './chatContent';
 import ChatMemberList from './chatMemberList';
 import ChatCoversitionList from './chatCoversitionList';
+import ChatCreateGroup from './chatCreateGroup';
 import RecordRTC from 'recordrtc';
 import {uploadAudioFileNew} from '@/api/chat';
 export default {
@ -57,12 +62,17 @@ export default {
        ChatSetting,
        ChatContent,
        ChatMemberList,
-        ChatCoversitionList
+        ChatCoversitionList,
+        ChatCreateGroup
    },
    props: {
        group: {
            type: String,
            required: true
+        },
+        userRole: {
+            type: String,
+            required: true
        }
    },
    data() {
@ -81,6 +91,11 @@ export default {
            headerTitle:'所有人'
        };
    },
+    computed:{
+        isShow() {
+            return this.userRole != 'ADMIN' && this.userRole != 'AUDIENCE';
+        }
+    },
    watch: {
        '$store.state.socket.simulationRoleList': function (val) {
            if (val && val.length) {
@ -110,7 +125,7 @@ export default {
        },
        setCurrentCoversition(coversition) {
            this.currentCoversition = coversition;
-            if (coversition.group) {
+            if (coversition.all) {
                this.headerTitle = coversition.name;
            }
            if (this.recordSending) {
@ -123,7 +138,7 @@ export default {
        },
        addCoversition({data, headerTitle}) {
            this.$refs.chatCoversitionList.addCoversition(data);
-            this.currentCoversition = {id:data.id, group:data.group};
+            this.currentCoversition = {id:data.id, all:data.all};
            this.headerTitle = headerTitle;
        },
        // 语音录制开始
@ -229,9 +244,12 @@ export default {
        handleSetting() {
            this.$refs.chatSetting.doShow();
        },
-        handleMembers() {
-            this.$refs.chatSetting.doClose();
-            this.$refs.chatMemberList.doShow();
+        // handleMembers() {
+        //     this.$refs.chatSetting.doClose();
+        //     this.$refs.chatMemberList.doShow();
+        // },
+        handleCreateGroup() {
+            this.$refs.createGroup.doShow();
        }
    }
 };
@ -285,6 +303,14 @@ export default {
    cursor: pointer;
    font-size: 16px;
 }
+.chat-createGroup{
+    float: right;
+    line-height: 40px;
+    margin-right: 10px;
+    cursor: pointer;
+    font-size: 16px;
+    position: relative;
+}
 .chat-box-footer-tool{
    width: 100%;
    height: 30px;
--- a/src/views/newMap/jointTrainingNew/chatContent.vue
+++ b/src/views/newMap/jointTrainingNew/chatContent.vue
@ -4,12 +4,12 @@
      <div v-for="(chatContent,index) in chatContentList" :key="index" class="chatContentInClass">
        <div :class="chatContent.self?'rightUser':'leftUser'">
          <div class="userHeader">
-            <div v-if="chatContent.group&& !chatContent.self" class="userName">{{ covertName(chatContent.member) }}</div>
+            <div v-if="chatContent.all&& !chatContent.self" class="userName">{{ covertName(chatContent.member) }}</div>
            <div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
          </div>
          <div class="userBubble" @click="playAudio('audio'+index)">
            <div class="userMessage">
-              <span v-if="chatContent.group&&!chatContent.member.robot">@{{ covertName(chatContent.targetName) }}</span>
+              <span v-if="chatContent.all&&!chatContent.member.robot">@{{ covertName(chatContent.targetName) }}</span>
              <span class="el-icon-video-play playicon" />
              <span class="messageText">{{ chatContent.message }}</span>
              <audio :id="'audio'+index" :src="baseUrl+chatContent.src" style="display:none" />
@ -59,7 +59,7 @@ export default {
                }
                this.scrollTop();
            } else {
-                if (!simulationText.group) {
+                if (!simulationText.all) {
                    this.$emit('changeCoversition', simulationText);
                    // this.$emit('addCoversition', {data:simulationText, headerTitle:''});
                    this.chatContentList.push(simulationText);
--- a/src/views/newMap/jointTrainingNew/chatCoversitionList.vue
+++ b/src/views/newMap/jointTrainingNew/chatCoversitionList.vue
@ -32,9 +32,15 @@ export default {
                if (resp.data) {
                    const data = resp.data;
                    data.map(coversition=>{
-                        const objectCover = this.handleMemberName(coversition);
-                        coversition.coverName = objectCover.coversitionName;
-                        coversition.isOnline = objectCover.isOnline;
+                        if (coversition.name) {
+                            coversition.coverName = coversition.name;
+                            coversition.isOnline = true;
+                        } else {
+                            const objectCover = this.handleMemberName(coversition);
+                            coversition.coverName = objectCover.coversitionName;
+                            coversition.isOnline = objectCover.isOnline;
+                        }
+
                        return coversition;
                    });
                    this.coversitionList = data;
@ -49,15 +55,21 @@ export default {
            const index = this.coversitionList.findIndex(item=>{ return item.id == data.id; });
            if (index < 0) {
                const objectCover = this.handleMemberName(data);
-                data.coverName = objectCover.coversitionName;
-                data.isOnline = objectCover.isOnline;
+                if (data.name) {
+                    data.coverName = data.name;
+                    data.isOnline = true;
+                } else {
+                    data.coverName = objectCover.coversitionName;
+                    data.isOnline = objectCover.isOnline;
+                }
+
                this.coversitionList.push(data);
                this.currentCoversition = data;
            }
        },
        changeCoversition(coversition) {
            this.$emit('setHeadTitle', !coversition.isOnline ? coversition.coverName + ' (离线)' : coversition.coverName);
-            this.currentCoversition = {id:coversition.id, group:coversition.group};
+            this.currentCoversition = {id:coversition.id, all:coversition.all};
            this.$emit('setCurrentCoversition', coversition);
            // this.$refs.chatContent.reloadData(this.currentCoversition);
        },
@ -72,7 +84,7 @@ export default {
            this.changeCoversition(coversition);
        },
        handleMemberName(conversition) {
-            if (conversition.group) {
+            if (conversition.all) {
                return {coversitionName:conversition.name, isOnline:true};
            } else {
                let coversitionName = '';
--- a/src/views/newMap/jointTrainingNew/chatCreateGroup.vue
+++ b/src/views/newMap/jointTrainingNew/chatCreateGroup.vue
@ -0,0 +1,219 @@
+<template>
+  <div v-show="dialogVisible" class="chat-create-group">
+    <div class="create-group-header">
+      <div class="create-group-title">添加会话对象</div>
+      <div class="create-group-close">
+        <i class="el-icon-close" @click="dialogVisible=false" />
+      </div>
+    </div>
+    <div class="create-group-content">
+      <div class="chat-member-list">
+        <el-checkbox-group v-model="checkList">
+          <el-checkbox
+            v-for="member in memberList"
+            :key="member.id"
+            class="each-chat-member"
+            :label="member"
+            :disabled="member.userId === userId"
+          >{{ member.memberName }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div class="currentSelectList">
+        <div
+          v-for="member in checkList"
+          :key="member.id"
+          class="eachSelect"
+        >
+          {{ member.memberName }}
+        </div>
+
+      </div>
+      <!-- :style="member.userId === userId ?'color:red':''" -->
+    </div>
+    <div class="create-group-bottom">
+      <el-button :loading="loading" size="small" type="primary" @click="doCreate">创建会话</el-button>
+      <el-button size="small" @click="doClose">取消</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import {getSimulationMembersNew, getSimulationConversationIdNew} from '@/api/chat';
+import ConstConfig from '@/scripts/ConstConfig';
+import Cookies from 'js-cookie';
+export default {
+    name:'ChatCreateGroup',
+    props: {
+        group: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            dialogVisible:false,
+            loading:false,
+            memberList:[],
+            checkList:[]
+        };
+    },
+    computed:{
+        userId() {
+            return this.$store.state.user.id;
+        }
+    },
+    methods:{
+        doShow() {
+            this.getSimulationMembers();
+            this.dialogVisible = true;
+        },
+        getSimulationMembers() {
+            getSimulationMembersNew(this.$route.query.group).then(resp => {
+                let lastData = JSON.stringify(resp.data);
+                const roleTypeList = ConstConfig.ConstSelect.roleTypeNew;
+                roleTypeList.forEach(function(element) {
+                    const rolename = element.value;
+                    if (Cookies.get('user_lang') == 'en') {
+                        lastData = lastData.replace(new RegExp(rolename, 'g'), element.enLabel);
+                    } else {
+                        lastData = lastData.replace(new RegExp(rolename, 'g'), element.label);
+                    }
+                });
+                lastData = JSON.parse(lastData);
+                lastData = lastData.filter(memberIn=>{ return memberIn.role != '观众'; });
+                lastData.map(member=>{
+                    const deviceName = member.deviceName ? '-' + member.deviceName : '';
+                    const memberName = member.name ? '-' + member.name : '';
+                    member.memberName = member.role + deviceName + memberName;
+                    return member;
+                });
+                this.memberList = lastData;
+            });
+        },
+        doCreate() {
+            if (this.checkList.length > 0) {
+                this.loading = true;
+                const checkList = this.checkList.map(function(check) { return check.id; });
+                getSimulationConversationIdNew(checkList, this.group).then(resp => {
+                    if (resp.data) {
+                        const data = resp.data;
+                        this.loading = false;
+                        this.$emit('addCoversition', {data:data, headerTitle:resp.data.name});
+                        this.dialogVisible = false;
+                        this.checkList = [];
+                    }
+                });
+            }
+
+        },
+        doClose() {
+            this.checkList = [];
+            this.dialogVisible = false;
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.chat-create-group{
+    position: absolute;
+    width: 70%;
+    height: 300px;
+    border: 1px #dedede solid;
+    left: 26%;
+    top: 8%;
+    z-index: 7;
+    border-radius: 8px;
+    box-shadow: #b5aeae 0 0 10px;
+    background: #fff;
+}
+.create-group-header{
+    padding-left: 10px;
+    padding-top: 6px;
+    font-size: 14px;
+    border-bottom: 1px #dedede solid;
+    padding-bottom: 6px;
+}
+.create-group-title{
+    display: inline-block;
+}
+.create-group-close{
+    float: right;
+    display: inline-block;
+    margin-right: 5px;
+    font-size: 16px;
+    cursor: pointer;
+}
+.chat-member-list{
+    width: 54%;
+    height: 216px;
+    overflow-y: auto;
+    padding: 5px 10px;
+    font-size: 14px;
+    overflow-x: hidden;
+    border-right: 1px #ccc solid;
+    display:inline-block;
+}
+.create-group-content{
+    width: 100%;
+    height: 220px;
+    padding-bottom: 10px;
+    border-bottom: 1px #dedede solid;
+}
+.create-group-bottom{
+    text-align: center;
+    margin-top:8px;
+}
+.each-chat-member{
+    display:block;
+    margin-top:5px;
+}
+.currentSelectList{
+    display: inline-block;
+    width: 44%;
+    font-size: 14px;
+    vertical-align: top;
+    padding: 5px 10px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    height: 216px;
+}
+.eachSelect{
+    display:block;
+    margin-top:5px;
+}
+// 谷歌、safari、qq浏览器、360浏览器滚动条样式
+// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
+.chat-member-list::-webkit-scrollbar,.currentSelectList::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    // height: 110px;
+    background-color: #FFFFFF;
+}
+/*定义滚动条轨道 内阴影+圆角*/
+.chat-member-list::-webkit-scrollbar-track,.currentSelectList::-webkit-scrollbar-track{
+    // box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+    background-color: #FFFFFF;;
+}
+/*定义滑块 内阴影+圆角*/
+.chat-member-list::-webkit-scrollbar-thumb,.currentSelectList::-webkit-scrollbar-thumb{
+    border-radius: 10px;
+    // box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+    background-color: #cacaca;
+}
+/*滑块效果*/
+.chat-member-list::-webkit-scrollbar-thumb:hover,.currentSelectList::-webkit-scrollbar-thumb:hover {
+    border-radius: 5px;
+    // box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background: rgba(0,0,0,0.4);
+}
+/*IE滚动条颜色*/
+html {
+    scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
+    scrollbar-highlight-color:#000;
+    scrollbar-3dlight-color:#000;
+    scrollbar-darkshadow-color:#000;
+    scrollbar-Shadow-color:#adadad;/*滑块边色*/
+    scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
+    scrollbar-track-color:#eeeeee;/*背景颜色*/
+}
+</style>
--- a/src/views/newMap/jointTrainingNew/chatMemberList.vue
+++ b/src/views/newMap/jointTrainingNew/chatMemberList.vue
@ -7,13 +7,12 @@
        :key="member.id"
        :class="member.online?'each-chat-member':'each-chat-member each-chat-member-outline'"
        :style="member.userId === userId ?'color:red':''"
-        @click="createConversition(member)"
      >{{ member.memberName }}</div>
    </div>
  </div>
 </template>
 <script>
-import {getSimulationMembersNew, getSimulationConversationIdNew} from '@/api/chat';
+import {getSimulationMembersNew} from '@/api/chat';
 import ConstConfig from '@/scripts/ConstConfig';
 import Cookies from 'js-cookie';
 export default {
@ -26,7 +25,7 @@ export default {
    },
    data() {
        return {
-            showMembers:false,
+            showMembers:true,
            memberList:[]
        };
    },
@ -39,17 +38,6 @@ export default {
        this.getSimulationMembers();
    },
    methods:{
-        createConversition(member) {
-            if (member.userId != this.$store.state.user.id && member.online) {
-                getSimulationConversationIdNew({ memberId: member.id }, this.group).then(resp => {
-                    if (resp.data) {
-                        const data = resp.data;
-                        this.$emit('addCoversition', {data:data, headerTitle:member.memberName});
-                        this.showMembers = false;
-                    }
-                });
-            }
-        },
        setMemberStatus(memberInfo) {
            this.getSimulationMembers();
            // memberInfo.forEach(member=>{
@ -84,14 +72,6 @@ export default {
                });
                this.memberList = lastData;
            });
-        },
-        doShow() {
-            if (this.showMembers) {
-                this.showMembers = false;
-            } else {
-                this.showMembers = true;
-                this.getSimulationMembers();
-            }
        }
    }
 };
--- a/src/views/newMap/jointTrainingNew/menuDemon.vue
+++ b/src/views/newMap/jointTrainingNew/menuDemon.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <chat-box :group="group" />
+    <chat-box :group="group" :user-role="userRole" />
    <div class="display-draft" :class="{'display-type-hb': $route.query.lineCode == '07' && $store.state.training.prdType=='01'}">
      <el-button-group>
        <el-button v-if="isProject && !dataError " type="primary" @click="setRelDevice">{{ $t('joinTraining.connectRealDevices') }}</el-button>