优化护理看板

static/editor.html → public/static/editor.html

@@ -46,19 +46,25 @@
     handleSaveFunc = cb;
   }
 
+  function handleEnter(e) {
+    if (e.keyCode === 13) {
+      e.preventDefault();
+      tinymce.activeEditor.execCommand("mceInsertContent", false, "<div class=\"edl-paragraph\"><span class=\"edl-node edl-text\"></span></div>"); // 插入自定义标签
+    }
+  }
+
   tinymce.init({
     selector: "#editor",
     language: "zh_CN",
     menubar: false,   // 隐藏顶部菜单栏
     statusbar: false, // 隐藏底部状态栏
-    plugins: "table autoresize save",
     content_style: `
     .unbreakable-span {
       -webkit-user-modify: read-only;
       user-modify: read-only;
       -moz-user-modify: read-only;
       cursor: default;
-       background-color: #409EFF;
+      background-color: #409EFF;
       border: 1px dashed #ccc;
     }
 
@@ -66,9 +72,14 @@
       margin: 0
     }
   `,
+    forced_root_block: "div",
+    plugins: "table autoresize save",
     toolbar: "save | undo redo | table | tablemergecells tablesplitcells | tableprops tablerowprops tablecellprops",
     setup: function(editor) {
-      // 可以初始化设置
+      editor.on("keydown", function(e, ...tmp) {
+        console.log(e, tmp);
+        // handleEnter(e);
+      });
     },
     save_onsavecallback: function() {
       const editor = tinymce.activeEditor;
@@ -86,11 +97,9 @@
   }
 
   function insert({ code, name }) {
-    tinymce.activeEditor.insertContent(`
-   <span class="unbreakable-span" data-element-box>
+    tinymce.activeEditor.insertContent(`<a class="unbreakable-span" data-element-box>
       <span data-element-code="${code}">${name}</span>
-    </span>
-`);
+    </a>`);
   }
 
   function setHtml(html) {

src/components/nursing-dashboard/RenderTable.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 const store = reactive({
   htmlData: "",
   data: [],
-  spans: [] as { span: HTMLSpanElement; code: string },
+  spans: [] as { span: HTMLSpanElement; code: string }[],
   business: new Set(),
 });
 
@@ -27,8 +27,8 @@ const dataMap = computed(() => {
 
 const divRaf = ref<HTMLDivElement>();
 
-function replace() {
-  magicApi({
+async function replace() {
+  await magicApi({
     url: "/public/dashboard/dataSource",
     method: "post",
     data: {
@@ -41,6 +41,28 @@ function replace() {
       item.span.innerHTML = res[item.code] ?? "";
     });
   });
+  await nextTick();
+  store.spans.forEach(item => {
+    const td = (item.span as Element).closest("td");
+    if (td == null) {
+      return;
+    }
+    if (!(td.className as string).includes("td-text_hidden")) {
+      td.className += " td-text_hidden " + td.className;
+    }
+
+    if (td.clientWidth !== td.scrollWidth) {
+      const marqueeDiv = document.createElement("div");
+      marqueeDiv.className = "marquee";
+      marqueeDiv.style.setProperty(
+        "--translate-scroll-px",
+        `-${td.scrollWidth}px`
+      );
+      marqueeDiv.innerHTML = td.innerHTML;
+      td.innerHTML = "";
+      td.appendChild(marqueeDiv);
+    }
+  });
 }
 
 function getBusiness(spans: HTMLSpanElement[]) {
@@ -69,6 +91,7 @@ async function renderTable() {
     tds.forEach(td => {
       const business = td.querySelectorAll("span[data-element-code]");
       if (business.length > 0) {
+        // @ts-ignore
         getBusiness(business);
       }
     });
@@ -114,5 +137,27 @@ defineExpose({
     border: 1px solid white;
     text-align: center !important;
   }
+
+  .td-text_hidden {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .marquee {
+    white-space: nowrap; /* 不换行 */
+    animation: marquee 10s linear infinite; /* 动画效果 */
+    line-height: 100%;
+    text-align: center;
+  }
+
+  @keyframes marquee {
+    0% {
+      transform: translateX(0px);
+    }
+    100% {
+      transform: translateX(var(--translate-scroll-px));
+    }
+  }
 }
 </style>

src/views/settings/dashboard-editor/index.vue

@@ -5,10 +5,7 @@ import { magicApi } from "@/utils/database/magic-api-request";
 import { getAllWards } from "@/api/login";
 import XcElOption from "@/components/xiao-chan/xc-el-option/XcElOption.vue";
 import * as api from "@/api/dashboardEditor/dashboardEditor";
-import {
-  release,
-  TDashboardTemplate,
-} from "@/api/dashboardEditor/dashboardEditor";
+import { type TDashboardTemplate } from "@/api/dashboardEditor/dashboardEditor";
 import { BizException, ExceptionEnum } from "@/utils/BizException";
 import { stringIsBlank } from "@/utils/blank-utils";
 
@@ -82,7 +79,7 @@ async function handleRelease() {
   if (stringIsBlank(store.currentTemplate?.id)) {
     BizException(ExceptionEnum.MESSAGE_ERROR, "请先保存");
   }
-  await release(store.currentTemplate.id);
+  await api.release(store.currentTemplate.id);
 }
 
 function handlePreview() {
@@ -108,7 +105,7 @@ defineOptions({
           <el-alert
             type="error"
             effect="dark"
-            title="一定不要在数据源后面按下回车不然会有两个数据源，列宽可能拖动，但是列高不行，因为高度是不确定的，发布后才能看到效果。"
+            title="列宽可能拖动，但是列高不行，因为高度是不确定的，发布后才能看到效果。"
             :closable="false"
           ></el-alert>
           <el-form style="width: 100%">
@@ -156,7 +153,4 @@ defineOptions({
   </div>
 </template>
 
-<style lang="scss">
-.dashboard-editor-aside-card {
-}
-</style>
+<style lang="scss"></style>

src/views/single-page/InpatientBoardV2/BoardTable.vue

@@ -1,166 +0,0 @@
-<script setup lang="ts">
-import {
-  InpatientBoardKey,
-  type InpatientBoardType,
-} from "@/views/single-page/InpatientBoardV2/index";
-
-const store = inject(InpatientBoardKey) as InpatientBoardType;
-</script>
-
-<template>
-  <table>
-    <tbody>
-      <tr>
-        <td>病人总数</td>
-        <td>{{ store.data.value.length }}人</td>
-        <td>病危</td>
-        <td></td>
-        <td>病重</td>
-        <td></td>
-        <td>绝对卧床</td>
-        <td colspan="2"></td>
-        <td>值班医生</td>
-        <td></td>
-      </tr>
-      <tr>
-        <td>今日手术</td>
-        <td></td>
-        <td>明日手术</td>
-        <td></td>
-        <td>入院</td>
-        <td colspan="2"></td>
-        <td>出院</td>
-        <td colspan="3"></td>
-      </tr>
-      <tr>
-        <td>省职</td>
-        <td colspan="4"></td>
-        <td>异地</td>
-        <td colspan="5"></td>
-      </tr>
-      <tr>
-        <td>城居</td>
-        <td colspan="10"></td>
-      </tr>
-      <tr>
-        <td>城职</td>
-        <td colspan="10"></td>
-      </tr>
-      <tr>
-        <td>一级护理</td>
-        <td colspan="10"></td>
-      </tr>
-      <tr>
-        <td>二级护理</td>
-        <td colspan="10"></td>
-      </tr>
-      <tr>
-        <td>心电监护</td>
-        <td colspan="4"></td>
-        <td>中心吸氧</td>
-        <td colspan="5"></td>
-      </tr>
-      <tr>
-        <td>今日手术</td>
-        <td colspan="4"></td>
-        <td>明日手术</td>
-        <td colspan="5"></td>
-      </tr>
-      <tr>
-        <td>灌肠</td>
-        <td>今晚</td>
-        <td></td>
-        <td>明晨</td>
-        <td></td>
-        <td>膀胱冲洗</td>
-        <td></td>
-        <td>PPD皮试</td>
-        <td></td>
-        <td>血液隔离</td>
-        <td></td>
-      </tr>
-      <tr>
-        <td>口腔护理</td>
-        <td colspan="4"></td>
-        <td>会阴护理</td>
-        <td colspan="5"></td>
-      </tr>
-      <tr>
-        <td>吸痰护理</td>
-        <td colspan="4"></td>
-        <td>造口护理</td>
-        <td colspan="5"></td>
-      </tr>
-      <tr>
-        <td>血糖</td>
-        <td>BG</td>
-        <td colspan="3"></td>
-        <td>Tid</td>
-        <td></td>
-        <td>Q6h</td>
-        <td></td>
-        <td>Qd</td>
-        <td></td>
-      </tr>
-      <tr>
-        <td>血压</td>
-        <td>QD</td>
-        <td colspan="3"></td>
-        <td>Bid</td>
-        <td colspan="5"></td>
-      </tr>
-      <tr>
-        <td>血压</td>
-        <td>Tid</td>
-        <td colspan="3"></td>
-        <td>Q4h</td>
-        <td></td>
-        <td>Q6h</td>
-        <td></td>
-        <td>Q8h</td>
-        <td></td>
-      </tr>
-      <tr>
-        <td>24h出入量</td>
-        <td>24h尿量</td>
-        <td></td>
-        <td>24h出量</td>
-        <td></td>
-        <td>24h入量</td>
-        <td></td>
-        <td colspan="2">24h引流管出量</td>
-        <td colspan="2"></td>
-      </tr>
-      <tr>
-        <td>中长导管</td>
-        <td></td>
-        <td>CVC</td>
-        <td></td>
-        <td>PICC</td>
-        <td></td>
-        <td>过敏史</td>
-        <td colspan="4"></td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<style scoped>
-table {
-  width: 100%;
-  border-collapse: collapse;
-  border: 1px solid white;
-  height: 100%;
-  table-layout: fixed;
-}
-
-td,
-td {
-  border: 1px solid white;
-  text-align: center;
-}
-
-td {
-  //background-color: #f2f2f2;
-}
-</style>

src/views/single-page/InpatientBoardV2/index.ts

@@ -287,7 +287,7 @@ export function useInpatientBoard() {
     urlQuery.speedBarDisplay = XEUtils.toNumber(
       XEUtils.get(query, "speedBarDisplay", 3)
     );
-    urlQuery.tempId = query.tempId;
+    urlQuery.tempId = query.tempId as string;
     urlQuery.refresh = XEUtils.toNumber(XEUtils.get(query, "refresh", 30));
     allWards.value = (await getAllWards()) as any;
     await sleep(500);