|
@@ -17,7 +17,7 @@ function AddRole(props){
|
|
<>
|
|
<>
|
|
<Breadcrumb separator="">
|
|
<Breadcrumb separator="">
|
|
<Breadcrumb.Item><img className='back-icon' src={backIcon} onClick={back} alt="返回上一页"/></Breadcrumb.Item>
|
|
<Breadcrumb.Item><img className='back-icon' src={backIcon} onClick={back} alt="返回上一页"/></Breadcrumb.Item>
|
|
- <Breadcrumb.Item>组织管理</Breadcrumb.Item>
|
|
|
|
|
|
+ <Breadcrumb.Item>角色管理</Breadcrumb.Item>
|
|
<Breadcrumb.Separator />
|
|
<Breadcrumb.Separator />
|
|
<Breadcrumb.Item>新增角色</Breadcrumb.Item>
|
|
<Breadcrumb.Item>新增角色</Breadcrumb.Item>
|
|
</Breadcrumb>
|
|
</Breadcrumb>
|
|
@@ -33,10 +33,10 @@ function ContentForm(props){
|
|
const [treeDatas, setTreeDatas] = useState([]);
|
|
const [treeDatas, setTreeDatas] = useState([]);
|
|
const [tabDatas, setTabDatas] = useState([]);
|
|
const [tabDatas, setTabDatas] = useState([]);
|
|
const [activeTab, setActiveTab] = useState('');
|
|
const [activeTab, setActiveTab] = useState('');
|
|
- const [sysCheckeds, setSysCheckeds] = useState([]);
|
|
|
|
- const {save} = useContext(RoleContext);
|
|
|
|
- const initialValues={
|
|
|
|
- status:1
|
|
|
|
|
|
+ const { save,detail } = useContext(RoleContext);
|
|
|
|
+ const [sysCheckeds, setSysCheckeds] = useState();
|
|
|
|
+ const initialValues=detail||{
|
|
|
|
+ status:'1'
|
|
};
|
|
};
|
|
const vilidateRules = {
|
|
const vilidateRules = {
|
|
required: '${label}不能为空!',
|
|
required: '${label}不能为空!',
|
|
@@ -53,8 +53,11 @@ function ContentForm(props){
|
|
const data = res.data.data;
|
|
const data = res.data.data;
|
|
const treeDatas = structureTreeData(data);
|
|
const treeDatas = structureTreeData(data);
|
|
setTreeDatas(treeDatas);
|
|
setTreeDatas(treeDatas);
|
|
|
|
+ console.log(43,detail)
|
|
|
|
+ //默认选中第一个tab
|
|
setTabDatas([treeDatas[0]]);
|
|
setTabDatas([treeDatas[0]]);
|
|
setActiveTab(treeDatas[0].key);
|
|
setActiveTab(treeDatas[0].key);
|
|
|
|
+ setSysCheckeds(treeDatas[0]?[treeDatas[0].key]:[]);
|
|
}
|
|
}
|
|
|
|
|
|
})
|
|
})
|
|
@@ -71,12 +74,20 @@ function ContentForm(props){
|
|
children:JSON.parse(obj)
|
|
children:JSON.parse(obj)
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- setSysCheckeds(arr[0]?[arr[0].key]:[]);
|
|
|
|
//form.setFieldsValue({softwares:[{id:arr[0]?[arr[0].key]:''}]}); //默认选中第一个
|
|
//form.setFieldsValue({softwares:[{id:arr[0]?[arr[0].key]:''}]}); //默认选中第一个
|
|
return arr;
|
|
return arr;
|
|
}
|
|
}
|
|
useEffect(()=>{
|
|
useEffect(()=>{
|
|
- getTreeData();
|
|
|
|
|
|
+ if(detail){
|
|
|
|
+ //编辑时权限树从详情中获取,tab数据也是
|
|
|
|
+ const treeDatas = structureTreeData(detail.loginUserMenuResourceTree);
|
|
|
|
+ setTreeDatas(treeDatas);
|
|
|
|
+ setSysCheckeds(detail.sids);
|
|
|
|
+ setTabDatas(treeDatas);
|
|
|
|
+ }else{
|
|
|
|
+ getTreeData();
|
|
|
|
+ }
|
|
|
|
+
|
|
},[]);
|
|
},[]);
|
|
function handleCancel(){
|
|
function handleCancel(){
|
|
|
|
|
|
@@ -89,7 +100,6 @@ function ContentForm(props){
|
|
}
|
|
}
|
|
//树形结构选中事件
|
|
//树形结构选中事件
|
|
function checkTreeEvent(i,idsArr,sourceIds){
|
|
function checkTreeEvent(i,idsArr,sourceIds){
|
|
- console.log(32,i,idsArr,sourceIds,activeTab)
|
|
|
|
const formData=form.getFieldsValue();
|
|
const formData=form.getFieldsValue();
|
|
let arr=formData.softwares;
|
|
let arr=formData.softwares;
|
|
arr[i]={
|
|
arr[i]={
|
|
@@ -104,12 +114,6 @@ function ContentForm(props){
|
|
function onTabChange(activeTab){
|
|
function onTabChange(activeTab){
|
|
setActiveTab(activeTab)
|
|
setActiveTab(activeTab)
|
|
}
|
|
}
|
|
- //状态开关
|
|
|
|
- function switchStatus(checked){
|
|
|
|
- form.setFieldsValue({
|
|
|
|
- status:checked?1:0
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
//开放系统勾选事件
|
|
//开放系统勾选事件
|
|
function softwareChange(checkedValue){
|
|
function softwareChange(checkedValue){
|
|
let arr = [],item;
|
|
let arr = [],item;
|
|
@@ -135,20 +139,23 @@ function ContentForm(props){
|
|
<Form.Item
|
|
<Form.Item
|
|
label="角色名称"
|
|
label="角色名称"
|
|
name='name'
|
|
name='name'
|
|
- rules={[{ required: true},({ getFieldValue }) => ({
|
|
|
|
|
|
+ required
|
|
|
|
+ rules={[({ getFieldValue }) => ({
|
|
validator(_, value) {
|
|
validator(_, value) {
|
|
- if (value.length<51) {
|
|
|
|
|
|
+ if(!value){
|
|
|
|
+ return Promise.reject(new Error('角色名称不能为空!'));
|
|
|
|
+ }else if (value.length<51) {
|
|
return Promise.resolve();
|
|
return Promise.resolve();
|
|
}
|
|
}
|
|
return Promise.reject(new Error('格式错误!'));
|
|
return Promise.reject(new Error('格式错误!'));
|
|
},
|
|
},
|
|
}),]}>
|
|
}),]}>
|
|
- <Input placeholder='请输入角色名称'/>
|
|
|
|
|
|
+ <Input placeholder='请输入角色名称' autoComplete='off'/>
|
|
</Form.Item>
|
|
</Form.Item>
|
|
<Form.Item
|
|
<Form.Item
|
|
label="角色描述"
|
|
label="角色描述"
|
|
name='remark'>
|
|
name='remark'>
|
|
- <Input placeholder='请输入角色描述' />
|
|
|
|
|
|
+ <Input placeholder='请输入角色描述' autoComplete='off'/>
|
|
</Form.Item>
|
|
</Form.Item>
|
|
<Form.Item
|
|
<Form.Item
|
|
label="排序"
|
|
label="排序"
|
|
@@ -178,8 +185,15 @@ function ContentForm(props){
|
|
tabDatas.map((it,i)=>{
|
|
tabDatas.map((it,i)=>{
|
|
return (
|
|
return (
|
|
<TabPane tab={it.title} key={i}>
|
|
<TabPane tab={it.title} key={i}>
|
|
- <Form.Item key={i} name={['softwares', i, 'softwareMenuIds']} noStyle>
|
|
|
|
- <MenuTree data={it} checkEv={(checkedKeys,sourceIds)=>checkTreeEvent(i,checkedKeys,sourceIds)}/>
|
|
|
|
|
|
+ <Form.Item
|
|
|
|
+ key={i}
|
|
|
|
+ name={['softwares', i, 'softwareMenuIds']}
|
|
|
|
+ valuePropName='checked'
|
|
|
|
+ getValueFromEvent={(checked)=>{
|
|
|
|
+ console.log(321,checked)
|
|
|
|
+ return [];
|
|
|
|
+ }} noStyle>
|
|
|
|
+ <MenuTree data={it} checkeds={form.getFieldValue().softwares?form.getFieldValue().softwares[i]:[]} checkEv={(checkedKeys,sourceIds)=>checkTreeEvent(i,checkedKeys,sourceIds)}/>
|
|
</Form.Item>
|
|
</Form.Item>
|
|
<Form.Item key={i+"a"} hidden={true} name={['softwares', i, 'id']} noStyle>
|
|
<Form.Item key={i+"a"} hidden={true} name={['softwares', i, 'id']} noStyle>
|
|
<Input/>
|
|
<Input/>
|
|
@@ -198,8 +212,12 @@ function ContentForm(props){
|
|
<Space>
|
|
<Space>
|
|
<Form.Item
|
|
<Form.Item
|
|
name='status'
|
|
name='status'
|
|
|
|
+ valuePropName='checked'
|
|
|
|
+ getValueFromEvent={(checked)=>{
|
|
|
|
+ return +checked;
|
|
|
|
+ }}
|
|
noStyle>
|
|
noStyle>
|
|
- <Switch checked={form.status} onChange={switchStatus} />
|
|
|
|
|
|
+ <Switch />
|
|
</Form.Item>
|
|
</Form.Item>
|
|
<span>启用</span>
|
|
<span>启用</span>
|
|
</Space>
|
|
</Space>
|