ylrz_his_scrm_companyUI/src/views/store/components/prescribeDetails.vue

<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      处方详情
    </div>
<div class="content" v-if="item!=null">

     <div class="desct">
      基本信息
     </div>
      <el-descriptions :column="3" border  >
            <el-descriptions-item label="处方单编号"  >
                <span v-if="item!=null">
                  {{item.prescribeCode}}
                </span>
            </el-descriptions-item>
            <el-descriptions-item label="病情描述"  >
                <span v-if="item!=null">{{item.patientDescs}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="既往史" >
                <span v-if="item!=null">{{item.historyIllness}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="患者年龄" >
                <span v-if="item!=null">{{item.patientAge}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="患者姓名" >
                <span v-if="item!=null">{{item.patientName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="体重" >
                <span v-if="item!=null">{{item.weight}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="是否有过敏史" >
              <dict-tag :options="orOptions" :value="item.historyAllergic"/>
            </el-descriptions-item>
            <el-descriptions-item label="过敏史" >
                <span v-if="item!=null">{{item.weight}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="肝功能是否异常" >
                <span v-if="item!=null">{{item.liverUnusual}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="肾功能是否异常" >
                <span v-if="item!=null">{{item.renalUnusual}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="是否是备孕/怀孕/哺乳期" >
                  <dict-tag :options="orOptions" :value="item.isLactation"/>
            </el-descriptions-item>
            <el-descriptions-item label="患者电话" >
                <span v-if="item!=null">{{item.patientTel}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="药师名称" >
                <span v-if="item!=null">{{item.doctorDrugName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="医生名称" >
                <span v-if="item!=null">{{item.doctorName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="审核时间" >
                <span v-if="item!=null">{{item.auditTime}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间" >
                <span v-if="item!=null">{{item.createTime}}</span>
            </el-descriptions-item>
      </el-descriptions>

 </div>
 <div class="content" v-if="item!=null" style="padding-bottom: 70px;">
  <div class="desct">
      商品信息
     </div>
     <el-tooltip class="item" effect="dark" :content="showList ? '显示全部' : '隐藏'" placement="top" style="float: right;">
       <el-button size="mini" circle icon="el-icon-search" @click="showListD()" />
     </el-tooltip>
      <el-table
         border
         v-if="showProd!=null" :data="showProd"
         size="small"
         style="width: 100%;margin-top: 20px" >
         <el-table-column label="商品图片" width="150" align="center">
           <template slot-scope="scope">
             <img :src="scope.row.drugImgUrl" style="height: 50px">
           </template>
         </el-table-column>
        <el-table-column   prop="drugName"  label="药品名称" width="120" align="center"></el-table-column>
        <el-table-column   prop="drugSpec"  label="药品规格" width="120" align="center"></el-table-column>
        <el-table-column   prop="drugPrice"  label="药品单价" width="120" align="center"></el-table-column>
        <el-table-column   prop="drugNum"  label="药品数量" width="120" align="center"></el-table-column>
        <el-table-column   prop="drugUnit"  label="药品单位" width="120" align="center"></el-table-column>
        <el-table-column   prop="usageMethod"  label="使用方法" width="120" align="center"></el-table-column>
        <el-table-column   prop="usageFrequency_unit"  label="药品频次" width="120" align="center"></el-table-column>
        <el-table-column   prop="usageFrequencyUnit"  label="每次用药数量" width="120" align="center"></el-table-column>

        <el-table-column label="小计"  align="center" width="120">
           <template slot-scope="scope" >
            ￥{{(scope.row.drugNum*scope.row.drugPrice).toFixed(2)}}
           </template>
         </el-table-column>
       </el-table>
       <div style="float: right;margin: 20px" v-if="item.prescribeType==2">
         剂数：<span class="color-danger">{{JSON.parse(item.usageJson).counts}}</span>
       </div>
  </div>
  <div class="content" v-if="item!=null">
    <div class="desct">
    服用方法
    </div>
    <el-descriptions :column="3" border  >
          <el-descriptions-item label="剂数"  ><span v-if="item!=null">{{usageJson.counts }}</span></el-descriptions-item>
          <el-descriptions-item label="用药频率"  ><span v-if="item!=null">{{usageJson.usageFrequencyUnit }}</span></el-descriptions-item>
          <el-descriptions-item label="单次用药"  ><span v-if="item!=null">{{usageJson.usagePerUseCount }}</span></el-descriptions-item>
          <el-descriptions-item label="用药方法"  ><span v-if="item!=null">{{usageJson.usageMethod }}</span></el-descriptions-item>
          <el-descriptions-item label="备注"  ><span v-if="item!=null">{{usageJson.remark }}</span></el-descriptions-item>
    </el-descriptions>
  
  </div>
<div class="content" v-if="item!=null">
     <div class="desct">
      处方单
     </div>
        <div style="text-align: center;">
          <el-popover
            placement="right"
            title=""
            <img 
            slot="reference" :src="item.prescribeImgUrl" width="500px">
          </el-popover>
        </div>
</div>




</div>
</template>

<script>
import { listPrescribe, getPrescribe, delPrescribe, addPrescribe, updatePrescribe, exportPrescribe,getDrugInfo } from "@/api/store/prescribe";
  export default {
    name: "orderDe",
    props:["data"],
    data() {
      return {
         pjtUrl: process.env.VUE_APP_BASE_API+"/",
        money:null,
        usageJson:{},
        moneyVisible:false,
        rules:{},
        sendVisible:false,
        logs:[],
        PayOptions:[],
        orOptions:[],
        item:null,
        prod:[],
        showProd:[],
        mrules:{

        },
        form: {
          deliveryCode: null,
          deliveryName:null,
          deliverySn:null,
          orderId:null,
        }
      }
    },
    created() {
      this.getDicts("sys_inquiry_pay").then(response => {
          this.PayOptions = response.data;
        });
    },
    methods: {
      showListD(){
        if(this.showList){
          this.showProd=this.prod
        }else{
          this.showProd=[this.prod[0]]
        }
        this.showList=this.showList?false:true;
      },
      moneyCancel(){
        this.money=null;
        this.moneyVisible=false;
},
      getDetails(orderId) {
        this.item=null;
          getPrescribe(orderId).then(response => {
              this.item = response.data;
              this.usageJson=JSON.parse(this.item.usageJson)
          });
          getDrugInfo(orderId).then(response => {
              this.prod = response.data;
              this.showProd=[this.prod[0]]
          });

      },

    }
  }
</script>
<style>

  .content{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px;

  }
</style>
<style>
  .content{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;

      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>

<style scoped>
.order-content{
  margin: 10px;

}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}
</style>