新增可以拖动的组件，一些小优化

src/components/cy/cy-el-tabs/CyElTableTest.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import CelTabs from "@/components/cy/cy-el-tabs/TabsResizer.vue";
+import CelTabPane from "@/components/cy/cy-el-tabs/TabPaneResizer.vue";
+
+const model = ref("ce");
+</script>
+
+<template>
+  <div style="height: 200px; display: flex">
+    <CelTabs v-model="model" value="300">
+      <CelTabPane name="ce" label="测试">
+        <div style="width: 1200px; height: 500px">asdsa</div>
+      </CelTabPane>
+      <CelTabPane name="c1e" label="测1试"></CelTabPane>
+    </CelTabs>
+    <div style="flex: 1">asdsa</div>
+    <CelTabs v-model="model" tab-position="right" value="300">
+      <CelTabPane name="ce" label="测试">
+        <div style="width: 1200px; height: 500px">asdsa</div>
+      </CelTabPane>
+      <CelTabPane name="c1e" label="测1试"></CelTabPane>
+    </CelTabs>
+  </div>
+</template>
+
+<style lang="scss"></style>

src/components/cy/cy-el-tabs/TabPaneResizer.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import MagicResizer from "@/components/cy/magic-resizer.vue";
+import { cyElTabsKey } from "@/components/cy/cy-el-tabs/index";
+import { toNumber } from "xe-utils";
+
+const props = defineProps<{
+  name?: string | number;
+  label?: string;
+  value?: string | number;
+  min?: string | number;
+  max?: string | number;
+}>();
+
+const root = inject(cyElTabsKey);
+
+const bindData = computed(() => {
+  const reverse = root.props.value.tabPosition === "right";
+
+  return {
+    direction: "x",
+    reverse,
+    value: toNumber(props.value ?? root.props.value.value),
+    min: toNumber(props.min ?? root.props.value.min),
+    max: toNumber(props.max ?? root.props.value.max),
+  };
+});
+</script>
+
+<template>
+  <el-tab-pane v-bind="$attrs" :label="props.label" :name="props.name">
+    <magic-resizer v-bind="bindData">
+      <div style="height: 100%; width: 100%; overflow: auto">
+        <slot></slot>
+      </div>
+    </magic-resizer>
+  </el-tab-pane>
+</template>
+
+<style lang="scss"></style>

src/components/cy/cy-el-tabs/TabsResizer.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+import { ElTabs } from "element-plus";
+import useCyTabs, { cyElTabsKey } from "@/components/cy/cy-el-tabs/index";
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number;
+    tabPosition?: "left" | "right" | "top" | "bottom";
+    min?: string | number;
+    max?: string | number;
+    value?: string | number;
+  }>(),
+  {
+    tabPosition: "left",
+    value: "400",
+    min: 100,
+    max: "500",
+  }
+);
+
+const store = useCyTabs(toRef(props));
+
+provide(cyElTabsKey, store);
+
+const emits = defineEmits(["update:modelValue"]);
+
+const model = useVModel(props, "modelValue", emits);
+const show = ref(true);
+
+const showClass = computed(() => {
+  return show.value ? "" : "cy-el-tabs-hide";
+});
+
+function handleClick(val) {
+  if (val.props.name === model.value) {
+    show.value = !show.value;
+  } else {
+    show.value = true;
+  }
+}
+</script>
+
+<template>
+  <el-tabs
+    v-model="model"
+    :tab-position="props.tabPosition"
+    type="border-card"
+    class="cy-el-tabs"
+    :class="showClass"
+    @tab-click="handleClick"
+  >
+    <slot />
+  </el-tabs>
+</template>
+
+<style lang="scss">
+.cy-el-tabs {
+  --el-tabs-header-height: 28px;
+}
+
+.el-tabs--left.cy-el-tabs,
+.el-tabs--right.cy-el-tabs {
+  height: 100%;
+  width: max-content;
+
+  > .el-tabs__header {
+    margin: 0;
+
+    .el-tabs__item {
+      padding: 5px 5px;
+      height: max-content;
+      writing-mode: vertical-rl;
+      text-orientation: upright;
+      user-select: none;
+    }
+  }
+
+  > .el-tabs__content {
+    padding: 5px;
+    height: 100%;
+
+    .el-tab-pane {
+      height: 100%;
+    }
+  }
+}
+
+.el-tabs--left.cy-el-tabs-hide,
+.el-tabs--right.cy-el-tabs-hide {
+  width: max-content;
+
+  > .el-tabs__header {
+    margin: 0;
+  }
+
+  > .el-tabs__content {
+    display: none;
+  }
+}
+</style>

