his/openhis-ui-vue3/src/views/doctorstation/components/prescription/prescriptionInfo.vue

<template>
  <el-dialog
    title="处方单"
    v-model="props.open"
    width="1600px"
    append-to-body
    destroy-on-close
    @close="close"
    @open="openDialog"
  >
    <div class="prescription-dialog-wrapper">
      <div
        class="prescription-container"
        v-for="item in precriptionInfo"
        :key="item.prescriptionNo"
      >
        <div>
          <span>处方号：</span>
          <span>{{ item.prescriptionNo }}</span>
        </div>
        <div style="text-align: center">
          <h2>{{ userStore.hospitalName }}</h2>
        </div>
        <div style="text-align: center">
          <h3>处方单</h3>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <span class="item-label">姓名：</span>
            <span class="item-value">{{ item.patientName }}</span>
          </div>
          <div>
            <span class="item-label">年龄：</span>
            <span class="item-value">20岁</span>
          </div>
          <div>
            <span class="item-label">性别：</span>
            <span class="item-value">男</span>
          </div>
        </div>
        <div class="divider"></div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <span class="item-label">科室：</span>
            <span class="item-value">门诊内科</span>
          </div>
          <div>
            <span class="item-label">费用性质：</span>
            <span class="item-value">自费</span>
          </div>
          <div>
            <span class="item-label">日期：</span>
            <span class="item-value">{{ formatDateStr(item.requestTime, 'YYYY-MM-DD') }}</span>
          </div>
        </div>
        <div class="divider"></div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <span class="item-label">门诊号：</span>
            <span class="item-value">M0000000001</span>
          </div>
          <div>
            <span class="item-label">开单医生：</span>
            <span class="item-value">徐丹</span>
          </div>
        </div>
        <div class="divider"></div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <span class="item-label">诊断：</span>
            <span class="item-value">{{ item.conditionDefinitionName }}</span>
          </div>
        </div>
        <div class="divider"></div>
        <div style="font-size: 16px; font-weight: 700; margin-bottom: 3px">Rp</div>
        <div class="medicen-list">
          <div
            style="margin-bottom: 3px"
            v-for="(medItem, index) in item.prescriptionInfoDetailList"
            :key="medItem.requestId"
          >
            <span>{{ index + 1 + '. ' }}</span>
            <span>{{ medItem.adviceName }}</span>
            <span>{{ '(' + medItem.volume + ')' }}</span>
            <span>{{ medItem.quantity + ' ' + medItem.unitCode_dictText }}</span>
            <span>{{ '批次号：' + medItem.lotNumber }}</span>
            <div>
              <span>用法用量：</span>
              <span>
                {{
                  medItem?.methodCode_dictText +
                  ' / ' +
                  medItem?.dose +
                  +' ' +
                  medItem?.doseUnitCode_dictText +
                  ' / ' +
                  medItem?.rateCode_dictText
                }}
              </span>
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <span class="item-label">医师：</span>
            <span class="item-value">{{ item.practitionerName }}</span>
          </div>
          <div>
            <span class="item-label">收费：</span>
            <span class="item-value"></span>
          </div>
          <div>
            <span class="item-label">合计：</span>
            <span class="item-value">{{ getTotalPrice(item) }}</span>
          </div>
        </div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <span class="item-label">调配：</span>
            <span class="item-value"></span>
          </div>
          <div>
            <span class="item-label">核对：</span>
            <span class="item-value"></span>
          </div>
          <div>
            <span class="item-label">发药：</span>
            <span class="item-value"></span>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {formatDateStr} from '@/utils/index';
//高精度库
import Decimal from 'decimal.js';
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();

const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  precriptionInfo: {
    type: [],
    default: [],
  },
});
const emit = defineEmits(['close']);

//合计
function getTotalPrice(item) {
  let totalPrice = new Decimal(0);
  item.prescriptionInfoDetailList.forEach((medItem) => {
    const price = new Decimal(medItem.totalPrice);
    const qty = new Decimal(medItem.quantity);
    totalPrice = totalPrice.plus(price.times(qty));
  });
  return totalPrice.toNumber();
}

function close() {
  emit('close');
}

function clickRow(row) {
  selectRow.value = row;
}
</script>
<style lang="scss" scoped>
.prescription-dialog-wrapper {
  height: 700px;
  display: flex;
  overflow-x: auto;
  flex-wrap: wrap;
  gap: 20px;
  // background-color: #d7d7d7;
  // padding: 10px
}
.prescription-container {
  height: 660px;
  width: 500px;
  border: solid 2px #757575;
  font-size: 13px;
  color: #000000;
  background-color: #f3f3f3;
  padding: 10px;
}
.divider {
  height: 2px;
  background-color: #757575;
  margin: 5px 0 5px 0;
}
.medicen-list {
  height: 330px;
}
.item-label {
  width: 70px;
  text-align: left;
  font-weight: 700;
  color: #000000;
  display: inline-block;
}
.item-value {
  color: #393a3b;
  font-weight: 500;
  width: 87px;
  display: inline-block;
}
</style>