feat（wms）：增加 inventory
YunaiV
parent
711d5abc0a
commit
32442830b0
|
|
@ -218,6 +218,7 @@ export enum DICT_TYPE {
|
|||
|
||||
// ========== WMS - 仓库管理模块 ==========
|
||||
WMS_MERCHANT_TYPE = 'merchant_type', // WMS 往来企业类型
|
||||
WMS_INVENTORY_HISTORY_TYPE = 'wms_inventory_history_type', // WMS 库存记录类型
|
||||
|
||||
// ========== AI - 人工智能模块 ==========
|
||||
AI_PLATFORM = 'ai_platform', // AI 平台
|
||||
|
|
|
|||
|
|
@ -0,0 +1,342 @@
|
|||
<!-- WMS 库存统计 -->
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
class="-mb-15px"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="统计维度" prop="type">
|
||||
<el-radio-group v-model="queryParams.type" class="!w-240px" @change="handleTypeChange">
|
||||
<el-radio-button
|
||||
v-for="item in dimensionOptions"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="仓库" prop="warehouseId">
|
||||
<WarehouseSelect
|
||||
v-model="queryParams.warehouseId"
|
||||
class="!w-240px"
|
||||
@change="handleWarehouseChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="AREA_ENABLE" label="库区" prop="areaId">
|
||||
<WarehouseAreaSelect
|
||||
v-model="queryParams.areaId"
|
||||
:warehouse-id="queryParams.warehouseId"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品名称" prop="itemName">
|
||||
<el-input
|
||||
v-model="queryParams.itemName"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入商品名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="商品编号" prop="itemCode">
|
||||
<el-input
|
||||
v-model="queryParams.itemCode"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入商品编号"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="规格名称" prop="skuName">
|
||||
<el-input
|
||||
v-model="queryParams.skuName"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入规格名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="规格编号" prop="skuCode">
|
||||
<el-input
|
||||
v-model="queryParams.skuCode"
|
||||
class="!w-240px"
|
||||
clearable
|
||||
placeholder="请输入规格编号"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon class="mr-5px" icon="ep:search" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon class="mr-5px" icon="ep:refresh" />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 库存列表 -->
|
||||
<ContentWrap>
|
||||
<div class="mb-12px flex items-center justify-between">
|
||||
<span class="text-16px font-500">库存统计</span>
|
||||
<el-checkbox v-model="filterZero" @change="handleFilterZeroChange">
|
||||
过滤掉库存为0的商品
|
||||
</el-checkbox>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:cell-class-name="'wms-inventory-statistics-cell'"
|
||||
:data="list"
|
||||
:show-overflow-tooltip="true"
|
||||
:span-method="spanMethod"
|
||||
border
|
||||
>
|
||||
<template v-if="warehouseDimensionList.includes(queryParams.type)">
|
||||
<el-table-column label="仓库" min-width="160" prop="warehouseId">
|
||||
<template #default="scope">
|
||||
{{ scope.row.warehouseName || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="queryParams.type === INVENTORY_DIMENSION.AREA"
|
||||
label="库区"
|
||||
min-width="160"
|
||||
prop="areaId"
|
||||
>
|
||||
<template #default="scope">
|
||||
{{ scope.row.areaName || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="商品信息"
|
||||
min-width="240"
|
||||
:prop="
|
||||
queryParams.type === INVENTORY_DIMENSION.WAREHOUSE ? 'warehouseItemId' : 'areaItemId'
|
||||
"
|
||||
>
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.itemName || '-' }}</div>
|
||||
<div v-if="scope.row.itemCode" class="text-12px text-gray-500">
|
||||
商品编号：{{ scope.row.itemCode }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格信息" min-width="220" prop="skuId">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.skuName || '-' }}</div>
|
||||
<div v-if="scope.row.skuCode" class="text-12px text-gray-500">
|
||||
规格编号：{{ scope.row.skuCode }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-table-column label="商品信息" min-width="240" prop="itemId">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.itemName || '-' }}</div>
|
||||
<div v-if="scope.row.itemCode" class="text-12px text-gray-500">
|
||||
商品编号：{{ scope.row.itemCode }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格信息" min-width="220" prop="skuId">
|
||||
<template #default="scope">
|
||||
<div>{{ scope.row.skuName || '-' }}</div>
|
||||
<div v-if="scope.row.skuCode" class="text-12px text-gray-500">
|
||||
规格编号：{{ scope.row.skuCode }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="仓库" min-width="160" prop="skuWarehouseId">
|
||||
<template #default="scope">
|
||||
{{ scope.row.warehouseName || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="AREA_ENABLE" label="所属库区" min-width="160" prop="areaId">
|
||||
<template #default="scope">
|
||||
{{ scope.row.areaName || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<el-table-column align="right" label="库存" min-width="130" prop="quantity">
|
||||
<template #default="scope">
|
||||
{{ formatNumber(scope.row.quantity, 2) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页 -->
|
||||
<Pagination
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNo"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { InventoryApi, InventoryVO } from '@/api/wms/inventory'
|
||||
import WarehouseAreaSelect from '@/views/wms/md/warehouse/components/WarehouseAreaSelect.vue'
|
||||
import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
|
||||
import { AREA_ENABLE } from '@/views/wms/utils/config'
|
||||
import { formatNumber } from '@/views/wms/utils/format'
|
||||
|
||||
/** WMS 库存统计 */
|
||||
defineOptions({ name: 'WmsInventoryStatistics' })
|
||||
|
||||
const INVENTORY_DIMENSION = {
|
||||
WAREHOUSE: 'warehouse',
|
||||
AREA: 'area',
|
||||
ITEM: 'item'
|
||||
} as const
|
||||
type InventoryDimension = (typeof INVENTORY_DIMENSION)[keyof typeof INVENTORY_DIMENSION]
|
||||
|
||||
const dimensionOptions = computed(() => [
|
||||
{ label: '仓库', value: INVENTORY_DIMENSION.WAREHOUSE },
|
||||
...(AREA_ENABLE ? [{ label: '库区', value: INVENTORY_DIMENSION.AREA }] : []),
|
||||
{ label: '商品', value: INVENTORY_DIMENSION.ITEM }
|
||||
])
|
||||
const warehouseDimensionList = [INVENTORY_DIMENSION.WAREHOUSE, INVENTORY_DIMENSION.AREA]
|
||||
|
||||
interface InventoryRow extends InventoryVO {
|
||||
warehouseItemId?: string
|
||||
areaItemId?: string
|
||||
skuWarehouseId?: string
|
||||
}
|
||||
|
||||
interface SpanMethodProps {
|
||||
column: {
|
||||
property?: string
|
||||
}
|
||||
rowIndex: number
|
||||
}
|
||||
|
||||
const loading = ref(true) // 列表的加载中
|
||||
const list = ref<InventoryRow[]>([]) // 列表的数据
|
||||
const total = ref(0) // 列表的总页数
|
||||
const filterZero = ref(false) // 是否过滤库存为 0 的商品
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
type: INVENTORY_DIMENSION.WAREHOUSE as InventoryDimension,
|
||||
itemCode: undefined as string | undefined,
|
||||
itemName: undefined as string | undefined,
|
||||
skuCode: undefined as string | undefined,
|
||||
skuName: undefined as string | undefined,
|
||||
warehouseId: undefined as number | undefined,
|
||||
areaId: undefined as number | undefined
|
||||
})
|
||||
const queryFormRef = ref() // 搜索的表单
|
||||
|
||||
/** 查询库存列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await InventoryApi.getInventoryPage({
|
||||
...queryParams,
|
||||
areaId: AREA_ENABLE ? queryParams.areaId : undefined,
|
||||
minQuantity: filterZero.value ? 1 : undefined
|
||||
})
|
||||
list.value = data.list.map((item: InventoryVO) => ({
|
||||
...item,
|
||||
// 展示字段
|
||||
warehouseItemId: `${item.warehouseId || 0}-${item.itemId || 0}`,
|
||||
areaItemId: `${item.areaId || 0}-${item.itemId || 0}`,
|
||||
skuWarehouseId: `${item.skuId || 0}-${item.warehouseId || 0}`
|
||||
}))
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
queryParams.type = INVENTORY_DIMENSION.WAREHOUSE
|
||||
filterZero.value = false
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
/** 统计维度变化 */
|
||||
const handleTypeChange = () => {
|
||||
queryParams.pageNo = 1
|
||||
if (queryParams.type === INVENTORY_DIMENSION.WAREHOUSE) {
|
||||
queryParams.areaId = undefined
|
||||
}
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 是否过滤零库存变化 */
|
||||
const handleFilterZeroChange = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
/** 仓库变化 */
|
||||
const handleWarehouseChange = () => {
|
||||
queryParams.areaId = undefined
|
||||
}
|
||||
|
||||
/** 合并库存统计的维度单元格 */
|
||||
const spanMethod = ({ column, rowIndex }: SpanMethodProps) => {
|
||||
const property = column.property
|
||||
if (!property || !getRowSpanProperties().includes(property)) {
|
||||
return { rowspan: 1, colspan: 1 }
|
||||
}
|
||||
const row = list.value[rowIndex]
|
||||
if (
|
||||
rowIndex > 0 &&
|
||||
getRowPropertyValue(list.value[rowIndex - 1], property) === getRowPropertyValue(row, property)
|
||||
) {
|
||||
return { rowspan: 0, colspan: 0 }
|
||||
}
|
||||
let rowspan = 1
|
||||
for (let index = rowIndex + 1; index < list.value.length; index++) {
|
||||
if (getRowPropertyValue(list.value[index], property) !== getRowPropertyValue(row, property)) {
|
||||
break
|
||||
}
|
||||
rowspan++
|
||||
}
|
||||
return { rowspan, colspan: 1 }
|
||||
}
|
||||
|
||||
const getRowPropertyValue = (row: InventoryRow | undefined, property: string) => {
|
||||
return row?.[property as keyof InventoryRow]
|
||||
}
|
||||
|
||||
const getRowSpanProperties = () => {
|
||||
if (queryParams.type === INVENTORY_DIMENSION.ITEM) {
|
||||
return ['itemId', 'skuId', 'skuWarehouseId']
|
||||
}
|
||||
if (queryParams.type === INVENTORY_DIMENSION.AREA) {
|
||||
return ['warehouseId', 'areaId', 'areaItemId']
|
||||
}
|
||||
return ['warehouseId', 'warehouseItemId']
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.wms-inventory-statistics-cell) {
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,14 +9,7 @@
|
|||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="所属仓库" prop="warehouseId">
|
||||
<el-select v-model="formData.warehouseId" class="!w-1/1" placeholder="请选择所属仓库">
|
||||
<el-option
|
||||
v-for="warehouse in selectableWarehouseList"
|
||||
:key="warehouse.id"
|
||||
:label="warehouse.name"
|
||||
:value="warehouse.id"
|
||||
/>
|
||||
</el-select>
|
||||
<WarehouseSelect v-model="formData.warehouseId" placeholder="请选择所属仓库" />
|
||||
</el-form-item>
|
||||
<el-form-item label="库区名称" prop="name">
|
||||
<el-input v-model="formData.name" maxlength="60" placeholder="请输入库区名称" />
|
||||
|
|
@ -41,8 +34,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { WarehouseApi, WarehouseVO } from '@/api/wms/md/warehouse'
|
||||
import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/wms/md/warehouse/area'
|
||||
import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
|
||||
|
||||
/** WMS 库区表单 */
|
||||
defineOptions({ name: 'WmsWarehouseAreaForm' })
|
||||
|
|
@ -54,12 +47,6 @@ const dialogVisible = ref(false) // 弹窗的是否展示
|
|||
const dialogTitle = ref('') // 弹窗的标题
|
||||
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
|
||||
const formType = ref('') // 表单的类型：create - 新增；update - 修改
|
||||
const warehouseList = ref<WarehouseVO[]>([]) // 仓库精简列表
|
||||
const selectableWarehouseList = computed(() =>
|
||||
warehouseList.value.filter(
|
||||
(warehouse): warehouse is WarehouseVO & { id: number } => !!warehouse.id
|
||||
)
|
||||
)
|
||||
const formData = ref<WarehouseAreaVO>({
|
||||
id: undefined,
|
||||
code: undefined,
|
||||
|
|
@ -80,7 +67,6 @@ const open = async (type: string, id?: number, warehouseId?: number) => {
|
|||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
await getWarehouseList()
|
||||
if (warehouseId) {
|
||||
formData.value.warehouseId = warehouseId
|
||||
}
|
||||
|
|
@ -96,11 +82,6 @@ const open = async (type: string, id?: number, warehouseId?: number) => {
|
|||
}
|
||||
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
|
||||
/** 查询仓库精简列表 */
|
||||
const getWarehouseList = async () => {
|
||||
warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
|
||||
}
|
||||
|
||||
/** 提交表单 */
|
||||
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
|
||||
const submitForm = async () => {
|
||||
|
|
|
|||
|
|
@ -10,19 +10,12 @@
|
|||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="所属仓库" prop="warehouseId">
|
||||
<el-select
|
||||
<WarehouseSelect
|
||||
v-model="queryParams.warehouseId"
|
||||
class="!w-240px"
|
||||
placeholder="请选择所属仓库"
|
||||
@change="warehouseChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="warehouse in selectableWarehouseList"
|
||||
:key="warehouse.id"
|
||||
:label="warehouse.name"
|
||||
:value="warehouse.id"
|
||||
/>
|
||||
</el-select>
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库区名称" prop="name">
|
||||
<el-input
|
||||
|
|
@ -131,6 +124,7 @@ import { dateFormatter } from '@/utils/formatTime'
|
|||
import { WarehouseApi, WarehouseVO } from '@/api/wms/md/warehouse'
|
||||
import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/wms/md/warehouse/area'
|
||||
import WarehouseAreaForm from './WarehouseAreaForm.vue'
|
||||
import WarehouseSelect from '@/views/wms/md/warehouse/components/WarehouseSelect.vue'
|
||||
import download from '@/utils/download'
|
||||
|
||||
/** WMS 库区管理 */
|
||||
|
|
@ -153,11 +147,6 @@ const queryParams = reactive({
|
|||
const queryFormRef = ref() // 搜索的表单
|
||||
const exportLoading = ref(false) // 导出的加载中
|
||||
const warehouseList = ref<WarehouseVO[]>([]) // 仓库精简列表
|
||||
const selectableWarehouseList = computed(() =>
|
||||
warehouseList.value.filter(
|
||||
(warehouse): warehouse is WarehouseVO & { id: number } => !!warehouse.id
|
||||
)
|
||||
)
|
||||
|
||||
/** 查询库区列表 */
|
||||
const getList = async () => {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
<!-- WMS 库区选择器 -->
|
||||
<template>
|
||||
<el-select
|
||||
v-bind="$attrs"
|
||||
v-model="selectValue"
|
||||
:clearable="clearable"
|
||||
:disabled="disabled"
|
||||
:filter-method="handleFilter"
|
||||
:placeholder="placeholder"
|
||||
class="w-1/1"
|
||||
filterable
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-option v-for="area in filteredList" :key="area.id!" :label="area.name" :value="area.id!" />
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/wms/md/warehouse/area'
|
||||
|
||||
/** WMS 库区选择器 */
|
||||
defineOptions({ name: 'WmsWarehouseAreaSelect', inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: number
|
||||
warehouseId?: number
|
||||
disabled?: boolean
|
||||
clearable?: boolean
|
||||
placeholder?: string
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
clearable: true,
|
||||
placeholder: '请选择库区'
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number | undefined]
|
||||
change: [area: WarehouseAreaVO | undefined]
|
||||
}>()
|
||||
|
||||
const areaList = ref<WarehouseAreaVO[]>([]) // 库区列表
|
||||
const filteredList = ref<WarehouseAreaVO[]>([]) // 过滤后的库区列表
|
||||
|
||||
const selectValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
/** 前端过滤 */
|
||||
const handleFilter = (query: string) => {
|
||||
if (!query) {
|
||||
filteredList.value = areaList.value
|
||||
return
|
||||
}
|
||||
const keyword = query.toLowerCase()
|
||||
filteredList.value = areaList.value.filter((area) => area.name?.toLowerCase().includes(keyword))
|
||||
}
|
||||
|
||||
/** 选中变化 */
|
||||
const handleChange = (value: number | undefined) => {
|
||||
emit(
|
||||
'change',
|
||||
areaList.value.find((area) => area.id === value)
|
||||
)
|
||||
}
|
||||
|
||||
/** 获得库区列表 */
|
||||
const getAreaList = async () => {
|
||||
try {
|
||||
areaList.value = await WarehouseAreaApi.getWarehouseAreaSimpleList(props.warehouseId)
|
||||
filteredList.value = areaList.value
|
||||
} catch {
|
||||
areaList.value = []
|
||||
filteredList.value = []
|
||||
}
|
||||
}
|
||||
|
||||
/** 监听仓库变化 */
|
||||
watch(() => props.warehouseId, getAreaList, { immediate: true })
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!-- WMS 仓库选择器 -->
|
||||
<template>
|
||||
<el-select
|
||||
v-bind="$attrs"
|
||||
v-model="selectValue"
|
||||
:clearable="clearable"
|
||||
:disabled="disabled"
|
||||
:filter-method="handleFilter"
|
||||
:placeholder="placeholder"
|
||||
class="w-1/1"
|
||||
filterable
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="warehouse in filteredList"
|
||||
:key="warehouse.id!"
|
||||
:label="warehouse.name"
|
||||
:value="warehouse.id!"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { WarehouseApi, WarehouseVO } from '@/api/wms/md/warehouse'
|
||||
|
||||
/** WMS 仓库选择器 */
|
||||
defineOptions({ name: 'WmsWarehouseSelect', inheritAttrs: false })
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: number
|
||||
disabled?: boolean
|
||||
clearable?: boolean
|
||||
placeholder?: string
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
clearable: true,
|
||||
placeholder: '请选择仓库'
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: number | undefined]
|
||||
change: [warehouse: WarehouseVO | undefined]
|
||||
}>()
|
||||
|
||||
const warehouseList = ref<WarehouseVO[]>([]) // 仓库列表
|
||||
const filteredList = ref<WarehouseVO[]>([]) // 过滤后的仓库列表
|
||||
|
||||
const selectValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
/** 前端过滤 */
|
||||
const handleFilter = (query: string) => {
|
||||
if (!query) {
|
||||
filteredList.value = warehouseList.value
|
||||
return
|
||||
}
|
||||
const keyword = query.toLowerCase()
|
||||
filteredList.value = warehouseList.value.filter((warehouse) =>
|
||||
warehouse.name?.toLowerCase().includes(keyword)
|
||||
)
|
||||
}
|
||||
|
||||
/** 选中变化 */
|
||||
const handleChange = (value: number | undefined) => {
|
||||
emit(
|
||||
'change',
|
||||
warehouseList.value.find((warehouse) => warehouse.id === value)
|
||||
)
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(async () => {
|
||||
warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
|
||||
filteredList.value = warehouseList.value
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue