153 lines
3.5 KiB
Vue
153 lines
3.5 KiB
Vue
<template>
|
||
<el-dialog
|
||
:title="isEdit ? '编辑字典' : '新增字典'"
|
||
:visible="visible"
|
||
width="600px"
|
||
@close="handleClose"
|
||
>
|
||
<el-form
|
||
ref="formRef"
|
||
:model="form"
|
||
:rules="rules"
|
||
label-width="120px"
|
||
>
|
||
<el-form-item label="字典类型" prop="type">
|
||
<el-input v-model="form.type" placeholder="请输入字典类型" :disabled="isEdit" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="字典名称" prop="name">
|
||
<el-input v-model="form.name" placeholder="请输入字典名称" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="字典值" prop="value">
|
||
<el-input v-model="form.value" placeholder="请输入字典值" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="排序" prop="sort">
|
||
<el-input-number v-model="form.sort" :min="0" :max="9999" controls-position="right" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="备注" prop="remark">
|
||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="handleClose">取消</el-button>
|
||
<el-button type="primary" @click="handleSubmit" :loading="submitting">确定</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, computed, watch } from 'vue'
|
||
import { createDictionary, updateDictionary } from '@/api/dictionary'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const props = defineProps({
|
||
visible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
dictionary: {
|
||
type: Object,
|
||
default: null
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['close', 'success'])
|
||
|
||
const formRef = ref(null)
|
||
const submitting = ref(false)
|
||
|
||
const isEdit = computed(() => !!props.dictionary)
|
||
|
||
const form = reactive({
|
||
type: '',
|
||
name: '',
|
||
value: '',
|
||
sort: 0,
|
||
remark: ''
|
||
})
|
||
|
||
const rules = {
|
||
type: [
|
||
{ required: true, message: '请输入字典类型', trigger: 'blur' }
|
||
],
|
||
name: [
|
||
{ required: true, message: '请输入字典名称', trigger: 'blur' }
|
||
],
|
||
value: [
|
||
{ required: true, message: '请输入字典值', trigger: 'blur' }
|
||
]
|
||
}
|
||
|
||
// 监听dictionary变化，填充表单
|
||
watch(() => props.dictionary, (newVal) => {
|
||
if (newVal) {
|
||
Object.assign(form, {
|
||
type: newVal.type || '',
|
||
name: newVal.name || '',
|
||
value: newVal.value || '',
|
||
sort: newVal.sort || 0,
|
||
remark: newVal.remark || ''
|
||
})
|
||
} else {
|
||
resetForm()
|
||
}
|
||
}, { immediate: true })
|
||
|
||
// 重置表单
|
||
const resetForm = () => {
|
||
Object.assign(form, {
|
||
type: '',
|
||
name: '',
|
||
value: '',
|
||
sort: 0,
|
||
remark: ''
|
||
})
|
||
formRef.value?.clearValidate()
|
||
}
|
||
|
||
// 关闭对话框
|
||
const handleClose = () => {
|
||
resetForm()
|
||
emit('close')
|
||
}
|
||
|
||
// 提交表单
|
||
const handleSubmit = async () => {
|
||
if (!formRef.value) return
|
||
|
||
await formRef.value.validate(async (valid) => {
|
||
if (valid) {
|
||
submitting.value = true
|
||
try {
|
||
const formData = { ...form }
|
||
|
||
if (isEdit.value) {
|
||
await updateDictionary(props.dictionary.id, formData)
|
||
ElMessage.success('更新成功')
|
||
} else {
|
||
await createDictionary(formData)
|
||
ElMessage.success('创建成功')
|
||
}
|
||
|
||
emit('success')
|
||
} catch (error) {
|
||
console.error('提交失败：', error)
|
||
ElMessage.error('提交失败')
|
||
} finally {
|
||
submitting.value = false
|
||
}
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 样式可以根据需要添加
|
||
</style>
|