feat(系统设置): 调整表格高度去除滚动条

This commit is contained in:
RubyLiu 2023-09-13 15:11:21 +08:00 committed by fit2-zhao
parent 8210674cc3
commit 7864d555f9
10 changed files with 43 additions and 24 deletions

View File

@ -632,6 +632,12 @@
background-color: rgb(var(--primary-1)) !important; background-color: rgb(var(--primary-1)) !important;
} }
} }
&-simple {
&-jumper {
display: flex;
align-items: center;
}
}
} }
/** 折叠面板样式 **/ /** 折叠面板样式 **/
@ -702,3 +708,11 @@
white-space: nowrap; white-space: nowrap;
} }
} }
/** 隐藏drawer-mask **/
.ms-drawer-no-mask {
left: auto;
.arco-drawer {
box-shadow: -1px 0 4px 0 rgb(2 2 2 / 10%);
}
}

View File

@ -326,7 +326,7 @@ export default defineComponent({
const renderPager = () => { const renderPager = () => {
if (props.simple) { if (props.simple) {
return ( return (
<span class={`${prefixCls}-simple`}> <span class={`${prefixCls}-simple-jumper`}>
{getPageItemElement('previous', { simple: true })} {getPageItemElement('previous', { simple: true })}
<PageJumper <PageJumper
disabled={props.disabled} disabled={props.disabled}

View File

@ -133,7 +133,7 @@
</template> </template>
</a-table> </a-table>
<div <div
class="flex h-[64px] w-[100%] flex-row flex-nowrap items-center justify-end px-0 py-4" class="mt-[16px] flex h-[32px] w-[100%] flex-row flex-nowrap items-center justify-end px-0"
:class="{ 'batch-action': showBatchAction }" :class="{ 'batch-action': showBatchAction }"
> >
<batch-action <batch-action

View File

@ -36,7 +36,7 @@ export default function useTableProps<T>(
tableKey: '', tableKey: '',
bordered: true, bordered: true,
showPagination: true, showPagination: true,
size: 'small', size: 'default',
scroll: { maxHeight: '800px', minWidth: '1600px', y: '600px' }, scroll: { maxHeight: '800px', minWidth: '1600px', y: '600px' },
checkable: true, checkable: true,
loading: false, loading: false,
@ -51,9 +51,8 @@ export default function useTableProps<T>(
columnResizable: true, columnResizable: true,
// 禁用 arco-table 的分页 // 禁用 arco-table 的分页
pagination: false, pagination: false,
// 简易分页模式
pageSimple: false, pageSimple: false,
// 编辑的key
editKey: SpecialColumnEnum.NAME,
// 表格的错误状态 // 表格的错误状态
tableErrorStatus: false, tableErrorStatus: false,
debug: false, debug: false,

View File

@ -17,6 +17,7 @@ export enum TableKeyEnum {
PROJECT_MEMBER = 'projectMember', PROJECT_MEMBER = 'projectMember',
ORGANIZATION_MEMBER = 'organizationMember', ORGANIZATION_MEMBER = 'organizationMember',
ORGANIZATION_PROJECT = 'organizationProject', ORGANIZATION_PROJECT = 'organizationProject',
ORGANIZATION_PROJECT_USER_DRAWER = 'organizationProjectUserDrawer',
FILE_MANAGEMENT_FILE = 'fileManagementFile', FILE_MANAGEMENT_FILE = 'fileManagementFile',
} }

View File

@ -71,7 +71,7 @@ const ProjectManagement: AppRouteRecordRaw = {
{ {
path: 'projectUserGroup', path: 'projectUserGroup',
name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_PERMISSION_USER_GROUP, name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_PERMISSION_USER_GROUP,
component: () => import('@/views/project-management/projectAndPermission/userGroup/index.vue'), component: () => import('@/views/project-management/projectAndPermission/userGroup/projectUserGroup.vue'),
meta: { meta: {
locale: 'project.permission.userGroup', locale: 'project.permission.userGroup',
roles: ['*'], roles: ['*'],

View File

@ -1,11 +1,12 @@
<template> <template>
<MsDrawer <a-drawer
:mask="false"
:width="680" :width="680"
:visible="currentVisible" :visible="currentVisible"
unmount-on-close unmount-on-close
:footer="false" :footer="false"
:title="t('system.organization.addMember')" :title="t('system.organization.addMember')"
:mask="false"
class="ms-drawer-no-mask"
@cancel="handleCancel" @cancel="handleCancel"
> >
<div> <div>
@ -38,7 +39,7 @@
</template> </template>
</ms-base-table> </ms-base-table>
</div> </div>
</MsDrawer> </a-drawer>
<AddUserModal <AddUserModal
:project-id="props.projectId" :project-id="props.projectId"
:organization-id="props.organizationId" :organization-id="props.organizationId"
@ -53,7 +54,6 @@
import useTable from '@/components/pure/ms-table/useTable'; import useTable from '@/components/pure/ms-table/useTable';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';
import { watch, ref } from 'vue'; import { watch, ref } from 'vue';
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue'; import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import AddUserModal from './addUserModal.vue'; import AddUserModal from './addUserModal.vue';
import { TableData, Message } from '@arco-design/web-vue'; import { TableData, Message } from '@arco-design/web-vue';
@ -99,11 +99,10 @@
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectMemberByProjectId, { const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectMemberByProjectId, {
columns: projectColumn, columns: projectColumn,
showSetting: false, scroll: { maxHeight: '700px', y: '650px' },
scroll: { y: 'auto', x: '600px' },
selectable: false, selectable: false,
size: 'small',
noDisable: false, noDisable: false,
pageSimple: true,
}); });
async function searchUser() { async function searchUser() {
@ -157,3 +156,10 @@
} }
); );
</script> </script>
<style lang="less" scoped>
:deep(.custom-height) {
height: 100vh !important;
border: 1px solid red;
}
</style>

View File

@ -1,9 +1,10 @@
<template> <template>
<MsDrawer <a-drawer
:mask="false" :mask="false"
:width="680" :width="680"
:visible="currentVisible" :visible="currentVisible"
unmount-on-close unmount-on-close
class="ms-drawer-no-mask"
:footer="false" :footer="false"
:title="t('system.organization.projectName', { name: props.currentName })" :title="t('system.organization.projectName', { name: props.currentName })"
@cancel="handleCancel" @cancel="handleCancel"
@ -21,7 +22,7 @@
</div> </div>
<ms-base-table v-bind="propsRes" v-on="propsEvent" /> <ms-base-table v-bind="propsRes" v-on="propsEvent" />
</div> </div>
</MsDrawer> </a-drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -30,7 +31,6 @@
import useTable from '@/components/pure/ms-table/useTable'; import useTable from '@/components/pure/ms-table/useTable';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';
import { watch, ref } from 'vue'; import { watch, ref } from 'vue';
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue'; import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
export interface projectDrawerProps { export interface projectDrawerProps {
@ -72,10 +72,10 @@
const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectTableByOrgId, { const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectTableByOrgId, {
columns: projectColumn, columns: projectColumn,
showSetting: false, scroll: { maxHeight: '700px', y: '650px' },
scroll: { y: 'auto', x: '600px' },
selectable: false, selectable: false,
noDisable: false, noDisable: false,
pageSimple: true,
}); });
async function searchUser() { async function searchUser() {

View File

@ -1,10 +1,11 @@
<template> <template>
<MsDrawer <a-drawer
:mask="false" :mask="false"
:width="680" :width="680"
:visible="currentVisible" :visible="currentVisible"
unmount-on-close unmount-on-close
:footer="false" :footer="false"
class="ms-drawer-no-mask"
:title="t('system.organization.addMember')" :title="t('system.organization.addMember')"
@cancel="handleCancel" @cancel="handleCancel"
> >
@ -38,7 +39,7 @@
</template> </template>
</ms-base-table> </ms-base-table>
</div> </div>
</MsDrawer> </a-drawer>
<AddUserModal <AddUserModal
:project-id="props.projectId" :project-id="props.projectId"
:organization-id="props.organizationId" :organization-id="props.organizationId"
@ -57,7 +58,6 @@
import useTable from '@/components/pure/ms-table/useTable'; import useTable from '@/components/pure/ms-table/useTable';
import { useI18n } from '@/hooks/useI18n'; import { useI18n } from '@/hooks/useI18n';
import { watch, ref } from 'vue'; import { watch, ref } from 'vue';
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
import MsBaseTable from '@/components/pure/ms-table/base-table.vue'; import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
import AddUserModal from './addUserModal.vue'; import AddUserModal from './addUserModal.vue';
import { TableData, Message } from '@arco-design/web-vue'; import { TableData, Message } from '@arco-design/web-vue';
@ -106,11 +106,10 @@
postUserTableByOrgIdOrProjectId, postUserTableByOrgIdOrProjectId,
{ {
columns: projectColumn, columns: projectColumn,
showSetting: false, scroll: { maxHeight: '700px', y: '650px' },
scroll: { y: 'auto', x: '600px' },
selectable: false, selectable: false,
size: 'small',
noDisable: false, noDisable: false,
pageSimple: true,
}, },
(record: any) => ({ (record: any) => ({
...record, ...record,