213 lines
8.3 KiB
TypeScript
213 lines
8.3 KiB
TypeScript
import { ProForm, ProFormDigit, ProFormRadio, ProFormText, ProFormTextArea, ProFormTreeSelect } from "@ant-design/pro-components";
|
|
import { Col, FormInstance, message, Modal, Row } from "antd";
|
|
import { useRef, useState } from "react";
|
|
import { connect } from "umi";
|
|
import { ConnectState } from "@/models/global";
|
|
import { handleAddMenus, handleGetMenuList } from "../service";
|
|
|
|
type DetailProps = {
|
|
currentUser?: any // 用户详情的公参
|
|
showDrawer: boolean // 显示悬浮框的判断
|
|
parentRow?: any // 点击的行 编辑的时候有用
|
|
setShowDrawer: any // 改变悬浮框现实状态
|
|
parentTableRef?: any // 父级表格实例
|
|
}
|
|
const AddMenu = ({ currentUser, showDrawer, parentRow, setShowDrawer, parentTableRef }: DetailProps) => {
|
|
console.log('showDrawer', showDrawer);
|
|
// 表单实例
|
|
const formRef = useRef<FormInstance>();
|
|
// 当前的菜单类型
|
|
const [currentMenuType, setCurrentMenuType] = useState<number>(1)
|
|
|
|
|
|
return (
|
|
<Modal
|
|
title={parentRow?.id ? '更新菜单' : '新建菜单'}
|
|
width={600}
|
|
open={showDrawer}
|
|
destroyOnClose
|
|
onOk={() => {
|
|
formRef.current?.validateFields().then(async (res: any) => {
|
|
console.log('res', res);
|
|
const req: any = {
|
|
parentId: res.parentId || 1,
|
|
menuCode: res.menuCode,
|
|
menuName: res.menuName,
|
|
menuIcon: res.menuIcon || "",
|
|
menuPath: res.menuPath || "",
|
|
component: "",
|
|
permission: "",
|
|
menuType: res.menuType,
|
|
sortOrder: res.sortOrder,
|
|
hidden: res.hidden === 1 ? false : res.hidden === 2 ? true : '',
|
|
operator: currentUser.adminName
|
|
}
|
|
const data = await handleAddMenus(req)
|
|
console.log('datadsa', data);
|
|
if (data.code === 200) {
|
|
message.success(data.message)
|
|
if (parentTableRef) {
|
|
parentTableRef.current.reload()
|
|
}
|
|
|
|
formRef.current?.resetFields()
|
|
setShowDrawer(false)
|
|
}
|
|
})
|
|
}}
|
|
onCancel={() => {
|
|
setShowDrawer(false)
|
|
}}
|
|
>
|
|
<ProForm
|
|
formRef={formRef}
|
|
submitter={false}
|
|
layout="horizontal"
|
|
labelCol={{ span: 6 }}
|
|
>
|
|
<Row>
|
|
<Col span={24}>
|
|
<ProFormText
|
|
label={currentMenuType === 1 ? "菜单名称" : "模块名称"}
|
|
name={"menuName"}
|
|
rules={[
|
|
{ required: true, message: `请输入${currentMenuType === 1 ? '菜单' : '模块'}名称` }
|
|
]}
|
|
/>
|
|
</Col>
|
|
|
|
<Col span={24}>
|
|
<ProFormText
|
|
label={currentMenuType === 1 ? "菜单编码" : "模块编码"}
|
|
name={"menuCode"}
|
|
rules={[
|
|
{ required: true, message: `请输入${currentMenuType === 1 ? '菜单' : '模块'}编码` }
|
|
]}
|
|
/>
|
|
</Col>
|
|
|
|
<Col span={24}>
|
|
<ProFormTreeSelect
|
|
label={"上级菜单"}
|
|
name={"parentId"}
|
|
request={async () => {
|
|
const req: any = {
|
|
|
|
}
|
|
const data = await handleGetMenuList()
|
|
let res: any = []
|
|
if (data && data.length > 0) {
|
|
res = data
|
|
}
|
|
return res
|
|
}}
|
|
fieldProps={{
|
|
fieldNames: {
|
|
label: "menuName",
|
|
value: "id"
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
|
|
{
|
|
currentMenuType === 1 ?
|
|
<Col span={24}>
|
|
<ProFormText
|
|
name="menuIcon"
|
|
label="菜单图标"
|
|
placeholder="请输入菜单图标字段"
|
|
initialValue={"<ProfileOutlined />"}
|
|
fieldProps={
|
|
{
|
|
addonAfter: <a href='https://ant.design/components/icon-cn/' target='_blank'>去复制</a>
|
|
}
|
|
}
|
|
|
|
/>
|
|
</Col> : ""
|
|
}
|
|
|
|
{
|
|
currentMenuType === 2 ?
|
|
<Col span={24}>
|
|
<ProFormText
|
|
name="menuPath"
|
|
label="模块地址"
|
|
placeholder="请输入模块地址"
|
|
/>
|
|
</Col> : ''
|
|
}
|
|
|
|
<Col span={24}>
|
|
<ProFormDigit
|
|
name="sortOrder"
|
|
label="索引"
|
|
placeholder="请输入索引"
|
|
|
|
min={0}
|
|
max={9999}
|
|
fieldProps={{ precision: 0 }}
|
|
/>
|
|
</Col>
|
|
|
|
<Col span={24}>
|
|
<ProFormRadio.Group
|
|
name="hidden"
|
|
label="状态"
|
|
initialValue={1}
|
|
|
|
options={[
|
|
{
|
|
label: '有效',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '隐藏',
|
|
value: 2,
|
|
}]}
|
|
/>
|
|
</Col>
|
|
|
|
<Col span={24}>
|
|
<ProFormRadio.Group
|
|
name="menuType"
|
|
label="菜单类型"
|
|
initialValue={1}
|
|
rules={[
|
|
{ required: true, message: "请选择菜单类型" }
|
|
]}
|
|
options={[
|
|
{
|
|
label: '菜单',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '模块',
|
|
value: 2,
|
|
}
|
|
]}
|
|
fieldProps={{
|
|
onChange: (e: any) => {
|
|
console.log('e', e);
|
|
setCurrentMenuType(Number(e.target.value))
|
|
}
|
|
}}
|
|
/>
|
|
</Col>
|
|
|
|
{/* <Col span={24}>
|
|
<ProFormTextArea
|
|
name="DESC"
|
|
label="备注说明"
|
|
placeholder="请输入说明"
|
|
/>
|
|
</Col> */}
|
|
</Row>
|
|
</ProForm>
|
|
</Modal>
|
|
);
|
|
}
|
|
export default connect(({ user }: ConnectState) => ({
|
|
currentUser: user.data
|
|
}))(AddMenu); |