H5/threeSide.git

			@@ -1,8 +1,8 @@
			import { Form, Input, Modal, Tree, Button, Spin, Row, Col, Select, Radio } from 'antd';
			import { Form, Input, Modal, Tree, Button, Spin, Row, Col, Select, Radio, Cascader } from 'antd';
			import { forwardRef, useImperativeHandle, useState } from 'react';
			import { useEffect } from 'react';
			import { getDepartmentList } from '../service';
			import { Color } from 'antd/es/color-picker';
			import { getDepartmentList, systemPostList, systemRoleList, getSystemUserInfo, getCityList, addSystemUserInfo, editSystemUserInfo } from '../service';
			import CryptoJS from 'crypto-js';
			const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 16 },
			@@ -12,15 +12,15 @@
			const AddAndEdit = ({ visible, onSave, onUpdate, onCancel }, ref) => {
			const [form] = Form.useForm();
			const [data, setData] = useState({})
			const [treeData, setTreeData] = useState([]);//权限树
			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 [adminLevel, setAdminLevel] = useState(1)

			//所属职位
			const [positionList, setPositionList] = useState([])
			@@ -28,44 +28,96 @@
			const [roleList, setRoleList] = useState([])
			//账号层级
			const [levelList, setLevelList] = useState([{ name: '市级账号', value: 1 }, { name: '区县账号', value: 2 }, { name: '街道账号', value: 3 }, { name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
			//选择的层级
			const [activeLevel, setActiveLevel] = useState('')
			//所属区县
			const [countyList, setCountyList] = useState([])
			const [activeCounty, setActiveCounty] = useState({})
			//所属街道
			const [streetList, setStreetList] = useState([])
			const [activeStreet, setActiveStreet] = useState({})
			//所属社区
			const [communityList, setCommunityList] = useState([])
			const [activeCommunity, setActiveCommunity] = useState({})




			useEffect(() => {
			// 获取单位
			getDepartmentList(1).then(res => {
			setOneCompanyList(() => res.data)
			})
			getDepartmentList(2).then(res => {
			setTwoCompanyList(() => res.data)
			})
			getDepartmentList(3).then(res => {
			setThreeCompanyList(() => res.data)
			})
			getDepartmentList(4).then(res => {
			setThreeCompanyList(() => res.data)
			})

			}, [])

			useImperativeHandle(ref, () => {
			return {
			refreshData: (data, type) => {
			setDetailType(type \|\| false)
			if (data.id) {
			// 获取角色的权限树
			getTree(data.id).then(res => {
			setTreeSeletKeys(res.data.systemMenuIds \|\| []);
			})
			refreshData: (data, companyList) => {
			getCountyList()
			setOneCompanyList(() => companyList)
			console.log('companyList', companyList)

			systemPostList({ pageNum: 1, pageSize: 10000 }).then(res => {
			setPositionList(() => res.data.records)
			})
			systemRoleList({ pageNum: 1, pageSize: 10000 }).then(res => {
			setRoleList(() => res.data.records)
			})
			// 权限判断
			let adminInfo = JSON.parse(localStorage.getItem('userInfo'))
			setAdminLevel(() => adminInfo.accountLevel)
			switch (adminInfo.accountLevel) {
			case 1:
			setLevelList(() => [{ name: '市级账号', value: 1 }, { name: '区县账号', value: 2 }, { name: '街道账号', value: 3 }, { name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
			break;
			case 2:
			getStreetList(adminInfo.districtsCode)
			setLevelList(() => [{ name: '区县账号', value: 2 }, { name: '街道账号', value: 3 }, { name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
			this.$nextTick(() => {
			form.setFieldsValue({ districtsCode: adminInfo.districtsCode })
			})

			break;
			case 3:
			getStreetList(adminInfo.districtsCode)
			getcommunityList(adminInfo.streetId)
			setLevelList(() => [{ name: '街道账号', value: 3 }, { name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
			form.setFieldsValue({ districtsCode: adminInfo.districtsCode })
			form.setFieldsValue({ streetId: adminInfo.streetId })
			break;
			case 4:
			getStreetList(adminInfo.districtsCode)
			getcommunityList(adminInfo.streetId)
			setLevelList(() => [{ name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }])
			// this.$nextTick(() => {
			form.setFieldsValue({ districtsCode: adminInfo.districtsCode })
			form.setFieldsValue({ streetId: adminInfo.streetId })
			form.setFieldsValue({ communityId: adminInfo.communityId * 1 })
			// })


			break;
			case 5:
			getStreetList(adminInfo.districtsCode)
			getcommunityList(adminInfo.streetId)
			setLevelList(() => [{ name: '党员账号', value: 5 }])
			form.setFieldsValue({ districtsCode: adminInfo.districtsCode })
			form.setFieldsValue({ streetId: adminInfo.streetId })
			form.setFieldsValue({ communityId: adminInfo.communityId * 1 })
			break;
			default:
			break;
			}
			setData(data)
			form.setFieldsValue(data);



			if (data.id) {
			getInfo(data.id)
			}
			setData(() => data)
			if (data.unitId) {
			let result = []
			findParent(companyList, data.unitId * 1, result)
			form.setFieldsValue({ DepartmentId: result })
			}
			},
			clean: () => {
			setSpinning(false)
			@@ -76,9 +128,13 @@
			// 保存
			const okHandle = () => {
			form.validateFields().then((values) => {
			setSpinning(true)
			values.menuIds = treeSeletKeys
			delete values.tree
			values.password = CryptoJS.MD5(values.password).toString();
			if (values.DepartmentId) {
			values.oneDepartmentId = values.DepartmentId.length > 0 ? values.DepartmentId[0] : null
			values.twoDepartmentId = values.DepartmentId.length > 1 ? values.DepartmentId[1] : null
			values.threeDepartmentId = values.DepartmentId.length > 2 ? values.DepartmentId[2] : null
			values.fourDepartmentId = values.DepartmentId.length > 3 ? values.DepartmentId[3] : null
			}
			if (data.id) {
			values.id = data.id
			onUpdate(values)
			@@ -87,22 +143,107 @@
			}
			});
			};
			const getCountyList = (id) => {
			getCityList({ id: '510400', tier: 2 }).then(res => {
			setCountyList(() => res.data)
			})
			}
			const getStreetList = (id) => {
			getCityList({ id: id, tier: 3 }).then(res => {
			setStreetList(() => res.data)
			})
			}
			const getcommunityList = (id) => {
			getCityList({ id: id, tier: 4 }).then(res => {
			setCommunityList(() => res.data)
			})
			}
			const changeCountry = (value, label) => {
			setActiveCounty(label)
			getStreetList(value)
			form.setFieldsValue({ streetId: '', communityId: '' })
			setActiveCommunity({ name: '', id: '' })
			setActiveStreet({ name: '', id: '' })

			}
			const changeStreet = (value, label) => {
			setActiveStreet(label)
			getcommunityList(value)
			form.setFieldsValue({ communityId: '' })
			setActiveCommunity({ name: '', id: '' })
			}
			const changeCommunity = (value, label) => {
			setActiveCommunity(label)
			}
			const getInfo = (id) => {
			getSystemUserInfo(id).then(res => {
			if (res.data.districtsCode) {
			setActiveStreet({ name: res.data.districts, id: res.data.districtsCode })
			getStreetList(res.data.districtsCode)
			}
			if (res.data.streetId) {
			setActiveCounty({ name: res.data.street, id: res.data.streetId })
			getcommunityList(res.data.streetId)
			}
			if (res.data.communityId) {
			setActiveCommunity({ name: res.data.community, id: res.data.communityId })
			}
			// delete res.data.password

			let departmentId = []
			if (res.data.oneDepartmentId) {
			departmentId.push(res.data.oneDepartmentId)
			}
			if (res.data.twoDepartmentId) {
			departmentId.push(res.data.twoDepartmentId)
			}
			if (res.data.threeDepartmentId) {
			departmentId.push(res.data.threeDepartmentId)
			}
			if (res.data.fourDepartmentId) {
			departmentId.push(res.data.fourDepartmentId)
			}
			res.data.DepartmentId = departmentId
			console.log('departmentId', departmentId)
			setActiveLevel(() => res.data.accountLevel)

			form.setFieldsValue({ ...res.data, password: '' })
			})
			}
			const findParent = (data, target, result) => {
			for (let item of data) {
			if (item.id === target) {
			//将查找到的目标数据加入结果数组中
			//可根据需求unshift(item.id)或unshift(item)
			result.unshift(item.id)
			return true
			}
			if (item.children && item.children.length > 0) {
			//根据查找到的结果往上找父级节点
			let isFind = findParent(item.children, target, result)
			if (isFind) {
			result.unshift(item.id)
			return true
			}
			}
			}
			//走到这说明没找到目标
			return false
			}

			return (
			<Modal
			getContainer={false}
			width="65%"
			destroyOnClose
			title={detailType ? '人员详情' : data.id ? '编辑人员' : '添加人员'}
			title={data.type == 'detail' ? '人员详情' : data.type == 'edit' ? '编辑人员' : '添加人员'}
			open={visible}
			onCancel={() => onCancel(false)}
			afterClose={() => {
			form.resetFields()
			setTreeSeletKeys([])
			}}
			footer={
			!detailType ?
			(data.type == 'edit' \|\| data.type == 'add') ?
			[
			<Button key="back" onClick={() => onCancel(false)}>取消</Button>,
			<Button key="submit" type="primary" onClick={okHandle}>
			@@ -121,29 +262,39 @@
			label="姓名"
			rules={[{ required: true, message: '请输入人员姓名' }]}
			>
			<Input disabled={detailType} placeholder='请输入人员姓名' />
			<Input disabled={data.type == 'detail'} placeholder='请输入人员姓名' />
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={8}>
			<Col span={16}>
			<Form.Item
			name="oneDepartmentId"
			label="所属一级单位"
			rules={[{ required: true, message: '请选择所属一级单位' }]}
			name="DepartmentId"
			label="所属单位"
			labelCol={{ span: 4 }}
			rules={[{ required: true, message: '请选择所属单位' }]}
			>
			<Select
			{/* <Select
			key="searchSelect"
			allowClear
			disabled={data.type == 'detail'}
			placeholder="请选择"
			options={oneCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Select > */}
			<Cascader
			changeSelect
			options={oneCompanyList}
			fieldNames={{ value: 'key', label: 'name' }}
			placeholder="请选择"
			// displayRender={(label) => label[label.length - 1]}
			changeOnSelect={true}
			/>
			</Form.Item>
			</Col>
			<Col span={8}>
			{/* <Col span={8}>
			<Form.Item
			name="twoDepartmentId"
			label="所属二级单位"
			@@ -151,6 +302,7 @@
			<Select
			key="searchSelect"
			allowClear
			disabled={data.type == 'detail'}
			placeholder="请选择"
			options={twoCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			@@ -167,6 +319,7 @@
			<Select
			key="searchSelect"
			allowClear
			disabled={data.type == 'detail'}
			placeholder="请选择"
			options={threeCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			@@ -174,9 +327,9 @@
			>
			</Select >
			</Form.Item>
			</Col>
			</Col> */}
			</Row>
			<Row>
			{/* <Row>
			<Col span={8}>
			<Form.Item
			name="fourDepartmentId"
			@@ -185,6 +338,7 @@
			<Select
			key="searchSelect"
			allowClear
			disabled={data.type == 'detail'}
			placeholder="请选择"
			options={fourCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			@@ -193,7 +347,7 @@
			</Select >
			</Form.Item>
			</Col>
			</Row>
			</Row> */}
			<Row>
			<Col span={8}>
			<Form.Item
			@@ -204,6 +358,7 @@
			<Select
			key="searchSelect"
			allowClear
			disabled={data.type == 'detail'}
			placeholder="请选择"
			options={positionList}
			fieldNames={{ label: 'name', value: 'id' }}
			@@ -221,6 +376,7 @@
			<Select
			key="searchSelect"
			allowClear
			disabled={data.type == 'detail'}
			placeholder="请选择"
			options={roleList}
			fieldNames={{ label: 'name', value: 'id' }}
			@@ -240,6 +396,8 @@
			<Select
			key="searchSelect"
			allowClear
			onChange={(e) => setActiveLevel(e)}
			disabled={data.type == 'detail'}
			placeholder="请选择"
			options={levelList}
			fieldNames={{ label: 'name', value: 'value' }}
			@@ -261,6 +419,7 @@
			rules={[{ required: true, message: '是否管理员' }]}
			>
			<Radio.Group
			disabled={data.type == 'detail'}
			// style={style}
			// onChange={onChange}
			// value={value}
			@@ -274,63 +433,89 @@
			</Form.Item>
			</Col>
			</Row>
			<Row>
			<Col span={8}>
			<Form.Item
			name="districts"
			label="所属区县"
			rules={[{ required: true, message: '请选择所属区县' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			{activeLevel != 1 && (
			<Row>
			{[2, 3, 4, 5].includes(activeLevel) && (
			<Col span={8}>
			<Form.Item
			name="districtsCode"
			label="所属区县"
			rules={[{ required: true, message: '请选择所属区县' }]}
			>
			{/* <Select
			// onChange={changeCountry}
			// value={activeCounty}
			placeholder="请选择"
			options={oneCompanyList}
			options={levelList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			<Col span={8}>
			<Form.Item
			name="street"
			label="所属街道"
			rules={[{ required: true, message: '请选择所属街道' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			options={twoCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			<Col span={8}>
			<Form.Item
			name="community"
			label="所属社区"
			rules={[{ required: true, message: '请选择所属社区' }]}
			>
			<Select
			key="searchSelect"
			allowClear
			placeholder="请选择"
			options={threeCompanyList}
			fieldNames={{ label: 'name', value: 'id' }}
			filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			</Row>
			</Select > */}
			<Select
			key="searchSelect"
			allowClear
			disabled={data.type == 'detail' \|\| [2, 3, 4, 5].includes(adminLevel)}
			onChange={changeCountry}
			value={activeCounty.id}
			placeholder="请选择"
			options={countyList}
			fieldNames={{ label: 'name', value: 'id' }}
			// filterOption={false}
			>
			</Select >
			</Form.Item>
			</Col>
			)}
			{[3, 4, 5].includes(activeLevel) && (
			<Col span={8}>
			<Form.Item
			name="streetId"
			label="所属街道"
			rules={[{ required: true, message: '请选择所属街道' }]}
			>
			<Select
			onChange={changeStreet}
			disabled={!activeCounty \|\| data.type == 'detail' \|\| [3, 4, 5].includes(adminLevel)}
			key="searchSelect"
			allowClear
			value={activeStreet.id}
			placeholder="请选择"
			options={streetList}
			fieldNames={{ label: 'name', value: 'id' }}
			>
			</Select >
			</Form.Item>
			</Col>
			)}

			{[4, 5].includes(activeLevel) && (
			<Col span={8}>
			<Form.Item
			name="communityId"
			label="所属社区"
			rules={[{ required: true, message: '请选择所属社区' }]}
			>
			<Select
			onChange={changeCommunity}
			disabled={!activeStreet \|\| data.type == 'detail' \|\| [4, 5].includes(adminLevel)}
			key="searchSelect"
			allowClear
			value={activeCommunity.id}
			placeholder="请选择"
			options={communityList}
			fieldNames={{ label: 'name', value: 'id' }}
			>
			</Select >
			</Form.Item>
			</Col>
			)}
			</Row>
			)}

			<Row>
			<Col span={16}>
			<Form.Item
			label="联系方式"
			required
			labelCol={{ span: 4 }}
			wrapperCol={{ span: 20 }}
			style={{ marginBottom: 0 }}
			@@ -338,6 +523,7 @@
			<div style={{ display: "flex", flex: 1 }}>
			<Form.Item
			name="phone"

			rules={[{
			validator: (rule, value) => {
			return new Promise((resolve, reject) => {
			@@ -353,7 +539,7 @@
			},
			}]}
			>
			<Input disabled={detailType} placeholder='请输入联系方式' />
			<Input disabled={data.type == 'detail'} placeholder='请输入联系方式' />
			</Form.Item>
			<div style={{ fontSize: '12px', color: "rgba(0,0,0,0.5)", marginLeft: "10px" }}>联系方式将作为登录账号使用</div>
			</div>
			@@ -363,17 +549,17 @@
			<Row>
			<Col span={8}>
			<Form.Item
			required
			required={data.type == 'add'}
			name="password"
			label="登录密码"
			rules={[{
			validator: (rule, value) => {
			return new Promise((resolve, reject) => {
			if (!value) {
			if (!value && data.type == 'add') {
			reject('请输入新密码');
			}
			const passwordRegex = /^(?=.[a-z])(?=.[A-Z])(?=.\d)(?=.[@$!%?&])[A-Za-z\d@$!%?&]{8,}$/;
			if (!passwordRegex.test(value)) {
			if (!passwordRegex.test(value) && data.type == 'add') {
			reject('密码需要包含大小写字母，数字和特殊符号，且长度为8位以上');
			}
			resolve('');
			@@ -381,13 +567,13 @@
			},
			}]}
			>
			<Input.Password disabled={detailType} placeholder='请输入' />
			<Input.Password disabled={data.type == 'detail'} placeholder='请输入' />
			</Form.Item>
			</Col>
			<Col span={16}>
			<Form.Item
			label="确认密码"
			required
			required={data.type == 'add'}
			labelCol={{ span: 4 }}
			wrapperCol={{ span: 20 }}
			style={{ marginBottom: 0 }}
			@@ -398,10 +584,10 @@
			rules={[{
			validator: (rule, value) => {
			return new Promise((resolve, reject) => {
			if (!value) {
			if (!value && data.type == 'add') {
			reject('请再次输入新密码');
			}
			if (value != form.getFieldValue('password')) {
			if (value != form.getFieldValue('password') && data.type == 'add') {
			reject('两次密码请保持一致');
			}
			resolve('');
			@@ -409,7 +595,7 @@
			},
			},]}
			>
			<Input.Password disabled={detailType} placeholder='请输入' />
			<Input.Password disabled={data.type == 'detail'} placeholder='请输入' />
			</Form.Item>
			<div style={{ fontSize: '12px', color: "rgba(0,0,0,0.5)", marginLeft: "10px" }}>密码需要包含大小写字母，数字和特殊符号，且长度为8位以上</div>
			</div>