<template>
|
<ElDialog
|
:title="dialogTitle"
|
:model-value="visible"
|
width="920px"
|
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">{{ t('common.cancel') }}</ElButton>
|
<ElButton type="primary" @click="handleSubmit">{{ t('common.confirm') }}</ElButton>
|
</span>
|
</template>
|
</ElDialog>
|
</template>
|
|
<script setup>
|
import { computed, nextTick, reactive, ref, watch } from 'vue'
|
import { useI18n } from 'vue-i18n'
|
import ArtForm from '@/components/core/forms/art-form/index.vue'
|
import {
|
buildWarehouseAreasDialogModel,
|
createWarehouseAreasFormState,
|
getWarehouseAreasFlagOptions,
|
getWarehouseAreasStatusOptions
|
} from '../warehouseAreasPage.helpers'
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
dialogType: { type: String, default: 'add' },
|
warehouseAreasData: { type: Object, default: () => ({}) },
|
warehouseOptions: { type: Array, default: () => [] },
|
shipperOptions: { type: Array, default: () => [] },
|
supplierOptions: { type: Array, default: () => [] },
|
typeOptions: { type: Array, default: () => [] }
|
})
|
|
const emit = defineEmits(['update:visible', 'submit'])
|
const formRef = ref()
|
const form = reactive(createWarehouseAreasFormState())
|
const { t } = useI18n()
|
|
const isEdit = computed(() => props.dialogType === 'edit')
|
const dialogTitle = computed(() =>
|
isEdit.value
|
? t('pages.basicInfo.warehouseAreas.dialog.titleEdit')
|
: t('pages.basicInfo.warehouseAreas.dialog.titleCreate')
|
)
|
|
const rules = computed(() => ({
|
warehouseId: [{ required: true, message: t('pages.basicInfo.warehouseAreas.validation.warehouse'), trigger: 'change' }],
|
code: [{ required: true, message: t('pages.basicInfo.warehouseAreas.validation.code'), trigger: 'blur' }],
|
name: [{ required: true, message: t('pages.basicInfo.warehouseAreas.validation.name'), trigger: 'blur' }],
|
type: [{ required: true, message: t('pages.basicInfo.warehouseAreas.validation.type'), trigger: 'change' }],
|
flagMinus: [{ required: true, message: t('pages.basicInfo.warehouseAreas.validation.flagMinus'), trigger: 'change' }],
|
flagMix: [{ required: true, message: t('pages.basicInfo.warehouseAreas.validation.flagMix'), trigger: 'change' }]
|
}))
|
|
const formItems = computed(() => [
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.warehouseName'),
|
key: 'warehouseId',
|
type: 'select',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.warehouse'),
|
clearable: true,
|
filterable: true,
|
options: props.warehouseOptions
|
}
|
},
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.code'),
|
key: 'code',
|
type: 'input',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.code'),
|
clearable: true
|
}
|
},
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.name'),
|
key: 'name',
|
type: 'input',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.name'),
|
clearable: true
|
}
|
},
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.type'),
|
key: 'type',
|
type: 'select',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.type'),
|
clearable: true,
|
filterable: true,
|
options: props.typeOptions
|
}
|
},
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.shipperName'),
|
key: 'shipperId',
|
type: 'select',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.shipper'),
|
clearable: true,
|
filterable: true,
|
options: props.shipperOptions
|
}
|
},
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.supplierName'),
|
key: 'supplierId',
|
type: 'select',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.supplier'),
|
clearable: true,
|
filterable: true,
|
options: props.supplierOptions
|
}
|
},
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.flagMinus'),
|
key: 'flagMinus',
|
type: 'select',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.flagMinus'),
|
options: getWarehouseAreasFlagOptions(t)
|
}
|
},
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.flagLabelManage'),
|
key: 'flagLabelMange',
|
type: 'select',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.flagLabelManage'),
|
options: getWarehouseAreasFlagOptions(t)
|
}
|
},
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.flagMix'),
|
key: 'flagMix',
|
type: 'select',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.flagMix'),
|
options: getWarehouseAreasFlagOptions(t)
|
}
|
},
|
{
|
label: t('table.status'),
|
key: 'status',
|
type: 'select',
|
props: {
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.status'),
|
options: getWarehouseAreasStatusOptions(t)
|
}
|
},
|
{
|
label: t('pages.basicInfo.warehouseAreas.table.sort'),
|
key: 'sort',
|
type: 'number',
|
props: {
|
min: 0,
|
controlsPosition: 'right',
|
style: { width: '100%' }
|
}
|
},
|
{
|
label: t('table.remark'),
|
key: 'memo',
|
type: 'input',
|
span: 24,
|
props: {
|
type: 'textarea',
|
rows: 3,
|
placeholder: t('pages.basicInfo.warehouseAreas.placeholders.memo'),
|
clearable: true
|
}
|
}
|
])
|
|
const loadFormData = () => {
|
Object.assign(form, buildWarehouseAreasDialogModel(props.warehouseAreasData))
|
}
|
|
const resetForm = () => {
|
Object.assign(form, createWarehouseAreasFormState())
|
formRef.value?.clearValidate?.()
|
}
|
|
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.warehouseAreasData,
|
() => {
|
if (props.visible) {
|
loadFormData()
|
}
|
},
|
{ deep: true }
|
)
|
</script>
|
