style(系统设置): 样式优化

frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue

@@ -175,9 +175,9 @@
     try {
       await updateOrAddProjectUserGroup(record);
       Message.success(t('common.updateSuccess'));
+      return true;
     } catch (error) {
-      // eslint-disable-next-line no-console
+      return false;
-      console.log(error);
     }
   };
 

frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue

@@ -116,6 +116,7 @@
   }
 
   const handleCancel = () => {
+    keyword.value = '';
     emit('cancel');
   };
 
@@ -149,9 +150,15 @@
       console.error(error);
     }
   };
-  watchEffect(() => {
+  watch(
-    currentVisible.value = props.visible;
+    () => props.visible,
-  });
+    (visible) => {
+      currentVisible.value = visible;
+      if (visible) {
+        fetchData();
+      }
+    }
+  );
   watchEffect(() => {
     const { projectId, userRoleId } = props;
     if (projectId && userRoleId) {

frontend/src/views/setting/organization/project/components/addProjectModal.vue

@@ -21,11 +21,12 @@
           field="name"
           required
           :label="t('system.project.name')"
+          asterisk-position="end"
           :rules="[{ required: true, message: t('system.project.projectNameRequired') }]"
         >
           <a-input v-model="form.name" allow-clear :placeholder="t('system.project.projectNamePlaceholder')" />
         </a-form-item>
-        <a-form-item field="organizationId" :label="t('system.project.affiliatedOrg')">
+        <a-form-item field="organizationId" asterisk-position="end" :label="t('system.project.affiliatedOrg')">
           <a-select
             v-model="form.organizationId"
             disabled
@@ -166,7 +167,6 @@
     form.resourcePoolIds = [];
   };
   const handleCancel = (shouldSearch: boolean) => {
-    formReset();
     emit('cancel', shouldSearch);
   };
 
@@ -200,7 +200,6 @@
     }
   };
   watchEffect(() => {
-    initAffiliatedOrgOption();
     if (isEdit.value && props.currentProject) {
       form.id = props.currentProject.id;
       form.name = props.currentProject.name;
@@ -212,4 +211,15 @@
       form.resourcePoolIds = props.currentProject.resourcePoolIds;
     }
   });
+  watch(
+    () => props.visible,
+    (val) => {
+      currentVisible.value = val;
+      if (!val) {
+        formReset();
+      } else {
+        initAffiliatedOrgOption();
+      }
+    }
+  );
 </script>

frontend/src/views/setting/organization/project/components/addUserModal.vue

@@ -13,6 +13,7 @@
         <a-form-item
           field="name"
           :label="t('system.organization.member')"
+          asterisk-position="end"
           :rules="[{ required: true, message: t('system.organization.addMemberRequired') }]"
         >
           <MsUserSelector

frontend/src/views/setting/organization/project/components/userDrawer.vue

@@ -115,6 +115,7 @@
   }
 
   const handleCancel = () => {
+    keyword.value = '';
     emit('cancel');
   };
 
@@ -157,6 +158,9 @@
     () => props.visible,
     (visible) => {
       currentVisible.value = visible;
+      if (visible) {
+        fetchData();
+      }
     }
   );
 </script>

frontend/src/views/setting/system/organizationAndProject/components/addOrganizationModal.vue

@@ -5,7 +5,7 @@
     :ok-text="t('system.organization.create')"
     unmount-on-close
     title-align="start"
-    @cancel="handleCancel"
+    @cancel="handleCancel(false)"
   >
     <template #title>
       <span v-if="isEdit">
@@ -21,6 +21,7 @@
         <a-form-item
           field="name"
           required
+          asterisk-position="end"
           :label="t('system.organization.organizationName')"
           :rules="[{ required: true, message: t('system.organization.organizationNameRequired') }]"
         >
@@ -39,7 +40,7 @@
       </a-form>
     </div>
     <template #footer>
-      <a-button type="secondary" :loading="loading" @click="handleCancel">
+      <a-button type="secondary" :disabled="loading" @click="handleCancel(false)">
         {{ t('common.cancel') }}
       </a-button>
       <a-button type="primary" :loading="loading" @click="handleBeforeOk">
