import React, { useState, useEffect } from 'react'; import { Form, Input, notification, Select } from 'antd'; import SiteModal from '@/components/Modal/SiteModa'; import { addRole, getRoleGroup, getWebConfigTypes, } from '@/services/userCenter/roleManage/api'; 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, siteList } = props; const [typeList, setTypeList] = useState([]); // 应用类别 useEffect(() => { itemObj.groupflag && form.setFieldsValue({ group: itemObj.groupflag, }); itemObj && form.setFieldsValue({ subSystemValue: itemObj.visibleValue, }); return () => { form.resetFields(); }; }, [itemObj]); useEffect(() => { getWebConfigTypes({}).then(res => { if (res.code === 0) { const { data } = res; const arr = Object.entries(data); const list = []; arr.map((item, index) => { console.log(item, 'item'); if (item[1] === '小程序') { item[1] = '移动应用'; } if (item[1] === '手持系统') { return; } let obj = { key: index, value: item[0], label: item[1], }; list.push(obj); }); setTypeList(list); console.log(list); } console.log(res, 'resss'); }); }, [itemObj]); const onSubmit = () => { form .validateFields() .then(res => { console.log(form.getFieldsValue()); setLoading(true); addRole({ roleName: res.roleName, description: res.description, group: res.group, subSystemValue: res.subSystemValue || '', }) .then(res => { setLoading(false); if (res.msg==='') { let id = res.roleID; form.resetFields(); notification.success({ message: '提示', duration: 3, description: '新增成功', }); confirmModal(id); } else { notification.error({ message: '提示', duration: 15, 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([]); console.log(form.getFieldsValue().subSystemValue); getRoleGroup({ _version: 9999, _dc: Date.now(), // subSystemValue: itemObj.subSystemValue || itemObj.visibleValue || '', // subSystemName: itemObj.subSystemValue || itemObj.visibleValue || '', subSystemValue: form.getFieldsValue().subSystemValue || '', subSystemName: form.getFieldsValue().subSystemValue || '', }) .then(res => { if (res) { setGroupList(res); } else { notification.error({ message: '提示', duration: 15, description: res.message, }); setGroupList([]); } }) .catch(err => { console.error(err); }); }; const handleSelect = () => { // getWebConfigTypes({}).then(res => { // if (res.code === 0) { // const { data } = res; // const arr = Object.entries(data); // const list = []; // arr.map((item, index) => { // let obj = { // key: index, // value: item[0], // label: item[1], // }; // list.push(obj); // }); // setTypeList(list); // console.log(list); // } // console.log(res, 'resss'); // }); }; const handleChange = e => { console.log(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 }} // initialValues={{ // subSystemValue: itemObj.subSystemValue || itemObj.visibleValue, // }} > <Item label="角色名称" name="roleName" rules={[ { required: true, message: '请输入角色名称', }, ]} > <Input placeholder="请输入角色名称" /> </Item> <Item label="角色类别" name="subSystemValue" rules={[ { required: true, message: '请选择角色类别', }, ]} > {/* {itemObj.subSystemValue || itemObj.visibleValue} */} <Select placeholder="请选择角色类别" onFocus={() => { handleSelect(); }} onChange={e => { handleChange(e); }} disabled > {typeList.map(item => ( <Option value={item.value} key={item.key}> {item.label} </Option> ))} </Select> </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="请输入角色描述" /> </Item> </Form> </SiteModal> ); }; export default AddModal;