From 36833e0cf3a74fbff2a18c8f635da5707b468e6e Mon Sep 17 00:00:00 2001
From: ChenQiuYu <chenqiuyu@jizhiweb.cn>
Date: Mon, 26 May 2025 11:21:56 +0800
Subject: [PATCH] dev

---
 src/components/charge/AssociationIdCode.vue | 101 ++++++++++++--------
 src/components/charge/CheckoutDetail.vue    |  53 +++++-----
 2 files changed, 85 insertions(+), 69 deletions(-)

diff --git a/src/components/charge/AssociationIdCode.vue b/src/components/charge/AssociationIdCode.vue
index 6acb32f..dc6dab1 100644
--- a/src/components/charge/AssociationIdCode.vue
+++ b/src/components/charge/AssociationIdCode.vue
@@ -6,45 +6,45 @@
           请勾选该追溯码关联的发药项目商品
         </div>
         <div class="code">
-          <div class="before-code">
+          <span class="before-code">
             {{ traceabilityCode.slice(0, 7) }}
-          </div>
-          <div class="after-code">
+          </span>
+          <span class="after-code">
             {{ traceabilityCode.slice(7, traceabilityCode.length) }}
-          </div>
+          </span>
+        </div>
+      </div>
+      <div style="padding: 0 24px;flex: 1; min-height: 0;">
+        <div class="list">
+          <table class="table" style="border-spacing: 0">
+            <thead style="background:#F1F5FB">
+            <tr class="table-title" style="background: #f1f5fb">
+              <th>选择</th>
+              <th>发药项目</th>
+              <th>产品标识码</th>
+              <th>系统处理</th>
+            </tr>
+            </thead>
+            <tbody class="table-body" style="height: 52px">
+            <tr v-for="(item,index) in tableData">
+              <td>
+                <input class="blue-radio" type="radio" :value="item.id" v-model="selected" @click="closeModal"/>
+              </td>
+              <td>{{ item.name }}</td>
+              <td>
+                <IdCodeListShow :idCodeList="item.idCode" v-if="item.idCode && item.idCode.length > 0"/>
+                <div v-else>未关联</div>
+              </td>
+              <td style="width: 300px;">
+                <template v-if="selected === item.id">
+                  关联产品标识码，采集追溯码自动识别商品
+                </template>
+              </td>
+            </tr>
+            </tbody>
+          </table>
         </div>
       </div>
-     <div style="padding: 0 24px;flex: 1; min-height: 0;">
-       <div class="list">
-         <table class="table" style="border-spacing: 0">
-           <thead style="background:#F1F5FB">
-           <tr class="table-title" style="background: #f1f5fb">
-             <th>选择</th>
-             <th>发药项目</th>
-             <th>产品标识码</th>
-             <th>系统处理</th>
-           </tr>
-           </thead>
-           <tbody class="table-body" style="height: 52px">
-           <tr v-for="(item,index) in tableData">
-             <td>
-               <input class="blue-radio" type="radio" :value="item.id" v-model="selected"  @click="closeModal"/>
-             </td>
-             <td>{{ item.name }}</td>
-             <td>
-               <IdCodeListShow :idCodeList="item.idCode" v-if="item.idCode && item.idCode.length > 0"/>
-               <div v-else>未关联</div>
-             </td>
-             <td style="width: 300px;">
-               <template v-if="selected === item.id">
-                 关联产品标识码，采集追溯码自动识别商品
-               </template>
-             </td>
-           </tr>
-           </tbody>
-         </table>
-       </div>
-     </div>
     </div>
     <template #footer>
       <div class="bottom">
@@ -116,23 +116,26 @@ const emit = defineEmits(["addIdCode", "addTraceabilityCode"])
 const addTraceabilityCodeDo = (item: any) => {
   emit("addTraceabilityCode", item, traceabilityCode.value)
 }
