161 lines
3.5 KiB
Vue
161 lines
3.5 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
:title="isEdit ? '编辑分类' : '新增分类'"
|
|
width="500px"
|
|
:close-on-click-modal="false"
|
|
@close="handleClose"
|
|
>
|
|
<el-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-width="100px"
|
|
>
|
|
<el-form-item label="分类名称" prop="name">
|
|
<el-input
|
|
v-model="form.name"
|
|
placeholder="请输入分类名称"
|
|
maxlength="100"
|
|
show-word-limit
|
|
/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="分类描述" prop="description">
|
|
<el-input
|
|
v-model="form.description"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请输入分类描述"
|
|
maxlength="500"
|
|
show-word-limit
|
|
/>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end space-x-3">
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" :loading="loading" @click="handleSubmit">
|
|
{{ isEdit ? '更新' : '创建' }}
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { articleApi } from '@/api'
|
|
import { ElMessage } from 'element-plus'
|
|
import { computed, reactive, ref, watch } from 'vue'
|
|
|
|
// Props
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
category: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
})
|
|
|
|
// Emits
|
|
const emit = defineEmits(['update:modelValue', 'success'])
|
|
|
|
// 响应式数据
|
|
const formRef = ref(null)
|
|
const loading = ref(false)
|
|
|
|
// 表单数据
|
|
const form = reactive({
|
|
name: '',
|
|
description: ''
|
|
})
|
|
|
|
// 表单验证规则
|
|
const rules = {
|
|
name: [
|
|
{ required: true, message: '请输入分类名称', trigger: 'blur' },
|
|
{ min: 1, max: 100, message: '名称长度在 1 到 100 个字符', trigger: 'blur' }
|
|
],
|
|
description: [
|
|
{ max: 500, message: '描述长度不能超过 500 个字符', trigger: 'blur' }
|
|
]
|
|
}
|
|
|
|
// 计算属性
|
|
const dialogVisible = computed({
|
|
get: () => props.modelValue,
|
|
set: (value) => emit('update:modelValue', value)
|
|
})
|
|
|
|
const isEdit = computed(() => !!props.category)
|
|
|
|
// 重置表单
|
|
const resetForm = () => {
|
|
Object.assign(form, {
|
|
name: '',
|
|
description: ''
|
|
})
|
|
|
|
if (formRef.value) {
|
|
formRef.value.clearValidate()
|
|
}
|
|
}
|
|
|
|
// 监听分类数据变化，初始化表单
|
|
watch(() => props.category, (newCategory) => {
|
|
if (newCategory) {
|
|
// 编辑模式，填充表单数据
|
|
Object.assign(form, {
|
|
name: newCategory.name || '',
|
|
description: newCategory.description || ''
|
|
})
|
|
} else {
|
|
// 新增模式，重置表单
|
|
resetForm()
|
|
}
|
|
}, { immediate: true })
|
|
|
|
// 关闭对话框
|
|
const handleClose = () => {
|
|
dialogVisible.value = false
|
|
resetForm()
|
|
}
|
|
|
|
// 提交表单
|
|
const handleSubmit = async () => {
|
|
if (!formRef.value) return
|
|
|
|
try {
|
|
await formRef.value.validate()
|
|
|
|
loading.value = true
|
|
|
|
if (isEdit.value) {
|
|
// 编辑模式
|
|
await articleApi.updateCategory(props.category.id, form)
|
|
ElMessage.success('分类更新成功')
|
|
} else {
|
|
// 新增模式
|
|
await articleApi.createCategory(form)
|
|
ElMessage.success('分类创建成功')
|
|
}
|
|
|
|
emit('success')
|
|
handleClose()
|
|
} catch (error) {
|
|
if (error.message) {
|
|
ElMessage.error(error.message)
|
|
} else {
|
|
ElMessage.error(isEdit.value ? '更新分类失败' : '创建分类失败')
|
|
}
|
|
console.error('提交表单失败:', error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|