265 lines
12 KiB
TypeScript
265 lines
12 KiB
TypeScript
import './proj-config-list-mod.css';
|
||
import {
|
||
Alert,
|
||
Button, Col, Flex, Form, Input,
|
||
message, Modal, Row, Spin,
|
||
} from "antd";
|
||
// import { 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";
|
||
import { MAX_MOD_SIZE, MAX_MOD_SIZE_FREE, MIN_MOD_SIZE, MIN_MOD_SIZE_FREE } from "./ProjConfigModList.tsx";
|
||
|
||
type FormFieldType = {
|
||
projId: string;
|
||
modName: string;
|
||
modDesc: string;
|
||
modIcon: string;
|
||
fields: IModField[];
|
||
}
|
||
|
||
type PropsType = {
|
||
isFree?: boolean;
|
||
projModId?: string
|
||
closeModal?: any
|
||
projId?:string
|
||
}
|
||
|
||
export default function ProjConfigModEdit(props: PropsType) {
|
||
// 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 minSize = props.isFree ? MIN_MOD_SIZE_FREE : MIN_MOD_SIZE;
|
||
const maxSize = props.isFree ? MAX_MOD_SIZE_FREE : MAX_MOD_SIZE;
|
||
|
||
const height = window.innerHeight - 230;
|
||
|
||
useEffect(() => {
|
||
// console.log('嘻嘻嘻',props.projModId);
|
||
|
||
get<any>({
|
||
messageApi,
|
||
url: `api/proj-mod/get/${props.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: <a onClick={() => {
|
||
if(props.isFree) {
|
||
nav(`/proj-efree/${pathParams.projId}`)
|
||
} else {
|
||
`/proj-edit/${pathParams.projId}`
|
||
}
|
||
}}>编辑项目</a>
|
||
},
|
||
{
|
||
title: <a onClick={() => {
|
||
nav(-1);
|
||
}}>系统菜单管理</a>
|
||
},
|
||
{title: '编辑菜单'},
|
||
]}
|
||
/> */}
|
||
<div className="mod-edit-container" style={{ height: `${height}px`, marginTop: '17px', overflow: 'auto' }}>
|
||
<Alert message={`菜单指的是系统的功能，最少${minSize}个菜单，最多${maxSize}个菜单`} 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"
|
||
size='large'
|
||
// style={{backgroundColor: 'var(--color-primary)'}}
|
||
>
|
||
保存
|
||
</Button>
|
||
<Button type="default" htmlType="button"
|
||
size='large'
|
||
onClick={() => {
|
||
props.closeModal()
|
||
get<any>({
|
||
messageApi,
|
||
url: `api/proj-mod/get/${props.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)
|
||
}
|
||
})
|
||
}}>
|
||
返回
|
||
</Button>
|
||
</Flex>
|
||
</div>
|
||
</Form.Item>
|
||
</Form>
|
||
|
||
</div>
|
||
</div>
|
||
<Modal title="提示"
|
||
okText="确定"
|
||
cancelText="取消"
|
||
open={isEditModalOpen}
|
||
onOk={() => {
|
||
setIsEditModalOpen(false);
|
||
|
||
// const reg = /^[\u4e00-\u9fa5]+$/; // 中文字符的正则表达式
|
||
// console.log(((form.getFieldValue('fields'))));
|
||
|
||
|
||
const isChinese =
|
||
(form.getFieldValue('fields')).every((item: { fieldDesc: string; }) => {
|
||
return /^([\u4e00-\u9fa5a-zA-Z]+)$/.test(item.fieldDesc);
|
||
});
|
||
|
||
// console.log(isChinese);
|
||
|
||
if (!isChinese) {
|
||
messageApi.error('描述由中文和字母组成')
|
||
} else {
|
||
put({
|
||
messageApi,
|
||
url: `/api/proj-mod/update/${props.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('编辑成功');
|
||
setTimeout(function () {
|
||
// 刷新当前页面
|
||
// location.reload();
|
||
// 返回上一页
|
||
// nav(-1);
|
||
props.closeModal()
|
||
}, 1000);
|
||
},
|
||
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 />
|
||
</>
|
||
)
|
||
|
||
} |