<template>
|
<ElDialog
|
:title="dialogTitle"
|
:model-value="visible"
|
width="820px"
|
align-center
|
@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 ArtForm from '@/components/core/forms/art-form/index.vue'
|
import {
|
build@{ENTITYNAME}DialogModel,
|
create@{ENTITYNAME}FormState,
|
get@{ENTITYNAME}FieldOptions
|
} from '../@{SIMPLEENTITYNAME}Page.helpers'
|
|
const props = defineProps({
|
visible: { required: false, default: false },
|
dialogType: { required: false, default: 'add' },
|
record: { required: false, default: () => ({}) }
|
})
|
|
const emit = defineEmits(['update:visible', 'submit'])
|
const formRef = ref()
|
const form = reactive(create@{ENTITYNAME}FormState())
|
|
const isEdit = computed(() => props.dialogType === 'edit')
|
const dialogTitle = computed(() => (isEdit.value ? '编辑@{TABLEDESC}' : '新增@{TABLEDESC}'))
|
|
const rules = computed(() => ({
|
@{RULESCONTENT}
|
}))
|
|
function createInputFormItem(label, key, placeholder, extraProps = {}, extraConfig = {}) {
|
return {
|
label,
|
key,
|
type: 'input',
|
props: {
|
placeholder,
|
clearable: true,
|
...extraProps
|
},
|
...extraConfig
|
}
|
}
|
|
function createSelectFormItem(label, key, placeholder, options, extraProps = {}, extraConfig = {}) {
|
return {
|
label,
|
key,
|
type: 'select',
|
props: {
|
placeholder,
|
clearable: true,
|
options,
|
...extraProps
|
},
|
...extraConfig
|
}
|
}
|
|
const formItems = computed(() => [
|
@{FORMITEMSCONTENT}
|
])
|
|
function resetForm() {
|
Object.assign(form, create@{ENTITYNAME}FormState())
|
formRef.value?.clearValidate?.()
|
}
|
|
function loadFormData() {
|
Object.assign(form, build@{ENTITYNAME}DialogModel(props.record))
|
}
|
|
async function handleSubmit() {
|
if (!formRef.value) return
|
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.record,
|
() => {
|
if (props.visible) {
|
loadFormData()
|
}
|
},
|
{ deep: true }
|
)
|
</script>
|
