|
|
@@ -1,89 +1,54 @@
|
|
|
<template>
|
|
|
- <div class="el-table__yz">
|
|
|
- <el-table :data="tempYzData"
|
|
|
- :height="400"
|
|
|
- @row-click="rowClick"
|
|
|
- row-key="actOrderNo"
|
|
|
- ref="elTableRef"
|
|
|
- @selection-change="selectedRow"
|
|
|
- :row-class-name="rowStyle">
|
|
|
- <el-table-column :width="30" type="selection"/>
|
|
|
- <el-table-column :width="20" prop="orderGroup" label="组"/>
|
|
|
- <el-table-column :width="20" prop="statusFlag" label="状态">
|
|
|
- <template #default="scope">
|
|
|
- <div v-html="getYiZhuFlag(scope.row.statusFlag)"></div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="医嘱号" prop="actOrderNo">
|
|
|
- <template #default="scope">
|
|
|
- <div v-html="errorOrderNo(scope.row)"></div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="医嘱名称" prop="orderName" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="频率" prop="frequCode"/>
|
|
|
- <el-table-column label="给药方式" prop="supplyCodeName"/>
|
|
|
- <el-table-column label="剂量">
|
|
|
- <template #default="scope">
|
|
|
- {{ scope.row.dose }} {{ scope.row.doseUnitName }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="开始时间">
|
|
|
- <template #default="scope">
|
|
|
- <div v-html="timeFomat(scope.row.startTime)"></div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="结束时间">
|
|
|
- <template #default="scope">
|
|
|
- <div v-html="timeFomat(scope.row.endTime)"></div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="医嘱时间">
|
|
|
- <template #default="scope">
|
|
|
- <div v-html="timeFomat(scope.row.orderTime)"></div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="紧急" width="40" prop="emergencyFlag">
|
|
|
- <template #header>
|
|
|
- 紧急
|
|
|
- </template>
|
|
|
- <template #default="scope">
|
|
|
- {{ scope.row.emergencyFlag === '1' ? '√' : '' }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="自费" width="40" prop="ybSelfFlag">
|
|
|
- <template #header>
|
|
|
- 自费
|
|
|
- </template>
|
|
|
- <template #default="scope">
|
|
|
- {{ scope.row.ybSelfFlag === '1' ? '√' : '' }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="医生" prop="physicianName"/>
|
|
|
- <el-table-column label="费用标志" prop="selfBuyName"/>
|
|
|
- <el-table-column label="执行科室" prop="execUnitName"/>
|
|
|
- <el-table-column label="领量">
|
|
|
- <template #default="scope">
|
|
|
- {{ scope.row.drugQuan }}
|
|
|
- {{ scope.row.drugQuanName }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="药房" prop="groupNoName"/>
|
|
|
- <el-table-column label="序号" prop="serialName"/>
|
|
|
- <el-table-column label="嘱托" prop="instruction" show-overflow-tooltip width="70"/>
|
|
|
- <el-table-column label="父医嘱" prop="parentNo"/>
|
|
|
- </el-table>
|
|
|
+ <div>
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col v-for="item in header" :style="{width: item.width + 'px'}"/>
|
|
|
+ </colgroup>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th v-for="item in header">
|
|
|
+ {{ item.name }}
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <el-scrollbar :height="maxHeight" @scroll="scroll">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div :style="{height: virtualHeight + 'px'}">
|
|
|
+ </div>
|
|
|
+ <div :style="{transform: `translateY(${translateY})`}" style="height: 100%">
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col v-for="item in header" :style="{width: item.width + 'px'}"/>
|
|
|
+ </colgroup>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item,index) in tempYzData.slice(startIndex, startIndex + itemCount)"
|
|
|
+ @click="rowClick(item)">
|
|
|
+ <td v-for="he in header" :title="item[he.code]">
|
|
|
+ <div v-if="he.func" v-html="he.func(item,startIndex + index)"/>
|
|
|
+ <div v-else>
|
|
|
+ {{ item[he.code] }}
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup name='YzTable'>
|
|
|
+<script setup name='YzTable' lang="tsx">
|
|
|
import {stringIsBlank} from "@/utils/blank-utils";
|
|
|
import {
|
|
|
- selectedData,
|
|
|
- yiZhuData,
|
|
|
tempYzData
|
|
|
} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
|
|
|
import {getFormatDatetime} from "@/utils/date";
|
|
|
-import XcCheckbox from "@/components/xiao-chan/checkbox/XcCheckbox";
|
|
|
+import {defineProps, defineEmits, ref, watch} from 'vue'
|
|
|
|
|
|
const props = defineProps({
|
|
|
data: {
|
|
|
@@ -93,9 +58,14 @@ const props = defineProps({
|
|
|
|
|
|
const emit = defineEmits(['rowClick'])
|
|
|
|
|
|
-const index = 0
|
|
|
const header = [
|
|
|
- {code: 'orderGroup', name: '组'},
|
|
|
+ {
|
|
|
+ func: (val, index) => (
|
|
|
+ <div>{index}</div>
|
|
|
+ ),
|
|
|
+ width: 20
|
|
|
+ },
|
|
|
+ {code: 'orderGroup', name: '组', width: 10},
|
|
|
{
|
|
|
code: 'statusFlag', name: '状态', func: (val) => {
|
|
|
return getYiZhuFlag(val.statusFlag)
|
|
|
@@ -111,61 +81,49 @@ const header = [
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- {code: 'orderName', name: '医嘱名称', width: 200},
|
|
|
+ {code: 'orderName', name: '医嘱名称', width: 120},
|
|
|
{
|
|
|
code: 'dose', name: '剂量', width: 40, func: (val) => {
|
|
|
return nu(val.dose) + ' ' + nu(val.doseUnitName)
|
|
|
}
|
|
|
},
|
|
|
{code: 'frequCode', name: '频率', width: 42},
|
|
|
- {code: 'supplyCodeName', name: '给药方式'},
|
|
|
+ {code: 'supplyCodeName', name: '给药方式', width: 50},
|
|
|
{
|
|
|
- code: 'startTime', name: '开始时间', width: 60, func: (val) => {
|
|
|
+ code: 'startTime', name: '开始时间', width: 45, func: (val) => {
|
|
|
return timeFomat(val.startTime)
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
- code: 'endTime', name: '结束时间', width: 60, func: (val) => {
|
|
|
+ code: 'endTime', name: '结束时间', width: 45, func: (val) => {
|
|
|
return timeFomat(val.endTime)
|
|
|
}
|
|
|
},
|
|
|
- {
|
|
|
- code: 'orderTime', name: '医嘱时间', width: 60, func: (val) => {
|
|
|
- return timeFomat(val.orderTime)
|
|
|
- }
|
|
|
- },
|
|
|
{
|
|
|
code: 'emergencyFlag', name: '紧急', func: (val) => {
|
|
|
return `${val.emergencyFlag === '1' ? '√' : ''}`
|
|
|
- }
|
|
|
+ },
|
|
|
+ width: 20
|
|
|
+
|
|
|
},
|
|
|
- {code: 'ybSelfFlag', name: '医保自费'},
|
|
|
- {code: 'physicianName', name: '医生'},
|
|
|
- {code: 'selfBuyName', name: '费用标志'},
|
|
|
- {code: 'execUnitName', name: '执行科室'},
|
|
|
+ {code: 'ybSelfFlag', name: '自费', width: 20},
|
|
|
+ {code: 'physicianName', name: '医生', width: 30},
|
|
|
+ {code: 'selfBuyName', name: '费用标志', width: 30},
|
|
|
+ {code: 'execUnitName', name: '执行科室', width: 40},
|
|
|
{
|
|
|
code: 'drugQuan', name: '领量', func: (val) => {
|
|
|
return nu(val.drugQuan) + nu(val.drugQuanName)
|
|
|
- }
|
|
|
+ },
|
|
|
+ width: 20
|
|
|
},
|
|
|
- {code: 'groupNoName', name: '药房'},
|
|
|
- {code: 'serialName', name: '序号'},
|
|
|
- {code: 'instruction', name: '嘱托', width: 200},
|
|
|
- {code: 'parentNo', name: '父医嘱'},
|
|
|
-]
|
|
|
-
|
|
|
-const tableRef = ref()
|
|
|
+ {code: 'groupNoName', name: '药房', width: 50},
|
|
|
+ {code: 'serial', name: '序号', width: 20},
|
|
|
+ {code: 'instruction', name: '嘱托', width: 120},
|
|
|
+ // {code: 'parentNo', name: '父医嘱', width: 30},
|
|
|
+];
|
|
|
|
|
|
const timeFomat = (val) => {
|
|
|
- if (val) {
|
|
|
- let temp = val.split(" ")
|
|
|
- return `${temp[0]}<br>${temp[1]}`
|
|
|
- }
|
|
|
- // return `${getFormatDatetime(val, "YY-MM-DD HH:mm")}`;
|
|
|
-}
|
|
|
-
|
|
|
-const emergencySign = (val) => {
|
|
|
- console.log(val)
|
|
|
+ return getFormatDatetime(val, 'YY-MM-DD HH:mm')
|
|
|
}
|
|
|
|
|
|
const errorOrderNo = (val) => {
|
|
|
@@ -177,26 +135,38 @@ const errorOrderNo = (val) => {
|
|
|
}
|
|
|
|
|
|
|
|
|
-const setBackgroundColor = (item) => {
|
|
|
- if (yiZhuData.value.actOrderNo == item.actOrderNo) {
|
|
|
- return {
|
|
|
- 'backgroundColor': 'rgba(0,58,241,0.68)',
|
|
|
- 'color': '#fff'
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-const setWidth = (val) => {
|
|
|
- if (val.width) {
|
|
|
- return {
|
|
|
- 'width': val.width + 'px'
|
|
|
- }
|
|
|
- }
|
|
|
+// div 的最大高度
|
|
|
+const maxHeight = ref(400)
|
|
|
+// 开始位置
|
|
|
+const startIndex = ref(0)
|
|
|
+// 可以看见 的 内容大小
|
|
|
+const itemCount = ref(0)
|
|
|
+// 实际的高度
|
|
|
+const virtualHeight = ref(0)
|
|
|
+// 每一个 元素的大小
|
|
|
+const itemHeight = ref(24)
|
|
|
+// 偏移量
|
|
|
+const translateY = ref('0px')
|
|
|
+
|
|
|
+const scrollStyle = ref({})
|
|
|
+
|
|
|
+const scroll = ({scrollTop}) => {
|
|
|
+ translateY.value = scrollTop + 'px'
|
|
|
+ startIndex.value = Math.floor(scrollTop / itemHeight.value)
|
|
|
}
|
|
|
|
|
|
-const rowClick = (val, index) => {
|
|
|
+const rowClick = (val) => {
|
|
|
emit('rowClick', val)
|
|
|
}
|
|
|
|
|
|
+watch(() => tempYzData.value, (oldData, newData) => {
|
|
|
+ if (oldData.length !== newData.length) {
|
|
|
+ itemCount.value = Math.ceil(maxHeight.value / itemHeight.value)
|
|
|
+ virtualHeight.value = itemHeight.value * tempYzData.value.length
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
const nu = (val) => {
|
|
|
if (val === null) {
|
|
|
return ''
|
|
|
@@ -207,19 +177,6 @@ const nu = (val) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const elTableRef = ref(null)
|
|
|
-const rowStyle = ({row}) => {
|
|
|
- if (row.actOrderNo === yiZhuData.value.actOrderNo) {
|
|
|
- return 'current_order_no'
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-const selectedRow = (val) => {
|
|
|
- selectedData.value = val
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
function getYiZhuFlag(val) {
|
|
|
if (stringIsBlank(val)) {
|
|
|
return val
|
|
|
@@ -243,38 +200,33 @@ function getYiZhuFlag(val) {
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.el-table__yz {
|
|
|
- :deep(.el-table .current_order_no) {
|
|
|
- background: rgba(0, 58, 241, 0.68);
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.table {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-
|
|
|
table {
|
|
|
- border-collapse: collapse;
|
|
|
- border-spacing: 0;
|
|
|
-}
|
|
|
-
|
|
|
-table, tbody {
|
|
|
width: 100%;
|
|
|
- cursor: default;
|
|
|
-}
|
|
|
-
|
|
|
+ border-spacing: 0;
|
|
|
+ border-collapse: separate;
|
|
|
+ table-layout: fixed;
|
|
|
|
|
|
-tbody {
|
|
|
+ tr, td, th {
|
|
|
+ border: 1px solid #fff;
|
|
|
+ }
|
|
|
|
|
|
td {
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- line-height: 40px;
|
|
|
+ height: 20px;
|
|
|
+ width: 100%;
|
|
|
+ word-break: keep-all; /* 不换行 */
|
|
|
+ white-space: nowrap; /* 不换行 */
|
|
|
+ overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
|
|
|
+ text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
+.el-table__yz {
|
|
|
+ :deep(.el-table .current_order_no) {
|
|
|
+ background: rgba(0, 58, 241, 0.68);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
</style>
|
