feat(系统设置): 项目表格页面

2023-08-16 19:14:34 +08:00 · 2023-08-16 19:14:34 +08:00 · 77a56344a3
parent 92047fd3d7
commit 77a56344a3
9 changed files with 370 additions and 84 deletions
--- a/frontend/src/api/modules/setting/system/organizationAndProject.ts
+++ b/frontend/src/api/modules/setting/system/organizationAndProject.ts
@ -57,3 +57,8 @@ export function deleteUserFromOrgOrProject(sourceId: string, userId: string, isO
    url: `${isOrg ? orgUrl.getDeleteOrgMemberUrl : orgUrl.getDeleteProjectMemberUrl}${sourceId}/${userId}`,
  });
 }
+
+// TODO: 等待后端同学的接口 启用或禁用项目
+export function enableOrDisableProject(id: string, isEnable = true) {
+  return MSR.get({ url: `${isEnable ? orgUrl.getEnableOrgUrl : orgUrl.getDisableOrgUrl}${id}` });
+}
--- a/frontend/src/api/requrls/setting/system/organizationAndProject.ts
+++ b/frontend/src/api/requrls/setting/system/organizationAndProject.ts
@ -29,7 +29,7 @@ export const getOrgDefaultUrl = '/system/organization/default';
 // 更新项目信息
 export const postModifyProjectUrl = '/system/project/update';
 // 获取项目列表
-export const postProjectTableUrl = '/system/project/list';
+export const postProjectTableUrl = '/system/project/page';
 // 获取项目成员
 export const postProjectMemberUrl = '/system/project/member/list';
 // 添加项目
