Skip to content

C
CivManage
Commit 37504d29 authored by mayongxin's avatar mayongxin
Browse files
Options

角色选择组件优化

parent 89f2dd41
Hide whitespace changes
Inline Side-by-side
Showing with 304 additions and 236 deletions
src/pages/platformCenter/messageManage/projectManage/ProjectManage.less
View file @ 37504d29
.project_container{ .project_container {
width: 100%; width: 100%;
height: calc(100vh - 124px); height: calc(100vh - 124px);
.operate_bar{ .operate_bar {
width: 100%; width: 100%;
height: 60px; height: 60px;
background-color: white; background-color: white;
...@@ -10,32 +10,37 @@ ...@@ -10,32 +10,37 @@
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.template_type{
.template_type {
height: 60px; height: 60px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.title{
.title {
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
} }
.fast_search{
.fast_search {
height: 60px; height: 60px;
margin-right: 10px; margin-right: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.title{
.title {
margin-left: 20px; margin-left: 20px;
margin-right: 5px; margin-right: 5px;
} }
} }
} }
.list_view{
.list_view {
width: 100%; width: 100%;
height: calc(100vh - 184px); height: calc(100vh - 184px);
background-color: white; background-color: white;
...@@ -43,4 +48,4 @@ ...@@ -43,4 +48,4 @@
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
} }
} }
\ No newline at end of file
src/pages/platformCenter/messageManage/projectManage/components/EditModal.jsx
View file @ 37504d29
...@@ -221,6 +221,9 @@ const EditModal = props => { ...@@ -221,6 +221,9 @@ const EditModal = props => {
} }
const onPushSubmit = (value) => {
console.log(value, "onPushSubmit")
}
return ( return (
<SiteModal <SiteModal
...@@ -264,7 +267,7 @@ const EditModal = props => { ...@@ -264,7 +267,7 @@ const EditModal = props => {
name="to_person" name="to_person"
> >
<VisibleRoleModal /> <VisibleRoleModal onSubmit={onPushSubmit} />
</Item> </Item>
<Item <Item
label="定时计划" label="定时计划"
......
src/pages/platformCenter/messageManage/projectManage/components/RolseSelect/VisibleRoleModal.jsx
View file @ 37504d29
...@@ -7,6 +7,8 @@ import classnames from 'classnames'; ...@@ -7,6 +7,8 @@ import classnames from 'classnames';
import styles from './VisibleRoleModal.less' import styles from './VisibleRoleModal.less'
import { ManOutlined } from '@ant-design/icons'; import { ManOutlined } from '@ant-design/icons';
import { RoleGroupList } from '@/services/platform/messagemanage' import { RoleGroupList } from '@/services/platform/messagemanage'
import { useTheme } from 'bizcharts';
const checkIsGroup = node => const checkIsGroup = node =>
node.children?.length > 0; node.children?.length > 0;
...@@ -19,7 +21,10 @@ const VisibleRoleModal = props => { ...@@ -19,7 +21,10 @@ const VisibleRoleModal = props => {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [previewVisible, setPreviewVisible] = useState(false) const [previewVisible, setPreviewVisible] = useState(false)
const [selectRole, setSelectRole] = useState([]) const [selectRole, setSelectRole] = useState([])
const [dataTree,setDataTree] = useState([]) const [dataTree, setDataTree] = useState([])
const [dataLeafs, setDataLeafs] = useState([])
const [selectValues, setSelectValues] = useState([])
const { onSubmit } = props
const GetRoleGroupList = () => { const GetRoleGroupList = () => {
...@@ -27,46 +32,57 @@ const VisibleRoleModal = props => { ...@@ -27,46 +32,57 @@ const VisibleRoleModal = props => {
res => { res => {
//数据转换 //数据转换
let tree = [] let tree = []
res.data.roleList.map((item,index)=>{ let leafs = []
res.data.roleList.map((item, index) => {
tree.push({ tree.push({
name:item.visibleTitle, name: item.visibleTitle,
id:index, id: index,
children:item.roleList.map((roleItem)=>{ children: item.roleList.map((roleItem) => {
return( leafs.push({
name: roleItem.roleName,
id: roleItem.roleID,
})
return (
{ {
name:roleItem.roleName, name: roleItem.roleName,
id:roleItem.roleName, id: roleItem.roleID,
children:[] children: []
} }
) )
}) })
}) })
}) })
setDataTree(tree) setDataTree(tree)
setDataLeafs(leafs)
} }
) )
} }
useEffect(() => { useEffect(() => {
setSelectRole(props.value) setSelectRole(props.value)
GetRoleGroupList() GetRoleGroupList()
}, [props]) }, [props])
const onSubmit = () => {
}
const handleCancel = () => { const handleCancel = () => {
setPreviewVisible(false) setPreviewVisible(false)
} }
const handleOk = () => { const handleOk = () => {
setPreviewVisible(false) setPreviewVisible(false)
onSubmit && onSubmit(selectValues)
} }
const handleClick = () => { const handleClick = () => {
setPreviewVisible(true) setPreviewVisible(true)
} }
const onChange2 = (value) => { const onChange2 = (value) => {
console.log(value) console.log(value)
setSelectRole(value.toString()) const strArr = []
for (const item of value) {
strArr.push(item.name)
}
setSelectRole(strArr.toString())
setSelectValues(value)
} }
return ( return (
...@@ -90,7 +106,7 @@ const VisibleRoleModal = props => { ...@@ -90,7 +106,7 @@ const VisibleRoleModal = props => {
> >
<div className={styles.list_card}> <div className={styles.list_card}>
<ListCard {...props} onChange2={onChange2} data={dataTree}/> <ListCard {...props} onChange2={onChange2} data={dataTree} dataLeafs={dataLeafs} />
</div> </div>
</SiteModal> </SiteModal>
</div> </div>
...@@ -113,7 +129,7 @@ const checkChildrenByCondition = ( ...@@ -113,7 +129,7 @@ const checkChildrenByCondition = (
const ListCard = props => { const ListCard = props => {
const { onChange, onChange2 ,data} = props const { onChange, onChange2, data, dataLeafs } = props
const [changedItem, setChangedItem] = useState({ item: {} }); const [changedItem, setChangedItem] = useState({ item: {} });
const [valueList, setValueList] = useState([]); const [valueList, setValueList] = useState([]);
...@@ -122,13 +138,19 @@ const ListCard = props => { ...@@ -122,13 +138,19 @@ const ListCard = props => {
const result = data.map(item => getAllID(item)).flat(Infinity); const result = data.map(item => getAllID(item)).flat(Infinity);
setValueList(result); setValueList(result);
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
onChange && onChange(result); const fliterResult = filterChildren(result)
onChange2 && onChange2(result); const strArr = []
for (const item of fliterResult) {
strArr.push(item.name)
}
onChange && onChange(strArr.toString())
onChange2 && onChange2(fliterResult)
} else { } else {
setValueList([]); setValueList([]);
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
onChange && onChange([]); const fliterResult = filterChildren(result)
onChange2 && onChange2(result); onChange && onChange(fliterResult)
onChange2 && onChange2(fliterResult)
} }
}; };
...@@ -144,6 +166,19 @@ const ListCard = props => { ...@@ -144,6 +166,19 @@ const ListCard = props => {
} }
return result; return result;
}; };
const filterChildren = (select) => {
let selectLeafs = []
for (const leaf of dataLeafs) {
for (const id of select) {
if (id == leaf.id) {
selectLeafs.push(leaf)
}
}
}
return selectLeafs
}
const updateValueList = (checkedKeys, childrenKeys, sourceItem) => { const updateValueList = (checkedKeys, childrenKeys, sourceItem) => {
const removekeys = _.difference(childrenKeys, checkedKeys); const removekeys = _.difference(childrenKeys, checkedKeys);
...@@ -152,12 +187,21 @@ const ListCard = props => { ...@@ -152,12 +187,21 @@ const ListCard = props => {
setValueList(result); setValueList(result);
if (sourceItem) setChangedItem(sourceItem); if (sourceItem) setChangedItem(sourceItem);
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
onChange && onChange(result);
onChange2 && onChange2(result);
// onChange && onChange(result);
// onChange2 && onChange2(result);
const fliterResult = filterChildren(result)
const strArr = []
for (const item of fliterResult) {
strArr.push(item.name)
}
onChange && onChange(strArr.toString())
onChange2 && onChange2(fliterResult)
} }
useEffect(() => { useEffect(() => {
}, []) }, [])
return ( return (
<div> <div>
......
src/pages/platformCenter/messageManage/templateManage/components/AddModal.jsx
View file @ 37504d29
import React, {useState,useEffect } from 'react' import React, { useState, useEffect } from 'react'
import SiteModal from '@/components/Modal/SiteModa'; import SiteModal from '@/components/Modal/SiteModa';
import { Form, Input, notification, Select } from 'antd' import { Form, Input, notification, Select } from 'antd'
const { Item } = Form; const { Item } = Form;
const { TextArea } = Input;
const AddModal = props => { const AddModal = props => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const onSubmit = () => { const onSubmit = () => {
let result = form.getFieldValue() form.submit()
props.onSubmit&props.onSubmit({...result})
}
const onSubmitSuccess = () => {
const result = form.getFieldValue()
props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result })
} }
// useEffect(()=>{ // useEffect(()=>{
// },[props.template]) // },[props.template])
return ( return (
<SiteModal <SiteModal
...@@ -30,96 +36,99 @@ const AddModal = props => { ...@@ -30,96 +36,99 @@ const AddModal = props => {
onOk={() => onSubmit()} onOk={() => onSubmit()}
confirmLoading={loading} confirmLoading={loading}
> >
<Form form={form} labelCol={{ span: 4 }}> <div style={{ width: "750px", height: "400px", overflowY: "scroll" }}>
<Item <Form form={form} labelCol={{ span: 4 }} onFinish={onSubmitSuccess}>
label="模板名称" <Item
name="name" label="模板名称"
rules={[ name="name"
{ rules={[
required: true, {
message: '请输入模板名称', required: true,
}, message: '请输入模板名称',
]} },
> ]}
<Input placeholder="请输入模板名称" /> >
</Item> <Input placeholder="请输入模板名称" />
<Item </Item>
label="模板类型" <Item
name="type" label="模板类型"
rules={[ name="type"
{ rules={[
required: true, {
message: '请选择模板类型', required: true,
}, message: '请选择模板类型',
]} },
> ]}
<Select defaultValue={"公众号"}> >
<Option value="公众号">公众号</Option> <Select defaultValue={"公众号"}>
<Option value="短信">短信</Option> <Option value="公众号">公众号</Option>
</Select> <Option value="短信">短信</Option>
</Item> </Select>
<Item </Item>
label="第三方模板名称" <Item
name="third_name" label="第三方模板名称"
rules={[ name="third_name"
{ rules={[
required: true, {
message: '请输入第三方模板名称', required: true,
}, message: '请输入第三方模板名称',
]} },
> ]}
<Input placeholder="请输入模板名称" /> >
</Item> <Input placeholder="请输入模板名称" />
<Item </Item>
label="第三方模板编号" <Item
name="third_id" label="第三方模板编号"
rules={[ name="third_id"
{ rules={[
required: true, {
message: '请输入第三方模板编号', required: true,
}, message: '请输入第三方模板编号',
]} },
> ]}
<Input placeholder="请输入模板名称" /> >
</Item> <Input placeholder="请输入模板名称" />
<Item </Item>
label="模板参数" <Item
name="params" label="模板参数"
rules={[ name="params"
{ rules={[
required: true, {
message: '请输入模板参数', required: true,
}, message: '请输入模板参数',
]} },
> ]}
<Input placeholder="请输入模板参数" /> >
</Item> <TextArea rows={4} placeholder="请输入模板参数" />
<Item </Item>
label="参数说明" <Item
name="desc" label="参数说明"
rules={[ name="desc"
{ rules={[
required: true, {
message: '请输入参数说明', required: true,
}, message: '请输入参数说明',
]} },
> ]}
<Input placeholder="请输入参数说明" /> >
</Item> <TextArea rows={4} placeholder="请输入参数说明" />
<Item </Item>
label="参数解析" <Item
name="analysis_params" label="参数解析"
rules={[ name="analysis_params"
{ rules={[
required: true, {
message: '请输入参数解析', required: true,
}, message: '请输入参数解析',
]} },
> ]}
<Input placeholder="请输入参数解析" /> >
</Item> <TextArea rows={4} placeholder="请输入参数解析" />
</Item>
</Form>
</div>
</Form>
</SiteModal> </SiteModal>
) )
} }
......
src/pages/platformCenter/messageManage/templateManage/components/EditModal.jsx
View file @ 37504d29
import React, {useState,useEffect } from 'react' import React, { useState, useEffect } from 'react'
import SiteModal from '@/components/Modal/SiteModa'; import SiteModal from '@/components/Modal/SiteModa';
import { Form, Input, notification, Select } from 'antd' import { Form, Input, notification, Select } from 'antd'
const { Item } = Form;
const { Item } = Form;
const { TextArea } = Input;
const EditModal = props => { const EditModal = props => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const onSubmit = () => { const onSubmit = () => {
let result = form.getFieldValue() form.submit()
props.onSubmit&props.onSubmit({Id:props.template.Id,...result})
}
const onSubmitSuccess =()=>{
const result = form.getFieldValue()
props.onSubmit & props.onSubmit({ Id: props.template.Id, ...result })
} }
useEffect(()=>{ useEffect(() => {
form.setFieldsValue({ form.setFieldsValue({
name:props.template.name, name: props.template.name,
type:props.template.type, type: props.template.type,
third_name:props.template.third_name, third_name: props.template.third_name,
third_id:props.template.third_id, third_id: props.template.third_id,
params:props.template.template_params, params: props.template.template_params,
desc:props.template.desc, desc: props.template.desc,
analysis_params:props.template.analysis_params, analysis_params: props.template.analysis_params,
}) })
},[props.template]) }, [props.template])
return ( return (
<SiteModal <SiteModal
{...props} {...props}
...@@ -38,96 +44,98 @@ const EditModal = props => { ...@@ -38,96 +44,98 @@ const EditModal = props => {
onOk={() => onSubmit()} onOk={() => onSubmit()}
confirmLoading={loading} confirmLoading={loading}
> >
<Form form={form} labelCol={{ span: 4 }}> <div style={{width:"750px",height:"400px",overflowY:"scroll"}}>
<Item <Form form={form} labelCol={{ span: 4 }} onFinish={onSubmitSuccess}>
label="模板名称" <Item
name="name" label="模板名称"
rules={[ name="name"
{ rules={[
required: true, {
message: '请输入模板名称', required: true,
}, message: '请输入模板名称',
]} },
> ]}
<Input placeholder="请输入模板名称" /> >
</Item> <Input placeholder="请输入模板名称" />
<Item </Item>
label="模板类型" <Item
name="type" label="模板类型"
rules={[ name="type"
{ rules={[
required: true, {
message: '请选择模板类型', required: true,
}, message: '请选择模板类型',
]} },
> ]}
<Select > >
<Option value="公众号">公众号</Option> <Select >
<Option value="短信">短信</Option> <Option value="公众号">公众号</Option>
</Select> <Option value="短信">短信</Option>
</Item> </Select>
<Item </Item>
label="第三方模板名称" <Item
name="third_name" label="第三方模板名称"
rules={[ name="third_name"
{ rules={[
required: true, {
message: '请输入第三方模板名称', required: true,
}, message: '请输入第三方模板名称',
]} },
> ]}
<Input placeholder="请输入模板名称" /> >
</Item> <Input placeholder="请输入模板名称" />
<Item </Item>
label="第三方模板编号" <Item
name="third_id" label="第三方模板编号"
rules={[ name="third_id"
{ rules={[
required: true, {
message: '请输入第三方模板编号', required: true,
}, message: '请输入第三方模板编号',
]} },
> ]}
<Input placeholder="请输入模板名称" /> >
</Item> <Input placeholder="请输入模板名称" />
<Item </Item>
label="模板参数" <Item
name="params" label="模板参数"
rules={[ name="params"
{ rules={[
required: true, {
message: '请输入模板参数', required: true,
}, message: '请输入模板参数',
]} },
> ]}
<Input placeholder="请输入模板参数" /> >
</Item> <TextArea rows={4} placeholder="请输入模板参数" />
<Item </Item>
label="参数说明" <Item
name="desc" label="参数说明"
rules={[ name="desc"
{ rules={[
required: true, {
message: '请输入参数说明', required: true,
}, message: '请输入参数说明',
]} },
> ]}
<Input placeholder="请输入参数说明" /> >
</Item> <TextArea rows={4} placeholder="请输入参数说明" />
<Item </Item>
label="参数解析" <Item
name="analysis_params" label="参数解析"
rules={[ name="analysis_params"
{ rules={[
required: true, {
message: '请输入参数解析', required: true,
}, message: '请输入参数解析',
]} },
> ]}
<Input placeholder="请输入参数解析" /> >
</Item> <TextArea rows={4} placeholder="请输入参数解析" />
</Item>
</Form> </Form>
</div>
</SiteModal> </SiteModal>
) )
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment