web_dist/src/components/zhu-yuan-yi-sheng/yi-zhu-lu-ru/table/YzTableV2.vue

<template>
    <div>
        <xc-table-v2 :data="tempYzData"
                     :rowStyle="rowStyle"
                     @rowClick="rowClick"
                     row-key="actOrderNo"
                     @contextmenu="contextmenuItem"
                     :height="getWindowSize.h / 1.7"
                     @dbRowClick="setDefaultStopTime"
                     ref="tableRef"
                     :columns="header"/>
        <right-click-menu :mouse-position="mousePosition" :config="opt"/>
    </div>
</template>


<script setup name='Test' lang="tsx">
import {Ref, ref} from 'vue'
import XcTableV2 from "@/components/xiao-chan/xc-table-v2/XcTableV2.vue";
import {stringIsBlank} from "@/utils/blank-utils";
import {getFormatDatetime} from "@/utils/date";
import {getServerDateApi} from '@/api/public-api'
import {getWindowSize} from "@/utils/window-size";
import {
    tempYzData,
    yiZhuData,
    associateOrders,
    clearAssociate,
    drugManual,
} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import {XcTableV2Type} from "@/components/xiao-chan/xc-table-v2/XcTableV2Type";
import sleep from "@/utils/sleep";
import RightClickMenu from "@/components/menu-item/RightClickMenu.vue";

const emits = defineEmits(['rowClick', 'clickAssociate', 'voidOrders'])

const tableRef: Ref<XcTableV2Type> = ref(null)

const header = [
    {type: 'selected', width: 20},
    {width: 30, type: 'index'},
    {width: 20, code: 'orderGroup', name: '组'},
    {
        width: 20, code: 'statusFlag', cellRenderer: ({cellData}) => {
            return getYiZhuFlag(cellData)
        }
    },
    {
        width: 70, code: 'actOrderNo', name: '医嘱号', cellRenderer: ({data}) => {
            if (data.error) {
                return (<span style="color: red"
                              class={orderNoClass(data)}>{data.actOrderNo}</span>)
            } else {
                return (<span class={orderNoClass(data)}>{data.actOrderNo}</span>)
            }
        }
    },
    {width: 225, code: 'orderName', name: '医嘱名称'},
    {
        code: 'dose', name: '剂量', width: 75, cellRenderer: ({data}) => {
            return <span>{nu(data.dose) + ' ' + nu(data.doseUnitName)}</span>
        }
    },
    {code: 'frequCode', name: '频率', width: 75},
    {code: 'supplyCodeName', name: '给药方式', width: 60},
    {
        code: 'startTime', name: '开始时间', width: 95, cellRenderer: ({data}) => {
            return (<span>{timeFomat(data.startTime)}</span>)
        }
    },
    {
        // 出院时间的大小不能改
        code: 'endTime', name: '结束时间', width: 160, cellRenderer: ({data}) => {
            if (stringIsBlank(data.endTime) && stringIsBlank(data.parentNo) && data.frequCode !== 'ONCE') {
                return <input type="datetime-local"
                              style={endDateStyle(data)}
                              value={data.endTimeTemp}
                              oninput={(val: Event) => {
                                  data.endTimeTemp = val.target.value
                              }
                              }
                              onclick={(event: Event) => {
                                  event.stopPropagation()
                              }
                              }
                              oncontextmenu={(event: Event) => {
                                  event.stopPropagation()
                                  event.preventDefault();
                                  cancelStopTime(data)
                              }}/>
            }
            return <span>{timeFomat(data.endTime)}</span>
        }
    },
    {
        code: 'emergencyFlag', name: '紧急', cellRenderer: ({cellData}) => {
            return <span>{cellData === '1' ? '√' : ''}</span>
        },
        width: 30
    },
    {
        code: 'ybSelfFlag', name: '自费', cellRenderer: ({cellData}) => {
            return <span>{cellData === '1' ? '√' : ''}</span>
        },
        width: 30
    },
    {code: 'physicianName', name: '医生', width: 65},
    {code: 'selfBuyName', name: '费用标志', width: 60},
    {code: 'execUnitName', name: '执行科室', width: 80},
    {
        code: 'drugQuan', name: '领量', cellRenderer: ({data}) => {
            return <span>{nu(data.drugQuan) + nu(data.drugQuanName)}</span>
        },
        width: 30
    },
    {code: 'groupNoName', name: '药房', width: 91},
    {code: 'serial', name: '序号', width: 35},
    {code: 'instruction', name: '嘱托', width: 150},
    {
        name: '操作', width: 53, cellRenderer: ({data}) => (
            <button onclick={(e) => {
                e.preventDefault();
                e.stopImmediatePropagation();
                emits('voidOrders', data)
            }}>作废</button>
        )
    }
];

