前景：由于用户申报材料时需要查询资料，耗时，耗力。

实现需求：做一个知识库，用户在申报时可以根据参考资料进行申报。

前端效果：左右分屏情况下，根据传入参数不同查看申请材料也不同。

1.实现效果

点击申请材料弹出，点击取消或点击空白处，抽屉消失

2.代码实现

2.1files.vue实现

<template>
    <div class="container">
        <a-button @click="click('sqcl')" style="margin-left: 5px;">申请材料</a-button>
        <a-button @click="click('jcbz')" style="margin-left: 5px;">检查标准</a-button>
    </div>
    <FormDrawer @register="registerDrawer" @success="reload" :showFooter="showFooter" />

</template>
<script setup>
    import { ref } from 'vue';
    import FormDrawer from './formDrawer.vue';
    import { useDrawer } from '/@/components/Drawer';

    const showFooter = ref(true);

    const [registerDrawer, { openDrawer }] = useDrawer();

    function click(data) {
        showFooter.value = true;
        openDrawer(true, {
            type: data,
        });
    }
</script>
<style scoped>
.card-style{
  margin: 10px 0;
}

.container {
  background-color: white;
  padding: 5px;
  width: 100%;
  max-width: 100%; 
  box-sizing: border-box;
  margin-top: 10px;
  display: flex; /* 使用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  /* justify-content: space-between;  */
}
</style>

2.2formDrawer.vue实现

<template>
    <BasicDrawer v-bind="$attrs" @register="registerDrawer" :title="getTitle" width="500px"
        destroyOnClose>
        <BasicTable @register="registerTable"></BasicTable>
    </BasicDrawer>
</template>
<script lang="ts" setup>
    import { BasicTable } from '/@/components/Table';
    import { useListPage } from '/@/hooks/system/useListPage';
    import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
    import { computed, ref, unref, onMounted } from 'vue';
    import { filesColumns } from '../screen.data';
    import { getMaterialsApi } from '../screen.api';

    const type = ref('');
    const fileList = ref([]);
    const [ registerDrawer ] = useDrawerInner((data)=>{
        type.value = data?.type;
    });
    
    const getTitle = computed(() => (unref(type)==='sqcl' ? '申请材料' : '检查标准'));

    // 列表页面公共参数、方法
    const { tableContext } = useListPage({
        tableProps: {
            dataSource: fileList,
            columns: filesColumns,
            //显示序号
            showIndexColumn: true,
            bordered: true,
            //是否显示操作列
            showActionColumn: false,
            //是否显示刷新、设置等
            showTableSetting: false,
            //是否显示查询、重置
            useSearchForm: false,
            // actionColumn: {
            //   width: 120,
            // },
            pagination: false,
        },
    });

    //BasicTable绑定注册
    const [registerTable] = tableContext;

    async function getMaterials() {
        const result = await getMaterialsApi({type: '1'});
        fileList.value = result;
    }
    onMounted(()=>{
        getMaterials();
    });

</script>
<style scoped>
</style>

2.3screen.api.ts实现

import { defHttp } from '/@/utils/http/axios';

enum Api {
  getMaterials = '/接口',
}

export const getMaterialsApi = (params) => {
  return defHttp.get({url: Api.getMaterials, params}, { joinParamsToUrl: true });
}

2.4screen.data.ts实现

import { BasicColumn } from '/@/components/Table';

export const filesColumns: BasicColumn[] = [
    {
        title: '名称',
        dataIndex: 'wjmc',
    },
    // {
    //     title: '地址',
    //     dataIndex: 'wjdz',
    // },
]

3.总结

 1.ts也可以写到路由里面

 2.很简单，直接拷贝就可以测试了。接口记得改一下就行了。

 3.进化版连接地址：jeecg-vue3, BasicTable与抽屉useDrawer()的简单使用-资源展示-CSDN博客