119 lines
3.0 KiB
Vue
119 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import {ref} from "vue";
|
|
import {post} from "@/utils/request.ts";
|
|
|
|
const state = ref([])
|
|
const options = ref([])
|
|
const selectRef = ref();
|
|
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
|
|
post("goods/goods/search", {keyword: queryString}).then((res: any) => {
|
|
options.value = res;
|
|
let list = res;
|
|
for (let i = 0; i < list.length; i++) {
|
|
list[i].value = list[i].name;
|
|
}
|
|
// cb(res)
|
|
})
|
|
}
|
|
const emit = defineEmits(['selectCallBack'])
|
|
const handleSelect = (item: any) => {
|
|
console.log(item,'item')
|
|
let goods = JSON.parse(JSON.stringify(item));
|
|
console.log("goods",goods)
|
|
let inventory = {
|
|
hilistCode: goods.hilistCode,
|
|
unitPrice: goods.unitPrice,
|
|
packagingUnit: goods.packagingUnit,
|
|
minPackagingUnit: goods.minPackagingUnit,
|
|
|
|
goodId: goods.id,
|
|
name: goods.name,
|
|
wholeNumber: 0,
|
|
purchaseUnitPrice: goods.purchaseUnitPrice,
|
|
disassemblyPrice : goods.disassemblyPrice
|
|
}
|
|
if (selectRef.value) {
|
|
(selectRef.value as HTMLElement).blur();
|
|
}
|
|
emit('selectCallBack', inventory);
|
|
state.value = []
|
|
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="search_box">
|
|
<el-select-v2
|
|
v-model="state"
|
|
style="width: 100%"
|
|
filterable
|
|
remote
|
|
ref="selectRef"
|
|
:remote-method="querySearchAsync"
|
|
:options="options"
|
|
placeholder="输入关键字搜索药品"
|
|
>
|
|
<template #header>
|
|
<div class="header">
|
|
<div class="text">药品</div>
|
|
<div class="text">规格</div>
|
|
<div class="text">库存</div>
|
|
<div class="text">厂家</div>
|
|
<div class="text">最近供应商</div>
|
|
</div>
|
|
</template>
|
|
<template #default="{ item }">
|
|
<div class="row" @click="handleSelect(item)">
|
|
<div class="text" style="margin-left: 0px">{{ item.name }}</div>
|
|
<div class="text">{{item.minPackagingNumber}}*{{item.minPackagingUnit}}/{{ item.packagingUnit }}</div>
|
|
<div class="text">
|
|
{{ item.inventoryWholeNumber }}{{ item.packagingUnit }}
|
|
<template v-if="item.inventoryFragmentNumber > 0">
|
|
{{ item.inventoryFragmentNumber }}{{ item.minPackagingUnit }}
|
|
</template>
|
|
</div>
|
|
<div class="text">{{ item.producer }}</div>
|
|
<div class="text" style="margin-left: 15px">无</div>
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
</template>
|
|
</el-select-v2>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.search_box {
|
|
//background-color: rgb(148.6, 212.3, 117.1);
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
box-sizing: border-box;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
|
|
|
|
}
|
|
.header {
|
|
display: flex;
|
|
|
|
.text {
|
|
font-size: 16px;
|
|
width: 200px;
|
|
color: #6a6a6a;
|
|
}
|
|
}
|
|
.row {
|
|
display: flex;
|
|
max-height: 500px;
|
|
|
|
.text {
|
|
font-size: 12px;
|
|
width: 150px;
|
|
margin-left: 10px;
|
|
overflow: hidden; /* 隐藏超出部分 */
|
|
text-overflow: ellipsis; /* 显示省略号 */
|
|
white-space: nowrap; /* 防止换行 */
|
|
}
|
|
}
|
|
</style> |