yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ feat(mes): 优化库存选择器和退货明细表单布局 

调整库存选择器为下拉选择组件，支持前端过滤，提升用户体验。更新退货明细表单，增加库存记录选择，优化表单布局，确保信息展示更为清晰。
pull/871/MERGE
YunaiV 2026-03-29 23:08:42 +08:00
parent 4f76374065
commit 23bf42c4ad
2 changed files with 176 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
src/views/mes/wm/materialStock/components/WmMaterialStockSelect.vue
View File

@ -1,132 +1,99 @@
<!-- MES 库存选择器：一次加载，前端过滤（支持按 itemId 检索） -->
<template>
<el-dialog v-model="dialogVisible" title="选择库存" width="1200px" @close="handleClose">
<el-form :inline="true" :model="queryParams" class="mb-10px">
<el-form-item label="批次号">
<el-input
v-model="queryParams.batchCode"
placeholder="请输入批次号"
clearable
@keyup.enter="handleQuery"
class="!w-200px"
/>
</el-form-item>
<el-form-item label="仓库">
<WmWarehouseSelect v-model="queryParams.warehouseId" class="!w-200px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleQuery">
<Icon icon="ep:search" class="mr-5px" /> 搜索
</el-button>
<el-button @click="resetQuery"> <Icon icon="ep:refresh" class="mr-5px" /> 重置 </el-button>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
:data="list"
@row-click="handleRowClick"
highlight-current-row
max-height="400px"
<el-select
v-model="selectValue"
:placeholder="placeholder"
:disabled="disabled"
:clearable="clearable"
filterable
:filter-method="handleFilter"
class="!w-1/1"
@change="handleChange"
>
<el-option
v-for="item in filteredList"
:key="item.id"
:label="`${item.warehouseName} / ${item.batchCode || '-'} / 数量:${item.quantity}`"
:value="item.id"
>
<el-table-column label="批次号" prop="batchCode" width="150" />
<el-table-column label="仓库" prop="warehouseName" width="150" />
<el-table-column label="库区" prop="locationName" width="150" />
<el-table-column label="库位" prop="areaName" width="150" />
<el-table-column label="可用数量" prop="quantity" width="120" />
<el-table-column label="是否冻结" prop="frozen" width="100">
<template #default="scope">
<el-tag :type="scope.row.frozen ? 'danger' : 'success'">
{{ scope.row.frozen ? '是' : '否' }}
</el-tag>
</template>
</el-table-column>
</el-table>
<Pagination
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
:total="total"
@pagination="getList"
/>
<template #footer>
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleConfirm">确定</el-button>
</template>
</el-dialog>
<div class="flex items-center gap-8px">
<span>{{ item.warehouseName }} / {{ item.locationName || '-' }} / {{ item.areaName || '-' }}</span>
<el-tag size="small" type="info" class="ml-4px">
{{ item.batchCode || '无批次' }} | {{ item.quantity }}
</el-tag>
</div>
</el-option>
</el-select>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { WmMaterialStockApi } from '@/api/mes/wm/materialstock'
import WmWarehouseSelect from '@/views/mes/wm/warehouse/components/WmWarehouseSelect.vue'
import { WmMaterialStockApi, WmMaterialStockVO } from '@/api/mes/wm/materialstock'
defineOptions({ name: 'WmMaterialStockSelect' })
const emit = defineEmits(['select'])
const props = withDefaults(
defineProps<{
modelValue?: number
itemId?: number
disabled?: boolean
clearable?: boolean
placeholder?: string
}>(),
{
disabled: false,
clearable: true,
placeholder: '请选择库存'
}
)
const dialogVisible = ref(false)
const loading = ref(false)
const list = ref([])
const total = ref(0)
const selectedRow = ref(null)
const currentItemId = ref(null)
const emit = defineEmits<{
'update:modelValue': [value: number | undefined]
change: [item: WmMaterialStockVO | undefined]
}>()
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
itemId: undefined,
batchCode: undefined,
warehouseId: undefined
const allList = ref<WmMaterialStockVO[]>([])
const filteredList = ref<WmMaterialStockVO[]>([])
const selectValue = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
const open = (itemId?: number) => {
currentItemId.value = itemId
queryParams.itemId = itemId
dialogVisible.value = true
getList()
}
const handleClose = () => {
dialogVisible.value = false
selectedRow.value = null
currentItemId.value = null
}
const getList = async () => {
loading.value = true
try {
const data = await WmMaterialStockApi.getMaterialStockPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
const resetQuery = () => {
queryParams.batchCode = undefined
queryParams.warehouseId = undefined
queryParams.itemId = currentItemId.value
handleQuery()
}
const handleRowClick = (row: any) => {
selectedRow.value = row
}
const handleConfirm = () => {
if (!selectedRow.value) {
/** 前端过滤（仓库名 + 批次号） */
const handleFilter = (query: string) => {
if (!query) {
filteredList.value = allList.value
return
}
emit('select', selectedRow.value)
handleClose()
const keyword = query.toLowerCase()
filteredList.value = allList.value.filter(
(item) =>
item.warehouseName?.toLowerCase().includes(keyword) ||
item.batchCode?.toLowerCase().includes(keyword) ||
item.areaName?.toLowerCase().includes(keyword)
)
}
defineExpose({ open })
/** 选中变化 */
const handleChange = (val: number | undefined) => {
const item = allList.value.find((o) => o.id === val)
emit('change', item)
}
/** 加载库存列表 */
const loadData = async () => {
const list: WmMaterialStockVO[] = await WmMaterialStockApi.getMaterialStockSimpleList(props.itemId)
// 过滤掉冻结和零库存
allList.value = list.filter((item) => !item.frozen && item.quantity > 0)
filteredList.value = allList.value
}
/** 监听 itemId 变化重新加载 */
watch(() => props.itemId, () => {
loadData()
})
onMounted(() => {
loadData()
})
</script>

130
src/views/mes/wm/returnvendor/ReturnVendorDetailForm.vue
View File

@ -1,6 +1,6 @@
<!-- MES 供应商退货拣货明细表单弹窗 -->
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
<Dialog :title="dialogTitle" v-model="dialogVisible" width="960px">
<el-form
ref="formRef"
:model="formData"
@ -8,33 +8,66 @@
label-width="110px"
v-loading="formLoading"
>
<el-form-item label="物料" prop="itemId">
<MdItemSelect v-model="formData.itemId" disabled />
</el-form-item>
<el-form-item label="退货仓库" prop="warehouseId">
<WmWarehouseSelect v-model="formData.warehouseId" />
</el-form-item>
<el-form-item label="库区" prop="locationId" v-if="formData.warehouseId">
<WmWarehouseLocationSelect
v-model="formData.locationId"
:warehouse-id="formData.warehouseId"
/>
</el-form-item>
<el-form-item label="库位" prop="areaId" v-if="formData.locationId">
<WmWarehouseAreaSelect v-model="formData.areaId" :location-id="formData.locationId" />
</el-form-item>
<el-form-item label="批次号" prop="batchCode">
<el-input v-model="formData.batchCode" placeholder="请输入批次号" />
</el-form-item>
<el-form-item label="数量" prop="quantity">
<el-input-number
v-model="formData.quantity"
:precision="2"
:min="0"
controls-position="right"
class="!w-1/1"
/>
</el-form-item>
<el-row>
<el-col :span="8">
<el-form-item label="物料" prop="itemId">
<MdItemSelect v-model="formData.itemId" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="库存记录" prop="materialStockId">
<WmMaterialStockSelect
v-model="formData.materialStockId"
:item-id="formData.itemId"
@change="handleStockChange"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="数量" prop="quantity">
<el-input-number
v-model="formData.quantity"
:precision="2"
:min="0"
:max="quantityMax"
controls-position="right"
class="!w-1/1"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="仓库" prop="warehouseId">
<WmWarehouseSelect v-model="formData.warehouseId" disabled />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="库区" prop="locationId">
<WmWarehouseLocationSelect
v-model="formData.locationId"
:warehouse-id="formData.warehouseId"
disabled
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="库位" prop="areaId">
<WmWarehouseAreaSelect
v-model="formData.areaId"
:location-id="formData.locationId"
disabled
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="批次号">
<el-input :model-value="formData.batchCode" disabled />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@ -44,11 +77,10 @@
</template>
<script setup lang="ts">
import {
WmReturnVendorDetailApi,
WmReturnVendorDetailVO
} from '@/api/mes/wm/returnvendor/detail'
import { WmReturnVendorDetailApi, WmReturnVendorDetailVO } from '@/api/mes/wm/returnvendor/detail'
import { WmMaterialStockVO } from '@/api/mes/wm/materialstock'
import MdItemSelect from '@/views/mes/md/item/components/MdItemSelect.vue'
import WmMaterialStockSelect from '@/views/mes/wm/materialstock/components/WmMaterialStockSelect.vue'
import WmWarehouseSelect from '@/views/mes/wm/warehouse/components/WmWarehouseSelect.vue'
import WmWarehouseLocationSelect from '@/views/mes/wm/warehouse/components/WmWarehouseLocationSelect.vue'
import WmWarehouseAreaSelect from '@/views/mes/wm/warehouse/components/WmWarehouseAreaSelect.vue'
@ -68,12 +100,15 @@ const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中
const formType = ref('') // 表单的类型：create / update
const quantityMax = ref<number | undefined>(undefined) // 数量上限（在库数量）
const formData = ref({
id: undefined as number | undefined,
lineId: undefined as number | undefined,
returnId: undefined as number | undefined,
itemId: undefined as number | undefined,
materialStockId: undefined as number | undefined,
quantity: undefined as number | undefined,
batchId: undefined as number | undefined,
batchCode: undefined as string | undefined,
warehouseId: undefined as number | undefined,
locationId: undefined as number | undefined,
@ -81,13 +116,32 @@ const formData = ref({
})
const formRules = reactive({
itemId: [{ required: true, message: '物料不能为空', trigger: 'change' }],
warehouseId: [{ required: true, message: '退货仓库不能为空', trigger: 'change' }],
locationId: [{ required: true, message: '库区不能为空', trigger: 'change' }],
areaId: [{ required: true, message: '库位不能为空', trigger: 'change' }],
materialStockId: [{ required: true, message: '请选择库存记录', trigger: 'change' }],
quantity: [{ required: true, message: '数量不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 库存选中回调 —— 自动回填仓库/库区/库位/批次/数量 */
const handleStockChange = (stock: WmMaterialStockVO | undefined) => {
if (!stock) {
formData.value.warehouseId = undefined
formData.value.locationId = undefined
formData.value.areaId = undefined
formData.value.batchId = undefined
formData.value.batchCode = undefined
formData.value.quantity = undefined
quantityMax.value = undefined
return
}
formData.value.warehouseId = stock.warehouseId
formData.value.locationId = stock.locationId
formData.value.areaId = stock.areaId
formData.value.batchId = stock.batchId
formData.value.batchCode = stock.batchCode
formData.value.quantity = stock.quantity
quantityMax.value = stock.quantity
}
/** 打开弹窗 */
const open = async (type: string, lineId: number, itemId?: number, detailId?: number) => {
dialogVisible.value = true
@ -99,7 +153,8 @@ const open = async (type: string, lineId: number, itemId?: number, detailId?: nu
if (detailId) {
formLoading.value = true
try {
formData.value = await WmReturnVendorDetailApi.getReturnVendorDetail(detailId)
const data = await WmReturnVendorDetailApi.getReturnVendorDetail(detailId)
formData.value = data
} finally {
formLoading.value = false
}
@ -141,12 +196,15 @@ const resetForm = () => {
lineId: undefined,
returnId: undefined,
itemId: undefined,
materialStockId: undefined,
quantity: undefined,
batchId: undefined,
batchCode: undefined,
warehouseId: undefined,
locationId: undefined,
areaId: undefined
}
quantityMax.value = undefined
formRef.value?.resetFields()
}