optimize(projects): optimize manage page: use ref replace reactive

src/views/manage/menu/modules/menu-operate-modal.vue

@@ -1,5 +1,5 @@
 <script setup lang="tsx">
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { SelectOption } from 'naive-ui';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
@@ -82,7 +82,7 @@ type Model = Pick<
   pathParam: string;
 };
 
-const model: Model = reactive(createDefaultModel());
+const model = ref(createDefaultModel());
 
 function createDefaultModel(): Model {
   return {
@@ -134,15 +134,15 @@ const localIconOptions = localIcons.map<SelectOption>(item => ({
   value: item
 }));
 
-const showLayout = computed(() => model.parentId === 0);
+const showLayout = computed(() => model.value.parentId === 0);
 
-const showPage = computed(() => model.menuType === '2');
+const showPage = computed(() => model.value.menuType === '2');
 
 const pageOptions = computed(() => {
   const allPages = [...props.allPages];
 
-  if (model.routeName && !allPages.includes(model.routeName)) {
-    allPages.unshift(model.routeName);
+  if (model.value.routeName && !allPages.includes(model.value.routeName)) {
+    allPages.unshift(model.value.routeName);
   }
 
   const opts: CommonType.Option[] = allPages.map(page => ({
@@ -181,14 +181,14 @@ async function getRoleOptions() {
 }
 
 function handleInitModel() {
-  Object.assign(model, createDefaultModel());
+  model.value = createDefaultModel();
 
   if (!props.rowData) return;
 
   if (props.operateType === 'addChild') {
     const { id } = props.rowData;
 
-    Object.assign(model, { parentId: id });
+    Object.assign(model.value, { parentId: id });
   }
 
   if (props.operateType === 'edit') {
@@ -197,14 +197,14 @@ function handleInitModel() {
     const { layout, page } = getLayoutAndPage(component);
     const { path, param } = getPathParamFromRoutePath(rest.routePath);
 
-    Object.assign(model, rest, { layout, page, routePath: path, pathParam: param });
+    Object.assign(model.value, rest, { layout, page, routePath: path, pathParam: param });
   }
 
-  if (!model.query) {
-    model.query = [];
+  if (!model.value.query) {
+    model.value.query = [];
   }
-  if (!model.buttons) {
-    model.buttons = [];
+  if (!model.value.buttons) {
+    model.value.buttons = [];
   }
 }
 
@@ -213,18 +213,18 @@ function closeDrawer() {
 }
 
 function handleUpdateRoutePathByRouteName() {
-  if (model.routeName) {
-    model.routePath = getRoutePathByRouteName(model.routeName);
+  if (model.value.routeName) {
+    model.value.routePath = getRoutePathByRouteName(model.value.routeName);
   } else {
-    model.routePath = '';
+    model.value.routePath = '';
   }
 }
 
 function handleUpdateI18nKeyByRouteName() {
-  if (model.routeName) {
-    model.i18nKey = `route.${model.routeName}` as App.I18n.I18nKey;
+  if (model.value.routeName) {
+    model.value.i18nKey = `route.${model.value.routeName}` as App.I18n.I18nKey;
   } else {
-    model.i18nKey = null;
+    model.value.i18nKey = null;
   }
 }
 
@@ -238,10 +238,10 @@ function handleCreateButton() {
 }
 
 function getSubmitParams() {
-  const { layout, page, pathParam, ...params } = model;
+  const { layout, page, pathParam, ...params } = model.value;
 
   const component = transformLayoutAndPageToComponent(layout, page);
-  const routePath = getRoutePathWithParam(model.routePath, pathParam);
+  const routePath = getRoutePathWithParam(model.value.routePath, pathParam);
 
   params.component = component;
   params.routePath = routePath;
@@ -271,7 +271,7 @@ watch(visible, () => {
 });
 
 watch(
-  () => model.routeName,
+  () => model.value.routeName,
   () => {
     handleUpdateRoutePathByRouteName();
     handleUpdateI18nKeyByRouteName();

src/views/manage/role/modules/role-operate-drawer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useBoolean } from '@sa/hooks';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
@@ -45,7 +45,7 @@ const title = computed(() => {
 
 type Model = Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleDesc' | 'status'>;
 
-const model: Model = reactive(createDefaultModel());
+const model = ref(createDefaultModel());
 
 function createDefaultModel(): Model {
   return {
@@ -69,10 +69,10 @@ const roleId = computed(() => props.rowData?.id || -1);
 const isEdit = computed(() => props.operateType === 'edit');
 
 function handleInitModel() {
-  Object.assign(model, createDefaultModel());
+  model.value = createDefaultModel();
 
   if (props.operateType === 'edit' && props.rowData) {
-    Object.assign(model, props.rowData);
+    Object.assign(model.value, props.rowData);
   }
 }
 

src/views/manage/user/modules/user-operate-drawer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { fetchGetAllRoles } from '@/service/api';
 import { $t } from '@/locales';
@@ -44,7 +44,7 @@ type Model = Pick<
   'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'status'
 >;
 
-const model: Model = reactive(createDefaultModel());
+const model = ref(createDefaultModel());
 
 function createDefaultModel(): Model {
   return {
@@ -79,7 +79,7 @@ async function getRoleOptions() {
 
     // the mock data does not have the roleCode, so fill it
     // if the real request, remove the following code
-    const userRoleOptions = model.userRoles.map(item => ({
+    const userRoleOptions = model.value.userRoles.map(item => ({
       label: item,
       value: item
     }));
@@ -90,10 +90,10 @@ async function getRoleOptions() {
 }
 
 function handleInitModel() {
-  Object.assign(model, createDefaultModel());
+  model.value = createDefaultModel();
 
   if (props.operateType === 'edit' && props.rowData) {
-    Object.assign(model, props.rowData);
+    Object.assign(model.value, props.rowData);
   }
 }