| | |
| | | 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, systemPostList, systemRoleList, getSystemUserInfo, getCityList, addSystemUserInfo, editSystemUserInfo } from '../service'; |
| | |
| | | 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([]) |
| | |
| | | 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({}) |
| | |
| | | |
| | | useEffect(() => { |
| | | // 获取单位 |
| | | setTimeout(() => { |
| | | getDepartmentList(1).then(res => { |
| | | setOneCompanyList(() => res.data) |
| | | }) |
| | | getDepartmentList(2).then(res => { |
| | | setTwoCompanyList(() => res.data) |
| | | }) |
| | | }, 2000); |
| | | setTimeout(() => { |
| | | getDepartmentList(3).then(res => { |
| | | setThreeCompanyList(() => res.data) |
| | | }) |
| | | getDepartmentList(4).then(res => { |
| | | setFourCompanyList(() => res.data) |
| | | }) |
| | | }, 4000); |
| | | |
| | | }, []) |
| | | |
| | | useImperativeHandle(ref, () => { |
| | | return { |
| | | refreshData: (data, type) => { |
| | | 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; |
| | | } |
| | | |
| | | |
| | | |
| | | if (data.id) { |
| | | getInfo(data.id) |
| | | } |
| | | setData(()=>data) |
| | | setData(() => data) |
| | | if (data.unitId) { |
| | | let result = [] |
| | | findParent(companyList, data.unitId * 1, result) |
| | | form.setFieldsValue({ DepartmentId: result }) |
| | | } |
| | | }, |
| | | clean: () => { |
| | | setSpinning(false) |
| | |
| | | const okHandle = () => { |
| | | form.validateFields().then((values) => { |
| | | values.password = CryptoJS.MD5(values.password).toString(); |
| | | values.districts=activeCounty.name |
| | | values.street=activeStreet.name |
| | | values.community=activeCommunity.name |
| | | 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) |
| | |
| | | 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) |
| | |
| | | if (res.data.communityId) { |
| | | setActiveCommunity({ name: res.data.community, id: res.data.communityId }) |
| | | } |
| | | delete res.data.password |
| | | form.setFieldsValue(res.data) |
| | | // 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 ( |
| | |
| | | </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'} |
| | |
| | | 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="所属二级单位" |
| | |
| | | > |
| | | </Select > |
| | | </Form.Item> |
| | | </Col> |
| | | </Col> */} |
| | | </Row> |
| | | <Row> |
| | | {/* <Row> |
| | | <Col span={8}> |
| | | <Form.Item |
| | | name="fourDepartmentId" |
| | |
| | | </Select > |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | </Row> */} |
| | | <Row> |
| | | <Col span={8}> |
| | | <Form.Item |
| | |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | onChange={(e) => setActiveLevel(e)} |
| | | disabled={data.type == 'detail'} |
| | | placeholder="请选择" |
| | | options={levelList} |
| | |
| | | rules={[{ required: true, message: '是否管理员' }]} |
| | | > |
| | | <Radio.Group |
| | | disabled={data.type == 'detail'} |
| | | disabled={data.type == 'detail'} |
| | | // style={style} |
| | | // onChange={onChange} |
| | | // value={value} |
| | |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | <Row> |
| | | <Col span={8}> |
| | | <Form.Item |
| | | name="districtsCode" |
| | | label="所属区县" |
| | | rules={[{ required: true, message: '请选择所属区县' }]} |
| | | > |
| | | {/* <Select |
| | | {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="请选择" |
| | |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | | > |
| | | </Select > */} |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | disabled={data.type == 'detail'} |
| | | onChange={changeCountry} |
| | | value={activeCounty.id} |
| | | placeholder="请选择" |
| | | options={countyList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | | // filterOption={false} |
| | | > |
| | | </Select > |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item |
| | | name="streetId" |
| | | label="所属街道" |
| | | rules={[{ required: true, message: '请选择所属街道' }]} |
| | | > |
| | | <Select |
| | | onChange={changeStreet} |
| | | disabled={!activeCounty || data.type == 'detail'} |
| | | key="searchSelect" |
| | | allowClear |
| | | value={activeStreet.id} |
| | | placeholder="请选择" |
| | | options={streetList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | | > |
| | | </Select > |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item |
| | | name="communityId" |
| | | label="所属社区" |
| | | rules={[{ required: true, message: '请选择所属社区' }]} |
| | | > |
| | | <Select |
| | | onChange={changeCommunity} |
| | | disabled={!activeStreet || data.type == 'detail'} |
| | | key="searchSelect" |
| | | allowClear |
| | | value={activeCommunity.id} |
| | | placeholder="请选择" |
| | | options={communityList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | | > |
| | | </Select > |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | | <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 }} |
| | |
| | | <div style={{ display: "flex", flex: 1 }}> |
| | | <Form.Item |
| | | name="phone" |
| | | |
| | | rules={[{ |
| | | validator: (rule, value) => { |
| | | return new Promise((resolve, reject) => { |
| | |
| | | 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(''); |
| | |
| | | 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(''); |