web_dist/src/views/hospitalization/zhu-yuan-yi-sheng/yi-zhu-lu-ru/components/table/YzTableV3.vue

<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 {height} = defineProps({
  height: [Number, null]
})

const tableRef = ref<VxeTableInstance>(null)

const toggleAllCheckboxEvent = () => {
  const $table = tableRef.value
  if ($table) {
    $table.toggleAllCheckboxRow()
  }
}

const toggleCheckboxEvent = (row) => {
  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
  }
  switch (val) {
    case '1':
      return h('span', {style: {color: '#05ff00'}}, 'R') // (<span style="color: #05ff00">R</span>)
    case '2':
      return h('span', {style: {color: '#0000fb'}}, 'Q')//(<span style="color: #0000fb">Q</span>)
    case '3':
      return h('span', {style: {color: '#ff07f3'}}, 'Z')// (<span style="color: #ff07f3">Z</span>)
    case '4':
      return h('span', {style: {color: '#ff07f3'}}, 'Z')// (<span style="color:  #ff07f3">Z</span>)
    case '5':
      return h('span', {style: {color: 'red'}}, 'T')// (<span style="color: red">T</span>)
    case '-1':
      return h('span', {style: {color: '#00ffe0'}}, 'D') // (<span style="color: #00ffe0">D</span>)
    default:
      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>
  <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 }">
          <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="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 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>