web_dist/src/components/zhu-yuan-yi-sheng/emr/EmrEditorTool.vue

<template>
  <div class="emr_editor_tool">
    <el-select v-model="emrStyle.fontFamily"
               ref="fontFamilyRef"
               @change="styleFunc('fontFamily',emrStyle.fontFamily)"
               style="width: 150px;">
      <el-option v-for="item in availableFonts" :value="item.font" :label="item.text"/>
    </el-select>

    <el-select v-model="emrStyle.fontSize">

    </el-select>

  </div>
</template>

<script setup name='EmrEditorTool' lang="ts">
import {availableFonts} from "@/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/emr-editor/emr-init";
import {defineProps, ref} from 'vue'

const props = defineProps({
  editor: {
    type: Object
  },
  getEdit: {
    type: Function
  }
})

let emrStyle = $ref({
  // 字体样式
  fontFamily: '"Microsoft YaHei"',
  // 字体大小
  fontSize: '10.5pt',
  // 字体加粗
  fontWeight: 'normal',
  // 斜体
  fontStyle: 'normal',
  // 设置字体下划线、删除线
  underline: 'none'
})

const fontFamilyRef = ref(null)

const blur = () => {
  fontFamilyRef.value.blur()
}

const styleFunc = (name, value) => {
  emrStyle[name] = value
  console.log(props.getEdit())
  props.getEdit().execute(name, {value: value})
  // props.editor.execute(name, {value: value})
}

const styleFuncNormal = (name, style) => {
  let value = emrStyle[name]
  styleFunc(name, value === 'normal' ? style : 'normal')
}

const updateStyleValue = (context) => {
  emrStyle.fontSize = context.fontSize
  emrStyle.fontFamily = context.fontFamily
  emrStyle.fontStyle = context.italic ? 'oblique' : 'normal'
  emrStyle.fontWeight = context.bold ? 'bold' : 'normal'
}

const emrContextUpdate = (value) => {
  blur()
  updateStyleValue(value)
}

defineExpose({
  emrContextUpdate
})

</script>

<style scoped lang="scss">
.emr_editor_tool {
  width: 100%;
  height: 30px;
  background-color: #f0f0f0
}
</style>