dev

src/components/SearchInput.vue

@@ -17,47 +17,23 @@
           @click="changeInput"
       />
     </template>
-    <div class="container" style="height: 300px">
+    <div class="container" style="max-height: 300px">
-      <el-scrollbar style="max-height: 300px;width: 100%">
+      <el-table :data="searchList" max-height="300" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
-        <table class="table" style="width: 100%; border-collapse: collapse;max-height: 50px">
+        <el-table-column
-          <!-- 表头 -->
+            v-for="(conf, index) in props.showConfig"
-          <thead>
-          <tr class="table-title">
-            <th
-                v-for="item in showConfig"
-                :key="item.prop"
-                style="background-color: #f5f7fa; padding: 8px;"
-            >
-              {{ item.label }}
-            </th>
-          </tr>
-          </thead>
-          <!-- 表体 -->
-          <tbody>
-          <tr class="table-body"
-              v-for="(item, index) in searchList"
             :key="index"
-              @click="clickRow(item)"
+            :label="conf.label"
-              style="cursor: pointer; transition: background-color 0.2s;"
+            :prop="conf.prop"
-          >
+            show-overflow-tooltip
-            <td
+        />
-                v-for="showItem in showConfig"
+    </el-table>
-                :key="showItem.prop"
-                style="vertical-align: middle; padding: 8px;"
-            >
-              {{ item[showItem.prop] }}
-            </td>
-          </tr>
-          </tbody>
-        </table>
-      </el-scrollbar>
     </div>
   </el-popover>
 
 </template>
 
 <script setup lang="ts">
-import {ref, unref} from "vue";
+import {ref, unref, computed, onMounted} from "vue";
 import {post} from "@/utils/request.ts";
 import {Plus} from "@element-plus/icons-vue";
 
@@ -97,7 +73,7 @@ const props = defineProps({
   }
 });
 
-const searchList = ref([]);
+const searchList = ref<any>([]);
 
 const changeInput = (inputStr: string) => {
   unref(popoverRef).popperRef?.delayHide?.()
@@ -105,11 +81,10 @@ const changeInput = (inputStr: string) => {
     return;
   }
   post(props.requestApi, {keyword: keyword.value}).then((res: any) => {
-    searchList.value = res;
+    searchList.value = res
   });
 
 };
-
 const emit = defineEmits(['selectedCallBack', 'focus']);
 
 const clickRow = (row: any) => {
@@ -150,62 +125,8 @@ const handlerBlur = () => {
     border: 1px solid #409eff !important;
   }
 }
-
+:deep(.el-table__cell) {
-.table {
+  padding: 0 4px;
-  th {
+  height: 36px;
-    background: none !important;
-  }
-
-  .table-title {
-    height: 52px;
-    font-weight: 500;
-    font-size: 14px;
-    color: #333333;
-    font-style: normal;
-
-    th {
-      text-align: left;
-
-      &:nth-child(1) {
-        width: 200px;
-        text-align: left;
-        border-radius: 8px 8px 0 0;
-        padding-left: 24px !important;
-      }
-    }
-  }
-
-  .table-body {
-    height: 52px;
-    font-weight: 500;
-    font-size: 14px;
-    color: #666666;
-    font-style: normal;
-
-    td {
-      &:nth-child(1) {
-        width: 200px;
-        text-align: left;
-        padding-left: 30px !important;
-        white-space: nowrap; /* 防止文本换行 */
-        overflow: hidden; /* 隐藏溢出的文本 */
-        text-overflow: ellipsis; /* 显示省略号 */
-      }
-    }
-
-
-    &:last-child {
-      border-radius: 0 0 8px 8px;
-    }
-
-    &:hover {
-      background-color: #4D6DE4;
-      color: #fff;
-    }
-  }
-}
-
-table thead tr {
-  background: #F5FAFF;;
 }
 </style>

src/components/common/goods/GoodsDetail.vue

@@ -51,8 +51,9 @@
         <el-table-column prop="number" label="数量" width="250">
           <template #default="scope">
             <div v-if="props.status">
-              <el-input-number v-model="scope.row.selectedNum" ref="inputRef" :min="0" @change="handleNumChange(scope.row)"
+              <el-input-number v-model="scope.row.selectedNum" ref="inputRef" :min="0"
-                               style="margin-right: 5px"></el-input-number>
+                               @change="handleNumChange(scope.row)"
+                               style="margin-right: 5px" size="small"></el-input-number>
               <el-dropdown v-if="scope.row.trdnFlag == 1">
                 <span style="line-height: 30px;margin-left: 10px;cursor: pointer">{{ scope.row.selectedUnit }}</span>
                 <template #dropdown>
@@ -130,7 +131,6 @@ const showTooltip = ref(false);
 const goodsDetail = defineModel<any>();
 const delGoods = (item: any) => {
   goodsDetail.value = goodsDetail.value.filter((i: any) => i.id != item.id)
-
 }
 
 const goodsSearchApi = "goods/goods/search";
@@ -168,7 +168,7 @@ const goodsShowConfig = [
     prop: "limit",
   }
 ]
-const inputRef=ref<any>()
+const inputRef = ref<any>()
 const goodsSelect = (row: any) => {
   row.selectedNum = 1
   row.selectedUnit = row.packagingUnit
@@ -225,10 +225,9 @@ const focus = (e: any) => {
 }
 const hilistInfo = ref<any>({})
 const getHilistInfo = (item: any) => {
-  console.log("item", item)
   if (item.hilistCode != null) {
     post("social/directory/getByCode", {code: item.hilistCode}).then((res: any) => {
-      if (!res){
+      if (!res) {
         hilistInfo.value = {}
         return
       }
@@ -243,18 +242,16 @@ const colosInfo = () => {
 }
 </script>
 <style scoped lang="scss">
-:deep(.el-table tr) {
+:deep(.el-table__cell) {
-  font-size: 16px;
+  padding: 0 4px;
-  font-weight: 500;
+  height: 36px;
-  color: #333333;
-  height: 40px;
 }
 
 .bottom {
   text-align: right;
   border-top: 1px solid #EAEAEC;
   display: flex;
-  height: 50px;
+  height: 36px;
   align-items: center;
 
   .search {

src/components/common/service/ServiceDetail.vue

@@ -37,7 +37,7 @@
         <el-table-column label="数量" width="250">
           <template #default="scope">
             <el-input-number v-if="props.status" v-model="scope.row.selectedNum" :min="0"
-                             @change="handleNumChange" style="margin-right: 5px"></el-input-number>
+                             @change="handleNumChange" style="margin-right: 5px" size="small"></el-input-number>
             <span v-else>{{ scope.row.selectedNum }}</span>
             {{ scope.row.selectedUnit }}
           </template>
@@ -168,18 +168,16 @@ const hide = () => {
 }
 </script>
 <style scoped lang="scss">
-:deep(.el-table tr) {
+:deep(.el-table__cell) {
-  font-size: 16px;
+  padding: 0 4px;
-  font-weight: 500;
+  height: 36px;
-  color: #333333;
-  height: 40px;
 }
 
 .bottom {
   text-align: right;
   border-top: 1px solid #EAEAEC;
   display: flex;
-  height: 50px;
+  height: 36px;
   align-items: center;
 
   .search {