his/openhis-ui-vue3/src/views/clinicmanagement/historicalPrescription/component/prescription.vue

<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- v-hasPermi="['system:user:import']" -->
        <el-button type="primary" plain icon="Back" @click="handleBack">返回列表</el-button>
      </el-col>
      <el-col :span="1.5">
        <!-- v-hasPermi="['system:user:import']" -->
        <el-button type="primary" plain icon="Search" @click="handleQuery">查询</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="CircleClose"
          @click="handleClear"
          
          >重置</el-button
        >
      </el-col> -->
    </el-row>
    <div>
      <div class="prescription-container">
        <div>
          <span>处方号：</span>
          <span>CF0000000001</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">张先生</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">2025-01-01</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">感冒</span>
          </div>
        </div>
        <div class="divider"></div>
        <div style="font-size: 16px; font-weight: 700">Rp</div>
        <div class="medicen-list">
          <div>
            <span>1.</span>
            <span>罗红霉素分散片</span>
            <span>1mg</span>
            <span>1盒</span>
            <span>批次号： 202500000001</span>
          </div>
          <div>
            <span>用法：</span>
            <span>口服一次1片一天</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">徐丹</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>
  </div>
</template>

<script setup name="historicalPrescriptionDetail">
import {getPrescriptionDetail} from './api';
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();
const { proxy } = getCurrentInstance();

const props = defineProps({
  typeDetail: {
    type: String,
    required: false,
  },
  prescriptionNo: {
    type: String,
    required: false,
  },
});

const prescriptionNo = ref('');
const typeDetail = ref('2');
const purchaseinventoryList = ref([]);
const loading = ref(false);
const occurrenceTime = ref([]);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const supplyTypeOptions = ref(undefined);
const supplyStatusOptions = ref(undefined);
const groupMarkers = ref([]);
const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
  },
  rules: {},
});
watch(
  () => props,
  (newValue) => {
    typeDetail.value = newValue.typeDetail;
    getList();
  },
  { immdiate: true, deep: true }
);
const emits = defineEmits(['handleBack']);
const { queryParams, form, rules } = toRefs(data);

function handleBack() {
  typeDetail.value = '1';
  emits('handleBack', typeDetail.value);
}

/** 查询调拨管理项目列表 */
function getList() {
  loading.value = true;
  //   props.prescriptionNo = ""
  getPrescriptionDetail(props.prescriptionNo).then((res) => {
    loading.value = false;
    if (res.data && res.data.length > 0) {
      purchaseinventoryList.value = res.data;
    }
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1;
  getList();
}

/** 选择条数  */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
getList();
</script>
<style scoped>
.prescription-container {
  height: 650px;
  width: 500px;
  border: solid 2px #757575;
  font-size: 13px;
  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: 80px;
  display: inline-block;
}
</style>