jeecg抽屉弹窗的实现步骤Drawer

引言

在后台业务开发中，常常需要用到从屏幕右侧或左侧弹出的弹窗。 俗尘抽屉弹窗。 此文关于jeecg-vue3框架下抽屉弹窗的实现进行整理。

实现步骤

• 定义一个抽屉文件，如下。

<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :width="width" :title="getTitle" @ok="handleSubmit">
    <BasicForm @register="registerForm" class="menuForm"/>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import {ref, computed, unref,useAttrs} from 'vue';
  import {BasicForm, useForm} from '/@/components/Form/index';
  import {formSchema, ComponentTypes} from './Category.data';
  import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
  import {list, saveOrUpdate} from './Category.api';
  import { useAdapt } from '/@/hooks/system/useAutoAdapt.ts';
  // 声明Emits
  const emit = defineEmits(['success', 'register']);
  const {width}= useAdapt();
  const attrs = useAttrs()
  const isUpdate = ref(true);
  const menuType = ref(0);
  const isButton = (type) => type === 2;
  const [registerForm, {setProps,resetFields, setFieldsValue, updateSchema, validate,clearValidate}] = useForm({
    labelCol: {
        md: {span: 4},
        sm: {span: 6},
    },
    wrapperCol: {
        md: {span: 20},
        sm: {span: 18},
    }, 
    schemas: formSchema,
    showActionButtonGroup: false
  });

  const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
    await resetFields()
    setDrawerProps({confirmLoading: false});
    isUpdate.value = !!data?.isUpdate;
    menuType.value = data?.record?.menuType;

   //获取下拉树信息
    const treeData = await list();
    updateSchema([{
      field: 'pid',
      componentProps: {treeData},
    },{
      field: 'name',
      label: isButton(unref(menuType)) ? '按钮/权限' : '类目名称'
    },{
      field: 'url',
      required: !isButton(unref(menuType))
    }]);

    // 无论新增还是编辑，都可以设置表单值
    if (typeof data.record === 'object') {
      let values = { ...data.record }
      setFieldsValue(values)
    }
    //禁用表单
    setProps({disabled:!attrs.showFooter})
  });
  //获取弹窗标题
  const getTitle = computed(() => (!unref(isUpdate) ? '新增类目' : '编辑类目'));
  //提交事件
  async function handleSubmit() {
    try {
      const values = await validate()
      // iframe兼容
      if (ComponentTypes.IFrame === values.component) {
        values.component = values.frameSrc
      }
      setDrawerProps({confirmLoading: true});
      //提交表单
      await saveOrUpdate(values, unref(isUpdate));
      closeDrawer();
      emit('success');
    } finally {
      setDrawerProps({confirmLoading: false});
    }
  }
</script>

• 在使用的页面

//第一步引入useDrawer 和 你定义的xxDrawer.vue文件
import {useDrawer} from '/@/components/Drawer';
import CategoryDrawer from './CategoryDrawer.vue';

//引出hook函数，分别是注册和打开函数
const [registerDrawer, {openDrawer}] = useDrawer();

//在templdate中引入
<CategoryDrawer @register="registerDrawer" @success="handleSuccess" 
:showFooter="showFooter"/>

const showFooter = ref(true);

function handleSuccess() {
reload();
}
//调用函数
function handleCreate() {
    showFooter.value = true;
    openDrawer(true, {
      isUpdate: false,
    });
  }