diff --git a/config/defaultIcon.ts b/config/defaultIcon.ts
new file mode 100644
index 0000000..42ee906
--- /dev/null
+++ b/config/defaultIcon.ts
@@ -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',
+};
diff --git a/src/components/IconSelector/Category.tsx b/src/components/IconSelector/Category.tsx
index dd0e93f..1a862c3 100644
--- a/src/components/IconSelector/Category.tsx
+++ b/src/components/IconSelector/Category.tsx
@@ -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>
diff --git a/src/components/IconSelector/CopyableIcon.tsx b/src/components/IconSelector/CopyableIcon.tsx
index 371cba0..214b5c7 100644
--- a/src/components/IconSelector/CopyableIcon.tsx
+++ b/src/components/IconSelector/CopyableIcon.tsx
@@ -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);
diff --git a/src/components/IconSelector/index.tsx b/src/components/IconSelector/index.tsx
index 16d3f59..01f9a5d 100644
--- a/src/components/IconSelector/index.tsx
+++ b/src/components/IconSelector/index.tsx
@@ -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}
</>
diff --git a/src/components/RightContent/index.tsx b/src/components/RightContent/index.tsx
index 1dbdf7e..4418bb9 100644
--- a/src/components/RightContent/index.tsx
+++ b/src/components/RightContent/index.tsx
@@ -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>
);
};
diff --git a/src/global.css b/src/global.css
index 4212bf1..b9bc39e 100644
--- a/src/global.css
+++ b/src/global.css
@@ -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;
+}
diff --git a/src/global.less b/src/global.less
index d7bcdc5..c8020ac 100644
--- a/src/global.less
+++ b/src/global.less
@@ -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{
diff --git a/src/pages/System/MenuList/component/CreateForm.tsx b/src/pages/System/MenuList/component/CreateForm.tsx
index 5b00b56..38df1f7 100644
--- a/src/pages/System/MenuList/component/CreateForm.tsx
+++ b/src/pages/System/MenuList/component/CreateForm.tsx
@@ -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>
);
};
diff --git a/src/pages/System/MenuList/component/UpdateForm.tsx b/src/pages/System/MenuList/component/UpdateForm.tsx
index 25315c2..fbe5bf4 100644
--- a/src/pages/System/MenuList/component/UpdateForm.tsx
+++ b/src/pages/System/MenuList/component/UpdateForm.tsx
@@ -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;
diff --git a/src/utils/IconUtil.ts b/src/utils/IconUtil.ts
index 31102ee..19446c4 100644
--- a/src/utils/IconUtil.ts
+++ b/src/utils/IconUtil.ts
@@ -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;
}