111 lines
3.8 KiB
Vue
111 lines
3.8 KiB
Vue
<template>
|
||
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
|
||
<el-form :model="formData" ref='formRuleRef' :rules='rules'>
|
||
<el-form-item label="名称" prop="name">
|
||
<el-input v-model="formData.name" />
|
||
</el-form-item>
|
||
<el-form-item label="路径" prop="path">
|
||
<el-input v-model="formData.path" />
|
||
</el-form-item>
|
||
<el-form-item label="排序" prop="sort">
|
||
<el-input-number v-model="formData.sort" />
|
||
</el-form-item>
|
||
<el-form-item label="类型" prop="type">
|
||
<el-select v-model="formData.type" placeholder="请选择资源类型">
|
||
<el-option
|
||
v-for="item in dictStore.getDictData('resourceType')"
|
||
:key="item.id"
|
||
:label="item.label"
|
||
:value="item.code"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="描述" prop="remark">
|
||
<el-input v-model="formData.remark" :rows="2" type="textarea"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="handleCancel">取 消</el-button>
|
||
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script lang="ts" setup name="ResourceDialog">
|
||
import { defineProps, defineEmits,watch,ref, type Ref } from 'vue';
|
||
import { dialogSmall } from '@/utils/elementBind'
|
||
import { ElMessage, FormInstance, FormItemRule } from 'element-plus'
|
||
import { useDictStore } from '@/stores/modules/dict'
|
||
const dictStore = useDictStore()
|
||
const props = defineProps<{
|
||
visible: boolean;
|
||
dialogTitle: string;
|
||
|
||
formData: {
|
||
id: string;//资源表Id
|
||
pid:string;//节点（0为根节点）
|
||
pids?:string;//节点上层所有节点
|
||
name: string;//名称
|
||
code:string;//资源标识
|
||
path:string;//路径
|
||
icon?:string;//图标
|
||
sort:number;//排序
|
||
type:number;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
|
||
remark?: string;//权限资源描述
|
||
state:number;//权限资源状态
|
||
create_By?:string;//创建人
|
||
create_Time?:string;//创建时间
|
||
update_By?:string;//更新人
|
||
update_Time?:string;//更新时间
|
||
};
|
||
}>();
|
||
|
||
|
||
// 定义规则
|
||
const formRuleRef = ref<FormInstance>()
|
||
const rules : Ref<Record<string, Array<FormItemRule>>> = ref({
|
||
name :[{required:true,trigger:'blur',message:'菜单名称必填!'}],
|
||
path :[{required:true,trigger:'blur',message:'菜单路径必填!'}],
|
||
type :[{required:true,trigger:'change',message:'菜单类型必选!'}]
|
||
})
|
||
const emit = defineEmits<{
|
||
(e: 'update:visible', value: boolean): void;
|
||
(e: 'submit', data: any): void;
|
||
}>();
|
||
|
||
const handleCancel = () => {
|
||
//重置表单内容
|
||
//取消表单校验状态
|
||
formRuleRef.value && formRuleRef.value.resetFields()
|
||
emit('update:visible', false); // 关闭对话框
|
||
};
|
||
|
||
const handleSubmit = () => {
|
||
try {
|
||
formRuleRef.value?.validate((valid: boolean) => {
|
||
if (valid) {
|
||
// 将表单数据转为json,发送到后端
|
||
let confirmFormData = JSON.parse(JSON.stringify(props.formData))
|
||
emit('submit', props.formData); // 提交表单数据
|
||
emit('update:visible', false); // 提交后关闭对话框
|
||
} else {
|
||
ElMessage.error('表单验证失败！')
|
||
}
|
||
})
|
||
}catch (error) {
|
||
console.error('验证过程中发生错误', error)
|
||
}
|
||
|
||
}
|
||
|
||
// 当 props.visible 改变时，更新 formData
|
||
watch(() => props.visible, (newVal) => {
|
||
if (!newVal) {
|
||
// 这里可以重置表单数据，如果需要的话
|
||
|
||
}
|
||
});
|
||
</script>
|
||
|