feat: 菜单管理图标选择交互整体优化

develop
zhoux 1 year ago
parent 0ae7e00e05
commit 67fac9673f

@ -0,0 +1,32 @@
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-28 14:13:05
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-28 14:16:48
* @FilePath: \general-ai-platform-web\config\defaultIcon.ts
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
*/
import { proFormItemStyleProps } from './defaultForm';
// 分步表单统一配置
export const proIconSelectWrapStyle: React.CSSProperties = {
position: 'relative',
width: proFormItemStyleProps.width + 48,
background: 'red',
left: 0,
};
export const proIconSelectStyle: React.CSSProperties = {
position: 'absolute',
left: '0',
padding: 16,
top: '5%',
width: '94%',
height: 500,
zIndex: 9,
boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.30)',
background: '#fff',
borderRadius: 4,
overflowY: 'scroll',
};

@ -40,7 +40,7 @@ const Category: React.FC<CategoryProps> = props => {
return (
<div>
<h4>{intl.formatMessage({
<h4 style={{paddingTop: 16}}>{intl.formatMessage({
id: `app.docs.components.icon.category.${title}`,
defaultMessage: '信息',
})}</h4>

@ -24,11 +24,16 @@ const CopyableIcon: React.FC<CopyableIconProps> = ({
theme,
}) => {
const className = classNames({
gn: true,
themeBgHover: true,
copied: justCopied === name,
[theme]: !!theme,
});
return (
<li className={className}
style={{
lineHeight: '48px',
}}
onClick={() => {
if (onSelect) {
onSelect(theme, name);

@ -92,7 +92,20 @@ const IconSelector: React.FC<IconSelectorProps> = (props) => {
}, [displayState.searchKey, displayState.theme]);
return (
<>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div className='gn' style={{ display: 'flex', justifyContent: 'space-between' }}>
{/*
* //TODO 二级:输入框上方提示文案悬浮会覆盖清空菜单图标项按钮
*/}
<Input.Search
// placeholder={messages['app.docs.components.icon.search.placeholder']}
style={{ marginRight: 12, flex: 1 }}
allowClear
onChange={e => handleSearchIcon(e.currentTarget.value)}
size="large"
autoFocus
suffix={<IconPicSearcher />}
/>
{/* <Icon component={OutlinedIcon} /> <Icon component={FilledIcon} TwoToneIcon /> */}
<Radio.Group
value={displayState.theme}
onChange={handleChangeTheme}
@ -101,15 +114,15 @@ const IconSelector: React.FC<IconSelectorProps> = (props) => {
buttonStyle="solid"
options={[
{
label: <Icon component={OutlinedIcon} />,
label: <>线</> ,
value: ThemeType.Outlined
},
{
label: <Icon component={FilledIcon} />,
label: <></> ,
value: ThemeType.Filled
},
{
label: <Icon component={TwoToneIcon} />,
label: <></>,
value: ThemeType.TwoTone
},
]}
@ -124,15 +137,7 @@ const IconSelector: React.FC<IconSelectorProps> = (props) => {
<Icon components={TwoToneIcon} /> {messages['app.docs.components.icon.two-tone']}
</Radio.Button> */}
</Radio.Group>
<Input.Search
// placeholder={messages['app.docs.components.icon.search.placeholder']}
style={{ margin: '0 10px', flex: 1 }}
allowClear
onChange={e => handleSearchIcon(e.currentTarget.value)}
size="large"
autoFocus
suffix={<IconPicSearcher />}
/>
</div>
{renderCategories}
</>

@ -1,3 +1,11 @@
/*
* @Author: zhoux zhouxia@supervision.ltd
* @Date: 2023-11-01 13:56:33
* @LastEditors: zhoux zhouxia@supervision.ltd
* @LastEditTime: 2023-11-28 11:34:00
* @FilePath: \general-ai-platform-web\src\components\RightContent\index.tsx
* @Description: ,`customMade`, koroFileHeader : https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { QuestionCircleOutlined } from '@ant-design/icons';
import { SelectLang as UmiSelectLang } from '@umijs/max';
import React from 'react';
@ -38,7 +46,7 @@ export const SelectRole = () => {
const { currentUser } = initialState || {};
return (
<>
<span className='gn'>
{
currentUser && (
<Select
@ -52,7 +60,7 @@ export const SelectRole = () => {
/>
)
}
</>
</span>
);
};

@ -170,6 +170,27 @@ a.ant-dropdown-trigger {
.ant-descriptions .ant-descriptions-row > td {
padding-right: 12px;
}
::-webkit-scrollbar-track-piece {
-webkit-border-radius: 0;
}
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: #CCC;
-webkit-border-radius: 6px;
outline-offset: -2px;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
::-webkit-scrollbar-thumb:hover {
height: 50px;
background-color: #878987;
-webkit-border-radius: 6px;
}
.gn {
/* UI // update 使
@ -199,6 +220,27 @@ a.ant-dropdown-trigger {
.gn .ant-pro-table-list-toolbar-container {
padding-block: 8px;
}
.gn .ant-pro-global-header-header-actions-item > * {
padding-block: 0;
}
.gn .ant-radio-group-large .ant-radio-button-wrapper {
height: 32px;
line-height: 32px;
}
.gn .ant-input-affix-wrapper-lg {
height: 32px;
line-height: 32px;
font-size: 14px;
}
.gn .ant-btn.ant-btn-lg {
font-size: 14px;
height: 32px;
border-radius: 4px;
}
.gn .ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
border-start-start-radius: 4px;
border-end-start-radius: 4px;
}
.gn.h2 {
font-size: 18px;
}
@ -220,3 +262,6 @@ a.ant-dropdown-trigger {
.gn .border_bottom_1 {
border-bottom: 1px solid #E0E0E0;
}
.gn.themeBgHover:hover {
background-color: #155BD4;
}

@ -217,6 +217,29 @@ a.ant-dropdown-trigger{
}
}
// 美化滚动条
::-webkit-scrollbar-track-piece {
-webkit-border-radius: 0
}
::-webkit-scrollbar {
width: 5px;
height: 10px
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: #CCC;
-webkit-border-radius: 6px;
outline-offset: -2px;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5
}
::-webkit-scrollbar-thumb:hover {
height: 50px;
background-color: #878987;
-webkit-border-radius: 6px
}
.gn {
// TODO_update 重置覆盖默认样式使用统一类名gn + 需要覆盖的类名
.ant-pro-checkcard-content {
@ -245,6 +268,29 @@ a.ant-dropdown-trigger{
.ant-pro-table-list-toolbar-container {
padding-block: 8px;
}
.ant-pro-global-header-header-actions-item >*{
padding-block: 0;
}
.ant-radio-group-large .ant-radio-button-wrapper {
height: 32px;
line-height: 32px;
}
.ant-input-affix-wrapper-lg{
height: 32px;
line-height: 32px;
font-size: 14px;
}
.ant-btn.ant-btn-lg {
font-size: 14px;
height: 32px;
border-radius: 4px;
}
.ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
border-start-start-radius: 4px;
border-end-start-radius: 4px;
}
/* UI 规范表 // update 使用中
适用说明
@ -281,6 +327,10 @@ a.ant-dropdown-trigger{
.border_bottom_1 {
border-bottom: 1px solid #E0E0E0
}
&.themeBgHover:hover{
background-color: #155BD4;
}
}
// .p1{

@ -17,6 +17,7 @@ import { Form, message } from 'antd';
import React, { useEffect, useState } from 'react';
// 表单宽度 804 两列
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
import { proIconSelectStyle, proIconSelectWrapStyle } from '../../../../../config/defaultIcon';
export type FormValueType = {
target?: string;
@ -44,6 +45,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
]);
useEffect(() => {
setIconSelectorOpen(false);
if (props.values.id !== undefined && props.values.id !== 0) {
setParentId(props.values.id as number);
setParentSelectOptions([{ label: props.values.title, value: props.values.id }]);
@ -71,6 +73,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
}}
submitTimeout={2000}
onFinish={async (values) => {
setMenuIconName('');
console.log(values);
postMenuCreateMenu(values)
.then(() => {
@ -245,7 +248,7 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
hidden={record.type === 'M'}
// disabled={record.type === 'M'}
/>
{/* TODO 新增图标没有更改 */}
<ProFormSelect
width={proFormItemStyleProps.column2Width}
name="icon"
@ -257,8 +260,16 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
hidden={parentId !== 0}
addonBefore={createIcon(menuIconName)}
fieldProps={{
// suffixIcon: {createIcon(menuIconName)},
// dropdownRender:() => <><QuestionCircleOutlined /></>,
labelInValue: true,
notFoundContent: null, // 将选项内容为空隐去,使用自定义的图标选择组件
filterOption: false,
onClick: () => {
setIconSelectorOpen(true);
setIconSelectorOpen(!iconSelectorOpen);
},
onClear: () => {
setMenuIconName('');
},
}}
placeholder={`${intl.formatMessage({
@ -277,20 +288,21 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
},
]}
/>
{iconSelectorOpen ? (
<>
<IconSelector
onSelect={(name: string) => {
form.setFieldsValue({ icon: name });
setMenuIconName(name);
setIconSelectorOpen(false);
}}
/>
</>
) : (
''
)}
<div style={proIconSelectWrapStyle}>
{iconSelectorOpen ? (
<div style={proIconSelectStyle}>
<IconSelector
onSelect={(name: string) => {
form.setFieldsValue({ icon: name });
setMenuIconName(name);
setIconSelectorOpen(false);
}}
/>
</div>
) : (
''
)}
</div>
</ProForm.Group>
);
}
@ -338,22 +350,6 @@ const CreateForm: React.FC<CreateFormProps> = (props) => {
required={false}
></ProFormSwitch>
</ProForm.Group>
{/* <Modal
width={800}
open={iconSelectorOpen}
onCancel={() => {
setIconSelectorOpen(false);
}}
footer={null}
>
<IconSelector
onSelect={(name: string) => {
form.setFieldsValue({ icon: name });
setMenuIconName(name);
setIconSelectorOpen(false);
}}
/>
</Modal> */}
</ModalForm>
);
};

@ -1,15 +1,22 @@
import {ModalForm, ProForm, ProFormDependency, ProFormRadio} from '@ant-design/pro-components';
import {ProFormText} from '@ant-design/pro-components';
import {ProFormSwitch} from '@ant-design/pro-components';
import {ProFormSelect, ProFormDigit} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import React, {useEffect, useState} from 'react';
import {App, Button, Form, message, Modal} from 'antd';
import {putMenuUpdateMenu} from "@/services/system/Menu";
import {createIcon} from "@/utils/IconUtil";
import IconSelector from "@/components/IconSelector";
import IconSelector from '@/components/IconSelector';
import { putMenuUpdateMenu } from '@/services/system/Menu';
import { createIcon } from '@/utils/IconUtil';
import {
ModalForm,
ProForm,
ProFormDependency,
ProFormDigit,
ProFormRadio,
ProFormSelect,
ProFormSwitch,
ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, Modal, message } from 'antd';
import React, { useEffect, useState } from 'react';
// 表单宽度 804 两列
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
import { proIconSelectStyle, proIconSelectWrapStyle } from '../../../../../config/defaultIcon';
export type FormValueType = {
target?: string;
template?: string;
@ -25,17 +32,19 @@ export type UpdateFormProps = {
reload: any;
};
const UpdateForm: React.FC<UpdateFormProps> = (props) => {
const intl = useIntl();
const [form] = Form.useForm<API.Menu>();
const [menuIconName, setMenuIconName] = useState<any>();
const [iconSelectorOpen, setIconSelectorOpen] = useState<boolean>(false);
const [parentId, setParentId] = useState<number>(0);
const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([{label: '根节点', value: 0}]);
const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([
{ label: '根节点', value: 0 },
]);
useEffect(()=>{
setMenuIconName(props.values.icon)
}, [props.updateModalOpen])
useEffect(() => {
setIconSelectorOpen(false);
setMenuIconName(props.values.icon);
}, [props.updateModalOpen]);
return (
<ModalForm<API.Menu>
@ -53,207 +62,297 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
}}
submitTimeout={2000}
onFinish={async (values) => {
console.log(values)
putMenuUpdateMenu(values).then(() => {
message.success(intl.formatMessage({id: 'common.success', defaultMessage: '$$$'}))
props.reload()
}).catch(() => {
message.error(intl.formatMessage({id: 'common.error', defaultMessage: '$$$'}))
})
setMenuIconName('');
console.log(values);
putMenuUpdateMenu(values)
.then(() => {
message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
props.reload();
})
.catch(() => {
message.error(intl.formatMessage({ id: 'common.error', defaultMessage: '$$$' }));
});
props.handleModal();
return true;
}}
>
<ProForm.Group>
<ProFormText width={proFormItemStyleProps.column2Width} name="id" label="id" disabled={true} initialValue={props.values.id}/>
<ProFormSelect width={proFormItemStyleProps.column2Width} name="parentId"
disabled={true}
initialValue={parentId}
request={async () => parentSelectOptions}
label={<FormattedMessage id="system.menu.table.list.parentId" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.parentId', defaultMessage: '$$$'})}`}
<ProFormText
width={proFormItemStyleProps.column2Width}
name="id"
label="id"
disabled={true}
initialValue={props.values.id}
/>
<ProFormSelect
width={proFormItemStyleProps.column2Width}
name="parentId"
disabled={true}
initialValue={parentId}
request={async () => parentSelectOptions}
label={<FormattedMessage id="system.menu.table.list.parentId" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'system.menu.table.list.parentId',
defaultMessage: '$$$',
})}`}
/>
</ProForm.Group>
<ProForm.Group>
<ProFormRadio.Group width={proFormItemStyleProps.column2Width} name="type"
required={true}
label={<FormattedMessage id="system.menu.table.list.type" defaultMessage="$$$"/>}
initialValue={props.values.type}
disabled={true}
options={[
{
label: intl.formatMessage({id: 'system.menu.table.list.type_M', defaultMessage: '$$$'}),
value: 'M',
},
{
label: intl.formatMessage({id: 'system.menu.table.list.type_C', defaultMessage: '$$$'}),
value: 'C',
},
{
label: intl.formatMessage({id: 'system.menu.table.list.type_F', defaultMessage: '$$$'}),
value: 'F',
},
{
label: intl.formatMessage({id: 'system.menu.table.list.type_E', defaultMessage: '$$$'}),
value: 'E',
},
]}>
</ProFormRadio.Group>
<ProFormRadio.Group
width={proFormItemStyleProps.column2Width}
name="type"
required={true}
label={<FormattedMessage id="system.menu.table.list.type" defaultMessage="$$$" />}
initialValue={props.values.type}
disabled={true}
options={[
{
label: intl.formatMessage({
id: 'system.menu.table.list.type_M',
defaultMessage: '$$$',
}),
value: 'M',
},
{
label: intl.formatMessage({
id: 'system.menu.table.list.type_C',
defaultMessage: '$$$',
}),
value: 'C',
},
{
label: intl.formatMessage({
id: 'system.menu.table.list.type_F',
defaultMessage: '$$$',
}),
value: 'F',
},
{
label: intl.formatMessage({
id: 'system.menu.table.list.type_E',
defaultMessage: '$$$',
}),
value: 'E',
},
]}
></ProFormRadio.Group>
</ProForm.Group>
<ProForm.Group>
<ProFormText width={proFormItemStyleProps.column2Width} name="title"
label={<FormattedMessage id="system.menu.table.list.title" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.title', defaultMessage: '$$$'})}`}
required={true}
initialValue={props.values.title}
rules={[
{
required: true,
message: (
<FormattedMessage
id="system.menu.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
<ProFormText
width={proFormItemStyleProps.column2Width}
name="title"
label={<FormattedMessage id="system.menu.table.list.title" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({ id: 'system.menu.table.list.title', defaultMessage: '$$$' })}`}
required={true}
initialValue={props.values.title}
rules={[
{
required: true,
message: (
<FormattedMessage
id="system.menu.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormDigit width={proFormItemStyleProps.column2Width} fieldProps={{precision: 0}} name="sort"
label={<FormattedMessage id="system.menu.table.list.sort" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.sort', defaultMessage: '$$$'})}`}
initialValue={props.values.sort}
<ProFormDigit
width={proFormItemStyleProps.column2Width}
fieldProps={{ precision: 0 }}
name="sort"
label={<FormattedMessage id="system.menu.table.list.sort" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({ id: 'system.menu.table.list.sort', defaultMessage: '$$$' })}`}
initialValue={props.values.sort}
/>
</ProForm.Group>
<ProFormDependency name={['type']}>
{
(record) => {
let isShow = (record.type !== 'F' && record.type !== 'E')
if (isShow) {
return (
<ProForm.Group>
<ProFormText width={proFormItemStyleProps.column2Width} name="name"
label={<FormattedMessage id="system.menu.table.list.name" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.name', defaultMessage: '$$$'})}`}
required={true}
initialValue={props.values.name}
rules={[
{
required: true,
message: (
<FormattedMessage
id="system.menu.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormText width={proFormItemStyleProps.column2Width} name="path"
label={<FormattedMessage id="system.menu.table.list.path" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.path', defaultMessage: '$$$'})}`}
required={true}
initialValue={props.values.path}
rules={[
{
required: true,
message: (
<FormattedMessage
id="system.menu.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormText width={proFormItemStyleProps.column2Width} name="component"
label={<FormattedMessage id="system.menu.table.list.component" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.component', defaultMessage: '$$$'})}`}
required={true}
initialValue={props.values.component}
hidden={record.type === 'M'}
// disabled={record.type === 'M'}
/>
{(record) => {
let isShow = record.type !== 'F' && record.type !== 'E';
if (isShow) {
return (
<ProForm.Group>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="name"
label={<FormattedMessage id="system.menu.table.list.name" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'system.menu.table.list.name',
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.name}
rules={[
{
required: true,
message: (
<FormattedMessage
id="system.menu.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="path"
label={<FormattedMessage id="system.menu.table.list.path" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'system.menu.table.list.path',
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.path}
rules={[
{
required: true,
message: (
<FormattedMessage
id="system.menu.table.rule.required.name"
defaultMessage="name is required"
/>
),
},
]}
/>
<ProFormText
width={proFormItemStyleProps.column2Width}
name="component"
label={
<FormattedMessage id="system.menu.table.list.component" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'system.menu.table.list.component',
defaultMessage: '$$$',
})}`}
required={true}
initialValue={props.values.component}
hidden={record.type === 'M'}
// disabled={record.type === 'M'}
/>
<ProFormSelect
width={proFormItemStyleProps.column2Width}
name="icon"
label={intl.formatMessage({
id: 'system.menu.table.list.icon',
defaultMessage: '$$$',
})}
valueEnum={{}}
hidden={record.type !== 'M'}
addonBefore={createIcon(menuIconName)}
fieldProps={{
onClick: () => {
setIconSelectorOpen(true);
},
}}
initialValue={props.values.icon}
placeholder={`${intl.formatMessage({id: 'common.please_select', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.icon', defaultMessage: '$$$'})}`}
rules={[
{
required: false,
message: <FormattedMessage id="请选择菜单图标!" defaultMessage="请选择菜单图标!"/>,
},
]}
/>
</ProForm.Group>
)
}
<ProFormSelect
width={proFormItemStyleProps.column2Width}
name="icon"
label={intl.formatMessage({
id: 'system.menu.table.list.icon',
defaultMessage: '$$$',
})}
valueEnum={{}}
hidden={record.type !== 'M'}
addonBefore={createIcon(menuIconName)}
fieldProps={{
labelInValue: true,
notFoundContent: null, // 将选项内容为空隐去,使用自定义的图标选择组件
filterOption: false,
onClick: () => {
setIconSelectorOpen(!iconSelectorOpen);
},
onClear: () => {
setMenuIconName('');
},
}}
initialValue={props.values.icon}
placeholder={`${intl.formatMessage({
id: 'common.please_select',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'system.menu.table.list.icon',
defaultMessage: '$$$',
})}`}
rules={[
{
required: false,
message: (
<FormattedMessage id="请选择菜单图标!" defaultMessage="请选择菜单图标!" />
),
},
]}
/>
<div style={proIconSelectWrapStyle}>
{iconSelectorOpen ? (
<div style={proIconSelectStyle}>
<IconSelector
onSelect={(name: string) => {
form.setFieldsValue({ icon: name });
setMenuIconName(name);
setIconSelectorOpen(false);
}}
/>
</div>
) : (
''
)}
</div>
</ProForm.Group>
);
}
}
}}
</ProFormDependency>
<ProForm.Group>
<ProFormDependency name={['type']}>
{
(record) => {
return (
<ProFormText width={proFormItemStyleProps.column2Width} name="permission"
initialValue={props.values.permission}
label={<FormattedMessage id="system.menu.table.list.permission" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.permission', defaultMessage: '$$$'})}`}
disabled={record.type === 'M'}
/>
)
}
}
{(record) => {
return (
<ProFormText
width={proFormItemStyleProps.column2Width}
name="permission"
initialValue={props.values.permission}
label={
<FormattedMessage id="system.menu.table.list.permission" defaultMessage="$$$" />
}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({
id: 'system.menu.table.list.permission',
defaultMessage: '$$$',
})}`}
disabled={record.type === 'M'}
/>
);
}}
</ProFormDependency>
</ProForm.Group>
<ProForm.Group>
<ProFormText width={proFormItemStyleProps.column2Width} name="remark"
initialValue={props.values.remark}
label={<FormattedMessage id="system.menu.table.list.remark" defaultMessage="$$$"/>}
placeholder={`${intl.formatMessage({id: 'common.please_input', defaultMessage: '$$$'})}${intl.formatMessage({id: 'system.menu.table.list.remark', defaultMessage: '$$$'})}`}
required={false}/>
<ProFormSwitch width={proFormItemStyleProps.column2Width} name="hidden" initialValue={props.values.hidden}
label={<FormattedMessage id="system.menu.table.list.hidden" defaultMessage="$$$"/>}
required={false}>
</ProFormSwitch>
</ProForm.Group>
<Modal
width={800}
open={iconSelectorOpen}
onCancel={() => {
setIconSelectorOpen(false);
}}
footer={null}
>
<IconSelector
onSelect={(name: string) => {
form.setFieldsValue({icon: name});
setMenuIconName(name);
setIconSelectorOpen(false);
}}
<ProFormText
width={proFormItemStyleProps.column2Width}
name="remark"
initialValue={props.values.remark}
label={<FormattedMessage id="system.menu.table.list.remark" defaultMessage="$$$" />}
placeholder={`${intl.formatMessage({
id: 'common.please_input',
defaultMessage: '$$$',
})}${intl.formatMessage({ id: 'system.menu.table.list.remark', defaultMessage: '$$$' })}`}
required={false}
/>
</Modal>
</ModalForm>)
}
<ProFormSwitch
width={proFormItemStyleProps.column2Width}
name="hidden"
initialValue={props.values.hidden}
label={<FormattedMessage id="system.menu.table.list.hidden" defaultMessage="$$$" />}
required={false}
></ProFormSwitch>
</ProForm.Group>
</ModalForm>
);
};
export default UpdateForm;

@ -8,7 +8,11 @@ export function getIcon(name: string): React.ReactNode | string {
return icon || '';
}
export function createIcon(icon: string | any): React.ReactNode | string {
export function createIcon(icon?: string | any): React.ReactNode | string {
if(!icon){
return ''
}
console.log(icon,'createIcon_icon')
if (typeof icon === 'object') {
return icon;
}

Loading…
Cancel
Save