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

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

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