| | |
| | | import { forwardRef, useImperativeHandle, useState } from 'react'; |
| | | import { useEffect } from 'react'; |
| | | import { getDepartmentList, systemPostList, systemRoleList, getSystemUserInfo, getCityList, addSystemUserInfo, editSystemUserInfo } from '../service'; |
| | | import { Color } from 'antd/es/color-picker'; |
| | | import CryptoJS from 'crypto-js'; |
| | | const formItemLayout = { |
| | | labelCol: { span: 8 }, |
| | | wrapperCol: { span: 16 }, |
| | |
| | | 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 [levelList, setLevelList] = useState([{ name: '市级账号', value: 1 }, { name: '区县账号', value: 2 }, { name: '街道账号', value: 3 }, { name: '社区账号', value: 4 }, { name: '党员账号', value: 5 }]) |
| | | //所属区县 |
| | | const [countyList, setCountyList] = useState([]) |
| | | const [activeCounty, setActiveCounty] = useState('') |
| | | const [activeCounty, setActiveCounty] = useState({}) |
| | | //所属街道 |
| | | const [streetList, setStreetList] = useState([]) |
| | | const [activeStreet, setActiveStreet] = useState('') |
| | | const [activeStreet, setActiveStreet] = useState({}) |
| | | //所属社区 |
| | | const [communityList, setCommunityList] = useState([]) |
| | | // const [activeCommunity, setActiveCommunity] = useState({}) |
| | | const [activeCommunity, setActiveCommunity] = useState({}) |
| | | |
| | | |
| | | |
| | |
| | | setThreeCompanyList(() => res.data) |
| | | }) |
| | | getDepartmentList(4).then(res => { |
| | | setThreeCompanyList(() => res.data) |
| | | setFourCompanyList(() => res.data) |
| | | }) |
| | | }, 4000); |
| | | }, []) |
| | |
| | | useImperativeHandle(ref, () => { |
| | | return { |
| | | refreshData: (data, type) => { |
| | | setDetailType(type || false) |
| | | |
| | | getCountyList() |
| | | systemPostList({ pageNum: 1, pageSize: 10000 }).then(res => { |
| | | setPositionList(() => res.data.records) |
| | |
| | | if (data.id) { |
| | | getInfo(data.id) |
| | | } |
| | | setData(data) |
| | | setData(()=>data) |
| | | }, |
| | | clean: () => { |
| | | setSpinning(false) |
| | |
| | | // 保存 |
| | | const okHandle = () => { |
| | | form.validateFields().then((values) => { |
| | | console.log('value',values) |
| | | values.password = CryptoJS.MD5(values.password).toString(); |
| | | values.districts=activeCounty.name |
| | | values.street=activeStreet.name |
| | | values.community=activeCommunity.name |
| | | if (data.id) { |
| | | values.id = data.id |
| | | onUpdate(values) |
| | |
| | | }) |
| | | } |
| | | const changeCountry = (value, label) => { |
| | | console.log('区县', value,'11111111',label); |
| | | setActiveCounty(value) |
| | | setActiveCounty(label) |
| | | getStreetList(value) |
| | | |
| | | } |
| | | const changeStreet = (value) => { |
| | | console.log('街道', value); |
| | | setActiveStreet(value) |
| | | const changeStreet = (value, label) => { |
| | | setActiveStreet(label) |
| | | getcommunityList(value) |
| | | } |
| | | const changeCommunity = (value) => { |
| | | console.log('社区', value); |
| | | // setActiveCommunity(value) |
| | | 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 |
| | | form.setFieldsValue(res.data) |
| | | }) |
| | | } |
| | | |
| | |
| | | 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}> |
| | |
| | | label="姓名" |
| | | rules={[{ required: true, message: '请输入人员姓名' }]} |
| | | > |
| | | <Input disabled={detailType} placeholder='请输入人员姓名' /> |
| | | <Input disabled={data.type == 'detail'} placeholder='请输入人员姓名' /> |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |
| | |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | disabled={data.type == 'detail'} |
| | | placeholder="请选择" |
| | | options={oneCompanyList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | disabled={data.type == 'detail'} |
| | | placeholder="请选择" |
| | | options={twoCompanyList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | disabled={data.type == 'detail'} |
| | | placeholder="请选择" |
| | | options={threeCompanyList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | disabled={data.type == 'detail'} |
| | | placeholder="请选择" |
| | | options={fourCompanyList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | disabled={data.type == 'detail'} |
| | | placeholder="请选择" |
| | | options={positionList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | disabled={data.type == 'detail'} |
| | | placeholder="请选择" |
| | | options={roleList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | disabled={data.type == 'detail'} |
| | | placeholder="请选择" |
| | | options={levelList} |
| | | fieldNames={{ label: 'name', value: 'value' }} |
| | |
| | | rules={[{ required: true, message: '是否管理员' }]} |
| | | > |
| | | <Radio.Group |
| | | disabled={data.type == 'detail'} |
| | | // style={style} |
| | | // onChange={onChange} |
| | | // value={value} |
| | |
| | | <Select |
| | | key="searchSelect" |
| | | allowClear |
| | | disabled={data.type == 'detail'} |
| | | onChange={changeCountry} |
| | | value={activeCounty} |
| | | value={activeCounty.id} |
| | | placeholder="请选择" |
| | | options={countyList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | |
| | | > |
| | | <Select |
| | | onChange={changeStreet} |
| | | disabled={!activeCounty} |
| | | disabled={!activeCounty || data.type == 'detail'} |
| | | key="searchSelect" |
| | | allowClear |
| | | value={activeStreet.id} |
| | | placeholder="请选择" |
| | | options={streetList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | |
| | | rules={[{ required: true, message: '请选择所属社区' }]} |
| | | > |
| | | <Select |
| | | disabled={!activeStreet} |
| | | onChange={changeCommunity} |
| | | disabled={!activeStreet || data.type == 'detail'} |
| | | key="searchSelect" |
| | | allowClear |
| | | value={activeCommunity.id} |
| | | placeholder="请选择" |
| | | options={communityList} |
| | | fieldNames={{ label: 'name', value: 'id' }} |
| | |
| | | }, |
| | | }]} |
| | | > |
| | | <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> |
| | |
| | | }, |
| | | }]} |
| | | > |
| | | <Input.Password disabled={detailType} placeholder='请输入' /> |
| | | <Input.Password disabled={data.type == 'detail'} placeholder='请输入' /> |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={16}> |
| | |
| | | }, |
| | | },]} |
| | | > |
| | | <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> |