|  |  | 
 |  |  |     ProFormDateTimePicker, | 
 |  |  |     ProFormTreeSelect | 
 |  |  | } from '@ant-design/pro-components'; | 
 |  |  | import { Form, Modal } from 'antd'; | 
 |  |  | import { Form, Modal, Col } from 'antd'; | 
 |  |  | import moment from 'moment'; | 
 |  |  | import Http from '@/utils/http'; | 
 |  |  | import { createIcon } from '@/utils/icon-util' | 
 |  |  | import IconSelector from '@/components/IconSelector'; | 
 |  |  |  | 
 |  |  | const Edit = (props) => { | 
 |  |  |     const [menuType, setMenuType] = useState(0); | 
 |  |  |     const [menuIconName, setMenuIconName] = useState(); | 
 |  |  |     const [iconSelectorOpen, setIconSelectorOpen] = useState(false); | 
 |  |  |  | 
 |  |  |     const [form] = Form.useForm(); | 
 |  |  |     const { } = props; | 
 |  |  |  | 
 |  |  | 
 |  |  |                         disabled | 
 |  |  |                         hidden={true} | 
 |  |  |                     /> | 
 |  |  |  | 
 |  |  |                     <ProFormTreeSelect | 
 |  |  |                         name="parentId" | 
 |  |  |                         label="上级菜单" | 
 |  |  |                         params={props.treeData} | 
 |  |  |                         request={async () => { | 
 |  |  |                             return props.treeData; | 
 |  |  |                         }} | 
 |  |  |                         placeholder="请选择" | 
 |  |  |                         rules={[{ required: true, message: "上级菜单不能为空" }]} | 
 |  |  |                         fieldProps={{ | 
 |  |  |                             defaultValue: 0 | 
 |  |  |                         }} | 
 |  |  |                     /> | 
 |  |  |                     <ProForm.Group> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="name" | 
 |  |  |                             label="名称" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                             rules={[{ required: true, message: "名称不能为空!" }]} | 
 |  |  |                         /> | 
 |  |  |                         <ProFormDigit | 
 |  |  |                         <ProFormTreeSelect | 
 |  |  |                             name="parentId" | 
 |  |  |                             label="上级菜单" | 
 |  |  |                             params={props.treeData} | 
 |  |  |                             request={async () => { | 
 |  |  |                                 return props.treeData; | 
 |  |  |                             }} | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             fieldProps={{ precision: 0 }} | 
 |  |  |                             placeholder="请选择" | 
 |  |  |                             rules={[{ required: true, message: "上级菜单不能为空" }]} | 
 |  |  |                             fieldProps={{ | 
 |  |  |                                 treeDefaultExpandedKeys: [0] | 
 |  |  |                             }} | 
 |  |  |                         /> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="name" | 
 |  |  |                             label="菜单名称" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                             rules={[{ required: true, message: "菜单名称不能为空!" }]} | 
 |  |  |                         /> | 
 |  |  |                     </ProForm.Group> | 
 |  |  |                     <ProForm.Group> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="parentName" | 
 |  |  |                             label="上级菜单名" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="path" | 
 |  |  |                             label="关联路径" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                     </ProForm.Group> | 
 |  |  |                     <ProForm.Group> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="pathName" | 
 |  |  |                             label="关联路径名" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="route" | 
 |  |  |                             label="路由地址" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                     </ProForm.Group> | 
 |  |  |                     <ProForm.Group> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="component" | 
 |  |  |                             label="页面组件" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="brief" | 
 |  |  |                             label="简述" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                     </ProForm.Group> | 
 |  |  |                     <ProForm.Group> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="code" | 
 |  |  |                             label="标识" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                         <ProFormSelect | 
 |  |  |                             name="type" | 
 |  |  |                             label="类型" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             colProps={{ md: 10, xl: 610 }} | 
 |  |  |                             placeholder="请选择" | 
 |  |  |                             options={[ | 
 |  |  |                                 { label: '菜单', value: 0 }, | 
 |  |  |                                 { label: '按钮', value: 1 }, | 
 |  |  |                             ]} | 
 |  |  |                             fieldProps={{ | 
 |  |  |                                 defaultValue: 0, | 
 |  |  |                                 onChange: (e) => { | 
 |  |  |                                     setMenuType(e); | 
 |  |  |                                 }, | 
 |  |  |                             }} | 
 |  |  |                             rules={[{ required: true, message: "类型不能为空!" }]} | 
 |  |  |                         /> | 
 |  |  |                     </ProForm.Group> | 
 |  |  |                     <ProForm.Group> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="authority" | 
 |  |  |                             label="权限标识" | 
 |  |  |                             hidden={menuType !== 1} | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                         <ProFormText | 
 |  |  |                         <ProFormSelect | 
 |  |  |                             name="icon" | 
 |  |  |                             label="菜单图标" | 
 |  |  |                             hidden={menuType !== 0} | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                             valueEnum={{}} | 
 |  |  |                             addonBefore={createIcon(menuIconName)} | 
 |  |  |                             fieldProps={{ | 
 |  |  |                                 onClick: () => { | 
 |  |  |                                     setIconSelectorOpen(true); | 
 |  |  |                                 }, | 
 |  |  |                             }} | 
 |  |  |                         /> | 
 |  |  |                     </ProForm.Group> | 
 |  |  |                     <ProForm.Group> | 
 |  |  | 
 |  |  |                             fieldProps={{ precision: 0 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                         <ProFormText | 
 |  |  |                             name="meta" | 
 |  |  |                             label="元信息" | 
 |  |  |                             colProps={{ md: 12, xl: 12 }} | 
 |  |  |                             placeholder="请输入" | 
 |  |  |                         /> | 
 |  |  |                     </ProForm.Group> | 
 |  |  |                     <ProForm.Group> | 
 |  |  |                         <ProFormSelect | 
 |  |  |                             name="status" | 
 |  |  |                             label="状态" | 
 |  |  | 
 |  |  |                             ]} | 
 |  |  |                         /> | 
 |  |  |                     </ProForm.Group> | 
 |  |  |  | 
 |  |  |                 </ProForm> | 
 |  |  |             </Modal> | 
 |  |  |                 <Modal | 
 |  |  |                     width={800} | 
 |  |  |                     open={iconSelectorOpen} | 
 |  |  |                     onCancel={() => { | 
 |  |  |                         setIconSelectorOpen(false); | 
 |  |  |                     }} | 
 |  |  |                     footer={null} | 
 |  |  |                 > | 
 |  |  |                     <IconSelector | 
 |  |  |                         onSelect={(name) => { | 
 |  |  |                             form.setFieldsValue({ icon: name }); | 
 |  |  |                             setMenuIconName(name); | 
 |  |  |                             setIconSelectorOpen(false); | 
 |  |  |                         }} | 
 |  |  |                     /> | 
 |  |  |                 </Modal> | 
 |  |  |             </Modal > | 
 |  |  |         </> | 
 |  |  |     ) | 
 |  |  | } |