|
@@ -1,17 +1,15 @@
|
|
|
<script setup name="consultationNotes">
|
|
|
import {elementAddBody} from "@/utils/public";
|
|
|
import {useDraggable} from '@vueuse/core'
|
|
|
+import {useZIndex} from "element-plus";
|
|
|
|
|
|
-const emits = defineEmits(['paddingData'])
|
|
|
|
|
|
+const emits = defineEmits(['paddingData'])
|
|
|
const divRef = ref(null)
|
|
|
const dragRef = ref(null)
|
|
|
-
|
|
|
const dialog = ref(false)
|
|
|
-
|
|
|
const inputRef = ref(null)
|
|
|
|
|
|
-
|
|
|
const {x, y, style} = useDraggable(dragRef, {
|
|
|
initialValue: {x: 50, y: 120},
|
|
|
})
|
|
@@ -22,6 +20,10 @@ const openOrClose = (val) => {
|
|
|
dialog.value = val
|
|
|
}
|
|
|
|
|
|
+const styleComp = computed(() => {
|
|
|
+ return style.value + `--bj-z-index:${zIndex.value};`
|
|
|
+})
|
|
|
+
|
|
|
const isMinimize = ref(false)
|
|
|
const zoomInAndOut = (val) => {
|
|
|
isMinimize.value = val
|
|
@@ -36,16 +38,29 @@ const mainClick = () => {
|
|
|
inputRef.value?.focus()
|
|
|
}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
+const zIndex = ref(useZIndex().currentZIndex.value + 1)
|
|
|
+
|
|
|
+let watchIndex
|
|
|
+
|
|
|
+onActivated(() => {
|
|
|
elementAddBody(divRef.value)
|
|
|
+ watchIndex = watch(() => useZIndex().currentZIndex.value, () => {
|
|
|
+ zIndex.value = useZIndex().currentZIndex.value + 1
|
|
|
+ })
|
|
|
})
|
|
|
|
|
|
+onDeactivated(() => {
|
|
|
+ document.body.removeChild(divRef.value)
|
|
|
+ watchIndex && watchIndex()
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
|
|
|
<el-button @click="openOrClose(true)">笔记</el-button>
|
|
|
- <div ref="divRef" class="note_main" :style="style" v-show="!isMinimize && dialog" @click="mainClick">
|
|
|
+ <div ref="divRef" class="note_main" :style="styleComp" v-show="!isMinimize && dialog" @click="mainClick">
|
|
|
|
|
|
<header ref="dragRef" class="note_drag">
|
|
|
会诊笔记
|
|
@@ -57,8 +72,8 @@ onMounted(() => {
|
|
|
|
|
|
<main class="note_body">
|
|
|
<el-input resize="none"
|
|
|
+ @click.stop
|
|
|
ref="inputRef"
|
|
|
- @click="mainClick"
|
|
|
:autosize="{ minRows: 10, maxRows: 20}"
|
|
|
type="textarea" v-model="content"/>
|
|
|
</main>
|
|
@@ -72,30 +87,12 @@ onMounted(() => {
|
|
|
</template>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.minimize_body {
|
|
|
- line-height: 10px;
|
|
|
- width: max-content;
|
|
|
- position: fixed;
|
|
|
- bottom: 5px;
|
|
|
- left: 20px;
|
|
|
- z-index: 99999999999999;
|
|
|
- background-color: #9db8d4;
|
|
|
- box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
|
|
|
- border-radius: 5px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-content: center;
|
|
|
- padding: 10px;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
.note_main {
|
|
|
position: fixed;
|
|
|
height: 450px;
|
|
|
width: 417px;
|
|
|
background-color: rgb(241, 229, 201);
|
|
|
- z-index: 99999999999999;
|
|
|
+ z-index: var(--bj-z-index);
|
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
|
|
|
|
|
|
flex-flow: column;
|