|
@@ -1,159 +1,159 @@
|
|
|
-<template>
|
|
|
- <div id="chats">
|
|
|
- <el-row>
|
|
|
- <el-col :span="24" class="info chat_frame" id="chat">
|
|
|
- <template v-for="(i, index) in talk">
|
|
|
- <template v-if="isSender(i, index)">
|
|
|
- <el-col :span="24" class="senderTime" :key="`div${i.id}${index}`">
|
|
|
- <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
|
|
|
- <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
|
|
|
- </el-col>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <el-col :span="24" class="receverTime" :key="`div${i.id}${index}`">
|
|
|
- <span :key="`receverTime${i.id}${index}`"> {{ i.sender_name }} [{{ i.send_time }}]</span>
|
|
|
- <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
|
|
|
- </el-col>
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </el-col>
|
|
|
- <el-col :span="24" style="text-align:center">
|
|
|
- <el-input v-model="content" type="textarea"></el-input>
|
|
|
- <el-button type="primary" size="mini" @click="sendMessage" style="margin-top:10px">发送</el-button>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-// import wangEditor from '@common/src/components/frame/wang-editor.vue';
|
|
|
-import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-const { mapActions: personChat } = createNamespacedHelpers('personChat');
|
|
|
-const _ = require('lodash');
|
|
|
-export default {
|
|
|
- name: 'chats',
|
|
|
- props: {
|
|
|
- room: { type: Object },
|
|
|
- },
|
|
|
- components: {},
|
|
|
- data: () => {
|
|
|
- return {
|
|
|
- content: '',
|
|
|
- talk: [],
|
|
|
- };
|
|
|
- },
|
|
|
- created() {},
|
|
|
- async mounted() {
|
|
|
- this.channel();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...personChat(['create', 'query']),
|
|
|
- async search() {
|
|
|
- let res = await this.query({ personroom_id: this.room.id });
|
|
|
- if (this.$checkRes(res)) {
|
|
|
- this.$set(this, `talk`, res.data);
|
|
|
- this.turnBottom();
|
|
|
- }
|
|
|
- },
|
|
|
- async sendMessage() {
|
|
|
- if (this.content != '') {
|
|
|
- let obj = { room_id: this.room.id, content: this.content, sender_id: this.user.id, sender_name: this.user.name };
|
|
|
- let pos = 'p1';
|
|
|
- if (_.get(this.room, 'p1_id') === this.user.id) pos = 'p2';
|
|
|
- obj.receiver_id = _.get(this.room, `${pos}_id`);
|
|
|
- obj.receiver_name = _.get(this.room, pos);
|
|
|
- let res = await this.create(obj);
|
|
|
- // this.$refs.editor.setContent();
|
|
|
- this.$set(this, `content`, '');
|
|
|
- this.$forceUpdate();
|
|
|
- if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
|
|
|
- this.talk.push(res.data);
|
|
|
- this.turnBottom();
|
|
|
- }
|
|
|
- } else this.$message.error('请输入信息后发送');
|
|
|
- },
|
|
|
- channel() {
|
|
|
- //TODO 修改订阅地址
|
|
|
- if (!this.room.id) {
|
|
|
- console.warn('未获取到房间id,无法进行订阅');
|
|
|
- return;
|
|
|
- }
|
|
|
- // console.log(`/exchange/personChat/${this.room.id}/${this.user.id}`);
|
|
|
- this.$stomp({
|
|
|
- [`/exchange/personChat/${this.room.id}.${this.user.id}`]: this.onMessage,
|
|
|
- });
|
|
|
- },
|
|
|
- onMessage(message) {
|
|
|
- let body = _.get(message, 'body');
|
|
|
- if (body) {
|
|
|
- body = JSON.parse(body);
|
|
|
- this.talk.push(body);
|
|
|
- this.turnBottom();
|
|
|
- }
|
|
|
- },
|
|
|
- turnBottom() {
|
|
|
- this.$nextTick(() => {
|
|
|
- document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;
|
|
|
- });
|
|
|
- },
|
|
|
- isSender(data) {
|
|
|
- return this.user.id !== data.sender_id;
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- room: {
|
|
|
- handler(val) {
|
|
|
- if (val.id) this.search();
|
|
|
- },
|
|
|
- immediate: true,
|
|
|
- deep: true,
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['user']),
|
|
|
- pageTitle() {
|
|
|
- return `${this.$route.meta.title}`;
|
|
|
- },
|
|
|
- },
|
|
|
- metaInfo() {
|
|
|
- return { title: this.$route.meta.title };
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.chat_frame {
|
|
|
- height: 350px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- margin-bottom: 10px;
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
-.info {
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
- padding: 15px;
|
|
|
-}
|
|
|
-/deep/.info p {
|
|
|
- margin: 0 !important;
|
|
|
- padding: 0 !important;
|
|
|
-}
|
|
|
-.senderTime {
|
|
|
- float: left;
|
|
|
- width: 100%;
|
|
|
- text-align: left;
|
|
|
-}
|
|
|
-.receverTime {
|
|
|
- float: right;
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.receverTime span:first-child {
|
|
|
- float: right;
|
|
|
- width: 100%;
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
-.receverTime span:last-child {
|
|
|
- float: right;
|
|
|
- width: 100%;
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div id="chats">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="info chat_frame" id="chat">
|
|
|
+ <template v-for="(i, index) in talk">
|
|
|
+ <template v-if="isSender(i, index)">
|
|
|
+ <el-col :span="24" class="senderTime" :key="`div${i.id}${index}`">
|
|
|
+ <span :key="`senderTime${i.id}${index}`">[{{ i.send_time }}] {{ i.sender_name }}</span>
|
|
|
+ <span v-html="i.content" :key="`senderContent${i.id}${index}`"></span>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-col :span="24" class="receverTime" :key="`div${i.id}${index}`">
|
|
|
+ <span :key="`receverTime${i.id}${index}`"> {{ i.sender_name }} [{{ i.send_time }}]</span>
|
|
|
+ <span v-html="i.content" :key="`receverContent${i.id}${index}`"></span>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" style="text-align:center">
|
|
|
+ <el-input v-model="content" type="textarea"></el-input>
|
|
|
+ <el-button type="primary" size="mini" @click="sendMessage" style="margin-top:10px">发送</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import wangEditor from '@common/src/components/frame/wang-editor.vue';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: personChat } = createNamespacedHelpers('personChat');
|
|
|
+const _ = require('lodash');
|
|
|
+export default {
|
|
|
+ name: 'chats',
|
|
|
+ props: {
|
|
|
+ room: { type: Object },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: () => {
|
|
|
+ return {
|
|
|
+ content: '',
|
|
|
+ talk: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ async mounted() {
|
|
|
+ this.channel();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...personChat(['create', 'query']),
|
|
|
+ async search() {
|
|
|
+ let res = await this.query({ room_id: this.room.id });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `talk`, res.data);
|
|
|
+ this.turnBottom();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async sendMessage() {
|
|
|
+ if (this.content != '') {
|
|
|
+ let obj = { room_id: this.room.id, content: this.content, sender_id: this.user.id, sender_name: this.user.name };
|
|
|
+ let pos = 'p1';
|
|
|
+ if (_.get(this.room, 'p1_id') === this.user.id) pos = 'p2';
|
|
|
+ obj.receiver_id = _.get(this.room, `${pos}_id`);
|
|
|
+ obj.receiver_name = _.get(this.room, pos);
|
|
|
+ let res = await this.create(obj);
|
|
|
+ // this.$refs.editor.setContent();
|
|
|
+ this.$set(this, `content`, '');
|
|
|
+ this.$forceUpdate();
|
|
|
+ if (this.$checkRes(res, null, res.errmsg || '发言失败')) {
|
|
|
+ this.talk.push(res.data);
|
|
|
+ this.turnBottom();
|
|
|
+ }
|
|
|
+ } else this.$message.error('请输入信息后发送');
|
|
|
+ },
|
|
|
+ channel() {
|
|
|
+ //TODO 修改订阅地址
|
|
|
+ if (!this.room.id) {
|
|
|
+ console.warn('未获取到房间id,无法进行订阅');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // console.log(`/exchange/personChat/${this.room.id}/${this.user.id}`);
|
|
|
+ this.$stomp({
|
|
|
+ [`/exchange/personChat/${this.room.id}.${this.user.id}`]: this.onMessage,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onMessage(message) {
|
|
|
+ let body = _.get(message, 'body');
|
|
|
+ if (body) {
|
|
|
+ body = JSON.parse(body);
|
|
|
+ this.talk.push(body);
|
|
|
+ this.turnBottom();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ turnBottom() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ isSender(data) {
|
|
|
+ return this.user.id !== data.sender_id;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ room: {
|
|
|
+ handler(val) {
|
|
|
+ if (val.id) this.search();
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['user']),
|
|
|
+ pageTitle() {
|
|
|
+ return `${this.$route.meta.title}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ metaInfo() {
|
|
|
+ return { title: this.$route.meta.title };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.chat_frame {
|
|
|
+ height: 350px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+.info {
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px;
|
|
|
+}
|
|
|
+/deep/.info p {
|
|
|
+ margin: 0 !important;
|
|
|
+ padding: 0 !important;
|
|
|
+}
|
|
|
+.senderTime {
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.receverTime {
|
|
|
+ float: right;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.receverTime span:first-child {
|
|
|
+ float: right;
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+.receverTime span:last-child {
|
|
|
+ float: right;
|
|
|
+ width: 100%;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+</style>
|