dev

src/components/charge/AssociationIdCode.vue

@@ -6,12 +6,12 @@
           请勾选该追溯码关联的发药项目商品
         </div>
         <div class="code">
-          <div class="before-code">
+          <span class="before-code">
             {{ traceabilityCode.slice(0, 7) }}
-          </div>
+          </span>
-          <div class="after-code">
+          <span class="after-code">
             {{ traceabilityCode.slice(7, traceabilityCode.length) }}
-          </div>
+          </span>
         </div>
       </div>
       <div style="padding: 0 24px;flex: 1; min-height: 0;">
@@ -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;

src/components/charge/CheckoutDetail.vue

@@ -16,34 +16,31 @@
           </template>
         </el-input>
         <div class="list">
-          <el-scrollbar>
+          <el-table :data="list" :header-cell-style="{backgroundColor: '#F1F5FB'}">
-            <table class="table" style="border-spacing: 0">
+            <el-table-column prop="name" label="发药项目" width="300" show-overflow-tooltip></el-table-column>
-              <thead style="background:#F1F5FB">
+            <el-table-column label="产品标识码" show-overflow-tooltip>
-              <tr class="table-title" style="background: #f1f5fb">
+              <template #default="scope">
-                <th>发药项目</th>
+                <IdCodeListShow :idCodeList="scope.row.idCode" v-if="scope.row.idCode&&scope.row.idCode.length>0"
-                <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>
+              </template>
-                <td>{{ item.selectedNum }}{{ item.selectedUnit }}</td>
+            </el-table-column>
-                <td>{{ item.traceAbilityCodeList ? item.traceAbilityCodeList.length : 0 }}/{{ item.shouldNumber }}</td>
+            <el-table-column label="发药数量" show-overflow-tooltip>
-                <td>
+              <template #default="scope">
-                  <TraceabilityCodeAdd :item="item" @addTraceabilityCode="addTraceAbilityCodeHandler"/>
+              {{scope.row.selectedNum}}{{scope.row.selectedUnit}}
-                </td>
+              </template>
-              </tr>
+            </el-table-column>
-              </tbody>
+            <el-table-column label="已采/应采" show-overflow-tooltip>
-            </table>
+              <template #default="scope">
-          </el-scrollbar>
+                {{ 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>