import React, { useState, useEffect } from 'react'; import { Form, Input, notification, Select, Radio, Tooltip, Switch } from 'antd'; import SiteModal from '@/components/Modal/SiteModa'; import { editRole, GetRoleGroup } from '@/services/RoleManage/api'; import { InfoCircleOutlined } from '@ant-design/icons'; const { Item } = Form; const { Option } = Select; const AddModal = props => { const [form] = Form.useForm(); const [formLayout, setFormLayout] = useState('horizontal'); const [groupList, setGroupList] = useState([]); const [loading, setLoading] = useState(false); const { confirmModal = () => {}, itemObj, editVisible, onCancel } = props; const [value, setValue] = useState(''); console.log(itemObj, 'itemObj'); useEffect(() => { console.log(itemObj.BuiltInRole); form.setFieldsValue({ roleName: itemObj.roleName, description: itemObj.description, group: itemObj.group, subSystemValue: itemObj.subSystemValue, BuiltInRole: itemObj.BuiltInRole, }); setValue(itemObj.BuiltInRole); }, [itemObj]); const onSubmit = () => { form .validateFields() .then(res => { console.log(res, 'res'); setLoading(true); console.log(value); editRole({ roleID: itemObj.roleID, roleName: res.roleName, description: res.description, remark: res.group, BuiltInRole: value, // subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '', }) .then(res => { setLoading(false); if (res.msg === '') { form.resetFields(); notification.success({ message: '提示', duration: 3, description: '编辑成功', }); console.log(value); if (value) { confirmModal(true); } else { confirmModal(false); } form.resetFields(); onCancel(); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(err => { setLoading(false); notification.error({ message: '提示', duration: 3, description: err, }); }); }) .catch(err => { console.error(err); }); }; const onChange = value => { console.log(value); const { length } = value; form.setFieldsValue({ group: value[length - 1], }); }; // 获取分组列表 const selectFocus = e => { setGroupList([]); GetRoleGroup({ subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '', subSystemName: itemObj.subSystemValue || itemObj.visibleValue || '', }) .then(res => { if (res) { setGroupList(res.data); } else { notification.error({ message: '提示', duration: 15, description: res.message, }); setGroupList([]); } }) .catch(err => { console.error(err); }); }; const onChangeRadio = e => { setValue(e); }; const onFinish = value => {}; return ( <SiteModal {...props} title="编辑角色" bodyStyle={{ width: '100%', minHeight: '100px' }} style={{ top: 100 }} width="600px" destroyOnClose cancelText="取消" okText="确认" onOk={() => onSubmit()} confirmLoading={loading} > <Form form={form} layout={formLayout} onFinish={onFinish} labelCol={{ span: 4 }}> <Item label="角色名称" name="roleName" rules={[ { required: true, message: '请输入角色名称', }, ]} > <Input placeholder="请输入角色名称" maxLength="20" /> </Item> <Item label="虚拟目录" name="subSystemValue"> {itemObj.subSystemValue || itemObj.visibleValue} </Item> <Item label={ <div> <Tooltip title="内置角色不能配置菜单权限"> <InfoCircleOutlined style={{ color: 'rgb(24, 144, 255)', marginRight: '5px' }} /> </Tooltip> <span>内置角色</span> </div> } name="BuiltInRole" > {console.log(value, 'nalie')} <Switch checkedChildren="是" unCheckedChildren="否" checked={value} onChange={onChangeRadio} /> {/* <Radio.Group onChange={onChangeRadio} value={value}> <Radio value={2}>否</Radio> <Radio value={1}>是</Radio> </Radio.Group> */} </Item> <Item label="角色分组" name="group"> <Select mode="tags" placeholder="请选择分组" onFocus={() => { selectFocus(); }} onChange={e => { onChange(e); }} > {groupList.map((item, index) => ( <Option value={item.value} key={index}> {item.text} </Option> ))} </Select> </Item> <Item label="角色描述" name="description"> <Input placeholder="请输入角色描述" maxLength="100" /> </Item> </Form> </SiteModal> ); }; export default AddModal;