再次优化

src/views/med-tec-mod/MenZhenXiangMu.vue

@@ -51,60 +51,18 @@
             :data="shouFeiData"
             highlight-current-row
             stripe
-            @cell-click="getFeiYongXinXiClick"
+            @cell-click="(val) => getFeiYongXinXiClick(val, false)"
         >
           <el-table-column label="收费信息">
             <el-table-column label="缴费日期" prop="chargeDate" width="80"></el-table-column>
             <el-table-column label="流水号">
               <template #default="scope">
-                <el-popover :width="960" placement="right" trigger="click">
-                  <template #reference>
-                    <el-button
-                        type="success"
-                        @click.stop="getFeiYongXinXiClick(scope.row)"
-                    >
-                      {{ scope.row.realNo }}
-                    </el-button>
-                  </template>
-                  <div style="display: flex;">
-                    <div>
-                      <el-table
-                          :data="feiYongData"
-                          height="500"
-                          highlight-current-row
-                          stripe
-                      >
-                        <el-table-column label="缴费明细信息">
-                          <el-table-column label="待确认标志" prop="confirmFlag">
-                            <template #default="scope">
-                              <span v-html="confirmFlag(scope.row.confirmFlag)"></span>
-                            </template>
-                          </el-table-column>
-                          <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
-                          <el-table-column label="项目" prop="chargeName"></el-table-column>
-                          <el-table-column label="金额" prop="chargeFee"></el-table-column>
-                          <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
-                          <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
-                          <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
-                          <el-table-column label="申请号" prop="reqNo"></el-table-column>
-                        </el-table-column>
-                      </el-table>
-                    </div>
-                    <div style="width: 300px;margin-left: 4px">
-                      <el-table
-                          :data="yaoPinData"
-                          height="500"
-                          highlight-current-row
-                          stripe
-                      >
-                        <el-table-column label="药品信息">
-                          <el-table-column label="名称" prop="tcName" width="210"></el-table-column>
-                          <el-table-column label="数量" prop="quantity"></el-table-column>
-                        </el-table-column>
-                      </el-table>
-                    </div>
-                  </div>
-                </el-popover>
+                <el-button
+                    type="success"
+                    @click.stop="getFeiYongXinXiClick(scope.row, true)"
+                >
+                  {{ scope.row.realNo }}
+                </el-button>
               </template>
             </el-table-column>
           </el-table-column>
@@ -214,11 +172,51 @@
         <el-table-column label="金额" prop="chargeFee"></el-table-column>
       </el-table>
     </div>
+  </el-dialog>
 
+  <el-dialog v-model="itemDetailDialog" title="详情" width="60%">
+    <div style="display: flex;height: 60vh">
+      <div style="flex: 1;width: 0">
+        <el-table
+            :data="feiYongData"
+            height="100%"
+            highlight-current-row
+            stripe
+        >
+          <el-table-column label="缴费明细信息">
+            <el-table-column label="待确认标志" prop="confirmFlag">
+              <template #default="scope">
+                <span v-html="confirmFlag(scope.row.confirmFlag)"></span>
+              </template>
+            </el-table-column>
+            <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
+            <el-table-column label="项目" prop="chargeName"></el-table-column>
+            <el-table-column label="金额" prop="chargeFee"></el-table-column>
+            <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
+            <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
+            <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
+            <el-table-column label="申请号" prop="reqNo"></el-table-column>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div style="width: 300px;margin-left: 4px">
+        <el-table
+            :data="yaoPinData"
+            height="100%"
+            highlight-current-row
+            stripe
+        >
+          <el-table-column label="药品信息">
+            <el-table-column label="名称" prop="tcName" width="210"></el-table-column>
+            <el-table-column label="数量" prop="quantity"></el-table-column>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
   </el-dialog>
 
 </template>
-<script setup>
+<script setup lang="tsx">
 import {shortcuts} from '@/data/shortcuts'
 import {ref} from 'vue'
 import {cptSex} from '@/utils/computed'
@@ -237,7 +235,7 @@ import {useUserStore} from "@/pinia/user-store";
 
 const userInfo = useUserStore().userInfo
 const dateRange = ref(shortcuts[0].value)
-const patientId = ref(isDev ? '357135-4' : '')
+const patientId = ref(isDev ? '1489693-4' : '')
 const xiangMuZhuangTai = ref(0)
 const chargeDate = ref('')
 const patient = ref({})
@@ -247,6 +245,9 @@ const yaoPinData = ref([])
 const keQueRenData = ref([])
 const danGeXingXi = ref([])
 
+// 项目的详情
+const itemDetailDialog = ref(false)
+
 const detailsDialog = reactive({
   dialog: false,
   tableData: [],
@@ -283,13 +284,15 @@ function deptList(item) {
   return !!userInfo.partTimeDeptMap[item];
 }
 
-const getFeiYongXinXiClick = (val) => {
+const getFeiYongXinXiClick = (val, openDialog) => {
   chargeDate.value = val.chargeDate
   getFeiYongXinXi(val.realNo, val.patientId, val.times, xiangMuZhuangTai.value).then((res) => {
     keQueRenData.value = []
     feiYongData.value = res.f
     yaoPinData.value = res.y
-    console.log(res)
+    if (openDialog) {
+      itemDetailDialog.value = true
+    }
     lingShiBaoCunJiaoFeiMingXi.value = XEUtils.clone(val)
     if (needRule(1)) {
       keQueRenData.value = XEUtils.clone(feiYongData.value, true)