--- a/frontend/src/views/login/components/login-form.vue
+++ b/frontend/src/views/login/components/login-form.vue
@ -121,7 +121,7 @@
        const { redirect, ...othersQuery } = router.currentRoute.value.query;
        setLoginExpires();
        router.push({
-          name: (redirect as string) || 'setting',
+          name: (redirect as string) || 'settingSystemUser',
          query: {
            ...othersQuery,
          },
--- a/frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue
@ -0,0 +1,121 @@
+<template>
+  <a-modal
+    v-model:visible="currentVisible"
+    width="680px"
+    class="ms-modal-form ms-modal-medium"
+    :ok-text="t('system.organization.create')"
+    unmount-on-close
+    @cancel="handleCancel"
+  >
+    <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
+          field="name"
+          required
+          :label="t('system.organization.organizationName')"
+          :rules="[{ required: true, message: t('system.organization.organizationNameRequired') }]"
+        >
+          <a-input v-model="form.name" :placeholder="t('system.organization.organizationNamePlaceholder')" />
+        </a-form-item>
+        <a-form-item field="name" :label="t('system.organization.organizationAdmin')">
+          <MsUserSelector
+            v-model:value="form.memberIds"
+            placeholder="system.organization.organizationAdminPlaceholder"
+          />
+        </a-form-item>
+        <a-form-item field="description" :label="t('system.organization.description')">
+          <a-input v-model="form.description" :placeholder="t('system.organization.descriptionPlaceholder')" />
+        </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, 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';
+  import { Message } from '@arco-design/web-vue';
+  import { CreateOrUpdateSystemOrgParams } from '@/models/setting/system/orgAndProject';
+
+  const { t } = useI18n();
+  const props = defineProps<{
+    visible: boolean;
+    currentOrganization?: CreateOrUpdateSystemOrgParams;
+  }>();
+
+  const formRef = ref<FormInstance>();
+
+  const loading = ref(false);
+
+  const emit = defineEmits<{
+    (e: 'cancel'): void;
+  }>();
+
+  const form = reactive<{ name: string; memberIds: string[]; description: string }>({
+    name: '',
+    memberIds: [],
+    description: '',
+  });
+
+  const currentVisible = ref(props.visible);
+
+  watchEffect(() => {
+    currentVisible.value = props.visible;
+  });
+  const handleCancel = () => {
+    emit('cancel');
+  };
+
+  const handleBeforeOk = () => {
+    formRef.value?.validate(async (errors: undefined | Record<string, ValidatedError>) => {
+      if (errors) {
+        return false;
+      }
+      try {
+        loading.value = true;
+        await createOrUpdateOrg({ id: props.currentOrganization?.id, ...form });
+        Message.success(
+          props.currentOrganization?.id
+            ? t('system.organization.updateOrganizationSuccess')
+            : t('system.organization.createOrganizationSuccess')
+        );
+        handleCancel();
+        return true;
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        return false;
+      } finally {
+        loading.value = false;
+      }
+    });
+  };
+  watchEffect(() => {
+    if (props.currentOrganization) {
+      form.name = props.currentOrganization.name;
+      form.memberIds = props.currentOrganization.memberIds;
+      form.description = props.currentOrganization.description;
+    }
+  });
+  const isEdit = computed(() => !!props.currentOrganization?.id);
+</script>
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
@ -173,7 +173,7 @@
    openDeleteModal({
      title: t('system.organization.deleteName', { name: record.name }),
      content: t('system.organization.deleteTip'),
-      onOk: async () => {
+      onBeforeOk: async () => {
        try {
          await deleteOrg(record.id);
          Message.success(t('common.deleteSuccess'));
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
@ -1,19 +1,47 @@
 <template>
  <MsBaseTable v-bind="propsRes" v-on="propsEvent">
+    <template #name="{ record }">
+      <span>{{ record.name }}</span>
+      <a-tooltip background-color="#FFFFFF">
+        <template #content>
+          <span class="text-[var(--color-text-1)]">{{ t('system.organization.revokeDeleteToolTip') }}</span>
+          <MsButton class="ml-[8px]" @click="handleRevokeDelete(record)">{{ t('common.revokeDelete') }}</MsButton>
+        </template>
+        <MsIcon v-if="record.deleted" type="icon-icon_alarm_clock" class="ml-[4px] text-[rgb(var(--danger-6))]" />
+      </a-tooltip>
+    </template>
+    <template #creator="{ record }">
+      <span>{{ record.createUser }}</span>
+      <span v-if="record.creatorAdmin" class="text-[var(--color-text-4)]">{{ `&nbsp;(${t('common.admin')})` }}</span>
+    </template>
+    <template #memberCount="{ record }">
+      <span class="primary-color" @click="showUserDrawer(record)">{{ record.memberCount }}</span>
+    </template>
    <template #operation="{ record }">
-      <template v-if="!record.enable">
-        <MsButton @click="handleEnable(record)">{{ t('system.organization.enable') }}</MsButton>
-        <MsButton @click="handleDelete(record)">{{ t('system.organization.delete') }}</MsButton>
+      <template v-if="record.deleted">
+        <MsButton @click="handleRevokeDelete(record)">{{ t('common.revokeDelete') }}</MsButton>
+      </template>
+      <template v-else-if="!record.enable">
+        <MsButton @click="handleEnableOrDisableOrg(record)">{{ t('common.enable') }}</MsButton>
+        <MsButton @click="handleDelete(record)">{{ t('common.delete') }}</MsButton>
      </template>
      <template v-else>
-        <MsButton @click="showOrganizationModal(record)">{{ t('system.organization.edit') }}</MsButton>
-        <MsButton @click="showAddUserModal(record)">{{ t('system.organization.addUser') }}</MsButton>
-        <MsButton @click="handleEnd(record)">{{ t('system.organization.end') }}</MsButton>
+        <MsButton @click="showOrganizationModal(record)">{{ t('common.edit') }}</MsButton>
+        <MsButton @click="showAddUserModal(record)">{{ t('system.organization.addMember') }}</MsButton>
+        <MsButton @click="handleEnableOrDisableOrg(record, false)">{{ t('common.end') }}</MsButton>
        <MsTableMoreAction :list="tableActions" @select="handleMoreAction($event, record)"></MsTableMoreAction>
      </template>
    </template>
  </MsBaseTable>
-  <AddOrganizationModal :visible="userVisible" @cancel="handleAddUserModalCancel" />
+  <AddOrganizationModal
+    type="edit"
+    :current-organization="currentUpdateOrganization"
+    :visible="orgVisible"
+    @cancel="handleAddOrgModalCancel"
+  />
+  <AddUserModal :organization-id="currentOrganizationId" :visible="userVisible" @cancel="handleAddUserModalCancel" />
+  <ProjectDrawer v-bind="currentProjectDrawer" @cancel="handleProjectDrawerCancel" />
+  <UserDrawer v-bind="currentUserDrawer" @cancel="handleUserDrawerCancel" />
 </template>

 <script lang="ts" setup>
@ -21,18 +49,117 @@
  import useTable from '@/components/pure/ms-table/useTable';
  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
  import { useTableStore } from '@/store';
-  import { watchEffect, ref } from 'vue';
+  import { ref, reactive, watch } from 'vue';
  import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
-  import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
-  import MsButton from '@/components/pure/ms-button/index.vue';
-  import { postUserByUserGroup } from '@/api/modules/setting/usergroup';
+  import {
+    postProjectTable,
+    deleteOrg,
+    enableOrDisableProject,
+    revokeDeleteOrg,
+  } from '@/api/modules/setting/system/organizationAndProject';
  import { TableKeyEnum } from '@/enums/tableEnum';
  import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
+  import MsButton from '@/components/pure/ms-button/index.vue';
  import AddOrganizationModal from './addOrganizationModal.vue';
+  import ProjectDrawer from './projectDrawer.vue';
+  import { Message, TableData } from '@arco-design/web-vue';
+  import UserDrawer from './userDrawer.vue';
+  import AddUserModal from './addUserModal.vue';
+  import useModal from '@/hooks/useModal';
+  import { CreateOrUpdateSystemOrgParams } from '@/models/setting/system/orgAndProject';
+
+  export interface SystemOrganizationProps {
+    keyword: string;
+  }
+
+  const props = defineProps<SystemOrganizationProps>();

  const { t } = useI18n();
  const tableStore = useTableStore();
  const userVisible = ref(false);
+  const orgVisible = ref(false);
+  const currentOrganizationId = ref('');
+  const currentUpdateOrganization = ref<CreateOrUpdateSystemOrgParams>();
+  const { openDeleteModal, openModal } = useModal();
+
+  const organizationColumns: MsTableColumn = [
+    {
+      title: 'system.organization.ID',
+      dataIndex: 'num',
+      width: 100,
+    },
+    {
+      title: 'system.organization.name',
+      slotName: 'name',
+      editable: true,
+    },
+    {
+      title: 'system.organization.member',
+      slotName: 'memberCount',
+    },
+    {
+      title: 'system.organization.status',
+      dataIndex: 'enable',
+    },
+    {
+      title: 'system.organization.description',
+      dataIndex: 'description',
+      ellipsis: true,
+      tooltip: true,
+    },
+    {
+      title: 'system.organization.subordinateOrg',
+      dataIndex: 'organizationName',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+      },
+    },
+    {
+      title: 'system.organization.creator',
+      slotName: 'creator',
+      dataIndex: 'createUser',
+    },
+    {
+      title: 'system.organization.createTime',
+      dataIndex: 'createTime',
+      width: 230,
+    },
+    {
+      title: 'system.organization.operation',
+      slotName: 'operation',
+      fixed: 'right',
+      width: 208,
+    },
+  ];
+
+  tableStore.initColumn(TableKeyEnum.SYSTEM_PROJECT, organizationColumns, 'drawer');
+
+  const { propsRes, propsEvent, loadList, setKeyword, setLoading } = useTable(postProjectTable, {
+    tableKey: TableKeyEnum.SYSTEM_PROJECT,
+    scroll: { y: 'auto', x: '1300px' },
+    selectable: false,
+    noDisable: false,
+    debug: true,
+    size: 'default',
+    showSetting: true,
+  });
+
+  const fetchData = async () => {
+    setKeyword(props.keyword);
+    await loadList();
+  };
+
+  const currentProjectDrawer = reactive({
+    visible: false,
+    organizationId: '',
+    currentName: '',
+  });
+
+  const currentUserDrawer = reactive({
+    visible: false,
+    organizationId: '',
+  });

  const tableActions: ActionsItem[] = [
    {
@ -42,96 +169,125 @@
    },
  ];

-  const handleDelete = (record: any) => {
+  const handleDelete = (record: TableData) => {
+    openDeleteModal({
+      title: t('system.organization.deleteName', { name: record.name }),
+      content: t('system.organization.deleteTip'),
+      onBeforeOk: async () => {
+        try {
+          await deleteOrg(record.id);
+          Message.success(t('common.deleteSuccess'));
+          fetchData();
+        } catch (error) {
          // eslint-disable-next-line no-console
-    console.log(record);
+          console.log(error);
+        }
+      },
+    });
  };

-  const handleMoreAction = (tag: string, record: any) => {
-    if (tag === 'delete') {
+  const handleMoreAction = (tag: ActionsItem, record: TableData) => {
+    if (tag.eventTag === 'delete') {
      handleDelete(record);
    }
  };

-  const handleEnable = (record: any) => {
+  const handleEnableOrDisableOrg = async (record: any, isEnable = true) => {
+    const title = isEnable ? t('system.organization.enableTitle') : t('system.organization.enableTitle');
+    const content = isEnable ? t('system.organization.enableContent') : t('system.organization.endContent');
+    const okText = isEnable ? t('common.confirmEnable') : t('common.confirmClose');
+    openModal({
+      type: 'error',
+      cancelText: t('common.cancel'),
+      title,
+      content,
+      okText,
+      onBeforeOk: async () => {
+        try {
+          await enableOrDisableProject(record.id, isEnable);
+          Message.success(isEnable ? t('common.enableSuccess') : t('common.closeSuccess'));
+          fetchData();
+        } catch (error) {
          // eslint-disable-next-line no-console
-    console.log(record);
-  };
-
-  const handleEnd = (record: any) => {
-    // eslint-disable-next-line no-console
-    console.log(record);
+          console.log(error);
+        }
+      },
+      hideCancel: false,
+    });
  };

  const showOrganizationModal = (record: any) => {
-    // eslint-disable-next-line no-console
-    console.log(record);
+    currentOrganizationId.value = record.id;
+    orgVisible.value = true;
+    currentUpdateOrganization.value = {
+      id: record.id,
+      name: record.name,
+      description: record.description,
+      memberIds: record.orgAdmins.map((item: any) => item.id) || [],
+    };
  };

  const showAddUserModal = (record: any) => {
-    // eslint-disable-next-line no-console
-    console.log(record);
+    currentOrganizationId.value = record.id;
    userVisible.value = true;
  };

-  const projectColumn: MsTableColumn = [
-    {
-      title: 'system.organization.ID',
-      dataIndex: 'id',
-    },
-    {
-      title: 'system.organization.name',
-      dataIndex: 'name',
-    },
-    {
-      title: 'system.organization.member',
-      dataIndex: 'name',
-    },
-    {
-      title: 'system.organization.project',
-      dataIndex: 'project',
-    },
-    {
-      title: 'system.organization.enabled',
-      dataIndex: 'enabled',
-    },
-    {
-      title: 'system.organization.description',
-      dataIndex: 'description',
-    },
-    {
-      title: 'system.organization.createUser',
-      dataIndex: 'createUser',
-    },
-    {
-      title: 'system.organization.createTime',
-      dataIndex: 'createTime',
-    },
-    {
-      title: 'system.organization.operation',
-      slotName: 'operation',
-      fixed: 'right',
-      width: 200,
-    },
-  ];
+  const handleProjectDrawerCancel = () => {
+    currentProjectDrawer.visible = false;
+    fetchData();
+  };

-  tableStore.initColumn(TableKeyEnum.SYSTEM_PROJECT, projectColumn, 'drawer');
+  const showProjectDrawer = (record: TableData) => {
+    currentProjectDrawer.visible = true;
+    currentProjectDrawer.organizationId = record.id;
+    currentProjectDrawer.currentName = record.name;
+  };

-  const { propsRes, propsEvent, loadList } = useTable(postUserByUserGroup, {
-    tableKey: TableKeyEnum.SYSTEM_PROJECT,
-    scroll: { y: 'auto', x: '600px' },
-    selectable: false,
-    noDisable: false,
-  });
+  const showUserDrawer = (record: TableData) => {
+    currentUserDrawer.visible = true;
+    currentUserDrawer.organizationId = record.id;
+  };

-  const fetchData = async () => {
-    await loadList();
+  const handleUserDrawerCancel = () => {
+    currentUserDrawer.visible = false;
+    fetchData();
  };

  const handleAddUserModalCancel = () => {
    userVisible.value = false;
-  };
-  watchEffect(() => {
    fetchData();
-  });
+  };
+  const handleAddOrgModalCancel = () => {
+    orgVisible.value = false;
+    fetchData();
+  };
+
+  const handleRevokeDelete = async (record: TableData) => {
+    try {
+      setLoading(true);
+      await revokeDeleteOrg(record.id);
+      Message.success(t('common.revokeDeleteSuccess'));
+      fetchData();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  watch(
+    () => props.keyword,
+    () => {
+      fetchData();
+    },
+    { immediate: true }
+  );
 </script>
+
+<style lang="scss" scoped>
+  .primary-color {
+    color: rgb(var(--primary-5));
+    cursor: pointer;
+  }
+</style>
--- a/frontend/src/views/setting/system/organizationAndProject/index.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/index.vue
@ -40,7 +40,7 @@
  import SystemProject from './components/systemProject.vue';

  const { t } = useI18n();
-  const currentTable = ref('organization');
+  const currentTable = ref('project');
  const organizationVisible = ref(false);
  const organizationCount = ref(0);
  const projectCount = ref(0);
--- a/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
+++ b/frontend/src/views/setting/system/organizationAndProject/locale/en-US.ts
@ -52,4 +52,6 @@ export default {
    'The organization after closing is not displayed in the organization switching list',
  'system.organization.updateOrganization': 'Update organization',
  'system.organization.updateOrganizationSuccess': 'Update organization success',
+  'system.organization.createProject': 'Create project',
+  'system.organization.subordinateOrg': 'Subordinate organization',
 };
--- a/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
+++ b/frontend/src/views/setting/system/organizationAndProject/locale/zh-CN.ts
@ -48,4 +48,6 @@ export default {
  'system.organization.endContent': '关闭后的组织不展示在组织切换列表',
  'system.organization.updateOrganization': '更新组织',
  'system.organization.updateOrganizationSuccess': '更新组织成功',
+  'system.organization.createProject': '创建项目',
+  'system.organization.subordinateOrg': '所属组织',
 };