sl-sfy-safety/src/views/system/menu/CreateDrawer.vue

<template>
  <el-drawer v-model="isDrawer" :size="width" :title="title" @close="handleReset">
    <MenuForm ref="menuFormRef" :parent-menu-tree="parentMenuTree" @change="menuFormChange" isCreating />

    <template #footer>
      <el-space>
        <el-button type="primary" :loading="subLoading" @click="formSubmit">提交</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import MenuForm from './MenuForm.vue';
  import { MenuTree } from '@/types/menu/type';

  withDefaults(
    defineProps<{
      title?: string;
      width?: number;
      parentMenuTree: MenuTree;
    }>(),
    {
      title: '添加顶级菜单',
      width: 580,
    },
  );

  const emit = defineEmits(['change']);

  const isDrawer = ref(false);
  const subLoading = ref(false);
  const menuFormRef = ref();

  function openDrawer() {
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function formSubmit() {
    menuFormRef.value?.formSubmit();
  }

  function handleReset() {
    menuFormRef.value?.handleReset();
  }

  function menuFormChange() {
    closeDrawer();
    emit('change');
  }

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>