<template>
|
<ElDialog
|
v-model="visible"
|
:title="dialogType === 'add' ? '新增角色' : '编辑角色'"
|
width="30%"
|
align-center
|
@close="handleClose"
|
>
|
<ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
|
<ElFormItem label="角色名称" prop="roleName">
|
<ElInput v-model="form.roleName" placeholder="请输入角色名称" />
|
</ElFormItem>
|
<ElFormItem label="角色编码" prop="roleCode">
|
<ElInput v-model="form.roleCode" placeholder="请输入角色编码" />
|
</ElFormItem>
|
<ElFormItem label="描述" prop="description">
|
<ElInput
|
v-model="form.description"
|
type="textarea"
|
:rows="3"
|
placeholder="请输入角色描述"
|
/>
|
</ElFormItem>
|
<ElFormItem label="启用">
|
<ElSwitch v-model="form.enabled" />
|
</ElFormItem>
|
</ElForm>
|
<template #footer>
|
<ElButton @click="handleClose">取消</ElButton>
|
<ElButton type="primary" @click="handleSubmit">提交</ElButton>
|
</template>
|
</ElDialog>
|
</template>
|
|
<script setup>
|
const props = defineProps({
|
modelValue: { required: false, default: false },
|
dialogType: { required: false, default: 'add' },
|
roleData: { required: false, default: void 0 }
|
})
|
const emit = defineEmits(['update:modelValue', 'success'])
|
const formRef = ref()
|
const visible = computed({
|
get: () => props.modelValue,
|
set: (value) => emit('update:modelValue', value)
|
})
|
const rules = reactive({
|
roleName: [
|
{ required: true, message: '请输入角色名称', trigger: 'blur' },
|
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
|
],
|
roleCode: [
|
{ required: true, message: '请输入角色编码', trigger: 'blur' },
|
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
|
],
|
description: [{ required: true, message: '请输入角色描述', trigger: 'blur' }]
|
})
|
const form = reactive({
|
roleId: 0,
|
roleName: '',
|
roleCode: '',
|
description: '',
|
createTime: '',
|
enabled: true
|
})
|
watch(
|
() => props.modelValue,
|
(newVal) => {
|
if (newVal) initForm()
|
}
|
)
|
watch(
|
() => props.roleData,
|
(newData) => {
|
if (newData && props.modelValue) initForm()
|
},
|
{ deep: true }
|
)
|
const initForm = () => {
|
if (props.dialogType === 'edit' && props.roleData) {
|
Object.assign(form, props.roleData)
|
} else {
|
Object.assign(form, {
|
roleId: 0,
|
roleName: '',
|
roleCode: '',
|
description: '',
|
createTime: '',
|
enabled: true
|
})
|
}
|
}
|
const handleClose = () => {
|
visible.value = false
|
formRef.value?.resetFields()
|
}
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
try {
|
await formRef.value.validate()
|
const message = props.dialogType === 'add' ? '新增成功' : '修改成功'
|
ElMessage.success(message)
|
emit('success')
|
handleClose()
|
} catch (error) {
|
console.log('表单验证失败:', error)
|
}
|
}
|
</script>
|
