电子病历工具栏

src/components/zhu-yuan-yi-sheng/emr/EmrUnorderedList.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="main">
+    <div v-for="item in tempList()" class="main__item" @click="clickList(item)">
+      <div v-if="item === '无'" class="empty">
+        无
+      </div>
+      <div v-else style="height:100%;  ">
+        <div v-for="it in 4" class="describe">
+          <div class="written_words">
+            {{ orderedListFunc(item, it - 1) }}
+          </div>
+          <div class="horizontal_line"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup name='EmrUnorderedList'>
+const props = defineProps({
+  listType: {
+    type: String,
+    default: 'orderly' | 'disorder'
+  }
+})
+
+const emit = defineEmits(['clickList'])
+
+let list = {
+  orderly: ["无", "${1}.", "${1}、", "${1})", "(${1})", "${一}、", "(${一})", "${A}."],
+  disorder: ["无", "${●}", "${➢}", "${✓}", "${○}", "${✧}"]
+}
+
+let capitalChinese = ['一', '二', '三', '四']
+
+const orderedListFunc = (val, index) => {
+  let start = val.indexOf('$')
+  let end = val.indexOf('}')
+  let tempVal = val.substring(start, end + 1)
+  let str = tempVal.substring(2, 3)
+
+  if (props.listType === 'orderly') {
+    if (str === '一') {
+      return val.replace(tempVal, capitalChinese[index])
+    } else if (str === 'A') {
+      return val.replace(tempVal, String.fromCharCode(str.charCodeAt(0) + index))
+    }
+    return val.replace(tempVal, index + 1)
+  }
+  return str
+}
+
+let tempList = () => {
+  return list[props.listType]
+}
+
+const clickList = (val) => {
+  if (val === '无') {
+    emit('clickList', null)
+  } else {
+    emit('clickList', val)
+  }
+}
+
+
+</script>
+
+<style scoped lang="scss">
+.main {
+  border-radius: 5px;
+  width: 262px;
+  background-color: white;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding: 5px;
+
+  .empty {
+    line-height: 84px;
+    text-align: center;
+  }
+
+  .main__item {
+    width: calc((100% - 40px) / 3);
+    border: 1px solid #e0e0e0;
+    margin: 5px;
+    height: 84px;
+    user-select: none;
+    cursor: pointer;
+
+    :hover {
+      box-shadow: var(--el-box-shadow);
+    }
+  }
+
+  .describe {
+    height: calc(84px / 4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .written_words {
+      font-size: 14px;
+    }
+  }
+
+  .horizontal_line {
+    width: 40%;
+    margin-left: 5px;
+    background: #e1e3e5;
+    height: 2px
+  }
+}
+
+</style>

src/components/zhu-yuan-yi-sheng/public/PatientList.vue

@@ -57,12 +57,12 @@
                            :name="['consultPhysician', 'consultPhysicianName']"
                            dept-code/>
       </el-form-item>
-      <el-form-item label="科室医生：">
+      <el-form-item label="主任医生：">
 
         <select-staff-code v-model="thirdLevelDoctorSetting.data"
                            :name="['deptDirector', 'deptDirectorName']" dept-code/>
       </el-form-item>
-      <el-form-item label="科室医生：">
+      <el-form-item label=" ">
         <el-button @click="submitToTheThirdLevelDoctor">提交</el-button>
       </el-form-item>
     </el-form>

src/icons/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2473230 */
-  src: url('iconfont.woff2?t=1673665866389') format('woff2'),
-       url('iconfont.woff?t=1673665866389') format('woff'),
-       url('iconfont.ttf?t=1673665866389') format('truetype');
+  src: url('iconfont.woff2?t=1673837507848') format('woff2'),
+       url('iconfont.woff?t=1673837507848') format('woff'),
+       url('iconfont.ttf?t=1673837507848') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-yousuojin:before {
+  content: "\e64c";
+}
+
+.icon-zuosuojin:before {
+  content: "\e64e";
+}
+
+.icon-youxuliebiao:before {
+  content: "\e62b";
+}
+
+.icon-wuxuliebiao:before {
+  content: "\e634";
+}
+
 .icon-juzhongduiqi:before {
   content: "\ec80";
 }

src/views/hospitalization/zhu-yuan-yi-sheng/electronic-medical-record/EmrMain.vue

@@ -85,108 +85,146 @@
       <el-main v-loading="loaded">
         <el-row>
           <el-col :span="20">
-            <div class="tool_emr">
-              <el-select style="width: 150px;"
-                         @change="textStyleFunc.fontFamily()"
-                         v-model="emrStyle.fontFamily">
-                <el-option v-for="item in availableFonts"
-                           :value="item.font"
-                           :label="item.text">
+            <div style="height: 30px" @mousewheel="mousewheel($event)">
+              <el-scrollbar ref="tootScrollRef" @scroll="scroll">
+                <div class="tool_emr">
+                  <el-select style="width: 150px;"
+                             @change="textStyleFunc.fontFamily()"
+                             v-model="emrStyle.fontFamily">
+                    <el-option v-for="item in availableFonts"
+                               :value="item.font"
+                               :label="item.text">
                   <span :style="{'fontFamily':item.font }">
                     {{ item.text }}
                   </span>
-                </el-option>
-              </el-select>
-              <el-select style="width: 70px;"
-                         @change="textStyleFunc.fontSize()"
-                         v-model="emrStyle.fontSize">
-                <el-option v-for="item in fontSizes"
-                           :value="item.code"
-                           :label="item.name"/>
-              </el-select>
-              <el-divider direction="vertical"/>
-              <el-button-group>
-                <el-button @click="styleFunc('fontSizeAdjust','increase')"
-                           title="放大字体">
-                  +
-                </el-button>
-                <el-button @click="styleFunc('fontSizeAdjust','decrease')"
-                           title="缩小字体">
-                  -
-                </el-button>
-              </el-button-group>
-              <el-divider direction="vertical"/>
-              <el-button-group>
-                <el-button
-                    title="字体加粗"
-                    :class="buttonClass('fontWeight','bold')"
-                    @click="textStyleFunc.fontWeight()">
-                  <i class="iconfont icon-jiacu"></i>
-                </el-button>
-                <el-button
-                    title="斜体"
-                    :class="buttonClass('fontStyle','oblique')"
-                    @click="textStyleFunc.fontStyle()">
-                  <i class="iconfont icon-xieti"></i>
-                </el-button>
-                <el-button
-                    title="下划线"
-                    :class="buttonClass('underline')"
-                    @click="textStyleFunc.underline()">
-                  <i class="iconfont icon-xiahuaxian"></i>
-                </el-button>
-                <el-button
-                    title="删除线"
-                    :class="buttonClass('lineThrough')"
-                    @click="textStyleFunc.lineThrough()">
-                  <i class="iconfont icon-shanchuxian"></i>
-                </el-button>
-                <el-button
-                    title="上标"
-                    :class="buttonClass('super')"
-                    @click="textStyleFunc.super()">
-                  <i class="iconfont icon-zitishangbiao"></i>
-                </el-button>
-                <el-button
-                    title="下标"
-                    :class="buttonClass('sub')"
-                    @click="textStyleFunc.sub()">
-                  <i class="iconfont icon-zitixiabiao"></i>
-                </el-button>
-              </el-button-group>
-              <div class="color_picker"
-                   title="字体颜色">
-                <i class="iconfont icon-zitiyanse"></i>
-                <el-color-picker v-model="emrStyle.color"
-                                 @change="textStyleFunc.color()"
-                                 :predefine="predefineColors"/>
-              </div>
-              <div class="color_picker"
-                   title="背景颜色">
-                <i class="iconfont icon-beijingyanse"></i>
-                <el-color-picker v-model="emrStyle.backgroundColor"
-                                 @change="textStyleFunc.backgroundColor()"
-                                 :predefine="predefineColors"/>
-              </div>
-              <el-divider direction="vertical"/>
-              <el-button-group>
-                <el-button title="左对齐"
-                           @click="textStyleFunc.alignment('left')">
-                  <i class="iconfont icon-zuoduiqi"></i>
-                </el-button>
-                <el-button title="居中对其"
-                           @click="textStyleFunc.alignment('center')">
-                  <i class="iconfont icon-juzhongduiqi"></i>
-                </el-button>
-                <el-button title="右对齐"
-                           @click="textStyleFunc.alignment('right')">
-                  <i class="iconfont icon-youduiqi"></i>
-                </el-button>
-                <el-button title="两端对齐"
-                           @click="textStyleFunc.alignment('justify')">
-                  <i class="iconfont icon-zuoyouduiqi"></i>
-                </el-button>
-              </el-button-group>
+                    </el-option>
+                  </el-select>
+                  <el-select style="width: 70px;"
+                             @change="textStyleFunc.fontSize()"
+                             v-model="emrStyle.fontSize">
+                    <el-option v-for="item in fontSizes"
+                               :value="item.code"
+                               :label="item.name"/>
+                  </el-select>
+                  <el-divider direction="vertical"/>
+                  <el-button-group>
+                    <el-button @click="styleFunc('fontSizeAdjust','increase')"
+                               title="放大字体">
+                      +
+                    </el-button>
+                    <el-button @click="styleFunc('fontSizeAdjust','decrease')"
+                               title="缩小字体">
+                      -
+                    </el-button>
+                  </el-button-group>
+                  <el-divider direction="vertical"/>
+                  <el-button-group>
+                    <el-button
+                        title="字体加粗"
+                        :class="buttonClass('fontWeight','bold')"
+                        @click="textStyleFunc.fontWeight()">
+                      <i class="iconfont icon-jiacu"></i>
+                    </el-button>
+                    <el-button
+                        title="斜体"
+                        :class="buttonClass('fontStyle','oblique')"
+                        @click="textStyleFunc.fontStyle()">
+                      <i class="iconfont icon-xieti"></i>
+                    </el-button>
+                    <el-button
+                        title="下划线"
+                        :class="buttonClass('underline')"
+                        @click="textStyleFunc.underline()">
+                      <i class="iconfont icon-xiahuaxian"></i>
+                    </el-button>
+                    <el-button
+                        title="删除线"
+                        :class="buttonClass('lineThrough')"
+                        @click="textStyleFunc.lineThrough()">
+                      <i class="iconfont icon-shanchuxian"></i>
+                    </el-button>
+                    <el-button
+                        title="上标"
+                        :class="buttonClass('super')"
+                        @click="textStyleFunc.super()">
+                      <i class="iconfont icon-zitishangbiao"></i>
+                    </el-button>
+                    <el-button
+                        title="下标"
+                        :class="buttonClass('sub')"
+                        @click="textStyleFunc.sub()">
+                      <i class="iconfont icon-zitixiabiao"></i>
+                    </el-button>
+                  </el-button-group>
+                  <div class="color_picker"
+                       title="字体颜色">
+                    <i class="iconfont icon-zitiyanse"></i>
+                    <el-color-picker v-model="emrStyle.color"
+                                     @change="textStyleFunc.color()"
+                                     :predefine="predefineColors"/>
+                  </div>
+                  <div class="color_picker"
+                       title="背景颜色">
+                    <i class="iconfont icon-beijingyanse"></i>
+                    <el-color-picker v-model="emrStyle.backgroundColor"
+                                     @change="textStyleFunc.backgroundColor()"
+                                     :predefine="predefineColors"/>
+                  </div>
+                  <el-divider direction="vertical"/>
+                  <el-button-group>
+                    <el-popover
+                        :width="0"
+                        trigger="click">
+                      <template #reference>
+                        <el-button title="无序列表">
+                          <i class="iconfont icon-wuxuliebiao"></i>
+                        </el-button>
+                      </template>
+                      <emr-unordered-list list-type="disorder" @click-list="textStyleFunc.unorderedList"/>
+                    </el-popover>
+                    <el-popover
+                        :width="0"
+                        trigger="click">
+                      <template #reference>
+                        <el-button title="有序列表">
+                          <i class="iconfont icon-youxuliebiao"></i>
+                        </el-button>
+                      </template>
+                      <emr-unordered-list list-type="orderly" @click-list="textStyleFunc.orderedList"/>
+                    </el-popover>
+                  </el-button-group>
+                  <el-divider direction="vertical"/>
+                  <el-button-group>
+                    <el-button title="左对齐"
+                               @click="textStyleFunc.alignment('left')">
+                      <i class="iconfont icon-zuoduiqi"></i>
+                    </el-button>
+                    <el-button title="居中对其"
+                               @click="textStyleFunc.alignment('center')">
+                      <i class="iconfont icon-juzhongduiqi"></i>
+                    </el-button>
+                    <el-button title="右对齐"
+                               @click="textStyleFunc.alignment('right')">
+                      <i class="iconfont icon-youduiqi"></i>
+                    </el-button>
+                    <el-button title="两端对齐"
+                               @click="textStyleFunc.alignment('justify')">
+                      <i class="iconfont icon-zuoyouduiqi"></i>
+                    </el-button>
+                  </el-button-group>
+                  <el-divider direction="vertical"/>
+                  <el-button-group>
+                    <el-button title="增加缩进"
+                               @click="textStyleFunc.indent(1)">
+                      <i class="iconfont icon-yousuojin"></i>
+                    </el-button>
+                    <el-button title="减小缩进"
+                               @click="textStyleFunc.indent(-1)">
+                      <i class="iconfont icon-zuosuojin"></i>
+                    </el-button>
+                  </el-button-group>
+                </div>
+              </el-scrollbar>
             </div>
             <div class="emr-iframe">
               <iframe ref="emrRef"
@@ -235,6 +273,7 @@ import EmrAssistant from "@/components/zhu-yuan-yi-sheng/emr/EmrAssistant.vue";
 import XcDialogV2 from "@/components/xiao-chan/dialog/XcDialogV2.vue";
 import {getWardsApi} from "@/api/login";
 import {xcMessage} from "@/utils/xiaochan-element-plus";
+import EmrUnorderedList from "@/components/zhu-yuan-yi-sheng/emr/EmrUnorderedList.vue";
 
 const props = defineProps({
   huanZheXinXi: {
@@ -310,7 +349,7 @@ let emrStyle = $ref({
   // 颜色
   color: '',
   backgroundColor: '',
-  paragraphSetting: {}
+  paragraphStyle: {}
 })
 const predefineColors = ref([
   '#ff4500',
@@ -623,7 +662,8 @@ const emrEvent = {
     emrStyle.sub = context.subScript
     emrStyle.color = context.color
     emrStyle.backgroundColor = context.backgroundColor
-    emrStyle.paragraphSetting = context.paragraphSetting
+    emrStyle.paragraphStyle = context.paragraphStyle
+
     console.log(evt, contextMap, component, context)
   },
 
@@ -845,9 +885,11 @@ let doctorLevel = 1;
 const doctorLevelFunc = () => {
   if (extractFields('管床医生编码') === userData.code) {
     doctorLevel = 1
-  } else if (extractFields('主治医生编码') === userData.code) {
+  }
+  if (extractFields('主治医生编码') === userData.code) {
     doctorLevel = 2
-  } else if (extractFields('主任医生编码') === userData.code) {
+  }
+  if (extractFields('主任医生编码') === userData.code) {
     doctorLevel = 3
   }
 }
@@ -929,17 +971,6 @@ const paginationSymbol = () => {
   editor.execute('insertContents', {value: [{type: 'pagebreak'}]})
 }
 
-// 通用的方法
-const styleFunc = (name, value) => {
-  emrStyle[name] = value
-  editor.execute(name, {value: value})
-}
-
-const styleFuncNormal = (name, style) => {
-  let value = emrStyle[name]
-  styleFunc(name, value === 'normal' ? style : 'normal')
-}
-
 const textStyleFunc = ref({
   fontFamily: () => {
     editor.execute('fontFamily', {value: emrStyle.fontFamily})
@@ -988,37 +1019,43 @@ const textStyleFunc = ref({
     editor.execute('backgroundColor', {value: emrStyle.backgroundColor})
   },
   alignment: (val) => {
-    return
-    emrStyle.paragraphSetting.textAlign = {value: val}
-    console.log(emrStyle.paragraphSetting)
-
-
-    editor.execute('paragraphSetting', {
-      value: {
-        "lineHeight": {
-          "type": "单倍行距",
-          "value": 1
-        },
-        "paragraphSpacing": {
-          "before": 0,
-          "after": 0
-        },
-        "paragraphIndent": {
-          "left": 0,
-          "right": 0
-        },
-        "specialIndent": {
-          "type": "无",
-          "value": 0
-        },
-        "textAlign": {
-          "value": "center"
-        }
-      }
-    })
+    editor.execute('textAlign', {value: val})
+  },
+  unorderedList: (val) => {
+    if (val === null) {
+      editor.execute("nonList", {
+        value: "none"
+      })
+    }
+    editor.execute('symbolList', {"value": val})
+  },
+  orderedList: (val) => {
+    if (val === null) {
+      editor.execute("nonList", {
+        value: "none"
+      })
+    }
+    //设置有序列表
+    editor.execute('orderList', {"value": val})
+  },
+  indent: (val) => {
+    emrStyle.paragraphStyle.specialIndent.value += val
+    editor.execute('paragraphStyle', {value: emrStyle.paragraphStyle})
+    console.log({value: emrStyle.paragraphStyle})
   }
 })
 
+const scroll = ({scrollLeft: left, scrollTop}) => {
+  scrollLeft = left
+}
+
+const tootScrollRef = ref(null)
+let scrollLeft = 0
+const mousewheel = (e) => {
+  let eventDelta = -e.wheelDelta || -e.deltaY * 40;
+  tootScrollRef.value?.setScrollLeft(scrollLeft + eventDelta);
+}
+
 const buttonClass = (val, activation = true) => {
   if (emrStyle[val] === activation) {
     return 'emr__button_select'
@@ -1084,7 +1121,7 @@ onBeforeRouteLeave((to, from, next) => {
 }
 
 .tool_emr {
-  width: 100%;
+  width: 1326px;
   height: 30px;
   background-color: #f0f0f0;
   display: flex;