Merge remote-tracking branch 'origin/20240912_adapter' into 20240912_adapter

src/views/collect/ConfirmDrugDealOrder.vue

@@ -1,7 +1,10 @@
 <template>
-  <div>
+  <div class="page-container">
-    <el-form :model="formData" class="order-el-form" ref="formData" label-width="120px" @submit.native.prevent>
+    <div class="content-wrapper">
+      <!-- 左侧面板 -->
+      <div class="content-left">
         <el-card>
+          <el-form :model="formData" class="order-el-form" ref="formData" label-width="120px" @submit.native.prevent>
   
           <!--  <el-alert-->
           <!--  style="margin-top: 15px"-->
@@ -235,7 +238,7 @@
 
 
           </div>
-        <el-descriptions title="单据信息" :column="4" border style="margin-top: 15px">
+          <el-descriptions title="单据信息" :column="2" border style="margin-top: 15px">
             <el-descriptions-item label="业务单号">{{ formData.billNo }}</el-descriptions-item>
             <el-descriptions-item label="发货方">{{ formData.shipperName }}</el-descriptions-item>
             <el-descriptions-item label="收货方">{{ formData.fromCorpName }}</el-descriptions-item>
@@ -244,9 +247,13 @@
             <el-descriptions-item label="单据时间">{{ formData.billTime }}</el-descriptions-item>
             <el-descriptions-item label="单据备注">{{ formData.remark }}</el-descriptions-item>
           </el-descriptions>
+        </el-form>
       </el-card>
+    </div>
     
-      <el-tabs type="border-card" style="margin: 15px" v-model="editableTabsValue">
+    <!-- 右侧面板 -->
+    <div class="content-right">
+      <el-tabs type="border-card" class="right-tabs" v-model="editableTabsValue">
         <el-tab-pane label="扫码详情" name="prescribeOriginPanel">
           <prescribeOriginPanel
             v-if="panelALive"
@@ -382,7 +389,8 @@
       </el-dialog>
 
 
-    </el-form>
+    </div>
+  </div>
 </div>
 
 </template>
@@ -655,7 +663,6 @@ export default {
             }
 
           }
-
         }
         return
       })
@@ -1674,20 +1681,62 @@ export default {
 </script>
 
 <style scoped>
+.page-container {
+  height: 100%;
+  width: 100%;
+  padding: 15px;
+  box-sizing: border-box;
+}
+
+.content-wrapper {
+  display: flex;
+  gap: 15px;
+  height: 100%;
+  width: 100%;
+}
+
+.content-left {
+  flex: 0 0 40%;
+  min-width: 0; /* 防止内容溢出 */
+}
+
+.content-right {
+  flex: 0 0 60%;
+  min-width: 0; /* 防止内容溢出 */
+}
+
+/* 保持卡片内容可滚动 */
+.content-left :deep(.el-card__body) {
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* 保持右侧标签页内容可滚动 */
+.content-right :deep(.el-tabs__content) {
+  height: calc(100% - 40px);
+  overflow-y: auto;
+}
+
+/* 其他现有样式保持不变 */
 .el-col {
-  margin-top: -5px;
+  margin: 0;
-  margin-bottom: -5px;
+}
+
+.el-alert {
+  margin-bottom: 16px;
 }
 
-.el-dropdown {
+.el-alert:last-child {
-  vertical-align: top;
+  margin-bottom: 0;
 }
 
-.el-dropdown + .el-dropdown {
+.el-tabs--border-card {
-  margin-left: 15px;
+  height: 100%;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
 }
 
-.el-icon-arrow-down {
+.query-form-item :deep(.el-form-item__content) {
-  font-size: 12px;
+  display: flex;
+  align-items: center;
 }
 </style>

src/views/collect/PannelOrderBizCard.vue

@@ -1,39 +1,62 @@
 <template>
   <div>
-    <el-row>
+    <el-row :gutter="20">
-      <el-col v-for="(info, index)  in preDetailList"  :key="index" :xs="12" :sm="6" :md="6" :lg="8" >
+      <el-col v-for="(info, index) in preDetailList" :key="index" :span="24">
-        <el-card :body-style="{margin:'20px'}"
+        <el-card class="drug-card">
-                 style="margin:20px 20px 20px 20px;;background-color: #e1f3fb;border-radius: 12px; position: relative;">
+          <div class="card-content">
-          <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >
+            <div class="info-section">
-            <p>产品通用名：</p> <p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;">{{ info.cpmctymc }}</p>
+              <div class="info-row">
+                <span class="label">产品通用名：</span>
+                <span class="value product-name">{{ info.cpmctymc }}</span>
               </div>
-          <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >
+              <div class="info-row">
-            <p>包装规格：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.ggxh }}</p>
+                <span class="label">包装规格：</span>
+                <span class="value">{{ info.ggxh }}</span>
               </div>
-          <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >
+              <div class="info-row">
-            <p>制剂规格：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.prepnSpec }}</p>
+                <span class="label">制剂规格：</span>
+                <span class="value">{{ info.prepnSpec }}</span>
               </div>
-          <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >
+              <div class="info-row">
-            <p>批次号：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.batchNo }}</p>
+                <span class="label">批次号：</span>
+                <span class="value">{{ info.batchNo }}</span>
               </div>
-          <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >
+              <div class="info-row">
-            <p>摆放位置：</p><p style="font-size: 16px;background-color: #e1f3fb;font-weight: bold;">{{ info.queueCode }}</p>
+                <span class="label">摆放位置：</span>
+                <span class="value">{{ info.queueCode }}</span>
               </div>
-          <div style="display: flex; justify-content: space-between; align-items: center; height: 26px; /* 约为 200px 的 1/3 */" >
-            <p></p><p style="font-size: 20px;background-color: #e1f3fb;font-weight: bold;margin-top: 80px"><i  class="el-icon-s-opportunity"></i>
-            <span :style="colorStyle(info)">{{ info.colorName}}</span></p>
-          </div>
-          <div style="flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 10px;"  >
-            <span><h1 :style="{ 'font-size': '45px', 'color': info.getConfirm ? '#67C23A' : '#F56C6C' }">{{ info.count }}</h1></span>
-            <el-button type="primary" style="position: absolute; bottom: 20px; right: 130px;" icon="el-icon-document" @click="codeHandleClick(info)"  :disabled="!info.getConfirm">赋码明细</el-button>
-            <el-button type="primary" style="position: absolute; bottom: 20px; right: 20px;" icon="el-icon-thumb" @click="handleClick(info)"  :disabled="info.getConfirm">确认取药</el-button>
             </div>
             
+            <div class="action-section">
+              <div class="count-display">
+                <h1 class="count" :class="{ 'confirmed': info.getConfirm }">{{ info.count }}</h1>
+                <div class="light-info">
+                  <i class="el-icon-s-opportunity"></i>
+                  <span :style="colorStyle(info)">{{ info.colorName }}</span>
+                </div>
+              </div>
+              <div class="button-group">
+                <el-button 
+                  type="primary" 
+                  icon="el-icon-document" 
+                  @click="codeHandleClick(info)" 
+                  :disabled="!info.getConfirm">
+                  赋码明细
+                </el-button>
+                <el-button 
+                  type="primary" 
+                  icon="el-icon-thumb" 
+                  @click="handleClick(info)" 
+                  :disabled="info.getConfirm">
+                  确认取药
+                </el-button>
+              </div>
+            </div>
+          </div>
         </el-card>
       </el-col>
     </el-row>
 
-
     <el-dialog
       title="扫码明细"
       :visible.sync="scanDetailVisible"
@@ -345,4 +368,76 @@ export default {
 </script>
 
 <style scoped>
+.drug-card {
+  margin: 10px 0;
+  background-color: #e1f3fb;
+  border-radius: 12px;
+}
+
+.card-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+}
+
+.info-section {
+  flex: 1;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+}
+
+.label {
+  color: #606266;
+  font-size: 14px;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.value {
+  font-weight: bold;
+  font-size: 14px;
+}
+
+.product-name {
+  font-size: 16px;
+}
+
+.action-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 40px;
+}
+
+.count-display {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.count {
+  font-size: 45px;
+  margin: 0 0 10px 0;
+}
+
+.count.confirmed {
+  color: #67C23A;
+}
+
+.count:not(.confirmed) {
+  color: #F56C6C;
+}
+
+.light-info {
+  text-align: center;
+}
+
+.button-group {
+  display: flex;
+  gap: 10px;
+}
 </style>