|
@@ -1,210 +0,0 @@
|
|
|
-<template>
|
|
|
- <el-dialog v-model="dialog"
|
|
|
- :title="`聊天室 ${userSize} 人`"
|
|
|
- width="70%"
|
|
|
- @closed="emits('closed')">
|
|
|
- <div class="chat_room_dialog">
|
|
|
- <div class="left">
|
|
|
- <el-table :data="props.userList" :height="getWindowSize.h / 1.5">
|
|
|
- <el-table-column prop="name" label="姓名">
|
|
|
- <template #default="{row}">
|
|
|
- <span v-if="row.code === userData.code">本人</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="deptName" label="科室"/>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <el-scrollbar :height="getWindowSize.h / 1.8 " ref="scrollbarRef">
|
|
|
- <div ref="innerRef">
|
|
|
- <div v-for="item in chatHistory" class="list">
|
|
|
- <div class="chat_right"
|
|
|
- v-if="whetherInPerson(item.code)">
|
|
|
- <div style="display: flex; ">
|
|
|
- <div style="font-size: 12px;margin-right: 10px">
|
|
|
- <div style="text-align: right">
|
|
|
- {{ item.date }} {{ item.deptName }} {{ item.name }}
|
|
|
- </div>
|
|
|
- <div class="message_str" style="float: right;">
|
|
|
- {{ item.message }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-avatar shape="square" :src="item.avatar" :size="30"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chat_left" v-else>
|
|
|
- <div style="display: flex;">
|
|
|
- <div>
|
|
|
- <el-avatar shape="square" :src="item.avatar" :size="30"/>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="font-size: 12px;margin-left: 10px">
|
|
|
- <div>{{ item.name }} {{ item.deptName }} {{ item.date }}</div>
|
|
|
- <div class="message_str" :class="judgmentQMy(item.message) ? 'specify_me' : '' ">
|
|
|
- {{ item.message }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
-
|
|
|
- <div>
|
|
|
- <el-input type="textarea"
|
|
|
- :rows="3"
|
|
|
- v-model="messageStr"
|
|
|
- @keydown.enter.stop="clickSend"/>
|
|
|
-
|
|
|
- <div style="float: right">
|
|
|
- <el-button @click="modifyTheCurrentMedicalRecord">修改当前病历</el-button>
|
|
|
- <el-button @click="clickSend">发送</el-button>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-dialog>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-import {getWindowSize} from "@/utils/window-size";
|
|
|
-import {getChatHistoryBySid, sendAMessage} from "@/api/zhu-yuan-yi-sheng/emr-socket";
|
|
|
-import {stringIsBlank} from "@/utils/blank-utils";
|
|
|
-import {xcMessage} from "@/utils/xiaochan-element-plus";
|
|
|
-import {useUserStore} from "@/pinia/user-store";
|
|
|
-import {ElScrollbar} from "element-plus";
|
|
|
-import {useCompRef} from "@/utils/useCompRef";
|
|
|
-import {defineComponent} from "vue";
|
|
|
-
|
|
|
-const userData = useUserStore().userInfo
|
|
|
-
|
|
|
-defineComponent({
|
|
|
- name: "EmrChatBox",
|
|
|
-})
|
|
|
-
|
|
|
-const chatHistory = ref([])
|
|
|
-const props = defineProps<{
|
|
|
- userList: any[],
|
|
|
- sid: string | null,
|
|
|
- currentEditorUser: {
|
|
|
- name: string
|
|
|
- } | null,
|
|
|
- userSize: number
|
|
|
-}>()
|
|
|
-
|
|
|
-const emits = defineEmits(['closed'])
|
|
|
-
|
|
|
-const dialog = ref(true)
|
|
|
-const messageStr = ref('')
|
|
|
-const scrollbarRef = useCompRef(ElScrollbar)
|
|
|
-const innerRef = ref<HTMLDivElement | null>(null)
|
|
|
-
|
|
|
-const clickSend = async () => {
|
|
|
- if (stringIsBlank(messageStr.value)) {
|
|
|
- return xcMessage.error('不能发送空白消息。')
|
|
|
- }
|
|
|
- await sendAMessage(props.sid, 'message', messageStr.value)
|
|
|
- messageStr.value = ''
|
|
|
- await queryJump()
|
|
|
-}
|
|
|
-
|
|
|
-const modifyTheCurrentMedicalRecord = async () => {
|
|
|
- if (props.currentEditorUser === null) {
|
|
|
- return xcMessage.error('当前没有人正在编辑');
|
|
|
- }
|
|
|
- if (stringIsBlank(props.currentEditorUser.name)) {
|
|
|
- return xcMessage.error('当前没有人正在编辑');
|
|
|
- }
|
|
|
- await sendAMessage(props.sid, 'message', '@' + props.currentEditorUser.name + ' 申请修改病历,请尽快保存,后离开当前病历【系统自动发送】');
|
|
|
- messageStr.value = ''
|
|
|
- await queryJump()
|
|
|
-}
|
|
|
-
|
|
|
-const queryJump = async () => {
|
|
|
- chatHistory.value = await getChatHistoryBySid(props.sid) as any[]
|
|
|
- await nextTick()
|
|
|
- scrollbarRef.value!.setScrollTop(innerRef.value!.scrollHeight)
|
|
|
-}
|
|
|
-
|
|
|
-const whetherInPerson = (code) => {
|
|
|
- return userData.code === code
|
|
|
-}
|
|
|
-
|
|
|
-const judgmentQMy = (val) => {
|
|
|
- return val.startsWith('@' + userData.name)
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(async () => {
|
|
|
- await nextTick()
|
|
|
- await queryJump()
|
|
|
-})
|
|
|
-
|
|
|
-defineExpose({
|
|
|
- queryJump
|
|
|
-})
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.chat_room_dialog {
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .left {
|
|
|
- width: 200px;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- height: max-content;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.list {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .specify_me {
|
|
|
- background-color: red;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
- .chat_right {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- padding: 5px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .chat_left {
|
|
|
- display: flex;
|
|
|
- padding: 5px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .message_str {
|
|
|
- border: 1px solid #000;
|
|
|
- padding: 5px;
|
|
|
- width: max-content;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.chat_history_div {
|
|
|
- height: max-content;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .user_info {
|
|
|
- padding: 0 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .message {
|
|
|
- border: 1px solid #000;
|
|
|
- padding: 5px;
|
|
|
- width: max-content;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|