vue2-client 1.12.2 → 1.12.3-9.alpha.1

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

@@ -1,359 +1,360 @@
-<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'
-
-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: 'readonly',
-      // 是否显示模式切换功能
-      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' }],
-      }
-    }
-  },
-  methods: {
-    // 初始化文档
-    onload: function (e) {
-      this.editorRef = e.target.contentWindow.editor
-      this.$emit('init', {})
-    },
-    // 初始化组件
-    init (params) {
-      const {
-        fileUrl,
-        resId,
-        currResData = {},
-        bindObject,
-        saveDataLogicName,
-        logicExtraParams,
-        serviceName,
-        showModeChoose = true,
-        modeType = 'readonly'
-      } = 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)
-      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])
-            }
-          }
-        }
-        this.changeMode()
-        this.fileUrl = fileUrl
-        if (!currResData.f_file_name) {
-          currResData.f_file_name = '未命名'
-        }
-        this.currResData = currResData
-        this.loading = false
-        this.$emit('afterLoadFile', {})
-      })
-    },
-    // 加载文档列表
-    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 () {
-      const params = Object.assign({
-        isAddForce: true
-      }, this.logicExtraParams)
-      this.reload(params)
-    },
-    // 重新加载
-    reload (params) {
-      runLogic('getMedicalRecord', 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
-        })
-      })
-    },
-    // 切换文档
-    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)
-        }).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>
+<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'
+
+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: 'readonly',
+      // 是否显示模式切换功能
+      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' }],
+      }
+    }
+  },
+  methods: {
+    runLogic,
+    // 初始化文档
+    onload: function (e) {
+      this.editorRef = e.target.contentWindow.editor
+      this.$emit('init', {})
+    },
+    // 初始化组件
+    init (params) {
+      const {
+        fileUrl,
+        resId,
+        currResData = {},
+        bindObject,
+        saveDataLogicName,
+        logicExtraParams,
+        serviceName,
+        showModeChoose = true,
+        modeType = 'readonly'
+      } = 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)
+      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])
+            }
+          }
+        }
+        this.changeMode()
+        this.fileUrl = fileUrl
+        if (!currResData.f_file_name) {
+          currResData.f_file_name = '未命名'
+        }
+        this.currResData = currResData
+        this.loading = false
+        this.$emit('afterLoadFile', {})
+      })
+    },
+    // 加载文档列表
+    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 () {
+      const params = Object.assign({
+        isAddForce: true
+      }, this.logicExtraParams)
+      this.reload(params)
+    },
+    // 重新加载
+    reload (params) {
+      runLogic('getMedicalRecord', 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
+        })
+      })
+    },
+    // 切换文档
+    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)
+        }).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>