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