af-mobile-client-vue3 1.2.39 → 1.2.40

package/src/components/data/XFormGroup/index.vue

@@ -2,18 +2,20 @@
 import XForm from '@af-mobile-client-vue3/components/data/XForm/index.vue'
 import { getConfigByName } from '@af-mobile-client-vue3/services/api/common'
 import { Button as VanButton, Tab as VanTab, Tabs as VanTabs } from 'vant'
-import { defineEmits, defineProps, onBeforeMount, onMounted, ref, watch } from 'vue'
+import { computed, defineEmits, defineProps, onBeforeMount, onMounted, ref, useSlots, watch } from 'vue'
 
 const props = withDefaults(defineProps<{
   configName?: string
   serviceName?: string
   groupFormData?: object
   mode?: string
+  isScrollspy?: boolean
 }>(), {
   configName: '',
   serviceName: undefined,
   groupFormData: () => ({}),
   mode: '查询',
+  isScrollspy: true,
 })
 const emit = defineEmits(['submit'])
 
@@ -22,6 +24,7 @@ interface Form {
   serviceName?: string
   groupFormData?: object
   mode?: string
+  isScrollspy?: boolean
 }
 
 const groupItems = ref([])
@@ -30,7 +33,17 @@ const submitGroup = ref(false)
 const submitSimple = ref(false)
 const isInit = ref(false)
 const initStatus = ref(false)
