feat(系统设置): 调整表格高度去除滚动条
This commit is contained in:
parent
8210674cc3
commit
7864d555f9
|
@ -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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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: ['*'],
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue