dev

src/assets/scss/main.scss

@@ -109,9 +109,30 @@ body {
   margin: 0;
 }
 .el-popper.is-light.type-popper, .el-popper.is-light>.el-popper__arrow:before{
-  background:#F5FAFF !important;
+  background:#F5FAFF;
-  padding: 0 !important;
+}
-  //border: 1px solid #4D6DE4 !important;
+.el-popper.is-light.type-popper{
+  background:#F5FAFF;
+  padding: 0;
+}
+.el-popper.is-light.id-code-popper{
+  width: 218px;
+  border-radius: 8px;
+  padding:0;
+  border: 1px solid #EAEAEC;
+}
+.el-popper.is-light.traceability{
+  padding:0;
+  border: 1px solid #EAEAEC;
+}
+.el-popper.is-light.id-code-popper .el-popover__title{
+  height: 35px;
+  line-height: 35px;
+  margin-bottom: 0;
+  font-size: 14px;
+  padding-left:24px;
+  background:#F5FAFF;
+  border-radius: 8px 8px 0 0;
 }
 $btn-color: #4D6DE4;
 $lighter-color: #7c91e3;

src/components/charge/AssociationIdCode.vue

@@ -1,9 +1,8 @@
 <template>
-  <Mask  :height="600" :width="700" :is-show="show">
+  <Mask :height="560" :width="818" :is-show="show" @close="show = false" :show-footer="true" title="关联追溯码">
-    <CloseBtn @click="show = false"></CloseBtn>
-    <el-card>
     <div class="panel">
-        <div class="header">
+      <div class="title">
+        <div class="title-content">
           请勾选该追溯码关联的发药项目商品
         </div>
         <div class="code">
@@ -14,20 +13,19 @@
             {{ traceabilityCode.slice(7, traceabilityCode.length) }}
           </div>
         </div>
-
+      </div>
-
+     <div style="padding: 0 24px;flex: 1; min-height: 0;">
-        <div class="table">
+       <div class="list">
-          <table class="simple-table">
+         <table class="table" style="border-spacing: 0">
-            <thead>
+           <thead style="background:#F1F5FB">
-            <tr>
+           <tr class="table-title" style="background: #f1f5fb">
              <th>选择</th>
              <th>发药项目</th>
              <th>产品标识码</th>
              <th>系统处理</th>
            </tr>
            </thead>
-
+           <tbody class="table-body" style="height: 52px">
-            <tbody>
            <tr v-for="(item,index) in tableData">
              <td><input class="blue-radio" type="radio" :value="item.id" v-model="selected"/></td>
              <td>{{ item.name }}</td>
@@ -42,20 +40,21 @@
              </td>
            </tr>
            </tbody>
-
          </table>
        </div>
      </div>
+    </div>
     <template #footer>
-        <el-button @click="addIdCode" type="primary">确定</el-button>
+      <div class="bottom">
-        <el-button @click="show = false" type="primary">关闭</el-button>
+        <div class="default-btn" @click="show = false" type="primary">关闭</div>
+        <div class="default-btn" @click="addIdCode" type="primary" style="margin-left: 24px">确定</div>
+      </div>
     </template>
-    </el-card>
   </Mask>
 </template>
 <script setup lang="ts">
 
-import Mask from "@/components/Mask.vue";
+import Mask from "@/components/common/Mask.vue";
 import {ref} from "vue"
 import IdCodeListShow from "@/components/retail/IdCodeListShow.vue";
 import CloseBtn from "@/components/CloseBtn.vue";
