Skip to content

Commit

Permalink
fix: 调整布局
Browse files Browse the repository at this point in the history
  • Loading branch information
bailongsen committed Nov 15, 2023
1 parent 56b7b5c commit 8db1ae8
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 88 deletions.
18 changes: 8 additions & 10 deletions scaleph-ui-react/src/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,16 +72,14 @@ export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) =
}
}
},
// menuItemRender: (props, dom) => {
// return (
// <div>
// <Space align="end" size={5}>
// <Icon icon={props.icon} />
// <span>{props.name}</span>
// </Space>
// </div>
// );
// },
subMenuItemRender: (menuItemProps: any, defaultDom: any) => {
return (
<Space align="end" size={5}>
{menuItemProps.icon && <Icon icon={menuItemProps.icon} />}
<span>{menuItemProps?.name}</span>
</Space>
);
},
menuItemRender: (menuItemProps: any, defaultDom: any) => {
return (
<Space align="end" size={5}>
Expand Down
1 change: 1 addition & 0 deletions scaleph-ui-react/src/components/Footer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const Footer: React.FC = () => {
<DefaultFooter
style={{
background: 'none',
height: '30px', //添加布局底部高度
}}
links={[
{
Expand Down
4 changes: 4 additions & 0 deletions scaleph-ui-react/src/global.less
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,7 @@ ol {
width: 100%;
}
}
//调整布局底部高度
.ant-pro-global-footer{
margin-block-start:auto
}
168 changes: 91 additions & 77 deletions scaleph-ui-react/src/pages/Admin/Resource/Web/index.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import {useAccess, useIntl} from "umi";
import React, {useRef, useState} from "react";
import {Button, message, Modal, Space, Tag, Tooltip} from "antd";
import {DeleteOutlined, EditOutlined, PlusOutlined} from "@ant-design/icons";
import {ActionType, ProColumns, ProFormInstance, ProTable} from "@ant-design/pro-components";
import {isEmpty} from "lodash";
import {PRIVILEGE_CODE} from "@/constant";
import {SecResourceWeb} from "@/services/admin/typings";
import {PrivilegeService} from "@/services/admin/privilege.service";
import WebResourceForm from "@/pages/Admin/Resource/Web/components/WebResourceForm";
import {ResourceWebService} from "@/services/admin/resourceWeb.service";
import { PRIVILEGE_CODE } from '@/constant';
import WebResourceForm from '@/pages/Admin/Resource/Web/components/WebResourceForm';
import { PrivilegeService } from '@/services/admin/privilege.service';
import { ResourceWebService } from '@/services/admin/resourceWeb.service';
import { SecResourceWeb } from '@/services/admin/typings';
import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProFormInstance, ProTable } from '@ant-design/pro-components';
import { Button, message, Modal, Space, Tag, Tooltip } from 'antd';
import { isEmpty } from 'lodash';
import React, { useRef, useState } from 'react';
import { useAccess, useIntl } from 'umi';

const WebResourceWeb: React.FC = () => {
const intl = useIntl();
Expand All @@ -20,73 +20,75 @@ const WebResourceWeb: React.FC = () => {
visiable: boolean;
parent: SecResourceWeb;
data: SecResourceWeb;
}>({visiable: false, parent: {}, data: {}});
}>({ visiable: false, parent: {}, data: {} });

const onExpand = (expanded: boolean, record: SecResourceWeb) => {
if (expanded && record.children && isEmpty(record.children)) {
PrivilegeService.listByPid(record.id).then((response) => {
record.children = response.data
})
record.children = response.data;
});
}
}
};

const tableColumns: ProColumns<SecResourceWeb>[] = [
{
title: intl.formatMessage({id: 'pages.admin.resource.type'}),
title: intl.formatMessage({ id: 'pages.admin.resource.type' }),
dataIndex: 'type',
width: 120,
render: (dom, entity) => {
return (<Tag>{entity.type?.label}</Tag>)
return <Tag>{entity.type?.label}</Tag>;
},
hideInSearch: true
fixed: 'left',
hideInSearch: true,
},
{
title: intl.formatMessage({id: 'pages.admin.resource.web.name'}),
dataIndex: 'name'
title: intl.formatMessage({ id: 'pages.admin.resource.web.name' }),
dataIndex: 'name',
},
{
title: intl.formatMessage({id: 'pages.admin.resource.web.path'}),
title: intl.formatMessage({ id: 'pages.admin.resource.web.path' }),
dataIndex: 'path',
hideInSearch: true
hideInSearch: true,
},
{
title: intl.formatMessage({id: 'pages.admin.resource.web.redirect'}),
title: intl.formatMessage({ id: 'pages.admin.resource.web.redirect' }),
dataIndex: 'redirect',
hideInSearch: true
},
{
title: intl.formatMessage({id: 'pages.admin.resource.web.layout'}),
dataIndex: 'layout',
hideInSearch: true
hideInSearch: true,
},
// {
// title: intl.formatMessage({id: 'pages.admin.resource.web.layout'}),
// dataIndex: 'layout',
// hideInSearch: true
// },
{
title: intl.formatMessage({id: 'pages.admin.resource.web.icon'}),
title: intl.formatMessage({ id: 'pages.admin.resource.web.icon' }),
dataIndex: 'icon',
hideInSearch: true
hideInSearch: true,
},
{
title: intl.formatMessage({id: 'pages.admin.resource.web.component'}),
title: intl.formatMessage({ id: 'pages.admin.resource.web.component' }),
dataIndex: 'component',
hideInSearch: true
},
{
title: intl.formatMessage({id: 'app.common.data.remark'}),
dataIndex: 'remark',
hideInSearch: true
},
{
title: intl.formatMessage({id: 'app.common.data.createTime'}),
dataIndex: 'createTime',
hideInSearch: true,
width: 180,
},
{
title: intl.formatMessage({id: 'app.common.data.updateTime'}),
dataIndex: 'updateTime',
title: intl.formatMessage({ id: 'app.common.data.remark' }),
dataIndex: 'remark',
hideInSearch: true,
width: 180,
},
// {
// title: intl.formatMessage({id: 'app.common.data.createTime'}),
// dataIndex: 'createTime',
// hideInSearch: true,
// width: 180,
// },
// {
// title: intl.formatMessage({id: 'app.common.data.updateTime'}),
// dataIndex: 'updateTime',
// hideInSearch: true,
// width: 180,
// },
{
title: intl.formatMessage({id: 'app.common.operate.label'}),
title: intl.formatMessage({ id: 'app.common.operate.label' }),
dataIndex: 'actions',
align: 'center',
width: 120,
Expand All @@ -96,42 +98,50 @@ const WebResourceWeb: React.FC = () => {
<>
<Space>
{access.canAccess(PRIVILEGE_CODE.datadevProjectEdit) && (
<Tooltip title={intl.formatMessage({id: 'app.common.operate.new.label'})}>
<Tooltip title={intl.formatMessage({ id: 'app.common.operate.new.label' })}>
<Button
shape="default"
type="link"
icon={<PlusOutlined/>}
onClick={() => setWebResourceFormData({visiable: true, parent: record, data: {}})}
icon={<PlusOutlined />}
onClick={() =>
setWebResourceFormData({ visiable: true, parent: record, data: {} })
}
/>
</Tooltip>
)}
{access.canAccess(PRIVILEGE_CODE.datadevProjectEdit) && (
<Tooltip title={intl.formatMessage({id: 'app.common.operate.edit.label'})}>
<Tooltip title={intl.formatMessage({ id: 'app.common.operate.edit.label' })}>
<Button
shape="default"
type="link"
icon={<EditOutlined/>}
onClick={() => setWebResourceFormData({visiable: true, parent: {}, data: record})}
icon={<EditOutlined />}
onClick={() =>
setWebResourceFormData({ visiable: true, parent: {}, data: record })
}
></Button>
</Tooltip>
)}
{access.canAccess(PRIVILEGE_CODE.datadevResourceDelete) && (
<Tooltip title={intl.formatMessage({id: 'app.common.operate.delete.label'})}>
<Tooltip title={intl.formatMessage({ id: 'app.common.operate.delete.label' })}>
<Button
shape="default"
type="link"
icon={<DeleteOutlined/>}
icon={<DeleteOutlined />}
onClick={() => {
Modal.confirm({
title: intl.formatMessage({id: 'app.common.operate.delete.confirm.title'}),
content: intl.formatMessage({id: 'app.common.operate.delete.confirm.content'}),
okText: intl.formatMessage({id: 'app.common.operate.confirm.label'}),
okButtonProps: {danger: true},
cancelText: intl.formatMessage({id: 'app.common.operate.cancel.label'}),
title: intl.formatMessage({ id: 'app.common.operate.delete.confirm.title' }),
content: intl.formatMessage({
id: 'app.common.operate.delete.confirm.content',
}),
okText: intl.formatMessage({ id: 'app.common.operate.confirm.label' }),
okButtonProps: { danger: true },
cancelText: intl.formatMessage({ id: 'app.common.operate.cancel.label' }),
onOk() {
ResourceWebService.deleteOne(record).then((d) => {
if (d.success) {
message.success(intl.formatMessage({id: 'app.common.operate.delete.success'}));
message.success(
intl.formatMessage({ id: 'app.common.operate.delete.success' }),
);
actionRef.current?.reload();
}
});
Expand All @@ -152,25 +162,25 @@ const WebResourceWeb: React.FC = () => {
<ProTable<SecResourceWeb>
search={{
labelWidth: 'auto',
span: {xs: 24, sm: 12, md: 8, lg: 6, xl: 6, xxl: 4},
span: { xs: 24, sm: 12, md: 8, lg: 6, xl: 6, xxl: 4 },
}}
rowKey="id"
actionRef={actionRef}
formRef={formRef}
options={false}
columns={tableColumns}
request={(params, sorter, filter) => {
return ResourceWebService.listByPage({...params, pid: 0})
return ResourceWebService.listByPage({ ...params, pid: 0 });
}}
toolbar={{
actions: [
access.canAccess(PRIVILEGE_CODE.datadevResourceAdd) && (
<Button
key="new"
type="primary"
onClick={() => setWebResourceFormData({visiable: true, parent: null, data: {}})}
onClick={() => setWebResourceFormData({ visiable: true, parent: null, data: {} })}
>
{intl.formatMessage({id: 'app.common.operate.new.label'})}
{intl.formatMessage({ id: 'app.common.operate.new.label' })}
</Button>
),
access.canAccess(PRIVILEGE_CODE.datadevResourceDelete) && (
Expand All @@ -180,41 +190,46 @@ const WebResourceWeb: React.FC = () => {
disabled={selectedRows.length < 1}
onClick={() => {
Modal.confirm({
title: intl.formatMessage({id: 'app.common.operate.delete.confirm.title'}),
content: intl.formatMessage({id: 'app.common.operate.delete.confirm.content'}),
okText: intl.formatMessage({id: 'app.common.operate.confirm.label'}),
okButtonProps: {danger: true},
cancelText: intl.formatMessage({id: 'app.common.operate.cancel.label'}),
title: intl.formatMessage({ id: 'app.common.operate.delete.confirm.title' }),
content: intl.formatMessage({
id: 'app.common.operate.delete.confirm.content',
}),
okText: intl.formatMessage({ id: 'app.common.operate.confirm.label' }),
okButtonProps: { danger: true },
cancelText: intl.formatMessage({ id: 'app.common.operate.cancel.label' }),
onOk() {
ResourceWebService.deleteBatch(selectedRows).then((d) => {
if (d.success) {
message.success(intl.formatMessage({id: 'app.common.operate.delete.success'}));
message.success(
intl.formatMessage({ id: 'app.common.operate.delete.success' }),
);
actionRef.current?.reload();
}
});
},
});
}}
>
{intl.formatMessage({id: 'app.common.operate.delete.label'})}
{intl.formatMessage({ id: 'app.common.operate.delete.label' })}
</Button>
),
],
}}
pagination={{showQuickJumper: true, showSizeChanger: true, defaultPageSize: 10}}
pagination={{ showQuickJumper: true, showSizeChanger: true, defaultPageSize: 10 }}
rowSelection={{
fixed: true,
onChange: (selectedRowKeys, selectedRows, info) => setSelectedRows(selectedRows),
}}
tableAlertRender={false}
tableAlertOptionRender={false}
scroll={{ x: 1500, y: 'calc( 100vh - 385px )' }}
/>
{webResourceFormData.visiable && (
<WebResourceForm
visible={webResourceFormData.visiable}
onCancel={() => setWebResourceFormData({visiable: false, parent: {}, data: {}})}
onCancel={() => setWebResourceFormData({ visiable: false, parent: {}, data: {} })}
onVisibleChange={(visiable) => {
setWebResourceFormData({visiable: visiable, parent: {}, data: {}});
setWebResourceFormData({ visiable: visiable, parent: {}, data: {} });
actionRef.current?.reload();
}}
parent={webResourceFormData.parent}
Expand All @@ -223,7 +238,6 @@ const WebResourceWeb: React.FC = () => {
)}
</div>
);

}
};

export default WebResourceWeb;
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.split-horizontal {
height: calc(100vh - 175px);
height: calc(100vh - 110px);
// overflow-x: hidden;
// overflow-y: auto;
}
Expand Down

0 comments on commit 8db1ae8

Please sign in to comment.