-const propsData = ref<Form>({})
+const propsData = ref<Partial<Form>>({})
+
+const slots = useSlots()
+const renderableGroupItems = computed(() => {
+  return groupItems.value.filter((item) => {
+    if (item.formGroupType === 'slot') {
+      return !!(item.slotName && slots[item.slotName])
+    }
+    return true
+  })
+})
 
 // 组件初始化函数
 function init(params: Form) {
@@ -47,7 +60,7 @@ function init(params: Form) {
     if (result?.groups) {
       groupItems.value = result.groups
       result.groups.forEach((group) => {
-        if (!formData.value[group.groupName])
+        if (!formData.value[group.groupName] && group.formGroupType !== 'slot')
           formData.value[group.groupName] = {}
         if (group.showSubmitBtn)
           submitGroup.value = true
@@ -67,11 +80,39 @@ onBeforeMount(() => {
   if (!initStatus.value)
     init(props)
 })
-const xFormListRef = ref([])
+interface XFormLike {
+  validate: () => Promise<void>
+  formGroupName?: string
+  form?: any
+  getFormData?: () => object
+}
+const xFormListRef = ref<XFormLike[]>([])
+
+// 注册表单实例，避免重复
+function setRef(refValue: XFormLike) {
+  if (refValue && !xFormListRef.value.includes(refValue)) {
+    xFormListRef.value.push(refValue)
+  }
+}
+// 注销表单实例
+function removeRef(refValue: XFormLike) {
+  const idx = xFormListRef.value.indexOf(refValue)
+  if (idx !== -1)
+    xFormListRef.value.splice(idx, 1)
+}
+
 async function submit() {
   for (const res of xFormListRef.value) {
-    await res.validate()
-    formData.value[res.formGroupName] = res.form
+    try {
+      await res.validate()
+      if (res.formGroupName && typeof res.getFormData === 'function') {
+        formData.value[res.formGroupName] = res.getFormData()
+      }
+    }
+    catch (msg) {
+      console.log('error:', msg)
+      return
+    }
   }
   emit('submit', formData.value)
 }
@@ -84,14 +125,14 @@ onMounted(() => {
   offsetTop.value = Number.parseInt(navBarHeight, 10) || 60 + 10
 })
 
-defineExpose({ init })
+defineExpose({ init, removeRef, xFormListRef })
 </script>
 
 <template>
   <div v-if="isInit" id="x-form-group">
-    <VanTabs scrollspy sticky :offset-top="offsetTop">
+    <VanTabs :scrollspy="propsData.isScrollspy" sticky :offset-top="offsetTop">
       <VanTab
-        v-for="(item, index) in groupItems"
+        v-for="(item, index) in renderableGroupItems"
         :key="item.groupName ? (item.groupName + index) : index"
         :title="item.describe ? item.describe : item.tableName "
       >
@@ -99,17 +140,32 @@ defineExpose({ init })
           class="x-form-group-item"
           :class="{ 'is-last': index === groupItems.length - 1 }"
         >
-          <XForm
-            ref="xFormListRef"
-            :is-group-form="true"
-            :mode="props.mode"
-            :group-form-items="item"
-            :form-data="item.groupName ? formData[item.groupName] : formData"
-            :form-name="item.groupName"
-            :service-name="props.serviceName"
-            :submit-button="submitSimple"
-            @on-submit="submit"
-          />
+          <div v-if="item.describe && propsData.isScrollspy && (item.groupName || item.slotName)" class="form-group-title">
+            <span class="form-group-bar" />
+            <span class="form-group-text">{{ item.describe }}</span>
+          </div>
+          <template v-if="item.formGroupType === 'slot'">
+            <slot
+              :name="item.slotName"
+              :item="item"
+              :form-data="item.groupName ? formData[item.groupName] : formData"
+              :set-ref="setRef"
+              :remove-ref="removeRef"
+            />
+          </template>
+          <template v-else>
+            <XForm
+              ref="xFormListRef"
+              :mode="props.mode"
+              :is-group-form="true"
+              :group-form-items="item"
+              :form-data="item.groupName ? formData[item.groupName] : formData"
+              :form-name="item.groupName"
+              :service-name="props.serviceName"
+              :submit-button="submitSimple"
+              @on-submit="submit"
+            />
+          </template>
         </div>
       </VanTab>
     </VanTabs>
@@ -140,4 +196,25 @@ defineExpose({ init })
 .x-form-group-item.is-last {
   min-height: calc(100vh - var(--van-nav-bar-height) - 40px);
 }
+.form-group-title {
+  display: flex;
+  align-items: center;
+  padding-top: 12px;
+  background: none;
+  margin: 0 0 4px 0;
+}
+.form-group-bar {
+  width: 4px;
+  height: 20px;
+  background: #1989fa;
+  border-radius: 4px;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+.form-group-text {
+  font-weight: 600;
+  font-size: 15px;
+  color: #222;
+  letter-spacing: 0.5px;
+}
 </style>

package/src/components/data/XReportGrid/XReportDemo.vue

@@ -1,33 +1,33 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import XReport from './XReport.vue'
-
-const mainRef = ref()
-
-onMounted(() => {
-  // 初始化逻辑
-})
-</script>
-
-<template>
-  <div id="test">
-    <van-card :bordered="false">
-      <XReport
-        ref="mainRef"
-        :use-oss-for-img="false"
-        config-name="nurseWorkstationCover"
-        server-name="af-his"
-        :show-img-in-cell="true"
-        :display-only="true"
-        :edit-mode="false"
-        :show-save-button="false"
-        :no-padding="true"
-        :dont-format="true"
-      />
-    </van-card>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import XReport from './XReport.vue'
+
+const mainRef = ref()
+
+onMounted(() => {
+  // 初始化逻辑
+})
+</script>
+
+<template>
+  <div id="test">
+    <van-card :bordered="false">
+      <XReport
+        ref="mainRef"
+        :use-oss-for-img="false"
+        config-name="nurseWorkstationCover"
+        server-name="af-his"
+        :show-img-in-cell="true"
+        :display-only="true"
+        :edit-mode="false"
+        :show-save-button="false"
+        :no-padding="true"
+        :dont-format="true"
+      />
+    </van-card>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/src/components/data/XReportGrid/print.js

@@ -1,184 +1,184 @@
-// print.js
-
-export function printElement(elementToPrint) {
-  // 创建一个新的浏览器窗口
-  const printWindow = window.open('', '_blank', 'height=1024,width=768')
-  // 设置新窗口的文档内容
-  printWindow.document.write(`
-    <html>
-      <head>
-        <title>Print</title>
-        <style>
-          @page {
-            size: auto;
-            margin: 0mm;
-          }
-          html, body {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-          }
-          #print-container {
-            display: none
-          }
-          .img{
-            width: 95%;
-            height: 180px;
-            object-fit: cover;
-          }
-          .reportMain {
-            text-align: center;
-            margin: 0 auto;
-            font-size: 16px;
-            color: #000;
-            background-color: #fff;
-            border-radius: 8px;
-
-            .reportTitle {
-              font-weight: bold;
-            }
-
-            .subTitle {
-              display: flex;
-              justify-content: space-between;
-              margin-bottom: 1%;
-
-              .subTitleItems {
-                max-width: 30%;
-              }
-            }
-
-            .inputsDiv {
-              display: flex;
-              justify-content: space-between;
-              .inputsDivItem {
-                display: flex;
-                align-items: center;
-                padding: 0 4px;
-                white-space: nowrap;
-                .inputsDivItemLabel {
-                  padding: 0 4px;
-                }
-              }
-            }
-
-            .reportTable {
-              width: 100%;
-              border-collapse: collapse;
-              table-layout:fixed;
-              word-break:break-all;
-              text-align: center;
-            }
-          }
-          .reportMainForDisplay {
-            text-align: center;
-            margin: 10% auto;
-            font-size: 16px;
-            color: #000;
-            background-color: #fff;
-            border-radius: 8px;
-
-            .reportTitle {
-              font-weight: bold;
-            }
-
-            .subTitle {
-              display: flex;
-              justify-content: space-between;
-
-              .subTitleItems {
-                max-width: 30%;
-              }
-            }
-
-            .inputsDiv {
-              display: flex;
-              justify-content: space-around;
-              .inputsDivItem {
-                display: flex;
-                align-items: center;
-                padding: 0 4px;
-                white-space: nowrap;
-                .inputsDivItemLabel {
-                  padding: 0 4px;
-                }
-              }
-            }
-
-            .reportTable {
-              width: 100%;
-              border-collapse: collapse;
-              table-layout:fixed;
-              word-break:break-all;
-            }
-          }
-          .reportMainNoPadding {
-            text-align: center;
-            margin: 0 auto;
-            font-size: 16px;
-            color: #000;
-            background-color: #fff;
-            border-radius: 8px;
-
-            .reportTitle {
-              font-weight: bold;
-            }
-
-            .subTitle {
-              display: flex;
-              justify-content: space-between;
-
-              .subTitleItems {
-                max-width: 30%;
-              }
-            }
-
-            .inputsDiv {
-              display: flex;
-              justify-content: space-between;
-              .inputsDivItem {
-                display: flex;
-                align-items: center;
-                padding: 0 4px;
-                white-space: nowrap;
-                .inputsDivItemLabel {
-                  padding: 0 4px;
-                }
-              }
-            }
-
-            .reportTable {
-              width: 100%;
-              border-collapse: collapse;
-              table-layout:fixed;
-              word-break:break-all;
-            }
-          }
-          .tools{
-            position: fixed;
-            right: 2%;
-            text-align: right;
-            width: 60%;
-            cursor: pointer;
-            .toolsItem{
-              width: 15%;
-              margin-right: 3%;
-              display: inline-block;
-            }
-          }
-        </style>
-      </head>
-      <body>
-        <!-- 将需要打印的元素内容复制到新窗口中 -->
-        ${elementToPrint.innerHTML}
-      </body>
-    </html>
-  `)
-  // 延迟执行打印，以确保新窗口的内容已加载完成
-  printWindow.document.close() // 关闭文档流，确保内容完全加载
-  setTimeout(() => {
-    printWindow.print() // 调用打印方法
-    printWindow.close()
-  }, 500) // 延迟500毫秒后执行打印
-}
+// print.js
+
+export function printElement(elementToPrint) {
+  // 创建一个新的浏览器窗口
+  const printWindow = window.open('', '_blank', 'height=1024,width=768')
+  // 设置新窗口的文档内容
+  printWindow.document.write(`
+    <html>
+      <head>
+        <title>Print</title>
+        <style>
+          @page {
+            size: auto;
+            margin: 0mm;
+          }
+          html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+          }
+          #print-container {
+            display: none
+          }
+          .img{
+            width: 95%;
+            height: 180px;
+            object-fit: cover;
+          }
+          .reportMain {
+            text-align: center;
+            margin: 0 auto;
+            font-size: 16px;
+            color: #000;
+            background-color: #fff;
+            border-radius: 8px;
+
+            .reportTitle {
+              font-weight: bold;
+            }
+
+            .subTitle {
+              display: flex;
+              justify-content: space-between;
+              margin-bottom: 1%;
+
+              .subTitleItems {
+                max-width: 30%;
+              }
+            }
+
+            .inputsDiv {
+              display: flex;
+              justify-content: space-between;
+              .inputsDivItem {
+                display: flex;
+                align-items: center;
+                padding: 0 4px;
+                white-space: nowrap;
+                .inputsDivItemLabel {
+                  padding: 0 4px;
+                }
+              }
+            }
+
+            .reportTable {
+              width: 100%;
+              border-collapse: collapse;
+              table-layout:fixed;
+              word-break:break-all;
+              text-align: center;
+            }
+          }
+          .reportMainForDisplay {
+            text-align: center;
+            margin: 10% auto;
+            font-size: 16px;
+            color: #000;
+            background-color: #fff;
+            border-radius: 8px;
+
+            .reportTitle {
+              font-weight: bold;
+            }
+
+            .subTitle {
+              display: flex;
+              justify-content: space-between;
+
+              .subTitleItems {
+                max-width: 30%;
+              }
+            }
+
+            .inputsDiv {
+              display: flex;
+              justify-content: space-around;
+              .inputsDivItem {
+                display: flex;
+                align-items: center;
+                padding: 0 4px;
+                white-space: nowrap;
+                .inputsDivItemLabel {
+                  padding: 0 4px;
+                }
+              }
+            }
+
+            .reportTable {
+              width: 100%;
+              border-collapse: collapse;
+              table-layout:fixed;
+              word-break:break-all;
+            }
+          }
+          .reportMainNoPadding {
+            text-align: center;
+            margin: 0 auto;
+            font-size: 16px;
+            color: #000;
+            background-color: #fff;
+            border-radius: 8px;
+
+            .reportTitle {
+              font-weight: bold;
+            }
+
+            .subTitle {
+              display: flex;
+              justify-content: space-between;
+
+              .subTitleItems {
+                max-width: 30%;
+              }
+            }
+
+            .inputsDiv {
+              display: flex;
+              justify-content: space-between;
+              .inputsDivItem {
+                display: flex;
+                align-items: center;
+                padding: 0 4px;
+                white-space: nowrap;
+                .inputsDivItemLabel {
+                  padding: 0 4px;
+                }
+              }
+            }
+
+            .reportTable {
+              width: 100%;
+              border-collapse: collapse;
+              table-layout:fixed;
+              word-break:break-all;
+            }
+          }
+          .tools{
+            position: fixed;
+            right: 2%;
+            text-align: right;
+            width: 60%;
+            cursor: pointer;
+            .toolsItem{
+              width: 15%;
+              margin-right: 3%;
+              display: inline-block;
+            }
+          }
+        </style>
+      </head>
+      <body>
+        <!-- 将需要打印的元素内容复制到新窗口中 -->
+        ${elementToPrint.innerHTML}
+      </body>
+    </html>
+  `)
+  // 延迟执行打印，以确保新窗口的内容已加载完成
+  printWindow.document.close() // 关闭文档流，确保内容完全加载
+  setTimeout(() => {
+    printWindow.print() // 调用打印方法
+    printWindow.close()
+  }, 500) // 延迟500毫秒后执行打印
+}