@@ -118,38 +117,125 @@ const addTraceabilityCodeDo = (item: any) => {
 </script>
 <style scoped lang="scss">
 .panel {
-  height: 400px;
+  height: 100%;
-  .header {
+  display: flex;
-    margin-top: 20px;
+  flex-direction: column;
+  .title {
+    height: 126px;
     font-size: 24px;
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
+    background: #F9FAFC;
+    margin-bottom: 24px;
+
+    .title-content {
+      font-weight: 500;
+      font-size: 20px;
+      color: #666666;
+      font-style: normal;
     }
 
     .code {
-    height: 50px;
+      font-weight: 800;
+      font-size: 30px;
+      color: #333333;
+      font-style: normal;
       display: flex;
-    font-size: 24px;
-    justify-content: center;
-    align-items: center;
 
       .before-code {
-      color: #7a8794;
+        color: #999999;
-
       }
 
       .after-code {
         margin-left: 10px;
       }
     }
-  .table {
-    .simple-table {
-      .blue-radio {
-        accent-color: #28addd;
   }
+
+}
+.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;
+      font-weight: 500;
+      font-size: 16px;
+      color: #333333;
+      line-height: 22px;
+      text-align: left;
+      font-style: normal;
+      padding: 0 25px;
+
+      th {
+        text-align: left;
+
+        &:first-child {
+          padding-left: 25px;
+          width: 122px;
+        }
+
+        &:nth-child(2) {
+          width: 215px;
+        }
+
+        &:nth-child(3) {
+          width: 140px;
+        }
+
+        &:last-child {
+          padding-right: 25px;
+        }
+      }
+    }
+    .table-body {
+      height: 52px;
+      font-weight: 500;
+      font-size: 14px;
+      color: #666666;
+      font-style: normal;
+      tr{
+        height: 52px;
+        font-size: 14px;
+        color: #333333;
+        td {
+          height: 52px;
+          &:first-child {
+            width: 132px;
+            padding-left: 35px;
+          }
+
+          &:last-child {
+            padding-right: 25px;
           }
         }
       }
 
+    }
+  }
+}
+table, tbody, td {
+  border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
+}
+
+table {
+  border: none;
+}
+.bottom {
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 24px;
+}
 </style>

src/components/charge/CheckoutDetail.vue

@@ -16,7 +16,7 @@
           </template>
         </el-input>
         <div class="list">
-          <table class="table">
+          <table class="table" style="border-spacing: 0">
             <thead style="background:#F1F5FB">
             <tr class="table-title" style="background: #f1f5fb">
               <th>发药项目</th>
@@ -26,7 +26,7 @@
               <th>追溯码</th>
             </tr>
             </thead>
-            <tbody>
+            <tbody class="table-body">
             <tr v-for="(item,index) in list" :key="index">
               <td>{{ item.name }}</td>
               <td>
@@ -210,12 +210,36 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
         width: 100%;
         height: 52px;
         font-weight: 500;
-        font-size: 14px;
+        font-size: 16px;
         color: #333333;
+        line-height: 22px;
+        text-align: left;
         font-style: normal;
+        padding: 0 25px;
 
         th {
           text-align: left;
+
+          &:first-child {
+            padding-left: 25px;
+            width: 240px;
+          }
+
+          &:nth-child(2) {
+            width: 146px;
+          }
+
+          &:nth-child(3) {
+            width: 124px;
+          }
+
+          &:nth-child(4) {
+            width: 132px;
+          }
+
+          &:last-child {
+            padding-right: 25px;
+          }
         }
       }
 
@@ -225,16 +249,25 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
         font-size: 14px;
         color: #666666;
         font-style: normal;
+        padding: 0 25px;
 
+        tr {
+          height: 52px;
+          font-size: 14px;
+          color: #333333;
+
+          td {
+            &:first-child {
+              width: 132px;
+              padding-left: 25px;
+            }
 
             &:last-child {
-          border-radius: 0 0 8px 8px;
+              padding-right: 25px;
+            }
+          }
         }
 
-        &:hover {
-          background-color: #4D6DE4;
-          color: #fff;
-        }
       }
     }
   }
@@ -247,4 +280,10 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
   align-items: center;
   padding: 24px;
 }
+table, tbody, td {
+  border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
+}
+table{
+  border: none;
+}
 </style>

src/components/charge/IdCodeListShow.vue

