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 } 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 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 eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOjE4OTI0MjE4MjgwODU4Mzc4MjYsInR5cGUiOjEsImV4cCI6MTc0MTY1OTg5MywiY3JlYXRlZCI6MTc0MDM2Mzg5MzE2MH0.o3Gc0g1LAo_kkL3X3QrC6qKwztxsp6psoTcpTreDzQUXGqPzUXw89fNSR5YKz8gzhtSuSKI2d6TJJYPX1IQCgw',
|
},
|
};
|
|
useEffect(() => {
|
let adminInfo = JSON.parse(localStorage.getItem('userInfo'))
|
setAdminLevel(() => adminInfo.accountLevel)//角色权限1市级2区县3街道4社区5党员
|
}, [])
|
// 上传前
|
const beforeUpload = (file, type) => {
|
return new Promise(async (resolve, reject) => {
|
if (file.name.includes(',')) {
|
message.warning('上传图片名字不能包含英文逗号(,)');
|
return Upload.LIST_IGNORE;
|
}
|
console.log('============================================')
|
setLoading(false)
|
|
resolve(file);
|
});
|
};
|
const handleChange = ({ file: file, fileList: newFileList }, type) => {
|
console.log(file, 'newfilelist', newFileList, 'type', type)
|
if (file.status == 'error') {
|
setLoading(false)
|
// setFileList([])
|
message.error('上传失败')
|
return
|
}
|
if (file.status == 'done') {
|
setLoading(false)
|
message.success('上传成功')
|
}
|
let list = newFileList.map((item) => {
|
if (item.status == 'done') {
|
if (!item.url) {
|
item.url = item.response.data;
|
}
|
}
|
return item.url
|
});
|
console.log('newFileList', newFileList, 'list', list)
|
// if (type == 1) {
|
// setImageUrl1(newFileList)
|
// } else if (type == 2) {
|
// setImageUrl(newFileList)
|
// }
|
};
|
|
const submit = () => {
|
form.validateFields().then(async (values) => {
|
|
})
|
}
|
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)) {
|
return Promise.reject('请输入正确的身份证号码');
|
}
|
return Promise.resolve();
|
};
|
const checkPhone = (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)) {
|
return Promise.reject('请输入正确的手机号码');
|
}
|
return Promise.resolve();
|
};
|
const checkPhoneUse = (e) => {
|
console.log('eeeeeeeeee', e.target.value)
|
}
|
|
|
|
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="name"
|
label='联系电话' rules={[{ required: true, message: '请输入党员联系电话' }, { validator: checkPhone }]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入' maxLength={11} onBlur={checkPhoneUse} ></Input>
|
</Form.Item>
|
<Form.Item
|
name="idcard"
|
label='身份证号' rules={[{ required: true, message: '请输入党员身份证号' }, { validator: checkIdCard }]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入' maxLength={18}></Input>
|
</Form.Item>
|
|
<Form.Item
|
name="name"
|
label='所在社区'
|
rules={[{ required: true, message: '请选择所在社区' }]}
|
>
|
<Cascader
|
disabled={searchParams.get('detail') || adminLevel == 4}
|
options={items}
|
fieldNames={{ value: 'key', label: 'name' }}
|
placeholder="请选择"
|
displayRender={(label) => label[label.length - 1]}
|
changeOnSelect={true}
|
/>
|
</Form.Item>
|
|
<Form.Item
|
name="name"
|
label='服务对象'
|
// rules={[ { required: true,message: '请输入服务对象'}]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入'></Input>
|
</Form.Item>
|
<Form.Item
|
name="name"
|
label='所在党组织'
|
// rules={[ { required: true,message: '请输入所在党组织'}]}
|
>
|
<Input disabled={searchParams.get('detail')} placeholder='请输入'></Input>
|
</Form.Item>
|
|
<Form.Item
|
name="image"
|
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({
|
image: ''
|
})
|
}}
|
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
|
