编码员质控

src/directive/el-drag-dialog/drag.js

@@ -0,0 +1,77 @@
+export default {
+  bind(el, binding, vnode) {
+    const dialogHeaderEl = el.querySelector('.el-dialog__header')
+    const dragDom = el.querySelector('.el-dialog')
+    dialogHeaderEl.style.cssText += ';cursor:move;'
+    dragDom.style.cssText += ';top:0px;'
+
+    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    const getStyle = (function() {
+      if (window.document.currentStyle) {
+        return (dom, attr) => dom.currentStyle[attr]
+      } else {
+        return (dom, attr) => getComputedStyle(dom, false)[attr]
+      }
+    })()
+
+    dialogHeaderEl.onmousedown = (e) => {
+      // 鼠标按下，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft
+      const disY = e.clientY - dialogHeaderEl.offsetTop
+
+      const dragDomWidth = dragDom.offsetWidth
+      const dragDomHeight = dragDom.offsetHeight
+
+      const screenWidth = document.body.clientWidth
+      const screenHeight = document.body.clientHeight
+
+      const minDragDomLeft = dragDom.offsetLeft
+      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+
+      const minDragDomTop = dragDom.offsetTop
+      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
+
+      // 获取到的值带px 正则匹配替换
+      let styL = getStyle(dragDom, 'left')
+      let styT = getStyle(dragDom, 'top')
+
+      if (styL.includes('%')) {
+        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
+        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+      } else {
+        styL = +styL.replace(/\px/g, '')
+        styT = +styT.replace(/\px/g, '')
+      }
+
+      document.onmousemove = function(e) {
+        // 通过事件委托，计算移动的距离
+        let left = e.clientX - disX
+        let top = e.clientY - disY
+
+        // 边界处理
+        if (-(left) > minDragDomLeft) {
+          left = -minDragDomLeft
+        } else if (left > maxDragDomLeft) {
+          left = maxDragDomLeft
+        }
+
+        if (-(top) > minDragDomTop) {
+          top = -minDragDomTop
+        } else if (top > maxDragDomTop) {
+          top = maxDragDomTop
+        }
+
+        // 移动当前元素
+        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+
+        // emit onDrag event
+        vnode.child.$emit('dragDialog')
+      }
+
+      document.onmouseup = function(e) {
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+}

src/directive/el-drag-dialog/index.js

@@ -0,0 +1,13 @@
+import drag from './drag'
+
+const install = function(Vue) {
+  Vue.directive('el-drag-dialog', drag)
+}
+
+if (window.Vue) {
+  window['el-drag-dialog'] = drag
+  Vue.use(install); // eslint-disable-line
+}
+
+drag.install = install
+export default drag

src/main.js

@@ -26,6 +26,9 @@ import '@/mixins';
 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
 
+// 注册全局指令
+import elDragDialog from './directive/el-drag-dialog'
+Vue.use(elDragDialog, { directiveName: 'el-drag-dialog' })
 
 // 全局组件
 import CardTitle from '@/components/CardTitle'

src/views/data/query/index.vue

@@ -369,7 +369,7 @@ export default {
       value1: '',
       selectList: [],
       labelText: '',
-      keyList: ['OPE_LEVEL', 'SSPB', 'ABC03C', 'RYQK', 'AAA02C', 'RJSS', 'AEM01C', 'AAC11N', 'LNSSQ', 'LNSSH', 'AEL01', 'AEE10'],
+      keyList: ['OPE_LEVEL', 'SSPB', 'ABC03C', 'RYQK', 'AAA02C', 'RJSS', 'AEM01C', 'AAC11N', 'LNSSQ', 'LNSSH', 'AEL01', 'AEE10', 'AEE03', 'AEE04'],
       tabKeyList: [
         'ICD10_ID1_first',
         'ICD10_NAME_first',
@@ -661,7 +661,7 @@ export default {
             id: '2',
           },
         ];
-      } else if (val.key == 'AEE10') {
+      } else if (['AEE10', 'AEE03', 'AEE04'].includes(val.key)) {
         val.selectList = [
           {
             label: '全部',

src/views/medicalRecord/components/ControlDialog.vue

@@ -0,0 +1,208 @@
+<template>
+  <el-dialog
+    title="病案数据治理与服务平台"
+    :visible.sync="data.bSwitch"
+    v-el-drag-dialog
+    width="400px"
+    top="19vh"
+    :modal="false"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <div class="score-box">
+      <span>病案评分</span>
+      <span class="score">99</span>
+      <el-image class="level" style="width: 47px; height: 41px" :src="require('../../../assets/images/icon-jia.png')" fit="contain"></el-image>
+    </div>
+    <div class="legend-box">
+      <span class="qz">强制</span>
+      <span class="jy">建议</span>
+    </div>
+    <div class="cont-reight-bottom" v-for="(item, index) in controls.list" :key="index">
+      <div :class="item.level == 1 ? 'cont-reight-bottom-title-null' : 'cont-reight-bottom-title'">
+        <span v-if="item.category == 0">A类</span>
+        <span v-if="item.category == 1">B类</span>
+        <span v-if="item.category == 2">C类</span>
+        <span v-if="item.category == 3">D类</span>
+        -{{ item.down }}
+      </div>
+      <div class="cont-reight-bottom-conter">
+        <p>字段：{{ item.error_name }}</p>
+        <p>提示：{{ item.desc }}</p>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: {
+        bSwitch: false,
+        zyh: '',
+      },
+    },
+  },
+  data() {
+    return {
+      controls: {
+        ZYH: '721905',
+        score: {
+          score: 98.5,
+          level: 0,
+        },
+        list: [
+          {
+            error_rule: 6,
+            desc: '健康卡号未填写',
+            level: 0,
+            error_field: 'AAA29',
+            error_name: '健康卡号',
+            category: 4,
+            down: 0.5,
+          },
+          {
+            error_rule: 16,
+            desc: '现住址邮政编码未填写',
+            level: 0,
+            error_field: 'AAA17C',
+            error_name: '现住址邮政编码',
+            category: 4,
+            down: 0.5,
+          },
+          {
+            error_rule: 23,
+            desc: '联系人关系未填写',
+            level: 0,
+            error_field: 'AAA23C',
+            error_name: '联系人关系',
+            category: 4,
+            down: 0.5,
+          },
+        ],
+      },
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep .el-dialog {
+  float: right;
+  margin-right: 30px;
+}
+::v-deep .el-dialog__body {
+  padding-top: 10px;
+}
+.score-box {
+  height: 80px;
+  background: #67c772;
+  border-radius: 8px;
+  padding: 20px;
+  box-sizing: border-box;
+  span {
+    font-size: 20px;
+    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 40px;
+    vertical-align: middle;
+  }
+  .score {
+    font-size: 40px;
+    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
+    font-weight: 500;
+    color: #ffffff;
+    line-height: 40px;
+    vertical-align: middle;
+    margin-left: 20px;
+  }
+  .level {
+    float: right;
+  }
+}
+.legend-box {
+  text-align: center;
+  margin: 20px 0;
+  span {
+    position: relative;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #666666;
+    line-height: 20px;
+    &:nth-child(1) {
+      margin-right: 40px;
+    }
+    &::before {
+      position: absolute;
+      top: 5px;
+      left: -20px;
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+    }
+    &.qz {
+      &::before {
+        background: #ed3028;
+      }
+    }
+    &.jy {
+      &::before {
+        background: #178691;
+      }
+    }
+  }
+}
+.cont-reight-bottom {
+  margin: 24px 7px;
+  display: flex;
+  cursor: pointer;
+}
+.cont-reight-bottom div span {
+  font-size: 24px;
+}
+.cont-reight-bottom-title {
+  width: 90px;
+  background: #ffdfdf;
+  border-right: 3px solid #ED3028;
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  color: #ED3028;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.cont-reight-bottom-title-null {
+  width: 90px;
+  background: #178691;
+  border-right: 3px solid #178691;
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  color: #178691;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.cont-reight-bottom-conter {
+  margin-left: 8px;
+  min-height: 70px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  width: 100%;
+  p {
+    font-size: 14px;
+    color: #666666;
+  }
+}
+</style>

src/views/medicalRecord/index.vue

@@ -370,7 +370,7 @@
           <td class="center">局麻</td>
           <td class="center">张三</td>
         </tr>
-        <tr v-for="item of 8" :key="item">
+        <tr v-for="item of 8" :key="'ss' + item">
           <td class="center"></td>
           <td class="center"></td>
           <td class="center" colspan="2"></td>
@@ -413,7 +413,7 @@
           <td colspan="3" class="center"></td>
           <td colspan="2" class="center"></td>
         </tr>
-        <tr v-for="item of 3" :key="item">
+        <tr v-for="item of 3" :key="'zd' + item">
           <td colspan="4" class="center"></td>
           <td colspan="3" class="center"></td>
           <td colspan="3" class="center"></td>
@@ -481,17 +481,25 @@
         </tr>
       </table>
     </div>
+    <!-- 质控栏 -->
+    <ControlDialogVue :data="controlData" />
   </div>
 </template>
 
 <script>
+import ControlDialogVue from './components/ControlDialog.vue'
 import IconBtnVue from './components/IconBtn.vue'
 export default {
   components: {
-    IconBtnVue
+    IconBtnVue,
+    ControlDialogVue
   },
   data() {
     return {
+      controlData: {
+        bSwitch: true,
+        zyh: ''
+      }
     }
   }
 }