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

2023-10-25 20:03:29 +08:00 · 2023-10-25 20:03:29 +08:00 · f306e1628d
parent cfb103f2ae
commit f306e1628d
15 changed files with 87 additions and 39 deletions
--- a/frontend/src/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue
+++ b/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
-      console.log(error);
+      return false;
    }
  };

--- a/frontend/src/views/project-management/projectAndPermission/userGroup/userDrawer.vue
+++ b/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(() => {
-    currentVisible.value = props.visible;
-  });
+  watch(
+    () => props.visible,
+    (visible) => {
+      currentVisible.value = visible;
+      if (visible) {
+        fetchData();
+      }
+    }
+  );
  watchEffect(() => {
    const { projectId, userRoleId } = props;
    if (projectId && userRoleId) {
--- a/frontend/src/views/setting/organization/project/components/addProjectModal.vue
+++ b/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>
--- a/frontend/src/views/setting/organization/project/components/addUserModal.vue
+++ b/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
--- a/frontend/src/views/setting/organization/project/components/userDrawer.vue
+++ b/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>
--- a/frontend/src/views/setting/system/organizationAndProject/components/addOrganizationModal.vue
+++ b/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: 'submit'): void;
+    (e: 'cancel', shouldSearch: boolean): void;
  }>();

  const form = reactive<{ name: string; userIds: string[]; description: string }>({
@ -89,13 +89,9 @@
  watchEffect(() => {
    currentVisible.value = props.visible;
  });
-  const handleCancel = () => {
-    emit('cancel');
-  };
-
-  const handleSubmit = () => {
-    handleCancel();
-    emit('submit');
+  const handleCancel = (shouldSearch = false) => {
+    emit('cancel', shouldSearch);
+    formRef.value?.resetFields();
  };

  const handleBeforeOk = () => {
@ -111,12 +107,10 @@
            ? t('system.organization.updateOrganizationSuccess')
            : t('system.organization.createOrganizationSuccess')
        );
-        handleSubmit();
-        return true;
+        handleCancel(true);
      } catch (error) {
        // eslint-disable-next-line no-console
        console.error(error);
-        return false;
      } finally {
        loading.value = false;
      }
--- a/frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue
+++ b/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>
--- a/frontend/src/views/setting/system/organizationAndProject/components/addUserModal.vue
+++ b/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') }]"
        >
--- a/frontend/src/views/setting/system/organizationAndProject/components/projectDrawer.vue
+++ b/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>
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
+++ b/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) => {
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
+++ b/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 = () => {
--- a/frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue
+++ b/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>
--- a/frontend/src/views/setting/system/organizationAndProject/index.vue
+++ b/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(
--- a/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
+++ b/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',
--- a/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
+++ b/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': '请输入组织名称回车查询',