web_dist/src/components/zhu-yuan-yi-sheng/emr/web-socket/EmrChatBox.vue

<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>