refactor: ♻️ 菜单管理重构完成

web/src/views/system/menu/components/menuButton/index.vue

@@ -1,69 +1,83 @@
 <template>
-  <el-drawer
-      size="70%"
-      v-model="drawer"
-      direction="rtl"
-      destroy-on-close
-      :before-close="handleClose"
-  >
-    <template #header>
-      <div>当前菜单:
-        <el-tag>{{ selectOptions.name }}</el-tag>
-      </div>
-    </template>
-    <div>
-      <fs-page style="margin-top: 60px;">
-        <fs-crud ref="crudRef" v-bind="crudBinding">
-        </fs-crud>
-      </fs-page>
-
-    </div>
-  </el-drawer>
+	<el-drawer size="70%" v-model="menuButtonDrawer" direction="rtl" destroy-on-close :before-close="handleClose">
+		<template #header>
+			<div>
+				当前菜单:
+				<el-tag>{{ selectOptions.name }}</el-tag>
+			</div>
+		</template>
+		<div>
+			<fs-page style="margin-top: 60px">
+				<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+			</fs-page>
+		</div>
+	</el-drawer>
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted} from 'vue';
-import {useExpose, useCrud} from '@fast-crud/fast-crud';
-import {createCrudOptions} from './curd';
-import {ElMessageBox} from "element-plus";
-import * as api from './api'
+import { ref, defineProps, defineEmits, watch, toRaw } from 'vue';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './curd';
+import { ElMessageBox } from 'element-plus';
 // 弹窗是否显示
-const drawer = ref(false)
+let menuButtonDrawer = ref(false);
 // 当前选择的菜单信息
-const selectOptions:any = ref({name:null})
+let selectOptions: any = ref({ name: null });
+const props = defineProps<{
+	drawerShow: {
+		type: boolean;
+		default: false;
+	};
+	selectMenu: object;
+}>();
+const emit = defineEmits<{
+	(e: 'drawer-close', value: boolean): void;
+}>();
+
+// 侦听弹窗变量
+watch(
+	() => props.drawerShow,
+	(newVal) => {
+		menuButtonDrawer.value = newVal ? true : false;
+	}
+);
+
+watch(props.selectMenu, (val) => {
+	selectOptions.value = val;
+	doRefresh();
+});
 
 //抽屉关闭确认
 const handleClose = (done: () => void) => {
-  ElMessageBox.confirm('您确定要关闭?', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-      .then(() => {
-        done()
-      })
-      .catch(() => {
-        // catch error
-      })
-}
+	ElMessageBox.confirm('您确定要关闭?', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	})
+		.then(() => {
+			done();
+			// @ts-ignore
+			emit('drawer-close', menuButtonDrawer);
+		})
+		.catch(() => {
+			// catch error
+		});
+};
 // crud组件的ref
 const crudRef = ref();
 // crud 配置的ref
 const crudBinding = ref();
 // 暴露的方法
-const {crudExpose} = useExpose({crudRef, crudBinding});
+const { crudExpose } = useExpose({ crudRef, crudBinding });
+
+const { doRefresh } = crudExpose;
 // 你的crud配置
-const {crudOptions} = createCrudOptions({crudExpose, selectOptions});
+const { crudOptions } = createCrudOptions({ crudExpose, selectOptions });
 // 初始化crud配置
-const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
+// @ts-ignore
+const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 // 你可以调用此方法，重新初始化crud配置
 // resetCrudOptions(options)
-const initGet = ()=>{
-  api.GetList({menu:selectOptions.value.id}).then((res:any)=>{
-    const {data} = res
-    crudExpose.crudBinding.value.data=data
-  })
-}
 
-defineExpose({drawer, selectOptions,initGet})
+defineExpose({ menuButtonDrawer, selectOptions });
 </script>