H5/threeSide.git

			@@ -1,10 +1,11 @@
			import { Form, Input, Modal, Tree, Button, Spin } from 'antd';
			import { Form, Input, Modal, Tree, Button, Spin, Row, Col, Select } from 'antd';
			import { forwardRef, useImperativeHandle, useState } from 'react';
			import { useEffect } from 'react';
			import { getTree, getAddTree } from '../service';
			import { Color } from 'antd/es/color-picker';
			const formItemLayout = {
			labelCol: { span: 6 },
			wrapperCol: { span: 18 },
			labelCol: { span: 8 },
			wrapperCol: { span: 16 },
			};


			@@ -15,6 +16,27 @@
			const [treeSeletKeys, setTreeSeletKeys] = useState([]); //勾选权限
			const [detailType, setDetailType] = useState(false);//是否详情
			const [spinning, setSpinning] = useState(false);

			const [oneCompanyList, setOneCompanyList] = useState([])
			const [twoCompanyList, setTwoCompanyList] = useState([])
			const [threeCompanyList, setThreeCompanyList] = useState([])
			const [fourCompanyList, setFourCompanyList] = useState([])

			//所属职位
			const [positionList, setPositionList] = useState([])
			//所属角色
			const [roleList, setRoleList] = useState([])
			//账号层级
			const [levelList, setLevelList] = useState([])
			//所属区县
			const [countyList, setCountyList] = useState([])
			//所属街道
			const [streetList, setStreetList] = useState([])
			//所属社区
			const [communityList, setCommunityList] = useState([])




			useEffect(() => {
			// 获取权限树
			@@ -57,78 +79,13 @@
			});
			};

			// 选中树
			const onCheck = (e, row) => {
			let seletKeys = e.checked;
			treeData.find(item => {
			if (item.children) {
			let arr1 = item.children.find((item1) => {//循环子路由
			if (item1.children) {
			let arr2 = item1.children.find((item2) => {//循环子路由下按钮
			return item2.id == row.node.id;
			});
			if (row.checked) {
			if (arr2 && !seletKeys.includes(item1.id)) {
			seletKeys.push(item1.id);
			}
			if (arr2 && !seletKeys.includes(item.id)) {
			seletKeys.push(item.id);
			}
			} else {
			let isCheck = item1.children.find((item2) => seletKeys.includes(item2.id));
			if (!isCheck) {
			let arr = seletKeys.filter((it) => it != item1.id);
			seletKeys = arr;
			}
			}
			}
			return item1.id == row.node.id;
			});
			if (row.checked) {
			if (arr1 && !seletKeys.includes(item.id)) {
			seletKeys.push(item.id);
			}
			} else {
			let isCheck = item.children.find((item1) => seletKeys.includes(item1.id));
			if (!isCheck) {
			let arr = seletKeys.filter((it) => it != item.id);
			seletKeys = arr;
			}
			}
			}
			return item.id == row.node.id;
			});
			if (row.node.children.length != 0) {
			row.node.children.map((item) => {
			if (row.checked) {
			if (!seletKeys.includes(item.id)) {
			seletKeys.push(item.id);
			}
			} else {
			seletKeys = seletKeys.filter((item1) => item1 != item.id);
			}
			if (item.children.length != 0) {
			item.children.map((item1) => {
			if (row.checked) {
			if (!seletKeys.includes(item1.id)) {
			seletKeys.push(item1.id);
			}
			} else {
			seletKeys = seletKeys.filter((item2) => item2 != item1.id);
			}
			});
			}
			});
			}
			setTreeSeletKeys(seletKeys);
			};

			return (
			<Modal
			getContainer={false}
			width="20%"
			width="65%"
			destroyOnClose
			title={detailType ? '角色详情' : data.id ? '编辑角色' : '添加角色'}
			title={detailType ? '人员详情' : data.id ? '编辑人员' : '添加人员'}
			open={visible}
			onCancel={() => onCancel(false)}
			afterClose={() => {
			@@ -148,41 +105,248 @@
			}
			>
			<Form layout="horizontal" {...formItemLayout} form={form} scrollToFirstError>
			<Form.Item
			name="name"
			label="角色名称"
			rules={[{ required: true, message: '请输入角色名称' }]}
			>
			<Input disabled={detailType} placeholder='请输入角色名称' />
			</Form.Item>
			<Form.Item
			name="tree"
			label="角色权限"
			rules={[{
			required: true,
			validator: (rule, value) => {
			return new Promise((resolve, reject) => {
			if (value) {
			resolve('');
			} else {
			if (treeSeletKeys.length === 0) {
			reject(new Error('请选择角色权限'));
			}
			resolve('');
			}
			})
			}
			}]}>
			<Tree
			checkable
			checkStrictly
			checkedKeys={treeSeletKeys}
			treeData={treeData}
			disabled={detailType}
			fieldNames={{ title: 'name', key: 'id' }}
			onCheck={onCheck}
			/>
			</Form.Item>
			<Row>
			<Col span={8}>
			<Form.Item
			name="name"
			label="姓名"
			rules={[{ required: true, message: '请输入人员姓名' }]}
			>
			<Input disabled={detailType} placeholder='请输入人员姓名' />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={8}>
			<Form.Item
			name="name"
			label="所属一级单位"
			rules={[{ required: true, message: '请选择所属一级单位' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={oneCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			<Col span={8}>
			<Form.Item
			name="name"
			label="所属二级单位"
			rules={[{ required: true, message: '请选择所属二级单位' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={twoCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			<Col span={8}>
			<Form.Item
			name="name"
			label="所属三级单位"
			rules={[{ required: true, message: '请选择所属三级单位' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={threeCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={8}>
			<Form.Item
			name="name"
			label="所属四级单位"
			rules={[{ required: true, message: '请选择所属四级单位' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={fourCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={8}>
			<Form.Item
			name="name"
			label="所属职位"
			rules={[{ required: true, message: '请选择所属职位' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={positionList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			<Col span={8}>
			<Form.Item
			name="name"
			label="所属角色"
			rules={[{ required: true, message: '请选择所属角色' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={roleList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={8}>
			<Form.Item
			name="name"
			label="账号层级"
			rules={[{ required: true, message: '请选择账号层级' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={levelList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			<Col span={16}>
			{/* <div style={{ display: "flex",flex:1 }}> */}
			<Form.Item
			label="是否管理员"
			labelCol={{ span: 4 }}
			wrapperCol={{ span: 20 }}
			style={{marginBottom:0}}
			>
			<div style={{ display: "flex", flex: 1 }}>
			<Form.Item
			name="name"
			rules={[{ required: true, message: '请选择账号层级' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			style={{width:'280px'}}
			placeholder="请选择"
			dataSource={levelList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			<div style={{fontSize:'12px',Color:"rgba(0,0,0,0.5)"}}>管理员主要用于接收实现临期提醒，以及上级端登录</div>
			</div>


			</Form.Item>

			{/* <div>管理员主要用于接收实现临期提醒，以及上级端登录</div>
			</div> */}
			</Col>
			</Row>
			<Row>
			<Col span={8}>
			<Form.Item
			name="name"
			label="所属区县"
			rules={[{ required: true, message: '请选择所属区县' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={oneCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			<Col span={8}>
			<Form.Item
			name="name"
			label="所属街道"
			rules={[{ required: true, message: '请选择所属街道' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={twoCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			<Col span={8}>
			<Form.Item
			name="name"
			label="所属社区"
			rules={[{ required: true, message: '请选择所属社区' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			dataSource={threeCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={16}>
			<div style={{ display: 'flex' }}>

			</div>
			</Col>

			</Row>
			<Row>
			<Col span={8}>
			</Col>
			<Col span={8}>
			</Col>
			<Col span={8}>
			</Col>
			</Row>


			</Form>
			<Spin spinning={spinning} fullscreen />
			</Modal >