src/components/cy/cy-el-tabs/index.ts

@@ -0,0 +1,20 @@
+const useCyTabs = props => {
+  const tmpProps = computed(() => {
+    const data = {
+      ...props.value,
+    };
+
+    if (typeof props.min === "undefined") {
+      data.min = props.value.value;
+    }
+
+    return data;
+  });
+
+  return { props: tmpProps };
+};
+export type CyTabs = ReturnType<typeof useCyTabs>;
+
+export const cyElTabsKey: InjectionKey<CyTabs> = Symbol("cyElTabsKey");
+
+export default useCyTabs;

src/components/cy/magic-resizer.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :class="`magic-resizer-${this.direction}`" :style="style">
+    <slot></slot>
+    <div
+      class="magic-resizer-event"
+      :class="{ reverse }"
+      @mousedown="mousedown"
+      ref="resizer"
+    ></div>
+  </div>
+</template>
+<script>
+import { ref } from "vue";
+
+export default {
+  props: {
+    max: Number,
+    min: Number,
+    value: Number,
+    direction: String,
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const style = ref({
+      [props.direction === "x" ? "width" : "height"]:
+        (props.value || props.min) + "px",
+    });
+    return {
+      style,
+    };
+  },
+  mounted() {
+    new ResizeObserver(this.updateCss).observe(this.$refs.resizer);
+  },
+  methods: {
+    updateCss() {
+      try {
+        const element = this.$refs.resizer.parentElement;
+        this.$refs.resizer.style.setProperty(
+          "--width",
+          element.offsetWidth + "px"
+        );
+        this.$refs.resizer.style.setProperty(
+          "--height",
+          element.offsetHeight + "px"
+        );
+      } catch (error) {}
+    },
+    mousedown(event) {
+      const horizontal = this.direction === "x";
+      const start = horizontal ? event.clientX : event.clientY;
+      const rect = event.target.parentElement.getBoundingClientRect();
+      document.onmousemove = e => {
+        let delta = horizontal ? rect.width : rect.height;
+        if (horizontal) {
+          if (this.reverse) {
+            delta = start - e.clientX + rect.width;
+          } else {
+            delta = e.clientX - start + rect.width;
+          }
+        } else {
+          if (this.reverse) {
+            delta = e.clientY - start + rect.height;
+          } else {
+            delta = start - e.clientY + rect.height;
+          }
+        }
+        if (delta >= this.min && delta <= this.max) {
+          this.style[horizontal ? "width" : "height"] = `${delta}px`;
+        }
+      };
+      document.onmouseup = () => {
+        document.onmousemove = document.onmouseup = null;
+      };
+      event.stopPropagation();
+      event.preventDefault();
+    },
+  },
+};
+</script>
+<style scoped>
+.magic-resizer-x,
+.magic-resizer-y {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  transition: none;
+}
+
+.magic-resizer-event {
+  position: absolute;
+  z-index: 20;
+  --width: 100%;
+  --height: 100%;
+}
+
+.magic-resizer-event::after {
+  content: " ";
+  position: fixed;
+  z-index: 9999;
+}
+
+.magic-resizer-x .magic-resizer-event {
+  width: 15px;
+  height: 100%;
+  right: -15px;
+  cursor: col-resize;
+}
+
+.magic-resizer-x .magic-resizer-event::after {
+  width: 10px;
+  height: var(--height);
+}
+
+.magic-resizer-x .magic-resizer-event.reverse {
+  right: unset;
+  left: -5px;
+}
+
+.magic-resizer-x {
+  height: 100%;
+}
+
+.magic-resizer-y .magic-resizer-event {
+  height: 10px;
+  width: 100%;
+  top: -5px;
+  cursor: row-resize;
+}
+
+.magic-resizer-y .magic-resizer-event::after {
+  height: 10px;
+  width: var(--width);
+}
+</style>

src/components/cy/tabs/TabsTest.vue

@@ -1,155 +1,138 @@
 <template>