-const showRadio=ref<any>(false)
+const showRadio = ref<any>(false)
 const closeModal = () => {
   showRadio.value = false
-  selected.value=null
+  selected.value = null
 
 }
 const close = () => {
-  show.value= false
+  show.value = false
   closeModal()
 }
 </script>
 <style scoped lang="scss">
 .panel {
+  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
+
   .title {
+    width: 100%;
     height: 126px;
     font-size: 24px;
     display: flex;
@@ -140,6 +143,7 @@ const close = () => {
     justify-content: center;
     align-items: center;
     background: #F9FAFC;
+    padding: 24px;
     margin-bottom: 24px;
 
     .title-content {
@@ -150,34 +154,43 @@ const close = () => {
     }
 
     .code {
+      width: 100%;
+      flex: 1;
+      min-height: 0;
       font-weight: 800;
       font-size: 30px;
       color: #333333;
       font-style: normal;
       display: flex;
-
+      justify-content: center;
       .before-code {
         color: #999999;
       }
-
       .after-code {
+        min-width: 0;
         margin-left: 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
 
 }
+
 .list {
   height: 100%;
   border-radius: 8px 8px 0 0;
   width: 100%;
   border: 1px solid #EAEAEC;
   border-bottom: none;
+
   .table {
 
     th {
       background: none !important;
     }
+
     .table-title {
       width: 100%;
       height: 52px;
@@ -210,18 +223,22 @@ const close = () => {
         }
       }
     }
+
     .table-body {
       height: 52px;
       font-weight: 500;
       font-size: 14px;
       color: #666666;
       font-style: normal;
-      tr{
+
+      tr {
         height: 52px;
         font-size: 14px;
         color: #333333;
+
         td {
           height: 52px;
+
           &:first-child {
             width: 132px;
             padding-left: 35px;
@@ -236,6 +253,7 @@ const close = () => {
     }
   }
 }
+
 table, tbody, td {
   border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
 }
@@ -243,6 +261,7 @@ table, tbody, td {
 table {
   border: none;
 }
+
 .bottom {
   height: 100%;
   display: flex;
diff --git a/src/components/charge/CheckoutDetail.vue b/src/components/charge/CheckoutDetail.vue
index 07cbe4a..1a70a18 100644
--- a/src/components/charge/CheckoutDetail.vue
+++ b/src/components/charge/CheckoutDetail.vue
@@ -16,34 +16,31 @@
           </template>
         </el-input>
         <div class="list">
-          <el-scrollbar>
-            <table class="table" style="border-spacing: 0">
-              <thead style="background:#F1F5FB">
-              <tr class="table-title" style="background: #f1f5fb">
-                <th>发药项目</th>
-                <th>产品标识码</th>
-                <th>发药数量</th>
-                <th>已采/应采</th>
-                <th>追溯码</th>
-              </tr>
-              </thead>
-              <tbody class="table-body">
-              <tr v-for="(item,index) in list" :key="index">
-                <td>{{ item.name }}</td>
-                <td>
-                  <IdCodeListShow :idCodeList="item.idCode" v-if="item.idCode&&item.idCode.length>0"
-                                  @addTraceabilityCode="addTraceAbilityCodeHandler"/>
-                  <div v-else>未关联</div>
-                </td>
-                <td>{{ item.selectedNum }}{{ item.selectedUnit }}</td>
-                <td>{{ item.traceAbilityCodeList ? item.traceAbilityCodeList.length : 0 }}/{{ item.shouldNumber }}</td>
-                <td>
-                  <TraceabilityCodeAdd :item="item" @addTraceabilityCode="addTraceAbilityCodeHandler"/>
-                </td>
-              </tr>
-              </tbody>
-            </table>
-          </el-scrollbar>
+          <el-table :data="list" :header-cell-style="{backgroundColor: '#F1F5FB'}">
+            <el-table-column prop="name" label="发药项目" width="300" show-overflow-tooltip></el-table-column>
+            <el-table-column label="产品标识码" show-overflow-tooltip>
+              <template #default="scope">
+                <IdCodeListShow :idCodeList="scope.row.idCode" v-if="scope.row.idCode&&scope.row.idCode.length>0"
+                                @addTraceabilityCode="addTraceAbilityCodeHandler"/>
+                <div v-else>未关联</div>
+              </template>
+            </el-table-column>
+            <el-table-column label="发药数量" show-overflow-tooltip>
+              <template #default="scope">
+              {{scope.row.selectedNum}}{{scope.row.selectedUnit}}
+              </template>
+            </el-table-column>
+            <el-table-column label="已采/应采" show-overflow-tooltip>
+              <template #default="scope">
+                {{ scope.row.traceAbilityCodeList ? scope.row.traceAbilityCodeList.length : 0 }}/{{ scope.row.shouldNumber }}
+              </template>
+            </el-table-column>
+            <el-table-column label="追溯码" width="300">
+              <template #default="scope">
+                <TraceabilityCodeAdd :item="scope.row" @addTraceabilityCode="addTraceAbilityCodeHandler"/>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
       </div>
     </template>