<template>
|
<ElDialog
|
:title="dialogTitle"
|
:model-value="visible"
|
width="960px"
|
align-center
|
destroy-on-close
|
@update:model-value="handleCancel"
|
@closed="handleClosed"
|
>
|
<ArtForm
|
ref="formRef"
|
v-model="form"
|
:items="formItems"
|
:rules="rules"
|
:span="12"
|
:gutter="20"
|
label-width="110px"
|
:show-reset="false"
|
:show-submit="false"
|
/>
|
|
<template #footer>
|
<span class="dialog-footer">
|
<ElButton @click="handleCancel">取消</ElButton>
|
<ElButton type="primary" @click="handleSubmit">确定</ElButton>
|
</span>
|
</template>
|
</ElDialog>
|
</template>
|
|
<script setup>
|
import { computed, nextTick, reactive, ref, watch } from 'vue'
|
import ArtForm from '@/components/core/forms/art-form/index.vue'
|
import {
|
buildLocAreaMatRelationBindLocModel,
|
createLocAreaMatRelationBindLocState
|
} from '../locAreaMatPage.helpers'
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
bindData: { type: Object, default: () => ({}) },
|
warehouseOptions: { type: Array, default: () => [] },
|
areaOptions: { type: Array, default: () => [] },
|
groupOptions: { type: Array, default: () => [] },
|
locOptions: { type: Array, default: () => [] }
|
})
|
|
const emit = defineEmits(['update:visible', 'submit'])
|
|
const formRef = ref()
|
const form = reactive(createLocAreaMatRelationBindLocState())
|
|
const dialogTitle = computed(() => '库位绑定库区')
|
const selectedWarehouseId = computed(() =>
|
form.warehouseId !== undefined && form.warehouseId !== null && form.warehouseId !== ''
|
? Number(form.warehouseId)
|
: void 0
|
)
|
const selectedAreaId = computed(() =>
|
form.areaId !== undefined && form.areaId !== null && form.areaId !== ''
|
? Number(form.areaId)
|
: void 0
|
)
|
|
const filteredAreaOptions = computed(() => {
|
if (selectedWarehouseId.value === void 0) {
|
return props.areaOptions
|
}
|
return props.areaOptions.filter(
|
(item) => item.warehouseId === void 0 || Number(item.warehouseId) === selectedWarehouseId.value
|
)
|
})
|
|
const filteredLocOptions = computed(() => {
|
return props.locOptions.filter((item) => {
|
const warehouseMatch =
|
selectedWarehouseId.value === void 0 ||
|
item.warehouseId === void 0 ||
|
Number(item.warehouseId) === selectedWarehouseId.value
|
const areaMatch =
|
selectedAreaId.value === void 0 || item.areaId === void 0 || Number(item.areaId) === selectedAreaId.value
|
return warehouseMatch && areaMatch
|
})
|
})
|
|
const rules = computed(() => ({
|
warehouseId: [{ required: true, message: '请选择仓库', trigger: 'change' }],
|
areaId: [{ required: true, message: '请选择库区', trigger: 'change' }],
|
groupId: [{ required: true, message: '请选择物料分组', trigger: 'change' }],
|
locId: [{ required: true, message: '请选择库位', trigger: 'change' }]
|
}))
|
|
const formItems = computed(() => [
|
{
|
label: '仓库',
|
key: 'warehouseId',
|
type: 'select',
|
props: {
|
placeholder: '请选择仓库',
|
clearable: true,
|
filterable: true,
|
options: props.warehouseOptions
|
}
|
},
|
{
|
label: '库区',
|
key: 'areaId',
|
type: 'select',
|
props: {
|
placeholder: '请选择库区',
|
clearable: true,
|
filterable: true,
|
options: filteredAreaOptions.value
|
}
|
},
|
{
|
label: '物料分组',
|
key: 'groupId',
|
type: 'treeselect',
|
props: {
|
data: props.groupOptions,
|
props: {
|
label: 'displayLabel',
|
value: 'id',
|
children: 'children'
|
},
|
placeholder: '请选择物料分组',
|
clearable: false,
|
checkStrictly: true,
|
defaultExpandAll: true
|
}
|
},
|
{
|
label: '库位',
|
key: 'locId',
|
type: 'select',
|
span: 24,
|
props: {
|
placeholder: '请选择库位',
|
clearable: true,
|
multiple: true,
|
collapseTags: true,
|
filterable: true,
|
options: filteredLocOptions.value
|
}
|
}
|
])
|
|
const resetForm = () => {
|
Object.assign(form, createLocAreaMatRelationBindLocState())
|
formRef.value?.clearValidate?.()
|
}
|
|
const loadFormData = () => {
|
Object.assign(form, buildLocAreaMatRelationBindLocModel(props.bindData))
|
}
|
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
try {
|
await formRef.value.validate()
|
emit('submit', { ...form })
|
} catch {
|
return
|
}
|
}
|
|
const handleCancel = () => {
|
emit('update:visible', false)
|
}
|
|
const handleClosed = () => {
|
resetForm()
|
}
|
|
watch(
|
() => props.visible,
|
(visible) => {
|
if (visible) {
|
loadFormData()
|
nextTick(() => {
|
formRef.value?.clearValidate?.()
|
})
|
}
|
},
|
{ immediate: true }
|
)
|
|
watch(
|
() => props.bindData,
|
() => {
|
if (props.visible) {
|
loadFormData()
|
}
|
},
|
{ deep: true }
|
)
|
</script>
|
