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

2023-08-18 18:18:53 +08:00 · 2023-08-18 18:18:53 +08:00 · 75a2c40ace
parent 33ef309848
commit 75a2c40ace
15 changed files with 150 additions and 50 deletions
--- 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",
--- 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 });
 }

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

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

--- 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;
+}
--- 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;
 }
--- 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: {
--- 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>
--- 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>
--- 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>
--- 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>
--- 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;
--- 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,
+    });
  };

  // 用户组数据初始化
--- 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>