This commit is contained in:
ChenQiuYu 2025-05-26 16:36:25 +08:00
parent 08738c3559
commit 5fbe4a5180
3 changed files with 30 additions and 114 deletions

View File

@ -17,47 +17,23 @@
@click="changeInput"
/>
</template>
<div class="container" style="height: 300px">
<el-scrollbar style="max-height: 300px;width: 100%">
<table class="table" style="width: 100%; border-collapse: collapse;max-height: 50px">
<!-- 表头 -->
<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)"
style="cursor: pointer; transition: background-color 0.2s;"
>
<td
v-for="showItem in showConfig"
:key="showItem.prop"
style="vertical-align: middle; padding: 8px;"
>
{{ item[showItem.prop] }}
</td>
</tr>
</tbody>
</table>
</el-scrollbar>
<div class="container" style="max-height: 300px">
<el-table :data="searchList" max-height="300" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
<el-table-column
v-for="(conf, index) in props.showConfig"
:key="index"
:label="conf.label"
:prop="conf.prop"
show-overflow-tooltip
/>
</el-table>
</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;
}
}
.table {
th {
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;;
:deep(.el-table__cell) {
padding: 0 4px;
height: 36px;
}
</style>

View File

@ -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)"
style="margin-right: 5px"></el-input-number>
<el-input-number v-model="scope.row.selectedNum" ref="inputRef" :min="0"
@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) {
font-size: 16px;
font-weight: 500;
color: #333333;
height: 40px;
:deep(.el-table__cell) {
padding: 0 4px;
height: 36px;
}
.bottom {
text-align: right;
border-top: 1px solid #EAEAEC;
display: flex;
height: 50px;
height: 36px;
align-items: center;
.search {

View File

@ -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) {
font-size: 16px;
font-weight: 500;
color: #333333;
height: 40px;
:deep(.el-table__cell) {
padding: 0 4px;
height: 36px;
}
.bottom {
text-align: right;
border-top: 1px solid #EAEAEC;
display: flex;
height: 50px;
height: 36px;
align-items: center;
.search {