修改

src/views/systemService/fromDrawer.vue

@@ -0,0 +1,14 @@
+<template>
+    <hc-drawer v-model="isDrawer" to-id="node-card-plan" is-close>
+        <div class="relative bg-white" style="height: 100%">
+            测试抽屉弹窗
+            <el-button @click="isDrawer = false">关闭抽屉</el-button>
+        </div>
+    </hc-drawer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const isDrawer = ref(false)
+</script>

src/views/systemService/plan.vue

@@ -1,5 +1,5 @@
 <template>
-    <hc-card>
+    <hc-card id="node-card-plan">
         <template #header>
             <div class="w-32">
                 <el-select v-model="searchForm.key1" clearable block placeholder="填写类型">
@@ -26,7 +26,7 @@
             </div>
         </template>
         <template #extra>
-            <el-button type="primary">
+            <el-button type="primary" @click="createMonthPlan">
                 <HcIcon name="add" />
                 <span>创建月度计划</span>
             </el-button>
@@ -57,10 +57,12 @@
             <HcPages :pages="searchForm" @change="pageChange" />
         </template>
     </hc-card>
+    <fromDrawer v-model="isShowForm" />
 </template>
 
 <script setup>
 import { nextTick, ref, watch } from 'vue'
+import fromDrawer from './fromDrawer.vue'
 //搜索表单
 const searchForm = ref({
     key1: null, ke2: null, key3: null, key4: null, startTimeValue: null, endTimeValue: null,
@@ -116,4 +118,8 @@ const pageChange = ({ current, size }) => {
     searchForm.value.size = size
     // getTableData()
 }
+const isShowForm = ref(false)
+const createMonthPlan = ()=>{
+    isShowForm.value = true
+}
 </script>