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

<template>
  <table border="1" cellspacing="0" cellpadding="0" class="table" ref="tableRef">
    <thead>
    <tr>
      <th>
        序号
      </th>
      <th v-for="item in header"
          :style="setWidth(item)">
        {{ item.name }}
      </th>
    </tr>
    </thead>
    <tbody>
    <template v-for="(item,index) in tempYzData">
      <tr @click="rowClick(item,index)" :style="setBackgroundColor(item)">
        <td>
          {{ index }}
          <input type="checkbox"
                 v-model="item['tempCheckbox']"
                 @click.stop="selectedRow(item,index)">
        </td>
        <td v-for="he in header">
          <div v-if="he.func" v-html="he.func(item)"/>
          <div v-else>
            {{ item[he.code] }}
          </div>
        </td>
      </tr>
    </template>

    </tbody>
  </table>
</template>

<script setup name='YzTable'>
import {stringIsBlank} from "@/utils/blank-utils";
import {
  selectedData,
  yiZhuData,
  tempYzData
} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";

const props = defineProps({
  data: {
    type: Array
  },
})

const emit = defineEmits(['rowClick'])

const index = 0
const header = [
  {code: 'orderGroup', name: '组'},
  {
    code: 'statusFlag', name: '状态', func: (val) => {
      return getYiZhuFlag(val.statusFlag)
    },
    width: 20
  },
  {
    code: 'actOrderNo', name: '医嘱号', func: (val) => {
      if (val.error) {
        return `<span style="color: red">${nu(val.actOrderNo)}</span>`
      } else {
        return nu(val.actOrderNo)
      }
    }
  },
  {code: 'orderName', name: '医嘱名称'},
  {
    code: 'dose', name: '剂量', func: (val) => {
      return nu(val.dose) + ' ' + nu(val.doseUnitName)
    }
  },
  {code: 'frequCode', name: '频率'},
  {code: 'supplyCodeName', name: '给药方式'},
  {code: 'startTime', name: '开始时间'},
  {code: 'endTime', name: '结束时间'},
  {code: 'orderTime', name: '医嘱时间'},
  {code: 'emergencyFlag', name: '紧急'},
  {code: 'ybSelfFlag', name: '医保自费'},
  {code: 'physicianName', name: '医生'},
  {code: 'selfBuyName', name: '费用标志'},
  {code: 'execUnitName', name: '执行科室'},
  {
    code: 'drugQuan', name: '领量', func: (val) => {
      return nu(val.drugQuan) + nu(val.drugQuanName)
    }
  },
  {code: 'groupNoName', name: '药房'},
  {code: 'serialName', name: '序号'},
  {code: 'instruction', name: '嘱托'},
  {code: 'parentNo', name: '父医嘱'},
]

const tableRef = ref()

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'
    }
  }
}

const rowClick = (val, index) => {
  emit('rowClick', val)
}

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

const selectedRow = (row, index) => {
  row.tempCheckbox = !row.tempCheckbox
  if (row['tempCheckbox']) {
    selectedData.value.push(row)
  } else {
    let tempIndex = selectedData.value.indexOf(row)
    if (tempIndex > -1) {
      selectedData.value.splice(tempIndex, 1)
    }
  }
}


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>'
    default:
      return 'warning'
  }
}

</script>

<style scoped lang="scss">
.table {
  width: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table, tbody {
  width: 100%;
  cursor: default;
}


tbody {

  td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 40px;
  }
}


</style>