web_dist/src/components/inpatient/nurse-module/BottleCard.vue

<template>
  <div style="width: 230px;padding: 4px;border: 1px solid black;border-radius: 4px">
    <table style="width: 100%;border-spacing: 0; border-collapse: collapse;table-layout: fixed">
      <thead>
        <tr style="font-size: 20px;">
          <th colspan="4" style="text-align: left;font-weight: bold">
            {{ patInfo.patName }}
          </th>
          <th colspan="2" style="text-align: left">
            {{ bottleGroup }}
          </th>
          <th colspan="2" style="text-align: right">
            {{ patInfo.bedNo }}
          </th>
        </tr>
        <tr  style="font-size: 14px;font-weight: bold;">
          <th colspan="5" style="text-align: left">
            <!-- {{ patInfo.patName }} -->
            {{ patInfo.patGender }}
            {{ patInfo.ageLabel }}
            {{ patInfo.wardName }}
          </th>
          <th colspan="3" style="text-align: right">
            {{ simpleYzDate }}
          </th>
        </tr>
        <!-- <tr>
          <th colspan="3" style="text-align: left">
            {{ patInfo.wardName }}
          </th>
          <th colspan="3">
            {{ bottleGroup }}
          </th>
          <th colspan="2" style="text-align: right">
            {{ simpleYzDate }}
          </th>
        </tr> -->
      </thead>
      <tbody>
        <tr>
          <td colspan="5">药品名称 / 规格</td>
          <!-- <td style="width: 36px;text-align: center;">规格</td> -->
          <td style="width: 36px;text-align: center;">频率</td>
          <td style="width: 36px;text-align: center;">用法</td>
          <td style="width: 36px;text-align: center;">数量</td>
        </tr>
        <tr v-for="item in drugs">
          <td colspan="5" style="width: 100%;height: 100%;position: relative">
            <div style="margin-bottom: 10px;">
              {{ item.drugName }}
              <!-- <br/>
              <br/> -->
            </div>
            <div style="width: 100%;text-align: center;font-weight: bold;">{{ item.specification }}</div>
          </td>
          <!-- <td>
            <div style="width: 20px;font-weight: bolder;padding: 0 1px;word-wrap: break-word;">
              {{ item.specification }}
            </div>
          </td> -->
          <td style="text-align: right">
            <div>{{ item.frequCode }}</div>
            <!-- <div>{{ item.startHour }}</div> -->
          </td>
          <td style="text-align: center">
            {{ item.instruction }}
            <!-- {{ drugs[0].instruction }} -->
          </td>
          <td style="text-align: center">
            {{ item.drugOcc }}
          </td>
        </tr>
        <tr>
          <td colspan="2" style="text-align: center;">配药时间</td>
          <td colspan="2" style="width: 36px;text-align: center;">加药</td>
          <td colspan="2" style="width: 36px;text-align: center;">摆药</td>
          <td colspan="2" style="width: 36px;text-align: center;">审核</td>
        </tr>
        <tr>
          <td colspan="2" style="text-align: center;"></td>
          <td colspan="2" style="width: 36px;height:30px ;text-align: center;"></td>
          <td colspan="2" style="width: 36px;text-align: center;"></td>
          <td colspan="2" style="width: 36px;text-align: center;"></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
const props = defineProps({
  drugs: {
    type: Array,
    required: true
  },
  patInfo: {
    type: Object,
    required: true
  },
  yzDate: {
    type: String,
    required: true
  },
  bottleGroup: {
    type: String,
    required: true
  }
})

const simpleYzDate = computed(() => {
  console.log('yzDate',props.yzDate)
  if(props.yzDate instanceof Date) return ""
  let arr = props.yzDate.split('-')
  return arr[1] + '/' + arr[2]
})

</script>

<style scoped>
td {
  border: 1px solid black;
  font-size: 12px;
  padding: 2px;
}
</style>