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

<script setup lang="ts">
import {stringIsBlank, stringNotBlank} from "@/utils/blank-utils";
import {
  associateOrders,
  clearAssociate, openDrugManual,
  tempYzData, yiZhuData, yzMitt,
  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 {updateOrderInstruction} from '@/api/zhu-yuan-yi-sheng/yi-zhu-lu-ru'
import sleep from "../../../../../../utils/sleep";
import {
  ElButton,
  ElButtonGroup
} from "element-plus";
import {xcMessage} from "@/utils/xiaochan-element-plus";

const props = defineProps({
  height: {
    type: [Number]
  },
  width: {
    type: [Number]
  }
})

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

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: '说明书'
        }
      ],
      [
        {
          code: 'stopTime',
          name: '停止医嘱'
        }
      ]
    ],
  },
  visibleMethod({options, column, row}) {
    options.forEach(list => {
      list.forEach((item) => {
        item.disabled = true

        if (item.code === 'paste') {
          item.disabled = !yzMitt.emit('allowReplication')
        }

        if (row) {
          if (['copy', 'relevancy', 'exitTheAssociation'].includes(item.code)) {
            item.disabled = false
          }

          if (['relevancy', 'instructions'].includes(item.code)) {
            item.disabled = row.serial == '00'
          }
          if (item.code === 'fee') {
            item.disabled = false
          }

          if (item.code === 'stopTime') {
            item.disabled = !showEndTime(row)
          }
        }

      })
    })
    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": async (data: YzType) => {
    if (canBeAssociated(data, true)) {
      if (associateOrders.value.actOrderNo === null) {
        await yzMitt.emit('queryYz')
        associateOrders.value.actOrderNo = data.actOrderNo
      } else {
        xcMessage.error('请先确认当前关联医嘱。')
      }
    }
  },
  "exitTheAssociation": (data: YzType) => {
    clearAssociate()
  },
  "instructions": (data: YzType) => {
    openDrugManual(data.orderCode, data.serial)
  },
  "stopTime": (data) => {
    if (tableRef.value.isCheckedByCheckboxRow(data)) {
      cancelStopTime(data)
    } else {
      setDefaultStopTime({row: data})
    }
  }
}
// 触发鼠标右键的事件
const tableRightClick = (val: MenuClick) => {
  let {row, menu} = val
  try {
    rightFunc[menu.code](row)
  } catch {
  }
}

function canBeAssociated(data: YzType, showMessage = false) {

  function message(message) {
    showMessage && xcMessage.error(message);
  }

  if (stringNotBlank(data.parentNo)) {
    message('该医嘱已经有父医嘱了。');
    return false
  } else if (data.statusFlag !== '1') {
    message('不是录入状态的医嘱无法关联。');
    return false
  } else if (data.serial === '00') {
    message('项目无法关联。');
    return false
  }
  return true
}

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 (stringIsBlank(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')
    case '2':
      return h('span', {style: {color: '#0000fb'}}, 'Q')
    case '3':
      return h('span', {style: {color: '#ff07f3'}}, 'Z')
    case '4':
      return h('span', {style: {color: '#ff07f3'}}, 'Z')
    case '5':
      return h('span', {style: {color: 'red'}}, 'T')
    case '-1':
      return h('span', {style: {color: '#00ffe0'}}, 'D')
    default:
      return 'warning'
  }
}

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

const showEndTime = (data: YzType) => {
  if (!data) {
    return false
  }
  return stringIsBlank(data.endTime) && stringIsBlank(data.parentNo) && data.frequCode !== 'ONCE';
}

const rowClick = ({row}) => {
  emits('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) => {
    twinkleList.value[val] = true;
    let endRow = tempYzData.value[tempYzData.value.length - 1]
    await tableRef.value.scrollToRow(endRow)
  })

  yzMitt.on('getSelectedData', () => {
    return tableRef.value.getCheckboxRecords(true)
  })

})

</script>

<template>
  <vxe-table
      border
      height="100%"
      style="width: '100%'"
      :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"
      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="150">
      <template #default="scope">
        <input v-if="showEndTime(scope.row)"
               type='datetime-local'
               @click.stop
               @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="95" fixed="right">
      <template #default="{row}">
        <el-button-group
        >
          <el-button text
                     type="warning"
                     @click.stop.prevent="emits('voidOrders', row)"
          >
            作废
          </el-button>
          <el-button text
                     type="danger"
                     @click.stop.prevent="yzMitt.emit('deleteAnOrderByOrderNo', row, false)"
          >
            删除
          </el-button>
        </el-button-group>

      </template>
    </vxe-column>
  </vxe-table>
</template>

<style lang="scss">

@keyframes hzfirst {
  from {
    background-color: #95d475
  }
  to {
    background-color: white;
  }
}

.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>