feat: table 表格合并&第一行操作

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",

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 });
 }
 

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;

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;
 }
 

frontend/src/components/pure/ms-table/useTable.ts

@@ -56,6 +56,7 @@ export default function useTableProps<T>(
     // 表格的错误状态
     tableErrorStatus: false,
     debug: false,
+    showFirstOperation: false,
     ...props,
   };
 

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;
+}

frontend/src/store/modules/setting/types.ts

@@ -7,4 +7,5 @@ export interface UserGroupState {
   currentType: string;
   // 菜单开启关闭
   collapse: boolean;
+  currentInternal: boolean;
 }

frontend/src/store/modules/setting/usergroup.ts

@@ -7,6 +7,7 @@ const useUserGroupStore = defineStore('userGroup', {
     currentTitle: '',
     currentId: '',
     currentType: '',
+    currentInternal: false,
     collapse: true,
   }),
   getters: {

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') }}
+        {{ t('system.project.updateProject') }}
-        <span class="text-[var(--color-text-4)]">({{ props.currentOrganization?.name }})</span>
+        <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')"
+          :label="t('system.project.name')"
-          :rules="[{ required: true, message: t('system.organization.organizationNameRequired') }]"
+          :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')">
+        <a-form-item field="organizationId" :label="t('system.project.affiliatedOrg')">
-          <MsUserSelector
+          <a-input v-model="form.organizationId" :placeholder="t('system.project.affiliatedOrgPlaceholder')" />
-            v-model:value="form.memberIds"
+        </a-form-item>
-            placeholder="system.organization.organizationAdminPlaceholder"
+        <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) {
+    if (props.currentProject) {
-      form.name = props.currentOrganization.name;
+      form.name = props.currentProject.name;
-      form.memberIds = props.currentOrganization.memberIds;
+      form.userIds = props.currentProject.userIds;
-      form.description = props.currentOrganization.description;
+      form.description = props.currentProject.description;
+      form.organizationId = props.currentProject.organizationId;
+      form.enable = props.currentProject.enable;
     }
   });
-  const isEdit = computed(() => !!props.currentOrganization?.id);
 </script>

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

@@ -282,6 +282,9 @@
     },
     { immediate: true }
   );
+  defineExpose({
+    fetchData,
+  });
 </script>
 
 <style lang="scss" scoped>

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

@@ -278,6 +278,9 @@
     },
     { immediate: true }
   );
+  defineExpose({
+    fetchData,
+  });
 </script>
 
 <style lang="scss" scoped>

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

@@ -24,11 +24,12 @@
       </div>
     </div>
     <div>
-      <SystemOrganization v-if="currentTable === 'organization'" :keyword="currentKeyword" />
+      <SystemOrganization v-if="currentTable === 'organization'" ref="orgTableRef" :keyword="currentKeyword" />
-      <SystemProject v-if="currentTable === 'project'" :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>

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">{{
+              <a-checkbox
-                t(item.name)
+                v-for="item in record.permissions"
-              }}</a-checkbox>
+                :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;

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,
+    });
   };
 
   // 用户组数据初始化

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-group v-if="couldShowUser && couldShowAuth" v-model="currentTable" class="ml-[14px]" type="button">
-              <a-radio value="auth">{{ t('system.userGroup.auth') }}</a-radio>
+              <a-radio v-if="couldShowAuth" value="auth">{{ t('system.userGroup.auth') }}</a-radio>
-              <a-radio value="user">{{ t('system.userGroup.user') }}</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" />
+          <user-table v-if="currentTable === 'user' && couldShowUser" :keyword="currentKeyword" />
-          <auth-table v-if="currentTable === 'auth'" ref="authRef" />
+          <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>