vue2-client 1.12.71 → 1.12.72

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

@@ -88,6 +88,7 @@
 <script>
 
 import { runLogic } from '@vue2-client/services/api/common'
+import { initDiagnosisDropdown } from './diagnosisAutocomplete'
 
 export default {
   name: 'XHisEditor',
@@ -163,12 +164,42 @@ export default {
   },
   methods: {
     runLogic,
+    async initDiagnosisAutocomplete (dropDownBoxParams) {
+      if (!this.editorRef || !this.editorRef.document) {
+        return
+      }
+
+      // 添加参数检查
+      if (!dropDownBoxParams || !Array.isArray(dropDownBoxParams) || dropDownBoxParams.length === 0) {
+        return
+      }
+
+      dropDownBoxParams.forEach(async (param) => {
+        if (param.identificationCode && param.dataLogic) {
+          try {
+            let preliDiagnoData = null
+            // 保留获取后端数据的逻辑
+            await runLogic(param.dataLogic,
+              {}, 'af-his').then(res => {
+              preliDiagnoData = res
+            })
+            const scriptElement = this.editorRef.document.createElement('script')
+            scriptElement.textContent = `(${initDiagnosisDropdown.toString()})(editor,${JSON.stringify(preliDiagnoData)},'${param.identificationCode}')`
+            this.editorRef.document.body.appendChild(scriptElement)
+          } catch (error) {
+
+          }
+        }
+      })
+    },
     // 初始化文档
-    onload: function (e) {
-      this.editorRef = e.target.contentWindow.editor
-      this.$emit('init', {})
+    onload (e) {
+      if (e && e.target && e.target.contentWindow) {
+        this.editorRef = e.target.contentWindow.editor
+        // 等待文档加载完成
+        this.$emit('init', {})
+      }
     },
-    // 初始化组件
     init (params) {
       const {
         fileUrl,
@@ -177,6 +208,7 @@ export default {
         bindObject,
         saveDataLogicName,
         logicExtraParams,
+        dropDownBoxParams,
         serviceName,
         showModeChoose = true,
         modeType = 'readonly'
@@ -194,29 +226,36 @@ export default {
       this.showModeChoose = showModeChoose
       this.modeType = modeType
       this.ready = true
-      this.loadFile(fileUrl, bindObject, currResData)
+      // 先加载文件
+      this.loadFile(fileUrl, bindObject, currResData).then(() => {
+        // 文件加载完成后再初始化自动完成
+        this.initDiagnosisAutocomplete(dropDownBoxParams)
+      })
       this.loadResList()
     },
     // 加载文档
     loadFile (fileUrl, bindObject, currResData) {
       this.loading = true
-      this.editorRef.loadUrl(fileUrl).then(() => {
-        if (bindObject) {
-          this.editorRef.setBindObject(bindObject)
-          if (bindObject.template) {
-            for (const key of Object.keys(bindObject.template)) {
-              this.editorRef.bindDataList(key, bindObject.template[key])
+      return new Promise((resolve) => {
+        this.editorRef.loadUrl(fileUrl).then(() => {
+          if (bindObject) {
+            this.editorRef.setBindObject(bindObject)
+            if (bindObject.template) {
+              for (const key of Object.keys(bindObject.template)) {
+                this.editorRef.bindDataList(key, bindObject.template[key])
+              }
             }
           }
-        }
-        this.changeMode()
-        this.fileUrl = fileUrl
-        if (!currResData.f_file_name) {
-          currResData.f_file_name = '未命名'
-        }
-        this.currResData = currResData
-        this.loading = false
-        this.$emit('afterLoadFile', {})
+          this.changeMode()
+          this.fileUrl = fileUrl
+          if (!currResData.f_file_name) {
+            currResData.f_file_name = '未命名'
+          }
+          this.currResData = currResData
+          this.loading = false
+          this.$emit('afterLoadFile', {})
+          resolve()
+        })
       })
     },
     // 加载文档列表
@@ -270,7 +309,7 @@ export default {
     },
     // 重新加载
     reload (params) {
-      runLogic('getMedicalRecord', params, this.serviceName).then(res => {
+      runLogic('getFileInformation', params, this.serviceName).then(res => {
         this.resDataModalVisible = false
         this.init({
           modeType: this.modeType,
@@ -280,7 +319,8 @@ export default {
           bindObject: res.bindObject,
           saveDataLogicName: this.saveDataLogicName,
           serviceName: this.serviceName,
-          logicExtraParams: this.logicExtraParams
+          logicExtraParams: this.logicExtraParams,
+          dropDownBoxParams: this.dropDownBoxParams
         })
       })
     },

package/src/base-client/components/his/XHisEditor/diagnosisAutocomplete.js

@@ -0,0 +1,241 @@
+export function initDiagnosisDropdown (editor, data, identificationCode) {
+  if (typeof editor === 'undefined' || !editor.$) {
+    return
+  }
+
+  // 确保元素存在
+  const diagnosisField = editor.$(identificationCode)
+
+  if (!diagnosisField.length) {
+    return
+  }
+
+  // 更详细的调试信息
+  const fieldElement = diagnosisField[0]
+
+  // 模拟诊断数据
+  const mockDiagnosisList = data
+  // 生成唯一的下拉框类名
+  const dropdownClassName = `diagnosis-dropdown-${identificationCode.replace('#', '')}`
+// 创建下拉列表容器 - 使用 Ant Design 风格
+  editor.$(`.${dropdownClassName}`).remove() // 修改这里，使用唯一的类名
+  const dropdownList = editor.document.createElement('div')
+  dropdownList.className = dropdownClassName // 使用唯一的类名
+
+  // 添加 Ant Design 样式，修改样式选择器使用唯一的类名
+  const styleElement = editor.document.createElement('style')
+  styleElement.textContent = `
+    .${dropdownClassName} {
+      display: none;
+      position: absolute;
+      z-index: 999999;
+      background: #fff;
+      border-radius: 2px;
+      box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
+      padding: 4px 0;
+      min-width: 300px;
+      width: auto;
+      max-width: 400px;
+      max-height: 256px;
+      overflow-y: auto;
+    }
+    .${dropdownClassName}::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    .${dropdownClassName}::-webkit-scrollbar-thumb {
+      background: rgba(0,0,0,.2);
+      border-radius: 3px;
+    }
+    .${dropdownClassName} .ant-list-item {
+      padding: 8px 12px;
+      cursor: pointer;
+      transition: all .3s;
+      white-space: nowrap;
+    }
+    .${dropdownClassName} .ant-list-item:hover {
+      background: #f5f5f5;
+    }
+    .${dropdownClassName} .ant-list-item-content {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
+    .${dropdownClassName} .ant-list-item-title {
+      color: rgba(0,0,0,.85);
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 1.5715;
+      flex: 1;
+      min-width: 120px;
+    }
+    .${dropdownClassName} .ant-list-item-description {
+      color: rgba(0,0,0,.45);
+      font-size: 12px;
+      line-height: 1.5715;
+      min-width: 80px;
+    }
+    .${dropdownClassName} .ant-list-empty {
+      padding: 16px;
+      color: rgba(0,0,0,.45);
+      text-align: center;
+      min-width: 200px;
+    }
+  `
+  editor.document.head.appendChild(styleElement)
+
+  // 将下拉列表添加到编辑器文档中
+  diagnosisField.after(dropdownList)
+
+  // 获取当前模式
+  function getCurrentMode () {
+    return editor.option.mode
+  }
+
+  // 检查是否允许编辑
+  function isEditableMode () {
+    const currentMode = getCurrentMode()
+    return currentMode === 'form' || currentMode === 'design'
+  }
+
+  // 更新下拉列表位置的函数
+  function updateDropdownPosition () {
+    try {
+      // 获取输入框的位置和尺寸
+      const fieldRect = fieldElement.getBoundingClientRect()
+
+      // 获取父容器的滚动位置
+      const scrollTop = editor.$(editor.document).scrollTop()
+      const scrollLeft = editor.$(editor.document).scrollLeft()
+
+      // 计算绝对位置
+      const top = fieldRect.bottom + scrollTop
+      const left = fieldRect.left + scrollLeft
+
+      // 设置下拉列表位置，不设置宽度，让它自适应内容
+      dropdownList.style.cssText = `
+        position: absolute;
+        top: ${top}px;
+        left: ${left}px;
+        display: block;
+      `
+    } catch (error) {
+    }
+  }
+
+  // 处理输入事件的函数
+  function handleInput () {
+    if (!isEditableMode()) {
+      dropdownList.style.display = 'none'
+      return
+    }
+
+    const keyword = this.textContent.trim()
+
+    if (keyword && keyword !== '请输入') {
+      const results = mockDiagnosisList.filter(item =>
+        item.name.toLowerCase().includes(keyword.toLowerCase()) ||
+        item.code.toLowerCase().includes(keyword.toLowerCase())
+      )
+
+      // 1. 先清空内容
+      dropdownList.innerHTML = ''
+
+      // 2. 添加内容
+      if (results.length === 0) {
+        dropdownList.innerHTML = `
+          <div class="ant-list-empty">
+            <div style="color: rgba(0,0,0,.25);">
+              <svg viewBox="64 64 896 896" width="16" height="16" fill="currentColor">
+                <path d="M928 224H768v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56H548v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56H328v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56H96c-17.7 0-32 14.3-32 32v576c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32zM424 688c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v48zm0-136c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v48zm136 136c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v48zm0-136c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v48zm136 136c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v48zm0-136c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v48z"/>
+              </svg>
+              <div style="margin-top: 8px;">无匹配结果</div>
+            </div>
+          </div>
+        `
+      } else {
+        const itemsHtml = results.map(item => `
+          <div class="ant-list-item">
+            <div class="ant-list-item-content">
+              <div class="ant-list-item-title">${item.name}</div>
+              <div class="ant-list-item-description">${item.code}</div>
+            </div>
+          </div>
+        `).join('')
+        dropdownList.innerHTML = itemsHtml
+      }
+
+      // 3. 更新位置并显示
+      updateDropdownPosition()
+    } else {
+      dropdownList.style.display = 'none'
+    }
+  }
+
+  // 输入法编辑状态处理
+  let isCompositing = false
+
+  // 输入法开始
+  fieldElement.addEventListener('compositionstart', function (e) {
+    isCompositing = true
+  })
+
+  // 输入法结束
+  fieldElement.addEventListener('compositionend', function (e) {
+    isCompositing = false
+    handleInput.call(this)
+  })
+
+  // 输入事件
+  fieldElement.addEventListener('input', function (e) {
+    if (!isCompositing) {
+      handleInput.call(this)
+    }
+  })
+
+  // 焦点事件
+  fieldElement.addEventListener('focus', function (e) {
+  })
+
+  // 失去焦点事件
+  fieldElement.addEventListener('blur', function (e) {
+    setTimeout(() => {
+      if (!this.textContent.trim()) {
+        this.textContent = '请输入'
+      }
+    }, 200)
+  })
+
+  // 点击选项事件
+  editor.$(dropdownList).on('mousedown', '.ant-list-item', function (e) {
+    e.preventDefault()
+    e.stopPropagation()
+    if (isEditableMode()) {
+      const name = editor.$(this).find('.ant-list-item-title').text()
+      fieldElement.textContent = name
+      dropdownList.style.display = 'none'
+      fieldElement.focus()
+    }
+  })
+
+  // 点击文档其他区域时隐藏下拉列表，修改选择器
+  editor.$(editor.document).on('mousedown', function (e) {
+    if (!editor.$(e.target).closest(`.${dropdownClassName}, ${identificationCode}`).length) {
+      dropdownList.style.display = 'none'
+    }
+  })
+
+  // 添加滚动事件监听，实时更新下拉列表位置
+  editor.$(editor.window).on('scroll', function () {
+    if (dropdownList.style.display !== 'none') {
+      updateDropdownPosition()
+    }
+  })
+
+  editor.$(editor.window).on('resize', function () {
+    if (dropdownList.style.display !== 'none') {
+      updateDropdownPosition()
+    }
+  })
+}

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

@@ -1,90 +1,94 @@
-<template>
-  <div class="list-wrapper" >
-    <a-list size="large" :data-source="data" itemLayout="horizontal" class="list-container">
-      <a-list-item slot="renderItem" slot-scope="item, index" class="list-item" @click="handleClick(index)">
-        {{ item.number }} {{ item.name }}
-      </a-list-item>
-    </a-list>
-  </div>
-</template>
-
-<script>
-
-import { runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XList',
-  props: {
-    queryParamsName: {
-      type: Object,
-      default: 'outpatientWaitLogic'
-    },
-  },
-  inject: ['getComponentByName'],
-  data () {
-    return {
-      data: []
-    }
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  methods: {
-    async getData (config) {
-        runLogic(config, {}, 'af-his').then(res => {
-          this.data = res
-        })
-    },
-    handleClick (index) {
-      this.$emit('listClick', this.data[index])
-    },
-    refreshList () {
-      this.getData(this.queryParamsName)
-    },
-
-  }
-}
-</script>
-
-<style scoped>
-.list-wrapper {
-  max-height: 240px;
-  overflow-y: auto;
-  cursor: pointer;
-  padding-right: 2px;
-}
-
-.list-container {
-  width: 100%;
-}
-
-.list-item {
-  height: 35px;
-  border-radius: 6px;
-  background-color: #F4F4F4;
-  padding: 8px 15px 7px 15px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  border: 1px solid #D9D9D9;
-  box-sizing: border-box;
-  margin-bottom: 16px;
-  white-space: nowrap;
-  overflow: clip;
-}
-
-/* 自定义滚动条样式 */
-.list-wrapper::-webkit-scrollbar {
-  width: 6px;
-}
-
-.list-wrapper::-webkit-scrollbar-thumb {
-  background-color: #d9d9d9;
-  border-radius: 3px;
-}
-
-.list-wrapper::-webkit-scrollbar-track {
-  background-color: #f0f0f0;
-}
-</style>
+<template>
+  <div class="list-wrapper" >
+    <a-list size="large" :data-source="data" itemLayout="horizontal" class="list-container">
+      <a-list-item slot="renderItem" slot-scope="item, index" class="list-item" @click="handleClick(index)">
+        {{ item.number }} {{ item.name }}
+      </a-list-item>
+    </a-list>
+  </div>
+</template>
+
+<script>
+
+import { runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XList',
+  props: {
+    queryParamsName: {
+      type: Object,
+      default: 'outpatientWaitLogic'
+    },
+  },
+  inject: ['getComponentByName'],
+  data () {
+    return {
+      data: []
+    }
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  methods: {
+    async getData (config) {
+        runLogic(config, {}, 'af-his').then(res => {
+          this.data = res
+        })
+    },
+    handleClick (index) {
+      console.log('xlist按钮被点击了！')
+      console.warn(this.getComponentByName)
+      const xCollapseComponent = this.getComponentByName('XCollapse')
+      console.warn('xCollapseComponent', xCollapseComponent)
+      this.$emit('listClick', this.data[index])
+    },
+    refreshList () {
+      this.getData(this.queryParamsName)
+    },
+
+  }
+}
+</script>
+
+<style scoped>
+.list-wrapper {
+  max-height: 240px;
+  overflow-y: auto;
+  cursor: pointer;
+  padding-right: 2px;
+}
+
+.list-container {
+  width: 100%;
+}
+
+.list-item {
+  height: 35px;
+  border-radius: 6px;
+  background-color: #F4F4F4;
+  padding: 8px 15px 7px 15px;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid #D9D9D9;
+  box-sizing: border-box;
+  margin-bottom: 16px;
+  white-space: nowrap;
+  overflow: clip;
+}
+
+/* 自定义滚动条样式 */
+.list-wrapper::-webkit-scrollbar {
+  width: 6px;
+}
+
+.list-wrapper::-webkit-scrollbar-thumb {
+  background-color: #d9d9d9;
+  border-radius: 3px;
+}
+
+.list-wrapper::-webkit-scrollbar-track {
+  background-color: #f0f0f0;
+}
+</style>