Tenlion/system-copyright-react
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加功能菜单列表、新增、编辑功能

Browse Source
This commit is contained in:
WenC 2024-03-23 18:58:39 +08:00
parent 96114d1520
commit 1111c6ff0b
10 changed files with 672 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -12,6 +12,7 @@
"axios": "^1.6.7",
"localforage": "^1.10.0",
"match-sorter": "^6.3.4",
"pinyin-pro": "^3.19.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",
@ -3186,6 +3187,11 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/pinyin-pro": {
"version": "3.19.6",
"resolved": "https://registry.npmjs.org/pinyin-pro/-/pinyin-pro-3.19.6.tgz",
"integrity": "sha512-oWb34orr12+DjXf6gtGMB+gIpjRi7DZzyJE66ultbmNzVhpimM/utGtMI8GcbOy/lb26Ph/nogwNYriRPu+SGQ=="
},
"node_modules/postcss": {
"version": "8.4.35",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",

1
package.json
View File

@ -14,6 +14,7 @@
"axios": "^1.6.7",
"localforage": "^1.10.0",
"match-sorter": "^6.3.4",
"pinyin-pro": "^3.19.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",

48
src/components/faicon/FaIconSelect.tsx Normal file
View File

@ -0,0 +1,48 @@
import {Radio} from "antd";
type Faicon = {
selectedIcon: string;
handleClick(value: string): void;
}
export default function FaiconSelect(props: Faicon) {
const faIcons: string[] = [
'fa-list', 'fa-list-alt', 'fa-table', 'fa-heart', 'fa-user-md', 'fa-heartbeat', 'fa-file', 'fa-money',
'fa-taxi', 'fa-tags', 'fa-tag', 'fa-tv', 'fa-user', 'fa-users', 'fa-star', 'fa-support',
'fa-address-book', 'fa-bandcamp', 'fa-address-card', 'fa-bath', 'fa-eercast', 'fa-adjust', 'fa-asl-interpreting', 'fa-anchor',
'fa-archive', 'fa-area-chart', 'fa-assistive-listening-systems', 'fa-asterisk', 'fa-audio-description', 'fa-automobile', 'fa-balance-scale',
'fa-ban', 'fa-bank', 'fa-bar-chart', 'fa-barcode', 'fa-bars', 'fa-battery', 'fa-bicycle', 'fa-bug',
'fa-calculator', 'fa-calendar', 'fa-camera', 'fa-car', 'fa-check-square', 'fa-child', 'fa-clock-o', 'fa-cloud',
'fa-coffee', 'fa-cogs', 'fa-cog', 'fa-comments', 'fa-copyright', 'fa-database', 'fa-dashboard', 'fa-desktop',
'fa-envelope', 'fa-fax', 'fa-female', 'fa-file-code-o', 'fa-file-archive-o', 'fa-file-image-o', 'fa-file-audio-o', 'fa-file-excel-o',
'fa-file-pdf-o', 'fa-file-movie-o', 'fa-file-powerpoint-o', 'fa-file-word-o', 'fa-flag', 'fa-film', 'fa-folder', 'fa-globe',
'fa-free-code-camp', 'fa-list-ol', 'fa-list-ul', 'fa-paperclip', 'fa-unlink', 'fa-sliders', 'fa-sitemap', 'fa-terminal',
'fa-telegram', 'fa-meetup', 'fa-ravelry', 'fa-superpowers', 'fa-window-restore', 'fa-window-maximize', 'fa-linode', 'fa-handshake-o',
'fa-wpexplorer', 'fa-comment', 'fa-comment-o', 'fa-commenting', 'fa-commenting-o', 'fa-comments-o',
'fa-microchip', 'fa-podcast', 'fa-at', 'fa-cloud-download', 'fa-cloud-upload', 'fa-code', 'fa-code-fork', 'fa-compass',
'fa-creative-commons', 'fa-diamond', 'fa-exclamation-circle', 'fa-exclamation-triangle', 'fa-keyboard-o', 'fa-language', 'fa-laptop', 'fa-leaf',
'fa-lemon-o', 'fa-legal', 'fa-lightbulb-o', 'fa-line-chart', 'fa-lock', 'fa-magic', 'fa-magnet', 'fa-map',
'fa-map-marker', 'fa-map-o', 'fa-map-pin', 'fa-map-signs', 'fa-meh-o', 'fa-microphone', 'fa-mobile', 'fa-moon-o',
'fa-mortar-board', 'fa-motorcycle', 'fa-music', 'fa-paper-plane', 'fa-paw', 'fa-object-group', 'fa-pie-chart', 'fa-qrcode',
'fa-recycle', 'fa-road', 'fa-rocket', 'fa-shopping-bag', 'fa-signing', 'fa-street-view', 'fa-thumb-tack', 'fa-ticket',
'fa-tint', 'fa-tree', 'fa-trophy', 'fa-truck', 'fa-umbrella', 'fa-universal-access', 'fa-user-secret', 'fa-video-camera',
]
return (
<>
<div>
<Radio.Group style={{width: '100%'}} defaultValue={props.selectedIcon} onChange={(e) => {
props.handleClick(e.target.value);
}}>
{
faIcons.map(item => <Radio value={`fa ${item}`} key={item}>
<span
style={{display: 'inline-block', width: '50px', fontSize: '20px', textAlign: 'center'}}>
<i className={`fa ${item}`}></i>
</span>
</Radio>)
}
</Radio.Group>
</div>
</>
)
}

139
src/components/modfield/ModField.tsx Normal file
View File

@ -0,0 +1,139 @@
import './modfield.css'
import {Alert, Button, Input, message, Table, TableProps} from "antd";
import {useEffect, useState} from "react";
import {DeleteOutlined, PlusOutlined} from "@ant-design/icons";
import {pinyin} from "pinyin-pro";
export interface IModField {
projModFieldId: string;
fieldDesc: string;
fieldName: string;
fieldType: string;
}
interface PropsType {
scrollHeight?: number;
modFiledArray?: IModField[];
isEdit?: boolean;
handleChange?(modFieldArray: undefined | IModField[]): void;
}
export default function ModField(props: PropsType) {
const [messageApi, contextHolder] = message.useMessage();
const [tableDataArray, setTableDataArray] = useState<IModField[]>([]);
const isFiledNameExist = function (index: number, fieldName: string) {
for (let i = 0; i < tableDataArray.length; i++) {
if (i != index && tableDataArray[i].fieldName === fieldName) {
return true;
}
}
return false;
}
const handleChange = () => {
props.handleChange?.(tableDataArray.filter(item => item.fieldName));
}
useEffect(() => {
if (props.modFiledArray) {
setTableDataArray(props.modFiledArray)
}
}, [props.modFiledArray])
const columns: TableProps<IModField>['columns'] = [
{
title: '描述*',
dataIndex: 'fieldDesc',
render: (text, _record, index) => {
if (props.isEdit) {
return (
<Input defaultValue={text} onChange={(e) => {
const item = tableDataArray[index];
const value = e.target.value;
const fieldName = pinyin(value, {
pattern: 'first',
toneType: 'none',
type: 'array'
}).join('');
if (isFiledNameExist(index, fieldName)) {
messageApi.open({
type: 'error',
content: `字段名【${value}】已存在`
});
item.fieldName = '';
} else {
item.fieldDesc = value;
item.fieldName = fieldName;
}
setTableDataArray([...tableDataArray]);
handleChange();
}}/>
)
} else {
return text;
}
}
},
{
title: '名称',
dataIndex: 'fieldName',
align: 'center',
width: 150,
},
{
title: '操作',
dataIndex: 'option',
align: 'center',
width: 100,
render: (_text, _record, index) => {
if (props.isEdit) {
return (
<Button type="primary" size="small" danger onClick={() => {
tableDataArray.splice(index, 1);
setTableDataArray([...tableDataArray]);
handleChange();
}}><DeleteOutlined/></Button>
)
} else {
return ''
}
}
},
];
return (
<>
{contextHolder}
<div className="mod-field-container">
<Alert
message="菜单属性"
description="说明：菜单属性会动态建表并添加模拟数据，字段 描述 为中文且在当前菜单中不可重复（这里的不能重复指的是自动生成的拼音名称不能重复），可以有数字，但不能以数字开头，字段 名称 会根据拼音首字母自动生成"
type="success"
/>
{
props.isEdit ? (
<div className="mod-field-table-btn">
<Button type="default" onClick={() => {
setTableDataArray([
...tableDataArray,
{
projModFieldId: '' + (tableDataArray.length + 1),
fieldType: 'string',
fieldDesc: '',
fieldName: '',
}
])
}}><PlusOutlined/> 添加属性</Button>
</div>
) : <></>
}
<Table dataSource={tableDataArray} columns={columns} pagination={false} bordered
scroll={{y: props.scrollHeight ? props.scrollHeight : 300}}
style={{marginTop: '15px'}}
rowKey="projModFieldId"/>
</div>
</>
)
}

7
src/components/modfield/modfield.css Normal file
View File

@ -0,0 +1,7 @@
.mod-field-container {
}
.mod-field-container .mod-field-table-btn {
margin-top: 15px;
}

10
src/layout/body/Body.tsx
View File

@ -13,6 +13,8 @@ import ProjEditStep5 from "../../route/proj/edit/ProjEditStep5.tsx";
import ProjEditStep6 from "../../route/proj/edit/ProjEditStep6.tsx";
import ProjConfigLoginpage from "../../route/proj/edit/ProjConfigLoginpage.tsx";
import ProjConfigModList from "../../route/proj/edit/ProjConfigModList.tsx";
import ProjConfigModSave from "../../route/proj/edit/ProjConfigModSave.tsx";
import ProjConfigModEdit from "../../route/proj/edit/ProjConfigModEdit.tsx";
const router = createBrowserRouter([
{
@ -63,6 +65,14 @@ const router = createBrowserRouter([
path: '/proj-edit/config-mod-list/:projId',
element: <ProjConfigModList/>
},
{
path: '/proj-edit/config-mod-save/:projId',
element: <ProjConfigModSave/>
},
{
path: '/proj-edit/config-mod-edit/:projId/:projModId',
element: <ProjConfigModEdit/>
},
{
path: '/agent-select/:projId',
element: <AgentSelect/>

198
src/route/proj/edit/ProjConfigModEdit.tsx Normal file
View File

@ -0,0 +1,198 @@
import './proj-config-list-mod.css';
import {
Alert,
Breadcrumb, Button, Col, Flex, Form, Input,
message, Modal, Row, Spin,
} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import FaiconSelect from "../../../components/faicon/FaIconSelect.tsx";
import ModField, {IModField} from "../../../components/modfield/ModField.tsx";
import {get, put} from "../../../util/AjaxUtils.ts";
type FormFieldType = {
projId: string;
modName: string;
modDesc: string;
modIcon: string;
fields: IModField[];
}
export default function ProjConfigModEdit() {
const nav = useNavigate();
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [form] = Form.useForm<FormFieldType>();
const [loading, setLoading] = useState<boolean>(false);
const [isModIconModalOpen, setIsModIconModalOpen] = useState(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [selectedModIcon, setSelectedModIcon] = useState<string>('fa fa-list');
const [fields, setFields] = useState<IModField[]>([]);
const height = window.innerHeight - 180;
useEffect(() => {
get({
messageApi,
url: `api/proj-mod/get/${pathParams.projModId}`,
onSuccess({data}) {
form.setFieldsValue({
projId: data.projId,
modName: data.modName,
modDesc: data.modDesc,
modIcon: data.modIcon,
fields: data.fields,
});
setSelectedModIcon(data.modIcon);
setFields(data.fields)
}
})
}, [])
return (
<>
{contextHolder}
<Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
{title: <Link to={`/proj-edit/config-mod-list/${pathParams.projId}`}>系统菜单管理</Link>},
{title: '编辑菜单'},
]}
/>
<div className="mod-edit-container" style={{height: `${height}px`}}>
<Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
<div className="mod-content">
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{span: 8}}
wrapperCol={{span: 24}}
style={{width: '100%'}}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
>
<Row gutter={15}>
<Col span={10}>
<Form.Item<FormFieldType>
label="菜单名称"
name="modName"
extra="此内容会作为菜单名生成菜单，最多8个字"
rules={[{required: true, message: '请输入菜单名称'}]}
>
<Input placeholder="请输入菜单名称" maxLength={8}/>
</Form.Item>
<Form.Item<FormFieldType>
label="菜单说明"
name="modDesc"
extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字"
rules={[{required: true, message: '请输入菜单说明'}]}
>
<Input.TextArea placeholder="请输入菜单说明" rows={6} maxLength={600}/>
</Form.Item>
<Form.Item<FormFieldType>
label="菜单图标"
name="modIcon"
extra="菜单图标会显示在菜单栏中"
rules={[{required: true, message: '请输入菜单图标'}]}
>
<Button size="large" onClick={() => {
setIsModIconModalOpen(true);
}}><i className={selectedModIcon}></i></Button>
</Form.Item>
</Col>
<Col span={14}>
<Form.Item<FormFieldType>
name="fields"
rules={[{required: true, message: '请添加菜单属性'}]}
>
<ModField modFiledArray={fields}
isEdit={true}
scrollHeight={height - 380}
handleChange={(dataArray) => {
if (!dataArray) {
return;
}
form.setFieldValue('fields', dataArray);
}}/>
</Form.Item>
</Col>
</Row>
<Form.Item wrapperCol={{span: 24}}>
<div style={{paddingTop: '15px'}}>
<Flex align="center" justify="center" gap="large">
<Button type="primary"
htmlType="submit"
style={{backgroundColor: 'var(--color-primary)'}}>
保存
</Button>
<Button type="default" htmlType="button" onClick={() => {
nav(-1);
}}>
返回
</Button>
</Flex>
</div>
</Form.Item>
</Form>
</div>
</div>
<Modal title="提示"
okText="确定"
cancelText="取消"
open={isEditModalOpen}
onOk={() => {
setIsEditModalOpen(false);
put({
messageApi,
url: `/api/proj-mod/update/${pathParams.projModId}`,
body: {
projId: form.getFieldValue('projId'),
modName: form.getFieldValue('modName'),
modDesc: form.getFieldValue('modDesc'),
modIcon: form.getFieldValue('modIcon'),
fields: form.getFieldValue('fields'),
},
onBefore() {
setLoading(true);
},
onSuccess() {
messageApi.success('编辑成功');
},
onFinally() {
setLoading(false);
}
})
}}
onCancel={() => {
setIsEditModalOpen(false);
}}>
<div>确定提交吗？</div>
</Modal>
<Modal title="选择图标"
footer={false}
open={isModIconModalOpen}
onCancel={() => {
setIsModIconModalOpen(false);
}}>
<div style={{maxHeight: '400px', overflow: 'auto'}}>
<FaiconSelect selectedIcon={selectedModIcon}
handleClick={(icon) => {
form.setFieldValue('modIcon', icon);
setSelectedModIcon(icon);
}}
/>
</div>
</Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen/>
</>
)
}

121
src/route/proj/edit/ProjConfigModList.tsx
View File

@ -20,51 +20,14 @@ interface DataType {
modIcon: string;
}
const columns: TableProps<DataType>['columns'] = [
{
title: '菜单标题',
dataIndex: 'modName',
align: 'center',
width: 180
},
{
title: '菜单说明',
dataIndex: 'modDesc',
align: 'center',
},
{
title: '图标',
dataIndex: 'modIcon',
align: 'center',
width: 80
},
{
title: '菜单地址',
dataIndex: 'menuUrl',
align: 'center',
},
{
title: '创建时间',
dataIndex: 'gmtCreate',
align: 'center',
width: 180
},
{
title: '操作',
dataIndex: 'option',
align: 'center',
width: 100
},
];
export default function ProjConfigModList() {
const nav = useNavigate();
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [dataArray, setDataArray] = useState<DataType[]>();
const height = window.innerHeight - 210;
const height = window.innerHeight - 165;
useEffect(() => {
const renderData = () => {
get<DataType>({
messageApi,
url: '/api/proj-mod/list',
@ -74,18 +37,70 @@ export default function ProjConfigModList() {
}
},
onSuccess({data}) {
data.forEach(item => {
item.modIcon = <i className={item.modIcon}></i>
item.option = (
<>
<Button value="default" type="primary" size="small" style={{marginRight: '5px'}}><EditOutlined /></Button>
<Button value="large" type="primary" size="small" danger><DeleteOutlined /></Button>
</>
);
})
setDataArray([...data])
}
})
}
const columns: TableProps<DataType>['columns'] = [
{
title: '菜单标题',
dataIndex: 'modName',
align: 'center',
width: 180
},
{
title: '菜单说明',
dataIndex: 'modDesc',
align: 'center',
},
{
title: '图标',
dataIndex: 'modIcon',
align: 'center',
width: 80,
render: (_text) => {
return <i className={_text}> </i>
}
},
{
title: '菜单地址',
dataIndex: 'menuUrl',
align: 'center',
},
{
title: '创建时间',
dataIndex: 'gmtCreate',
align: 'center',
width: 180
},
{
title: '操作',
dataIndex: 'option',
align: 'center',
width: 100,
render: (_text, record, index) => {
return (
<>
<Button value="default" type="primary" size="small"
style={{marginRight: '5px'}}
onClick={() => {
nav(`/proj-edit/config-mod-edit/${pathParams.projId}/${record.projModId}`)
}}
><EditOutlined/></Button>
<Button value="large" type="primary" size="small" danger
onClick={() => {
}}
><DeleteOutlined/></Button>
</>
)
}
},
];
useEffect(() => {
renderData();
}, [])
return (
@ -100,13 +115,15 @@ export default function ProjConfigModList() {
]}
/>
<div className="mod-list-container" style={{height: `${height}px`}}>
<Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info" />
<Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
<div className="mod-list">
<div className="table-btn-group">
<Button value="small"><PlusOutlined /> 新增</Button>
<Button value="small" onClick={() => {
nav(`/proj-edit/config-mod-save/${pathParams.projId}`)
}}><PlusOutlined/> 新增</Button>
</div>
<Table columns={columns} dataSource={dataArray} pagination={{ pageSize: 20 }} scroll={{ y: height - 210 }} size="middle" bordered key="dataTable" rowKey="projModId"/>
<Table columns={columns} dataSource={dataArray} pagination={{pageSize: 20}}
scroll={{y: height - 210}} size="middle" bordered key="dataTable" rowKey="projModId"/>
</div>
</div>
</>

185
src/route/proj/edit/ProjConfigModSave.tsx Normal file
View File

@ -0,0 +1,185 @@
import './proj-config-list-mod.css';
import {
Alert,
Breadcrumb, Button, Col, Flex, Form, Input,
message, Modal, Row, Spin,
} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import FaiconSelect from "../../../components/faicon/FaIconSelect.tsx";
import ModField, {IModField} from "../../../components/modfield/ModField.tsx";
import {post} from "../../../util/AjaxUtils.ts";
type FormFieldType = {
modName: string;
modDesc: string;
modIcon: string;
fields: IModField[];
}
export default function ProjConfigModSave() {
const nav = useNavigate();
const pathParams = useParams();
const [messageApi, contextHolder] = message.useMessage();
const [form] = Form.useForm<FormFieldType>();
const [loading, setLoading] = useState<boolean>(false);
const [isModIconModalOpen, setIsModIconModalOpen] = useState(false);
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
const [selectedModIcon, setSelectedModIcon] = useState<string>('fa fa-list');
const height = window.innerHeight - 180;
useEffect(() => {
form.setFieldsValue({
modIcon: 'fa fa-list'
})
}, [])
return (
<>
{contextHolder}
<Breadcrumb
items={[
{title: <Link to={'/'}>首页</Link>},
{title: <Link to={'/proj-create'}>创建项目</Link>},
{title: <Link to={`/proj-edit/${pathParams.projId}`}>编辑项目</Link>},
{title: <Link to={`/proj-edit/config-mod-list/${pathParams.projId}`}>系统菜单管理</Link>},
{title: '添加菜单'},
]}
/>
<div className="mod-edit-container" style={{height: `${height}px`}}>
<Alert message="菜单指的是系统的功能，最少10个菜单，最多15个菜单" type="info"/>
<div className="mod-content">
<Form
name="basic"
form={form}
layout="vertical"
labelCol={{span: 8}}
wrapperCol={{span: 24}}
style={{width: '100%'}}
onFinish={() => {
setIsEditModalOpen(true);
}}
autoComplete="off"
>
<Row gutter={15}>
<Col span={10}>
<Form.Item<FormFieldType>
label="菜单名称"
name="modName"
extra="此内容会作为菜单名生成菜单，最多8个字"
rules={[{required: true, message: '请输入菜单名称'}]}
>
<Input placeholder="请输入菜单名称" maxLength={8}/>
</Form.Item>
<Form.Item<FormFieldType>
label="菜单说明"
name="modDesc"
extra="此内容会作为功能描述生成到操作手册中，请详细描述，最多600字"
rules={[{required: true, message: '请输入菜单说明'}]}
>
<Input.TextArea placeholder="请输入菜单说明" rows={6} maxLength={600}/>
</Form.Item>
<Form.Item<FormFieldType>
label="菜单图标"
name="modIcon"
extra="菜单图标会显示在菜单栏中"
rules={[{required: true, message: '请输入菜单图标'}]}
>
<Button size="large" onClick={() => {
setIsModIconModalOpen(true);
}}><i className={selectedModIcon}></i></Button>
</Form.Item>
</Col>
<Col span={14}>
<Form.Item<FormFieldType>
name="fields"
rules={[{required: true, message: '请添加菜单属性'}]}
>
<ModField
isEdit={true}
scrollHeight={height - 380}
handleChange={(dataArray) => {
if (!dataArray) {
return;
}
form.setFieldValue('fields', dataArray);
}}/>
</Form.Item>
</Col>
</Row>
<Form.Item wrapperCol={{span: 24}}>
<div style={{paddingTop: '15px'}}>
<Flex align="center" justify="center" gap="large">
<Button type="primary"
htmlType="submit"
style={{backgroundColor: 'var(--color-primary)'}}>
保存
</Button>
<Button type="default" htmlType="button" onClick={() => {
nav(-1);
}}>
返回
</Button>
</Flex>
</div>
</Form.Item>
</Form>
</div>
</div>
<Modal title="提示"
okText="确定"
cancelText="取消"
open={isEditModalOpen}
onOk={() => {
setIsEditModalOpen(false);
post({
messageApi,
url: `/api/proj-mod/save`,
body: {
projId: pathParams.projId,
modName: form.getFieldValue('modName'),
modDesc: form.getFieldValue('modDesc'),
modIcon: form.getFieldValue('modIcon'),
fields: form.getFieldValue('fields'),
},
onBefore() {
setLoading(true);
},
onSuccess() {
messageApi.success('添加成功');
nav(0);
},
onFinally() {
setLoading(false);
}
})
}}
onCancel={() => {
setIsEditModalOpen(false);
}}>
<div>确定提交吗？</div>
</Modal>
<Modal title="选择图标"
footer={false}
open={isModIconModalOpen}
onCancel={() => {
setIsModIconModalOpen(false);
}}>
<div style={{maxHeight: '400px', overflow: 'auto'}}>
<FaiconSelect selectedIcon={selectedModIcon}
handleClick={(icon) => {
form.setFieldValue('modIcon', icon);
setSelectedModIcon(icon);
}}
/>
</div>
</Modal>
<Spin tip="正在提交..." spinning={loading} fullscreen/>
</>
)
}

9
src/route/proj/edit/proj-config-list-mod.css
View File

@ -10,4 +10,13 @@
.mod-list-container .mod-list .table-btn-group .ant-btn {
margin-right: 5px;
}
.mod-edit-container {
background-color: var(--color-light);
padding: 15px;
}
.mod-edit-container .mod-content {
margin-top: 15px;
}