vue2-client 1.22.32 → 1.22.33

package/src/base-client/components/his/XHisEditor/ImageReportDemo.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="image-report-demo">
+    <a-row :gutter="16">
+      <a-col :span="18">
+        <a-card title="XHisEditor 图片报告演示" style="margin-bottom: 16px;">
+          <template #extra>
+            <a-space>
+              <a-button type="primary" @click="loadMedicalRecord">
+                加载真实病历
+              </a-button>
+              <a-button @click="refreshEditor">
+                刷新编辑器
+              </a-button>
+            </a-space>
+          </template>
+
+          <XHisEditor
+            ref="hisEditorRef"
+            :image-report-fields="imageReportFields"
+            :bind-object="editorBindObject"
+            :save-data-logic-name="saveDataLogicName"
+            :logic-extra-params="logicExtraParams"
+            :hide-editor-toolbar="false"
+            service-name="af-his"
+            :show-mode-choose="false"
+            mode-type="data"
+            @init="onEditorInit"
+            @saveafter="onSaveAfter"
+          />
+        </a-card>
+      </a-col>
+
+      <a-col :span="6">
+        <a-card title="说明" style="margin-bottom: 16px;">
+          <p>1. 点击“加载真实病历”后会调用 <code>getFileInformation</code>。</p>
+          <p>2. 接口返回的 <code>bindObject</code> 若带 <code>ctImages</code>，会自动渲染。</p>
+          <p>3. 保存逻辑为 <code>saveMedicalRecordFile</code>。</p>
+        </a-card>
+
+        <a-card title="当前文书信息" style="margin-bottom: 16px;">
+          <pre>{{ JSON.stringify(editorInfo, null, 2) }}</pre>
+        </a-card>
+
+        <a-card title="当前 bindObject">
+          <pre>{{ JSON.stringify(editorBindObject, null, 2) }}</pre>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import XHisEditor from '@vue2-client/base-client/components/his/XHisEditor/XHisEditor.vue'
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'ImageReportDemo',
+  components: {
+    XHisEditor
+  },
+  data () {
+    return {
+      editorBindObject: {},
+      imageReportFields: ['ctImages'],
+      saveDataLogicName: 'saveMedicalRecordFile',
+      editorInfo: {
+        loaded: false,
+        fileId: null,
+        templateId: 670,
+        registrationNumber: 1
+      }
+    }
+  },
+  computed: {
+    logicExtraParams () {
+      const user = this.$store.state.account?.user || {}
+      return {
+        description: '保存需要传递的参数',
+        admissionId: this.editorBindObject.id,
+        templateId: 670,
+        userInfo: user,
+        checkNum: this.editorInfo.registrationNumber
+      }
+    }
+  },
+  methods: {
+    onEditorInit (main) {
+      console.log('[ImageReportDemo] editor init', main)
+    },
+    onSaveAfter (dataObject) {
+      console.log('[ImageReportDemo] saveafter', dataObject)
+    },
+    async loadMedicalRecord () {
+      try {
+        const registrationNumber = '1'
+        const res = await runLogic('getFileInformation', {
+          RegistrationNumber: registrationNumber,
+          f_template_id: 670
+        }, 'af-his')
+
+        console.info('返回的电子病历数据:', res)
+
+        this.editorInfo = {
+          loaded: true,
+          fileId: res.id,
+          templateId: 670,
+          registrationNumber
+        }
+
+        const bindObject = res.bindObject || {}
+        this.editorBindObject = bindObject
+
+        const editorInstance = this.$refs.hisEditorRef
+        if (editorInstance && editorInstance.init) {
+          editorInstance.init({
+            fileUrl: res.url,
+            resId: res.id,
+            currResData: bindObject,
+            bindObject: bindObject,
+            saveDataLogicName: 'saveMedicalRecordFile',
+            serviceName: 'af-his',
+            hideToolbar: true,
+            treeQueryParams: { description: '查询树结构的参数' },
+            docQueryParams: { description: '切换文档的查询条件' },
+            logicExtraParams: {
+              description: '保存需要传递的参数',
+              admissionId: res.bindObject?.id,
+              templateId: 670,
+              userInfo: this.$store.state.account?.user || {},
+              checkNum: registrationNumber
+            }
+          })
+        }
+
+        this.$message.success(res.id == null ? '新建文书成功' : '加载文书完成')
+      } catch (error) {
+        console.error('加载失败:', error)
+        this.$message.error('加载失败: ' + (error.message || error))
+      }
+    },
+    refreshEditor () {
+      const editorInstance = this.$refs.hisEditorRef
+      if (editorInstance && editorInstance.refresh) {
+        editorInstance.refresh()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.image-report-demo {
+  padding: 20px;
+}
+</style>

package/src/base-client/components/his/XHisEditor/XHisEditor.vue

@@ -103,7 +103,20 @@
           <a-input v-model="modifyResModel.f_file_name" placeholder="请输入文档名"/>
         </a-form-model-item>
       </a-form-model>
-    </a-modal></div>
+    </a-modal>
+
+    <!-- 编辑器内部图片预览 -->
+    <ImagePreview
+      :visible="imagePreview.visible"
+      :imgList="imagePreview.imgList"
+      :compareList="imagePreview.compareList"
+      :initialIndex="imagePreview.index"
+      :currentLeftItem="imagePreview.currentLeftItem"
+      :currentRightItem="imagePreview.currentRightItem"
+      @close="imagePreview.visible = false"
+      @pacs-sync-view="handlePacsSync"
+    />
+  </div>
 </template>
 
 <script>
@@ -111,16 +124,22 @@
 import { runLogic } from '@vue2-client/services/api/common'
 import { initDiagnosisDropdown } from './diagnosisAutocomplete'
 import XDocTree from './XDocTree.vue'
+import ImagePreview from '@vue2-client/base-client/components/his/XImageReport/ImagePreview.vue'
 
 export default {
   name: 'XHisEditor',
   components: {
-    XDocTree
+    XDocTree,
+    ImagePreview
   },
   props: {
     hideEditorToolbar: {
       type: Boolean,
       default: true
+    },
+    imageReportFields: {
+      type: Array,
+      default: () => []
     }
   },
   computed: {
@@ -182,6 +201,8 @@ export default {
       loading: false,
       resDataModalMode: 'modify',
       resDataModalVisible: false,
+      // imageReportFields 支持通过 init() 参数动态覆盖
+      mergedImageReportFields: this.imageReportFields || [],
       // 使用按钮显隐控制
       // userTemplateVisible: false,
       objectOfAttrs: {
@@ -248,11 +269,18 @@ export default {
       fieldFilter: undefined,
       debounceTimer: null,
       inputListenerSetup: false,
-      isComposing: false // 标记是否正在输入中文（拼音输入中）
+      isComposing: false, // 标记是否正在输入中文（拼音输入中）
+      // 编辑器内部图片预览
+      imagePreview: {
+        visible: false,
+        compareList: [],
+        imgList: [],
+        index: 0
+      }
     }
   },
   //      初始化    保存后        加载文件后    诊断选择
-  emits: ['init', 'saveafter', 'afterLoadFile', 'selected', 'inputEnd'],
+  emits: ['init', 'saveafter', 'afterLoadFile', 'selected', 'inputEnd', 'pacs-sync-view'],
   methods: {
     // 获取编辑器绑定数据 - 辅助方法
     getEditorData () {
@@ -275,6 +303,8 @@ export default {
         // 更新本地数据
         this.bindObject = bindObject
         this.codeData = {}
+        // 重新渲染图片报告
+        this.renderImageReport()
         return true
       }
       return false
@@ -306,6 +336,8 @@ export default {
       this.editorRef.setBindObject(currentData)
       // 更新本地数据
       this.bindObject = currentData
+      // 重新渲染图片报告
+      this.renderImageReport()
 
       return true
     },
@@ -433,6 +465,7 @@ export default {
         docQueryParams,
         storedInitParams,  // 新增
         mergeStrategy = 'specify',  // 模板数据合并策略
+        imageReportFields,
       } = params
 
       this.resId = resId
@@ -455,6 +488,9 @@ export default {
       this.modeType = (modeType === "readonly!" ? "readonly" : modeType)
       this.readonly = (modeType !== "readonly!")
       this.fieldFilter = fieldFilter || this.$attrs.fieldFilter
+      if (imageReportFields !== undefined) {
+        this.mergedImageReportFields = imageReportFields
+      }
 
       if (loadResList) {
         this.treeQueryParams = treeQueryParams ? { ...treeQueryParams } : (logicExtraParams ? { ...logicExtraParams } : {})
@@ -514,12 +550,19 @@ export default {
         this.editorRef.loadUrl(fileUrl).then(() => {
           if (bindObject) {
             this.editorRef.setBindObject(bindObject)
+            this.bindObject = bindObject  // 同步 this.bindObject，供 renderImageReport 使用
             if (bindObject.template) {
               for (const key of Object.keys(bindObject.template)) {
                 this.editorRef.bindDataList(key, bindObject.template[key])
               }
             }
           }
+
+          // 渲染编辑器内部图片报告
+          // 等 DOM 渲染完成后再执行
+          this.$nextTick(() => {
+            this.renderImageReport()
+          })
           // 拿取多于模板中的数据
           const diff = this.bindObject? Object.fromEntries(
             Object.entries(this.bindObject)
@@ -1043,6 +1086,14 @@ export default {
     close () {
       this.ready = false
     },
+    handlePacsSync (payload) {
+      const eventName = 'pacs-sync-view'
+      if (this.$listeners[eventName]) {
+        this.$emit(eventName, payload)
+      } else {
+        this.$message?.warn?.(`未实现事件函数 [${eventName}]`)
+      }
+    },
     // 刷新文档
     refresh () {
       this.loadFile(this.fileUrl, this.bindObject, this.currResData)
@@ -1079,6 +1130,99 @@ export default {
       } catch (error) {
         // 静默失败
       }
+    },
+
+    /**
+     * 动态图片使用格式，在将设计好的文书导出html格式，在html种加入图片渲染锚点，id作为后端返回则字段名称：<div id="ctImages" class="x-image-report-root"></div><br>
+     * init的时候增加属性imageReportFields: ['ctImages'],告诉组件这个字段需要渲染为图片 可以是数组字符串或者数组对象 如果是对象则{url:"图片地址",f_upload_date:“对比模式下时间字段”}
+     *
+     * 渲染编辑器内部的图片报告
+     * 根据 imageReportFields 配置，在编辑器 iframe 中查找对应 ID 的容器并注入图片缩略图
+     * 字段名即为容器 ID，模板设计师可在模板 HTML 中预留容器位置
+     */
+    renderImageReport () {
+      if (!this.mergedImageReportFields || !this.mergedImageReportFields.length) {
+        console.log('[XHisEditor] renderImageReport: 没有配置 imageReportFields，跳过')
+        return
+      }
+      if (!this.editorRef) {
+        console.log('[XHisEditor] renderImageReport: editorRef 未就绪，等待...')
+        setTimeout(() => this.renderImageReport(), 200)
+        return
+      }
+      if (!this.editorRef.document) {
+        console.log('[XHisEditor] renderImageReport: iframe document 未就绪，等待...')
+        setTimeout(() => this.renderImageReport(), 200)
+        return
+      }
+
+      const doc = this.editorRef.document
+      const bindObject = this.bindObject || {}
+
+      console.log('[XHisEditor] renderImageReport 开始:', { imageReportFields: this.mergedImageReportFields, bindObject })
+
+      this.mergedImageReportFields.forEach(field => {
+        const imageList = bindObject[field]
+        const compareList = bindObject[`compare_${field}`]
+        console.log(`[XHisEditor] 字段 ${field}:`, imageList)
+
+        let container = doc.getElementById(field)
+        if (!container) {
+          container = doc.createElement('div')
+          container.id = field
+          if (doc.body) {
+            doc.body.appendChild(container)
+          }
+        }
+        container.innerHTML = ''
+
+        if (!Array.isArray(imageList) || imageList.length === 0) {
+          const empty = doc.createElement('div')
+          empty.textContent = '暂无图片'
+          container.appendChild(empty)
+          return
+        }
+
+        const grid = doc.createElement('div')
+        grid.style.cssText = 'display:grid;grid-template-columns:repeat(3,1fr);gap:8px;'
+
+        imageList.forEach((item, index) => {
+          const url = typeof item === 'string' ? item : item?.url || ''
+          const el = doc.createElement('div')
+          el.style.cssText = 'aspect-ratio:1;border-radius:4px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all 0.3s;'
+
+          const img = doc.createElement('img')
+          img.src = url
+          img.style.cssText = 'width:100%;height:100%;object-fit:cover;'
+          img.alt = `${field} ${index + 1}`
+
+          el.appendChild(img)
+          grid.appendChild(el)
+
+          el.addEventListener('click', () => {
+            this.openEditorImagePreview(url, imageList, compareList, index, item)
+          })
+        })
+
+        container.appendChild(grid)
+      })
+    },
+
+    /**
+     * 打开编辑器内部图片预览
+     * 直接更新 imagePreview 状态，显示 ImagePreview 组件
+     */
+    openEditorImagePreview (currentUrl, imgList, compareList, index, currentItem) {
+      const leftItem = typeof currentItem === 'object' ? currentItem : (imgList[index] || null)
+      const rightItem = typeof currentItem === 'object' ? null : (compareList[index] || null)
+      this.imagePreview = {
+        visible: true,
+        imgList,
+        compareList,
+        index,
+        currentLeftItem: leftItem,
+        currentRightItem: rightItem
+      }
     }
   }
 }