@@ -74,8 +75,7 @@
   const loading = ref(false);
 
   const emit = defineEmits<{
-    (e: 'cancel'): void;
+    (e: 'cancel', shouldSearch: boolean): void;
-    (e: 'submit'): void;
   }>();
 
   const form = reactive<{ name: string; userIds: string[]; description: string }>({
@@ -89,13 +89,9 @@
   watchEffect(() => {
     currentVisible.value = props.visible;
   });
-  const handleCancel = () => {
+  const handleCancel = (shouldSearch = false) => {
-    emit('cancel');
+    emit('cancel', shouldSearch);
-  };
+    formRef.value?.resetFields();
-
-  const handleSubmit = () => {
-    handleCancel();
-    emit('submit');
   };
 
   const handleBeforeOk = () => {
@@ -111,12 +107,10 @@
             ? t('system.organization.updateOrganizationSuccess')
             : t('system.organization.createOrganizationSuccess')
         );
-        handleSubmit();
+        handleCancel(true);
-        return true;
       } catch (error) {
         // eslint-disable-next-line no-console
         console.error(error);
-        return false;
       } finally {
         loading.value = false;
       }

frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue

@@ -21,6 +21,7 @@
         <a-form-item
           field="name"
           required
+          asterisk-position="end"
           :label="t('system.project.name')"
           :rules="[{ required: true, message: t('system.project.projectNameRequired') }]"
         >
@@ -29,6 +30,7 @@
         <a-form-item
           required
           field="organizationId"
+          asterisk-position="end"
           :label="t('system.project.affiliatedOrg')"
           :rules="[{ required: true, message: t('system.project.affiliatedOrgRequired') }]"
         >
@@ -73,14 +75,14 @@
     <template #footer>
       <div class="flex flex-row justify-between">
         <div class="flex flex-row items-center gap-[4px]">
-          <a-switch v-model="form.enable" />
+          <a-switch v-model="form.enable" size="small" />
           <span>{{ t('system.organization.status') }}</span>
           <a-tooltip :content="t('system.project.createTip')" position="top">
             <MsIcon type="icon-icon-maybe_outlined" class="text-[var(--color-text-4)]" />
           </a-tooltip>
         </div>
         <div class="flex flex-row gap-[14px]">
-          <a-button type="secondary" :loading="loading" @click="handleCancel(false)">
+          <a-button type="secondary" :disabled="loading" @click="handleCancel(false)">
             {{ t('common.cancel') }}
           </a-button>
           <a-button type="primary" :loading="loading" @click="handleBeforeOk">
@@ -151,10 +153,6 @@
     return licenseStore.hasLicense();
   });
 
-  watchEffect(() => {
-    currentVisible.value = props.visible;
-  });
-
   const formReset = () => {
     form.name = '';
     form.userIds = [];
@@ -165,7 +163,6 @@
   };
   const handleCancel = (shouldSearch: boolean) => {
     emit('cancel', shouldSearch);
-    formReset();
   };
 
   const handleBeforeOk = async () => {
@@ -179,7 +176,6 @@
         Message.success(
           isEdit.value ? t('system.project.updateProjectSuccess') : t('system.project.createProjectSuccess')
         );
-
         handleCancel(true);
       } catch (error) {
         // eslint-disable-next-line no-console
@@ -199,7 +195,6 @@
     }
   };
   watchEffect(() => {
-    initAffiliatedOrgOption();
     if (props.currentProject) {
       form.id = props.currentProject.id;
       form.name = props.currentProject.name;
@@ -211,4 +206,15 @@
       form.resourcePoolIds = props.currentProject.resourcePoolIds;
     }
   });
+  watch(
+    () => props.visible,
+    (val) => {
+      currentVisible.value = val;
+      if (!val) {
+        formReset();
+      } else {
+        initAffiliatedOrgOption();
+      }
+    }
+  );
 </script>

frontend/src/views/setting/system/organizationAndProject/components/addUserModal.vue

@@ -12,6 +12,7 @@
       <a-form ref="formRef" class="rounded-[4px]" :model="form" layout="vertical">
         <a-form-item
           field="name"
+          asterisk-position="end"
           :label="t('system.organization.member')"
           :rules="[{ required: true, message: t('system.organization.addMemberRequired') }]"
         >

frontend/src/views/setting/system/organizationAndProject/components/projectDrawer.vue

@@ -106,6 +106,11 @@
     () => props.visible,
     (visible) => {
       currentVisible.value = visible;
+      if (visible) {
+        fetchData();
+      } else {
+        setKeyword('');
+      }
     }
   );
 </script>

frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue

