分组设置

src/components/nursing-dashboard/RenderTable.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { magicApi } from "@/utils/database/magic-api-request";
+import { useResizeObserver } from "@vueuse/core";
+import { stringIsBlank } from "@/utils/blank-utils";
 
 defineOptions({
   name: "RenderTable",
@@ -15,32 +17,42 @@ const store = reactive({
   data: [],
   spans: [] as { span: HTMLSpanElement; code: string }[],
   business: new Set(),
+
+  businessData: {},
 });
 
-const dataMap = computed(() => {
-  const tmp = {};
-  store.data.forEach(item => {
-    tmp[item.code] = item;
+const divRaf = ref<HTMLDivElement>();
+
+useResizeObserver(divRaf, () => {
+  if (stringIsBlank(props.htmlData)) return;
+  nextTick(() => {
+    if (props.htmlData) renderTable(false);
   });
-  return tmp;
 });
 
-const divRaf = ref<HTMLDivElement>();
+async function replace(query = true) {
+  if (query) {
+    store.businessData = await magicApi({
+      url: "/public/dashboard/dataSource",
+      method: "post",
+      data: {
+        isSource: false,
+        business: Array.from(store.business.values()),
+        wardCode: props.wardCode,
+      },
+    })
+      .then(res => {
+        return res;
+      })
+      .catch(() => {
+        return {};
+      });
+  }
 
-async function replace() {
-  await magicApi({
-    url: "/public/dashboard/dataSource",
-    method: "post",
-    data: {
-      isSource: false,
-      business: Array.from(store.business.values()),
-      wardCode: props.wardCode,
-    },
-  }).then(res => {
-    store.spans.forEach(item => {
-      item.span.innerHTML = res[item.code] ?? "";
-    });
+  store.spans.forEach(item => {
+    item.span.innerHTML = store.businessData[item.code] ?? "";
   });
+
   await nextTick();
   store.spans.forEach(item => {
     const td = (item.span as Element).closest("td");
@@ -68,7 +80,7 @@ async function replace() {
 function getBusiness(spans: HTMLSpanElement[]) {
   spans.forEach(span => {
     const code = span.getAttribute("data-element-code");
-    span.innerHTML = dataMap.value?.[code]?.data || "";
+    span.innerHTML = "";
     store.business.add(code);
     store.spans.push({
       span,
@@ -77,7 +89,7 @@ function getBusiness(spans: HTMLSpanElement[]) {
   });
 }
 
-async function renderTable() {
+async function renderTable(query = true) {
   await nextTick();
   store.business = new Set();
   store.spans = [];
@@ -96,7 +108,7 @@ async function renderTable() {
       }
     });
   });
-  replace();
+  replace(query);
 }
 
 watch(

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

@@ -12,10 +12,24 @@ import { stringIsBlank } from "@/utils/blank-utils";
 const dashboardEditorRef = useCompShallowRef(IframeEditor);
 
 const store = reactive({
-  dataSource: [] as { code: string; name: string }[],
+  dataSource: [] as { code: string; name: string; group: string }[],
+  group: {},
   currentWard: null,
   wardList: [],
   currentTemplate: {} as null | TDashboardTemplate,
+  collapseValue: "",
+});
+
+const tmpGroupDataSource = computed(() => {
+  const tmp = {};
+  store.dataSource.forEach(item => {
+    if (tmp[item.group]) {
+      tmp[item.group].push(item);
+    } else {
+      tmp[item.group] = [item];
+    }
+  });
+  return tmp;
 });
 
 async function handleWardChange(code) {
@@ -37,7 +51,8 @@ onMounted(() => {
     data: { isSource: true },
   })
     .then(res => {
-      store.dataSource = res;
+      store.dataSource = res.data;
+      store.group = res.group;
     })
     .catch(() => {
       store.dataSource = [];
@@ -127,22 +142,29 @@ defineOptions({
         <div class="layout_main layout_container">
           <el-divider>数据源</el-divider>
           <div style="padding: 10px" class="layout_main">
-            <el-row :gutter="10">
-              <el-col
-                style="margin-top: 8px"
-                :span="24 / 3"
-                v-for="item in store.dataSource"
-                @click="
-                  () => {
-                    dashboardEditorRef.insert(item);
-                  }
-                "
+            <el-collapse>
+              <el-collapse-item
+                v-for="(value, key) in store.group"
+                :title="value"
               >
-                <el-tag size="large" style="width: 100%">
-                  {{ item.name }}
-                </el-tag>
-              </el-col>
-            </el-row>
+                <el-row :gutter="10">
+                  <el-col
+                    style="margin-top: 8px"
+                    :span="24 / 3"
+                    v-for="item in tmpGroupDataSource[key]"
+                    @click="
+                      () => {
+                        dashboardEditorRef.insert(item);
+                      }
+                    "
+                  >
+                    <el-tag size="large" style="width: 100%">
+                      {{ item.name }}
+                    </el-tag>
+                  </el-col>
+                </el-row>
+              </el-collapse-item>
+            </el-collapse>
           </div>
         </div>
       </div>