+  <div style="height: 100%; width: 100%; overflow: auto">
+    <el-button @click="测试()">测试</el-button>
+    <CyTabs v-model="test" closable foldable type="idea" height="200">
+      <CyTabPane name="撒旦1111" label="撒旦1111">
+        <div style="width: 1200px; height: 500px"></div>
+        <el-input v-model="a.b" style="width: 120px" />
+      </CyTabPane>
+      <CyTabPane name="撒旦2222" label="撒旦2222">
+        <el-input v-model="a.c" style="width: 120px" />
+      </CyTabPane>
 
+      <CyTabPane v-for="item in list" :name="item.name" :label="item.label">
+        {{ item }}
+        <el-input v-model="a[`name${item.i}`]" style="width: 120px" />
+      </CyTabPane>
+    </CyTabs>
 
-  <div style="height: 100% ; width: 100% ; overflow: auto">
-    <el-button @click="测试">测试</el-button>
-    {{ a }}
-<!--    <CyTabs v-model="test" closable foldable type="idea" height="200">-->
-<!--      <CyTabPane name="撒旦1111" label="撒旦1111">-->
-<!--        <div style="width: 1200px; height: 500px">-->
-
-<!--        </div>-->
-<!--        <el-input v-model="a.b" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-<!--      <CyTabPane name="撒旦2222" label="撒旦2222">-->
-<!--        <el-input v-model="a.c" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-
-<!--      <CyTabPane v-for="item in list" :name="item.name" :label="item.label">-->
-<!--        {{ item }}-->
-<!--        <el-input v-model=" a[`name${item.i}`]" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-<!--    </CyTabs>-->
-
-<!--    <CyTabs v-model="test" closable foldable height="200">-->
-<!--      <CyTabPane name="撒旦1111" label="撒旦1111">-->
-<!--        <div style="width: 1200px; height: 500px">-->
-
-<!--        </div>-->
-<!--        <el-input v-model="a.b" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-<!--      <CyTabPane name="撒旦2222" label="撒旦2222">-->
-<!--        <el-input v-model="a.c" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-
-<!--      <CyTabPane v-for="item in list" :name="item.name" :label="item.label">-->
-<!--        {{ item }}-->
-<!--        <el-input v-model=" a[`name${item.i}`]" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-<!--    </CyTabs>-->
-
-
-<!--    <CyTabs v-model="test" closable foldable type="idea" height="200" tab-position="bottom">-->
-<!--      <CyTabPane name="撒旦1111" label="撒旦1111">-->
-<!--        <div style="width: 1200px; height: 500px">-->
-
-<!--        </div>-->
-<!--        <el-input v-model="a.b" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-<!--      <CyTabPane name="撒旦2222" label="撒旦2222">-->
-<!--        <el-input v-model="a.c" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-
-<!--      <CyTabPane v-for="item in list" :name="item.name" :label="item.label">-->
-<!--        {{ item }}-->
-<!--        <el-input v-model=" a[`name${item.i}`]" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-<!--    </CyTabs>-->
-
-<!--    <CyTabs v-model="test" closable foldable height="200" tab-position="bottom">-->
-<!--      <CyTabPane name="撒旦1111" label="撒旦1111">-->
-<!--        <div style="width: 1200px; height: 500px">-->
-
-<!--        </div>-->
-<!--        <el-input v-model="a.b" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-<!--      <CyTabPane name="撒旦2222" label="撒旦2222">-->
-<!--        <el-input v-model="a.c" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-
-<!--      <CyTabPane v-for="item in list" :name="item.name" :label="item.label">-->
-<!--        {{ item }}-->
-<!--        <el-input v-model=" a[`name${item.i}`]" style="width: 120px"/>-->
-<!--      </CyTabPane>-->
-<!--    </CyTabs>-->
+    <CyTabs v-model="test" closable foldable height="200">
+      <CyTabPane name="撒旦1111" label="撒旦1111">
+        <div style="width: 1200px; height: 500px"></div>
+        <el-input v-model="a.b" style="width: 120px" />
+      </CyTabPane>
+      <CyTabPane name="撒旦2222" label="撒旦2222">
+        <el-input v-model="a.c" style="width: 120px" />
+      </CyTabPane>
 