@@ -187,6 +187,7 @@
   const currentUserDrawer = reactive({
     visible: false,
     organizationId: '',
+    currentName: '',
   });
 
   const tableActions: ActionsItem[] = [
@@ -221,11 +222,11 @@
   };
 
   const handleEnableOrDisableOrg = async (record: any, isEnable = true) => {
-    const title = isEnable ? t('system.organization.enableTitle') : t('system.organization.enableTitle');
+    const title = isEnable ? t('system.organization.enableTitle') : t('system.organization.endTitle');
     const content = isEnable ? t('system.organization.enableContent') : t('system.organization.endContent');
     const okText = isEnable ? t('common.confirmEnable') : t('common.confirmClose');
     openModal({
-      type: 'warning',
+      type: 'info',
       cancelText: t('common.cancel'),
       title,
       content,
@@ -275,6 +276,7 @@
     currentProjectDrawer.visible = false;
     currentUserDrawer.visible = true;
     currentUserDrawer.organizationId = record.id;
+    currentUserDrawer.currentName = record.name;
   };
 
   const handleUserDrawerCancel = () => {
@@ -284,9 +286,11 @@
   const handleAddUserModalCancel = () => {
     userVisible.value = false;
   };
-  const handleAddOrgModalCancel = () => {
+  const handleAddOrgModalCancel = (shouldSearch: boolean) => {
     orgVisible.value = false;
+    if (shouldSearch) {
       fetchData();
+    }
   };
 
   const handleRevokeDelete = async (record: TableData) => {

frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue

@@ -181,6 +181,7 @@
   const currentUserDrawer = reactive({
     visible: false,
     projectId: '',
+    currentName: '',
   });
 
   const tableActions: ActionsItem[] = [
@@ -219,7 +220,7 @@
     const content = isEnable ? t('system.project.enableContent') : t('system.project.endContent');
     const okText = isEnable ? t('common.confirmEnable') : t('common.confirmClose');
     openModal({
-      type: 'error',
+      type: 'info',
       cancelText: t('common.cancel'),
       title,
       content,
@@ -261,11 +262,13 @@
   const showUserDrawer = (record: TableData) => {
     currentUserDrawer.visible = true;
     currentUserDrawer.projectId = record.id;
+    currentUserDrawer.currentName = record.name;
   };
 
   const handleUserDrawerCancel = () => {
     currentUserDrawer.visible = false;
     currentUserDrawer.projectId = '';
+    currentUserDrawer.currentName = '';
   };
 
   const handleAddUserModalCancel = () => {

frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue

@@ -6,7 +6,7 @@
     unmount-on-close
     :footer="false"
     class="ms-drawer-no-mask"
-    :title="t('system.organization.addMember')"
+    :title="t('system.organization.addMemberTitle', { name: props.currentName })"
     @cancel="handleCancel"
   >
     <div>
@@ -70,6 +70,7 @@
     visible: boolean;
     organizationId?: string;
     projectId?: string;
+    currentName: string;
   }
   const { t } = useI18n();
   const props = defineProps<projectDrawerProps>();
@@ -127,6 +128,7 @@
   }
 
   const handleCancel = () => {
+    keyword.value = '';
     emit('cancel');
   };
 
@@ -184,6 +186,9 @@
     () => props.visible,
     (visible) => {
       currentVisible.value = visible;
+      if (visible) {
+        fetchData();
+      }
     }
   );
 </script>

frontend/src/views/setting/system/organizationAndProject/index.vue

@@ -106,11 +106,17 @@
     }
   };
 
-  const handleAddProjectCancel = () => {
+  const handleAddProjectCancel = (shouldSearch: boolean) => {
     projectVisible.value = false;
+    if (shouldSearch) {
+      tableSearch();
+    }
   };
-  const handleAddOrganizationCancel = () => {
+  const handleAddOrganizationCancel = (shouldSearch: boolean) => {
     organizationVisible.value = false;
+    if (shouldSearch) {
+      tableSearch();
+    }
   };
 
   watch(

frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts

@@ -9,6 +9,7 @@ export default {
   'system.organization.removeName': 'Confirm to remove {name} this user',
   'system.organization.removeTip': 'After removal, the organization permission will be lost',
   'system.organization.addMember': 'Add Member',
+  'system.organization.addMemberTitle': 'Add Member ({name})',
   'system.organization.addMemberPlaceholder': 'Please select member',
   'system.organization.addMemberRequired': 'Please select member',
   'system.organization.searchPlaceholder': 'Please enter the organization name to query',

frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts

@@ -9,6 +9,7 @@ export default {
   'system.organization.removeName': '确认移除 {name} 这个用户吗',
   'system.organization.removeTip': '移除后，将失去组织权限',
   'system.organization.addMember': '添加成员',
+  'system.organization.addMemberTitle': '添加成员（{name}）',
   'system.organization.addMemberPlaceholder': '请选择成员',
   'system.organization.addMemberRequired': '请选择成员',
   'system.organization.searchPlaceholder': '请输入组织名称回车查询',