src/assets/scss/main.scss

@@ -109,30 +109,9 @@ body {
   margin: 0;
 }
 .el-popper.is-light.type-popper, .el-popper.is-light>.el-popper__arrow:before{
-  background:#F5FAFF;
+  background:#F5FAFF !important;
-}
+  padding: 0 !important;
-.el-popper.is-light.type-popper{
+  //border: 1px solid #4D6DE4 !important;
-  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,8 +1,9 @@
 <template>
-  <Mask :height="560" :width="818" :is-show="show" @close="show = false" :show-footer="true" title="关联追溯码">
+  <Mask  :height="600" :width="700" :is-show="show">
-    <div class="panel">
+    <CloseBtn @click="show = false"></CloseBtn>
-      <div class="title">
+    <el-card>
-        <div class="title-content">
+      <div class="panel">
+        <div class="header">
           请勾选该追溯码关联的发药项目商品
         </div>
         <div class="code">
@@ -13,48 +14,48 @@
             {{ traceabilityCode.slice(7, traceabilityCode.length) }}
           </div>
         </div>
+
+
+        <div class="table">
+          <table class="simple-table">
+            <thead>
+            <tr>
+              <th>选择</th>
+              <th>发药项目</th>
+              <th>产品标识码</th>
+              <th>系统处理</th>
+            </tr>
+            </thead>
+
+            <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>
+              <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;">
+      <template #footer>
-       <div class="list">
+        <el-button @click="addIdCode" type="primary">确定</el-button>
-         <table class="table" style="border-spacing: 0">
+        <el-button @click="show = false" type="primary">关闭</el-button>
-           <thead style="background:#F1F5FB">
+      </template>
-           <tr class="table-title" style="background: #f1f5fb">
+    </el-card>
-             <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"/></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">
-        <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>
   </Mask>
 </template>
 <script setup lang="ts">
 
-import Mask from "@/components/common/Mask.vue";
+import Mask from "@/components/Mask.vue";
 import {ref} from "vue"
 import IdCodeListShow from "@/components/retail/IdCodeListShow.vue";
 import CloseBtn from "@/components/CloseBtn.vue";
@@ -85,157 +86,70 @@ const init = (newIdCode: any, newTableDate: any) => {
 }
 const selected = ref()
 defineExpose({init})
-const addIdCode = () => {
+const addIdCode = ()=>{
-  if (traceabilityCode.value == "") {
+  if (traceabilityCode.value ==""){
     return;
   }
   let idCode = traceabilityCode.value.slice(0, 7);
-  post("goods/goods/addIdCode", {goodsId: selected.value, idCode: idCode}).then((res: any) => {
+  post("goods/goods/addIdCode",{goodsId:selected.value,idCode:idCode}).then((res:any)=>{
-    show.value = false;
+      show.value = false;
-    for (let subItem of tableData.value) {
+      for (let subItem of tableData.value){
-      if (subItem.id === selected.value) {
+        if (subItem.id === selected.value){
-        if (subItem.idCode == null) {
+          if (subItem.idCode == null){
-          subItem.idCode = [];
+            subItem.idCode = [];
+          }
+          subItem.idCode?.push(idCode);
+          break
         }
-        subItem.idCode?.push(idCode);
-        break
       }
-    }
   })
   const selectedItem = tableData.value.find((item: any) => item.id === selected.value);
-  if (!selectedItem) {
+  if(!selectedItem){
     return
   }
   addTraceabilityCodeDo(selectedItem)
 
 }
 
-const emit = defineEmits(["addIdCode", "addTraceabilityCode"])
+const emit = defineEmits(["addIdCode","addTraceabilityCode"])
 const addTraceabilityCodeDo = (item: any) => {
-  emit("addTraceabilityCode", item, traceabilityCode.value)
+  emit("addTraceabilityCode",item,traceabilityCode.value)
 }
 </script>
 <style scoped lang="scss">
 .panel {
-  height: 100%;
+  height: 400px;
-  display: flex;
+  .header {
-  flex-direction: column;
+    margin-top: 20px;
-  .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 {
-      font-weight: 800;
-      font-size: 30px;
-      color: #333333;
-      font-style: normal;
-      display: flex;
-
-      .before-code {
-        color: #999999;
-      }
-
-      .after-code {
-        margin-left: 10px;
-      }
-    }
   }
 
-}
+  .code {
-.list {
+    height: 50px;
-  height: 100%;
+    display: flex;
-  border-radius: 8px 8px 0 0;
+    font-size: 24px;
-  width: 100%;
+    justify-content: center;
-  border: 1px solid #EAEAEC;
+    align-items: center;
-  border-bottom: none;
+
+    .before-code {
+      color: #7a8794;
+
+    }
+
+    .after-code {
+      margin-left: 10px;
+    }
+  }
   .table {
-
+    .simple-table {
-    th {
+      .blue-radio {
-      background: none !important;
+        accent-color: #28addd;
-    }
-    .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" style="border-spacing: 0">
+          <table class="table">
             <thead style="background:#F1F5FB">
             <tr class="table-title" style="background: #f1f5fb">
               <th>发药项目</th>
@@ -26,7 +26,7 @@
               <th>追溯码</th>
             </tr>
             </thead>
-            <tbody class="table-body">
+            <tbody>
             <tr v-for="(item,index) in list" :key="index">
               <td>{{ item.name }}</td>
               <td>
@@ -210,36 +210,12 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
         width: 100%;
         height: 52px;
         font-weight: 500;
-        font-size: 16px;
+        font-size: 14px;
         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;
-          }
         }
       }
 
@@ -249,25 +225,16 @@ 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 {
+        &:last-child {
-            &:first-child {
+          border-radius: 0 0 8px 8px;
-              width: 132px;
-              padding-left: 25px;
-            }
-
-            &:last-child {
-              padding-right: 25px;
-            }
-          }
         }
 
+        &:hover {
+          background-color: #4D6DE4;
+          color: #fff;
+        }
       }
     }
   }
@@ -280,10 +247,4 @@ 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,9 +12,7 @@ const props = defineProps({
       title="已关联的追溯码产品标识码："
       placement="bottom-start"
       trigger="hover"
-      width="218px"
+      width="250px"
-      popper-class="id-code-popper"
-      style="max-height: 221px"
   >
     <template #reference>
       <div class="id-code-panel">
@@ -22,12 +20,14 @@ 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,18 +40,8 @@ const props = defineProps({
   display: flex;
   .number{
     margin-left: 10px;
-    color: #4D6DE4;
+    color: green;
-  }
-}
-.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,59 +1,45 @@
 <template>
   <el-popover
-      title=""
+      title="追溯码："
       placement="bottom-start"
       trigger="click"
-      width="340px"
+      width="300px"
-      popper-class="traceability"
   >
     <template #reference>
       <el-input
           placeholder="追溯码"
           clearable
           v-model="inputTraceabilityCode"
-          style="width: 100%;"
+          style="width: 300px;"
           @keydown.enter="addTraceabilityCodeDo(props.item)"
       ></el-input>
     </template>
     <template #default>
-      <table class="table" style="border-spacing: 0">
+      <div v-for="(subItem,index) in item.traceAbilityCodeList" class="list">
-        <thead>
+        <div class="code"> {{ subItem }}</div>
-        <tr class="table-title">
+        <div class="remove" @click="removeTraceAbility(subItem)">
-          <th>追溯码</th>
+          <el-icon>
-          <th>操作</th>
+            <CloseBold/>
-        </tr>
+          </el-icon>
-        </thead>
+        </div>
-        <tbody class="table-body">
+      </div>
-        <tr v-for="(item,index) in item.traceAbilityCodeList" :key="index">
-          <td>{{ item }}</td>
-          <td>
-            <div @click="removeTraceAbility(item)">
-              <el-icon>
-                <Delete/>
-              </el-icon>
-              删除
-            </div>
-          </td>
-        </tr>
-        </tbody>
-      </table>
     </template>
   </el-popover>
 </template>
 <script setup lang="ts">
-import {ref} from "vue";
+import {ref,watch} from "vue";
-import {Delete} from "@element-plus/icons-vue"
+import {ElMessage, ElMessageBox} from "element-plus";
-
+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 () => {
-      id?: number | undefined;
+      id?: number|undefined;
       traceAbilityCodeList: TraceAbilityCode[];
       retailNumber: number;
       gatherNumber: number;
@@ -68,7 +54,7 @@ const props = defineProps({
       retailNumber: 0,
       gatherNumber: 0,
       selectedUnit: "",
-      idCode: [],
+      idCode:[],
       packagingUnit: "",
       minPackagingUnit: "",
       minPackagingNumber: 0,
@@ -76,9 +62,9 @@ const props = defineProps({
   },
 })
 const inputTraceabilityCode = ref("");
-const emit = defineEmits(["addTraceabilityCode"]);
+const emit =  defineEmits(["addTraceabilityCode"]);
 const addTraceabilityCodeDo = (item: any) => {
-  emit("addTraceabilityCode", item, inputTraceabilityCode.value)
+  emit("addTraceabilityCode",item,inputTraceabilityCode.value)
   inputTraceabilityCode.value = ""
 }
 
@@ -94,76 +80,25 @@ const removeTraceAbility = (code: any) => {
 
 </script>
 <style scoped lang="scss">
-.table {
+.list {
-  width: 100%;
+  display: flex;
-  th {
+
-    background: none !important;
+  .code {
+    width: 100px;
   }
-  .table-title {
+
-    width: 100%;
+  .number {
-    height: 36px;
+    width: 100px;
-    font-weight: 500;
+  }
-    font-size: 14px;
+
-    color: #333333;
+  .remove {
-    font-style: normal;
+    font-size: 16px;
-    padding: 0 25px;
+    width: 50px;
-    background: #F5FAFF;
+
-    th {
+    &:hover {
-      text-align: left;
+      color: #409eff;
-      &: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;
-
-        &:first-child {
-          height: 100%;
-          width: 132px;
-          padding-left: 25px;
-          white-space: nowrap; /* 防止文本换行 */
-          overflow: hidden; /* 隐藏溢出的文本 */
-          text-overflow: ellipsis; /* 显示省略号 */
-        }
-
-        &:last-child {
-          height: 100%;
-          text-align: center;
-          color: #FF0000;
-          line-height: 36px;
-        }
-      }
-    }
-
-  }
 }
 
-table, tbody, td {
-  border-bottom: 1px solid #EAEAEC; /* 明确设置边框 */
-}
-
-table {
-  width: 100%;
-  border: none;
-}
 </style>

src/components/retail/IdCodeListShow.vue

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