136 lines
3.5 KiB
Plaintext
136 lines
3.5 KiB
Plaintext
<template>
|
|
<a-drawer
|
|
:title="title"
|
|
v-model:visible="isDrawer"
|
|
:width="width"
|
|
:placement="placement"
|
|
closable
|
|
>
|
|
<a-form :model="formParams" :rules="rules" ref="formRef">
|
|
<a-form-item label="类型" name="type">
|
|
<span>{{ formParams.type === 1 ? '侧边栏菜单' : '' }}</span>
|
|
</a-form-item>
|
|
<a-form-item label="标题" name="label">
|
|
<a-input placeholder="请输入标题" v-model:value="formParams.label" />
|
|
</a-form-item>
|
|
<a-form-item label="副标题" name="subtitle">
|
|
<a-input placeholder="请输入副标题" v-model:value="formParams.subtitle" />
|
|
</a-form-item>
|
|
<a-form-item label="路径" name="path">
|
|
<a-input placeholder="请输入路径" v-model:value="formParams.path" />
|
|
</a-form-item>
|
|
<a-form-item label="打开方式" name="openType">
|
|
<a-radio-group v-model:value="formParams.openType" name="openType">
|
|
<a-space>
|
|
<a-radio :value="1">当前窗口</a-radio>
|
|
<a-radio :value="2">新窗口</a-radio>
|
|
</a-space>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="菜单权限" name="auth">
|
|
<a-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth" />
|
|
</a-form-item>
|
|
<a-form-item label="隐藏侧边栏" name="hidden">
|
|
<a-switch v-model:checked="formParams.hidden" />
|
|
</a-form-item>
|
|
</a-form>
|
|
|
|
<template #footer>
|
|
<div class="flex justify-end w-full">
|
|
<a-button type="primary" :loading="subLoading" @click="formSubmit" class="mr-2"
|
|
>提交</a-button
|
|
>
|
|
<a-button @click="handleReset">重置</a-button>
|
|
</div>
|
|
</template>
|
|
</a-drawer>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, reactive, ref, toRefs } from 'vue';
|
|
import { message } from 'ant-design-vue';
|
|
import { error } from '@/utils/log';
|
|
|
|
const rules = {
|
|
label: {
|
|
required: true,
|
|
message: '请输入标题',
|
|
trigger: 'blur',
|
|
},
|
|
path: {
|
|
required: true,
|
|
message: '请输入路径',
|
|
trigger: 'blur',
|
|
},
|
|
};
|
|
export default defineComponent({
|
|
name: 'CreateDrawer',
|
|
components: {},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: '添加顶级菜单',
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 450,
|
|
},
|
|
},
|
|
setup() {
|
|
const formRef: any = ref(null);
|
|
const defaultValueRef = () => ({
|
|
label: '',
|
|
type: 1,
|
|
subtitle: '',
|
|
openType: 1,
|
|
auth: '',
|
|
path: '',
|
|
hidden: false,
|
|
});
|
|
|
|
const state = reactive({
|
|
isDrawer: false,
|
|
subLoading: false,
|
|
formParams: defaultValueRef(),
|
|
placement: 'right',
|
|
});
|
|
|
|
function openDrawer() {
|
|
state.isDrawer = true;
|
|
}
|
|
|
|
function closeDrawer() {
|
|
state.isDrawer = false;
|
|
}
|
|
|
|
function formSubmit() {
|
|
formRef.value
|
|
.validate()
|
|
.then(() => {
|
|
message.success('添加成功');
|
|
handleReset();
|
|
closeDrawer();
|
|
})
|
|
.catch((error) => {
|
|
console.log('error', error);
|
|
message.error('请填写完整信息');
|
|
});
|
|
}
|
|
|
|
function handleReset() {
|
|
formRef.value.resetFields();
|
|
}
|
|
|
|
return {
|
|
...toRefs(state),
|
|
formRef,
|
|
rules,
|
|
formSubmit,
|
|
handleReset,
|
|
openDrawer,
|
|
closeDrawer,
|
|
};
|
|
},
|
|
});
|
|
</script>
|