|
@@ -1,136 +0,0 @@
|
|
|
-<script setup name="consultationNotes">
|
|
|
-import {elementAddBody} from "@/utils/public";
|
|
|
-import {useDraggable} from '@vueuse/core'
|
|
|
-import {useZIndex} from "element-plus";
|
|
|
-
|
|
|
-
|
|
|
-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},
|
|
|
-})
|
|
|
-
|
|
|
-const content = ref('')
|
|
|
-
|
|
|
-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
|
|
|
-}
|
|
|
-
|
|
|
-const paddingData = () => {
|
|
|
- emits('paddingData', content.value)
|
|
|
- content.value = ''
|
|
|
-}
|
|
|
-
|
|
|
-const mainClick = () => {
|
|
|
- inputRef.value?.focus()
|
|
|
-}
|
|
|
-
|
|
|
-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="styleComp" v-show="!isMinimize && dialog" @click="mainClick">
|
|
|
-
|
|
|
- <header ref="dragRef" class="note_drag">
|
|
|
- 会诊笔记
|
|
|
- <div class="note_icon">
|
|
|
- <el-button icon="Minus" text @click="zoomInAndOut(true)"/>
|
|
|
- <el-button icon="Close" text @click="openOrClose(false)"/>
|
|
|
- </div>
|
|
|
- </header>
|
|
|
-
|
|
|
- <main class="note_body">
|
|
|
- <el-input resize="none"
|
|
|
- @click.stop
|
|
|
- ref="inputRef"
|
|
|
- :autosize="{ minRows: 10, maxRows: 20}"
|
|
|
- type="textarea" v-model="content"/>
|
|
|
- </main>
|
|
|
-
|
|
|
- <footer class="note_footer">
|
|
|
- <el-button text style="margin-right: 5px" @click="paddingData">填充</el-button>
|
|
|
- </footer>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-.note_main {
|
|
|
- position: fixed;
|
|
|
- height: 450px;
|
|
|
- width: 417px;
|
|
|
- background-color: rgb(241, 229, 201);
|
|
|
- z-index: var(--bj-z-index);
|
|
|
- box-shadow: rgba(0, 0, 0, 0.1) 0 2px 12px 0;
|
|
|
-
|
|
|
- flex-flow: column;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .note_drag {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- cursor: all-scroll;
|
|
|
- text-align: center;
|
|
|
- padding: 10px 0;
|
|
|
-
|
|
|
- .note_icon {
|
|
|
- position: absolute;
|
|
|
- width: max-content;
|
|
|
- padding: 5px;
|
|
|
- top: 0;
|
|
|
- right: 5px;
|
|
|
- cursor: default;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .note_body {
|
|
|
- width: 100%;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- textarea {
|
|
|
- width: 100%;
|
|
|
- background-color: rgb(241, 229, 201);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .note_footer {
|
|
|
- display: flex;
|
|
|
- padding: 5px 0;
|
|
|
- justify-content: end;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-</style>
|