const orderNoClass = (data) => {
    let c = ''
    if (data.newOrderFlag > 0) {
        c = 'new_order'
    }
    return c
}

const timeFomat = (val) => {
    return getFormatDatetime(val, 'YY-MM-DD HH:mm')
}

function getYiZhuFlag(val) {
    if (stringIsBlank(val)) {
        return val
    }
    switch (val) {
        case '1':
            return (<span style="color: #05ff00">R</span>)
        case '2':
            return (<span style="color: #0000fb">Q</span>)
        case '3':
            return (<span style="color: #ff07f3">Z</span>)
        case '4':
            return (<span style="color:  #ff07f3">Z</span>)
        case '5':
            return (<span style="color: red">T</span>)
        case '-1':
            return (<span style="color: #00ffe0">D</span>)
        default:
            return 'warning'
    }
}

const endDateStyle = (item) => {
    if (item.endTimeTemp && item.tempCheckbox) {
        return {
            width: '140px',
            color: 'white',
            backgroundColor: 'red',
            border: 0,
        }
    } else {
        return {
            width: '140px',
            border: 0,
        }
    }
}

const rowClick = (data) => {
    emits('rowClick', data)
}

const rowStyle = (data) => {
    if (typeof twinkleList.value[data.actOrderNo] !== 'undefined') {
        sleep(3000).then(() => {
            delete twinkleList.value[data.actOrderNo]
        })
        return {
            animation: 'hzfirst 1s linear infinite',
        }

    } else if (typeof twinkleList.value[data.parentNo] !== 'undefined') {
        return {
            animation: 'hzfirst 1s linear infinite',
        }
    }

    // 父级
    if (data.associationFlag) {
        return {
            background: 'red',
            color: '#fff'
        }
    }

    // 子级
    if (associateOrders.value.actOrderNo === data.actOrderNo) {
        return {
            background: 'rgba(3,255,15,0.68)',
            color: '#fff'
        }
    }

    if (data.actOrderNo === yiZhuData.value.actOrderNo) {
        return {
            background: 'rgba(0, 58, 241, 0.68)',
            color: '#fff'
        }
    }

}

const setDefaultStopTime = async (item) => {
    if (item.parentNo) return
    item.endTimeTemp = getFormatDatetime(await getServerDateApi(), 'yyyy-MM-DD HH:mm')
    if (!item.tempCheckbox) {
        clickSelected(item)
    }
}

const cancelStopTime = (val) => {
    if (val.parentNo) return
    val.endTimeTemp = ''
    if (val.tempCheckbox) {
        clickSelected(val)
    }
}

const clickSelected = (row) => {
    tableRef.value.selectedRow(row)
}

const twinkleList = ref({})
const scrollTo = (key) => {
    twinkleList.value[key] = true
    let index = tableRef.value.scrollToByKey(key)
    if (index < 0) {
        scrollToEnd()
    }
}

const scrollToEnd = () => {
    tableRef.value.scrollTo(tempYzData.value.length)
}

const mousePosition = ref()
const opt = [
    {
        name: '关联', click: (data, index) => {
            emits('clickAssociate', data)
        }
    }, {
        name: '退出关联模式', click: () => {
            clearAssociate()
        }
    }, {
        name: '药品说明书', click: (data) => {
            if (data.groupNo !== '00') {
                drugManual.value.open(data.orderCode, data.serial);
            }
        }
    }, {
        name: '停止医嘱', click: (data) => {
            if (data.tempCheckbox) {
                cancelStopTime(data)
            } else {
                setDefaultStopTime(data)
            }
        },
        validator: (data) => {
            return !data.parentNo;
        }
    }, {
        name: '作废', click: (data) => {
            emits('voidOrders', data)
        }
    }
]

const contextmenuItem = (data: any, index: Number, event: Event) => {
    mousePosition.value = {
        event,
        data: data,
        index
    }
}

const getSelectedData = () => {
    return tableRef.value.getSelectedData()
}

const clearSelected = () => {
    tableRef.value.clearSelected()
}

const nu = (val) => {
    if (val === null) {
        return ''
    } else if (typeof val === 'undefined') {
        return ''
    } else {
        return val
    }
}

const callTemplate = (list) => {
    twinkleList.value = list
    scrollToEnd()
}

defineExpose({
    scrollTo,
    scrollToEnd,
    getSelectedData,
    clearSelected,
    callTemplate
})

</script>

<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;
  }
}
</style>