|
@@ -6,9 +6,9 @@
|
|
|
<el-tab-pane label="公共聊天" name="first">
|
|
|
<el-col :span="24" class="info">
|
|
|
<el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
|
|
|
- <el-col :span="24" class="user">
|
|
|
- <span>[{{ item.create_time }}]</span>
|
|
|
- <span>{{ item.user }}</span>
|
|
|
+ <el-col :span="24" class="sender_name">
|
|
|
+ <span>[{{ item.send_time }}]</span>
|
|
|
+ <span>{{ item.sender_name }}</span>
|
|
|
</el-col>
|
|
|
<el-col :span="24" class="content">
|
|
|
{{ item.content }}
|
|
@@ -20,7 +20,7 @@
|
|
|
<el-input v-model="text"></el-input>
|
|
|
</el-col>
|
|
|
<el-col :span="10" class="btn">
|
|
|
- <el-button type="primary" size="mini">发送</el-button>
|
|
|
+ <el-button type="primary" size="mini" @click="sendMessage">发送</el-button>
|
|
|
<el-button type="primary" size="mini">快捷发言</el-button>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
@@ -32,8 +32,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+const _ = require('lodash');
|
|
|
import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-const { mapActions: interview } = createNamespacedHelpers('interview');
|
|
|
+const { mapActions: dockChat } = createNamespacedHelpers('dockChat');
|
|
|
export default {
|
|
|
metaInfo() {
|
|
|
return { title: this.$route.meta.title };
|
|
@@ -46,18 +47,61 @@ export default {
|
|
|
active: 'first',
|
|
|
list: [
|
|
|
{
|
|
|
- create_time: '2020-12-12 12:00:00',
|
|
|
- user: '发言人',
|
|
|
+ send_time: '2020-12-12 12:00:00',
|
|
|
+ sender_name: '发言人',
|
|
|
content: '发言内容发言内容发言内容发言内容发言内容发言内容发言内容发言内容',
|
|
|
},
|
|
|
- { create_time: '2020-12-12 12:00:00', user: '发言人', content: '发言内容' },
|
|
|
+ { send_time: '2020-12-12 12:00:00', sender_name: '发言人', content: '发言内容' },
|
|
|
],
|
|
|
// 发言内容
|
|
|
text: '',
|
|
|
};
|
|
|
},
|
|
|
async created() {},
|
|
|
- methods: {},
|
|
|
+ async mounted() {
|
|
|
+ this.channel();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...dockChat(['create', 'query']),
|
|
|
+ async search() {
|
|
|
+ let res = await this.query({ dock_id: this.id });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `list`, res.data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async sendMessage() {
|
|
|
+ if (this.text != '') {
|
|
|
+ const content = _.cloneDeep(this.text);
|
|
|
+ const obj = { content, dock_id: this.id, sender_id: this.user.id, sender_name: this.user.name };
|
|
|
+ const check = Object.values(obj).every(f => f);
|
|
|
+ if (!check) {
|
|
|
+ this.$message.error('发言所需信息不全,请联系管理人员');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const res = await this.create(obj);
|
|
|
+ this.$checkRes(res, null, res.errmsg || '发言失败');
|
|
|
+ this.$set(this, 'text', '');
|
|
|
+ } else this.$message.error('请输入信息后发送');
|
|
|
+ },
|
|
|
+ channel() {
|
|
|
+ if (!this.id) {
|
|
|
+ console.warn('未获取到展会信息,无法进行订阅');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$stomp({
|
|
|
+ [`/exchange/dockChat/${this.id}`]: this.onMessage,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onMessage(message) {
|
|
|
+ let body = _.get(message, 'body');
|
|
|
+ if (body) {
|
|
|
+ body = JSON.parse(body);
|
|
|
+ console.log(body);
|
|
|
+ // this.talk.push(body);
|
|
|
+ // this.turnBottom();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
computed: {
|
|
|
...mapState(['user']),
|
|
|
id() {
|
|
@@ -76,7 +120,7 @@ export default {
|
|
|
overflow-y: auto;
|
|
|
.list {
|
|
|
margin: 0 0 10px 0;
|
|
|
- .user {
|
|
|
+ .sender_name {
|
|
|
margin: 0 0 5px 0;
|
|
|
span {
|
|
|
font-size: 16px;
|