xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-20 02:26:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Soybean 2024-10-28 19:29:00 +08:00
parent 7e436b6328
commit aabe7fe592
3 changed files with 31 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/manage/menu/modules/menu-operate-modal.vue
View File

@ -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();

8
src/views/manage/role/modules/role-operate-drawer.vue
View File

@ -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);
}
}

10
src/views/manage/user/modules/user-operate-drawer.vue
View File

@ -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);
}
}