优化模板弹窗

src/components/med-tec-mod/HuoQuMuBan.vue

@@ -1,37 +1,56 @@
 <template>
   <div class="layout_display_flex_y">
+    <el-dialog
+        title="模板信息"
+        v-model="dialog">
+      <el-table ref="detailsTableRef"
+                height="60vh"
+                :data="muBanXiangQing.data ">
+        <el-table-column type="selection"></el-table-column>
+        <el-table-column label="项目名称" prop="chargeName"></el-table-column>
+        <el-table-column label="厂家" prop="manuName"></el-table-column>
+        <el-table-column label="国家编码" prop="nationalCode"></el-table-column>
+        <el-table-column label="国家名称" prop="nationalName"></el-table-column>
+        <el-table-column label="单价" prop="chargeAmount"></el-table-column>
+        <el-table-column label="数量" prop="amount"></el-table-column>
+        <el-table-column label="金额">
+          <template #default="scope">
+            {{ (scope.row.chargeAmount * scope.row.amount).toFixed(2) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="编码" prop="chargeCodeMx"></el-table-column>
+        <el-table-column label="规格" prop="descriptions"></el-table-column>
+      </el-table>
+
+      <template #footer>
+        <el-button
+            type="danger"
+            size="large"
+            @click="dialog = false">
+          取消
+        </el-button>
+        <el-button
+            type="primary"
+            @click="confirmTemplate"
+            size="large"
+        >
+          确认
+        </el-button>
+      </template>
+    </el-dialog>
+
     <div class="layout_flex_1-y">
       <el-table
           :data="templateData.data"
           height="100%">
         <el-table-column label="模板名称" prop="name" width="120px">
-          <!-- 店家激发弹出框 -->
           <template #default="scope">
-            <el-popover :width="900" placement="right" trigger="click">
-              <template #reference>
-                <el-button text @click="getMuBanXinXiClick(scope.row)" type="primary" :title="scope.row.name">
-                  {{ scope.row.name }}
-                </el-button>
-              </template>
-              <!-- 这里是弹出框中的数据 -->
-              <xc-table :data="muBanXiangQing" :height="170"
-                        @selection-change="xuanZeXiangMuTable" :open-paging="false">
-                <el-table-column type="selection"></el-table-column>
-                <el-table-column label="项目名称" prop="chargeName"></el-table-column>
-                <el-table-column label="厂家" prop="manuName"></el-table-column>
-                <el-table-column label="国家编码" prop="nationalCode"></el-table-column>
-                <el-table-column label="国家名称" prop="nationalName"></el-table-column>
-                <el-table-column label="单价" prop="chargeAmount"></el-table-column>
-                <el-table-column label="数量" prop="amount"></el-table-column>
-                <el-table-column label="金额">
-                  <template #default="scope">
-                    {{ (scope.row.chargeAmount * scope.row.amount).toFixed(2) }}
-                  </template>
-                </el-table-column>
-                <el-table-column label="编码" prop="chargeCodeMx"></el-table-column>
-                <el-table-column label="规格" prop="descriptions"></el-table-column>
-              </xc-table>
-            </el-popover>
+            <el-button text
+                       @click="getMuBanXinXiClick(scope.row)"
+                       type="primary"
+                       :title="scope.row.name">
+              {{ scope.row.name }}
+            </el-button>
           </template>
         </el-table-column>
         <el-table-column>
@@ -69,11 +88,14 @@
 <script setup>
 import {onMounted, ref, reactive} from 'vue'
 import {getMuBan, getMuBanXinXi, shanChuMuBan} from '@/api/inpatient/xiang-mu-lu-ru'
-import {ElMessageBox} from 'element-plus'
+import {ElMessageBox, ElTable} from 'element-plus'
 import XcTable from "@/components/xiao-chan/xc-table/XcTable.vue";
 import {useUserStore} from "@/pinia/user-store";
+import useCompRef from "@/utils/useCompRef";
 
+const dialog = ref(false)
 const emit = defineEmits(['selectionFeiYong'])
+const detailsTableRef = useCompRef(ElTable)
 
 const innerHeight = window.innerHeight
 
@@ -98,6 +120,7 @@ const getMuBanXinXiClick = (row) => {
   getMuBanXinXi(row.name, row.opIdCode).then((res) => {
     muBanXiangQing.value.data = res
     muBanXiangQing.value.total = res.length
+    dialog.value = true
   })
 }
 
@@ -109,9 +132,13 @@ const muBanXiangQing = ref({
   total: 0
 })
 
-// 获取选择的数据
-const xuanZeXiangMuTable = (val) => {
-  emit('selectionFeiYong', {val})
+
+function confirmTemplate() {
+  const data = detailsTableRef.value.getSelectionRows();
+  if (data.length > 0) {
+    emit('selectionFeiYong', {val: data})
+  }
+  dialog.value = false
 }
 
 const shanChuMuBanClick = (index, data) => {