fix(系统设置): 系统组织与项目所有操作增加loading

This commit is contained in:
RubyLiu 2023-08-15 16:23:42 +08:00 committed by 刘瑞斌
parent f536854655
commit 27189088fe
8 changed files with 37 additions and 12 deletions

View File

@ -38,14 +38,14 @@ export default function useModal() {
options.size || 'small'
} ms-usemodal-${options.type}`,
}),
deleteModal: (options: DeleteModalOptions) =>
openDeleteModal: (options: DeleteModalOptions) =>
Modal.warning({
okText: t('common.confirmDelete'),
cancelText: t('common.cancel'),
hideCancel: false,
okButtonProps: { status: 'danger' },
titleAlign: 'start',
modalClass: `ms-usemodal ms-usemodal-warning ms-usemodal-small ms-usemodal--warning`,
modalClass: `ms-usemodal ms-usemodal-warning ms-usemodal-small`,
...options,
}),
};

View File

@ -13,6 +13,7 @@ export default {
'common.end': 'End',
'common.enable': 'Enable',
'common.close': 'Close',
'common.create': 'Create',
'common.confirmEnable': 'Confirm enable',
'common.confirmClose': 'Confirm close',
'common.enableSuccess': 'Enable success',

View File

@ -13,6 +13,7 @@ export default {
'common.end': '结束',
'common.enable': '启用',
'common.close': '关闭',
'common.create': '创建',
'common.confirmEnable': '确认启用',
'common.confirmClose': '确认关闭',
'common.enableSuccess': '启用成功',

View File

@ -2,12 +2,20 @@
<a-modal
v-model:visible="currentVisible"
width="680px"
class="ms-modal-form ms-modal-medium"
:ok-text="t('system.organization.create')"
unmount-on-close
:on-before-ok="handleBeforeOk"
@cancel="handleCancel"
>
<template #title> {{ t('system.organization.createOrganization') }} </template>
<template #title>
<span v-if="isEdit">
{{ t('system.organization.updateOrganization') }}
<span class="text-[var(--color-text-4)]">({{ props.currentOrganization?.name }})</span>
</span>
<span v-else>
{{ t('system.organization.createOrganization') }}
</span>
</template>
<div class="form">
<a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
<a-form-item
@ -29,12 +37,20 @@
</a-form-item>
</a-form>
</div>
<template #footer>
<a-button type="secondary" :loading="loading" @click="handleCancel">
{{ t('common.cancel') }}
</a-button>
<a-button type="primary" :loading="loading" @click="handleBeforeOk">
{{ isEdit ? t('common.confirm') : t('common.create') }}
</a-button>
</template>
</a-modal>
</template>
<script lang="ts" setup>
import { useI18n } from '@/hooks/useI18n';
import { reactive, ref, watchEffect } from 'vue';
import { reactive, ref, watchEffect, computed } from 'vue';
import type { FormInstance, ValidatedError } from '@arco-design/web-vue';
import MsUserSelector from '@/components/bussiness/ms-user-selector/index.vue';
import { createOrUpdateOrg } from '@/api/modules/setting/system/organizationAndProject';
@ -49,6 +65,8 @@
const formRef = ref<FormInstance>();
const loading = ref(false);
const emit = defineEmits<{
(e: 'cancel'): void;
}>();
@ -74,6 +92,7 @@
return false;
}
try {
loading.value = true;
await createOrUpdateOrg({ id: props.currentOrganization?.id, ...form });
Message.success(
props.currentOrganization?.id
@ -86,6 +105,8 @@
// eslint-disable-next-line no-console
console.error(error);
return false;
} finally {
loading.value = false;
}
});
};
@ -96,4 +117,5 @@
form.description = props.currentOrganization.description;
}
});
const isEdit = computed(() => !!props.currentOrganization?.id);
</script>

View File

@ -20,11 +20,11 @@
</a-form>
</div>
<template #footer>
<a-button type="secondary" @click="handleCancel">
{{ t('system.organization.cancel') }}
<a-button type="secondary" :loading="loading" @click="handleCancel">
{{ t('common.cancel') }}
</a-button>
<a-button type="primary" :loading="loading" :disabled="form.name.length === 0" @click="handleAddMember">
{{ t('system.organization.add') }}
{{ t('common.add') }}
</a-button>
</template>
</a-modal>
@ -69,15 +69,14 @@
const handleAddMember = () => {
formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
loading.value = true;
if (errors) {
loading.value = false;
}
const { organizationId, projectId } = props;
try {
loading.value = true;
await addUserToOrgOrProject({ memberIds: form.name, organizationId, projectId });
Message.success(t('system.organization.addSuccess'));
loading.value = false;
handleCancel();
} catch (error) {
// eslint-disable-next-line no-console

View File

@ -86,7 +86,7 @@
const orgVisible = ref(false);
const currentOrganizationId = ref('');
const currentUpdateOrganization = ref<CreateOrUpdateSystemOrgParams>();
const { deleteModal, openModal } = useModal();
const { openDeleteModal, openModal } = useModal();
const organizationColumns: MsTableColumn = [
{
@ -170,7 +170,7 @@
];
const handleDelete = (record: TableData) => {
deleteModal({
openDeleteModal({
title: t('system.organization.deleteName', { name: record.name }),
content: t('system.organization.deleteTip'),
onOk: async () => {

View File

@ -50,5 +50,6 @@ export default {
'system.organization.enableContent': 'The organization after opening is displayed in the organization switching list',
'system.organization.endContent':
'The organization after closing is not displayed in the organization switching list',
'system.organization.updateOrganization': 'Update organization',
'system.organization.updateOrganizationSuccess': 'Update organization success',
};

View File

@ -46,5 +46,6 @@ export default {
'system.organization.endTitle': '关闭组织',
'system.organization.enableContent': '开启后的组织展示在组织切换列表',
'system.organization.endContent': '关闭后的组织不展示在组织切换列表',
'system.organization.updateOrganization': '更新组织',
'system.organization.updateOrganizationSuccess': '更新组织成功',
};