<template>
|
<ElDialog
|
:title="dialogTitle"
|
:model-value="visible"
|
width="960px"
|
align-center
|
destroy-on-close
|
@update:model-value="handleCancel"
|
@closed="handleClosed"
|
>
|
<ElForm
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="110px"
|
class="wh-mat-dialog-form"
|
>
|
<ElTabs v-model="activeTab">
|
<ElTabPane :label="t('pages.basicInfo.whMat.dialog.tabs.basic')" name="basic">
|
<ElRow :gutter="20">
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.code')" prop="code">
|
<ElInput
|
v-model.trim="form.code"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.code')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.name')" prop="name">
|
<ElInput
|
v-model.trim="form.name"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.name')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.groupId')" prop="groupId">
|
<ElTreeSelect
|
v-model="form.groupId"
|
:data="groupOptions"
|
:props="groupTreeProps"
|
check-strictly
|
default-expand-all
|
clearable
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.groupId')"
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem
|
:label="t('pages.basicInfo.whMat.dialog.fields.useOrgName')"
|
prop="useOrgName"
|
>
|
<ElInput
|
v-model.trim="form.useOrgName"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.useOrgName')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.spec')" prop="spec">
|
<ElInput
|
v-model.trim="form.spec"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.spec')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.model')" prop="model">
|
<ElInput
|
v-model.trim="form.model"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.model')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.color')" prop="color">
|
<ElInput
|
v-model.trim="form.color"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.color')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.size')" prop="size">
|
<ElInput
|
v-model.trim="form.size"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.size')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.weight')" prop="weight">
|
<ElInputNumber
|
v-model="form.weight"
|
:min="0"
|
controls-position="right"
|
class="w-full"
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.unit')" prop="unit">
|
<ElInput
|
v-model.trim="form.unit"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.unit')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.purUnit')" prop="purUnit">
|
<ElInput
|
v-model.trim="form.purUnit"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.purUnit')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem
|
:label="t('pages.basicInfo.whMat.dialog.fields.describle')"
|
prop="describle"
|
>
|
<ElInput
|
v-model.trim="form.describle"
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.describle')"
|
clearable
|
/>
|
</ElFormItem>
|
</ElCol>
|
</ElRow>
|
</ElTabPane>
|
|
<ElTabPane :label="t('pages.basicInfo.whMat.dialog.tabs.control')" name="control">
|
<ElRow :gutter="20">
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.safeQty')" prop="safeQty">
|
<ElInputNumber
|
v-model="form.safeQty"
|
:min="0"
|
controls-position="right"
|
class="w-full"
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.minQty')" prop="minQty">
|
<ElInputNumber
|
v-model="form.minQty"
|
:min="0"
|
controls-position="right"
|
class="w-full"
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.maxQty')" prop="maxQty">
|
<ElInputNumber
|
v-model="form.maxQty"
|
:min="0"
|
controls-position="right"
|
class="w-full"
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.stagn')" prop="stagn">
|
<ElInputNumber
|
v-model="form.stagn"
|
:min="0"
|
controls-position="right"
|
class="w-full"
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.valid')" prop="valid">
|
<ElInputNumber
|
v-model="form.valid"
|
:min="0"
|
controls-position="right"
|
class="w-full"
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem
|
:label="t('pages.basicInfo.whMat.dialog.fields.validWarn')"
|
prop="validWarn"
|
>
|
<ElInputNumber
|
v-model="form.validWarn"
|
:min="0"
|
controls-position="right"
|
class="w-full"
|
/>
|
</ElFormItem>
|
</ElCol>
|
<ElCol :span="12">
|
<ElFormItem
|
:label="t('pages.basicInfo.whMat.dialog.fields.flagCheck')"
|
prop="flagCheck"
|
>
|
<ElSelect
|
v-model="form.flagCheck"
|
clearable
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.flagCheck')"
|
>
|
<ElOption
|
v-for="option in flagCheckOptions"
|
:key="option.value"
|
:label="option.label"
|
:value="option.value"
|
/>
|
</ElSelect>
|
</ElFormItem>
|
</ElCol>
|
</ElRow>
|
</ElTabPane>
|
|
<ElTabPane :label="t('pages.basicInfo.whMat.dialog.tabs.batchRule')" name="batchRule">
|
<ElRow :gutter="20">
|
<ElCol :span="12">
|
<ElFormItem :label="t('pages.basicInfo.whMat.dialog.fields.rglarId')" prop="rglarId">
|
<ElSelect
|
v-model="form.rglarId"
|
clearable
|
filterable
|
:placeholder="t('pages.basicInfo.whMat.dialog.placeholders.rglarId')"
|
>
|
<ElOption
|
v-for="option in serialRuleOptions"
|
:key="option.value"
|
:label="option.label"
|
:value="option.value"
|
/>
|
</ElSelect>
|
</ElFormItem>
|
</ElCol>
|
</ElRow>
|
</ElTabPane>
|
</ElTabs>
|
</ElForm>
|
|
<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 {
|
buildWhMatDialogModel,
|
createWhMatFormState,
|
getWhMatFlagCheckOptions
|
} from '../whMatPage.helpers'
|
|
const props = defineProps({
|
visible: { type: Boolean, default: false },
|
dialogType: { type: String, default: 'add' },
|
materialData: { type: Object, default: () => ({}) },
|
groupOptions: { type: Array, default: () => [] },
|
serialRuleOptions: { type: Array, default: () => [] }
|
})
|
|
const emit = defineEmits(['update:visible', 'submit'])
|
const { t } = useI18n()
|
|
const formRef = ref()
|
const activeTab = ref('basic')
|
const form = reactive(createWhMatFormState())
|
|
const dialogTitle = computed(() =>
|
props.dialogType === 'edit'
|
? t('pages.basicInfo.whMat.dialog.titleEdit')
|
: t('pages.basicInfo.whMat.dialog.titleCreate')
|
)
|
const flagCheckOptions = computed(() => getWhMatFlagCheckOptions(t))
|
const groupTreeProps = {
|
label: 'displayLabel',
|
value: 'value',
|
children: 'children'
|
}
|
|
const rules = computed(() => ({
|
code: [
|
{
|
required: true,
|
message: t('pages.basicInfo.whMat.dialog.validation.code'),
|
trigger: 'blur'
|
}
|
],
|
name: [
|
{
|
required: true,
|
message: t('pages.basicInfo.whMat.dialog.validation.name'),
|
trigger: 'blur'
|
}
|
],
|
groupId: [
|
{
|
required: true,
|
message: t('pages.basicInfo.whMat.dialog.validation.groupId'),
|
trigger: 'change'
|
}
|
]
|
}))
|
|
function loadFormData() {
|
Object.assign(form, buildWhMatDialogModel(props.materialData))
|
activeTab.value = 'basic'
|
}
|
|
function resetForm() {
|
Object.assign(form, createWhMatFormState())
|
formRef.value?.clearValidate?.()
|
activeTab.value = 'basic'
|
}
|
|
async function handleSubmit() {
|
try {
|
await formRef.value?.validate?.()
|
emit('submit', { ...form })
|
} catch {
|
return
|
}
|
}
|
|
function handleCancel() {
|
emit('update:visible', false)
|
}
|
|
function handleClosed() {
|
resetForm()
|
}
|
|
watch(
|
() => props.visible,
|
(visible) => {
|
if (visible) {
|
loadFormData()
|
nextTick(() => {
|
formRef.value?.clearValidate?.()
|
})
|
}
|
},
|
{ immediate: true }
|
)
|
|
watch(
|
() => props.materialData,
|
() => {
|
if (props.visible) {
|
loadFormData()
|
}
|
},
|
{ deep: true }
|
)
|
</script>
|
|
<style scoped>
|
.wh-mat-dialog-form :deep(.el-select),
|
.wh-mat-dialog-form :deep(.el-tree-select) {
|
width: 100%;
|
}
|
</style>
|
