|
|
@@ -1,23 +1,170 @@
|
|
|
-<script setup name='YzTableV3'>
|
|
|
-import {stringIsBlank} from "@/utils/blank-utils";
|
|
|
-import {tempYzData} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
|
|
|
+<script setup lang="ts">
|
|
|
+import {stringIsBlank} from "../../../../../../utils/blank-utils";
|
|
|
+import {
|
|
|
+ associateOrders,
|
|
|
+ clearAssociate, drugManual,
|
|
|
+ tempYzData, yiZhuData, yzMitt,
|
|
|
+ yzSize,
|
|
|
+ yzType
|
|
|
+} from "../../../../../../views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
|
|
|
+import {ref, h, reactive, onMounted, nextTick} from 'vue'
|
|
|
+import {VxeTableInstance, VxeTablePropTypes} from 'vxe-table'
|
|
|
+import {nullToEmpty} from '../../../../../../utils/public'
|
|
|
+import {getFormatDatetime} from '../../../../../../utils/date'
|
|
|
+import {getServerDateApi} from '../../../../../../api/public-api'
|
|
|
+import XEUtils from "xe-utils";
|
|
|
+import {updateOrderInstruction} from '../../../../../../api/zhu-yuan-yi-sheng/yi-zhu-lu-ru'
|
|
|
+import sleep from "../../../../../../utils/sleep";
|
|
|
|
|
|
-const xTableRef = ref(null)
|
|
|
+const {height} = defineProps({
|
|
|
+ height: [Number, null]
|
|
|
+})
|
|
|
+
|
|
|
+const tableRef = ref<VxeTableInstance>(null)
|
|
|
|
|
|
const toggleAllCheckboxEvent = () => {
|
|
|
- const $table = xTableRef.value
|
|
|
+ const $table = tableRef.value
|
|
|
if ($table) {
|
|
|
$table.toggleAllCheckboxRow()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const toggleCheckboxEvent = (row) => {
|
|
|
- const $table = xTableRef.value
|
|
|
+ const $table = tableRef.value
|
|
|
if ($table) {
|
|
|
$table.toggleCheckboxRow(row)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+interface MenuClick {
|
|
|
+ $event: Event,
|
|
|
+ row: yzType,
|
|
|
+ menu: { code: string, name: string, disabled?: boolean },
|
|
|
+ column: any
|
|
|
+}
|
|
|
+
|
|
|
+// 鼠标右键配置文件
|
|
|
+const menuConfig = reactive<VxeTablePropTypes.MenuConfig>({
|
|
|
+ body: {
|
|
|
+ options: [
|
|
|
+ [
|
|
|
+ {code: 'fee', name: '医嘱费用'}
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {code: 'copy', name: '复制', prefixIcon: 'vxe-icon-copy'}
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {code: 'paste', name: '粘贴', prefixIcon: 'vxe-icon-paste'}
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {code: 'relevancy', name: '关联'}
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {code: 'exitTheAssociation', name: '退出关联'}
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ {code: 'instructions', name: '说明书'}
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ visibleMethod({options, column}) {
|
|
|
+ options.forEach(list => {
|
|
|
+ list.forEach((item) => {
|
|
|
+ item.disabled = !column;
|
|
|
+ if (item.code === 'paste') {
|
|
|
+ item.disabled = !yzMitt.emit('allowReplication')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return true
|
|
|
+ }
|
|
|
+})
|
|
|
+// 鼠标右键执行的函数
|
|
|
+const rightFunc = {
|
|
|
+ "fee": (data: yzType) => {
|
|
|
+ yzMitt.emit('queryFeeByOrderNo', data)
|
|
|
+ },
|
|
|
+ "copy": (data: yzType) => {
|
|
|
+ yzMitt.emit('copy', data.actOrderNo, data.frequCode)
|
|
|
+ },
|
|
|
+ "paste": (data: yzType) => {
|
|
|
+ yzMitt.emit('paste')
|
|
|
+ },
|
|
|
+ "relevancy": (data: yzType) => {
|
|
|
+ yzMitt.emit('clickAssociate', data)
|
|
|
+ },
|
|
|
+ "exitTheAssociation": (data: yzType) => {
|
|
|
+ clearAssociate()
|
|
|
+ },
|
|
|
+ "instructions": (data: yzType) => {
|
|
|
+ if (data.groupNo !== '00') {
|
|
|
+ drugManual.value.open(data.orderCode, data.serial);
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+// 触发鼠标右键的时间
|
|
|
+const tableRightClick = (val: MenuClick) => {
|
|
|
+ let {row, menu} = val
|
|
|
+ try {
|
|
|
+ rightFunc[menu.code](row)
|
|
|
+ } catch {
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const twinkleList = ref({})
|
|
|
+const rowClassName = ({row, rowIndex}) => {
|
|
|
+ let data = row as yzType
|
|
|
+ if (typeof twinkleList.value[data.actOrderNo] !== 'undefined') {
|
|
|
+ sleep(3000).then(() => {
|
|
|
+ delete twinkleList.value[data.actOrderNo]
|
|
|
+ })
|
|
|
+ return 'animation_hzfirst'
|
|
|
+ } else if (typeof twinkleList.value[data.parentNo] !== 'undefined') {
|
|
|
+ return 'animation_hzfirst'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 父级
|
|
|
+ if (data.associationFlag) {
|
|
|
+ return 'parent_level'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 子级
|
|
|
+ if (associateOrders.value.actOrderNo === data.actOrderNo) {
|
|
|
+ return 'child_level'
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.actOrderNo === yiZhuData.value.actOrderNo) {
|
|
|
+ return 'activation'
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const setDefaultStopTime = async (val) => {
|
|
|
+ let {row} = val
|
|
|
+ if (showEndTime(row)) {
|
|
|
+ row.endTimeTemp = getFormatDatetime(await getServerDateApi(), 'YYYY-MM-DDTHH:mm')
|
|
|
+ await tableRef.value.setCheckboxRow(row, true)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const endTimeChange = (val, row) => {
|
|
|
+ if (XEUtils.isEmpty(val)) {
|
|
|
+ tableRef.value.setCheckboxRow(row, false)
|
|
|
+ } else {
|
|
|
+ tableRef.value.setCheckboxRow(row, true)
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const cancelStopTime = (row) => {
|
|
|
+ if (row.parentNo) return
|
|
|
+ row.endTimeTemp = ''
|
|
|
+ tableRef.value.setCheckboxRow(row, false)
|
|
|
+}
|
|
|
+
|
|
|
+const instructionEnter = (row: yzType) => {
|
|
|
+ updateOrderInstruction(row.actOrderNo, row.instruction)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
function getYiZhuFlag(val) {
|
|
|
if (stringIsBlank(val)) {
|
|
|
return val
|
|
|
@@ -39,52 +186,255 @@ function getYiZhuFlag(val) {
|
|
|
return 'warning'
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+const timeFomat = (val) => {
|
|
|
+ return getFormatDatetime(val, 'YY-MM-DD HH:mm')
|
|
|
+}
|
|
|
+
|
|
|
+const showEndTime = (data: yzType) => {
|
|
|
+ return stringIsBlank(data.endTime) && stringIsBlank(data.parentNo) && data.frequCode !== 'ONCE';
|
|
|
+}
|
|
|
+
|
|
|
+const rowClick = ({row}) => {
|
|
|
+ yzMitt.emit('rowClick', row)
|
|
|
+}
|
|
|
+
|
|
|
+const endDateStyle = (item) => {
|
|
|
+ if (item.endTimeTemp && tableRef.value.isCheckedByCheckboxRow(item)) {
|
|
|
+ return {
|
|
|
+ width: '140px',
|
|
|
+ color: 'white',
|
|
|
+ backgroundColor: 'red',
|
|
|
+ border: 0,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ width: '140px',
|
|
|
+ border: 0,
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+
|
|
|
+ yzMitt.on('tableScroll', (val) => {
|
|
|
+ tableRef.value.scrollTo(0, val)
|
|
|
+ })
|
|
|
+
|
|
|
+ yzMitt.on('clearSelected', () => {
|
|
|
+ tableRef.value.clearSelected()
|
|
|
+ })
|
|
|
+
|
|
|
+ yzMitt.on('scrollEndAndTwinkle', async (val) => {
|
|
|
+ let endRow = tempYzData.value[tempYzData.value.length - 1]
|
|
|
+ twinkleList.value = val;
|
|
|
+ await nextTick()
|
|
|
+ // 滚动到最后一行
|
|
|
+ await tableRef.value.scrollToRow(endRow, 'actOrderNo')
|
|
|
+ })
|
|
|
+
|
|
|
+ yzMitt.on('setOrderNoTwinkle', async (val: yzType) => {
|
|
|
+ twinkleList.value[val] = true;
|
|
|
+ let endRow = tempYzData.value[tempYzData.value.length - 1]
|
|
|
+ // await nextTick()
|
|
|
+ console.log(val)
|
|
|
+ await tableRef.value.scrollToRow(endRow)
|
|
|
+ })
|
|
|
+
|
|
|
+ yzMitt.on('getSelectedData', () => {
|
|
|
+ return tableRef.value.getCheckboxRecords(true)
|
|
|
+ })
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <vxe-table :height="662"
|
|
|
- border
|
|
|
- :scroll-x="{gt: 0,enabled: false}"
|
|
|
- :scroll-y="{gt: 0 ,enabled: true}"
|
|
|
- :column-config="{resizable: true}"
|
|
|
- :row-config="{height: 24}"
|
|
|
- class="vxe-padding_zero"
|
|
|
- show-header-overflow
|
|
|
- show-overflow
|
|
|
- ref="xTableRef"
|
|
|
- :data="tempYzData">
|
|
|
- <vxe-column type="checkbox" width="20">
|
|
|
- <template #header="{ checked, indeterminate }">
|
|
|
+ <div style="width: max-content; height: max-content">
|
|
|
+ <vxe-table :height="yzSize.h - height - 35"
|
|
|
+ border
|
|
|
+ :style="{width:yzSize.w + 'px' }"
|
|
|
+ :menu-config="menuConfig"
|
|
|
+ @menu-click="tableRightClick"
|
|
|
+ @cell-dblclick="setDefaultStopTime"
|
|
|
+ @cell-click="rowClick"
|
|
|
+ :scroll-x="{gt: 40,enabled: false}"
|
|
|
+ :scroll-y="{gt: 0,enabled: true}"
|
|
|
+ :column-config="{resizable: true}"
|
|
|
+ :row-config="{height: 24, isHover: true}"
|
|
|
+ class="vxe-padding_zero vxe-header-max_content hl-style vxe-scroll_15"
|
|
|
+ header-row-class-name="padding_zero"
|
|
|
+ show-header-overflow
|
|
|
+ show-overflow
|
|
|
+ :row-class-name="rowClassName"
|
|
|
+ ref="tableRef"
|
|
|
+ :data="tempYzData">
|
|
|
+ <vxe-column type="checkbox" width="20">
|
|
|
+ <template #header="{ checked, indeterminate }">
|
|
|
<span class="custom-checkbox" @click.stop="toggleAllCheckboxEvent">
|
|
|
<i v-if="indeterminate" class="vxe-icon-square-minus-fill"></i>
|
|
|
<i v-else-if="checked" class="vxe-icon-square-checked-fill"></i>
|
|
|
<i v-else class="vxe-icon-checkbox-unchecked"></i>
|
|
|
</span>
|
|
|
- </template>
|
|
|
- <template #checkbox="{ row, checked, indeterminate }">
|
|
|
+ </template>
|
|
|
+ <template #checkbox="{ row, checked, indeterminate }">
|
|
|
<span class="custom-checkbox" @click.stop="toggleCheckboxEvent(row)">
|
|
|
<i v-if="indeterminate" class="vxe-icon-square-minus-fill"></i>
|
|
|
<i v-else-if="checked" class="vxe-icon-square-checked-fill"></i>
|
|
|
<i v-else class="vxe-icon-checkbox-unchecked"></i>
|
|
|
</span>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- <vxe-column type="seq" width="30"/>
|
|
|
- <vxe-column field="orderGroup" title="组" width="20"></vxe-column>
|
|
|
- <vxe-column field="statusFlag" width="20">
|
|
|
- <template #default="scope">
|
|
|
- <component :is="getYiZhuFlag(scope.row.statusFlag)"/>
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
-
|
|
|
- <vxe-column field="actOrderNo" title="医嘱号" width="1980">
|
|
|
- <template #default="scope">
|
|
|
-
|
|
|
- </template>
|
|
|
- </vxe-column>
|
|
|
- </vxe-table>
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ <vxe-column type="seq" width="30"/>
|
|
|
+ <vxe-column field="orderGroup" title="组" width="20"></vxe-column>
|
|
|
+ <vxe-column field="statusFlag" width="20">
|
|
|
+ <template #default="scope">
|
|
|
+ <component :is="getYiZhuFlag(scope.row.statusFlag)"/>
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ <vxe-column field="actOrderNo" title="医嘱号" width="70"/>
|
|
|
+ <vxe-column field="orderName" title="医嘱名称" width="225"/>
|
|
|
+ <vxe-column field="dose" title="剂量" width="65">
|
|
|
+ <template #default="{row}">
|
|
|
+ {{ nullToEmpty(row.dose) + ' ' + nullToEmpty(row.doseUnitName) }}
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ <vxe-column field="frequCode" title="频率" width="75"/>
|
|
|
+ <vxe-column field="supplyCodeName" title="给药方式" width="60"/>
|
|
|
+ <vxe-column field="startTime" title="开始时间" width="100">
|
|
|
+ <template #default="{row}">
|
|
|
+ {{ timeFomat(row.startTime) }}
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ <vxe-column field="endTime" title="结束时间" width="140">
|
|
|
+ <template #default="scope">
|
|
|
+ <input v-if="showEndTime(scope.row)"
|
|
|
+ type='datetime-local'
|
|
|
+ @click.stop.prevent
|
|
|
+ @change="endTimeChange(scope.row.endTimeTemp, scope.row)"
|
|
|
+ @contextmenu.stop.prevent="cancelStopTime(scope.row)"
|
|
|
+ :style="endDateStyle(scope.row)"
|
|
|
+ v-model="scope.row.endTimeTemp"/>
|
|
|
+ <span v-else>{{ timeFomat(scope.row.endTime) }}</span>
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+
|
|
|
+ <vxe-column field="emergencyFlag" title="紧急" width="30">
|
|
|
+ <template #default="{row}">
|
|
|
+ {{ row.emergencyFlag === '1' ? '√' : '' }}
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+
|
|
|
+ <vxe-column field="ybSelfFlag" title="自费" width="30">
|
|
|
+ <template #default="{row}">
|
|
|
+ {{ row.ybSelfFlag === '1' ? '√' : '' }}
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+
|
|
|
+ <vxe-column field="physicianName" title="医生" width="65"/>
|
|
|
+ <vxe-column field="selfBuyName" title="费用标志" width="60"/>
|
|
|
+ <vxe-column field="execUnitName" title="执行科室" width="80"/>
|
|
|
+
|
|
|
+ <vxe-column field="drugQuan" title="领量" width="30">
|
|
|
+ <template #default="{row}">
|
|
|
+ {{ nullToEmpty(row.drugQuan) + nullToEmpty(row.miniUnitName) }}
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ <vxe-column field="groupNoName" title="药房" width="91"/>
|
|
|
+ <vxe-column field="serial" title="序号" width="35"/>
|
|
|
+
|
|
|
+ <vxe-column field="instruction" title="嘱托" width="180">
|
|
|
+ <template #default="scope">
|
|
|
+ <input v-if="scope.row.statusFlag === '1' || scope.row.statusFlag === '2' "
|
|
|
+ :title="scope.row.instruction"
|
|
|
+ v-model="scope.row.instruction"
|
|
|
+ :maxlength="50"
|
|
|
+ @keydown.enter="instructionEnter(scope.row)"
|
|
|
+ />
|
|
|
+ <span v-else>{{ scope.row.instruction }}</span>
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+
|
|
|
+ <vxe-column field="right" title="操作" width="100" fixed="right">
|
|
|
+ <template #default="scope">
|
|
|
+ <div class="yz_button">
|
|
|
+ <div class="toVoid">作废</div>
|
|
|
+ <div class="delete">删除</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+
|
|
|
+
|
|
|
+ </vxe-table>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<style scoped lang="scss">
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+.new_order {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ position: absolute;
|
|
|
+ right: -6px;
|
|
|
+ font-size: 15px;
|
|
|
+ top: -5px;
|
|
|
+ content: "*";
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes hzfirst {
|
|
|
+ from {
|
|
|
+ background-color: #95d475
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.yz_button {
|
|
|
+ width: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0 5px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ div {
|
|
|
+ width: max-content;
|
|
|
+ margin: 0 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toVoid {
|
|
|
+ color: #E6A23C;
|
|
|
+ background-color: inherit;
|
|
|
+ }
|
|
|
+
|
|
|
+ .delete {
|
|
|
+ color: #F56C6C;
|
|
|
+ background-color: inherit;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.animation_hzfirst {
|
|
|
+ td {
|
|
|
+ animation: hzfirst 1s linear infinite
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.activation {
|
|
|
+ background-color: #5376e7cc !important;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.parent_level {
|
|
|
+ background-color: red;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.child_level {
|
|
|
+ background-color: rgba(3, 255, 15);
|
|
|
+ color: black;
|
|
|
+}
|
|
|
|
|
|
</style>
|
