优化

src/views/medical-insurance/outpatient/DigitalRx.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="layout_container layout-horizontal digital-rx">
     <aside class="layout_el-table">
-      <div class="rx-list-header">电子处方列表</div>
+      <div class="rx-list-header">
+        电子处方列表&nbsp;&nbsp;
+        <el-button circle icon="Refresh" title="重新获取" @click="refreshRxList"></el-button>
+      </div>
       <el-table :data="rxList" stripe highlight-current-row @row-click="handleClickRow">
         <el-table-column prop="rxTraceCode" label="处方追溯码" width="150"></el-table-column>
         <el-table-column prop="patnName" label="患者姓名" width="90"></el-table-column>
@@ -21,18 +24,84 @@
         <iframe class="layout_full_iframe" :src="pdfSrc" />
       </div>
     </div>
+    <el-dialog v-model="showRemoteRx" fullscreen>
+      <div class="rx-from-query-box">
+        <div class="title-box">
+          <h2>长沙泰和医院医保电子处方笺</h2>
+          <div class="under-title">
+            <span>
+              医保处方编号：{{ rxFromQuery.hiRxno }}
+            </span>
+            <span>
+              处方状态：{{ rxFromQuery.rxStasName }}
+            </span>
+          </div>
+        </div>
+
+        <div class="mdtrt-box">
+          <div class="flex-line">
+            <div>姓名：{{ rxFromQuery.rxOtpinfo.patnName }}</div>
+            <div>性别：{{ rxFromQuery.rxOtpinfo.gend === '1' ? '男' : '女' }}</div>
+            <div>年龄：{{ rxFromQuery.rxOtpinfo.patnAge }}岁</div>
+          </div>
+          <div class="flex-line">
+            <div>门诊号：{{ rxFromQuery.rxOtpinfo.iptOtpNo }}</div>
+            <div>科别：{{ rxFromQuery.rxOtpinfo.prscDeptName }}</div>
+            <div>临床诊断：{{ rxFromQuery.rxOtpinfo.maindiagName }}</div>
+          </div>
+          <div class="flex-line">
+            <div>开具时间：{{ rxFromQuery.prscTime }}</div>
+            <div>有效天数：{{ rxFromQuery.valiDays }}</div>
+            <div>有效截至时间：{{ rxFromQuery.valiEndTime }}</div>
+          </div>
+        </div>
+
+        <div class="rp-box">
+          <div class="rp-text">Rp</div>
+          <div class="rp-detail">
+            <div v-for="(rx, index) in rxFromQuery.rxDetlList" :key="index">
+              <div class="flex-line">
+                <div class="bold-text">
+                  {{ index + 1 }}).&nbsp;{{ rx.drugGenname }}（{{ rx.drugSpec }}）
+                </div>
+                <div>
+                  x&nbsp;&nbsp;&nbsp;&nbsp;{{ rx.drugTotlcnt }}{{ rx.drugTotlcntEmp }}
+                </div>
+              </div>
+              <div class="rx-used-way">
+                用法：{{ rx.medcWayDscr }}
+                <span class="ml15">{{ rx.sinDoscnt }}{{ rx.sinDosunt }}/次</span>
+                <span class="ml15">{{ rx.usedFrquName }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="dr-box">
+          <div class="flex-line">
+            <div>开方医师：{{ rxFromQuery.rxOtpinfo.prscDrName }}</div>
+            <div>审核药师：{{ rxFromQuery.rxOtpinfo.pharName }}</div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 
-import {getRxForAuditing, rxSign, rxUpload} from "@/api/medical-insurance/si-outpatient";
+import {getRxForAuditing, rxInfoQuery, rxRevoke, rxSign, rxUpload} from "@/api/medical-insurance/si-outpatient";
 import {xcMessage} from "@/utils/xiaochan-element-plus";
 
 const rxList = ref([])
 
 const pdfSrc = ref('')
 const currentRow = ref({})
+const showRemoteRx = ref(false)
+const rxFromQuery = ref({
+  rxOtpinfo: {},
+  rxDetlList: []
+})
 
 function handleClickRow(row) {
   currentRow.value = row
@@ -74,18 +143,39 @@ function doRxUpload() {
   })
 }
 
-function doRxInfoQuery() {}
+function doRxInfoQuery() {
+  rxInfoQuery({
+    patientId: currentRow.value.patientId,
+    times: currentRow.value.times
+  }).then(res => {
+    rxFromQuery.value = res
+    showRemoteRx.value = true
+  })
+}
 
-function doRxAuditingQuery() {}
+function doRxAuditingQuery() {
+}
 
-function doRxSettleQuery() {}
+function doRxSettleQuery() {
+}
 
-function doRxRevoke() {}
+function doRxRevoke() {
+  rxRevoke({
+    patientId: currentRow.value.patientId,
+    times: currentRow.value.times
+  }).then(res => {
+    xcMessage.success("处方撤销成功。")
+  })
+}
 
-onActivated(() => {
+function refreshRxList() {
   getRxForAuditing().then(res => {
     rxList.value = res
   })
+}
+
+onActivated(() => {
+  refreshRxList()
 })
 </script>
 
@@ -99,5 +189,82 @@ onActivated(() => {
     padding-left: 4px;
     border-bottom: 1px solid lightgrey;
   }
+
+  .bold-text {
+    font-weight: bold;
+  }
+
+  .rx-from-query-box {
+    width: 60%;
+    background-color: #f8f8f8;
+    height: calc(90vh - 30px);
+    margin-left: 20%;
+    position: relative;
+    padding: 0 24px;
+
+    .flex-line {
+      display: flex;
+      padding: 4px 0;
+
+      > div {
+        flex: 1;
+      }
+    }
+
+    .title-box {
+      width: 100%;
+      text-align: center;
+      padding-top: 12px;
+
+      .under-title {
+        margin-top: -12px;
+        color: blue;
+
+        > span {
+          margin-right: 16px;
+        }
+      }
+    }
+
+    .mdtrt-box {
+      margin-top: 30px;
+      padding: 8px 0 8px 30px;
+      border-top: 1px solid lightgrey;
+      border-bottom: 1px solid lightgrey;
+    }
+
+    .rp-box {
+      padding: 8px;
+
+      .rp-text {
+        font-size: 20px;
+        font-weight: bold;
+        padding-bottom: 12px;
+      }
+
+      .rp-detail {
+        padding: 4px 8px;
+      }
+
+      .rx-used-way {
+        padding-left: 36px;
+
+        > span {
+          margin-left: 22px;
+        }
+      }
+    }
+
+    .dr-box {
+      border-top: 1px solid lightgrey;
+      padding: 24px 0 12px 24px;
+      position: absolute;
+      bottom: 12px;
+      left: 24px;
+      right: 24px;
+    }
+  }
+
+
 }
 </style>