optimize(projects): sync manager and login page: use ref replace reac…

…tive (#9)

src/layouts/modules/global-tab/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, reactive, ref, watch } from 'vue';
+import { nextTick, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useElementBounding } from '@vueuse/core';
 import { PageTab } from '@sa/materials';
@@ -98,15 +98,15 @@ interface DropdownConfig {
   tabId: string;
 }
 
-const dropdown: DropdownConfig = reactive({
+const dropdown = ref<DropdownConfig>({
   visible: false,
   x: 0,
   y: 0,
   tabId: ''
 });
 
 function setDropdown(config: Partial<DropdownConfig>) {
-  Object.assign(dropdown, config);
+  Object.assign(dropdown.value, config);
 }
 
 let isClickContextMenu = false;
@@ -124,7 +124,7 @@ async function handleContextMenu(e: MouseEvent, tabId: string) {
 
   isClickContextMenu = true;
 
-  const DURATION = dropdown.visible ? 150 : 0;
+  const DURATION = dropdown.value.visible ? 150 : 0;
 
   setDropdown({ visible: false });
 

src/views/_builtin/login/modules/code-login.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, ref } from 'vue';
 import { $t } from '@/locales';
 import { useRouterPush } from '@/hooks/common/router';
 import { useForm, useFormRules } from '@/hooks/common/form';
@@ -16,7 +16,7 @@ interface FormModel {
   code: string;
 }
 
-const model: FormModel = reactive({ phone: '', code: '' });
+const model = ref<FormModel>({ phone: '', code: '' });
 
 const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
   const { formRules } = useFormRules();

src/views/_builtin/login/modules/pwd-login.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, ref } from 'vue';
 import { $t } from '@/locales';
 import { loginModuleRecord } from '@/constants/app';
 import { useRouterPush } from '@/hooks/common/router';
@@ -17,13 +17,13 @@ interface FormModel {
   password: string;
 }
 
-const model: FormModel = reactive({
+const model = ref<FormModel>({
   userName: 'Soybean',
   password: '123456'
 });
 
 const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
-  // inside computed to make locale reactive, if not apply i18n, you can define it without computed
+  // inside computed to make locale ref, if not apply i18n, you can define it without computed
   const { formRules } = useFormRules();
 
   return {
@@ -34,7 +34,7 @@ const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
 
 async function handleSubmit() {
   await validate();
-  await authStore.login(model.userName, model.password);
+  await authStore.login(model.value.userName, model.value.password);
 }
 
 type AccountKey = 'super' | 'admin' | 'user';

src/views/_builtin/login/modules/register.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, ref } from 'vue';
 import { $t } from '@/locales';
 import { useRouterPush } from '@/hooks/common/router';
 import { useForm, useFormRules } from '@/hooks/common/form';
@@ -18,7 +18,7 @@ interface FormModel {
   confirmPassword: string;
 }
 
-const model: FormModel = reactive({
+const model = ref<FormModel>({
   phone: '',
   code: '',
   password: '',
@@ -32,7 +32,7 @@ const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
     phone: formRules.phone,
     code: formRules.code,
     password: formRules.pwd,
-    confirmPassword: createConfirmPwdRule(model.password)
+    confirmPassword: createConfirmPwdRule(model.value.password)
   };
 });
 

src/views/_builtin/login/modules/reset-pwd.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, ref } from 'vue';
 import { $t } from '@/locales';
 import { useRouterPush } from '@/hooks/common/router';
 import { useForm, useFormRules } from '@/hooks/common/form';
@@ -16,7 +16,7 @@ interface FormModel {
   confirmPassword: string;
 }
 
-const model: FormModel = reactive({
+const model = ref<FormModel>({
   phone: '',
   code: '',
   password: '',
@@ -31,7 +31,7 @@ const rules = computed<RuleRecord>(() => {
   return {
     phone: formRules.phone,
     password: formRules.pwd,
-    confirmPassword: createConfirmPwdRule(model.password)
+    confirmPassword: createConfirmPwdRule(model.value.password)
   };
 });
 

src/views/alova/user/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { ElButton, ElPopconfirm, ElTag } from 'element-plus';
 import { usePagination } from '@sa/alova/client';
-import { reactive } from 'vue';
+import { ref } from 'vue';
 import { batchDeleteUser, deleteUser, fetchGetUserList } from '@/service-alova/api';
 import { $t } from '@/locales';
 import { enableStatusRecord, userGenderRecord } from '@/constants/business';
@@ -10,7 +10,7 @@ import useTableOperate from './hooks/use-table-operate';
 import UserOperateDrawer from './modules/user-operate-drawer.vue';
 import UserSearch from './modules/user-search.vue';
 
-const searchParams = reactive({
+const searchParams = ref({
   status: undefined,
   userName: undefined,
   userGender: undefined,
@@ -21,15 +21,15 @@ const searchParams = reactive({
 const { loading, data, refresh, reload, page, pageSize, pageCount, send, remove, total } = usePagination(
   (pageNum, size) =>
     fetchGetUserList({
-      ...searchParams,
+      ...searchParams.value,
       current: pageNum,
       size
     }),
   {
     data: ({ records }) => records,
 
     // trigger reload when states in `searchParams` changed
-    watchingStates: [searchParams],
+    watchingStates: [searchParams.value],
 
     // debounce of `searchParams`
     debounce: [1000]

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 { useForm, useFormRules } from '@/hooks/common/form';
 import { $t } from '@/locales';
 import { enableStatusOptions, menuIconTypeOptions, menuTypeOptions } from '@/constants/business';
@@ -79,7 +79,7 @@ type Model = Pick<
   pathParam: string;
 };
 
-const model: Model = reactive(createDefaultModel());
+const model = ref(createDefaultModel());
 
 function createDefaultModel(): Model {
   return {
@@ -131,15 +131,15 @@ const localIconOptions = localIcons.map(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 => ({
@@ -173,22 +173,22 @@ async function getRoleOptions() {
 
 /** - add a query input */
 function addQuery(index: number) {
-  model.query.splice(index + 1, 0, { key: '', value: '' });
+  model.value.query.splice(index + 1, 0, { key: '', value: '' });
 }
 
 /** - remove a query input */
 function removeQuery(index: number) {
-  model.query.splice(index, 1);
+  model.value.query.splice(index, 1);
 }
 
 /** - add a button input */
 function addButton(index: number) {
-  model.buttons.splice(index + 1, 0, { code: '', desc: '' });
+  model.value.buttons.splice(index + 1, 0, { code: '', desc: '' });
 }
 
 /** - remove a button input */
 function removeButton(index: number) {
-  model.buttons.splice(index, 1);
+  model.value.buttons.splice(index, 1);
 }
 
 function handleInitModel() {
@@ -211,11 +211,11 @@ function handleInitModel() {
     Object.assign(model, 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 = [];
   }
 }
 
@@ -224,26 +224,26 @@ 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;
   }
 }
 
 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;
@@ -273,7 +273,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 { useForm, useFormRules } from '@/hooks/common/form';
 import { $t } from '@/locales';
@@ -43,7 +43,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 {
@@ -67,10 +67,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/index.vue

@@ -127,10 +127,6 @@ function handleDelete(id: number) {
   onDeleted();
 }
 
-setTimeout(() => {
-  console.log(130, mobilePagination);
-});
-
 function edit(id: number) {
   handleEdit(id);
 }

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 { useForm, useFormRules } from '@/hooks/common/form';
 import { fetchGetAllRoles } from '@/service/api';
 import { $t } from '@/locales';
@@ -42,7 +42,7 @@ type Model = Pick<
   'userName' | 'userGender' | 'nickName' | 'userPhone' | 'userEmail' | 'userRoles' | 'status'
 >;
 
-const model: Model = reactive(createDefaultModel());
+const model = ref(createDefaultModel());
 
 function createDefaultModel(): Model {
   return {
@@ -77,7 +77,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
     }));
@@ -88,10 +88,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);
   }
 }