From 75a2c40ace3d72b3ae673d100c76ed157674998b Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Fri, 18 Aug 2023 18:18:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20table=20=E8=A1=A8=E6=A0=BC=E5=90=88?=
 =?UTF-8?q?=E5=B9=B6&=E7=AC=AC=E4=B8=80=E8=A1=8C=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |  2 +-
 .../setting/system/organizationAndProject.ts  |  7 ++-
 .../components/pure/ms-table/base-table.vue   | 30 +++++++++++
 frontend/src/components/pure/ms-table/type.ts |  2 +
 .../src/components/pure/ms-table/useTable.ts  |  1 +
 .../models/setting/system/orgAndProject.ts    | 12 +++++
 frontend/src/store/modules/setting/types.ts   |  1 +
 .../src/store/modules/setting/usergroup.ts    |  1 +
 .../components/addProjectModal.vue            | 54 +++++++++++--------
 .../components/systemOrganization.vue         |  3 ++
 .../components/systemProject.vue              |  3 ++
 .../system/organizationAndProject/index.vue   | 24 +++++++--
 .../system/usergroup/components/authTable.vue | 18 +++++--
 .../system/usergroup/components/index.vue     | 12 +++--
 .../views/setting/system/usergroup/index.vue  | 30 ++++++-----
 15 files changed, 150 insertions(+), 50 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 0fa253ac4c..0592096178 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,7 @@
     "@7polo/kity": "2.0.8",
     "@7polo/kityminder-core": "1.4.53",
     "@arco-design/web-vue": "^2.49.2",
-    "@arco-themes/vue-ms-theme-default": "^0.0.25",
+    "@arco-themes/vue-ms-theme-default": "^0.0.28",
     "@form-create/arco-design": "^3.1.22",
     "@types/color": "^3.0.3",
     "@vueuse/core": "^10.2.1",
diff --git a/frontend/src/api/modules/setting/system/organizationAndProject.ts b/frontend/src/api/modules/setting/system/organizationAndProject.ts
index 5476fdaa8c..2592a956eb 100644
--- a/frontend/src/api/modules/setting/system/organizationAndProject.ts
+++ b/frontend/src/api/modules/setting/system/organizationAndProject.ts
@@ -2,7 +2,10 @@ import MSR from '@/api/http/index';
 import * as orgUrl from '@/api/requrls/setting/system/organizationAndProject';
 import { TableQueryParams } from '@/models/common';
 import { AddUserToOrgOrProjectParams } from '@/models/setting/systemOrg';
-import { CreateOrUpdateSystemOrgParams } from '@/models/setting/system/orgAndProject';
+import {
+  CreateOrUpdateSystemOrgParams,
+  CreateOrUpdateSystemProjectParams,
+} from '@/models/setting/system/orgAndProject';
 
 // 获取组织列表
 export function postOrgTable(data: TableQueryParams) {
@@ -10,7 +13,7 @@ export function postOrgTable(data: TableQueryParams) {
 }
 
 // 创建或修改组织
-export function createOrUpdateOrg(data: CreateOrUpdateSystemOrgParams) {
+export function createOrUpdateOrg(data: CreateOrUpdateSystemOrgParams | CreateOrUpdateSystemProjectParams) {
   return MSR.post({ url: data.id ? orgUrl.postModifyOrgUrl : orgUrl.postAddOrgUrl, data });
 }
 
diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue
index ec2e69c410..6ac77d5581 100644
--- a/frontend/src/components/pure/ms-table/base-table.vue
+++ b/frontend/src/components/pure/ms-table/base-table.vue
@@ -11,8 +11,12 @@
       v-bind="$attrs"
       :row-class="getRowClass"
       :selected-keys="props.selectedKeys"
+      :span-method="spanMethod"
       @selection-change="(e) => selectionChange(e, true)"
     >
+      <template #optional="{ rowIndex, record }">
+        <slot name="optional" v-bind="{ rowIndex, record }" />
+      </template>
       <template #columns>
         <a-table-column
           v-for="(item, idx) in currentColumns"
@@ -133,6 +137,7 @@
     noDisable?: boolean;
     showSetting?: boolean;
     columns: MsTableColumn;
+    spanMethod?: (params: { record: TableData; rowIndex: number; columnIndex: number }) => void;
   }>();
   const emit = defineEmits<{
     (e: 'selectedChange', value: (string | number)[]): void;
@@ -152,6 +157,31 @@
   // 编辑input的Ref
   const currentInputRef = ref(null);
   const { rowKey, editKey }: Partial<MsTableProps<any>> = attrs;
+  // 第一行表格合并
+  const currentSpanMethod = ({
+    rowIndex,
+    columnIndex,
+  }: {
+    record: TableData;
+    rowIndex: number;
+    columnIndex: number;
+  }) => {
+    if (rowIndex === 0 && columnIndex === 0) {
+      return {
+        rowspan: 1,
+        colspan: currentColumns.value.length,
+      };
+    }
+  };
+  const spanMethod = computed(() => {
+    if (props.spanMethod) {
+      return props.spanMethod;
+    }
+    if (attrs.showFirstOperation) {
+      return currentSpanMethod;
+    }
+    return undefined;
+  });
 
   const setSelectAllTotal = (isAll: boolean) => {
     const { data, msPagination }: Partial<MsTableProps<any>> = attrs;
diff --git a/frontend/src/components/pure/ms-table/type.ts b/frontend/src/components/pure/ms-table/type.ts
index afbacd8c11..3a58bc8f99 100644
--- a/frontend/src/components/pure/ms-table/type.ts
+++ b/frontend/src/components/pure/ms-table/type.ts
@@ -77,6 +77,8 @@ export interface MsTableProps<T> {
   tableErrorStatus?: MsTableErrorStatus;
   // debug模式，开启后会打印表格所有state
   debug?: boolean;
+  // 是否展示第一行的操作
+  showFirstOperation?: boolean;
   [key: string]: any;
 }
 
diff --git a/frontend/src/components/pure/ms-table/useTable.ts b/frontend/src/components/pure/ms-table/useTable.ts
index fa69e302d4..379e260524 100644
--- a/frontend/src/components/pure/ms-table/useTable.ts
+++ b/frontend/src/components/pure/ms-table/useTable.ts
@@ -56,6 +56,7 @@ export default function useTableProps<T>(
     // 表格的错误状态
     tableErrorStatus: false,
     debug: false,
+    showFirstOperation: false,
     ...props,
   };
 
diff --git a/frontend/src/models/setting/system/orgAndProject.ts b/frontend/src/models/setting/system/orgAndProject.ts
index 5151003257..219f7ec4a7 100644
--- a/frontend/src/models/setting/system/orgAndProject.ts
+++ b/frontend/src/models/setting/system/orgAndProject.ts
@@ -4,3 +4,15 @@ export interface CreateOrUpdateSystemOrgParams {
   description: string;
   memberIds: string[];
 }
+export interface CreateOrUpdateSystemProjectParams {
+  id?: string;
+  name: string;
+  description: string;
+  enable: boolean;
+  userIds: string[];
+  // 模块配置 后端需要的字段 JSON string
+  moduleSetting?: string;
+  // 前端展示的模块配置 string[]
+  module?: string[];
+  organizationId?: string;
+}
diff --git a/frontend/src/store/modules/setting/types.ts b/frontend/src/store/modules/setting/types.ts
index 0a2dcaf20b..970c6e8843 100644
--- a/frontend/src/store/modules/setting/types.ts
+++ b/frontend/src/store/modules/setting/types.ts
@@ -7,4 +7,5 @@ export interface UserGroupState {
   currentType: string;
   // 菜单开启关闭
   collapse: boolean;
+  currentInternal: boolean;
 }
diff --git a/frontend/src/store/modules/setting/usergroup.ts b/frontend/src/store/modules/setting/usergroup.ts
index 6c01bc7e05..d9a4856b76 100644
--- a/frontend/src/store/modules/setting/usergroup.ts
+++ b/frontend/src/store/modules/setting/usergroup.ts
@@ -7,6 +7,7 @@ const useUserGroupStore = defineStore('userGroup', {
     currentTitle: '',
     currentId: '',
     currentType: '',
+    currentInternal: false,
     collapse: true,
   }),
   getters: {
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue b/frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue
index 26135fcf5d..7f0d87b5a2 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue
@@ -3,17 +3,17 @@
     v-model:visible="currentVisible"
     width="680px"
     class="ms-modal-form ms-modal-medium"
-    :ok-text="t('system.organization.create')"
+    :ok-text="isEdit ? t('common.update') : t('common.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>
+        {{ t('system.project.updateProject') }}
+        <span class="text-[var(--color-text-4)]">({{ props.currentProject?.name }})</span>
       </span>
       <span v-else>
-        {{ t('system.organization.createOrganization') }}
+        {{ t('system.project.create') }}
       </span>
     </template>
     <div class="form">
@@ -21,20 +21,23 @@
         <a-form-item
           field="name"
           required
-          :label="t('system.organization.organizationName')"
-          :rules="[{ required: true, message: t('system.organization.organizationNameRequired') }]"
+          :label="t('system.project.name')"
+          :rules="[{ required: true, message: t('system.project.projectNameRequired') }]"
         >
-          <a-input v-model="form.name" :placeholder="t('system.organization.organizationNamePlaceholder')" />
+          <a-input v-model="form.name" :placeholder="t('system.project.projectNamePlaceholder')" />
         </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 field="organizationId" :label="t('system.project.affiliatedOrg')">
+          <a-input v-model="form.organizationId" :placeholder="t('system.project.affiliatedOrgPlaceholder')" />
+        </a-form-item>
+        <a-form-item field="userIds" :label="t('system.project.projectAdmin')">
+          <MsUserSelector v-model:value="form.userIds" placeholder="system.project.projectAdminPlaceholder" />
         </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-item field="enable" :label="t('system.organization.description')">
+          <a-switch v-model="form.enable" :placeholder="t('system.organization.descriptionPlaceholder')" />
+        </a-form-item>
       </a-form>
     </div>
     <template #footer>
@@ -55,26 +58,30 @@
   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';
+  import { CreateOrUpdateSystemProjectParams } from '@/models/setting/system/orgAndProject';
 
   const { t } = useI18n();
   const props = defineProps<{
     visible: boolean;
-    currentOrganization?: CreateOrUpdateSystemOrgParams;
+    currentProject?: CreateOrUpdateSystemProjectParams;
   }>();
 
   const formRef = ref<FormInstance>();
 
   const loading = ref(false);
+  const isEdit = computed(() => !!props.currentProject?.id);
 
   const emit = defineEmits<{
     (e: 'cancel'): void;
   }>();
 
-  const form = reactive<{ name: string; memberIds: string[]; description: string }>({
+  const form = reactive<CreateOrUpdateSystemProjectParams>({
     name: '',
-    memberIds: [],
+    userIds: [],
+    organizationId: '',
     description: '',
+    enable: true,
+    module: [],
   });
 
   const currentVisible = ref(props.visible);
@@ -93,9 +100,9 @@
       }
       try {
         loading.value = true;
-        await createOrUpdateOrg({ id: props.currentOrganization?.id, ...form });
+        await createOrUpdateOrg({ id: props.currentProject?.id, ...form });
         Message.success(
-          props.currentOrganization?.id
+          isEdit.value
             ? t('system.organization.updateOrganizationSuccess')
             : t('system.organization.createOrganizationSuccess')
         );
@@ -111,11 +118,12 @@
     });
   };
   watchEffect(() => {
-    if (props.currentOrganization) {
-      form.name = props.currentOrganization.name;
-      form.memberIds = props.currentOrganization.memberIds;
-      form.description = props.currentOrganization.description;
+    if (props.currentProject) {
+      form.name = props.currentProject.name;
+      form.userIds = props.currentProject.userIds;
+      form.description = props.currentProject.description;
+      form.organizationId = props.currentProject.organizationId;
+      form.enable = props.currentProject.enable;
     }
   });
-  const isEdit = computed(() => !!props.currentOrganization?.id);
 </script>
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
index aa59d3279d..e7cd4b66df 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemOrganization.vue
@@ -282,6 +282,9 @@
     },
     { immediate: true }
   );
+  defineExpose({
+    fetchData,
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
index 55cae8b737..23e2f9a13d 100644
--- a/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/components/systemProject.vue
@@ -278,6 +278,9 @@
     },
     { immediate: true }
   );
+  defineExpose({
+    fetchData,
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/views/setting/system/organizationAndProject/index.vue b/frontend/src/views/setting/system/organizationAndProject/index.vue
index 3a3e2d3238..aecc679a97 100644
--- a/frontend/src/views/setting/system/organizationAndProject/index.vue
+++ b/frontend/src/views/setting/system/organizationAndProject/index.vue
@@ -24,11 +24,12 @@
       </div>
     </div>
     <div>
-      <SystemOrganization v-if="currentTable === 'organization'" :keyword="currentKeyword" />
-      <SystemProject v-if="currentTable === 'project'" :keyword="currentKeyword" />
+      <SystemOrganization v-if="currentTable === 'organization'" ref="orgTableRef" :keyword="currentKeyword" />
+      <SystemProject v-if="currentTable === 'project'" ref="projectTabeRef" :keyword="currentKeyword" />
     </div>
   </MsCard>
   <AddOrganizationModal :visible="organizationVisible" @cancel="handleAddOrganizationCancel" />
+  <AddProjectModal :visible="projectVisible" @cancel="handleAddProjectCancel" />
 </template>
 
 <script lang="ts" setup>
@@ -38,6 +39,7 @@
   import AddOrganizationModal from './components/addOrganizationModal.vue';
   import SystemOrganization from './components/systemOrganization.vue';
   import SystemProject from './components/systemProject.vue';
+  import AddProjectModal from './components/addProjectModal.vue';
 
   const { t } = useI18n();
   const currentTable = ref('project');
@@ -45,6 +47,9 @@
   const organizationCount = ref(0);
   const projectCount = ref(0);
   const currentKeyword = ref('');
+  const orgTableRef = ref();
+  const projectTabeRef = ref();
+  const projectVisible = ref(false);
 
   const handleSearch = (value: string) => {
     currentKeyword.value = value;
@@ -54,9 +59,22 @@
   };
 
   const handleAddOrganization = () => {
-    organizationVisible.value = true;
+    if (currentTable.value === 'organization') {
+      organizationVisible.value = true;
+    } else {
+      projectVisible.value = true;
+    }
+  };
+
+  const handleAddProjectCancel = () => {
+    projectVisible.value = false;
   };
   const handleAddOrganizationCancel = () => {
+    if (currentTable.value === 'organization') {
+      orgTableRef.value?.fetchData();
+    } else {
+      projectTabeRef.value?.fetchData();
+    }
     organizationVisible.value = false;
   };
 </script>
diff --git a/frontend/src/views/setting/system/usergroup/components/authTable.vue b/frontend/src/views/setting/system/usergroup/components/authTable.vue
index 372be029d4..c3884470c4 100644
--- a/frontend/src/views/setting/system/usergroup/components/authTable.vue
+++ b/frontend/src/views/setting/system/usergroup/components/authTable.vue
@@ -15,9 +15,13 @@
         <a-table-column :title="t('system.userGroup.auth')">
           <template #cell="{ record, rowIndex }">
             <a-checkbox-group v-model="record.perChecked" @change="(v) => handleAuthChange(v, rowIndex)">
-              <a-checkbox v-for="item in record.permissions" :key="item.id" :disabled="item.license" :value="item.id">{{
-                t(item.name)
-              }}</a-checkbox>
+              <a-checkbox
+                v-for="item in record.permissions"
+                :key="item.id"
+                :disabled="item.license || currentInternal"
+                :value="item.id"
+                >{{ t(item.name) }}</a-checkbox
+              >
             </a-checkbox-group>
           </template>
         </a-table-column>
@@ -27,6 +31,7 @@
               v-if="tableData && tableData?.length > 0"
               :model-value="allChecked"
               :indeterminate="allIndeterminate"
+              :disabled="currentInternal"
               @change="handleAllChangeByCheckbox"
             ></a-checkbox>
           </template>
@@ -34,6 +39,7 @@
             <a-checkbox
               :model-value="record.enable"
               :indeterminate="record.indeterminate"
+              :disabled="currentInternal"
               @change="(value) => handleActionChangeAll(value, rowIndex)"
             />
           </template>
@@ -45,7 +51,7 @@
 
 <script setup lang="ts">
   import { useI18n } from '@/hooks/useI18n';
-  import { RenderFunction, VNodeChild, ref, watchEffect } from 'vue';
+  import { RenderFunction, VNodeChild, ref, watchEffect, computed } from 'vue';
   import { type TableColumnData, type TableData } from '@arco-design/web-vue';
   import useUserGroupStore from '@/store/modules/setting/usergroup';
   import { getGlobalUSetting, saveGlobalUSetting } from '@/api/modules/setting/usergroup';
@@ -75,6 +81,10 @@
   const tableData = ref<AuthTableItem[]>();
   // 是否可以保存
   const canSave = ref(false);
+  // 内部用户不可编辑
+  const currentInternal = computed(() => {
+    return store.userGroupInfo.currentInternal;
+  });
 
   const dataSpanMethod = (data: {
     record: TableData;
diff --git a/frontend/src/views/setting/system/usergroup/components/index.vue b/frontend/src/views/setting/system/usergroup/components/index.vue
index eb2fb8b687..71c30a6405 100644
--- a/frontend/src/views/setting/system/usergroup/components/index.vue
+++ b/frontend/src/views/setting/system/usergroup/components/index.vue
@@ -38,7 +38,7 @@
                 <span class="n1">{{ element.name }}</span>
                 <span v-if="element.type" class="n4">（{{ t(`system.userGroup.${element.type}`) }}）</span>
               </div>
-              <div v-if="element.id === currentId">
+              <div v-if="element.id === currentId && !element.internal">
                 <MsTableMoreAction :list="customAction" @select="(value) => handleMoreAction(value, element.id)" />
               </div>
             </div>
@@ -112,9 +112,15 @@
 
   // 点击用户组列表
   const handleListItemClick = (element: UserGroupItem) => {
-    const { id, name, type } = element;
+    const { id, name, type, internal } = element;
     currentId.value = id;
-    store.setInfo({ currentName: name, currentTitle: type, currentId: id, currentType: type });
+    store.setInfo({
+      currentName: name,
+      currentTitle: type,
+      currentId: id,
+      currentType: type,
+      currentInternal: internal,
+    });
   };
 
   // 用户组数据初始化
diff --git a/frontend/src/views/setting/system/usergroup/index.vue b/frontend/src/views/setting/system/usergroup/index.vue
index 81a088ef3f..73d8e098f9 100644
--- a/frontend/src/views/setting/system/usergroup/index.vue
+++ b/frontend/src/views/setting/system/usergroup/index.vue
@@ -19,15 +19,15 @@
               @press-enter="handleEnter"
               @search="handleSearch"
             ></a-input-search>
-            <a-radio-group v-if="couldShowUser" v-model="currentTable" class="ml-[14px]" type="button">
-              <a-radio value="auth">{{ t('system.userGroup.auth') }}</a-radio>
-              <a-radio value="user">{{ t('system.userGroup.user') }}</a-radio>
+            <a-radio-group v-if="couldShowUser && couldShowAuth" v-model="currentTable" class="ml-[14px]" type="button">
+              <a-radio v-if="couldShowAuth" value="auth">{{ t('system.userGroup.auth') }}</a-radio>
+              <a-radio v-if="couldShowUser" value="user">{{ t('system.userGroup.user') }}</a-radio>
             </a-radio-group>
           </div>
         </div>
         <div class="mt-[16px]">
-          <user-table v-if="currentTable === 'user'" :keyword="currentKeyword" />
-          <auth-table v-if="currentTable === 'auth'" ref="authRef" />
+          <user-table v-if="currentTable === 'user' && couldShowUser" :keyword="currentKeyword" />
+          <auth-table v-if="currentTable === 'auth' && couldShowAuth" ref="authRef" />
         </div>
       </div>
     </div>
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, watch } from 'vue';
+  import { ref, computed, watchEffect } from 'vue';
   import { useI18n } from '@/hooks/useI18n';
   import MsCard from '@/components/pure/ms-card/index.vue';
   import useUserGroupStore from '@/store/modules/setting/usergroup';
@@ -76,18 +76,11 @@
 
   const store = useUserGroupStore();
   const couldShowUser = computed(() => store.userGroupInfo.currentType === 'SYSTEM');
+  const couldShowAuth = computed(() => store.userGroupInfo.currentId !== 'admin');
   const handleCollapse = () => {
     store.setCollapse(!store.collapse);
   };
   const collapse = computed(() => store.collapse);
-  watch(
-    () => couldShowUser.value,
-    (val) => {
-      if (!val) {
-        currentTable.value = 'auth';
-      }
-    }
-  );
   const menuWidth = computed(() => {
     const width = appStore.menuCollapse ? 86 : appStore.menuWidth;
     if (store.collapse) {
@@ -108,6 +101,15 @@
     }
     return true;
   });
+  watchEffect(() => {
+    if (!couldShowAuth.value) {
+      currentTable.value = 'user';
+    } else if (!couldShowUser.value) {
+      currentTable.value = 'auth';
+    } else {
+      currentTable.value = 'auth';
+    }
+  });
 </script>
 
 <style lang="scss" scoped>