@@ -12,7 +12,9 @@ const props = defineProps({
       title="已关联的追溯码产品标识码："
       placement="bottom-start"
       trigger="hover"
-      width="250px"
+      width="218px"
+      popper-class="id-code-popper"
+      style="max-height: 221px"
   >
     <template #reference>
       <div class="id-code-panel">
@@ -20,14 +22,12 @@ const props = defineProps({
         <div class="number" v-if="props.idCodeList.length >1">
           +{{props.idCodeList.length-1}}
         </div>
-
       </div>
     </template>
     <template #default>
       <div class="id-code-detail">
         <div class="item" v-for="(item,index) in props.idCodeList" :key="index">
           {{index+1}}.{{item}}
-
         </div>
       </div>
     </template>
@@ -40,8 +40,18 @@ const props = defineProps({
   display: flex;
   .number{
     margin-left: 10px;
-    color: green;
+    color: #4D6DE4;
+  }
+}
+.id-code-detail{
+  .item{
+    height: 35px;
+    line-height: 35px;
+    border-bottom: 1px  solid #DCDFE6;
+    padding-left: 24px;
+    &:last-child{
+      border-bottom: none;
+    }
   }
-
 }
 </style>

src/components/charge/TraceabilityCodeAdd.vue

@@ -1,41 +1,55 @@
 <template>
   <el-popover
-      title="追溯码："
+      title=""
       placement="bottom-start"
       trigger="click"
-      width="300px"
+      width="340px"
+      popper-class="traceability"
   >
     <template #reference>
       <el-input
           placeholder="追溯码"
           clearable
           v-model="inputTraceabilityCode"
-          style="width: 300px;"
+          style="width: 100%;"
           @keydown.enter="addTraceabilityCodeDo(props.item)"
       ></el-input>
     </template>
     <template #default>
-      <div v-for="(subItem,index) in item.traceAbilityCodeList" class="list">
+      <table class="table" style="border-spacing: 0">
-        <div class="code"> {{ subItem }}</div>
+        <thead>
-        <div class="remove" @click="removeTraceAbility(subItem)">
+        <tr class="table-title">
+          <th>追溯码</th>
+          <th>操作</th>
+        </tr>
+        </thead>
+        <tbody class="table-body">
+        <tr v-for="(item,index) in item.traceAbilityCodeList" :key="index">
+          <td>{{ item }}</td>
+          <td>
+            <div @click="removeTraceAbility(item)">
               <el-icon>
-            <CloseBold/>
+                <Delete/>
               </el-icon>
+              删除
             </div>
-      </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
     </template>
   </el-popover>
 </template>
 <script setup lang="ts">
-import {ref,watch} from "vue";
+import {ref} from "vue";
-import {ElMessage, ElMessageBox} from "element-plus";
+import {Delete} from "@element-plus/icons-vue"
-import {CloseBold} from "@element-plus/icons-vue";
+
-import {post} from "@/utils/request.ts";
 interface TraceAbilityCode {
   code: string;
   number: number;
   showNumberInput?: boolean;
 }
+
 const props = defineProps({
   item: {
     type: Object as () => {
@@ -80,25 +94,76 @@ const removeTraceAbility = (code: any) => {
 
 </script>
 <style scoped lang="scss">
-.list {
+.table {
-  display: flex;
+  width: 100%;
+  th {
+    background: none !important;
+  }
+  .table-title {
+    width: 100%;
+    height: 36px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #333333;
+    font-style: normal;
+    padding: 0 25px;
+    background: #F5FAFF;
+    th {
+      text-align: left;
+      &:first-child {
+        width: 270px;
+        padding-left: 24px;
+        overflow: hidden;
+      }
+      &:last-child {
+        text-align: center;
+        line-height: 36px;
+      }
+    }
+  }
+  .table-body {
+    height: 52px;
+    font-weight: 500;
+    font-size: 14px;
+    color: #666666;
+    font-style: normal;
+    padding: 0 25px;
+    tr {
+      height: 36px;
+      font-size: 14px;
+      color: #333333;
+      font-weight: 500;
+      font-style: normal;
+      td {
+        height: 36px;
 
-  .code {
+        &:first-child {
-    width: 100px;
+          height: 100%;
+          width: 132px;
+          padding-left: 25px;
+          white-space: nowrap; /* 防止文本换行 */
+          overflow: hidden; /* 隐藏溢出的文本 */
+          text-overflow: ellipsis; /* 显示省略号 */
         }
 
-  .number {
+        &:last-child {
-    width: 100px;
+          height: 100%;
-  }
+          text-align: center;
-
+          color: #FF0000;
-  .remove {
+          line-height: 36px;
-    font-size: 16px;
-    width: 50px;
-
-    &:hover {
-      color: #409eff;
         }
       }
     }
 
+  }
+}
+
+table, tbody, td {
+  border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
+}
+
+table {
+  width: 100%;
+  border: none;
+}
 </style>

src/components/retail/IdCodeListShow.vue

@@ -13,6 +13,7 @@ const props = defineProps({
       placement="bottom-start"
       trigger="hover"
       width="250px"
+      popper-class="id-code-popper"
   >
     <template #reference>
       <div class="id-code-panel">
@@ -20,14 +21,12 @@ const props = defineProps({
         <div class="number" v-if="props.idCodeList.length >1">
           +{{props.idCodeList.length-1}}
         </div>
-
       </div>
     </template>
     <template #default>
       <div class="id-code-detail">
         <div class="item" v-for="(item,index) in props.idCodeList" :key="index">
           {{index+1}}.{{item}}
-
         </div>
       </div>
     </template>
@@ -40,8 +39,19 @@ const props = defineProps({
   display: flex;
   .number{
     margin-left: 10px;
-    color: green;
+    color: #4D6DE4;
   }
 
 }
+.id-code-detail{
+  .item{
+    height: 35px;
+    line-height: 35px;
+    border-bottom: 1px  solid #DCDFE6;
+    padding-left: 24px;
+    &:last-child{
+      border-bottom: none;
+    }
+  }
+}
 </style>