vue2-client 1.15.107 → 1.15.110

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

@@ -0,0 +1,473 @@
+<template>
+  <div>
+    <div v-show="ready">
+      <a-row class="editor-action-container" type="flex" justify="space-between">
+        <a-col class="editor-tools">
+          <a-space>
+            <template v-if="resList.length > 0">
+              <a-select
+                style="width: 200px"
+                v-model="toggleResId"
+                placeholder="请选择文档"
+                show-search
+                @change="changeRes"
+              >
+                <a-select-option v-for="item of resListCp" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
+              </a-select>
+              <template v-if="this.modeType !== 'readonly' && this.resId !== -1">
+                <a-button icon="plus" @click="addRes"/>
+              </template>
+            </template>
+            <a-radio-group
+              v-show="showModeChoose"
+              button-style="solid"
+              @change="changeMode"
+              v-model="modeType">
+              <a-radio-button v-for="item of modeList" :key="item.value" :value="item.value">
+                {{ item.label }}
+              </a-radio-button>
+            </a-radio-group>
+          </a-space>
+        </a-col>
+        <a-col class="editor-action">
+          <a-space>
+            <template v-if="this.modeType !== 'readonly'">
+              <a-button type="primary" @click="openRenameModal" v-if="this.resId !== -1">
+                重命名
+              </a-button>
+              <a-button type="primary" @click="() => this.resId !== -1 ? save() : openAddResModal()">
+                保存
+              </a-button>
+            </template>
+            <a-button type="primary" @click="print">
+              打印
+            </a-button>
+            <a-button @click="refresh">
+              刷新
+            </a-button>
+          </a-space>
+          <a-dropdown>
+            <a-menu slot="overlay" @click="handleExportMenuClick">
+              <a-menu-item key="exportPdf">导出为Pdf</a-menu-item>
+              <a-menu-item key="exportWord">导出为Word</a-menu-item>
+              <a-menu-item key="exportHtmlWithStyle">导出为Html</a-menu-item>
+            </a-menu>
+            <a-button style="margin-left: 8px"> 导出 <a-icon type="down" /> </a-button>
+          </a-dropdown>
+        </a-col>
+      </a-row>
+      <a-divider/>
+      <a-spin tip="加载中，马上好" :spinning="loading">
+        <iframe
+          id="x-editor"
+          src="/his/editor/editor.html"
+          v-bind="objectOfAttrs"
+          @load="onload"
+          style="height: calc(-200px - 3rem + 100vh);">
+        </iframe>
+      </a-spin>
+    </div>
+    <div v-show="!ready">
+      <a-empty description="请选择文书" />
+    </div>
+    <a-modal
+      :destroyOnClose="true"
+      :title="this.resDataModalMode === 'modify' ? '修改文档' : '新建文档'"
+      :visible="resDataModalVisible"
+      okText="提交"
+      @cancel="resDataModalVisible = false"
+      @ok="onSubmit">
+      <a-form-model ref="resModifyForm" :model="modifyResModel" :rules="resRules">
+        <a-form-model-item prop="f_file_name" label="文档名">
+          <a-input v-model="modifyResModel.f_file_name" placeholder="请输入文档名"/>
+        </a-form-model-item>
+      </a-form-model>
+    </a-modal></div>
+</template>
+
+<script>
+
+import { runLogic } from '@vue2-client/services/api/common'
+import { initDiagnosisDropdown } from './diagnosisAutocomplete'
+
+export default {
+  name: 'XHisEditor',
+  computed: {
+    resListCp () {
+      const list = this.resList
+      if (this.resId === -1) {
+        list.push({
+          label: '未保存文档*', value: -1
+        })
+      }
+      return list
+    }
+  },
+  data () {
+    return {
+      ready: false,
+      loading: false,
+      resDataModalMode: 'modify',
+      resDataModalVisible: false,
+      objectOfAttrs: {
+        width: '100%',
+        height: '650vh',
+        frameborder: 0
+      },
+      // 数据模式
+      modeType: 'form',
+      // 是否显示模式切换功能
+      showModeChoose: true,
+      // 数据模式列表
+      modeList: [
+        {
+          label: '预览',
+          value: 'readonly'
+        },
+        {
+          label: '表单',
+          value: 'form'
+        },
+        {
+          label: '设计',
+          value: 'design'
+        }
+      ],
+      // 编辑器实例
+      editorRef: null,
+      // 文档资源列表
+      resList: [],
+      // 文档资源ID
+      resId: undefined,
+      // 文档链接
+      fileUrl: undefined,
+      // 文档绑定数据
+      bindObject: undefined,
+      // 数据模式 template:模板编辑；data:数据编辑
+      dataMode: undefined,
+      // 保存数据调用的Logic名称
+      saveDataLogicName: undefined,
+      // 保存数据调用Logic传入的额外参数
+      logicExtraParams: undefined,
+      // 服务名
+      serviceName: undefined,
+      // 当前文档信息
+      currResData: {},
+      // 切换的文档id
+      toggleResId: undefined,
+      // 待提交的修改信息
+      modifyResModel: {},
+      resRules: {
+        f_file_name: [{ required: true, message: '请输入文档名', trigger: 'blur' }],
+      }
+    }
+  },
+  //      初始化    保存后        加载文件后    诊断选择
+  emits: ['init', 'saveafter', 'afterLoadFile', 'selected'],
+  methods: {
+    runLogic,
+    /* eslint-disable */
+    async initDiagnosisAutocomplete (dropDownBoxParams) {
+      if (!this.editorRef || !this.editorRef.document) {
+        return
+      }
+
+      // 添加参数检查
+      if (!dropDownBoxParams || !Array.isArray(dropDownBoxParams) || dropDownBoxParams.length === 0) {
+        return
+      }
+
+      // 创建一个简单的自定义事件系统
+      // 1. 创建一个隐藏的DOM元素作为事件通道
+      const eventChannel = this.editorRef.document.createElement('div');
+      eventChannel.id = 'diagnosis-event-channel';
+      eventChannel.style.display = 'none';
+      this.editorRef.document.body.appendChild(eventChannel);
+      // 2. 在iframe文档中监听自定义事件
+      const that = this;
+      this.editorRef.document.addEventListener('diagnosis-selected', function(e) {
+        if (e && e.detail) {
+          that.$emit('selected', { item: e.detail, editor: that.editorRef });
+        }
+      });
+
+      for (const param of dropDownBoxParams) {
+        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 = `
+              // 定义一个函数来触发自定义事件
+              function triggerDiagnosisSelected(data) {
+                const event = new CustomEvent('diagnosis-selected', {
+                  detail: data,
+                  bubbles: true
+                });
+                document.dispatchEvent(event);
+              }
+
+              // 初始化诊断下拉菜单，使用自定义事件触发函数
+              (${initDiagnosisDropdown.toString()})(
+                editor,
+                ${JSON.stringify(preliDiagnoData)},
+                '${param.identificationCode}',
+                triggerDiagnosisSelected
+              );
+            `;
+
+            this.editorRef.document.body.appendChild(scriptElement);
+          } catch (error) {
+            console.error('初始化诊断自动完成失败:', error);
+          }
+        }
+      }
+    },
+    /* eslint-disable */
+    // 初始化文档
+    onload (e) {
+      if (e && e.target && e.target.contentWindow) {
+        this.editorRef = e.target.contentWindow.editor
+        // 等待文档加载完成
+        this.$emit('init', {})
+      }
+    },
+    init (params) {
+      const {
+        fileUrl,
+        resId,
+        currResData = {},
+        bindObject,
+        saveDataLogicName,
+        logicExtraParams,
+        dropDownBoxParams,
+        serviceName,
+        showModeChoose = true,
+        modeType = 'form'
+      } = params
+      this.resId = resId
+      if (bindObject) {
+        this.dataMode = 'data'
+        this.bindObject = bindObject
+      } else {
+        this.dataMode = 'template'
+      }
+      this.saveDataLogicName = saveDataLogicName
+      this.logicExtraParams = logicExtraParams
+      this.serviceName = serviceName
+      this.showModeChoose = showModeChoose
+      this.modeType = modeType
+      this.ready = true
+      // 先加载文件
+      this.loadFile(fileUrl, bindObject, currResData, true).then(async () => {
+        // 文件加载完成后再初始化自动完成
+        await this.initDiagnosisAutocomplete(dropDownBoxParams)
+      })
+      this.loadResList()
+    },
+    // 加载文档
+    loadFile (fileUrl, bindObject, currResData, isAppend = true) {
+      this.loading = true
+      return new Promise((resolve) => {
+        if (isAppend) {
+          // 加载新文档
+          this.editorRef.loadUrl(fileUrl).then(() => {
+            // 获取新文档内容
+            const newContent = this.editorRef.getHtml()
+            console.log('html', { newContent })
+            
+            // 使用编辑器提供的insertContent方法
+            this.editorRef.execCommand('insertHTML', newContent)
+            
+            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', {})
+            resolve()
+          })
+        } else {
+          // 原有的加载逻辑
+          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', {})
+            resolve()
+          })
+        }
+      })
+    },
+    // 加载文档列表
+    loadResList () {
+      runLogic('getMedicalList', this.logicExtraParams, this.serviceName).then(res => {
+        this.resList = res
+        this.toggleResId = this.resId
+      })
+    },
+    // 修改模式
+    changeMode (e) {
+      this.editorRef.execCommand(this.modeType)
+    },
+    // 打开文档信息修改面板
+    openRenameModal () {
+      this.resDataModalMode = 'modify'
+      this.modifyResModel = {
+        f_file_name: this.currResData.f_file_name
+      }
+      this.resDataModalVisible = true
+    },
+    // 提交文档信息修改
+    onSubmit () {
+      this.$refs.resModifyForm.validate(valid => {
+        if (valid) {
+          if (this.resDataModalMode === 'modify' && this.modifyResModel.f_file_name === this.currResData.f_file_name) {
+            this.$message.warn('新文档名不能与原文档名一致！')
+            return false
+          }
+          this.save()
+          return true
+        } else {
+          return false
+        }
+      })
+    },
+    // 打开文档新建面板
+    openAddResModal () {
+      this.resDataModalMode = 'add'
+      this.modifyResModel = {
+        f_file_name: undefined
+      }
+      this.resDataModalVisible = true
+    },
+    // 新建文档
+    addRes () {
+      this.$emit('add', {})
+      // const params = Object.assign({
+      //   isAddForce: true
+      // }, this.logicExtraParams)
+      // this.reload(params)
+    },
+    // 重新加载
+    reload (params) {
+      runLogic('getFileInformation', params, this.serviceName).then(res => {
+        this.resDataModalVisible = false
+        this.init({
+          modeType: this.modeType,
+          fileUrl: res.url,
+          resId: res.id,
+          currResData: res.currResData,
+          bindObject: res.bindObject,
+          saveDataLogicName: this.saveDataLogicName,
+          serviceName: this.serviceName,
+          logicExtraParams: this.logicExtraParams,
+          dropDownBoxParams: this.dropDownBoxParams
+        })
+      })
+    },
+    // 切换文档
+    changeRes (value) {
+      if (this.resId === -1) {
+        const that = this
+        this.$confirm({
+          title: '确认切换文档吗？',
+          content: '您有尚未保存的文档，切换文档将丢失所有的修改',
+          onOk () {
+            that.reload({
+              resId: value
+            })
+          },
+          onCancel () {
+            that.toggleResId = that.resId
+          },
+        })
+      } else {
+        this.reload({
+          resId: value
+        })
+      }
+    },
+    // 保存文档
+    save () {
+      // 验证必须输入项
+      if (this.editorRef.validate()) {
+        // 获取HTML文档和结构化数据(JSON)
+        const data = {
+          doc: this.editorRef.getHtml(),
+          dataObject: this.editorRef.getBindObject(),
+          dataMode: this.dataMode,
+          resId: this.resId,
+          modifyResModel: this.modifyResModel,
+          logicExtraParams: this.logicExtraParams
+        }
+        // 保存HTML文档和结构化数据到后端服务
+        runLogic(this.saveDataLogicName, data, this.serviceName).then(res => {
+          this.$message.success('保存成功')
+          this.changeRes(res.currResData.id)
+          this.$emit('saveafter', data.dataObject)
+        }).finally(() => {
+          this.resDataModalVisible = false
+        })
+      } else {
+        this.$message.error('请检查未填写的项目')
+      }
+    },
+    // 打印文档
+    print () {
+      this.editorRef.execCommand('print')
+    },
+    // 关闭编辑器
+    close () {
+      this.ready = false
+    },
+    // 刷新文档
+    refresh () {
+      this.loadFile(this.fileUrl, this.bindObject, this.currResData)
+    },
+    // 导出下拉菜单
+    handleExportMenuClick (e) {
+      const key = e.key
+      this.editorRef.execCommand(key)
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.editor-action-container {
+  height: 40px;
+}
+:deep(.ant-divider-horizontal) {
+  margin: 4px 0;
+}
+</style>