vue2-client 1.16.94 → 1.16.95

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

@@ -1,705 +1,705 @@
-<template>
-  <div>
-    <div v-show="ready">
-      <a-row v-if="this.readonly" 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
-              class="custom-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-button">
-          <a-space>
-            <template v-if="this.modeType !== 'readonly'">
-              <!--              <a-button-->
-              <!--                type="primary"-->
-              <!--                v-if = "userTemplateVisible"-->
-              <!--                @click="useTemplateData"-->
-              <!--              >-->
-              <!--                使用-->
-              <!--              </a-button>-->
-              <a-button type="primary" @click="Recording" v-if="canRecord" v-model="recording">
-                {{ recording? '停止' : '录音' }}
-              </a-button>
-              <a-button type="primary" @click="openRenameModal" v-if="this.resId !== -1">
-                重命名
-              </a-button>
-              <!-- 组合按钮容器 -->
-              <div class="save-btn-main">
-                <!-- 保存按钮 (左侧) -->
-                <a-button
-                  type="primary"
-                  class="save-btn-main"
-                  @click="showSaveModal('normal')"
-                >
-                  保存
-                </a-button>
-
-                <!-- 下拉部分 (右侧) -->
-                <!-- 下拉触发部分 -->
-                <template v-if="modeType !== 'design'">
-                  <a-dropdown
-                    :trigger="['click']"
-                    placement="bottomRight">
-                    <a-button
-                      type="primary"
-                      class="dropdown-trigger-btn">
-                      <a-icon type="down" />
-                    </a-button>
-                    <a-menu slot="overlay">
-                      <a-menu-item @click="showSaveModal('template')">
-                        保存并作为模板
-                      </a-menu-item>
-                    </a-menu>
-                  </a-dropdown>
-                </template>
-              </div>
-              <a-modal
-                title="保存"
-                :visible="saveVisible"
-                :confirm-loading="false"
-                @ok="handleSaveConfirm"
-                @cancel="saveVisible = false"
-              >
-                <a-form-item label="文件名" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-                  <a-input
-                    v-model="fileName"
-                    placeholder="请输入文件名"
-                    @pressEnter="handleSaveConfirm"
-                  />
-                </a-form-item>
-              </a-modal>
-            </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 {
-      temporaryParameter: {},
-      canRecord: false,
-      recording: false, // 是否正在录音
-      readonly: false,
-      ready: false,
-      loading: false,
-      resDataModalMode: 'modify',
-      resDataModalVisible: false,
-      saveVisible: false,
-      // 使用按钮显隐控制
-      // userTemplateVisible: false,
-      objectOfAttrs: {
-        width: '100%',
-        height: '650vh',
-        frameborder: 0
-      },
-      // 数据模式
-      modeType: 'form',
-      // 是否显示模式切换功能
-      showModeChoose: true,
-      // 是否作为模板 1 是，0 否
-      isTemplate: 0,
-      // 模板id
-      templateId: undefined,
-      admissionId: undefined,
-      // 保存类型
-      saveType: 'normal',
-      fileName: '',
-      // 数据模式列表
-      modeList: [
-        {
-          label: '预览',
-          value: 'readonly'
-        },
-        {
-          label: '表单',
-          value: 'form'
-        },
-        {
-          label: '设计',
-          value: 'design'
-        }
-      ],
-      // 编辑器实例
-      editorRef: null,
-      // 文档资源列表
-      resList: [],
-      // 文档资源ID
-      resId: undefined,
-      // 文档链接
-      fileUrl: undefined,
-      // 文档绑定数据
-      bindObject: undefined,
-      // 合并模板数据后文档数据
-      assignBindObject: undefined,
-      // 数据模式 template:模板编辑；data:数据编辑
-      dataMode: undefined,
-      // 保存数据调用的Logic名称
-      saveDataLogicName: undefined,
-      // 保存数据调用Logic传入的额外参数
-      logicExtraParams: undefined,
-      // 服务名
-      serviceName: undefined,
-      // 当前文档信息
-      currResData: {},
-      // 切换的文档id
-      toggleResId: undefined,
-      // 待提交的修改信息
-      modifyResModel: {},
-      codeData: {},
-      resRules: {
-        f_file_name: [{ required: true, message: '请输入文档名', trigger: 'blur' }],
-      }
-    }
-  },
-  //      初始化    保存后        加载文件后    诊断选择
-  emits: ['init', 'saveafter', 'afterLoadFile', 'selected'],
-  methods: {
-    runLogic,
-    /* eslint-disable */
-    async initDiagnosisAutocomplete (dropDownBoxParams) {
-      console.log('dropDownBoxParams',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 });
-          that.codeData = { ...that.codeData, ...{[e.detail.codeKey]: e.detail.code} }
-        }
-      });
-
-      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);
-          }
-        }
-      }
-    },
-    showSaveModal (type) {
-      this.saveType = type  // 记录当前保存类型
-      if (type === 'template') {
-        this.saveVisible = true
-      }else {
-        if (this.resId !== -1 || this.resId !== undefined) {
-          this.save()
-        } else {
-          this.openAddResModal()
-        }
-      }
-
-    },
-    handleSaveConfirm () {
-      if (!this.fileName.trim()) {
-        this.$message.error('文件名不能为空')
-        return
-      }
-      this.saveAsTemplate()
-    },
-    /* eslint-disable */
-    // 初始化文档
-    onload (e) {
-      if (e && e.target && e.target.contentWindow) {
-        this.editorRef = e.target.contentWindow.editor
-        // 等待文档加载完成
-        this.$emit('init', {})
-      }
-    },
-    init (params, loadResList = true) {
-      console.log("===============>",params)
-      this.temporaryParameter = params
-      this.canRecord = params.canRecord == undefined || params.canRecord == null? false : params.canRecord
-      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'
-      }
-      if (logicExtraParams?.admissionId !== undefined && logicExtraParams?.templateId !== undefined) {
-        this.admissionId = logicExtraParams.admissionId
-        this.templateId = logicExtraParams.templateId
-      } else {
-        console.warn('病例id:admissionId不存在或模板id:templateId不存在')
-      }
-      this.saveDataLogicName = saveDataLogicName
-      this.logicExtraParams = logicExtraParams
-      this.serviceName = serviceName
-      this.showModeChoose = showModeChoose
-      this.modeType = (modeType === "readonly!" ? "readonly" :modeType)
-      this.readonly = (modeType !== "readonly!")
-      this.ready = true
-      // 先加载文件
-      this.loadFile(fileUrl, bindObject, currResData).then(async () => {
-        // 文件加载完成后再初始化自动完成
-        await this.initDiagnosisAutocomplete(dropDownBoxParams)
-      })
-      if(loadResList){
-        this.loadResList()
-      }
-    },
-    // 加载文档
-    loadFile (fileUrl, bindObject, currResData) {
-      this.loading = true
-      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])
-              }
-            }
-          }
-          // 拿取多于模板中的数据
-          const diff = this.bindObject? Object.fromEntries(
-            Object.entries(this.bindObject)
-              .filter(([key]) => !(key in this.editorRef.getBindObject()))
-          ) : {}
-          this.codeData = {...this.codeData,...diff}
-          this.changeMode()
-          this.fileUrl = fileUrl
-          if (!currResData.f_file_name) {
-            currResData.f_file_name = '未命名'
-          }
-          this.currResData = currResData
-          this.loading = false
-          this.$emit('afterLoadFile', {})
-          resolve()
-        })
-      })
-    },
-    // 保存并作为模板
-    saveAsTemplate () {
-      this.isTemplate = 1
-      this.save()
-    },
-    // 加载文档列表
-    loadResList () {
-      console.log("getTemplateListLogic=======",this.logicExtraParams)
-      runLogic('getTemplateListLogic', this.logicExtraParams, this.serviceName).then(res => {
-        this.resList = res
-        this.toggleResId = this.resId
-      })
-    },
-    // 修改模式
-    changeMode (e) {
-      this.editorRef.execCommand(this.modeType)
-    },
-    // 启动录音功能
-    async Recording () {
-      this.recording = !this.recording
-      if (this.recording) {
-        const recording = await this.$recording.startRecording()
-        this.$message.warn(recording.msg)
-      } else {
-        try {
-          // 1. 获取录音和接口数据
-          const recording = this.$recording.stopRecording()
-          this.$message.warn(recording.msg)
-          const data = await this.$recording.getRecordingData()
-          const result = await this.runLogic('communacation', {record_content: data}, 'af-his')
-          // 验证基础结构
-          if (!result || typeof result.value !== 'string') {
-            throw new Error('接口返回格式错误，缺少有效的value字段')
-          }
-          // 2. 处理外层JSON字符串（关键修复）
-          let outerJsonStr = result.value
-          // 修复1：处理布尔值
-          outerJsonStr = outerJsonStr.replace(/\bTrue\b/g, 'true')
-          // 修复2：移除所有控制字符
-          outerJsonStr = outerJsonStr.replace(/[\x00-\x1F]/g, '')
-          // 修复3：精准转义data字段内的双引号
-          // 匹配 "data": "..." 结构并转义内容中的双引号
-          outerJsonStr = outerJsonStr.replace(/"data":\s*"([^"]*)"/g, (match, content) => {
-            // 转义内容中的双引号为\"
-            const escapedContent = content.replace(/"/g, '\\"')
-            return `"data": "${escapedContent}"`
-          })
-          // 直接在整个字符串里匹配 ```json{...}```
-          const regex = /```json([\s\S]*?)```/
-          const match = outerJsonStr.match(regex)
-          let extractedJsonStr = ''
-          if (match && match[1]) {
-            extractedJsonStr = match[1].trim()
-          }
-          const outerObj = JSON.parse(extractedJsonStr)
-          console.log("outerObj = ", outerObj)
-          this.temporaryParameter.bindObject = {...this.temporaryParameter.bindObject, ...outerObj}
-          this.init(this.temporaryParameter)
-        } catch (e) {
-          console.error('总错误:', e.message)
-          this.$message.error(`解析失败: ${e.message}`)
-        }
-      }
-    },
-    // 打开文档信息修改面板
-    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.assignBindObject = this.assignTemplates(this.bindObject, res.bindObject)
-        this.useTemplateData()
-      })
-    },
-    // 合并模板数据
-    assignTemplates (newBindObject, templateData) {
-      // 检查templates数组是否存在
-      if (!templateData.templates || !Array.isArray(templateData.templates)) {
-        console.warn('templateData.templates不存在或不是数组')
-        return newBindObject
-      }
-      // 遍历templates数组中的每个属性名
-      templateData.templates.forEach(propName => {
-        // 检查templateData是否有该属性
-        if (propName in templateData) {
-          // 无论newBindObject是否有该属性，都进行赋值/添加
-          newBindObject[propName] = templateData[propName]
-        } else {
-          console.warn(`templateData中不存在属性: ${propName}`)
-        }
-      })
-      return newBindObject
-    },
-    useTemplateData () {
-      // 确认是否有合并后的模板数据
-      if (!this.assignBindObject) {
-        this.$message.warning('没有可用的模板数据');
-        return;
-      }
-      this.editorRef.setBindObject(this.assignBindObject)
-      // console.log('resId', this.resId)
-    },
-    // 切换文档
-    changeRes (value) {
-      console.log('value', value)
-      let params = {
-        resId: value
-      }
-      if (value === -1) {
-        params = {
-          ...params,
-          admissionId: this.admissionId,
-          f_template_id: this.templateId
-        }
-        const that = this
-        this.$confirm({
-          title: '确认切换文档吗？',
-          content: '您有尚未保存的文档，切换文档将丢失所有的修改',
-          onOk () {
-            that.reload(params)
-            // that.userTemplateVisible = true
-          },
-          onCancel () {
-            that.toggleResId = that.resId
-          },
-        })
-      } else {
-        const selectedItem = this.resListCp.find(item => item.value === value);
-        console.log('selectedItem=================', selectedItem)
-        if(selectedItem.templateId != this.templateId){
-          runLogic('getFileInformation', selectedItem.params.params , this.serviceName).then(res => {
-            this.init({
-              modeType: this.modeType,
-              fileUrl: res.url,
-              resId: res.id,
-              currResData: res.currResData,
-              bindObject: res.bindObject,
-              saveDataLogicName: params?.saveDataLogicName,
-              serviceName: this.serviceName,
-              logicExtraParams: params?.logicExtraParams,
-              dropDownBoxParams: params?.dropDownBoxParams
-            }, false)
-          })
-        }else{
-          this.reload({resId: selectedItem.id})
-        }
-      }
-    },
-    // 保存文档
-    save () {
-      // 验证必须输入项
-      if (this.editorRef.validate()) {
-        // 获取HTML文档和结构化数据(JSON)
-        console.log('save',this.editorRef.getBindObject())
-        const data = {
-          doc: this.editorRef.getHtml(),
-          dataObject: {
-            ...this.editorRef.getBindObject(),
-            ...this.codeData // 合并 codeData 数据
-          },
-          dataMode: this.dataMode,
-          resId: this.resId,
-          modifyResModel: this.modifyResModel,
-          logicExtraParams: this.logicExtraParams,
-          is_template: this.isTemplate,
-          f_file_name: this.fileName
-        }
-        // 保存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
-          this.saveVisible = 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;
-}
-.editor-action-button {
-  .ant-btn-primary {
-    background-color: rgb(0, 87, 254) !important;
-  }
-}
-:deep(.ant-divider-horizontal) {
-  margin: 4px 0;
-}
-/* 组合按钮容器 - 关键修正 */
-.combined-save-btn {
-  display: inline-flex;
-  height: 32px;
-}
-
-/* 主保存按钮 - 保持原有样式 */
-.save-btn-main {
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-  border-right: none !important;
-  height: 32px;
-  padding: 0 15px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: -1px; /* 关键：负边距消除间距 */
-}
-
-/* 下拉按钮 - 仅调整间距 */
-.dropdown-trigger-btn {
-  height: 32px !important;
-  width: 24px !important;
-  min-width: 24px !important;
-  padding: 0 !important;
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 0px;
-}
-
-/* 下拉图标保持原样 */
-.dropdown-trigger-btn .anticon {
-  font-size: 12px;
-  margin: 0 !important;
-}
-.custom-radio-group {
-  .ant-radio-button-wrapper-checked {
-    background-color: rgb(0, 87, 254) !important;
-  }
-}
-</style>
+<template>
+  <div>
+    <div v-show="ready">
+      <a-row v-if="this.readonly" 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
+              class="custom-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-button">
+          <a-space>
+            <template v-if="this.modeType !== 'readonly'">
+              <!--              <a-button-->
+              <!--                type="primary"-->
+              <!--                v-if = "userTemplateVisible"-->
+              <!--                @click="useTemplateData"-->
+              <!--              >-->
+              <!--                使用-->
+              <!--              </a-button>-->
+              <a-button type="primary" @click="Recording" v-if="canRecord" v-model="recording">
+                {{ recording? '停止' : '录音' }}
+              </a-button>
+              <a-button type="primary" @click="openRenameModal" v-if="this.resId !== -1">
+                重命名
+              </a-button>
+              <!-- 组合按钮容器 -->
+              <div class="save-btn-main">
+                <!-- 保存按钮 (左侧) -->
+                <a-button
+                  type="primary"
+                  class="save-btn-main"
+                  @click="showSaveModal('normal')"
+                >
+                  保存
+                </a-button>
+
+                <!-- 下拉部分 (右侧) -->
+                <!-- 下拉触发部分 -->
+                <template v-if="modeType !== 'design'">
+                  <a-dropdown
+                    :trigger="['click']"
+                    placement="bottomRight">
+                    <a-button
+                      type="primary"
+                      class="dropdown-trigger-btn">
+                      <a-icon type="down" />
+                    </a-button>
+                    <a-menu slot="overlay">
+                      <a-menu-item @click="showSaveModal('template')">
+                        保存并作为模板
+                      </a-menu-item>
+                    </a-menu>
+                  </a-dropdown>
+                </template>
+              </div>
+              <a-modal
+                title="保存"
+                :visible="saveVisible"
+                :confirm-loading="false"
+                @ok="handleSaveConfirm"
+                @cancel="saveVisible = false"
+              >
+                <a-form-item label="文件名" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+                  <a-input
+                    v-model="fileName"
+                    placeholder="请输入文件名"
+                    @pressEnter="handleSaveConfirm"
+                  />
+                </a-form-item>
+              </a-modal>
+            </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 {
+      temporaryParameter: {},
+      canRecord: false,
+      recording: false, // 是否正在录音
+      readonly: false,
+      ready: false,
+      loading: false,
+      resDataModalMode: 'modify',
+      resDataModalVisible: false,
+      saveVisible: false,
+      // 使用按钮显隐控制
+      // userTemplateVisible: false,
+      objectOfAttrs: {
+        width: '100%',
+        height: '650vh',
+        frameborder: 0
+      },
+      // 数据模式
+      modeType: 'form',
+      // 是否显示模式切换功能
+      showModeChoose: true,
+      // 是否作为模板 1 是，0 否
+      isTemplate: 0,
+      // 模板id
+      templateId: undefined,
+      admissionId: undefined,
+      // 保存类型
+      saveType: 'normal',
+      fileName: '',
+      // 数据模式列表
+      modeList: [
+        {
+          label: '预览',
+          value: 'readonly'
+        },
+        {
+          label: '表单',
+          value: 'form'
+        },
+        {
+          label: '设计',
+          value: 'design'
+        }
+      ],
+      // 编辑器实例
+      editorRef: null,
+      // 文档资源列表
+      resList: [],
+      // 文档资源ID
+      resId: undefined,
+      // 文档链接
+      fileUrl: undefined,
+      // 文档绑定数据
+      bindObject: undefined,
+      // 合并模板数据后文档数据
+      assignBindObject: undefined,
+      // 数据模式 template:模板编辑；data:数据编辑
+      dataMode: undefined,
+      // 保存数据调用的Logic名称
+      saveDataLogicName: undefined,
+      // 保存数据调用Logic传入的额外参数
+      logicExtraParams: undefined,
+      // 服务名
+      serviceName: undefined,
+      // 当前文档信息
+      currResData: {},
+      // 切换的文档id
+      toggleResId: undefined,
+      // 待提交的修改信息
+      modifyResModel: {},
+      codeData: {},
+      resRules: {
+        f_file_name: [{ required: true, message: '请输入文档名', trigger: 'blur' }],
+      }
+    }
+  },
+  //      初始化    保存后        加载文件后    诊断选择
+  emits: ['init', 'saveafter', 'afterLoadFile', 'selected'],
+  methods: {
+    runLogic,
+    /* eslint-disable */
+    async initDiagnosisAutocomplete (dropDownBoxParams) {
+      console.log('dropDownBoxParams',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 });
+          that.codeData = { ...that.codeData, ...{[e.detail.codeKey]: e.detail.code} }
+        }
+      });
+
+      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);
+          }
+        }
+      }
+    },
+    showSaveModal (type) {
+      this.saveType = type  // 记录当前保存类型
+      if (type === 'template') {
+        this.saveVisible = true
+      }else {
+        if (this.resId !== -1 || this.resId !== undefined) {
+          this.save()
+        } else {
+          this.openAddResModal()
+        }
+      }
+
+    },
+    handleSaveConfirm () {
+      if (!this.fileName.trim()) {
+        this.$message.error('文件名不能为空')
+        return
+      }
+      this.saveAsTemplate()
+    },
+    /* eslint-disable */
+    // 初始化文档
+    onload (e) {
+      if (e && e.target && e.target.contentWindow) {
+        this.editorRef = e.target.contentWindow.editor
+        // 等待文档加载完成
+        this.$emit('init', {})
+      }
+    },
+    init (params, loadResList = true) {
+      console.log("===============>",params)
+      this.temporaryParameter = params
+      this.canRecord = params.canRecord == undefined || params.canRecord == null? false : params.canRecord
+      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'
+      }
+      if (logicExtraParams?.admissionId !== undefined && logicExtraParams?.templateId !== undefined) {
+        this.admissionId = logicExtraParams.admissionId
+        this.templateId = logicExtraParams.templateId
+      } else {
+        console.warn('病例id:admissionId不存在或模板id:templateId不存在')
+      }
+      this.saveDataLogicName = saveDataLogicName
+      this.logicExtraParams = logicExtraParams
+      this.serviceName = serviceName
+      this.showModeChoose = showModeChoose
+      this.modeType = (modeType === "readonly!" ? "readonly" :modeType)
+      this.readonly = (modeType !== "readonly!")
+      this.ready = true
+      // 先加载文件
+      this.loadFile(fileUrl, bindObject, currResData).then(async () => {
+        // 文件加载完成后再初始化自动完成
+        await this.initDiagnosisAutocomplete(dropDownBoxParams)
+      })
+      if(loadResList){
+        this.loadResList()
+      }
+    },
+    // 加载文档
+    loadFile (fileUrl, bindObject, currResData) {
+      this.loading = true
+      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])
+              }
+            }
+          }
+          // 拿取多于模板中的数据
+          const diff = this.bindObject? Object.fromEntries(
+            Object.entries(this.bindObject)
+              .filter(([key]) => !(key in this.editorRef.getBindObject()))
+          ) : {}
+          this.codeData = {...this.codeData,...diff}
+          this.changeMode()
+          this.fileUrl = fileUrl
+          if (!currResData.f_file_name) {
+            currResData.f_file_name = '未命名'
+          }
+          this.currResData = currResData
+          this.loading = false
+          this.$emit('afterLoadFile', {})
+          resolve()
+        })
+      })
+    },
+    // 保存并作为模板
+    saveAsTemplate () {
+      this.isTemplate = 1
+      this.save()
+    },
+    // 加载文档列表
+    loadResList () {
+      console.log("getTemplateListLogic=======",this.logicExtraParams)
+      runLogic('getTemplateListLogic', this.logicExtraParams, this.serviceName).then(res => {
+        this.resList = res
+        this.toggleResId = this.resId
+      })
+    },
+    // 修改模式
+    changeMode (e) {
+      this.editorRef.execCommand(this.modeType)
+    },
+    // 启动录音功能
+    async Recording () {
+      this.recording = !this.recording
+      if (this.recording) {
+        const recording = await this.$recording.startRecording()
+        this.$message.warn(recording.msg)
+      } else {
+        try {
+          // 1. 获取录音和接口数据
+          const recording = this.$recording.stopRecording()
+          this.$message.warn(recording.msg)
+          const data = await this.$recording.getRecordingData()
+          const result = await this.runLogic('communacation', {record_content: data}, 'af-his')
+          // 验证基础结构
+          if (!result || typeof result.value !== 'string') {
+            throw new Error('接口返回格式错误，缺少有效的value字段')
+          }
+          // 2. 处理外层JSON字符串（关键修复）
+          let outerJsonStr = result.value
+          // 修复1：处理布尔值
+          outerJsonStr = outerJsonStr.replace(/\bTrue\b/g, 'true')
+          // 修复2：移除所有控制字符
+          outerJsonStr = outerJsonStr.replace(/[\x00-\x1F]/g, '')
+          // 修复3：精准转义data字段内的双引号
+          // 匹配 "data": "..." 结构并转义内容中的双引号
+          outerJsonStr = outerJsonStr.replace(/"data":\s*"([^"]*)"/g, (match, content) => {
+            // 转义内容中的双引号为\"
+            const escapedContent = content.replace(/"/g, '\\"')
+            return `"data": "${escapedContent}"`
+          })
+          // 直接在整个字符串里匹配 ```json{...}```
+          const regex = /```json([\s\S]*?)```/
+          const match = outerJsonStr.match(regex)
+          let extractedJsonStr = ''
+          if (match && match[1]) {
+            extractedJsonStr = match[1].trim()
+          }
+          const outerObj = JSON.parse(extractedJsonStr)
+          console.log("outerObj = ", outerObj)
+          this.temporaryParameter.bindObject = {...this.temporaryParameter.bindObject, ...outerObj}
+          this.init(this.temporaryParameter)
+        } catch (e) {
+          console.error('总错误:', e.message)
+          this.$message.error(`解析失败: ${e.message}`)
+        }
+      }
+    },
+    // 打开文档信息修改面板
+    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.assignBindObject = this.assignTemplates(this.bindObject, res.bindObject)
+        this.useTemplateData()
+      })
+    },
+    // 合并模板数据
+    assignTemplates (newBindObject, templateData) {
+      // 检查templates数组是否存在
+      if (!templateData.templates || !Array.isArray(templateData.templates)) {
+        console.warn('templateData.templates不存在或不是数组')
+        return newBindObject
+      }
+      // 遍历templates数组中的每个属性名
+      templateData.templates.forEach(propName => {
+        // 检查templateData是否有该属性
+        if (propName in templateData) {
+          // 无论newBindObject是否有该属性，都进行赋值/添加
+          newBindObject[propName] = templateData[propName]
+        } else {
+          console.warn(`templateData中不存在属性: ${propName}`)
+        }
+      })
+      return newBindObject
+    },
+    useTemplateData () {
+      // 确认是否有合并后的模板数据
+      if (!this.assignBindObject) {
+        this.$message.warning('没有可用的模板数据');
+        return;
+      }
+      this.editorRef.setBindObject(this.assignBindObject)
+      // console.log('resId', this.resId)
+    },
+    // 切换文档
+    changeRes (value) {
+      console.log('value', value)
+      let params = {
+        resId: value
+      }
+      if (value === -1) {
+        params = {
+          ...params,
+          admissionId: this.admissionId,
+          f_template_id: this.templateId
+        }
+        const that = this
+        this.$confirm({
+          title: '确认切换文档吗？',
+          content: '您有尚未保存的文档，切换文档将丢失所有的修改',
+          onOk () {
+            that.reload(params)
+            // that.userTemplateVisible = true
+          },
+          onCancel () {
+            that.toggleResId = that.resId
+          },
+        })
+      } else {
+        const selectedItem = this.resListCp.find(item => item.value === value);
+        console.log('selectedItem=================', selectedItem)
+        if(selectedItem.templateId != this.templateId){
+          runLogic('getFileInformation', selectedItem.params.params , this.serviceName).then(res => {
+            this.init({
+              modeType: this.modeType,
+              fileUrl: res.url,
+              resId: res.id,
+              currResData: res.currResData,
+              bindObject: res.bindObject,
+              saveDataLogicName: params?.saveDataLogicName,
+              serviceName: this.serviceName,
+              logicExtraParams: params?.logicExtraParams,
+              dropDownBoxParams: params?.dropDownBoxParams
+            }, false)
+          })
+        }else{
+          this.reload({resId: selectedItem.id})
+        }
+      }
+    },
+    // 保存文档
+    save () {
+      // 验证必须输入项
+      if (this.editorRef.validate()) {
+        // 获取HTML文档和结构化数据(JSON)
+        console.log('save',this.editorRef.getBindObject())
+        const data = {
+          doc: this.editorRef.getHtml(),
+          dataObject: {
+            ...this.editorRef.getBindObject(),
+            ...this.codeData // 合并 codeData 数据
+          },
+          dataMode: this.dataMode,
+          resId: this.resId,
+          modifyResModel: this.modifyResModel,
+          logicExtraParams: this.logicExtraParams,
+          is_template: this.isTemplate,
+          f_file_name: this.fileName
+        }
+        // 保存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
+          this.saveVisible = 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;
+}
+.editor-action-button {
+  .ant-btn-primary {
+    background-color: rgb(0, 87, 254) !important;
+  }
+}
+:deep(.ant-divider-horizontal) {
+  margin: 4px 0;
+}
+/* 组合按钮容器 - 关键修正 */
+.combined-save-btn {
+  display: inline-flex;
+  height: 32px;
+}
+
+/* 主保存按钮 - 保持原有样式 */
+.save-btn-main {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-right: none !important;
+  height: 32px;
+  padding: 0 15px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: -1px; /* 关键：负边距消除间距 */
+}
+
+/* 下拉按钮 - 仅调整间距 */
+.dropdown-trigger-btn {
+  height: 32px !important;
+  width: 24px !important;
+  min-width: 24px !important;
+  padding: 0 !important;
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0px;
+}
+
+/* 下拉图标保持原样 */
+.dropdown-trigger-btn .anticon {
+  font-size: 12px;
+  margin: 0 !important;
+}
+.custom-radio-group {
+  .ant-radio-button-wrapper-checked {
+    background-color: rgb(0, 87, 254) !important;
+  }
+}
+</style>