Yaxin
/
General-AI-Platform-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 字体、弹框样式、列表样式、进行调整优化

Browse Source
develop
JINGYJ 1 year ago
parent af32293ebe
commit b622351545
23 changed files with 736 additions and 343 deletions
Show Stats Download Patch File Download Diff File

8
src/components/IconSelector/icon.ts
Unescape Escape View File

@ -1,10 +1,10 @@
import React from 'react' import React from 'react'
import * as icons from '@ant-design/icons' import * as icons from '@ant-design/icons'
// 自定义样式style
const Icon = (props: { icon: string}) => { const Icon = (props: { icon: string, style?: object}) => {
const { icon } = props; const { icon, style } = props;
const antIcon: { [key: string]: any } = icons; const antIcon: { [key: string]: any } = icons;
return React.createElement(antIcon[icon]); return React.createElement(antIcon[icon], { style });
}; };

16
src/locales/zh-CN/system.ts
Unescape Escape View File

@ -4,6 +4,8 @@ export const interface_api: { [key: string]: string } = {
'system.interface.table.list.value': '权限值', 'system.interface.table.list.value': '权限值',
'system.interface.table.list.method': '请求方式', 'system.interface.table.list.method': '请求方式',
'system.interface.table.list.url': '接口地址', 'system.interface.table.list.url': '接口地址',
'system.interface.table.list.add': '新建接口',
'system.interface.table.list.update': '更新接口',
'system.interface.table.rule.required.name': '权限名称为必填项', 'system.interface.table.rule.required.name': '权限名称为必填项',
'system.interface.table.rule.required.value': '权限值为必填项', 'system.interface.table.rule.required.value': '权限值为必填项',
'system.interface.table.rule.required.method': '请求方式为必填项', 'system.interface.table.rule.required.method': '请求方式为必填项',
@ -32,6 +34,9 @@ export const dynamic_menu: { [key: string]: string } = {
'system.menu.table.list.hidden': '是否隐藏', 'system.menu.table.list.hidden': '是否隐藏',
'system.menu.table.list.remark': '备注', 'system.menu.table.list.remark': '备注',
'system.menu.table.list.externalLink': '外链地址', 'system.menu.table.list.externalLink': '外链地址',
'system.menu.table.list.add': '添加根菜单',
'system.menu.table.list.create_son_menu': '添加子菜单',
'system.menu.table.list.update': '更新菜单',
'system.menu.table.rule.required.name': '菜单名称为必填项', 'system.menu.table.rule.required.name': '菜单名称为必填项',
'system.menu.table.rule.required.value': '菜单值为必填项', 'system.menu.table.rule.required.value': '菜单值为必填项',
@ -66,6 +71,9 @@ export const role: { [key: string]: string } = {
'system.role.table.list.api_permission': 'api权限', 'system.role.table.list.api_permission': 'api权限',
'system.role.table.list.menu_permission': '菜单权限', 'system.role.table.list.menu_permission': '菜单权限',
'system.role.table.list.resource_permission': '资源权限', 'system.role.table.list.resource_permission': '资源权限',
'system.role.table.list.create': '新建角色',
'system.role.table.list.set_permission': '设置权限',
'system.role.table.list.update': '更新角色',
'system.role.table.rule.required.name': '角色名称为必填项', 'system.role.table.rule.required.name': '角色名称为必填项',
'system.role.table.rule.required.code': '角色代码为必填项', 'system.role.table.rule.required.code': '角色代码为必填项',
} }
@ -86,6 +94,8 @@ export const user: { [key: string]: string } = {
'system.user.table.list.deptId': '部门', 'system.user.table.list.deptId': '部门',
'system.user.table.list.enable': '是否启用', 'system.user.table.list.enable': '是否启用',
'system.user.table.list.remark': '备注', 'system.user.table.list.remark': '备注',
'system.user.table.list.create': '新建用户',
'system.user.table.list.update': '更新用户',
'system.user.table.rule.required.userName': '用户名为必填项', 'system.user.table.rule.required.userName': '用户名为必填项',
'system.user.table.rule.required.nickName': '昵称为必填项', 'system.user.table.rule.required.nickName': '昵称为必填项',
'system.user.table.rule.required.password': '密码为必填项', 'system.user.table.rule.required.password': '密码为必填项',
@ -99,6 +109,8 @@ export const post: { [key: string]: string } = {
'system.post.table.list.sort': '排序', 'system.post.table.list.sort': '排序',
'system.post.table.list.status': '状态', 'system.post.table.list.status': '状态',
'system.post.table.list.remark': '备注', 'system.post.table.list.remark': '备注',
'system.post.table.list.create': '新建岗位',
'system.post.table.list.update': '更新岗位',
'system.post.table.rule.required.name': '岗位名称为必填项', 'system.post.table.rule.required.name': '岗位名称为必填项',
'system.post.table.rule.required.code': '岗位代码为必填项', 'system.post.table.rule.required.code': '岗位代码为必填项',
} }
@ -113,6 +125,9 @@ export const department: { [key: string]: string } = {
'system.department.table.list.sort': '排序', 'system.department.table.list.sort': '排序',
'system.department.table.list.status': '状态', 'system.department.table.list.status': '状态',
'system.department.table.list.remark': '备注', 'system.department.table.list.remark': '备注',
'system.department.table.list.create': '添加根部门',
'system.department.table.list.create_son_department': '添加子部门',
'system.department.table.list.update': '更新部门',
'system.department.table.rule.required.name': '部门名称为必填项', 'system.department.table.rule.required.name': '部门名称为必填项',
'system.department.table.rule.required.code': '部门代码为必填项', 'system.department.table.rule.required.code': '部门代码为必填项',
} }
@ -130,6 +145,7 @@ export const operation_record: { [key: string]: string } = {
'system.operation.table.list.user_id': '用户ID', 'system.operation.table.list.user_id': '用户ID',
'system.operation.table.list.sort': '排序', 'system.operation.table.list.sort': '排序',
'system.operation.table.list.remark': '备注', 'system.operation.table.list.remark': '备注',
'system.operation.table.list.create': '新建操作日志',
'system.operation.table.list.createTime': '创建时间', 'system.operation.table.list.createTime': '创建时间',
'system.operation.table.list.updateTime': '更新时间', 'system.operation.table.list.updateTime': '更新时间',

2
src/pages/System/ApiList/components/CreateForm.tsx
Unescape Escape View File

@ -23,7 +23,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
<ModalForm<API.Api> <ModalForm<API.Api>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.create.title', id: 'system.interface.table.list.add',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.createModalOpen} open={props.createModalOpen}

2
src/pages/System/ApiList/components/UpdateForm.tsx
Unescape Escape View File

@ -23,7 +23,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
<ModalForm<API.Api> <ModalForm<API.Api>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.update.title', id: 'system.interface.table.list.update',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.updateModalOpen} open={props.updateModalOpen}

129
src/pages/System/ApiList/index.tsx
Unescape Escape View File

@ -6,12 +6,17 @@ import {
ProTable, ProTable,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import {FormattedMessage, useIntl, useAccess, Access, history} from '@umijs/max'; import {FormattedMessage, useIntl, useAccess, Access, history} from '@umijs/max';
import {Button, Popconfirm, message} from 'antd'; import {Button, message} from 'antd';
import React, {useRef, useState} from 'react'; import React, {useRef, useState} from 'react';
import UpdateForm from './components/UpdateForm'; import UpdateForm from './components/UpdateForm';
import CreateForm from "./components/CreateForm"; import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer"; import {ColumnDrawer} from "./components/ColumnDrawer";
import {postApiGetApiList, deleteApiDeleteApi, deleteApiDeleteApisByIds} from "@/services/system/Api"; import {postApiGetApiList, deleteApiDeleteApi, deleteApiDeleteApisByIds} from "@/services/system/Api";
// 列表操作栏组件
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
// 批量删除
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
const ApiList: React.FC = () => { const ApiList: React.FC = () => {
/** /**
@ -76,11 +81,11 @@ const ApiList: React.FC = () => {
defaultMessage="id"/>), defaultMessage="id"/>),
dataIndex: "id", dataIndex: "id",
sorter: true, sorter: true,
valueType: "digit",
filters: true, onFilter: true, filters: true, onFilter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
<a <a
style={{color: '#155BD4'}}
onClick={() => { onClick={() => {
setCurrentRow(entity); setCurrentRow(entity);
setShowDetail(true); setShowDetail(true);
@ -142,45 +147,65 @@ const ApiList: React.FC = () => {
valueType: 'option', valueType: 'option',
fixed: 'right', fixed: 'right',
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <TableActionCard
<a key="TableActionCardRef"
key="update" renderActions={[
onClick={() => { {
setUpdateModalOpen(true); key: 'update',
setCurrentRow(record); renderDom: (
}} <Button
> key="update"
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/> type="link"
</a> size="small"
<Popconfirm onClick={() => {
placement="topLeft" setUpdateModalOpen(true);
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })} setCurrentRow(record);
description={intl.formatMessage({ }}
id: 'common.modal.table.delete.content', >
defaultMessage: '$$$', <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
})} </Button>
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} ),
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} },
onConfirm={() => { {
handleDestroy(record).then(() => {}); key: 'destroy',
}} renderDom: (
> <IsDelete
<Button key="destroy" type="link" size="small" danger> deleteApi={() => {
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> handleDestroy(record).then(() => {});
</Button> }}
</Popconfirm> ></IsDelete>
{/* <a ),
key="destroy" },
onClick={() => { ]}
handleDestroy(record).then(() => { ></TableActionCard>
}) // <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
}}> // <a
<FormattedMessage // key="update"
id="pages.searchTable.destroy" // onClick={() => {
defaultMessage="Destroy" // setUpdateModalOpen(true);
/> // setCurrentRow(record);
</a> */} // }}
</Access> // >
// <FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/>
// </a>
// <Popconfirm
// placement="topLeft"
// title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
// description={intl.formatMessage({
// id: 'common.modal.table.delete.content',
// defaultMessage: '$$$',
// })}
// okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
// cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
// onConfirm={() => {
// handleDestroy(record).then(() => {});
// }}
// >
// <Button key="destroy" type="link" size="small" danger>
// <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
// </Button>
// </Popconfirm>
// </Access>
], ],
},]; },];
return ( return (
@ -246,8 +271,26 @@ const ApiList: React.FC = () => {
setSelectedRows(selectedRows); setSelectedRows(selectedRows);
}, },
}} }}
tableAlertOptionRender={() => {
return (
<>
{selectedRowsState?.length > 0 && (
<IsBatchDelete
deleteApi={() => {
const ids = selectedRowsState.map((v: API.Api) => {
return v.id
})
deleteApiDeleteApisByIds({ids: ids as number[]}).then(() => {
actionRef.current?.reloadAndRest?.();
})
}}
/>
)}
</>
);
}}
/> />
{selectedRowsState?.length > 0 && ( {/* {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar
extra={ extra={
<div> <div>
@ -273,7 +316,7 @@ const ApiList: React.FC = () => {
/> />
</Button> </Button>
</FooterToolbar> </FooterToolbar>
)} )} */}
<CreateForm <CreateForm
createModalOpen={createModalOpen} createModalOpen={createModalOpen}
values={currentRow || {}} values={currentRow || {}}

11
src/pages/System/DepartmentList/components/CreateForm.tsx
Unescape Escape View File

@ -46,7 +46,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
<ModalForm<API.Department> <ModalForm<API.Department>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.create.title', id: props.values.id ? 'system.department.table.list.create_son_department': 'system.department.table.list.create',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.createModalOpen} open={props.createModalOpen}
@ -79,6 +79,11 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
label={<FormattedMessage id="system.department.table.list.parentId" defaultMessage="$$$"/>} label={<FormattedMessage id="system.department.table.list.parentId" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.parentId', defaultMessage: '$$$'})}`} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.parentId', defaultMessage: '$$$'})}`}
/> />
<ProFormDigit width={proFormItemStyleProps.column2Width} fieldProps={{precision: 0}} name="sort"
label={<FormattedMessage id="system.department.table.list.sort" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.sort', defaultMessage: '$$$'})}`}
initialValue={1}
/>
</ProForm.Group> </ProForm.Group>
<ProForm.Group> <ProForm.Group>
<ProFormText width={proFormItemStyleProps.column2Width} name="name" <ProFormText width={proFormItemStyleProps.column2Width} name="name"
@ -102,14 +107,14 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.code', defaultMessage: '$$$'})}`} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.code', defaultMessage: '$$$'})}`}
/> />
</ProForm.Group> </ProForm.Group>
<ProForm.Group> {/* <ProForm.Group>
<ProFormDigit width={proFormItemStyleProps.column2Width} fieldProps={{precision: 0}} name="sort" <ProFormDigit width={proFormItemStyleProps.column2Width} fieldProps={{precision: 0}} name="sort"
label={<FormattedMessage id="system.department.table.list.sort" defaultMessage="$$$"/>} label={<FormattedMessage id="system.department.table.list.sort" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.sort', defaultMessage: '$$$'})}`} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.department.table.list.sort', defaultMessage: '$$$'})}`}
initialValue={1} initialValue={1}
/> />
</ProForm.Group> </ProForm.Group> */}
<ProForm.Group> <ProForm.Group>
<ProFormText width={proFormItemStyleProps.column2Width} name="phone" <ProFormText width={proFormItemStyleProps.column2Width} name="phone"
label={<FormattedMessage id="system.department.table.list.phone" defaultMessage="$$$"/>} label={<FormattedMessage id="system.department.table.list.phone" defaultMessage="$$$"/>}