+      <CyTabPane v-for="item in list" :name="item.name" :label="item.label">
+        {{ item }}
+        <el-input v-model="a[`name${item.i}`]" style="width: 120px" />
+      </CyTabPane>
+    </CyTabs>
 
-    <CyTabs v-model="test" closable foldable height="200" tab-position="left">
+    <CyTabs
+      v-model="test"
+      closable
+      foldable
+      type="idea"
+      height="200"
+      tab-position="bottom"
+    >
       <CyTabPane name="撒旦1111" label="撒旦1111">
-        <div style="width: 1200px; height: 500px">
-
-        </div>
-        <el-input v-model="a.b" style="width: 120px"/>
+        <div style="width: 1200px; height: 500px"></div>
+        <el-input v-model="a.b" style="width: 120px" />
       </CyTabPane>
       <CyTabPane name="撒旦2222" label="撒旦2222">
-        <el-input v-model="a.c" style="width: 120px"/>
+        <el-input v-model="a.c" style="width: 120px" />
       </CyTabPane>
 
       <CyTabPane v-for="item in list" :name="item.name" :label="item.label">
         {{ item }}
-        <el-input v-model=" a[`name${item.i}`]" style="width: 120px"/>
+        <el-input v-model="a[`name${item.i}`]" style="width: 120px" />
       </CyTabPane>
     </CyTabs>
 
-
-    <CyTabs v-model="test" closable foldable height="200" tab-position="right">
+    <CyTabs v-model="test" closable foldable height="200" tab-position="bottom">
       <CyTabPane name="撒旦1111" label="撒旦1111">
-        <div style="width: 1200px; height: 500px">
-
-        </div>
-        <el-input v-model="a.b" style="width: 120px"/>
+        <div style="width: 1200px; height: 500px"></div>
+        <el-input v-model="a.b" style="width: 120px" />
       </CyTabPane>
       <CyTabPane name="撒旦2222" label="撒旦2222">
-        <el-input v-model="a.c" style="width: 120px"/>
+        <el-input v-model="a.c" style="width: 120px" />
       </CyTabPane>
 
       <CyTabPane v-for="item in list" :name="item.name" :label="item.label">
         {{ item }}
-        <el-input v-model=" a[`name${item.i}`]" style="width: 120px"/>
+        <el-input v-model="a[`name${item.i}`]" style="width: 120px" />
       </CyTabPane>
     </CyTabs>
 
+    <CyTabs v-model="test" closable foldable height="200" tab-position="left">
+      <CyTabPane name="撒旦1111" label="撒旦1111">
+        <div style="width: 1200px; height: 500px"></div>
+        <el-input v-model="a.b" style="width: 120px" />
+      </CyTabPane>
+      <CyTabPane name="撒旦2222" label="撒旦2222">
+        <el-input v-model="a.c" style="width: 120px" />
+      </CyTabPane>
 
-  </div>
+      <CyTabPane v-for="item in list" :name="item.name" :label="item.label">
+        {{ item }}
+        <el-input v-model="a[`name${item.i}`]" style="width: 120px" />
+      </CyTabPane>
+    </CyTabs>
 
+    <CyTabs v-model="test" closable foldable height="200" tab-position="right">
+      <CyTabPane name="撒旦1111" label="撒旦1111">
+        <div style="width: 1200px; height: 500px"></div>
+        <el-input v-model="a.b" style="width: 120px" />
+      </CyTabPane>
+      <CyTabPane name="撒旦2222" label="撒旦2222">
+        <el-input v-model="a.c" style="width: 120px" />
+      </CyTabPane>
 
+      <CyTabPane v-for="item in list" :name="item.name" :label="item.label">
+        {{ item }}
+        <el-input v-model="a[`name${item.i}`]" style="width: 120px" />
+      </CyTabPane>
+    </CyTabs>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import CyTabs from "@/components/cy/tabs/src/CyTabs.tsx";
 import CyTabPane from "@/components/cy/tabs/src/CyTabPane.vue";
 
-
-const test = ref('撒旦1111')
+const test = ref("撒旦1111");
 
 const a = reactive({
-  b: '11'
-})
+  b: "11",
+});
 
-const divTransmission = ref()
+const divTransmission = ref();
 
 function closeEvent(name) {
-  if (name === '撒旦1111') {
-    return true
+  if (name === "撒旦1111") {
+    return true;
   }
-  return false
+  return false;
 }
 
-const list = ref([])
+const list = ref([]);
 
 const 测试 = () => {
   if (list.value.length > 0) {
-    list.value = []
+    list.value = [];
   } else {
     for (let i = 0; i < 2; i++) {
-      a[`name${i}`] = ''
+      a[`name${i}`] = "";
       list.value.push({
-        name: i + 'name',
-        label: i + 'label',
-        i: 'name' + i
-      })
+        name: i + "name",
+        label: i + "label",
+        i: "name" + i,
+      });
     }
   }
-}
-
+};
 </script>

src/components/cy/tabs/style/index.scss

@@ -1,11 +1,10 @@
-
 .cy-tabs__tab-position_left {
   display: flex;
   background-color: white;
   border: 1px solid var(--main-border-color);
   box-sizing: border-box;
 
-  .cy-tabs__header {
+  > .cy-tabs__header {
     background-color: #f2f2f2;
     box-sizing: border-box;
 
@@ -25,7 +24,7 @@
     }
   }
 
-  .cy-tabs__content {
+  > .cy-tabs__content {
     box-sizing: border-box;
     flex: 1;
     padding: var(--content-padding);
@@ -41,7 +40,7 @@
   box-sizing: border-box;
   width: 0;
 
-  .cy-tabs__header {
+  > .cy-tabs__header {
     background-color: #f2f2f2;
     border-right: 1px solid var(--main-border-color);
     box-sizing: border-box;
@@ -62,7 +61,7 @@
     }
   }
 
-  .cy-tabs__content {
+  > .cy-tabs__content {
     flex: 1;
     padding: var(--content-padding);
     border-radius: 0;
@@ -80,11 +79,11 @@
     padding: 0;
     border: 1px solid var(--main-border-color);
 
-    .cy-tabs__header {
+    > .cy-tabs__header {
       padding: 0;
     }
 
-    .cy-tabs__header-item {
+    > .cy-tabs__header-item {
 
       &.is-activation {
         color: black;
@@ -96,14 +95,14 @@
 
   &.cy-tabs--default {
 
-    .cy-tabs__header-item {
+    > .cy-tabs__header-item {
 
       &.is-activation {
         color: black;
       }
     }
 
-    .cy-tabs__content {
+    > .cy-tabs__content {
       box-sizing: border-box;
       margin-top: 5px;
       border-radius: 4px;
@@ -111,7 +110,7 @@
     }
   }
 
-  .cy-tabs__header {
+  > .cy-tabs__header {
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -154,7 +153,7 @@
     }
   }
 
-  .cy-tabs__content {
+  > .cy-tabs__content {
     padding: var(--content-padding);
     border-width: 1px;
     background: hsl(0 0% 100%);
@@ -173,11 +172,11 @@
     padding: 0;
     border: 1px solid var(--main-border-color);
 
-    .cy-tabs__header {
+    > .cy-tabs__header {
       padding: 0;
     }
 
-    .cy-tabs__header-item {
+    > .cy-tabs__header-item {
       &.is-activation {
         color: black;
         border-top: 2px solid var(--tab-selected-border-color);
@@ -188,13 +187,13 @@
 
   &.cy-tabs--default {
 
-    .cy-tabs__header-item {
+    > .cy-tabs__header-item {
       &.is-activation {
         color: black;
       }
     }
 
-    .cy-tabs__content {
+    > .cy-tabs__content {
       margin-bottom: 5px;
       border-radius: 4px;
       box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
@@ -202,7 +201,7 @@
   }
 
 
-  .cy-tabs__header {
+  > .cy-tabs__header {
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -248,7 +247,7 @@
     }
   }
 
-  .cy-tabs__content {
+  > .cy-tabs__content {
     flex: 1;
     padding: 8px;
     background: hsl(0 0% 100%);

src/css/element-plus-modify.scss

@@ -137,4 +137,4 @@
 
 .el-select_no-suffix .el-select__suffix {
   display: none;
-}
+}

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/EmrMain.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="layout_container">
     <div class="layout_main layout_container layout-horizontal">
-      <div style="width: max-content">
-        <EmrSidebar ref="emrSidebarRef" :doctor-grade="doctorLevel" />
-      </div>
+      <EmrSidebar ref="emrSidebarRef" :doctor-grade="doctorLevel" />
       <div class="layout_main layout_container">
         <div class="emr_div-tabs">
           <template v-for="(value, key) in IframeTabs">

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/components/EmrSidebar.tsx

@@ -1,8 +1,6 @@
 // @ts-nocheck
 import { computed, defineComponent, h, onMounted, ref } from "vue";
-import CyTabs from "@/components/cy/tabs/src/CyTabs";
 // @ts-ignore
-import CyTabPane from "@/components/cy/tabs/src/CyTabPane.vue";
 import { ElIcon, ElInput, ElTree, ElTreeV2 } from "element-plus";
 import { useCompRef } from "@/utils/useCompRef";
 import { TreeNodeData } from "element-plus/es/components/tree/src/tree.type";
@@ -36,6 +34,8 @@ import PatientHistoryData from "@/components/zhu-yuan-yi-sheng/emr/emr-template/
 import CyFlex from "@/components/cy/flex/src/CyFlex.vue";
 import { useUserStore } from "@/pinia/user-store";
 import { emrRootContextKey } from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-func/useEmrStore";
+import TabsResizer from "@/components/cy/cy-el-tabs/TabsResizer.vue";
+import TabPaneResizer from "@/components/cy/cy-el-tabs/TabPaneResizer.vue";
 
 const defaultProps = {
   children: "children",
@@ -150,7 +150,6 @@ const EmrSidebar = defineComponent({
     let wardList: (string | undefined)[] = [];
     const hisData = ref([]);
     const mzHisDate = ref([]);
-    const sidebarRef = ref();
 
     function queryData() {
       return getPatientDataTree(
@@ -361,57 +360,36 @@ const EmrSidebar = defineComponent({
 
     return () => {
       return (
-        <div ref={sidebarRef} style={{ height: "100%" }}>
-          <CyTabs
-            tabPosition="left"
-            foldable
-            contentPadding={3}
-            height="100%"
-            width={220}
-            modelValue={templateType.value}
-            onUpdate:modelValue={val => (templateType.value = val)}
-          >
-            {{
-              default: () => [
-                <CyTabPane label="全院" name={0}>
-                  {{
-                    default: () => (
-                      <HospitalTemplate
-                        data={returnData.value.emrTree}
-                        onNodeClick={template}
-                      />
-                    ),
-                  }}
-                </CyTabPane>,
-                <CyTabPane label="科室" name={1}>
-                  {{
-                    default: () => (
-                      <HospitalTemplate
-                        onNodeClick={template}
-                        data={returnData.value.deptTree}
-                      />
-                    ),
-                  }}
-                </CyTabPane>,
-                <CyTabPane label="当前" name={2}>
-                  {{
-                    default: () => (
-                      <PatientEmrData
-                        onNodeClick={saveEmr}
-                        treeData={returnData.value.patientTree}
-                      />
-                    ),
-                  }}
-                </CyTabPane>,
-                <CyTabPane label="历史" name={3}>
-                  {{
-                    default: () => <PatientHistoryData data={hisComp.value} />,
-                  }}
-                </CyTabPane>,
-              ],
-            }}
-          </CyTabs>
-        </div>
+        <TabsResizer
+          value={220}
+          min={100}
+          max={500}
+          style={{ marginRight: "5px" }}
+          modelValue={templateType.value}
+          onUpdate:modelValue={val => (templateType.value = val)}
+        >
+          <TabPaneResizer label="全院" name={0}>
+            <HospitalTemplate
+              data={returnData.value.emrTree}
+              onNodeClick={template}
+            />
+          </TabPaneResizer>
+          <TabPaneResizer label="科室" name={1}>
+            <HospitalTemplate
+              onNodeClick={template}
+              data={returnData.value.deptTree}
+            />
+          </TabPaneResizer>
+          <TabPaneResizer label="当前" name={2}>
+            <PatientEmrData
+              onNodeClick={saveEmr}
+              treeData={returnData.value.patientTree}
+            />
+          </TabPaneResizer>
+          <TabPaneResizer label="历史" name={3}>
+            <PatientHistoryData data={hisComp.value} />
+          </TabPaneResizer>
+        </TabsResizer>
       );
     };
   },

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/components/emr-right/EmrRightComp.vue

@@ -1,18 +1,19 @@
 <template>
-  <CyTabs
+  <TabsResizer
+    :value="store.store.rightWidth"
     v-model="store.store.right"
+    style="margin-left: 5px"
+    min="100"
+    max="600"
     tab-position="right"
-    height="100%"
-    :width="store.store.rightWidth"
-    foldable
   >
-    <CyTabPane label="片段" name="fragment">
+    <TabPaneResizer label="片段" name="fragment">
       <EmrSnippet />
-    </CyTabPane>
-    <CyTabPane label="大纲" name="outline">
+    </TabPaneResizer>
+    <TabPaneResizer label="大纲" name="outline">
       <EmrOutline />
-    </CyTabPane>
-    <CyTabPane label="温馨提示" name="kindReminder">
+    </TabPaneResizer>
+    <TabPaneResizer label="温馨提示" name="kindReminder">
       <div
         v-for="(value, key) in kindReminder"
         class="kindReminder"
@@ -29,23 +30,22 @@
           {{ msg.message }}
         </div>
       </div>
-    </CyTabPane>
-    <CyTabPane label="辅助工具" name="auxiliaryTools">
+    </TabPaneResizer>
+    <TabPaneResizer label="辅助工具" name="auxiliaryTools">
       <slot name="auxiliaryTools" />
-    </CyTabPane>
-    <CyTabPane
+    </TabPaneResizer>
+    <TabPaneResizer
       v-for="item in store.store.rightComp"
       :label="item.name"
       :name="item.name"
+      v-bind="item.paneProps"
     >
       <Component :is="item.comp" :ref="el => (item.refValue = el)" />
-    </CyTabPane>
-  </CyTabs>
+    </TabPaneResizer>
+  </TabsResizer>
 </template>
 
 <script setup lang="ts">
-import CyTabs from "@/components/cy/tabs/src/CyTabs";
-import CyTabPane from "@/components/cy/tabs/src/CyTabPane.vue";
 import EmrSnippet from "./EmrSnippet.vue";
 import { Ref, ref } from "vue";
 import EmrOutline from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/components/emr-right/EmrOutline.vue";
@@ -55,6 +55,8 @@ import {
 } from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init";
 import XEUtils from "xe-utils";
 import { emrRootContextKey } from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-func/useEmrStore";
+import TabsResizer from "@/components/cy/cy-el-tabs/TabsResizer.vue";
+import TabPaneResizer from "@/components/cy/cy-el-tabs/TabPaneResizer.vue";
 
 const { store } = inject(emrRootContextKey);
 

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/plugins/ca/emr-ca.tsx

@@ -280,7 +280,9 @@ export function emrCa() {
     store.store.rightComp[rightCompIndex.ca] = {
       name: EmrRightTabs.ca,
       comp: shallowRef(defineAsyncComponent(() => import("./EmrCAComp.vue"))),
-      width: 400,
+      paneProps: {
+        value: 400,
+      },
     };
     setEmrComponentClick((evt, view, eleInfo, value) => {
       授权CA签名(evt, view, eleInfo, value).then(XEUtils.noop);

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-func/useEmrStore.ts

@@ -30,6 +30,13 @@ function getPlugins() {
   return tmp as Pl<typeof utilsPlugins>;
 }
 
+export type RightComp = {
+  name: string;
+  comp: any;
+  refValue?: any;
+  paneProps?: any;
+};
+
 export const useEmrStore = (patId: string) => {
   const patInfo = ref({});
   const emrPatientData = ref({});
@@ -49,12 +56,7 @@ export const useEmrStore = (patId: string) => {
     rightWidth: 220,
     courseJumpId: null,
     editor: null as EditType,
-    rightComp: [] as {
-      name: string;
-      comp: any;
-      refValue?: any;
-      width?: number;
-    }[],
+    rightComp: [] as RightComp[],
     // 病历的名称
     templateName: "",
     // 病历的编码
@@ -65,16 +67,6 @@ export const useEmrStore = (patId: string) => {
     isEditorChange: false,
   });
 
-  watch(
-    () => store.right,
-    () => {
-      const find = store.rightComp.find(item => {
-        return item.name === store.right;
-      });
-      store.rightWidth = find ? (find?.width ?? 220) : 220;
-    }
-  );
-
   const plugins = getPlugins();
   const editFun = emrFunUtils();