import { sendRequest } from '@/utils/antdUtils';
|
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
|
import { PageContainer, } from '@ant-design/pro-components';
|
import { Button, Select, Row, Col, Input, Card, Space, Form, Upload, Spin, message, Cascader, InputNumber } from 'antd';
|
import { useState, useEffect } from 'react';
|
import { add, Edit, getDetail, regionTree, verifyPhone } from '../service';
|
import { history, useLocation, useSearchParams } from 'umi';
|
import { customRequest } from '@/utils/utils';
|
|
const AddOrEditOrDetail = () => {
|
const [form] = Form.useForm();
|
const [loading, setLoading] = useState(false);
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const [items, setItems] = useState([]);
|
const [adminLevel, setAdminLevel] = useState(1)
|
|
const [fileList, setFileList] = useState([])
|
const [community, setCommunity] = useState([])//社区
|
const [userInfo, setUserInfo] = useState({})
|
|
const formItemLayout = {
|
labelCol: { span: 6 },
|
wrapperCol: { span: 10 },
|
}
|
const uploadButton = (
|
<button
|
style={{
|
border: 0,
|
background: 'none',
|
}}
|
type="button"
|
>
|
{loading ? <LoadingOutlined /> : <PlusOutlined />}
|
<div
|
style={{
|
marginTop: 8,
|
}}
|
></div>
|
</button>
|
);
|
|
const config = {
|
name: 'file',
|
action: 'https://huacheng.psciio.com/api/huacheng-communitybackstage/communitypartybuilding/uploadimage',
|
headers: {
|
Authorization: 'Bearer ' + localStorage.getItem('token')
|
},
|
};
|
|
useEffect(() => {
|
regionTree({}).then(res => {
|
setItems(() => res.data)
|
})
|
let adminInfo = JSON.parse(localStorage.getItem('userInfo'))
|
setAdminLevel(() => adminInfo.accountLevel)//角色权限1市级2区县3街道4社区5党员
|
if (adminInfo.accountLevel == 4) {
|
form.setFieldsValue({
|
community: [adminInfo.communityId.toString()]
|
})
|
}
|
|
|
if (searchParams.get('id')) {
|
getDetail(searchParams.get('id')).then(res => {
|
setUserInfo(() => res.data)
|
res.data.community = [res.data.districtsCode, res.data.streetId, res.data.communityId.toString()]
|
setCommunity(() => res.data.community)
|
if (res.data.avatar) {
|
setFileList(() => [{ url: res.data.avatar, uid: '1' }])
|
}
|
form.setFieldsValue(res.data)
|
})
|
}
|
}, [])
|
// 上传前
|
const beforeUpload = (file) => {
|
return new Promise((resolve, reject) => {
|
if (file.name.includes(',')) {
|
message.warning('上传图片名字不能包含英文逗号(,)');
|
return Upload.LIST_IGNORE;
|
}
|
setLoading(true)
|
resolve(file);
|
});
|
};
|
const handleChange = ({ file, fileList: newFileList }) => {
|
if (file.status == 'error' || (file.status == 'done' && file.response.code != 200)) {
|
setLoading(false)
|
message.error('上传失败')
|
return
|
}
|
if (file.status == 'done' && file.response.code == 200) {
|
setLoading(false)
|
message.success('上传成功')
|
}
|
let list = newFileList.map((item) => {
|
if (item.status == 'done') {
|
if (!item.url) {
|
item.url = item.response.data;
|
}
|
}
|
return item.url
|
});
|
setFileList(() => newFileList)
|
};
|
|
const submit = () => {
|
form.validateFields().then(async (values) => {
|
if (fileList.length == 0) {
|
message.warning('请上传头像')
|
return
|
}
|
let params = { ...values }
|
let adminInfo = JSON.parse(localStorage.getItem('userInfo'))
|
params.communityId = params.community.length > 0 ? params.community[params.community.length - 1] : ''
|
params.streetId = params.community.length > 1 ? params.community[params.community.length - 2] : adminInfo.streetId
|
params.districtsCode = params.community.length == 3 ? params.community[0] : adminInfo.districtsCode
|
delete params.community
|
params.avatar = fileList[0].url
|
if (searchParams.get('id')) {
|
params.id = searchParams.get('id')
|
let res = await Edit(params)
|
if (res.code == 200) {
|
message.success('编辑成功')
|
history.back()
|
}
|
} else {
|
let res = await add(params)
|
if (res.code == 200) {
|
message.success('添加成功')
|
history.back()
|
}
|
}
|
|
})
|
}
|
const checkIdCard = (rule, value) => {
|
const reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
|
if ((!reg.test(value)) && value) {
|
return Promise.reject('请输入正确的身份证号码');
|
}
|
return Promise.resolve();
|
};
|
const checkPhone = async (rule, value) => {
|
const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
|
if ((!reg.test(value)) && value) {
|
return Promise.reject('请输入正确的手机号码');
|
}
|
if (Object.keys(userInfo).length > 0 && userInfo.phone == value) {
|
return Promise.resolve()
|
}
|
const res = await verifyPhone({ phone:value })
|
if (res.data === true) {
|
return Promise.reject('该手机号已注册党员信息');
|
} else {
|
return Promise.resolve();
|
}
|
|
|
};
|
const checkPhoneUse = async (e) => {
|
if (Object.keys(userInfo).length > 0 && userInfo.phone == e.target.value) {
|
return Promise.resolve()
|
}
|
try {
|
const res = await verifyPhone({ phone: e.target.value })
|
if (res.data === false) {
|
form.setFields([
|
{
|
name: 'phone',
|
errors: ['该手机号已注册党员信息'],
|
// touched: true
|
}
|
])
|
} else {
|
form.setFields([
|
{
|
name: 'phone',
|
errors: [],
|
touched: true
|
}
|
])
|
}
|
} catch (error) {
|
form.setFields([
|
{
|
name: 'phone',
|
errors: ['验证手机号失败，请重试'],
|
touched: true
|
}
|
])
|
}
|
}
|
|
|
|
return (
|
<PageContainer title={searchParams.get('detail') ? '党员详情' : searchParams.get('id') ? '编辑党员' : '添加党员'}>
|
<Spin spinning={loading}>
|
<Form scrollToFirstError layout="horizontal" {...formItemLayout} form={form}>
|
<Card style={{ background: '#fff', paddingTop: '15px' }}>
|
<Row>
|
<Col span={12}>
|
<Form.Item
|
name="name"
|
label='姓名'
|
rules={[{ required: true, message: '请输入党员姓名' }]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入'></Input>
|
</Form.Item>
|
<Form.Item
|
name="phone"
|
label='联系电话'
|
validateTrigger={['onBlur']}
|
rules={[
|
{ required: true, message: '请输入党员联系电话' },
|
{ validator: checkPhone }
|
]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入' maxLength={11}></Input>
|
</Form.Item>
|
<Form.Item
|
name="idNumber"
|
label='身份证号' rules={[{ required: true, message: '请输入党员身份证号' }, { validator: checkIdCard }]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入' maxLength={18}></Input>
|
</Form.Item>
|
|
<Form.Item
|
name="community"
|
label='所在社区'
|
rules={[{ required: true, message: '请选择所在社区' }]}
|
>
|
<Cascader
|
disabled={searchParams.get('detail') || adminLevel == 4}
|
options={items}
|
fieldNames={{ value: 'id', label: 'name' }}
|
placeholder="请选择"
|
onChange={(value, label) => {
|
setCommunity(() => label)
|
}}
|
// displayRender={(label) => label[label.length - 1]}
|
// changeOnSelect={true}
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="serviceTarget"
|
label='服务对象'
|
// rules={[ { required: true,message: '请输入服务对象'}]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入'></Input>
|
</Form.Item>
|
<Form.Item
|
name="partyOrganization"
|
label='所在党组织'
|
// rules={[ { required: true,message: '请输入所在党组织'}]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入'></Input>
|
</Form.Item>
|
|
<Form.Item
|
name="avatar"
|
label="头像上传"
|
// extra={
|
// <div>
|
// <div>推荐尺寸732px * 320px</div>
|
// </div>
|
// }
|
rules={[
|
{
|
required: true,
|
message: '请上传头像',
|
},
|
]}
|
>
|
<Upload
|
{...config}
|
listType="picture-card"
|
maxCount={1}
|
beforeUpload={beforeUpload}
|
onChange={handleChange}
|
onRemove={() => {
|
setFileList([])
|
form.setFieldsValue({
|
avatar: null
|
})
|
form.validateFields(['avatar'])
|
}}
|
showUploadList={{
|
showPreviewIcon: false,
|
}}
|
// customRequest={customRequest}
|
accept="image/png, image/jpeg, image/jpg"
|
fileList={fileList}
|
disabled={searchParams.get('detail')}
|
>
|
{fileList?.length == 1 || searchParams.get('detail') ? null : uploadButton}
|
</Upload>
|
</Form.Item>
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
<Space size='large'>
|
<Button onClick={() => history.back()}>关闭</Button>
|
{
|
!searchParams.get('detail') && <Button type='primary' onClick={submit}>确认</Button>
|
}
|
</Space>
|
</div>
|
</Col>
|
</Row>
|
|
</Card>
|
</Form>
|
</Spin>
|
</PageContainer >
|
);
|
}
|
|
export default AddOrEditOrDetail
|
