From 573193bb8ba686b06b5132cd233f953cc06d310d Mon Sep 17 00:00:00 2001
From: 落日与鲸 <10806022+gong-jinbao@user.noreply.gitee.com>
Date: 星期五, 28 二月 2025 18:41:19 +0800
Subject: [PATCH] Merge branch 'master' of http://120.76.84.145:10101/gitblit/r/H5/threeSide
---
management/src/pages/setting/user/components/addAndEdit.jsx | 392 +++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 289 insertions(+), 103 deletions(-)
diff --git a/management/src/pages/setting/user/components/addAndEdit.jsx b/management/src/pages/setting/user/components/addAndEdit.jsx
index d5e7f2e..1120903 100644
--- a/management/src/pages/setting/user/components/addAndEdit.jsx
+++ b/management/src/pages/setting/user/components/addAndEdit.jsx
@@ -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>
--
Gitblit v1.7.1