2
src/pages/System/DepartmentList/components/UpdateForm.tsx
Unescape Escape View File

@ -34,7 +34,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
<ModalForm<API.Department> <ModalForm<API.Department>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.create.title', id: 'system.department.table.list.update',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.updateModalOpen} open={props.updateModalOpen}

155
src/pages/System/DepartmentList/index.tsx
Unescape Escape View File

@ -12,6 +12,12 @@ import React, { useRef, useState } from 'react';
import UpdateForm from '@/pages/System/DepartmentList/components/UpdateForm' import UpdateForm from '@/pages/System/DepartmentList/components/UpdateForm'
import CreateForm from '@/pages/System/DepartmentList/components/CreateForm' import CreateForm from '@/pages/System/DepartmentList/components/CreateForm'
import {ColumnDrawer} from '@/pages/System/DepartmentList/components/ColumnDrawer' import {ColumnDrawer} from '@/pages/System/DepartmentList/components/ColumnDrawer'
// 列表操作栏组件
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
// 批量删除
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
const DepartmentList: React.FC = () => { const DepartmentList: React.FC = () => {
/** /**
* @en-US Pop-up window of new window * @en-US Pop-up window of new window
@ -77,6 +83,7 @@ const DepartmentList: React.FC = () => {
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
<a <a
style={{color: '#155BD4'}}
onClick={() => { onClick={() => {
setCurrentRow(entity); setCurrentRow(entity);
setShowDetail(true); setShowDetail(true);
@ -201,53 +208,90 @@ const DepartmentList: React.FC = () => {
valueType: 'option', valueType: 'option',
fixed:'right', fixed:'right',
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <TableActionCard
<a key="TableActionCardRef"
key="create" renderActions={[
onClick={() => { {
setCreateModalOpen(true); key: 'create',
setCurrentRow(record); renderDom: (
}} <Button
> key="create"
<FormattedMessage id="pages.searchTable.create_son_department" defaultMessage="Create" /> type="link"
</a> size="small"
<a onClick={() => {
key="update" setCreateModalOpen(true);
onClick={() => { setCurrentRow(record);
setUpdateModalOpen(true); }}
setCurrentRow(record); >
}} <FormattedMessage id="pages.searchTable.create_son_department" defaultMessage="Create" />
> </Button>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> ),
</a> },
<Popconfirm {
placement="topLeft" key: 'update',
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })} renderDom: (
description={intl.formatMessage({ <Button
id: 'common.modal.table.delete.content', key="update"
defaultMessage: '$$$', type="link"
})} size="small"
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} onClick={() => {
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} setUpdateModalOpen(true);
onConfirm={() => { setCurrentRow(record);
handleDestroy(record).then(() => {}); }}
}} >
> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
<Button key="destroy" type="link" size="small" danger> </Button>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> ),
</Button> },
</Popconfirm> {
{/* <a key: 'destroy',
key="destroy" renderDom: (
onClick={() => { <IsDelete
handleDestroy(record).then(()=>{}) deleteApi={() => {
}}> handleDestroy(record).then(() => {});
<FormattedMessage }}
id="pages.searchTable.destroy" ></IsDelete>
defaultMessage="Destroy" ),
/> },
</a> */} ]}
</Access> ></TableActionCard>
// <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
// <a
// key="create"
// onClick={() => {
// setCreateModalOpen(true);
// setCurrentRow(record);
// }}
// >
// <FormattedMessage id="pages.searchTable.create_son_department" defaultMessage="Create" />
// </a>
// <a
// key="update"
// onClick={() => {
// setUpdateModalOpen(true);
// setCurrentRow(record);
// }}
// >
// <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
// </a>
// <Popconfirm
// placement="topLeft"
// title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
// description={intl.formatMessage({
// id: 'common.modal.table.delete.content',
// defaultMessage: '$$$',
// })}
// okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
// cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
// onConfirm={() => {
// handleDestroy(record).then(() => {});
// }}
// >
// <Button key="destroy" type="link" size="small" danger>
// <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
// </Button>
// </Popconfirm>
// </Access>
], ],
},]; },];
return ( return (
@ -313,8 +357,21 @@ const DepartmentList: React.FC = () => {
setSelectedRows(selectedRows); setSelectedRows(selectedRows);
}, },
}} }}
tableAlertOptionRender={() => {
return (
<>
{selectedRowsState?.length > 0 && (
<IsBatchDelete
deleteApi={() => {
actionRef.current?.reloadAndRest?.();
}}
/>
)}
</>
);
}}
/> />
{selectedRowsState?.length > 0 && ( {/* {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar
extra={ extra={
<div> <div>
@ -335,7 +392,7 @@ const DepartmentList: React.FC = () => {
/> />
</Button> </Button>
</FooterToolbar> </FooterToolbar>
)} )} */}
<CreateForm <CreateForm
createModalOpen={createModalOpen} createModalOpen={createModalOpen}
values={currentRow || {}} values={currentRow || {}}

3
src/pages/System/MenuList/component/CreateForm.tsx
Unescape Escape View File

@ -44,12 +44,13 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
setParentId(0) setParentId(0)
} }
}, [props.createModalOpen]) }, [props.createModalOpen])
console.log(props);
return ( return (
<ModalForm<API.Menu> <ModalForm<API.Menu>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.create.title', id: props.values.id ? 'system.menu.table.list.create_son_menu': 'system.menu.table.list.add',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.createModalOpen} open={props.createModalOpen}

2
src/pages/System/MenuList/component/UpdateForm.tsx
Unescape Escape View File

@ -41,7 +41,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
<ModalForm<API.Menu> <ModalForm<API.Menu>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.create.title', id: 'system.menu.table.list.update',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.updateModalOpen} open={props.updateModalOpen}

170
src/pages/System/MenuList/index.tsx
Unescape Escape View File

@ -12,6 +12,9 @@ import React, { useRef, useState } from 'react';
import UpdateForm from './component/UpdateForm' import UpdateForm from './component/UpdateForm'
import CreateForm from './component/CreateForm' import CreateForm from './component/CreateForm'
import ColumnDrawer from './component/ColumnDrawer' import ColumnDrawer from './component/ColumnDrawer'
// 列表操作栏组件
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
import Icon from '@/components/IconSelector/icon' import Icon from '@/components/IconSelector/icon'
const MenuList: React.FC = () => { const MenuList: React.FC = () => {
/** /**
@ -75,6 +78,7 @@ const MenuList: React.FC = () => {
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
<a <a
style={{color: '#155BD4'}}
onClick={() => { onClick={() => {
setCurrentRow(entity); setCurrentRow(entity);
setShowDetail(true); setShowDetail(true);
@ -133,7 +137,7 @@ const MenuList: React.FC = () => {
if (record.icon === undefined || record.icon === '') { if (record.icon === undefined || record.icon === '') {
return <span>-</span> return <span>-</span>
} else { } else {
return <Icon icon={record.icon} /> return <Icon style={{ marginTop: '3px'}} icon={record.icon} />
} }
} }
}, },
@ -193,53 +197,90 @@ const MenuList: React.FC = () => {
valueType: 'option', valueType: 'option',
fixed:'right', fixed:'right',
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <TableActionCard
<a key="TableActionCardRef"
key="create" renderActions={[
onClick={() => { {
setCreateModalOpen(true); key: 'create',
setCurrentRow(record); renderDom: (
}} <Button
> key="create"
<FormattedMessage id="pages.searchTable.create_son_menu" defaultMessage="Create" /> type="link"
</a> size="small"
<a onClick={() => {
key="update" setCreateModalOpen(true);
onClick={() => { setCurrentRow(record);
setUpdateModalOpen(true); }}
setCurrentRow(record); >
}} <FormattedMessage id="pages.searchTable.create_son_menu" defaultMessage="Create" />
> </Button>
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update" /> ),
</a> },
<Popconfirm {
placement="topLeft" key: 'update',
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })} renderDom: (
description={intl.formatMessage({ <Button
id: 'common.modal.table.delete.content', key="update"
defaultMessage: '$$$', type="link"
})} size="small"
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} onClick={() => {
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} setUpdateModalOpen(true);
onConfirm={() => { setCurrentRow(record);
handleDestroy(record).then(() => {}); }}
}} >
> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
<Button key="destroy" type="link" size="small" danger> </Button>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> ),
</Button> },
</Popconfirm> {
{/* <a key: 'destroy',
key="destroy" renderDom: (
onClick={() => { <IsDelete
handleDestroy(record).then(()=>{}) deleteApi={() => {
}}> handleDestroy(record).then(() => {});
<FormattedMessage }}
id="pages.searchTable.destroy" ></IsDelete>
defaultMessage="Destroy" ),
/> },
</a> */} ]}
</Access> ></TableActionCard>
// <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
// <a
// key="create"
// onClick={() => {
// setCreateModalOpen(true);
// setCurrentRow(record);
// }}
// >
// <FormattedMessage id="pages.searchTable.create_son_menu" defaultMessage="Create" />
// </a>
// <a
// key="update"
// onClick={() => {
// setUpdateModalOpen(true);
// setCurrentRow(record);
// }}
// >
// <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
// </a>
// <Popconfirm
// placement="topLeft"
// title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
// description={intl.formatMessage({
// id: 'common.modal.table.delete.content',
// defaultMessage: '$$$',
// })}
// okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
// cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
// onConfirm={() => {
// handleDestroy(record).then(() => {});
// }}
// >
// <Button key="destroy" type="link" size="small" danger>
// <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
// </Button>
// </Popconfirm>
// </Access>
], ],
},]; },];
return ( return (
@ -305,8 +346,37 @@ const MenuList: React.FC = () => {
setSelectedRows(selectedRows); setSelectedRows(selectedRows);
}, },
}} }}
tableAlertOptionRender={() => {
return (
<>
{selectedRowsState?.length > 0 && (
// <IsBatchDelete
// deleteApi={() => {
// const ids = selectedRowsState.map((v: API.Api) => {
// return v.id
// })
// deleteApiDeleteApisByIds({ids: ids as number[]}).then(() => {
// actionRef.current?.reloadAndRest?.();
// })
// }}
// />
<Button
danger
onClick={async () => {
actionRef.current?.reloadAndRest?.();
}}
>
<FormattedMessage
id="pages.searchTable.batchDeletion"
defaultMessage="Batch deletion"
/>
</Button>
)}
</>
);
}}
/> />
{selectedRowsState?.length > 0 && ( {/* {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar
extra={ extra={
<div> <div>
@ -327,7 +397,7 @@ const MenuList: React.FC = () => {
/> />
</Button> </Button>
</FooterToolbar> </FooterToolbar>
)} )} */}
<CreateForm <CreateForm
createModalOpen={createModalOpen} createModalOpen={createModalOpen}
values={currentRow || {}} values={currentRow || {}}

22
src/pages/System/OperationRecordList/components/CreateForm.tsx
Unescape Escape View File

@ -5,8 +5,8 @@ import {FormattedMessage, useIntl} from '@umijs/max';
import React from 'react'; import React from 'react';
import {postSysOperationRecordCreateOperationRecord} from "@/services/system/OperationRecord"; import {postSysOperationRecordCreateOperationRecord} from "@/services/system/OperationRecord";
import {Form, message} from 'antd'; import {Form, message} from 'antd';
// 表单宽度 804 两列 // 表单宽度 560 单列
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm'; import { proFormSmallItemStyleProps,proFormSmallModelWidth } from '../../../../../config/defaultForm';
export type CreateFormProps = { export type CreateFormProps = {
createModalOpen: boolean; createModalOpen: boolean;
@ -21,9 +21,9 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
return ( return (
<ModalForm<API.OperationRecord> <ModalForm<API.OperationRecord>
width={proFormModelWidth} width={proFormSmallModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.create.title', id: 'system.operation.table.list.create',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.createModalOpen} open={props.createModalOpen}
@ -47,7 +47,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
> >
<ProForm.Group> <ProForm.Group>
<ProFormText width={proFormItemStyleProps.column2Width} name="ip" <ProFormText width={proFormSmallItemStyleProps.width} name="ip"
label={<FormattedMessage id="system.operation.table.list.ip" defaultMessage="$$$"/>} label={<FormattedMessage id="system.operation.table.list.ip" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.operation.table.list.ip', defaultMessage: '$$$'})}`} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.operation.table.list.ip', defaultMessage: '$$$'})}`}
required={true} required={true}
@ -63,7 +63,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}, },
]} ]}
/> />
<ProFormText width={proFormItemStyleProps.column2Width} name="path" <ProFormText width={proFormSmallItemStyleProps.width} name="path"
label={<FormattedMessage id="system.operation.table.list.path" defaultMessage="$$$"/>} label={<FormattedMessage id="system.operation.table.list.path" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.operation.table.list.path', defaultMessage: '$$$'})}`} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.operation.table.list.path', defaultMessage: '$$$'})}`}
required={true} required={true}
@ -79,18 +79,22 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}, },
]} ]}
/> />
<ProFormDigit width={proFormItemStyleProps.column2Width} fieldProps={{precision: 0}} name="sort" <ProFormDigit width={proFormSmallItemStyleProps.width} fieldProps={{precision: 0}} name="sort"
label={<FormattedMessage id="system.operation.table.list.sort" defaultMessage="$$$"/>} label={<FormattedMessage id="system.operation.table.list.sort" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.operation.table.list.sort', defaultMessage: '$$$'})}`} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.operation.table.list.sort', defaultMessage: '$$$'})}`}
initialValue={1} initialValue={1}
/> />
{/* <ProFormText width={proFormItemStyleProps.column2Width} name="remark"
label={<FormattedMessage id="system.operation.table.list.remark" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.operation.table.list.remark', defaultMessage: '$$$'})}`}
required={false}/> */}
</ProForm.Group> </ProForm.Group>
<ProForm.Group> <ProForm.Group>
<ProFormText width={proFormItemStyleProps.column2Width} name="remark" <ProFormText width={proFormSmallItemStyleProps.width} name="remark"
label={<FormattedMessage id="system.operation.table.list.remark" defaultMessage="$$$"/>} label={<FormattedMessage id="system.operation.table.list.remark" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.operation.table.list.remark', defaultMessage: '$$$'})}`} placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.operation.table.list.remark', defaultMessage: '$$$'})}`}
required={false}/> required={false}/>
<ProFormSwitch width={proFormItemStyleProps.column2Width} name="status" initialValue={true} <ProFormSwitch width={proFormSmallItemStyleProps.width} name="status" initialValue={true}
label={<FormattedMessage id="system.operation.table.list.status" defaultMessage="$$$"/>} label={<FormattedMessage id="system.operation.table.list.status" defaultMessage="$$$"/>}
required={false}> required={false}>

133
src/pages/System/OperationRecordList/index.tsx
Unescape Escape View File

@ -12,6 +12,12 @@ import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer"; import {ColumnDrawer} from "./components/ColumnDrawer";
import {getSysOperationRecordGetOperationRecordList} from "@/services/system/OperationRecord"; import {getSysOperationRecordGetOperationRecordList} from "@/services/system/OperationRecord";
// import UpdateForm from './components/UpdateForm'; // import UpdateForm from './components/UpdateForm';
// 列表操作栏组件
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
// 批量删除
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
import { proTableCommonOptions } from '../../../../config/defaultTable';
const OperationRecordList: React.FC = () => { const OperationRecordList: React.FC = () => {
/** /**
@ -75,13 +81,16 @@ const OperationRecordList: React.FC = () => {
id="system.operation.table.list.id" id="system.operation.table.list.id"
defaultMessage="id"/>), defaultMessage="id"/>),
dataIndex: "id", dataIndex: "id",
key:"ID",
sorter: true, sorter: true,
valueType: "digit", // valueType: "digit",
fixed: 'left',
width: 80,
filters: true, onFilter: true, filters: true, onFilter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
<a <a
style={{color: '#155BD4'}}
onClick={() => { onClick={() => {
setCurrentRow(entity); setCurrentRow(entity);
setShowDetail(true); setShowDetail(true);
@ -99,6 +108,7 @@ const OperationRecordList: React.FC = () => {
id="system.operation.table.list.ip" id="system.operation.table.list.ip"
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "ip", dataIndex: "ip",
width: 120,
hideInSearch: true, hideInSearch: true,
}, },
@ -108,6 +118,9 @@ const OperationRecordList: React.FC = () => {
id="system.operation.table.list.path" id="system.operation.table.list.path"
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "path", dataIndex: "path",
width: 120,
tooltip: true,
ellipsis: true,
hideInSearch: true, hideInSearch: true,
}, },
{ {
@ -115,6 +128,7 @@ const OperationRecordList: React.FC = () => {
id="system.operation.table.list.method" id="system.operation.table.list.method"
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "method", dataIndex: "method",
width: 120,
valueEnum: { valueEnum: {
'GET': intl.formatMessage({id: 'system.api.enum.GET', defaultMessage: '$$$',}), 'GET': intl.formatMessage({id: 'system.api.enum.GET', defaultMessage: '$$$',}),
'POST': intl.formatMessage({id: 'system.api.enum.POST', defaultMessage: '$$$',}), 'POST': intl.formatMessage({id: 'system.api.enum.POST', defaultMessage: '$$$',}),
@ -144,6 +158,7 @@ const OperationRecordList: React.FC = () => {
status: 'Error' status: 'Error'
} }
}, },
width: 120,
filters: true, onFilter: true, filters: true, onFilter: true,
hideInSearch: true, hideInSearch: true,
}, },
@ -154,6 +169,7 @@ const OperationRecordList: React.FC = () => {
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "latency", dataIndex: "latency",
valueType: 'time', valueType: 'time',
width: 120,
hideInSearch: true, hideInSearch: true,
}, },
@ -164,6 +180,7 @@ const OperationRecordList: React.FC = () => {
dataIndex: "agent", dataIndex: "agent",
tooltip: true, tooltip: true,
ellipsis: true, ellipsis: true,
width: 120,
hideInSearch: true, hideInSearch: true,
}, },
@ -172,6 +189,7 @@ const OperationRecordList: React.FC = () => {
id="system.operation.table.list.error_message" id="system.operation.table.list.error_message"
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "error_message", dataIndex: "error_message",
width: 120,
hideInSearch: true, hideInSearch: true,
}, },
@ -182,6 +200,7 @@ const OperationRecordList: React.FC = () => {
dataIndex: "body", dataIndex: "body",
tooltip: true, tooltip: true,
ellipsis: true, ellipsis: true,
width: 120,
hideInSearch: true, hideInSearch: true,
}, },
@ -192,6 +211,7 @@ const OperationRecordList: React.FC = () => {
dataIndex: "resp", dataIndex: "resp",
tooltip: true, tooltip: true,
ellipsis: true, ellipsis: true,
width: 120,
hideInSearch: true, hideInSearch: true,
}, },
@ -200,6 +220,7 @@ const OperationRecordList: React.FC = () => {
id="system.operation.table.list.user_id" id="system.operation.table.list.user_id"
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "user_id", dataIndex: "user_id",
width: 120,
hideInSearch: true, hideInSearch: true,
}, },
@ -209,6 +230,7 @@ const OperationRecordList: React.FC = () => {
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "createTime", dataIndex: "createTime",
valueType: 'dateTime', valueType: 'dateTime',
width: 120,
hideInSearch: true, hideInSearch: true,
}, },
@ -218,6 +240,7 @@ const OperationRecordList: React.FC = () => {
defaultMessage="$$$"/>), defaultMessage="$$$"/>),
dataIndex: "updateTime", dataIndex: "updateTime",
valueType: 'dateTime', valueType: 'dateTime',
width: 120,
hideInSearch: true, hideInSearch: true,
}, },
@ -225,47 +248,52 @@ const OperationRecordList: React.FC = () => {
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating"/>, title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating"/>,
dataIndex: 'option', dataIndex: 'option',
valueType: 'option', valueType: 'option',
width: 120,
fixed: 'right', fixed: 'right',
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <TableActionCard
{/* <a key="TableActionCardRef"
key="update" renderActions={[
onClick={() => { {
setUpdateModalOpen(true); key: 'destroy',
setCurrentRow(record); renderDom: (
}} <IsDelete
> deleteApi={() => {
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/> handleDestroy(record).then(() => {});
</a> */} }}
<Popconfirm ></IsDelete>
placement="topLeft" ),
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })} },
description={intl.formatMessage({ ]}
id: 'common.modal.table.delete.content', ></TableActionCard>
defaultMessage: '$$$', // <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
})} // <a
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} // key="update"
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} // onClick={() => {
onConfirm={() => { // setUpdateModalOpen(true);
handleDestroy(record).then(() => {}); // setCurrentRow(record);
}} // }}
> // >
<Button key="destroy" type="link" size="small" danger> // <FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/>
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> // </a>
</Button> // <Popconfirm
</Popconfirm> // placement="topLeft"
{/* <a // title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
key="destroy" // description={intl.formatMessage({
onClick={() => { // id: 'common.modal.table.delete.content',
handleDestroy(record).then(() => { // defaultMessage: '$$$',
}) // })}
}}> // okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
<FormattedMessage // cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
id="pages.searchTable.destroy" // onConfirm={() => {
defaultMessage="Destroy" // handleDestroy(record).then(() => {});
/> // }}
</a> */} // >
</Access> // <Button key="destroy" type="link" size="small" danger>
// <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
// </Button>
// </Popconfirm>
// </Access>
], ],
},]; },];
return ( return (
@ -275,6 +303,7 @@ const OperationRecordList: React.FC = () => {
id: 'pages.searchTable.title', id: 'pages.searchTable.title',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
scroll={{ x: proTableCommonOptions.commscrollX}}
options={{fullScreen: true, setting: true, density: true, reload: true}} options={{fullScreen: true, setting: true, density: true, reload: true}}
actionRef={actionRef} actionRef={actionRef}
rowKey="key" rowKey="key"
@ -330,8 +359,26 @@ const OperationRecordList: React.FC = () => {
setSelectedRows(selectedRows); setSelectedRows(selectedRows);
}, },
}} }}
tableAlertOptionRender={() => {
return (
<>
{selectedRowsState?.length > 0 && (
<IsBatchDelete
deleteApi={() => {
const ids = selectedRowsState.map((v: API.OperationRecord) => {
return v.id
})
// deleteOperationRecordDeleteOperationRecordsByIds({ids: ids as number[]}).then(() => {
// actionRef.current?.reloadAndRest?.();
// })
}}
/>
)}
</>
);
}}
/> />
{selectedRowsState?.length > 0 && ( {/* {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar
extra={ extra={
<div> <div>
@ -357,7 +404,7 @@ const OperationRecordList: React.FC = () => {
/> />
</Button> </Button>
</FooterToolbar> </FooterToolbar>
)} )} */}
<CreateForm <CreateForm
createModalOpen={createModalOpen} createModalOpen={createModalOpen}
values={currentRow || {}} values={currentRow || {}}

2
src/pages/System/PostList/components/CreateForm.tsx
Unescape Escape View File

@ -23,7 +23,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
<ModalForm<API.Post> <ModalForm<API.Post>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.create.title', id: 'system.post.table.list.create',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.createModalOpen} open={props.createModalOpen}

2
src/pages/System/PostList/components/UpdateForm.tsx
Unescape Escape View File

@ -23,7 +23,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
<ModalForm<API.Post> <ModalForm<API.Post>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.update.title', id: 'system.post.table.list.update',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.updateModalOpen} open={props.updateModalOpen}

128
src/pages/System/PostList/index.tsx
Unescape Escape View File

@ -12,6 +12,11 @@ import UpdateForm from './components/UpdateForm';
import CreateForm from "./components/CreateForm"; import CreateForm from "./components/CreateForm";
import {ColumnDrawer} from "./components/ColumnDrawer"; import {ColumnDrawer} from "./components/ColumnDrawer";
import {postPostGetPostList} from "@/services/system/Post"; import {postPostGetPostList} from "@/services/system/Post";
// 列表操作栏组件
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
// 批量删除
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
const PostList: React.FC = () => { const PostList: React.FC = () => {
/** /**
@ -76,11 +81,12 @@ const PostList: React.FC = () => {
defaultMessage="id"/>), defaultMessage="id"/>),
dataIndex: "id", dataIndex: "id",
sorter: true, sorter: true,
valueType: "digit", // valueType: "digit",
filters: true, onFilter: true, filters: true, onFilter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
<a <a
style={{color: '#155BD4'}}
onClick={() => { onClick={() => {
setCurrentRow(entity); setCurrentRow(entity);
setShowDetail(true); setShowDetail(true);
@ -144,45 +150,65 @@ const PostList: React.FC = () => {
valueType: 'option', valueType: 'option',
fixed: 'right', fixed: 'right',
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <TableActionCard
<a key="TableActionCardRef"
key="update" renderActions={[
onClick={() => { {
setUpdateModalOpen(true); key: 'update',
setCurrentRow(record); renderDom: (
}} <Button
> key="update"
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/> type="link"
</a> size="small"
<Popconfirm onClick={() => {
placement="topLeft" setUpdateModalOpen(true);
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })} setCurrentRow(record);
description={intl.formatMessage({ }}
id: 'common.modal.table.delete.content', >
defaultMessage: '$$$', <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
})} </Button>
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} ),
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} },
onConfirm={() => { {
handleDestroy(record).then(() => {}); key: 'destroy',
}} renderDom: (
> <IsDelete
<Button key="destroy" type="link" size="small" danger> deleteApi={() => {
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> handleDestroy(record).then(() => {});
</Button> }}
</Popconfirm> ></IsDelete>
{/* <a ),
key="destroy" },
onClick={() => { ]}
handleDestroy(record).then(() => { ></TableActionCard>
}) // <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
}}> // <a
<FormattedMessage // key="update"
id="pages.searchTable.destroy" // onClick={() => {
defaultMessage="Destroy" // setUpdateModalOpen(true);
/> // setCurrentRow(record);
</a> */} // }}
</Access> // >
// <FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/>
// </a>
// <Popconfirm
// placement="topLeft"
// title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
// description={intl.formatMessage({
// id: 'common.modal.table.delete.content',
// defaultMessage: '$$$',
// })}
// okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
// cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
// onConfirm={() => {
// handleDestroy(record).then(() => {});
// }}
// >
// <Button key="destroy" type="link" size="small" danger>
// <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
// </Button>
// </Popconfirm>
// </Access>
], ],
},]; },];
return ( return (
@ -249,8 +275,26 @@ const PostList: React.FC = () => {
setSelectedRows(selectedRows); setSelectedRows(selectedRows);
}, },
}} }}
tableAlertOptionRender={() => {
return (
<>
{selectedRowsState?.length > 0 && (
<IsBatchDelete
deleteApi={() => {
const ids = selectedRowsState.map((v: API.Post) => {
return v.id
})
// deletePostDeletePostsByIds({ids: ids as number[]}).then(() => {
// actionRef.current?.reloadAndRest?.();
// })
}}
/>
)}
</>
);
}}
/> />
{selectedRowsState?.length > 0 && ( {/* {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar
extra={ extra={
<div> <div>
@ -276,7 +320,7 @@ const PostList: React.FC = () => {
/> />
</Button> </Button>
</FooterToolbar> </FooterToolbar>
)} )} */}
<CreateForm <CreateForm
createModalOpen={createModalOpen} createModalOpen={createModalOpen}
values={currentRow || {}} values={currentRow || {}}

2
src/pages/System/RoleList/components/CreateForm.tsx
Unescape Escape View File

@ -23,7 +23,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
<ModalForm<API.Role> <ModalForm<API.Role>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.create.title', id: 'system.role.table.list.create',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.createModalOpen} open={props.createModalOpen}

5
src/pages/System/RoleList/components/SetPermissionForm.tsx
Unescape Escape View File

@ -72,7 +72,7 @@ const SetPermissionForm: React.FC<SetPermissionFormProps> = (props) => {
return ( return (
<ModalForm<API.UpdateRolePermissionParams> <ModalForm<API.UpdateRolePermissionParams>
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.update.title', id: 'system.role.table.list.set_permission',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.updateModalOpen} open={props.updateModalOpen}
@ -127,6 +127,7 @@ const SetPermissionForm: React.FC<SetPermissionFormProps> = (props) => {
onCheck={(checkedKeys) => { onCheck={(checkedKeys) => {
form.setFieldsValue({menuIds: checkedKeys}) form.setFieldsValue({menuIds: checkedKeys})
}} }}
height={820}
treeData={treeData} treeData={treeData}
// loadData={({treeNode}) => { // loadData={({treeNode}) => {
// return treeData // return treeData
@ -152,6 +153,7 @@ const SetPermissionForm: React.FC<SetPermissionFormProps> = (props) => {
onCheck={(checkedKeys) => { onCheck={(checkedKeys) => {
form.setFieldsValue({apiIds: checkedKeys}) form.setFieldsValue({apiIds: checkedKeys})
}} }}
height={820}
treeData={apitreeData} treeData={apitreeData}
// loadData={({treeNode}) => { // loadData={({treeNode}) => {
// return treeData // return treeData
@ -186,6 +188,7 @@ const SetPermissionForm: React.FC<SetPermissionFormProps> = (props) => {
onCheck={(checkedKeys: any) => { onCheck={(checkedKeys: any) => {
form.setFieldsValue({deptIds: checkedKeys}) form.setFieldsValue({deptIds: checkedKeys})
}} }}
height={760}
treeData={deptTreeData} treeData={deptTreeData}
/> />
</ProForm.Item> </ProForm.Item>

2
src/pages/System/RoleList/components/UpdateForm.tsx
Unescape Escape View File

@ -23,7 +23,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
<ModalForm<API.Role> <ModalForm<API.Role>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.update.title', id: 'system.role.table.list.update',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.updateModalOpen} open={props.updateModalOpen}

151
src/pages/System/RoleList/index.tsx
Unescape Escape View File

@ -13,6 +13,11 @@ import CreateForm from "./components/CreateForm";
import SetPermissionForm from "./components/SetPermissionForm"; import SetPermissionForm from "./components/SetPermissionForm";
import {ColumnDrawer} from "./components/ColumnDrawer"; import {ColumnDrawer} from "./components/ColumnDrawer";
import {postRoleGetRoleList} from "@/services/system/Role"; import {postRoleGetRoleList} from "@/services/system/Role";
// 列表操作栏组件
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
// 批量删除
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
const RoleList: React.FC = () => { const RoleList: React.FC = () => {
/** /**
@ -86,7 +91,7 @@ const RoleList: React.FC = () => {
defaultMessage="id"/>), defaultMessage="id"/>),
dataIndex: "id", dataIndex: "id",
sorter: true, sorter: true,
valueType: "digit", // valueType: "digit",
filters: true, onFilter: true, filters: true, onFilter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
@ -154,51 +159,87 @@ const RoleList: React.FC = () => {
valueType: 'option', valueType: 'option',
fixed: 'right', fixed: 'right',
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <TableActionCard
<a key="TableActionCardRef"
key="update" renderActions={[
onClick={() => { {
setUpdateModalOpen(true); key: 'update',
setCurrentRow(record); renderDom: (
}} <Button
> key="update"
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/> type="link"
</a> size="small"
<a key="set_permissions" onClick={() => {
onClick={() => { setUpdateModalOpen(true);
setSetPermissionModalOpen(true) setCurrentRow(record);
setCurrentRow(record) }}
}} >
><FormattedMessage id="system.role.table.action.set_permission" defaultMessage="$$$"></FormattedMessage></a> <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
<Popconfirm </Button>
placement="topLeft" ),
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })} },
description={intl.formatMessage({ {
id: 'common.modal.table.delete.content', key: 'set_permissions',
defaultMessage: '$$$', renderDom: (
})} <Button
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} key="set_permissions"
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} type="link"
onConfirm={() => { size="small"
handleDestroy(record).then(() => {}); onClick={() => {
}} setSetPermissionModalOpen(true);
> setCurrentRow(record);
<Button key="destroy" type="link" size="small" danger> }}
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> >
</Button> <FormattedMessage id="system.role.table.action.set_permission" defaultMessage="$$$" />
</Popconfirm> </Button>
{/* <a ),
key="destroy" },
onClick={() => { {
handleDestroy(record).then(() => { key: 'destroy',
}) renderDom: (
}}> <IsDelete
<FormattedMessage deleteApi={() => {
id="pages.searchTable.destroy" handleDestroy(record).then(() => {});
defaultMessage="Destroy" }}
/> ></IsDelete>
</a> */} ),
</Access> },
]}
></TableActionCard>
// <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
// <a
// key="update"
// onClick={() => {
// setUpdateModalOpen(true);
// setCurrentRow(record);
// }}
// >
// <FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/>
// </a>
// <a key="set_permissions"
// onClick={() => {
// setSetPermissionModalOpen(true)
// setCurrentRow(record)
// }}
// ><FormattedMessage id="system.role.table.action.set_permission" defaultMessage="$$$"></FormattedMessage></a>
// <Popconfirm
// placement="topLeft"
// title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
// description={intl.formatMessage({
// id: 'common.modal.table.delete.content',
// defaultMessage: '$$$',
// })}
// okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
// cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
// onConfirm={() => {
// handleDestroy(record).then(() => {});
// }}
// >
// <Button key="destroy" type="link" size="small" danger>
// <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
// </Button>
// </Popconfirm>
// </Access>
], ],
},]; },];
return ( return (
@ -266,6 +307,24 @@ const RoleList: React.FC = () => {
setSelectedRows(selectedRows); setSelectedRows(selectedRows);
}, },
}} }}
tableAlertOptionRender={() => {
return (
<>
{selectedRowsState?.length > 0 && (
<IsBatchDelete
deleteApi={() => {
const ids = selectedRowsState.map((v: API.Role) => {
return v.id
})
// deleteRoleDeleteRolesByIds({ids: ids as number[]}).then(() => {
// actionRef.current?.reloadAndRest?.();
// })
}}
/>
)}
</>
);
}}
/> />
{selectedRowsState?.length > 0 && ( {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar

2
src/pages/System/UserList/components/CreateForm.tsx
Unescape Escape View File

@ -35,7 +35,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
<ModalForm<API.Register> <ModalForm<API.Register>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.create.title', id: 'system.user.table.list.create',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.createModalOpen} open={props.createModalOpen}

2
src/pages/System/UserList/components/UpdateForm.tsx
Unescape Escape View File

@ -38,7 +38,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
<ModalForm<API.User> <ModalForm<API.User>
width={proFormModelWidth} width={proFormModelWidth}
title={intl.formatMessage({ title={intl.formatMessage({
id: 'common.modal.table.update.title', id: 'system.user.table.list.update',
defaultMessage: '$$$', defaultMessage: '$$$',
})} })}
open={props.updateModalOpen} open={props.updateModalOpen}

128
src/pages/System/UserList/index.tsx
Unescape Escape View File

@ -18,6 +18,11 @@ import { Tree } from 'antd';
import type { DataNode } from 'antd/es/tree'; import type { DataNode } from 'antd/es/tree';
import {postDepartmentGetDepartmentTree} from "@/services/system/Department"; import {postDepartmentGetDepartmentTree} from "@/services/system/Department";
import {RedoOutlined} from "@ant-design/icons"; import {RedoOutlined} from "@ant-design/icons";
// 列表操作栏组件
import TableActionCard from '@/components/TableActionCard';
import IsDelete from '@/components/TableActionCard/isDelete';
// 批量删除
import IsBatchDelete from '@/components/BatchOperation/isBatchDelete';
const UserList: React.FC = () => { const UserList: React.FC = () => {
/** /**
@ -93,11 +98,12 @@ const UserList: React.FC = () => {
defaultMessage="id"/>), defaultMessage="id"/>),
dataIndex: "id", dataIndex: "id",
sorter: true, sorter: true,
valueType: "digit", // valueType: "digit",
filters: true, onFilter: true, filters: true, onFilter: true,
render: (dom, entity) => { render: (dom, entity) => {
return ( return (
<a <a
style={{color: '#155BD4'}}
onClick={() => { onClick={() => {
setCurrentRow(entity); setCurrentRow(entity);
setShowDetail(true); setShowDetail(true);
@ -171,45 +177,65 @@ const UserList: React.FC = () => {
valueType: 'option', valueType: 'option',
fixed: 'right', fixed: 'right',
render: (_, record) => [ render: (_, record) => [
<Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}> <TableActionCard
<a key="TableActionCardRef"
key="update" renderActions={[
onClick={() => { {
setUpdateModalOpen(true); key: 'update',
setCurrentRow(record); renderDom: (
}} <Button
> key="update"
<FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/> type="link"
</a> size="small"
<Popconfirm onClick={() => {
placement="topLeft" setUpdateModalOpen(true);
title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })} setCurrentRow(record);
description={intl.formatMessage({ }}
id: 'common.modal.table.delete.content', >
defaultMessage: '$$$', <FormattedMessage id="pages.searchTable.update" defaultMessage="Update" />
})} </Button>
okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })} ),
cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })} },
onConfirm={() => { {
handleDestroy(record).then(() => {}); key: 'destroy',
}} renderDom: (
> <IsDelete
<Button key="destroy" type="link" size="small" danger> deleteApi={() => {
<FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" /> handleDestroy(record).then(() => {});
</Button> }}
</Popconfirm> ></IsDelete>
{/* <a ),
key="destroy" },
onClick={() => { ]}
handleDestroy(record).then(() => { ></TableActionCard>
}) // <Access accessible={access.canUpdate(history.location.pathname)} key={`${history.location.pathname}-add`}>
}}> // <a
<FormattedMessage // key="update"
id="pages.searchTable.destroy" // onClick={() => {
defaultMessage="Destroy" // setUpdateModalOpen(true);
/> // setCurrentRow(record);
</a> */} // }}
</Access> // >
// <FormattedMessage id="pages.searchTable.update" defaultMessage="Update"/>
// </a>
// <Popconfirm
// placement="topLeft"
// title={intl.formatMessage({ id: 'common.tip.title', defaultMessage: '$$$' })}
// description={intl.formatMessage({
// id: 'common.modal.table.delete.content',
// defaultMessage: '$$$',
// })}
// okText={intl.formatMessage({ id: 'common.yes', defaultMessage: '$$$' })}
// cancelText={intl.formatMessage({ id: 'common.no', defaultMessage: '$$$' })}
// onConfirm={() => {
// handleDestroy(record).then(() => {});
// }}
// >
// <Button key="destroy" type="link" size="small" danger>
// <FormattedMessage id="pages.searchTable.destroy" defaultMessage="Destroy" />
// </Button>
// </Popconfirm>
// </Access>
], ],
},]; },];
return ( return (
@ -296,8 +322,26 @@ const UserList: React.FC = () => {
setSelectedRows(selectedRows); setSelectedRows(selectedRows);
}, },
}} }}
tableAlertOptionRender={() => {
return (
<>
{selectedRowsState?.length > 0 && (
<IsBatchDelete
deleteApi={() => {
const ids = selectedRowsState.map((v: API.User) => {
return v.id
})
// deleteUserDeleteUsersByIds({ids: ids as number[]}).then(() => {
// actionRef.current?.reloadAndRest?.();
// })
}}
/>
)}
</>
);
}}
/> />
{selectedRowsState?.length > 0 && ( {/* {selectedRowsState?.length > 0 && (
<FooterToolbar <FooterToolbar
extra={ extra={
<div> <div>
@ -323,7 +367,7 @@ const UserList: React.FC = () => {
/> />
</Button> </Button>
</FooterToolbar> </FooterToolbar>
)} )} */}
</ProCard> </ProCard>
</ProCard> </ProCard>

Write Preview
Loading…
Cancel
Save